/* ========================================================= 朋克活泼主题 · 学员端备用皮肤（额外版本，不影响原版） 开关：，由 js/theme.js 控制 设计：深空紫底 + 酸性绿/热粉/电光青霓虹撞色 + 贴纸卡片 ========================================================= */ /* ── 1. 主题变量：site.css 绝大多数组件使用这些变量 ── */ html[data-theme="punk"] { --ink: #f4efff; --muted: #a99fc9; --paper: #0e0917; --card: #1d1433; --line: #3b2e63; --accent: #c8ff2e; /* 酸性绿 */ --accent-2: #ff2e88; /* 热粉 */ --sky: #241a3d; --danger: #ff6b6b; --ok: #6dff9a; --font-display: "ZCOOL KuaiLe", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif; --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Arial", sans-serif; } /* ── 2. 页面底色与氛围层 ── */ html[data-theme="punk"] body.page-body { background: #0e0917; color: var(--ink); } html[data-theme="punk"] a { color: var(--accent); } html[data-theme="punk"] .muted { color: var(--muted); } html[data-theme="punk"] .ok { color: var(--ok); } html[data-theme="punk"] .bad { color: var(--danger); } html[data-theme="punk"] .bg-fx { background: radial-gradient(1000px 520px at 12% -8%, rgba(160, 107, 255, .26) 0%, transparent 55%), radial-gradient(900px 480px at 92% 8%, rgba(255, 46, 136, .18) 0%, transparent 50%), radial-gradient(700px 420px at 70% 90%, rgba(34, 224, 255, .14) 0%, transparent 55%), linear-gradient(165deg, #150e26 0%, #0e0917 45%, #0c0714 100%); } html[data-theme="punk"] .bg-med-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(200, 255, 46, .10) 1px, transparent 0), linear-gradient(90deg, rgba(200, 255, 46, .025) 1px, transparent 1px), linear-gradient(0deg, rgba(200, 255, 46, .025) 1px, transparent 1px); } html[data-theme="punk"] .bg-med-cross { background: linear-gradient(#ff2e88, #ff2e88) center/18% 70% no-repeat, linear-gradient(#ff2e88, #ff2e88) center/70% 18% no-repeat; } html[data-theme="punk"] .ecg-path { stroke: rgba(200, 255, 46, .28); } html[data-theme="punk"] .bg-orb-a { background: rgba(160, 107, 255, .24); } html[data-theme="punk"] .bg-orb-b { background: rgba(255, 46, 136, .16); } html[data-theme="punk"] .bg-orb-c { background: rgba(34, 224, 255, .14); } /* ── 3. 顶栏与导航（贴纸风格） ── */ html[data-theme="punk"] .site-header { border-bottom: 2px solid var(--line); } html[data-theme="punk"] .brand strong { font-family: var(--font-display); color: var(--ink); font-size: .95rem; letter-spacing: .03em; } html[data-theme="punk"] .nav a { color: var(--ink); } html[data-theme="punk"] .portal-nav a { color: var(--ink); border: 1.5px solid var(--line); border-radius: 9px; background: rgba(29, 20, 51, .55); transition: transform .12s, box-shadow .12s, background .12s; } html[data-theme="punk"] .portal-nav a:hover { background: #251a40; transform: translateY(-1px) rotate(-1deg); } html[data-theme="punk"] .portal-nav a.active { background: var(--accent); border-color: var(--accent); color: #0e0917; box-shadow: 3px 3px 0 var(--accent-2); } html[data-theme="punk"] .portal-nav--manage a.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; box-shadow: 3px 3px 0 var(--accent); } /* 风格切换按钮（顶栏） */ .theme-toggle { display: inline-flex; align-items: center; gap: .25rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .theme-toggle:hover { background: var(--sky); } html[data-theme="punk"] .theme-toggle { color: var(--accent); background: rgba(200, 255, 46, .08); } html[data-theme="punk"] .theme-toggle:hover { background: rgba(200, 255, 46, .18); } /* ── 4. 按钮 ── */ html[data-theme="punk"] .btn { border-radius: 9px; border: 2px solid var(--accent); background: var(--accent); color: #0e0917; box-shadow: 3px 3px 0 var(--accent-2); transition: transform .1s, box-shadow .1s, filter .1s; } html[data-theme="punk"] .btn:hover { color: #0e0917; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--accent-2); } html[data-theme="punk"] .btn.secondary { background: transparent; color: var(--accent); box-shadow: none; } html[data-theme="punk"] .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); box-shadow: none; } html[data-theme="punk"] .btn.ghost:hover { color: var(--ink); border-color: var(--accent); } html[data-theme="punk"] .btn.warn { background: var(--accent-2); border-color: var(--accent-2); color: #fff; box-shadow: 3px 3px 0 var(--accent); } /* ── 5. 卡片 / 面板 / 数据条 ── */ html[data-theme="punk"] .panel { background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .30); } html[data-theme="punk"] .panel h2, html[data-theme="punk"] .panel h3 { font-family: var(--font-display); color: var(--ink); } html[data-theme="punk"] .stat { background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .30); } html[data-theme="punk"] .stats .stat:nth-child(1) .n { color: #ffd60a; } html[data-theme="punk"] .stats .stat:nth-child(2) .n { color: #22e0ff; } html[data-theme="punk"] .stats .stat:nth-child(3) .n { color: var(--ok); } html[data-theme="punk"] .stats .stat:nth-child(4) .n { color: var(--accent-2); } html[data-theme="punk"] .stat .l { color: var(--muted); } /* ── 6. 三大模式卡片 ── */ html[data-theme="punk"] .mode-card { border-radius: 14px; border: 2px solid var(--line); background: var(--card); box-shadow: 5px 5px 0 rgba(0, 0, 0, .35); transition: transform .12s, box-shadow .12s; } html[data-theme="punk"] .mode-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(0, 0, 0, .35); } html[data-theme="punk"] .mode-card--quick { border-top: 4px solid #ffd60a; } html[data-theme="punk"] .mode-card--random { border-top: 4px solid #22e0ff; } html[data-theme="punk"] .mode-card--deep { border-top: 4px solid var(--accent-2); } html[data-theme="punk"] .mode-icon { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .4)); } html[data-theme="punk"] .mode-go { color: var(--accent); font-weight: 800; } /* ── 7. 表格 ── */ html[data-theme="punk"] table.data th { color: var(--accent); border-bottom: 2px solid var(--accent-2); } html[data-theme="punk"] table.data td { border-bottom: 1px solid var(--line); } html[data-theme="punk"] table.data tbody tr:hover { background: rgba(160, 107, 255, .10); } /* ── 8. 刷题 / 答题区 ── */ html[data-theme="punk"] .q-block { border-top: 1px dashed var(--line); } html[data-theme="punk"] .take-wrapper .choice { background: #171029; border: 1.5px solid var(--line); border-radius: 10px; } html[data-theme="punk"] .take-wrapper .choice:hover { border-color: #22e0ff; background: rgba(34, 224, 255, .07); } html[data-theme="punk"] .take-wrapper .flag-btn { background: #171029; border: 1px solid var(--line); color: var(--accent-2); } html[data-theme="punk"] .take-wrapper .flag-btn:hover { background: rgba(255, 46, 136, .12); } html[data-theme="punk"] .choice input { accent-color: var(--accent); } html[data-theme="punk"] input[type="radio"], html[data-theme="punk"] input[type="checkbox"] { accent-color: var(--accent); } /* ── 9. 表单控件 ── */ html[data-theme="punk"] input[type=text], html[data-theme="punk"] input[type=password], html[data-theme="punk"] input[type=number], html[data-theme="punk"] input[type=url], html[data-theme="punk"] input[type=email], html[data-theme="punk"] select, html[data-theme="punk"] textarea { background: #171029; color: var(--ink); border: 1.5px solid var(--line); } /* ── 10. 提示 / 页脚 ── */ html[data-theme="punk"] .flash { background: var(--card); border: 1px solid var(--line); color: var(--ink); } html[data-theme="punk"] .flash.error { background: rgba(255, 107, 107, .12); border-color: var(--danger); color: var(--danger); } html[data-theme="punk"] .footer, html[data-theme="punk"] .footer--fixed { background: rgba(14, 9, 23, .88); border-top: 2px solid var(--line); color: var(--muted); } /* ── 11. 画像与设置 ── */ html[data-theme="punk"] .profile-tag { background: rgba(255, 214, 10, .14); border: 1.5px solid #ffd60a; color: #ffd60a; } html[data-theme="punk"] .profile-hint { color: var(--muted); } html[data-theme="punk"] .profile-option { background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; } html[data-theme="punk"] .profile-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200, 255, 46, .25); } /* ── 12. 弹窗（回忆 / 快速5分钟 / 标记） ── */ html[data-theme="punk"] .recall-backdrop { background: rgba(8, 5, 16, .78); } html[data-theme="punk"] .recall-modal { background: var(--card); border: 2px solid var(--line); box-shadow: 10px 10px 0 rgba(0, 0, 0, .40); } html[data-theme="punk"] .recall-eyebrow { color: var(--accent); } html[data-theme="punk"] .recall-title { color: var(--accent-2); font-family: var(--font-display); } html[data-theme="punk"] .recall-sub { color: var(--muted); } html[data-theme="punk"] .recall-word--new { color: var(--muted); } html[data-theme="punk"] .recall-word--weak { color: var(--danger); } html[data-theme="punk"] .recall-word--learning { color: #22e0ff; } html[data-theme="punk"] .recall-word--mastered { color: var(--ok); } html[data-theme="punk"] .kc-dot--new { background: var(--muted); } html[data-theme="punk"] .kc-dot--weak { background: var(--danger); } html[data-theme="punk"] .kc-dot--learning { background: #22e0ff; } html[data-theme="punk"] .kc-dot--mastered { background: var(--ok); } html[data-theme="punk"] .flag-modal-box { background: var(--card); border: 2px solid var(--line); border-radius: 12px; } html[data-theme="punk"] .quick5-timer { background: var(--card); border: 1.5px solid var(--line); color: var(--ink); } /* 真题/预测卡片与通知列表：白底写死处改为主题深色 */ html[data-theme="punk"] .real-paper { background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; } html[data-theme="punk"] .real-paper__info strong { color: var(--ink); } html[data-theme="punk"] .real-paper__info .muted { color: var(--muted); } html[data-theme="punk"] .notif-item { background: var(--card); } html[data-theme="punk"] .demo-meta code { background: var(--sky); color: var(--ink); } /* ── 13. 知识云图 / 知识树 / 章节卡片 ── */ html[data-theme="punk"] .kc-cloud, html[data-theme="punk"] .kp-tree, html[data-theme="punk"] .it-tree { color: var(--ink); } html[data-theme="punk"] .kp-card, html[data-theme="punk"] .subject-card { background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .30); } html[data-theme="punk"] .subject-card__name, html[data-theme="punk"] .kp-card__name { color: var(--accent); } /* 弹窗考点标签：深底浅字，避免白底浅字看不清 */ html[data-theme="punk"] .kp-tag { background: var(--sky); color: var(--ink); border-color: var(--line); } html[data-theme="punk"] .kp-tag:hover { background: rgba(34, 224, 255, .12) !important; border-color: var(--accent) !important; color: var(--ink) !important; } html[data-theme="punk"] .kp-tag--active { background: rgba(200, 255, 46, .16) !important; border-color: var(--accent) !important; color: var(--ink) !important; } html[data-theme="punk"] .kp-chapter-row { background: rgba(160, 107, 255, .10); } html[data-theme="punk"] .kp-chapter-card { background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .30); } html[data-theme="punk"] .kp-chapter-card .kp-chapter-name { color: var(--ink); } html[data-theme="punk"] .kp-node { background: var(--card); color: var(--ink); } html[data-theme="punk"] .deep-chip { background: var(--card); border: 1.5px solid var(--line); } /* ── 14. 滚动条与选中 ── */ html[data-theme="punk"] ::selection { background: var(--accent); color: #0e0917; } html[data-theme="punk"] * { scrollbar-color: #3b2e63 #120d1e; } @media (prefers-reduced-motion: reduce) { html[data-theme="punk"] .portal-nav a, html[data-theme="punk"] .mode-card, html[data-theme="punk"] .btn { transition: none; transform: none; } } /* ══════════════════════════════════════════════ 贴纸系统（仅朋克主题显示） ══════════════════════════════════════════════ */ html[data-theme="punk"] .sticker { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; object-fit: contain; z-index: 60; } @keyframes stickerBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes stickerPopIn { 0% { transform: scale(.2) rotate(-10deg); opacity: 0; } 28% { transform: scale(1.18) rotate(5deg); opacity: 1; } 44% { transform: scale(.9) rotate(-3deg); } 62% { transform: scale(1.06) rotate(2deg); } 78% { transform: scale(1); } 100% { transform: scale(1); opacity: 1; } } @keyframes stickerFadeOut { to { transform: scale(.85); opacity: 0; } } @keyframes stickerDrift { 0% { transform: translateX(-12vw) rotate(-8deg); opacity: 0; } 6% { opacity: .85; } 94% { opacity: .85; } 100% { transform: translateX(112vw) rotate(8deg); opacity: 0; } } html[data-theme="punk"] .sticker--breath { animation: stickerBreath 3.2s ease-in-out infinite; } html[data-theme="punk"] .sticker--drift { animation: stickerDrift 13s linear infinite; } html[data-theme="punk"] .sticker--pop { animation: stickerPopIn .55s cubic-bezier(.34, 1.56, .64, 1) forwards, stickerFadeOut .5s ease 2.5s forwards; } /* 居中弹跳贴纸（弹窗内） */ html[data-theme="punk"] .sticker--pop-center { left: 50%; top: 40%; width: 210px; height: 210px; margin-left: -105px; margin-top: -105px; } /* 全屏居中贴纸（结果页等） */ html[data-theme="punk"] .sticker--pop-fixed { position: fixed; left: 50%; top: 36%; width: 220px; height: 220px; margin-left: -110px; margin-top: -110px; } /* 全局装饰层：星星 / 爱心 呼吸与飘动 */ .punk-decor { display: none; } html[data-theme="punk"] .punk-decor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } html[data-theme="punk"] .punk-decor img { position: absolute; opacity: .5; } html[data-theme="punk"] .punk-decor .pd-1 { left: 4%; top: 15%; width: 58px; animation: stickerBreath 3.6s ease-in-out infinite; } html[data-theme="punk"] .punk-decor .pd-2 { right: 5%; top: 22%; width: 44px; animation: stickerBreath 4.2s ease-in-out infinite; } html[data-theme="punk"] .punk-decor .pd-3 { left: 12%; bottom: 14%; width: 50px; animation: stickerBreath 3s ease-in-out infinite; } html[data-theme="punk"] .punk-decor .pd-4 { left: -70px; top: 36%; width: 42px; animation: stickerDrift 13s linear infinite; } html[data-theme="punk"] .punk-decor .pd-5 { right: 8%; bottom: 26%; width: 36px; animation: stickerBreath 4.8s ease-in-out infinite; } /* 随机散题里的贴纸：只在朋克下显示 */ .punk-sticker { display: none; } html[data-theme="punk"] .punk-sticker { display: block; } @media (prefers-reduced-motion: reduce) { html[data-theme="punk"] .sticker--breath, html[data-theme="punk"] .sticker--drift, html[data-theme="punk"] .sticker--pop { animation: none; } }