_drawer.css 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /* resources/css/layout/_drawer.css
  2. 右侧 mobile 导航抽屉(nav drawer)。
  3. 来源:main.css 的 .bc-mobile-overlay / .bc-mobile-drawer 段落。
  4. 左侧内容抽屉(TOC、侧边栏)复用 Tabler Offcanvas,
  5. 通过 <x-ui.drawer side="start|end"> 组件控制方向,无需额外 CSS。
  6. */
  7. /* ── 遮罩 ── */
  8. .bc-mobile-overlay {
  9. display: none;
  10. position: fixed;
  11. inset: 0;
  12. background: rgba(0, 0, 0, 0.4);
  13. z-index: 1040;
  14. }
  15. .bc-mobile-overlay.open {
  16. display: block;
  17. }
  18. /* ── 抽屉面板 ── */
  19. .bc-mobile-drawer {
  20. position: fixed;
  21. top: 0;
  22. right: -100%;
  23. width: 240px;
  24. height: 100vh;
  25. background: var(--wp-card-bg);
  26. border-left: 1px solid var(--wp-border);
  27. z-index: 1050;
  28. transition: right 0.25s ease;
  29. padding: 1rem 0;
  30. box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  31. }
  32. .bc-mobile-drawer.open {
  33. right: 0;
  34. }
  35. /* ── 抽屉头部 ── */
  36. .bc-mobile-drawer-header {
  37. display: flex;
  38. align-items: center;
  39. justify-content: space-between;
  40. padding: 0.5rem 1.25rem 0.75rem;
  41. border-bottom: 1px solid var(--wp-border);
  42. margin-bottom: 0.5rem;
  43. }
  44. .bc-mobile-drawer-header span {
  45. font-size: 0.85rem;
  46. font-weight: 600;
  47. color: var(--wp-ink-soft);
  48. }
  49. .bc-mobile-drawer-close {
  50. background: none;
  51. border: none;
  52. cursor: pointer;
  53. color: var(--wp-ink-muted);
  54. font-size: 1rem;
  55. line-height: 1;
  56. padding: 2px;
  57. }
  58. /* ── 抽屉导航链接 ── */
  59. .bc-mobile-nav {
  60. list-style: none;
  61. padding: 0;
  62. margin: 0;
  63. }
  64. .bc-mobile-nav li a {
  65. display: block;
  66. padding: 0.65rem 1.25rem;
  67. font-size: 0.9rem;
  68. color: var(--wp-ink-soft);
  69. text-decoration: none;
  70. border-bottom: 1px solid rgba(232, 221, 208, 0.5);
  71. transition: background 0.15s;
  72. }
  73. .bc-mobile-nav li a:hover {
  74. background: var(--wp-surface-alt);
  75. color: var(--wp-brand);
  76. }
  77. .bc-mobile-nav li a.active {
  78. color: var(--wp-brand);
  79. font-weight: 600;
  80. }