| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- /* resources/css/layout/_drawer.css
- 右侧 mobile 导航抽屉(nav drawer)。
- 来源:main.css 的 .bc-mobile-overlay / .bc-mobile-drawer 段落。
- 左侧内容抽屉(TOC、侧边栏)复用 Tabler Offcanvas,
- 通过 <x-ui.drawer side="start|end"> 组件控制方向,无需额外 CSS。
- */
- /* ── 遮罩 ── */
- .bc-mobile-overlay {
- display: none;
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.4);
- z-index: 1040;
- }
- .bc-mobile-overlay.open {
- display: block;
- }
- /* ── 抽屉面板 ── */
- .bc-mobile-drawer {
- position: fixed;
- top: 0;
- right: -100%;
- width: 240px;
- height: 100vh;
- background: var(--wp-card-bg);
- border-left: 1px solid var(--wp-border);
- z-index: 1050;
- transition: right 0.25s ease;
- padding: 1rem 0;
- box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
- }
- .bc-mobile-drawer.open {
- right: 0;
- }
- /* ── 抽屉头部 ── */
- .bc-mobile-drawer-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0.5rem 1.25rem 0.75rem;
- border-bottom: 1px solid var(--wp-border);
- margin-bottom: 0.5rem;
- }
- .bc-mobile-drawer-header span {
- font-size: 0.85rem;
- font-weight: 600;
- color: var(--wp-ink-soft);
- }
- .bc-mobile-drawer-close {
- background: none;
- border: none;
- cursor: pointer;
- color: var(--wp-ink-muted);
- font-size: 1rem;
- line-height: 1;
- padding: 2px;
- }
- /* ── 抽屉导航链接 ── */
- .bc-mobile-nav {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- .bc-mobile-nav li a {
- display: block;
- padding: 0.65rem 1.25rem;
- font-size: 0.9rem;
- color: var(--wp-ink-soft);
- text-decoration: none;
- border-bottom: 1px solid rgba(232, 221, 208, 0.5);
- transition: background 0.15s;
- }
- .bc-mobile-nav li a:hover {
- background: var(--wp-surface-alt);
- color: var(--wp-brand);
- }
- .bc-mobile-nav li a.active {
- color: var(--wp-brand);
- font-weight: 600;
- }
|