/* ======================================================================== 仲夏 · 十周年庆主题（独立文件，叠加在默认主题之上，不影响默认主题）启用方式：或 localStorage.setItem('zxsub_theme','anniversary') ======================================================================== */ /* ===== 1. 周年庆 · 色彩变量覆盖（红金圣火） ===== */ [data-theme="anniversary"] { --c-primary: #CC2020; --c-primary-2: #E84545; --c-primary-3: #B81818; --c-primary-d: #8B0000; --c-primary-soft: #FFE8E8; --c-primary-ink: #4A0000; --c-sky: #FFB85A; --c-sky-light: #FFD89A; --c-mint: #E8A040; --c-mint-light: #FFE4B0; --c-coral: #F58B9E; --c-amber: #F0B85A; --c-violet: #C95A7A; --c-sage: #D9A878; --c-text: #2A1010; --c-text-2: #3D1818; --c-text-3: #5A2828; --c-muted: #8B6060; --c-muted-2: #A87878; --c-faint: #D4A8A8; --c-bg: #FFF5F0; --c-bg-2: #FFE8DC; --c-bg-3: #FFD4C0; --c-card: #FFFFFF; --c-line: #FFD4C0; --c-line-2: #FFB89A; --c-line-soft: #FFE8DC; --g-hero: linear-gradient(160deg,#FFE8DC 0%,#FFB89A 30%,#F58B9E 60%,#CC2020 100%); --g-summer: linear-gradient(160deg,#FFE8DC 0%,#FFB89A 50%,#FFF5F0 100%); --g-blue: linear-gradient(135deg,#CC2020 0%,#8B0000 100%); --g-aurora: linear-gradient(135deg,#F0B85A 0%,#F58B9E 50%,#CC2020 100%); --g-ocean: linear-gradient(135deg,#F0B85A 0%,#CC2020 100%); --g-sky: linear-gradient(180deg,#FFE8DC 0%,#FFF5F0 100%); --g-anniversary: linear-gradient(135deg,#F0B85A 0%,#F58B9E 25%,#CC2020 50%,#8B0000 100%); } /* ===== 2. 背景纹理：暖色圣火 + 飘散金粉 ===== */ [data-theme="anniversary"] body { background: linear-gradient(180deg, #FFE8DC 0%, #FFD4C0 35%, #FFB89A 75%, #F58B9E 100%) fixed; } /* ===== 3. 顶部栏 · 红金渐变 ===== */ [data-theme="anniversary"] .topbar { background: linear-gradient(180deg, rgba(204,32,32,.92) 0%, rgba(139,0,0,.85) 100%) !important; border-bottom: 1px solid rgba(255,215,0,.4) !important; box-shadow: 0 4px 24px -4px rgba(204,32,32,.4), inset 0 -1px 0 rgba(255,255,255,.15) !important; color: #fff !important; } [data-theme="anniversary"] .topbar .brand__text, [data-theme="anniversary"] .topbar .nav__link, [data-theme="anniversary"] .topbar .icon-btn, [data-theme="anniversary"] .topbar .user-chip, [data-theme="anniversary"] .topbar .btn--ghost { color: #fff !important; } [data-theme="anniversary"] .topbar .nav__link.is-on { color: #FFD700 !important; background: rgba(255,215,0,.18) !important; } [data-theme="anniversary"] .topbar .btn--ghost { background: rgba(255,255,255,.15) !important; border-color: rgba(255,215,0,.45) !important; } [data-theme="anniversary"] .topbar .btn--primary { background: linear-gradient(135deg,#FFD700 0%,#F0B85A 50%,#FFD700 100%) !important; color: #8B0000 !important; text-shadow: none !important; border-color: rgba(255,255,255,.6) !important; box-shadow: 0 4px 16px -2px rgba(255,215,0,.5), inset 0 1px 0 rgba(255,255,255,.5) !important; } /* ===== 4. 底部导航栏 · 红金 ===== */ [data-theme="anniversary"] .tabbar { background: linear-gradient(0deg, rgba(204,32,32,.95) 0%, rgba(139,0,0,.88) 100%) !important; border-top: 1px solid rgba(255,215,0,.4) !important; box-shadow: 0 -4px 32px -4px rgba(204,32,32,.4), inset 0 1px 0 rgba(255,255,255,.15) !important; } [data-theme="anniversary"] .tabbar__item { color: rgba(255,255,255,.7) !important; } [data-theme="anniversary"] .tabbar__item.is-on { color: #FFD700 !important; } [data-theme="anniversary"] .tabbar__item--center .tabbar__icon { background: linear-gradient(135deg,#FFD700 0%,#F0B85A 50%,#FFA500 100%) !important; color: #8B0000 !important; border-color: rgba(255,255,255,.6) !important; box-shadow: 0 10px 28px -4px rgba(255,165,0,.6), 0 0 24px rgba(255,215,0,.4), inset 0 1px 0 rgba(255,255,255,.5) !important; } [data-theme="anniversary"] .tabbar__item--center .tabbar__icon svg { stroke: #8B0000 !important; } /* ===== 5. 卡片玻璃 · 暖金高光 ===== */ [data-theme="anniversary"] .card, [data-theme="anniversary"] .moments-card, [data-theme="anniversary"] .moment-card, [data-theme="anniversary"] .auth-card, [data-theme="anniversary"] .p-card, [data-theme="anniversary"] .p-item, [data-theme="anniversary"] .post-detail, [data-theme="anniversary"] .modal, [data-theme="anniversary"] .btt, [data-theme="anniversary"] .feed-item, [data-theme="anniversary"] .post-list-item, [data-theme="anniversary"] .msg-item, [data-theme="anniversary"] .waterfall-card, [data-theme="anniversary"] .post-card, [data-theme="anniversary"] .article-card, [data-theme="anniversary"] .event-card, [data-theme="anniversary"] .archive-item, [data-theme="anniversary"] .anniv-item, [data-theme="anniversary"] .gallery-item, [data-theme="anniversary"] .timeline-item { background: linear-gradient(135deg, rgba(255,248,240,.95) 0%, rgba(255,232,220,.85) 100%) !important; border-color: rgba(240,184,90,.35) !important; box-shadow: 0 8px 32px -8px rgba(204,32,32,.18), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(240,184,90,.15) !important; } [data-theme="anniversary"] .card::before, [data-theme="anniversary"] .moments-card::before, [data-theme="anniversary"] .moment-card::before, [data-theme="anniversary"] .auth-card::before, [data-theme="anniversary"] .p-card::before { background: linear-gradient(135deg, rgba(255,215,0,.2) 0%, rgba(255,215,0,0) 50%, rgba(240,184,90,.2) 100%) !important; } /* ===== 6. 按钮 · 红金渐变 ===== */ [data-theme="anniversary"] .btn--primary { background: linear-gradient(135deg, #CC2020 0%, #8B0000 50%, #CC2020 100%) !important; background-size: 200% 100% !important; color: #FFD700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; border-color: rgba(255,215,0,.5) !important; box-shadow: 0 8px 24px -6px rgba(204,32,32,.5), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.15) !important; } [data-theme="anniversary"] .btn--ghost { background: linear-gradient(135deg, rgba(255,215,0,.18) 0%, rgba(255,215,0,.05) 100%) !important; border-color: rgba(255,215,0,.4) !important; color: #8B0000 !important; } [data-theme="anniversary"] .btn--soft { background: rgba(255,215,0,.18) !important; border-color: rgba(240,184,90,.4) !important; color: #8B0000 !important; } /* ===== 7. 标签 / 徽章 · 金红 ===== */ [data-theme="anniversary"] .tag { background: linear-gradient(135deg, #FFF5E0 0%, #FFE8B0 100%) !important; color: #8B0000 !important; border-color: rgba(240,184,90,.3) !important; } [data-theme="anniversary"] .tag:hover { background: linear-gradient(135deg, #FFD700 0%, #F0B85A 100%) !important; color: #fff !important; } [data-theme="anniversary"] .badge--primary { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } /* ===== 8. 表单 ===== */ [data-theme="anniversary"] .input, [data-theme="anniversary"] textarea, [data-theme="anniversary"] select { background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,248,240,.85) 100%) !important; border-color: rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .input:focus, [data-theme="anniversary"] textarea:focus, [data-theme="anniversary"] select:focus { border-color: #CC2020 !important; box-shadow: 0 0 0 3px rgba(204,32,32,.15) !important; } /* ===== 9. 链接 ===== */ [data-theme="anniversary"] a { color: #B81818 !important; } [data-theme="anniversary"] a:hover { color: #8B0000 !important; } /* ===== 10. 装饰元素 · 十周年角标 ===== */ [data-theme="anniversary"] .topbar .brand::after { content: "10"; position: absolute; top: 6px; right: -8px; width: 18px; height: 18px; background: linear-gradient(135deg, #FFD700, #F0B85A); color: #8B0000; font-family: var(--f-num); font-size: 11px; font-weight: 800; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(255,165,0,.5), inset 0 1px 0 rgba(255,255,255,.6); border: 1.5px solid rgba(255,255,255,.7); animation: annivPulse 2.4s ease-in-out infinite; } @keyframes annivPulse { 0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(255,165,0,.5), inset 0 1px 0 rgba(255,255,255,.6); } 50% { transform: scale(1.1); box-shadow: 0 4px 16px rgba(255,165,0,.7), 0 0 16px rgba(255,215,0,.5), inset 0 1px 0 rgba(255,255,255,.6); } } /* ===== 11. 飘散金粉粒子（背景叠加） ===== */ [data-theme="anniversary"] body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(circle at 10% 20%, rgba(255,215,0,.6) 1px, transparent 2px), radial-gradient(circle at 30% 60%, rgba(255,165,0,.5) 1px, transparent 2px), radial-gradient(circle at 50% 30%, rgba(255,215,0,.4) 1px, transparent 2px), radial-gradient(circle at 70% 70%, rgba(255,165,0,.5) 1px, transparent 2px), radial-gradient(circle at 90% 40%, rgba(255,215,0,.6) 1px, transparent 2px), radial-gradient(circle at 20% 80%, rgba(255,165,0,.4) 1px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(255,215,0,.5) 1px, transparent 2px); background-size: 200px 200px; animation: annivSparkle 12s linear infinite; } @keyframes annivSparkle { 0% { background-position: 0 0, 50px 80px, 100px 40px, 150px 120px, 50px 160px, 100px 80px, 150px 40px; opacity: .4; } 50% { opacity: .8; } 100% { background-position: 200px 200px, 250px 280px, 300px 240px, 350px 320px, 250px 360px, 300px 280px, 350px 240px; opacity: .4; } } /* ===== 12. Hero 区域 · 圣火橙红 ===== */ [data-theme="anniversary"] .hero { background: linear-gradient(160deg, #FFD700 0%, #F58B9E 35%, #CC2020 75%, #8B0000 100%) !important; box-shadow: 0 24px 64px -12px rgba(204,32,32,.4), inset 0 1px 0 rgba(255,255,255,.4) !important; border-color: rgba(255,215,0,.5) !important; } [data-theme="anniversary"] .hero__stat { background: rgba(255,215,0,.18) !important; border-color: rgba(255,215,0,.4) !important; } [data-theme="anniversary"] .hero__stat-num { color: #FFD700 !important; } /* ===== 13. 主题切换按钮 ===== */ .theme-toggle { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.45); color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; } .theme-toggle:hover { background: rgba(255,255,255,.4); transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(0,0,0,.15); } .theme-toggle svg { width: 14px; height: 14px; flex-shrink: 0; } [data-theme="anniversary"] .theme-toggle { background: linear-gradient(135deg, #FFD700 0%, #F0B85A 100%); color: #8B0000; border-color: rgba(255,255,255,.6); box-shadow: 0 2px 12px -2px rgba(255,165,0,.5); } /* ===== 14. 周年庆徽章（页面内可调用） ===== */ .anniv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: linear-gradient(135deg, #FFD700 0%, #F58B9E 50%, #CC2020 100%); color: #fff; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); box-shadow: 0 4px 12px -2px rgba(204,32,32,.4); border: 1px solid rgba(255,255,255,.4); text-shadow: 0 1px 2px rgba(0,0,0,.3); letter-spacing: 1px; animation: annivPulse 2.4s ease-in-out infinite; } /* ===== 15. 模态弹窗 ===== */ [data-theme="anniversary"] .modal { background: linear-gradient(135deg, rgba(255,248,240,.96) 0%, rgba(255,232,220,.9) 100%) !important; border-color: rgba(240,184,90,.5) !important; color: var(--c-text) !important; } [data-theme="anniversary"] .modal__title { color: #8B0000 !important; } /* ===== 15.5 全局文字颜色保障 ===== */ [data-theme="anniversary"] body, [data-theme="anniversary"] .page__main, [data-theme="anniversary"] .container, [data-theme="anniversary"] .layout-2, [data-theme="anniversary"] main { color: var(--c-text) !important; } [data-theme="anniversary"] h1,[data-theme="anniversary"] h2,[data-theme="anniversary"] h3, [data-theme="anniversary"] h4,[data-theme="anniversary"] h5,[data-theme="anniversary"] h6 { color: var(--c-text) !important; } [data-theme="anniversary"] .text-muted { color: var(--c-muted) !important; } [data-theme="anniversary"] .text-danger { color: #B81818 !important; } [data-theme="anniversary"] .text-sm { color: var(--c-text-2) !important; } [data-theme="anniversary"] .text-xs { color: var(--c-muted) !important; } [data-theme="anniversary"] strong { color: #8B0000 !important; } /* ===== 15.6 顶部栏 LOGO + 品牌文字 ===== */ [data-theme="anniversary"] .topbar .brand__text { color: #FFD700 !important; font-weight: 700; } [data-theme="anniversary"] .topbar .brand__text em { color: #fff !important; font-style: normal; } [data-theme="anniversary"] .topbar .icon-btn { color: #fff !important; } [data-theme="anniversary"] .topbar .icon-btn:hover { background: rgba(255,215,0,.2) !important; color: #FFD700 !important; } /* ===== 15.7 按钮文字颜色（白底/金底/红底全场景） ===== */ [data-theme="anniversary"] .btn { color: var(--c-text) !important; } [data-theme="anniversary"] .btn--primary { color: #FFD700 !important; } [data-theme="anniversary"] .btn--ghost { color: #8B0000 !important; } [data-theme="anniversary"] .btn--soft { color: #8B0000 !important; } [data-theme="anniversary"] .btn--flat { color: var(--c-text) !important; } [data-theme="anniversary"] .btn--white { color: var(--c-text) !important; } [data-theme="anniversary"] .btn--sm { color: inherit; } /* ===== 15.8 头像 / 数字徽章 ===== */ [data-theme="anniversary"] .user-chip { color: #8B0000 !important; background: linear-gradient(135deg, rgba(255,215,0,.18) 0%, rgba(255,215,0,.05) 100%) !important; border: 1px solid rgba(255,215,0,.35) !important; } [data-theme="anniversary"] .user-chip__av { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } [data-theme="anniversary"] .stat-card strong, [data-theme="anniversary"] .p-head__stat strong { color: #8B0000 !important; background: linear-gradient(135deg, #CC2020, #8B0000) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ===== 15.9 搜索条 / 筛选条 ===== */ [data-theme="anniversary"] .search-bar, [data-theme="anniversary"] .filter-bar { background: linear-gradient(135deg, rgba(255,248,240,.95) 0%, rgba(255,232,220,.85) 100%) !important; border-color: rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .filter-chip { background: rgba(255,215,0,.12) !important; color: #8B0000 !important; border-color: rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .filter-chip.is-on { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } /* ===== 15.10 动态 / 文章 / 评论文字 ===== */ [data-theme="anniversary"] .moment-card__text, [data-theme="anniversary"] .post-card__text, [data-theme="anniversary"] .article-card__text, [data-theme="anniversary"] .feed-item__text, [data-theme="anniversary"] .waterfall-card__text { color: var(--c-text) !important; } [data-theme="anniversary"] .moment-card__name, [data-theme="anniversary"] .post-card__name, [data-theme="anniversary"] .article-card__name { color: #8B0000 !important; } [data-theme="anniversary"] .moment-card__time, [data-theme="anniversary"] .post-card__time, [data-theme="anniversary"] .article-card__time { color: var(--c-muted) !important; } [data-theme="anniversary"] .comment__author, [data-theme="anniversary"] .reply-card__author { color: #8B0000 !important; } [data-theme="anniversary"] .comment__text, [data-theme="anniversary"] .reply-card__text { color: var(--c-text) !important; } [data-theme="anniversary"] .comment__time, [data-theme="anniversary"] .reply-card__time { color: var(--c-muted) !important; } /* ===== 15.11 标签 / 徽章 / 胶囊 ===== */ [data-theme="anniversary"] .tag-anniversary { background: linear-gradient(135deg, #FFD700 0%, #CC2020 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5) !important; } [data-theme="anniversary"] .tag-initial { background: linear-gradient(135deg, #FFD700, #F0B85A) !important; color: #8B0000 !important; } [data-theme="anniversary"] .tag-cny { background: linear-gradient(135deg, #FFD700, #CC2020) !important; color: #fff !important; } [data-theme="anniversary"] .badge { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } [data-theme="anniversary"] .glass-tag { background: linear-gradient(135deg, rgba(255,215,0,.2), rgba(255,215,0,.08)) !important; color: #8B0000 !important; border-color: rgba(255,215,0,.4) !important; } [data-theme="anniversary"] .pill { background: linear-gradient(135deg, #FFD700, #F0B85A) !important; color: #8B0000 !important; } /* ===== 15.12 输入框 / 文本域 ===== */ [data-theme="anniversary"] .input, [data-theme="anniversary"] textarea, [data-theme="anniversary"] select, [data-theme="anniversary"] .search-mask__input { color: var(--c-text) !important; } [data-theme="anniversary"] .input::placeholder, [data-theme="anniversary"] textarea::placeholder, [data-theme="anniversary"] .search-mask__input::placeholder { color: var(--c-muted-2) !important; } [data-theme="anniversary"] .input-append__prepend { color: #8B0000 !important; } [data-theme="anniversary"] .fg label, [data-theme="anniversary"] .fg > .label { color: var(--c-text-2) !important; } /* ===== 15.13 回到顶部 / 浮动按钮 ===== */ [data-theme="anniversary"] .btt { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; border: 1px solid rgba(255,215,0,.4) !important; } [data-theme="anniversary"] .btt:hover { background: linear-gradient(135deg, #E84545, #B81818) !important; } /* ===== 15.14 页脚 ===== */ [data-theme="anniversary"] .footer { background: transparent !important; color: var(--c-text-2) !important; } [data-theme="anniversary"] .footer__brand { color: #8B0000 !important; } [data-theme="anniversary"] .footer__copy, [data-theme="anniversary"] .footer__ver { color: var(--c-muted) !important; } [data-theme="anniversary"] .footer__sub { color: var(--c-muted) !important; } [data-theme="anniversary"] .footer__link { color: #B81818 !important; } [data-theme="anniversary"] .footer__link--hl { background: linear-gradient(135deg, #FFD700, #CC2020) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-theme="anniversary"] .footer__promo { color: #B81818 !important; } /* ===== 15.15 分隔线 / 列表 ===== */ [data-theme="anniversary"] hr { border-top-color: rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .glass-divider { background: linear-gradient(90deg, transparent, rgba(255,215,0,.6) 50%, transparent) !important; } /* ===== 15.16 Toast 通知 ===== */ [data-theme="anniversary"] .toast { background: linear-gradient(135deg, rgba(255,248,240,.98), rgba(255,232,220,.95)) !important; color: var(--c-text) !important; border-left-color: #CC2020 !important; } [data-theme="anniversary"] .toast--success { border-left-color: #F0B85A !important; } [data-theme="anniversary"] .toast--error { border-left-color: #CC2020 !important; } [data-theme="anniversary"] .toast--warning { border-left-color: #FFD700 !important; } /* ===== 15.17 字母 / 标题大字号 ===== */ [data-theme="anniversary"] .cl-year-hd h3 { background: linear-gradient(135deg, #CC2020, #8B0000) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-theme="anniversary"] .cl-entry { background: linear-gradient(135deg, rgba(255,248,240,.95) 0%, rgba(255,232,220,.85) 100%) !important; border-color: rgba(240,184,90,.3) !important; } [data-theme="anniversary"] .cl-version { color: #8B0000 !important; } [data-theme="anniversary"] .cl-date { color: var(--c-muted) !important; } [data-theme="anniversary"] .cl-items li { background: rgba(255,215,0,.1) !important; color: var(--c-text-2) !important; } [data-theme="anniversary"] .cl-items li.primary { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } [data-theme="anniversary"] .cl-items li.accent { background: linear-gradient(135deg, #FFD700, #F0B85A) !important; color: #8B0000 !important; } /* ===== 15.18 表格 / 表单行 ===== */ [data-theme="anniversary"] .admin-tabs a, [data-theme="anniversary"] .admin-nav a { color: var(--c-text-2) !important; } [data-theme="anniversary"] .admin-tabs a.is-on, [data-theme="anniversary"] .admin-nav a.is-on { color: #8B0000 !important; border-bottom-color: #CC2020 !important; } [data-theme="anniversary"] .admin-box { background: linear-gradient(135deg, rgba(255,248,240,.95), rgba(255,232,220,.85)) !important; border-color: rgba(240,184,90,.3) !important; } [data-theme="anniversary"] .stats-grid__item { background: linear-gradient(135deg, rgba(255,248,240,.95), rgba(255,232,220,.85)) !important; border-color: rgba(240,184,90,.3) !important; } [data-theme="anniversary"] .stats-grid__lbl { color: var(--c-muted) !important; } [data-theme="anniversary"] .stats-grid__num { color: #8B0000 !important; } /* ===== 15.19 PWA 安装弹窗 ===== */ [data-theme="anniversary"] #pwa-install-toast { background: linear-gradient(135deg, #CC2020 0%, #8B0000 100%) !important; border: 1px solid rgba(255,215,0,.5) !important; } [data-theme="anniversary"] #pwa-install-toast div { color: #fff !important; } [data-theme="anniversary"] #pwa-install-btn { background: linear-gradient(135deg, #FFD700, #F0B85A) !important; color: #8B0000 !important; } /* ===== 15.20 启动画面 ===== */ [data-theme="anniversary"] #splash-screen { background: linear-gradient(160deg, #2d0000, #4a0a0a, #8B0000, #2d0000) !important; } /* ===== 15.21 排行榜 / 文章详情 ===== */ [data-theme="anniversary"] .post-detail__title { color: #8B0000 !important; } [data-theme="anniversary"] .post-detail__meta { color: var(--c-muted) !important; } [data-theme="anniversary"] .post-detail__content { color: var(--c-text) !important; } [data-theme="anniversary"] .article-act { color: var(--c-text-2) !important; } [data-theme="anniversary"] .article-act:hover { background: linear-gradient(135deg, rgba(255,215,0,.25), rgba(255,215,0,.1)) !important; color: #8B0000 !important; } /* ===== 15.22 数字字体颜色 ===== */ [data-theme="anniversary"] .num { color: inherit; } /* ===== 16. 滚动条 ===== */ [data-theme="anniversary"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #CC2020, #8B0000) !important; } [data-theme="anniversary"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #E84545, #B81818) !important; } /* ===== 17. iOS 状态栏 / 主题色 ===== */ [data-theme="anniversary"] { color-scheme: light; } /* ===== 18. 响应式：移动端主题切换按钮 ===== */ @media (max-width: 768px) { .theme-toggle { height: 28px; padding: 0 10px; font-size: 11px; } .theme-toggle svg { width: 12px; height: 12px; } } /* ======================================================================== 19. 全场按钮 · 完整状态（默认/悬停/激活/禁用） ======================================================================== */ /* ----- 默认基础 ----- */ [data-theme="anniversary"] .btn { color: var(--c-text) !important; } [data-theme="anniversary"] .btn:disabled { opacity: .5 !important; cursor: not-allowed !important; } [data-theme="anniversary"] .btn:disabled:hover { transform: none !important; box-shadow: none !important; } /* ----- .btn--primary 主按钮（红金渐变） ----- */ [data-theme="anniversary"] .btn--primary { background: linear-gradient(135deg, #CC2020 0%, #8B0000 50%, #CC2020 100%) !important; background-size: 200% 100% !important; color: #FFD700 !important; border: 1px solid rgba(255,215,0,.5) !important; box-shadow: 0 8px 24px -6px rgba(204,32,32,.5), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.15) !important; text-shadow: 0 1px 2px rgba(0,0,0,.3) !important; } [data-theme="anniversary"] .btn--primary:hover { background: linear-gradient(135deg, #E84545 0%, #B81818 50%, #E84545 100%) !important; background-size: 200% 100% !important; color: #FFE680 !important; box-shadow: 0 12px 36px -4px rgba(204,32,32,.7), 0 0 20px rgba(255,215,0,.3), inset 0 1px 0 rgba(255,255,255,.45) !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; } [data-theme="anniversary"] .btn--primary:active { background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%) !important; color: #FFD700 !important; box-shadow: 0 2px 8px -2px rgba(139,0,0,.5), inset 0 2px 4px rgba(0,0,0,.25) !important; transform: translateY(1px) scale(.98) !important; } [data-theme="anniversary"] .btn--primary:focus-visible { outline: 2px solid #FFD700 !important; outline-offset: 2px !important; } /* ----- .btn--ghost 幽灵按钮（金色描边） ----- */ [data-theme="anniversary"] .btn--ghost { background: linear-gradient(135deg, rgba(255,215,0,.18) 0%, rgba(255,215,0,.05) 100%) !important; color: #8B0000 !important; border: 1px solid rgba(255,215,0,.5) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px -2px rgba(255,215,0,.2) !important; } [data-theme="anniversary"] .btn--ghost:hover { background: linear-gradient(135deg, rgba(255,215,0,.35) 0%, rgba(255,215,0,.15) 100%) !important; color: #6B0000 !important; border-color: #FFD700 !important; box-shadow: 0 6px 16px -2px rgba(255,215,0,.4), inset 0 1px 0 rgba(255,255,255,.8) !important; } [data-theme="anniversary"] .btn--ghost:active { background: linear-gradient(135deg, rgba(255,215,0,.4) 0%, rgba(255,215,0,.2) 100%) !important; color: #6B0000 !important; box-shadow: inset 0 2px 4px rgba(204,32,32,.2) !important; transform: translateY(1px) scale(.98) !important; } /* ----- .btn--soft 软按钮 ----- */ [data-theme="anniversary"] .btn--soft { background: linear-gradient(135deg, rgba(255,232,220,.8) 0%, rgba(255,215,0,.18) 100%) !important; color: #8B0000 !important; border: 1px solid rgba(240,184,90,.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important; } [data-theme="anniversary"] .btn--soft:hover { background: linear-gradient(135deg, rgba(255,232,220,1) 0%, rgba(255,215,0,.3) 100%) !important; color: #6B0000 !important; border-color: #F0B85A !important; box-shadow: 0 4px 12px -2px rgba(240,184,90,.4), inset 0 1px 0 rgba(255,255,255,.9) !important; } [data-theme="anniversary"] .btn--soft:active { background: rgba(255,215,0,.35) !important; color: #6B0000 !important; transform: translateY(1px) scale(.98) !important; } /* ----- .btn--flat / .btn--white 平面/白色 ----- */ [data-theme="anniversary"] .btn--flat, [data-theme="anniversary"] .btn--white { background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,232,220,.4) 100%) !important; color: var(--c-text) !important; border: 1px solid rgba(255,215,0,.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important; } [data-theme="anniversary"] .btn--flat:hover, [data-theme="anniversary"] .btn--white:hover { background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,232,220,.6) 100%) !important; color: #6B0000 !important; border-color: rgba(240,184,90,.5) !important; box-shadow: 0 4px 12px -2px rgba(240,184,90,.3) !important; } [data-theme="anniversary"] .btn--flat:active, [data-theme="anniversary"] .btn--white:active { background: rgba(255,215,0,.25) !important; transform: translateY(1px) scale(.98) !important; } /* ----- .btn--glass 玻璃按钮 ----- */ [data-theme="anniversary"] .btn--glass { background: linear-gradient(135deg, rgba(255,248,240,.5) 0%, rgba(255,215,0,.15) 100%) !important; color: #8B0000 !important; border: 1px solid rgba(255,215,0,.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px -2px rgba(240,184,90,.2) !important; } [data-theme="anniversary"] .btn--glass:hover { background: linear-gradient(135deg, rgba(255,248,240,.8) 0%, rgba(255,215,0,.3) 100%) !important; color: #6B0000 !important; border-color: #F0B85A !important; box-shadow: 0 8px 20px -2px rgba(240,184,90,.4), inset 0 1px 0 rgba(255,255,255,.9) !important; } [data-theme="anniversary"] .btn--glass:active { background: rgba(255,215,0,.35) !important; transform: translateY(1px) scale(.98) !important; } /* ----- .btn--glass-primary 玻璃主按钮 ----- */ [data-theme="anniversary"] .btn--glass-primary { background: linear-gradient(135deg, rgba(204,32,32,.9) 0%, rgba(139,0,0,.9) 100%) !important; background-size: 200% 100% !important; color: #FFD700 !important; border: 1px solid rgba(255,215,0,.5) !important; box-shadow: 0 8px 24px -4px rgba(204,32,32,.5), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.15) !important; } [data-theme="anniversary"] .btn--glass-primary:hover { background: linear-gradient(135deg, #E84545 0%, #B81818 100%) !important; color: #FFE680 !important; box-shadow: 0 12px 36px -4px rgba(204,32,32,.7), inset 0 1px 0 rgba(255,255,255,.4) !important; } [data-theme="anniversary"] .btn--glass-primary:active { background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%) !important; transform: translateY(1px) scale(.98) !important; } /* ----- .btn--outline-white 白色描边（深色背景上） ----- */ [data-theme="anniversary"] .btn--outline-white { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5) !important; } [data-theme="anniversary"] .btn--outline-white:hover { background: rgba(255,215,0,.2) !important; color: #FFD700 !important; border-color: #FFD700 !important; } [data-theme="anniversary"] .btn--outline-white:active { background: rgba(255,215,0,.35) !important; color: #FFD700 !important; } /* ----- .icon-btn 图标按钮（顶部栏、卡片） ----- */ [data-theme="anniversary"] .icon-btn { color: inherit !important; background: transparent !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .icon-btn:hover { background: rgba(255,215,0,.18) !important; color: #FFD700 !important; transform: translateY(-1px) scale(1.08) !important; } [data-theme="anniversary"] .icon-btn:active { background: rgba(255,215,0,.3) !important; color: #FFD700 !important; transform: scale(.9) !important; } /* ----- 顶部栏内 .icon-btn ----- */ [data-theme="anniversary"] .topbar .icon-btn { color: #fff !important; } [data-theme="anniversary"] .topbar .icon-btn:hover { background: rgba(255,215,0,.2) !important; color: #FFD700 !important; } [data-theme="anniversary"] .topbar .icon-btn:active { background: rgba(255,215,0,.35) !important; color: #FFE680 !important; } /* ----- .user-chip 用户胶囊 ----- */ [data-theme="anniversary"] .user-chip { color: #8B0000 !important; background: linear-gradient(135deg, rgba(255,215,0,.18) 0%, rgba(255,215,0,.05) 100%) !important; border: 1px solid rgba(255,215,0,.35) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .user-chip:hover { background: linear-gradient(135deg, rgba(255,215,0,.32) 0%, rgba(255,215,0,.12) 100%) !important; color: #6B0000 !important; border-color: #F0B85A !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px -2px rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .user-chip:active { background: rgba(255,215,0,.4) !important; transform: translateY(0) scale(.98) !important; } /* ----- .btn--sm 小尺寸变体 ----- */ [data-theme="anniversary"] .btn--sm { color: inherit !important; } /* ----- .article-act 文章操作按钮（点赞/评论/分享） ----- */ [data-theme="anniversary"] .article-act { color: var(--c-text-2) !important; background: transparent !important; border-radius: var(--r-pill) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .article-act:hover { background: linear-gradient(135deg, rgba(255,215,0,.25) 0%, rgba(255,215,0,.1) 100%) !important; color: #8B0000 !important; transform: translateY(-1px) !important; } [data-theme="anniversary"] .article-act:active { background: rgba(255,215,0,.4) !important; color: #6B0000 !important; transform: scale(.95) !important; } [data-theme="anniversary"] .article-act.is-on, [data-theme="anniversary"] .article-act.is-active { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; } /* ----- .tag 标签悬停 ----- */ [data-theme="anniversary"] .tag { color: #8B0000 !important; background: linear-gradient(135deg, #FFF5E0 0%, #FFE8B0 100%) !important; border: 1px solid rgba(240,184,90,.3) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .tag:hover { background: linear-gradient(135deg, #FFD700 0%, #F0B85A 100%) !important; color: #6B0000 !important; border-color: #F0B85A !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px -2px rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .tag:active { transform: scale(.95) !important; } [data-theme="anniversary"] .tag.is-on { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; border-color: rgba(255,215,0,.5) !important; } /* ----- .filter-chip 筛选条 ----- */ [data-theme="anniversary"] .filter-chip { background: rgba(255,215,0,.12) !important; color: #8B0000 !important; border: 1px solid rgba(240,184,90,.4) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .filter-chip:hover { background: rgba(255,215,0,.25) !important; color: #6B0000 !important; border-color: #F0B85A !important; transform: translateY(-1px) !important; } [data-theme="anniversary"] .filter-chip:active { transform: scale(.95) !important; } [data-theme="anniversary"] .filter-chip.is-on { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; border-color: rgba(255,215,0,.5) !important; } /* ----- 导航链接 .nav__link（顶部/底部） ----- */ [data-theme="anniversary"] .nav__link { color: var(--c-text-2) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .nav__link:hover { color: #8B0000 !important; background: rgba(255,215,0,.18) !important; transform: translateY(-1px) !important; } [data-theme="anniversary"] .nav__link:active { background: rgba(255,215,0,.3) !important; transform: scale(.94) !important; } [data-theme="anniversary"] .nav__link.is-on { color: #8B0000 !important; background: rgba(255,215,0,.2) !important; } [data-theme="anniversary"] .topbar .nav__link { color: rgba(255,255,255,.85) !important; } [data-theme="anniversary"] .topbar .nav__link:hover { color: #FFD700 !important; background: rgba(255,215,0,.18) !important; } [data-theme="anniversary"] .topbar .nav__link.is-on { color: #FFD700 !important; background: rgba(255,215,0,.2) !important; border-bottom-color: #FFD700 !important; } /* ----- .tabbar__item 底部导航 ----- */ [data-theme="anniversary"] .tabbar__item { color: rgba(255,255,255,.7) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .tabbar__item:hover { color: #FFD700 !important; background: rgba(255,215,0,.1) !important; } [data-theme="anniversary"] .tabbar__item:active { background: rgba(255,215,0,.2) !important; transform: scale(.94) !important; } [data-theme="anniversary"] .tabbar__item.is-on { color: #FFD700 !important; background: rgba(255,215,0,.15) !important; } /* ----- .tabbar__item--center 中心发布按钮（金色发光） ----- */ [data-theme="anniversary"] .tabbar__item--center .tabbar__icon { background: linear-gradient(135deg, #FFD700 0%, #F0B85A 50%, #FFA500 100%) !important; color: #8B0000 !important; border: 1.5px solid rgba(255,255,255,.6) !important; box-shadow: 0 10px 28px -4px rgba(255,165,0,.6), 0 0 24px rgba(255,215,0,.4), inset 0 1px 0 rgba(255,255,255,.5) !important; transition: all .3s var(--ease) !important; } [data-theme="anniversary"] .tabbar__item--center .tabbar__icon svg { stroke: #8B0000 !important; } [data-theme="anniversary"] .tabbar__item--center:hover .tabbar__icon { background: linear-gradient(135deg, #FFE680 0%, #FFD700 50%, #FFB800 100%) !important; box-shadow: 0 14px 36px -4px rgba(255,165,0,.8), 0 0 32px rgba(255,215,0,.6), inset 0 1px 0 rgba(255,255,255,.7) !important; transform: scale(1.08) rotate(90deg) !important; } [data-theme="anniversary"] .tabbar__item--center:active .tabbar__icon { background: linear-gradient(135deg, #F0B85A 0%, #FFA500 100%) !important; transform: scale(.92) rotate(90deg) !important; box-shadow: 0 4px 12px -2px rgba(255,165,0,.5), inset 0 2px 4px rgba(0,0,0,.2) !important; } /* ----- .btt 回到顶部按钮（修复位置+完整状态） ----- */ [data-theme="anniversary"] .btt { background: linear-gradient(135deg, #CC2020 0%, #8B0000 100%) !important; color: #FFD700 !important; border: 1.5px solid rgba(255,215,0,.5) !important; box-shadow: 0 8px 24px -4px rgba(204,32,32,.55), 0 0 16px rgba(255,215,0,.25), inset 0 1px 0 rgba(255,255,255,.35) !important; } [data-theme="anniversary"] .btt:hover { background: linear-gradient(135deg, #E84545 0%, #B81818 100%) !important; color: #FFE680 !important; box-shadow: 0 12px 32px -4px rgba(204,32,32,.7), 0 0 24px rgba(255,215,0,.4), inset 0 1px 0 rgba(255,255,255,.45) !important; transform: translateY(-4px) scale(1.1) !important; } [data-theme="anniversary"] .btt:active { background: linear-gradient(135deg, #8B0000 0%, #6B0000 100%) !important; color: #FFD700 !important; box-shadow: 0 2px 8px -2px rgba(139,0,0,.6), inset 0 2px 4px rgba(0,0,0,.25) !important; transform: translateY(-2px) scale(.95) !important; } [data-theme="anniversary"] .btt svg { stroke: #FFD700 !important; } /* ----- .moments-pub__toolbar 朋友圈发布工具栏按钮 ----- */ [data-theme="anniversary"] .moments-pub__toolbar button { background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,215,0,.05)) !important; color: #8B0000 !important; border: 1px solid rgba(240,184,90,.3) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .moments-pub__toolbar button:hover { background: linear-gradient(135deg, rgba(255,215,0,.3), rgba(255,215,0,.15)) !important; color: #6B0000 !important; border-color: #F0B85A !important; transform: scale(1.1) !important; } [data-theme="anniversary"] .moments-pub__toolbar button:active { background: rgba(255,215,0,.4) !important; transform: scale(.92) !important; } /* ----- .img-modal__close 图片模态关闭按钮 ----- */ [data-theme="anniversary"] .img-modal__close { background: rgba(204,32,32,.4) !important; color: #fff !important; border: 1px solid rgba(255,215,0,.4) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .img-modal__close:hover { background: linear-gradient(135deg, #CC2020, #8B0000) !important; color: #FFD700 !important; transform: scale(1.1) rotate(90deg) !important; } [data-theme="anniversary"] .img-modal__close:active { background: #6B0000 !important; transform: scale(.9) rotate(90deg) !important; } /* ----- .search-mask__close / .search-mask__clear 搜索遮罩按钮 ----- */ [data-theme="anniversary"] .search-mask__close { color: #8B0000 !important; background: rgba(255,215,0,.12) !important; border: 1px solid rgba(240,184,90,.3) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .search-mask__close:hover { background: rgba(255,215,0,.25) !important; color: #6B0000 !important; } [data-theme="anniversary"] .search-mask__close:active { background: rgba(255,215,0,.4) !important; transform: scale(.95) !important; } [data-theme="anniversary"] .search-mask__clear { color: var(--c-muted) !important; background: rgba(255,215,0,.1) !important; border-radius: 50% !important; } [data-theme="anniversary"] .search-mask__clear:hover { color: #8B0000 !important; background: rgba(255,215,0,.25) !important; } /* ----- PWA 安装弹窗按钮 ----- */ [data-theme="anniversary"] #pwa-install-toast { background: linear-gradient(135deg, #CC2020 0%, #8B0000 100%) !important; border: 1.5px solid rgba(255,215,0,.5) !important; box-shadow: 0 12px 40px rgba(204,32,32,.5), 0 0 24px rgba(255,215,0,.2) !important; } [data-theme="anniversary"] #pwa-install-toast > div, [data-theme="anniversary"] #pwa-install-toast > div div { color: #fff !important; } [data-theme="anniversary"] #pwa-install-toast > div div + div { color: rgba(255,255,255,.75) !important; } [data-theme="anniversary"] #pwa-install-btn { background: linear-gradient(135deg, #FFD700 0%, #F0B85A 100%) !important; color: #8B0000 !important; border: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 4px 12px -2px rgba(255,165,0,.5), inset 0 1px 0 rgba(255,255,255,.5) !important; transition: all .2s var(--ease) !important; font-weight: 700 !important; } [data-theme="anniversary"] #pwa-install-btn:hover { background: linear-gradient(135deg, #FFE680 0%, #FFD700 100%) !important; color: #6B0000 !important; transform: translateY(-1px) scale(1.05) !important; box-shadow: 0 6px 16px -2px rgba(255,165,0,.6), inset 0 1px 0 rgba(255,255,255,.7) !important; } [data-theme="anniversary"] #pwa-install-btn:active { background: linear-gradient(135deg, #F0B85A 0%, #FFA500 100%) !important; transform: translateY(0) scale(.95) !important; } [data-theme="anniversary"] #pwa-dismiss-btn { color: rgba(255,255,255,.6) !important; background: transparent !important; border-radius: 50% !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] #pwa-dismiss-btn:hover { color: #FFD700 !important; background: rgba(255,215,0,.2) !important; transform: rotate(90deg) !important; } [data-theme="anniversary"] #pwa-dismiss-btn:active { background: rgba(255,215,0,.35) !important; transform: scale(.9) rotate(90deg) !important; } /* ----- 模态弹窗内按钮 .modal__ft ----- */ [data-theme="anniversary"] .modal__ft .btn { color: var(--c-text) !important; } [data-theme="anniversary"] .modal__ft .btn:not(.btn--primary) { background: linear-gradient(135deg, rgba(255,232,220,.7) 0%, rgba(255,215,0,.15) 100%) !important; color: #8B0000 !important; border: 1px solid rgba(240,184,90,.4) !important; } [data-theme="anniversary"] .modal__ft .btn:not(.btn--primary):hover { background: linear-gradient(135deg, rgba(255,232,220,1) 0%, rgba(255,215,0,.3) 100%) !important; color: #6B0000 !important; border-color: #F0B85A !important; } [data-theme="anniversary"] .modal__ft .btn:not(.btn--primary):active { background: rgba(255,215,0,.35) !important; transform: scale(.95) !important; } /* ----- 链接 hover/active ----- */ [data-theme="anniversary"] a { color: #B81818 !important; transition: color .15s var(--ease) !important; } [data-theme="anniversary"] a:hover { color: #8B0000 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } [data-theme="anniversary"] a:active { color: #6B0000 !important; } /* ----- 输入框 hover/active/focus ----- */ [data-theme="anniversary"] .input, [data-theme="anniversary"] textarea, [data-theme="anniversary"] select { color: var(--c-text) !important; transition: all .2s var(--ease) !important; } [data-theme="anniversary"] .input:hover, [data-theme="anniversary"] textarea:hover, [data-theme="anniversary"] select:hover { border-color: #F0B85A !important; box-shadow: 0 0 0 3px rgba(255,215,0,.1) !important; } [data-theme="anniversary"] .input:focus, [data-theme="anniversary"] textarea:focus, [data-theme="anniversary"] select:focus { border-color: #CC2020 !important; box-shadow: 0 0 0 3px rgba(204,32,32,.15) !important; background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,248,240,.95) 100%) !important; } [data-theme="anniversary"] .input:disabled, [data-theme="anniversary"] textarea:disabled, [data-theme="anniversary"] select:disabled { opacity: .5 !important; cursor: not-allowed !important; background: var(--c-bg-2) !important; } /* ----- 复选框 / 单选框 ----- */ [data-theme="anniversary"] input[type="radio"]:hover, [data-theme="anniversary"] input[type="checkbox"]:hover { border-color: #F0B85A !important; background: rgba(255,215,0,.1) !important; } [data-theme="anniversary"] input[type="radio"]:checked, [data-theme="anniversary"] input[type="checkbox"]:checked { border-color: #CC2020 !important; background: #CC2020 !important; } [data-theme="anniversary"] input[type="radio"]:checked::after { background: #FFD700 !important; } [data-theme="anniversary"] input[type="checkbox"]:checked::after { color: #FFD700 !important; }