/* ========================================================= 响应式断点、深色模式、打印样式 ========================================================= */ /* ===================== 平板与手机 ===================== */ @media (max-width: 767px) { :root { --text-3xl: 1.5rem; --text-2xl: 1.25rem; --text-xl: 1.125rem; } /* 搜索框在窄屏收起，改由列表页筛选入口承担 */ .nav-search { display: none; } .nav-mobile-toggle { display: flex; } /* 导航从横排变成下拉面板 */ .nav-center { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: #071324; border-top: 1px solid #0f243e; padding: var(--space-3) var(--space-4); flex-direction: column; align-items: stretch; height: auto; margin-left: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .nav-center.open { display: flex; } .nav-link { width: 100%; padding: var(--space-3); border-radius: var(--radius-sm); border-bottom: none; height: auto; } .nav-link.active { background: #113259; } .card { padding: var(--space-4); } .card-bottom { flex-direction: column; align-items: flex-start; } .article-detail { padding: var(--space-5) var(--space-4); } .article-content { font-size: 14px; } .breadcrumb-current { max-width: 160px; } .post-nav-next { text-align: left; } .back-to-top { bottom: var(--space-4); right: var(--space-4); } } @media (max-width: 480px) { .nav-brand { font-size: var(--text-lg); } .nav-tagline { display: none; } .main-content { padding: var(--space-5) var(--space-3); } .section-heading-left { font-size: var(--text-base); } .article-content pre code { padding: var(--space-4); font-size: 12px; } } /* ========================================================= 深色模式 主题由 JS 显式写在 （见 index.html 内联脚本 与 js/theme.js），因此这里只需要一套覆盖值，不用区分系统偏好。 ========================================================= */ [data-theme='dark'] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #172032; --color-text: #cbd5e1; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-heading: #f1f5f9; --color-border: #334155; --color-border-light: #2a3850; --color-card-shadow: rgba(0, 0, 0, 0.3); --color-card-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); --color-tag-bg: #172032; --color-tag-text: #94a3b8; --color-tag-hover-bg: rgba(37, 99, 235, 0.15); --color-tag-hover-text: #60a5fa; --color-accent-bg: rgba(37, 99, 235, 0.12); --color-accent-text: #60a5fa; --color-accent-border: rgba(37, 99, 235, 0.35); --color-code-inline: #fb7185; } [data-theme='dark'] .navbar { background: linear-gradient(to right, rgba(6, 17, 36, 0.98), rgba(10, 30, 54, 0.98), rgba(5, 15, 29, 0.98)); } [data-theme='dark'] .filter-bar-label, [data-theme='dark'] .filter-bar-badge { color: #60a5fa; } [data-theme='dark'] .filter-bar-badge { background: rgba(37, 99, 235, 0.2); } [data-theme='dark'] .section-heading-bar { background: #60a5fa; } [data-theme='dark'] .breadcrumb-sep { color: var(--color-border); } [data-theme='dark'] .back-link { background: var(--color-surface-2); } [data-theme='dark'] .author-avatar { background: linear-gradient(135deg, #1e293b, #2563eb); } [data-theme='dark'] .social-btn { background: #0f172a; } [data-theme='dark'] .article-content mark { background-color: #a16207; color: #fef9c3; } [data-theme='dark'] .article-content pre { border-color: var(--color-border); } [data-theme='dark'] .footer { background: #0a1628; } [data-theme='dark'] .not-found-title { color: #334155; } [data-theme='dark'] ::-webkit-scrollbar-track { background: #0f172a; } [data-theme='dark'] ::-webkit-scrollbar-thumb { background: #475569; } [data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ===================== 动效偏好 ===================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===================== 打印 ===================== */ @media print { .navbar, .footer, .back-to-top, .sidebar, .toc-sidebar, .toc-mobile, .article-breadcrumb, .post-nav { display: none !important; } body { background: #ffffff; color: #000000; } .main-content { padding: 0; } .article-layout, .home-layout { display: block; max-width: none; } .article-detail { box-shadow: none; border: none; padding: 0; } .article-content pre { box-shadow: none; } .article-content a::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: #555555; } }