/* ========== RESPONSIVE ========== */ .sidebar-close { display: none; } @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform var(--dur-mid) var(--ease); z-index: 160; box-shadow: var(--elev-3); } .sidebar.open { transform: translateX(0); } .menu-toggle { display: flex; } .sidebar-close { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--outline-variant); border-radius: 8px; background: var(--surface-container-high); color: var(--on-surface); font-size: 1.5rem; line-height: 1; cursor: pointer; } .brand-area { padding-right: 56px; } .sidebar-close:active { background: var(--surface-container-highest); } .form-row { grid-template-columns: 1fr; } .content-area { padding: 16px; } .stat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } .top-bar { padding: 0 12px; } .content-area { padding: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========== 蓝奏云多条链接 + 密码 ========== */ .lanzou-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .lanzou-row .lanzou-url { flex: 1 1 auto; min-width: 0; } .lanzou-row .lanzou-pwd { flex: 0 0 40%; } .lanzou-del { flex: 0 0 auto; padding: 8px 10px; line-height: 1; } @media (max-width: 600px) { .lanzou-row { flex-wrap: wrap; } .lanzou-row .lanzou-url, .lanzou-row .lanzou-pwd { flex: 1 1 100%; } .lanzou-del { align-self: flex-end; } } /* ============================================================ 主题系统：auto（跟随系统）/ light / dark 默认 :root 为深色（MD3 dark）。以下提供亮色 token 与三态切换。 切换通过 控制；不设置则跟随系统。 ============================================================ */ :root { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --surface: #f6f6fb; --surface-container: #ececf3; --surface-container-high: #e3e3ec; --surface-container-highest: #dadbe6; --surface-variant: #e2e2ec; --on-surface: #1b1b22; --on-surface-variant: #45464f; --outline-variant: #c4c4d0; --primary: #3a5bdc; --on-primary: #ffffff; --primary-container: #dde3ff; --on-primary-container: #0b1d6b; --secondary-container: #e0e0f5; --on-secondary-container: #1d1d3a; --tertiary-container: #ffe0e9; --on-tertiary-container: #5a1030; --error: #b3261e; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #410e0b; --success-container: #d8f5dd; --on-success-container: #0a3d18; --scrim: rgba(0, 0, 0, 0.32); --shadow: 0 2px 12px rgba(20, 20, 40, 0.12); } } html[data-theme="light"] { color-scheme: light; --surface: #f6f6fb; --surface-container: #ececf3; --surface-container-high: #e3e3ec; --surface-container-highest: #dadbe6; --surface-variant: #e2e2ec; --on-surface: #1b1b22; --on-surface-variant: #45464f; --outline-variant: #c4c4d0; --primary: #3a5bdc; --on-primary: #ffffff; --primary-container: #dde3ff; --on-primary-container: #0b1d6b; --secondary-container: #e0e0f5; --on-secondary-container: #1d1d3a; --tertiary-container: #ffe0e9; --on-tertiary-container: #5a1030; --error: #b3261e; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #410e0b; --success-container: #d8f5dd; --on-success-container: #0a3d18; --scrim: rgba(0, 0, 0, 0.32); --shadow: 0 2px 12px rgba(20, 20, 40, 0.12); } html[data-theme="dark"] { color-scheme: dark; }