/* ============================================================ 2099 工具箱 · 全站公共样式 依据 style-spec.md（UI 风格与 CSS 规范）实现 核心：所有颜色/字体/圆角/边框由 CSS 变量驱动， 切换主题只改 ，页面结构零改动。 ============================================================ */ /* ---------- 6 套主题变量 ---------- */ :root, html[data-theme="esports"] { --bg: #06060c; --text: #eaeaf5; --dim: #9a9ab5; --card-bg: rgba(255,255,255,.03); --card-border: 1px solid rgba(124,92,255,.35); --card-radius: 18px; --card-shadow: 0 20px 50px -18px rgba(124,92,255,.6); --hover-shadow: 0 26px 60px -16px rgba(124,92,255,.7); --accent: #7c5cff; --accent2: #25d0ff; --accent3: #ff5ca8; --font-body: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; --font-display: "Orbitron", "Microsoft YaHei", sans-serif; --footer-bg: rgba(9,9,18,.7); } html[data-theme="rpg"] { --bg: #1b130b; --text: #f0e2c8; --dim: #b79a6e; --card-bg: #241a10; --card-border: 3px solid #6b4a2b; --card-radius: 12px; --card-shadow: inset 0 0 0 1px rgba(212,175,55,.18), 0 14px 30px -12px rgba(0,0,0,.7); --hover-shadow: inset 0 0 0 1px rgba(212,175,55,.4), 0 20px 40px -14px rgba(0,0,0,.8); --accent: #d4af37; --accent2: #3fb98a; --accent3: #d4af37; --font-body: "Noto Serif SC", "Microsoft YaHei", serif; --font-display: "Cinzel", "Noto Serif SC", serif; --footer-bg: #15100a; } html[data-theme="acg"] { --bg: #fff0f7; --text: #5a3a4a; --dim: #a88498; --card-bg: #ffffff; --card-border: 2px solid #ffd6e8; --card-radius: 26px; --card-shadow: 0 14px 30px -12px rgba(255,158,199,.4); --hover-shadow: 0 22px 44px -12px rgba(255,158,199,.6); --accent: #ff9ec7; --accent2: #8ad6ff; --accent3: #ffd28a; --font-body: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; --font-display: "Mochiy Pop One", "Microsoft YaHei", sans-serif; --footer-bg: #fff5fb; } html[data-theme="pixel"] { --bg: #0e0e1a; --text: #e8e8f5; --dim: #8a8ab0; --card-bg: #16162a; --card-border: 4px solid #5fff8f; --card-radius: 0; --card-shadow: 8px 8px 0 #05050c; --hover-shadow: 12px 12px 0 #05050c; --accent: #5fff8f; --accent2: #ffcf3f; --accent3: #ff5ca8; --font-body: "Noto Sans SC", "Microsoft YaHei", monospace; --font-display: "Press Start 2P", monospace; --footer-bg: #12121f; } html[data-theme="cyberpunk"] { --bg: #05060f; --text: #d8e8ff; --dim: #7d8db5; --card-bg: #0a0c1c; --card-border: 1px solid #05f2f2; --card-radius: 0; --card-shadow: 0 0 0 1px rgba(255,43,214,.3), 0 16px 40px -18px rgba(5,242,242,.5); --hover-shadow: 0 0 22px rgba(255,43,214,.5); --accent: #ff2bd6; --accent2: #05f2f2; --accent3: #ff2bd6; --font-body: "Noto Sans SC", "Microsoft YaHei", sans-serif; --font-display: "Share Tech Mono", monospace; --footer-bg: #070914; } html[data-theme="glass"] { --bg: transparent; --text: #f4f4f8; --dim: #a7a7b8; --card-bg: rgba(255,255,255,.05); --card-border: 1px solid rgba(255,255,255,.12); --card-radius: 22px; --card-shadow: 0 20px 50px -22px rgba(0,0,0,.7); --hover-shadow: 0 26px 60px -20px rgba(124,92,255,.5); --accent: #7c5cff; --accent2: #25d0ff; --accent3: #ff5ca8; --font-body: "Sora", "Noto Sans SC", "Microsoft YaHei", sans-serif; --font-display: "Sora", "Microsoft YaHei", sans-serif; --footer-bg: rgba(18,18,28,.55); } /* glass 主题背景兜底（--bg 透明时保证页面有底色） */ html[data-theme="glass"] body { background: linear-gradient(160deg, #141426, #1b1b30); } /* ---------- 基础布局 ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; transition: background .4s, color .4s; } .wrap { width: min(1080px, 92vw); margin: 0 auto; } main.page { width: min(1080px, 92vw); margin: 0 auto; padding: 28px 0 8px; flex: 1; } .page-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 2px; margin-bottom: 6px; } .page-sub { color: var(--dim); font-size: 13px; letter-spacing: 1px; margin-bottom: 24px; } /* ---------- 响应式断点统一（窄屏标题降级） ---------- */ @media (max-width: 720px) { .page-title { font-size: 22px; } .page-sub { margin-bottom: 18px; } } @media (max-width: 480px) { .page-title { font-size: 19px; } } /* ---------- 面包屑导航 ---------- */ .crumb { font-size: 12px; color: var(--dim); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .crumb a { color: var(--dim); text-decoration: none; transition: color .15s; } .crumb a:hover { color: var(--accent2); } .crumb .sep { color: var(--dim); opacity: .55; } .crumb .cur { color: var(--text); font-weight: 600; } /* ===== 顶部栏（可扩展·不拥挤） ===== */ .topbar { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); transition: background .4s; } .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent3), var(--accent), var(--accent2), transparent); opacity: .75; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; } .brand { font-family: var(--font-display); font-weight: 800; font-size: 19px; white-space: nowrap; text-decoration: none; background: linear-gradient(110deg, var(--accent3), var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .menu-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(120deg, var(--accent3), var(--accent), var(--accent2)) border-box; border: 1px solid transparent; color: var(--text); border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: var(--font-body); backdrop-filter: blur(8px); transition: .2s; } .menu-btn:hover { box-shadow: 0 0 20px -6px var(--accent); color: var(--accent2); } .menu-btn .bars { font-size: 15px; line-height: 1; } /* ===== 全部工具抽屉（分组+搜索，无限扩展） ===== */ .drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; opacity: 0; transition: .25s; } .drawer.open { visibility: visible; opacity: 1; } .drawer-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } .drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: var(--footer-bg, var(--card-bg)); border-left: 1px solid var(--card-border); backdrop-filter: blur(16px); box-shadow: -20px 0 60px -20px rgba(0,0,0,.7); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; padding: 18px; overflow: auto; } .drawer.open .drawer-panel { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .drawer-close { background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer; padding: 4px 8px; } .drawer-close:hover { color: var(--accent); } .drawer-search input { width: 100%; padding: 10px 14px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; } .drawer-search input:focus { border-color: var(--accent); } .drawer-nav { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; } .nav-group h4 { font-size: 12px; letter-spacing: 1px; color: var(--dim); margin-bottom: 8px; } .nav-group a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; border: 1px solid transparent; transition: .15s; } .nav-group a:hover { border-color: var(--card-border); background: var(--card-bg); } .nav-group a .ic { width: 22px; text-align: center; opacity: .85; } .nav-group a.on { border-color: var(--accent); background: var(--card-bg); } .nav-group a.hide { display: none; } .drawer-empty { color: var(--dim); font-size: 13px; text-align: center; padding: 20px 0; display: none; } /* ===== 页尾（仅备案信息与小字说明） ===== */ .site-footer { margin-top: 64px; border-top: 1px solid var(--card-border); background: var(--footer-bg, var(--card-bg)); padding: 22px 0 20px; backdrop-filter: blur(8px); transition: background .4s; } .footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--dim); font-size: 12px; } .footer-bottom a { color: var(--dim); text-decoration: none; } .footer-bottom a:hover { color: var(--accent2); } .footer-beian { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .footer-beian img { width: 12px; height: 12px; vertical-align: middle; } @media (max-width: 720px) { .footer-bottom { flex-direction: column; } } /* ===== 主题切换器（右下角 🎨 浮钮） ===== */ .theme-fab { position: fixed; right: 18px; bottom: 18px; z-index: 150; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 10px 26px -10px rgba(0,0,0,.7); backdrop-filter: blur(10px); transition: .25s; } .theme-fab:hover { transform: scale(1.08); border-color: var(--accent); } .theme-panel { position: fixed; right: 18px; bottom: 74px; z-index: 151; width: min(230px, calc(100vw - 36px)); background: var(--footer-bg, var(--card-bg)); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px; backdrop-filter: blur(18px); box-shadow: 0 20px 50px -18px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transition: .22s; } .theme-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .theme-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .theme-panel-head span { font-size: 13px; font-weight: 700; color: var(--text); } .theme-close { background: none; border: none; color: var(--dim); font-size: 16px; cursor: pointer; padding: 2px 6px; } .theme-close:hover { color: var(--accent); } .theme-options { display: flex; flex-direction: column; gap: 6px; } .sw-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-family: var(--font-body); cursor: pointer; transition: .15s; } .sw-dots { display: flex; gap: 4px; flex-shrink: 0; } .sw-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .sw-opt:hover { border-color: var(--accent); } .sw-opt.on { border-color: var(--accent); background: var(--card-bg); box-shadow: 0 0 0 1px var(--accent); } .sw-opt.on::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 700; } /* ===== 主页装饰横幅（变量驱动，纯装饰，不承载业务内容） ===== */ .hero-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent3), var(--accent), var(--accent2)); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 46px 28px 40px; text-align: center; margin-bottom: 28px; } .hero-band::before { content: ""; position: absolute; top: -70px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.1); } .hero-band::after { content: ""; position: absolute; bottom: -80px; left: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.07); } .hero-band .hb-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: 4px; color: #fff; } .hero-band .hb-sub { position: relative; z-index: 1; color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: 3px; margin-top: 8px; } @media (max-width: 720px) { .hero-band { padding: 34px 20px 30px; } .hero-band .hb-title { font-size: 24px; } } /* ===== 子页 Hero 渐变横幅（与主页 hero-band 同源，纯装饰） ===== */ .page-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent3), var(--accent), var(--accent2)); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 30px 28px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-hero::before { content: ""; position: absolute; top: -60px; right: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.1); } .page-hero::after { content: ""; position: absolute; bottom: -70px; left: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.07); } .page-hero .hb-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 2px; color: #fff; } .page-hero .hb-sub { position: relative; z-index: 1; color: rgba(255,255,255,.85); font-size: 12px; letter-spacing: 2px; margin-top: 6px; } .page-hero .hb-side { position: relative; z-index: 1; flex-shrink: 0; } @media (max-width: 720px) { .page-hero { padding: 24px 20px; } .page-hero .hb-title { font-size: 20px; } } /* ===== 通用卡片（主页工具入口等） ===== */ .tool-card { display: flex; align-items: center; gap: 18px; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 22px 24px; text-decoration: none; color: var(--text); box-shadow: var(--card-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; cursor: pointer; } .tool-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 22px 44px -18px var(--accent); } .tool-card .icon-block { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(135deg, var(--accent3), var(--accent), var(--accent2)); box-shadow: 0 12px 26px -12px var(--accent); transition: transform .25s; } .tool-card:hover .icon-block { transform: scale(1.06) rotate(-4deg); } .tool-card .info { text-align: left; flex: 1; } .tool-card .info .name { font-size: 17px; font-weight: 700; } .tool-card .info .desc { font-size: 12px; color: var(--dim); margin-top: 3px; } .tool-card .arrow { font-size: 18px; color: var(--dim); flex-shrink: 0; transition: color .2s; } .tool-card:hover .arrow { color: var(--accent); } .tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .tool-list { grid-template-columns: 1fr; } } /* 主页工具分组 */ .tool-group { margin-bottom: 26px; } .tool-group:last-child { margin-bottom: 0; } .tool-group-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text); padding: 12px 18px; margin-bottom: 14px; letter-spacing: 1px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2) 5%, transparent) 60%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); } .tool-group-title::before { content: ""; width: 5px; height: 18px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(180deg, var(--accent3), var(--accent), var(--accent2)); box-shadow: 0 0 12px var(--accent); } .tool-group-title .tg-sub { font-size: 12px; font-weight: 500; color: var(--dim); letter-spacing: 2px; } /* ===== 通用表单控件（变量驱动） ===== */ input, select, textarea { background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 10px; padding: 6px 12px; font-size: 14px; font-family: var(--font-body); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } select { cursor: pointer; } /* 下拉选项：原生 option 不继承页面配色，展开列表易出现白底浅字看不清；显式跟随主题并保证对比度 */ select option { background-color: var(--bg); color: var(--text); } /* glass 主题 --bg 为透明，option 需不透明兜底 */ html[data-theme="glass"] select option { background-color: #1b1b30; color: #f4f4f8; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 18px; border: 1px solid var(--card-border); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--font-body); background: var(--card-bg); color: var(--text); transition: all .2s; } .btn:hover { border-color: var(--accent); color: var(--accent2); transform: translateY(-1px); } .btn-primary { background: linear-gradient(110deg, var(--accent3), var(--accent), var(--accent2)); color: #fff; border: none; } .btn-primary:hover { filter: brightness(1.08); color: #fff; } .btn-sm { padding: 3px 10px; font-size: 12px; } /* ===== 通用区块（变量驱动） ===== */ .section-box { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 20px; margin-bottom: 20px; } .section-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ===== 滚动显现动效（纯装饰，site.js 注入 .reveal，无 JS 时不影响） ===== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }