_navbar.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /* resources/css/layout/_navbar.css
  2. 顶部导航栏:面包屑 bar + desktop 导航链接 + mobile 汉堡按钮。
  3. 来源:main.css 的 .anthology-breadcrumb-bar、.bc-nav、.bc-hamburger 段落。
  4. 以 wiki.css 中同名规则为准(main.css 无冲突,wiki.css 中无同名规则,直接迁移)。
  5. */
  6. /* ── Breadcrumb bar ── */
  7. .anthology-breadcrumb-bar {
  8. background: rgba(255, 255, 255, 0.55);
  9. border-bottom: 1px solid var(--wp-border);
  10. padding: 0.5rem 0;
  11. }
  12. .anthology-breadcrumb-bar .bc-inner {
  13. display: flex;
  14. align-items: center;
  15. justify-content: space-between;
  16. gap: 1rem;
  17. }
  18. .anthology-breadcrumb-bar .breadcrumb {
  19. margin: 0;
  20. font-size: 0.78rem;
  21. flex-shrink: 0;
  22. }
  23. .anthology-breadcrumb-bar .breadcrumb-item a {
  24. color: var(--wp-brand);
  25. text-decoration: none;
  26. }
  27. .anthology-breadcrumb-bar .breadcrumb-item.active {
  28. color: var(--wp-ink-muted);
  29. }
  30. .anthology-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  31. color: var(--wp-ink-muted);
  32. }
  33. /* ── Hero 覆盖状态:breadcrumb bar 透明悬浮于 hero 之上 ── */
  34. .hero-wrapper:has(.hero-section) .anthology-breadcrumb-bar {
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. right: 0;
  39. z-index: 10;
  40. background: transparent;
  41. border-bottom: none;
  42. }
  43. .hero-wrapper:has(.hero-section) .bc-nav li a {
  44. color: white;
  45. }
  46. .hero-wrapper:has(.hero-section) .bc-nav li a:hover {
  47. color: rgba(255, 255, 255, 0.75);
  48. }
  49. .hero-wrapper:has(.hero-section) .bc-hamburger {
  50. border-color: rgba(255, 255, 255, 0.6);
  51. color: white;
  52. }
  53. /* ── Desktop 导航链接 ── */
  54. .bc-nav {
  55. display: flex;
  56. align-items: center;
  57. gap: 1.25rem;
  58. list-style: none;
  59. margin: 0;
  60. padding: 0;
  61. flex-shrink: 0;
  62. }
  63. .bc-nav li a {
  64. font-size: 0.82rem;
  65. color: var(--wp-ink-soft);
  66. text-decoration: none;
  67. white-space: nowrap;
  68. transition: color 0.15s;
  69. }
  70. .bc-nav li a:hover {
  71. color: var(--wp-brand);
  72. }
  73. .bc-nav li a.active {
  74. color: var(--wp-brand);
  75. font-weight: 600;
  76. }
  77. /* ── 汉堡按钮(mobile) ── */
  78. .bc-hamburger {
  79. display: none;
  80. background: none;
  81. border: 1px solid var(--wp-border);
  82. border-radius: 5px;
  83. padding: 4px 8px;
  84. cursor: pointer;
  85. color: var(--wp-ink-soft);
  86. line-height: 1;
  87. }
  88. .bc-hamburger:hover {
  89. border-color: var(--wp-brand);
  90. color: var(--wp-brand);
  91. }
  92. /* ── 响应式 ── */
  93. @media (max-width: 640px) {
  94. .bc-nav {
  95. display: none;
  96. }
  97. .bc-hamburger {
  98. display: inline-flex;
  99. align-items: center;
  100. }
  101. }