/* ========================================================================== 亮 / 暗主题（theme.css） - 暗色 = 各页面原始样式：本文件中不带前缀的规则只负责「主题切换控件」本身 - 亮色 = 全部用 html[data-theme="light"] 前缀覆盖（特异性高于各页 :root 与 组件规则，与加载顺序无关） - 偏好存 cookie site_theme=light|dark（前后台通用）；服务端按 cookie 渲染 与按钮选中态，无闪烁；交互见 assets/theme.js - 各页面 :root 里的 --accent-ink = 主色在当前主题下的「文字用色」 （亮色时把主色压深提高可读性），本文件不覆盖该变量 ========================================================================== */ /* ---------- 主题切换控件（两主题共用） ---------- */ .theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-shrink:0} .theme-opt{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:9px;background:transparent;color:var(--dim,#8a8a96);font-size:12px;font-weight:bold;font-family:inherit;line-height:1.2;cursor:pointer;transition:.2s;white-space:nowrap} .theme-opt svg{width:14px;height:14px;flex-shrink:0} .theme-opt:hover{color:var(--accent,#f59e0b)} .theme-opt.active{background:linear-gradient(135deg,var(--accent,#f59e0b),var(--accent2,#fbbf24));color:#1a1a1a;box-shadow:0 2px 10px rgba(245,158,11,.25)} /* 窄屏：只留图标，文字隐藏 */ @media(max-width:1080px){ .theme-switch .theme-opt{padding:6px 8px} .theme-switch .theme-opt span{display:none} } /* ---------- 单图标主题切换按钮（前台顶栏用，见 themeToggleHtml()） ---------- 只显示「当前主题」的图标：亮色 = 太阳、暗色 = 月亮；点击切到另一个主题，来回循环。 两个图标都在 DOM 里，靠 html[data-theme] 决定显示哪一个（服务端已渲染好主题，首屏不闪） */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;padding:0;border-radius:11px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:var(--dim,#8a8a96);cursor:pointer;transition:.2s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .theme-toggle:hover{color:var(--accent,#f59e0b);border-color:var(--accent,#f59e0b)} .theme-toggle:focus-visible{outline:2px solid var(--accent,#f59e0b);outline-offset:2px} .theme-toggle .theme-ico{display:none;align-items:center;justify-content:center} .theme-toggle svg{width:18px;height:18px;display:block} html[data-theme="dark"] .theme-toggle .theme-ico.moon{display:flex} html[data-theme="light"] .theme-toggle .theme-ico.sun{display:flex} html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.75);border-color:rgba(17,24,39,.12);box-shadow:0 1px 4px rgba(15,23,42,.06)} html[data-theme="light"] .theme-toggle:hover{color:var(--accent-ink,var(--accent));border-color:var(--accent-ink,var(--accent))} /* ---------- 亮色：全局 token ---------- */ html[data-theme="light"]{ --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.92); --border:rgba(17,24,39,.1); --border2:rgba(17,24,39,.16); --text:#1f2530; --dim:#646c80; } html[data-theme="light"] body::before{background:rgba(244,246,251,.86)} html[data-theme="light"] .theme-switch{background:rgba(255,255,255,.75);border-color:rgba(17,24,39,.12);box-shadow:0 1px 4px rgba(15,23,42,.06)} html[data-theme="light"] .theme-opt:hover{color:var(--accent-ink,var(--accent))} /* ---------- 亮色：大标题 / 白色文字 → 深色 ---------- */ html[data-theme="light"] .hero h1, html[data-theme="light"] .page-hero h1{background-image:linear-gradient(135deg,#1f2530 15%,var(--accent-ink,var(--accent)) 75%,#b45309)} html[data-theme="light"] .section-title, html[data-theme="light"] .card-body h3, html[data-theme="light"] .detail-header h1, html[data-theme="light"] .content-section h2, html[data-theme="light"] .download-box h3, html[data-theme="light"] .item-info h3, html[data-theme="light"] .link-name, html[data-theme="light"] .plan-name, html[data-theme="light"] .jump-name, html[data-theme="light"] #jumpNum, html[data-theme="light"] .card h2, html[data-theme="light"] .topbar h1{color:#1f2530} /* ---------- 亮色：主色文字（链接 / 徽标 / 强调） ---------- */ html[data-theme="light"] .nav-menu a:hover, html[data-theme="light"] .nav-menu a.active, html[data-theme="light"] .nav-user-name b, html[data-theme="light"] .nav-badge, html[data-theme="light"] .card-meta .dl-btn, html[data-theme="light"] .card-badge, html[data-theme="light"] .item-meta .cat, html[data-theme="light"] .pagination a:hover, html[data-theme="light"] .footer-copy a, html[data-theme="light"] .empty a, html[data-theme="light"] .cat-empty a, html[data-theme="light"] .detail-meta .accent, html[data-theme="light"] .info-item .value, html[data-theme="light"] .breadcrumb a, html[data-theme="light"] .result-info b, html[data-theme="light"] .jump-tip b, html[data-theme="light"] td a{color:var(--accent-ink,var(--accent))} html[data-theme="light"] .btn-login-dl{color:var(--accent-ink,var(--accent));border-color:rgba(245,158,11,.65)} html[data-theme="light"] .btn-login-dl:hover{color:#1a1a1a} html[data-theme="light"] .tag{color:var(--accent-ink,var(--accent));background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.35)} /* ---------- 亮色：顶部导航（nav.css 组件） ---------- */ html[data-theme="light"] .site-header{background:rgba(255,255,255,.78);border-bottom-color:rgba(17,24,39,.1);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 40px rgba(15,23,42,.08)} html[data-theme="light"] .nav-search{background:rgba(255,255,255,.85);border-color:rgba(17,24,39,.12);box-shadow:0 2px 12px rgba(15,23,42,.05),0 1px 0 rgba(255,255,255,.8) inset} html[data-theme="light"] .nav-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.15),0 0 24px rgba(245,158,11,.18)} html[data-theme="light"] .nav-btn{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12);box-shadow:0 1px 0 rgba(255,255,255,.8) inset} html[data-theme="light"] .nav-btn:hover{border-color:rgba(245,158,11,.55);color:var(--accent-ink,var(--accent))} html[data-theme="light"] .nav-burger{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .nav-burger:hover{border-color:rgba(245,158,11,.55);color:var(--accent-ink,var(--accent))} html[data-theme="light"] .nav-cat{background:rgba(255,255,255,.7);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .nav-cat:hover{color:#1f2530;border-color:rgba(17,24,39,.22);background:rgba(255,255,255,.95)} html[data-theme="light"] .nav-cat.active{color:#1f2530;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5)} html[data-theme="light"] .nav-mask{background:rgba(51,65,85,.4)} html[data-theme="light"] .nav-drawer{background:rgba(255,255,255,.97);border-left-color:rgba(17,24,39,.12);box-shadow:-24px 0 64px rgba(15,23,42,.18)} html[data-theme="light"] .drawer-head{border-bottom-color:rgba(17,24,39,.1)} html[data-theme="light"] .drawer-close{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .drawer-close:hover{border-color:rgba(245,158,11,.55);color:var(--accent-ink,var(--accent))} html[data-theme="light"] .drawer-account{background:rgba(255,255,255,.75);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .drawer-link{background:rgba(255,255,255,.7);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .drawer-link:hover{border-color:rgba(17,24,39,.22);background:rgba(255,255,255,.95)} html[data-theme="light"] .drawer-link.active{color:var(--accent-ink,var(--accent));border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)} html[data-theme="light"] .drawer-search{background:rgba(255,255,255,.85);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .drawer-stat{background:rgba(255,255,255,.75);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .drawer-rank-item{background:rgba(255,255,255,.7);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .drawer-rank-item:hover{border-color:rgba(17,24,39,.22);background:rgba(255,255,255,.95)} html[data-theme="light"] .drawer-rank-no{background:rgba(17,24,39,.06)} /* ---------- 亮色：页脚（全站） ---------- */ html[data-theme="light"] footer{background:rgba(255,255,255,.66);border-top-color:rgba(17,24,39,.1);box-shadow:0 -1px 0 rgba(255,255,255,.7) inset} html[data-theme="light"] .contact-item{background:rgba(255,255,255,.85);border-color:rgba(17,24,39,.1);box-shadow:0 2px 10px rgba(15,23,42,.05)} html[data-theme="light"] .contact-item:hover{box-shadow:0 8px 28px rgba(245,158,11,.18)} html[data-theme="light"] .wx-popup{background:rgba(255,255,255,.98);border-color:rgba(17,24,39,.1);box-shadow:0 12px 40px rgba(15,23,42,.16)} /* ---------- 亮色：玻璃卡片与通用块 ---------- */ html[data-theme="light"] .card, html[data-theme="light"] .detail-card, html[data-theme="light"] .link-card, html[data-theme="light"] .item, html[data-theme="light"] .auth-box, html[data-theme="light"] .jump-box, html[data-theme="light"] .login-box, html[data-theme="light"] .stat-card{background:rgba(255,255,255,.78);border-color:rgba(17,24,39,.1);box-shadow:0 8px 32px rgba(15,23,42,.08)} html[data-theme="light"] .card:hover{border-color:rgba(245,158,11,.5);box-shadow:0 20px 60px rgba(245,158,11,.16),0 2px 8px rgba(15,23,42,.06)} html[data-theme="light"] .item:hover{border-color:rgba(245,158,11,.45);box-shadow:0 8px 24px rgba(245,158,11,.12)} html[data-theme="light"] .btn-gray{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .btn-gray:hover{border-color:rgba(245,158,11,.55);color:var(--accent-ink,var(--accent))} html[data-theme="light"] .btn-danger{background:rgba(220,38,38,.08);color:#b91c1c;border-color:rgba(220,38,38,.24)} html[data-theme="light"] .btn-danger:hover{background:rgba(220,38,38,.14)} html[data-theme="light"] .remove-fl{background:rgba(220,38,38,.08);color:#b91c1c;border-color:rgba(220,38,38,.24)} html[data-theme="light"] .menu-btn{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .back, html[data-theme="light"] .back-btn{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12)} html[data-theme="light"] .back:hover, html[data-theme="light"] .back-btn:hover{color:var(--accent-ink,var(--accent));border-color:rgba(245,158,11,.55)} html[data-theme="light"] .result-info{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.1)} html[data-theme="light"] .links-tip{background:rgba(255,255,255,.6);border-color:rgba(17,24,39,.14)} html[data-theme="light"] .pagination a, html[data-theme="light"] .pagination span{background:rgba(255,255,255,.8);border-color:rgba(17,24,39,.12);box-shadow:0 2px 10px rgba(15,23,42,.05)} html[data-theme="light"] .pagination .active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#1a1a1a} /* ---------- 亮色：表单 / 表格 / 提示 ---------- */ html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group textarea, html[data-theme="light"] .form-group select, html[data-theme="light"] .fl-row input, html[data-theme="light"] .cat-row input, html[data-theme="light"] .plan-row input{background:rgba(255,255,255,.85);border-color:rgba(17,24,39,.14)} html[data-theme="light"] .form-group input:focus, html[data-theme="light"] .form-group textarea:focus, html[data-theme="light"] .fl-row input:focus, html[data-theme="light"] .cat-row input:focus, html[data-theme="light"] .plan-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.14);background:rgba(255,255,255,.95)} /* 下拉的