/* ================================================================ * 线路智能调度系统 · 界面皮肤(skins) v1.0.313 * ---------------------------------------------------------------- * 用法:(由 js 侧 themeApply 写入) * · classic 经典 = 默认皮肤,本文件对它不覆盖任何规则(保持原样,零回归) * · tech 科技感 = 深空蓝黑 + 青蓝霓虹;深色地图、发光描边、等宽数字 * · vivid 惊艳色 = 紫粉渐变 + 玻璃拟态卡片;渐变表头/按钮,彩色投影 * · lively 灵动性 = 薄荷青 + 大圆角;弹性动效(悬停上浮/按压缩放)、条纹进度 * · eye 护眼 = 暖米灰绿 + 低对比;无纯白、弱阴影,适合长时间值班盯屏 * 载入顺序:必须放在 css/style.css 之后(令牌覆盖依赖顺序) * 设计约定:颜色/圆角/阴影一律走 css/style.css :root 里的设计令牌; * 本文件只做「令牌赋值 + 少量组件属性」,不改布局与结构(不动 grid/flex 结构) * ================================================================ */ /* ---------------- 通用皮肤层(除经典外所有皮肤共用) ---------------- */ /* 浮层:地图全屏内的半透明浮层底统一走 --overlay(深色皮肤下不再刺白) */ :root[data-theme]:not([data-theme="classic"]) .map-fs .md-progress-fs, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-exit, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-route, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-tools, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-panel-tab, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-panel-body, :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-ask-card, :root[data-theme]:not([data-theme="classic"]) .map-fs .md-seq-hud, :root[data-theme]:not([data-theme="classic"]) .map-fs .md-line-info, :root[data-theme]:not([data-theme="classic"]) .md-tip{ background:var(--overlay); color:var(--txt); } /* 表单/选择器:深色皮肤下下拉项不能再是白底黑字 */ :root[data-theme]:not([data-theme="classic"]) select option{ background:var(--card); color:var(--txt); } :root[data-theme]:not([data-theme="classic"]) .inp::placeholder{ color:var(--sub-2); } :root[data-theme]:not([data-theme="classic"]) .inp:focus{ outline:2px solid var(--focus-ring); outline-offset:1px; } /* 圆角/阴影统一走令牌 */ :root[data-theme]:not([data-theme="classic"]) .panel, :root[data-theme]:not([data-theme="classic"]) .card{ border-radius:var(--r-lg); box-shadow:var(--shadow-1); } :root[data-theme]:not([data-theme="classic"]) .modal{ border-radius:var(--r-xl); box-shadow:var(--shadow-2); } :root[data-theme]:not([data-theme="classic"]) .table-wrap, :root[data-theme]:not([data-theme="classic"]) .fleet-card, :root[data-theme]:not([data-theme="classic"]) .pick-list, :root[data-theme]:not([data-theme="classic"]) .plan-box, :root[data-theme]:not([data-theme="classic"]) .ai-chat{ border-radius:var(--r-md); } :root[data-theme]:not([data-theme="classic"]) .btn{ border-radius:var(--r-sm); } :root[data-theme]:not([data-theme="classic"]) .badge{ border-radius:var(--r-pill); } /* 表头与滚动条 */ :root[data-theme]:not([data-theme="classic"]) th{ border-bottom:1px solid var(--line-strong); letter-spacing:.2px; } :root[data-theme]:not([data-theme="classic"]) td, :root[data-theme]:not([data-theme="classic"]) th{ font-variant-numeric:tabular-nums; } :root[data-theme]:not([data-theme="classic"]) ::-webkit-scrollbar{ width:11px; height:11px; } :root[data-theme]:not([data-theme="classic"]) ::-webkit-scrollbar-track{ background:var(--bg-soft); } :root[data-theme]:not([data-theme="classic"]) ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; border:2px solid var(--bg-soft); } :root[data-theme]:not([data-theme="classic"]) ::-webkit-scrollbar-thumb:hover{ background:var(--pri); } /* 过渡:只挂在会变色的组件上(避免大表格逐格重绘) */ :root[data-theme]:not([data-theme="classic"]) body, :root[data-theme]:not([data-theme="classic"]) #topbar, :root[data-theme]:not([data-theme="classic"]) .panel, :root[data-theme]:not([data-theme="classic"]) .card, :root[data-theme]:not([data-theme="classic"]) .btn, :root[data-theme]:not([data-theme="classic"]) .inp, :root[data-theme]:not([data-theme="classic"]) th, :root[data-theme]:not([data-theme="classic"]) .badge, :root[data-theme]:not([data-theme="classic"]) .tabs .tab, :root[data-theme]:not([data-theme="classic"]) .pick-item{ transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } @media (prefers-reduced-motion: reduce){ :root[data-theme] *{ transition:none !important; animation:none !important; } } /* ================================================================ * ① 科技感 tech —— 深空蓝黑 + 青蓝霓虹 * ================================================================ */ :root[data-theme="tech"]{ --ok-ink:var(--ok); /* v1.0.415:成功/已指定·最优 的文字色(与各皮肤 --ok 同色) */ --bg:#080d18; --card:#0f1728; --line:#20304f; --line-strong:#2c4470; --txt:#e4eeff; --sub:#8ba3c7; --ink-2:#c3d3ee; --sub-2:#657c9f; --sub-3:#455f85; --pri:#22d3ee; --pri-d:#0ea5b7; --pri-2:#38bdf8; --pri-lite:#67e8f9; --on-accent:#03151b; --bg-soft:#131e33; --bg-hover:#16243c; --bg-sel:#12314a; --bg-tint:#132a42; --bg-elev:#101a2c; --bg-mute:#131a29; --bg-mute-hover:#182238; --track:#1b2b45; --focus-ring:rgba(34,211,238,.55); --overlay:rgba(9,16,28,.94); --toast-bg:#0b2233; --ok:#34d399; --warn:#fbbf24; --err:#f87171; --ok-bg:rgba(52,211,153,.16); --warn-bg:rgba(251,191,36,.16); --err-bg:rgba(248,113,113,.16); --warn-ink:#fcd34d; --warn-line:rgba(251,191,36,.45); --accent2:#f59e0b; --accent2-ink:#fbbf24; --accent2-bg:rgba(245,158,11,.16); --mark:#fbbf24; --mark-ink:#2a1d00; --mark-bg:rgba(251,191,36,.14); --pin-off:#4a5b7d; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-pill:16px; --shadow-1:0 2px 12px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.07); --shadow-2:0 12px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(34,211,238,.12); } :root[data-theme="tech"] body{ background: radial-gradient(1100px 480px at 12% -8%, rgba(34,211,238,.10), transparent 62%), radial-gradient(900px 420px at 96% 2%, rgba(124,58,237,.13), transparent 62%), linear-gradient(180deg,#080d18 0%,#070b13 55%,#05080f 100%); background-attachment:fixed; } :root[data-theme="tech"] #topbar{ background:rgba(9,14,26,.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(34,211,238,.28); box-shadow:0 1px 0 rgba(34,211,238,.10), 0 8px 24px rgba(0,0,0,.5); } :root[data-theme="tech"] .brand h1{ letter-spacing:.6px; text-shadow:0 0 14px rgba(34,211,238,.35); } :root[data-theme="tech"] .brand .logo{ filter:drop-shadow(0 0 8px rgba(34,211,238,.5)); } :root[data-theme="tech"] #nav button{ color:#b9cbe6; } :root[data-theme="tech"] #nav button:hover{ background:rgba(34,211,238,.10); color:#a5f3fc; } :root[data-theme="tech"] #nav button.active{ background:linear-gradient(135deg,#22d3ee,#0ea5b7); color:#03151b; box-shadow:0 0 14px rgba(34,211,238,.45), 0 0 0 1px rgba(34,211,238,.5); } :root[data-theme="tech"] .panel, :root[data-theme="tech"] .card{ background:linear-gradient(180deg,rgba(17,26,43,.98),rgba(13,20,34,.98)); border-top-color:rgba(34,211,238,.35); } :root[data-theme="tech"] .panel h2{ color:#dff6ff; text-shadow:0 0 10px rgba(34,211,238,.22); } :root[data-theme="tech"] .btn{ background:rgba(19,30,50,.9); border-color:var(--line-strong); color:#cfe4ff; } :root[data-theme="tech"] .btn:hover{ border-color:var(--pri); color:#a5f3fc; box-shadow:0 0 12px rgba(34,211,238,.3); } :root[data-theme="tech"] .btn.primary{ background:linear-gradient(135deg,#22d3ee,#0891b2); border:0; color:#03151b; font-weight:600; box-shadow:0 0 16px rgba(34,211,238,.4); } :root[data-theme="tech"] .btn.primary:hover{ box-shadow:0 0 22px rgba(34,211,238,.6); color:#03151b; } :root[data-theme="tech"] .inp, :root[data-theme="tech"] select.inp, :root[data-theme="tech"] .map-fs .md-seq-hud .md-veh-inp{ background:#0c1524; border-color:var(--line); color:var(--txt); } :root[data-theme="tech"] th{ background:linear-gradient(180deg,#152238,#111b2e); color:#9fb6d8; } :root[data-theme="tech"] .tabs .tab, :root[data-theme="tech"] .plan-tabs button, :root[data-theme="tech"] .pay-qr-tabs button{ background:rgba(19,30,50,.85); } :root[data-theme="tech"] .tabs .tab.active, :root[data-theme="tech"] .plan-tabs button.active, :root[data-theme="tech"] .pay-qr-tabs button.active{ background:linear-gradient(135deg,#22d3ee,#0ea5b7); color:#03151b; border-color:transparent; } :root[data-theme="tech"] .badge{ background:rgba(34,211,238,.12); color:#a5f3fc; border:1px solid rgba(34,211,238,.35); } :root[data-theme="tech"] .badge.pro{ background:rgba(52,211,153,.14); color:#6ee7b7; border-color:rgba(52,211,153,.4); } :root[data-theme="tech"] .badge.soon{ background:rgba(251,191,36,.14); color:#fcd34d; border-color:rgba(251,191,36,.4); } :root[data-theme="tech"] .badge.expired{ background:rgba(248,113,113,.14); color:#fca5a5; border-color:rgba(248,113,113,.4); } :root[data-theme="tech"] .md-progress-track{ box-shadow:inset 0 0 8px rgba(0,0,0,.65); } :root[data-theme="tech"] .md-progress-fill{ background:linear-gradient(90deg,#22d3ee,#38bdf8); box-shadow:0 0 10px rgba(34,211,238,.55); } :root[data-theme="tech"] .toast{ background:linear-gradient(135deg,#0b2233,#0d2f45); color:#d8f7ff; border:1px solid rgba(34,211,238,.4); box-shadow:0 8px 26px rgba(0,0,0,.65); } /* v1.0.405:错误提示条(见 style.css 的 .toast.err 说明)。**必须逐皮肤各写一条**: * 上面这条 `:root[data-theme="tech"] .toast`(0,2,1)优先级高于 `.toast.err`(0,2,0), * 只写 style.css 的话一到非经典皮肤错误提示又变回普通底色。 */ :root[data-theme="tech"] .toast.err{ background:linear-gradient(135deg,#7f1d1d,#991b1b); color:#fff; border-color:rgba(248,113,113,.65); box-shadow:0 8px 26px rgba(0,0,0,.65), inset 6px 0 0 0 #fca5a5; font-weight:600; } :root[data-theme="tech"] .mask{ background:rgba(3,8,16,.74); } :root[data-theme="tech"] .route-head{ background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(56,189,248,.06)); color:#dff6ff; } :root[data-theme="tech"] .summary-bar{ background:rgba(19,30,50,.6); } :root[data-theme="tech"] .avatar-fb{ background:linear-gradient(135deg,#0891b2,#22d3ee); color:#03151b; } :root[data-theme="tech"] .md-pin{ box-shadow:0 0 10px rgba(34,211,238,.55); } :root[data-theme="tech"] .md-pin.sel{ box-shadow:0 0 14px rgba(251,191,36,.8); } :root[data-theme="tech"] .plan-box .pb-nav{ background:rgba(19,30,50,.9); } /* 深色皮肤下把地图瓦片反相成"夜间地图"(标记/轨迹在覆盖层,不受影响) */ :root[data-theme="tech"] .leaflet-container{ background:#0a1120; } :root[data-theme="tech"] .leaflet-tile{ filter:invert(1) hue-rotate(180deg) saturate(.8) brightness(.9) contrast(.95); } :root[data-theme="tech"] .leaflet-control-attribution{ background:rgba(9,16,28,.75) !important; color:#7f95b8 !important; } :root[data-theme="tech"] .leaflet-control-attribution a{ color:#67e8f9 !important; } /* ================================================================ * ② 惊艳色 vivid —— 紫粉渐变 + 玻璃拟态 * ================================================================ */ :root[data-theme="vivid"]{ --ok-ink:var(--ok); /* v1.0.415:成功/已指定·最优 的文字色(与各皮肤 --ok 同色) */ --bg:#f6f2ff; --card:#ffffff; --line:#e6dcff; --line-strong:#cbb8ff; --txt:#231243; --sub:#6d5b96; --ink-2:#3b2a63; --sub-2:#9a86c4; --sub-3:#c3b3e0; --pri:#7c3aed; --pri-d:#6d28d9; --pri-2:#c026d3; --pri-lite:#a78bfa; --on-accent:#ffffff; --bg-soft:#f3ecff; --bg-hover:#f7f1ff; --bg-sel:#ede4ff; --bg-tint:#f1e9ff; --bg-elev:#faf7ff; --bg-mute:#f5f2fa; --bg-mute-hover:#efe9f8; --track:#e9def9; --focus-ring:rgba(168,85,247,.45); --overlay:rgba(255,255,255,.94); --toast-bg:#2a1150; --ok:#059669; --warn:#d97706; --err:#e11d48; --ok-bg:#d9f7e9; --warn-bg:#fdeccf; --err-bg:#ffe0e7; --warn-ink:#a15c07; --warn-line:#f3c98b; --accent2:#f97316; --accent2-ink:#c2410c; --accent2-bg:#ffedd5; --mark:#f59e0b; --mark-ink:#4a2c05; --mark-bg:#fff7e6; --pin-off:#c9b8e8; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:20px; --r-pill:999px; --shadow-1:0 6px 18px rgba(124,58,237,.12), 0 1px 2px rgba(124,58,237,.08); --shadow-2:0 16px 40px rgba(124,58,237,.24); } :root[data-theme="vivid"] body{ background: radial-gradient(900px 420px at 8% -6%, rgba(236,72,153,.16), transparent 60%), radial-gradient(820px 400px at 100% 0%, rgba(124,58,237,.16), transparent 60%), linear-gradient(135deg,#f8f3ff 0%,#fdf2ff 45%,#f1f6ff 100%); background-attachment:fixed; } :root[data-theme="vivid"] #topbar{ background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(250,242,255,.96)); border-bottom:1px solid var(--line-strong); box-shadow:0 6px 20px rgba(124,58,237,.10); } :root[data-theme="vivid"] .brand h1{ background:linear-gradient(90deg,#7c3aed,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; } :root[data-theme="vivid"] #nav button:hover{ background:rgba(124,58,237,.08); color:#6d28d9; } :root[data-theme="vivid"] #nav button.active{ background:linear-gradient(135deg,#7c3aed,#ec4899); box-shadow:0 6px 16px rgba(236,72,153,.35); } :root[data-theme="vivid"] .panel, :root[data-theme="vivid"] .card{ background:linear-gradient(180deg,#ffffff,#fdfbff); border:1px solid var(--line); box-shadow:var(--shadow-1); } :root[data-theme="vivid"] .panel h2{ background:linear-gradient(90deg,#7c3aed,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; } :root[data-theme="vivid"] .btn{ background:#fff; border-color:var(--line-strong); color:#4c1d95; } :root[data-theme="vivid"] .btn:hover{ border-color:#a855f7; color:#7c3aed; box-shadow:0 4px 14px rgba(124,58,237,.22); transform:translateY(-1px); } :root[data-theme="vivid"] .btn.primary{ background:linear-gradient(135deg,#7c3aed,#ec4899); border:0; color:#fff; font-weight:600; box-shadow:0 8px 20px rgba(124,58,237,.32); } :root[data-theme="vivid"] .btn.primary:hover{ box-shadow:0 10px 26px rgba(236,72,153,.42); color:#fff; transform:translateY(-1px); } :root[data-theme="vivid"] .inp, :root[data-theme="vivid"] select.inp{ background:rgba(255,255,255,.9); border-color:var(--line-strong); } :root[data-theme="vivid"] th{ background:linear-gradient(180deg,#f7f0ff,#f1e8ff); color:#5b3d99; } :root[data-theme="vivid"] .tabs .tab, :root[data-theme="vivid"] .plan-tabs button, :root[data-theme="vivid"] .pay-qr-tabs button{ background:#fff; border-color:var(--line-strong); color:#4c1d95; } :root[data-theme="vivid"] .tabs .tab.active, :root[data-theme="vivid"] .plan-tabs button.active, :root[data-theme="vivid"] .pay-qr-tabs button.active{ background:linear-gradient(135deg,#7c3aed,#ec4899); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(124,58,237,.3); } :root[data-theme="vivid"] .badge{ background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(236,72,153,.14)); color:#6d28d9; border:1px solid rgba(124,58,237,.3); } :root[data-theme="vivid"] .md-progress-fill{ background:linear-gradient(90deg,#a855f7,#ec4899); } :root[data-theme="vivid"] .toast{ background:linear-gradient(135deg,#4c1d95,#be185d); color:#fff; box-shadow:0 10px 28px rgba(76,29,149,.45); } /* v1.0.405:错误提示条(逐皮肤各一条,理由见 tech 皮肤处) */ :root[data-theme="vivid"] .toast.err{ background:linear-gradient(135deg,#b91c1c,#e11d48); color:#fff; box-shadow:0 10px 28px rgba(185,28,28,.45), inset 6px 0 0 0 rgba(255,255,255,.6); font-weight:600; } :root[data-theme="vivid"] .route-head{ background:linear-gradient(90deg,#f3e8ff,#ffe4f3); color:#5b21b6; } :root[data-theme="vivid"] .summary-bar{ background:linear-gradient(90deg,#faf5ff,#fff5fb); } :root[data-theme="vivid"] .avatar-fb{ background:linear-gradient(135deg,#7c3aed,#ec4899); } :root[data-theme="vivid"] .plan-item.sel{ border-color:#a855f7; background:linear-gradient(180deg,#faf5ff,#f3e8ff); } :root[data-theme="vivid"] tr.sel td{ background:linear-gradient(90deg,#ede4ff,#fbe8ff); } :root[data-theme="vivid"] .md-pin{ box-shadow:0 2px 10px rgba(124,58,237,.55); } /* ================================================================ * ③ 灵动性 lively —— 薄荷青 + 大圆角 + 弹性动效 * ================================================================ */ :root[data-theme="lively"]{ --ok-ink:var(--ok); /* v1.0.415:成功/已指定·最优 的文字色(与各皮肤 --ok 同色) */ --bg:#eaf6f7; --card:#ffffff; --line:#d5e9ea; --line-strong:#a9d6d8; --txt:#123039; --sub:#5b7a82; --ink-2:#2c4f58; --sub-2:#8fb0b6; --sub-3:#b9d2d6; --pri:#0fb5a6; --pri-d:#0d9488; --pri-2:#0ea5e9; --pri-lite:#5eead4; --on-accent:#ffffff; --bg-soft:#eef9f8; --bg-hover:#eefaf9; --bg-sel:#d9f5f1; --bg-tint:#e6f7f5; --bg-elev:#f6fdfc; --bg-mute:#f1f6f6; --bg-mute-hover:#e9f2f2; --track:#d8eceb; --focus-ring:rgba(45,212,191,.5); --overlay:rgba(255,255,255,.95); --toast-bg:#0f3b40; --ok:#10b981; --warn:#f59e0b; --err:#f43f5e; --ok-bg:#d7f8ea; --warn-bg:#fef1d8; --err-bg:#ffe4e9; --warn-ink:#b45309; --warn-line:#fbd38d; --accent2:#fb7185; --accent2-ink:#be123c; --accent2-bg:#ffe4e6; --mark:#fbbf24; --mark-ink:#4a3208; --mark-bg:#fffbeb; --pin-off:#b8d0d4; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px; --shadow-1:0 4px 14px rgba(15,181,166,.10); --shadow-2:0 12px 32px rgba(15,181,166,.20); } :root[data-theme="lively"] body{ background: radial-gradient(700px 340px at 4% -4%, rgba(45,212,191,.22), transparent 62%), radial-gradient(680px 320px at 100% 4%, rgba(251,113,133,.16), transparent 62%), linear-gradient(180deg,#eaf6f7,#eaf4f8 70%,#eaf6f7); background-attachment:fixed; } :root[data-theme="lively"] #topbar{ background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:2px solid rgba(45,212,191,.35); } :root[data-theme="lively"] #nav button{ border-radius:999px; } :root[data-theme="lively"] #nav button:hover{ background:rgba(45,212,191,.14); transform:translateY(-1px); } :root[data-theme="lively"] #nav button.active{ background:linear-gradient(135deg,#14b8a6,#22d3ee); box-shadow:0 6px 16px rgba(20,184,166,.35); } :root[data-theme="lively"] .panel, :root[data-theme="lively"] .card{ border-color:var(--line); } :root[data-theme="lively"] .panel:hover, :root[data-theme="lively"] .card:hover{ box-shadow:var(--shadow-2); } :root[data-theme="lively"] .panel h2{ display:flex; align-items:center; } :root[data-theme="lively"] .panel h2::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px; background:linear-gradient(135deg,#14b8a6,#22d3ee); box-shadow:0 0 0 4px rgba(45,212,191,.16); flex:none; } :root[data-theme="lively"] .btn{ border-radius:999px; background:#fff; border-color:var(--line-strong); color:#0f766e; transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, background-color .16s ease, color .16s ease; } :root[data-theme="lively"] .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,181,166,.22); border-color:#14b8a6; } :root[data-theme="lively"] .btn:active{ transform:scale(.97); } :root[data-theme="lively"] .btn.primary{ background:linear-gradient(135deg,#14b8a6,#22c55e); border:0; color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(20,184,166,.32); } :root[data-theme="lively"] .btn.primary:hover{ box-shadow:0 10px 22px rgba(34,197,94,.38); color:#fff; } :root[data-theme="lively"] .inp, :root[data-theme="lively"] select.inp{ border-radius:999px; border-color:var(--line-strong); background:#fff; } :root[data-theme="lively"] .field .inp, :root[data-theme="lively"] .flt-search, :root[data-theme="lively"] textarea.inp{ border-radius:14px; } :root[data-theme="lively"] th{ background:linear-gradient(180deg,#f1fbfa,#e6f7f5); color:#0f766e; } :root[data-theme="lively"] .tabs .tab, :root[data-theme="lively"] .plan-tabs button, :root[data-theme="lively"] .pay-qr-tabs button{ border-radius:999px; background:#fff; } :root[data-theme="lively"] .tabs .tab.active, :root[data-theme="lively"] .plan-tabs button.active, :root[data-theme="lively"] .pay-qr-tabs button.active{ background:linear-gradient(135deg,#14b8a6,#22d3ee); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(20,184,166,.3); animation:livelyPop .26s cubic-bezier(.34,1.56,.64,1); } @keyframes livelyPop{ from{ transform:scale(.92); } to{ transform:scale(1); } } :root[data-theme="lively"] .badge{ border:1px solid rgba(15,181,166,.3); background:rgba(45,212,191,.14); color:#0f766e; } :root[data-theme="lively"] .md-progress-fill{ background:linear-gradient(90deg,#14b8a6,#22d3ee); } :root[data-theme="lively"] .md-progress.running .md-progress-fill{ background-image: linear-gradient(45deg,rgba(255,255,255,.45) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.45) 75%,transparent 75%), linear-gradient(90deg,#14b8a6,#22d3ee); background-size:16px 16px, 100% 100%; animation:livelyStripes .7s linear infinite; } @keyframes livelyStripes{ from{ background-position:0 0, 0 0; } to{ background-position:16px 0, 0 0; } } :root[data-theme="lively"] .toast{ background:linear-gradient(135deg,#0f766e,#0891b2); color:#fff; border-radius:999px; box-shadow:0 10px 26px rgba(15,118,110,.4); } /* v1.0.405:错误提示条(逐皮肤各一条,理由见 tech 皮肤处) */ :root[data-theme="lively"] .toast.err{ background:linear-gradient(135deg,#b91c1c,#dc2626); color:#fff; box-shadow:0 10px 26px rgba(185,28,28,.4), inset 6px 0 0 0 rgba(255,255,255,.6); font-weight:600; } :root[data-theme="lively"] .pick-item:hover{ transform:translateX(3px); } :root[data-theme="lively"] .route-head{ background:linear-gradient(90deg,#e6f7f5,#eaf6fb); color:#0f766e; } :root[data-theme="lively"] .avatar-fb{ background:linear-gradient(135deg,#14b8a6,#22c55e); } :root[data-theme="lively"] .md-pin{ box-shadow:0 2px 8px rgba(15,181,166,.5); } :root[data-theme="lively"] .plan-item{ border-radius:18px; } :root[data-theme="lively"] .plan-item.sel{ border-color:#14b8a6; background:linear-gradient(180deg,#eafaf7,#e6f7f5); } /* ================================================================ * ④ 护眼 eye —— 暖米灰绿 + 低对比(长时间值班盯屏) * ================================================================ */ :root[data-theme="eye"]{ --ok-ink:var(--ok); /* v1.0.415:成功/已指定·最优 的文字色(与各皮肤 --ok 同色) */ --bg:#e8e5d9; --card:#f7f5ec; --line:#d7d2bf; --line-strong:#bab39a; --txt:#3a382f; --sub:#6f6a58; --ink-2:#4a4738; --sub-2:#8f8977; --sub-3:#b5ae9a; --pri:#4f7a5b; --pri-d:#3f6349; --pri-2:#5d7a4f; --pri-lite:#87a888; --on-accent:#f7f5ec; --bg-soft:#eeeade; --bg-hover:#f0ece0; --bg-sel:#e2e6d5; --bg-tint:#e9ebdc; --bg-elev:#f3f0e6; --bg-mute:#eae7dc; --bg-mute-hover:#e4e0d4; --track:#d9d5c4; --focus-ring:rgba(79,122,91,.45); --overlay:rgba(247,245,236,.96); --toast-bg:#3a382f; --ok:#4f7a5b; --warn:#a8741a; --err:#a4462f; --ok-bg:#e2eade; --warn-bg:#f0e7cf; --err-bg:#f0dcd6; --warn-ink:#8a5b12; --warn-line:#cbb583; --accent2:#a8741a; --accent2-ink:#7d540d; --accent2-bg:#f0e7cf; --mark:#b8892b; --mark-ink:#3a2c08; --mark-bg:#f2ecd6; --pin-off:#b8b39f; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-pill:18px; --shadow-1:0 1px 3px rgba(90,80,50,.12); --shadow-2:0 6px 18px rgba(90,80,50,.18); } :root[data-theme="eye"] body{ background:linear-gradient(180deg,#e9e6da 0%,#e6e3d6 100%); background-attachment:fixed; letter-spacing:.2px; } :root[data-theme="eye"] #topbar{ background:linear-gradient(180deg,#f4f2e8,#eeebdf); border-bottom:1px solid var(--line-strong); } :root[data-theme="eye"] #nav button{ color:#4a4738; } :root[data-theme="eye"] #nav button:hover{ background:rgba(79,122,91,.12); color:#3f6349; } :root[data-theme="eye"] #nav button.active{ background:#4f7a5b; color:#f7f5ec; } :root[data-theme="eye"] .panel, :root[data-theme="eye"] .card{ background:#f7f5ec; border-color:var(--line); } :root[data-theme="eye"] .panel h2{ color:#3a382f; } :root[data-theme="eye"] .btn{ background:#f2efe4; border-color:var(--line-strong); color:#3f6349; } :root[data-theme="eye"] .btn:hover{ background:#e9ebdc; border-color:#4f7a5b; color:#33513d; } :root[data-theme="eye"] .btn.primary{ background:#4f7a5b; color:#f7f5ec; border-color:#4f7a5b; } :root[data-theme="eye"] .btn.primary:hover{ background:#3f6349; color:#f7f5ec; } :root[data-theme="eye"] .inp, :root[data-theme="eye"] select.inp, :root[data-theme="eye"] .map-fs .md-seq-hud .md-veh-inp{ background:#f3f0e6; border-color:var(--line-strong); color:var(--txt); } :root[data-theme="eye"] th{ background:#e9e5d7; color:#5b5748; border-bottom:1px solid var(--line-strong); } :root[data-theme="eye"] tr:hover td{ background:#efece0; } :root[data-theme="eye"] .tabs .tab, :root[data-theme="eye"] .plan-tabs button, :root[data-theme="eye"] .pay-qr-tabs button{ background:#f2efe4; border-color:var(--line-strong); color:#3f6349; } :root[data-theme="eye"] .tabs .tab.active, :root[data-theme="eye"] .plan-tabs button.active, :root[data-theme="eye"] .pay-qr-tabs button.active{ background:#4f7a5b; color:#f7f5ec; border-color:#4f7a5b; } :root[data-theme="eye"] .badge{ background:#e2e6d5; color:#3f6349; } :root[data-theme="eye"] .md-progress-fill{ background:linear-gradient(90deg,#4f7a5b,#87a888); } :root[data-theme="eye"] .toast{ background:#3a382f; color:#f2f0e6; } /* v1.0.405:错误提示条(逐皮肤各一条,理由见 tech 皮肤处);护眼皮肤 --err 是 #a4462f(偏砖红), * 直接用令牌而不是写死鲜红 —— 与这套皮肤的"低饱和"口径保持一致。 */ :root[data-theme="eye"] .toast.err{ background:var(--err); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.2), inset 6px 0 0 0 rgba(255,255,255,.5); font-weight:600; } :root[data-theme="eye"] .route-head{ background:#e9e5d7; color:#3f6349; } :root[data-theme="eye"] .summary-bar{ background:#efece0; } :root[data-theme="eye"] .avatar-fb{ background:linear-gradient(135deg,#4f7a5b,#87a888); color:#f7f5ec; } :root[data-theme="eye"] .leaflet-tile{ filter:sepia(.14) saturate(.82) brightness(.97); } :root[data-theme="eye"] .mask{ background:rgba(58,56,47,.5); } /* ================================================================ * 皮肤选择器(顶栏按钮 + 弹出面板;所有皮肤共用,颜色走令牌) * ================================================================ */ #btnTheme{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-sm); cursor:pointer; font-size:13.5px; color:var(--txt); white-space:nowrap; } #btnTheme:hover{ border-color:var(--pri); color:var(--pri); } #btnTheme .theme-cur{ display:inline-flex; gap:3px; align-items:center; } #btnTheme .theme-cur i{ width:9px; height:9px; border-radius:50%; display:inline-block; } .theme-pop{ position:fixed; z-index:2600; width:300px; padding:12px; background:var(--card); color:var(--txt); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-2); display:none; } .theme-pop.open{ display:block; } .theme-pop h4{ font-size:13.5px; margin-bottom:2px; } .theme-pop .tp-hint{ font-size:11.5px; color:var(--sub); margin-bottom:10px; line-height:1.6; } .theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .theme-chip{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:9px 10px; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--bg-elev); cursor:pointer; text-align:left; font-size:12.5px; color:var(--txt); } .theme-chip:hover{ border-color:var(--pri); box-shadow:var(--shadow-1); } .theme-chip.on{ border-color:var(--pri); box-shadow:0 0 0 2px var(--focus-ring); } .theme-chip .tc-name{ font-weight:600; display:flex; align-items:center; gap:6px; } .theme-chip .tc-name .on-mark{ color:var(--pri); font-size:11px; } .theme-dots{ display:flex; gap:4px; } .theme-dots i{ width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.12); } .theme-chip .tc-desc{ font-size:11px; color:var(--sub); line-height:1.5; } .theme-auto{ display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--ink-2); } .theme-auto input{ width:auto; margin:0; } .theme-pop .tp-foot{ margin-top:8px; font-size:11px; color:var(--sub-2); } /* 后台「系统参数」内的皮肤选择区 */ .theme-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:8px 0 4px; } /* 窄屏:皮肤按钮只留图标 + 三色卡,避免顶栏被挤换行(1366×768 及以上完整显示) */ @media(max-width:1180px){ #btnTheme > span:nth-child(2){ display:none; } } @media(max-width:520px){ .theme-pop{ width:calc(100vw - 24px); } .theme-grid{ grid-template-columns:1fr; } } /* ================================================================ * v1.0.324:3D 立体按键 —— 皮肤层统一(放在四套皮肤块之后,用更高特指度重申「面 / 边 / 影 / 状态」) * ---------------------------------------------------------------- * 背景:各皮肤早期的按钮样式是「平铺色块 + 品牌发光」,与 v1.0.324 的 3D 按键语言不一致 * (平铺面 → 没有"受光感";部分皮肤 hover 的 box-shadow/transform 还会把立体影盖掉)。 * 做法:本段只重申"面子"(渐变面、描边、状态色、立体影),颜色全部取该皮肤自己的令牌, * 因此每套皮肤仍是自己的配色 —— 科技=深空蓝黑、惊艳=紫粉、灵动=薄荷、护眼=暖米灰绿; * 结构(圆角/尺寸/布局)仍由 css/style.css 的 3D 按键层决定,这里不碰。 * 特指度:`:root[data-theme]:not([data-theme="classic"]) X` ≥ (0,4,0),高于各皮肤块的 * `:root[data-theme="xx"] .btn`(0,3,0)/(0,4,0),且本段在文件末尾 ⇒ 生效。 * ================================================================ */ /* ① 普通键:渐变受光面(上亮下暗) */ :root[data-theme]:not([data-theme="classic"]) .btn, :root[data-theme]:not([data-theme="classic"]) .tabs .tab, :root[data-theme]:not([data-theme="classic"]) .plan-tabs button, :root[data-theme]:not([data-theme="classic"]) .pay-qr-tabs button{ background:linear-gradient(180deg, var(--card) 0%, var(--bg-elev) 46%, var(--bg-soft) 100%); border-color:var(--line-strong); color:var(--txt); } /* ② 悬停:换浅色面 + 主色描边(立体影/上浮由 style.css 提供,这里把各皮肤的品牌发光复位为立体影) */ :root[data-theme]:not([data-theme="classic"]) .btn:hover, :root[data-theme]:not([data-theme="classic"]) .tabs .tab:hover, :root[data-theme]:not([data-theme="classic"]) .plan-tabs button:hover, :root[data-theme]:not([data-theme="classic"]) .pay-qr-tabs button:hover{ background:linear-gradient(180deg, var(--card) 0%, var(--bg-tint) 100%); border-color:var(--pri); color:var(--pri); box-shadow:inset 0 1px 0 var(--card), inset 0 -2px 0 rgba(0,0,0,.05), 0 3px 0 var(--pri-lite), 0 6px 11px rgba(0,0,0,.13); transform:translateY(-1px); } /* ③ 按下:复位各皮肤"缩放入场"之类的动效,统一为"压下去" */ :root[data-theme]:not([data-theme="classic"]) .btn:active, :root[data-theme]:not([data-theme="classic"]) .tabs .tab:active, :root[data-theme]:not([data-theme="classic"]) .plan-tabs button:active, :root[data-theme]:not([data-theme="classic"]) .pay-qr-tabs button:active{ background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-mute) 100%); transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.04), 0 1px 0 var(--bg), 0 1px 2px rgba(0,0,0,.08); } /* ④ 主键与"选中/生效"态:主色立体面(底边深一阶主色,做出键帽厚度) */ :root[data-theme]:not([data-theme="classic"]) .btn.primary, :root[data-theme]:not([data-theme="classic"]) .tabs .tab.active, :root[data-theme]:not([data-theme="classic"]) .plan-tabs button.active, :root[data-theme]:not([data-theme="classic"]) .pay-qr-tabs button.active, :root[data-theme]:not([data-theme="classic"]) #nav button.active, :root[data-theme]:not([data-theme="classic"]) .md-layoutbar .layout-btn.active, :root[data-theme]:not([data-theme="classic"]) .flt-btn.flt-on{ border-color:var(--pri-d); background:linear-gradient(180deg, var(--pri) 0%, var(--pri-2) 100%); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--pri-lite), inset 0 -2px 0 rgba(0,0,0,.16), 0 2px 0 var(--pri-d), 0 4px 9px rgba(0,0,0,.18); } :root[data-theme]:not([data-theme="classic"]) .btn.primary:hover, :root[data-theme]:not([data-theme="classic"]) .tabs .tab.active:hover, :root[data-theme]:not([data-theme="classic"]) .plan-tabs button.active:hover, :root[data-theme]:not([data-theme="classic"]) .pay-qr-tabs button.active:hover{ background:linear-gradient(180deg, var(--pri-lite) 0%, var(--pri) 42%, var(--pri-2) 100%); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--pri-lite), inset 0 -2px 0 rgba(0,0,0,.14), 0 3px 0 var(--pri-d), 0 7px 14px rgba(0,0,0,.20); transform:translateY(-1px); } /* ⑤ 危险键:红色受光面(文字保持警示红,悬停才实心) */ :root[data-theme]:not([data-theme="classic"]) .btn.danger{ border-color:var(--err); color:var(--err); background:linear-gradient(180deg, var(--err-bg) 0%, var(--card) 100%); box-shadow:inset 0 1px 0 var(--card), inset 0 -2px 0 rgba(0,0,0,.05), 0 2px 0 var(--err), 0 4px 8px rgba(0,0,0,.12); } :root[data-theme]:not([data-theme="classic"]) .btn.danger:hover{ background:var(--err); border-color:var(--err); color:var(--on-accent); transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--err-bg), inset 0 -2px 0 rgba(0,0,0,.20), 0 3px 0 var(--err), 0 7px 14px rgba(0,0,0,.20); } /* ⑥ 顶栏导航:未选中透明(简洁),悬停浮起成键,选中为主色立体键 */ :root[data-theme]:not([data-theme="classic"]) #nav button:hover{ background:linear-gradient(180deg, var(--card) 0%, var(--bg-tint) 100%); border-color:var(--line-strong); color:var(--pri); transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--card), 0 2px 0 var(--bg), 0 5px 10px rgba(0,0,0,.12); } /* ⑦ 浮层小按键(全屏退出 / 方案翻页)与皮肤选择卡 */ :root[data-theme]:not([data-theme="classic"]) .map-fs .fs-exit, :root[data-theme]:not([data-theme="classic"]) .plan-box .pb-nav{ border-color:var(--line-strong); background:linear-gradient(180deg, var(--card) 0%, var(--bg-soft) 100%); box-shadow:inset 0 1px 0 var(--card), inset 0 -2px 0 rgba(0,0,0,.05), 0 2px 0 var(--bg), 0 4px 8px rgba(0,0,0,.12); } :root[data-theme]:not([data-theme="classic"]) .theme-chip:hover{ border-color:var(--pri); transform:translateY(-1px); } /* ⑧ 禁用态:压平(无厚度/无投影/去饱和)—— 与 style.css 一致,皮肤层不得再给"发光的可点感" */ :root[data-theme]:not([data-theme="classic"]) .btn[disabled], :root[data-theme]:not([data-theme="classic"]) .btn:disabled{ background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-mute) 100%); color:var(--sub); border-color:var(--line); box-shadow:none; transform:none; filter:saturate(.65); } /* ⑨ 深色皮肤修正(当前:科技感):浅色皮肤里 --card 是"最亮面"(做受光面顶),深色皮肤里它反而是"最暗面" —— * 若沿用同一方向,键面会呈"上暗下亮"=凹陷观感。故深色皮肤单独把受光面方向反过来,顶面高光改用 --bg-hover。 * ⚠ 新增深色皮肤(js/core.js THEMES 里 dark:true)时,必须在此补一段同款反向面(测试会检查)。 */ :root[data-theme="tech"]:not([data-theme="classic"]) .btn, :root[data-theme="tech"]:not([data-theme="classic"]) .tabs .tab, :root[data-theme="tech"]:not([data-theme="classic"]) .plan-tabs button, :root[data-theme="tech"]:not([data-theme="classic"]) .pay-qr-tabs button{ background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-elev) 46%, var(--card) 100%); box-shadow:inset 0 1px 0 var(--bg-hover), inset 0 -2px 0 rgba(0,0,0,.055), 0 2px 0 var(--bg), 0 4px 7px rgba(0,0,0,.10); } :root[data-theme="tech"]:not([data-theme="classic"]) .btn:hover, :root[data-theme="tech"]:not([data-theme="classic"]) .tabs .tab:hover, :root[data-theme="tech"]:not([data-theme="classic"]) .plan-tabs button:hover, :root[data-theme="tech"]:not([data-theme="classic"]) .pay-qr-tabs button:hover{ background:linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-tint) 100%); } :root[data-theme="tech"]:not([data-theme="classic"]) .btn.primary, :root[data-theme="tech"]:not([data-theme="classic"]) .tabs .tab.active, :root[data-theme="tech"]:not([data-theme="classic"]) .plan-tabs button.active, :root[data-theme="tech"]:not([data-theme="classic"]) .pay-qr-tabs button.active, :root[data-theme="tech"]:not([data-theme="classic"]) #nav button.active{ background:linear-gradient(180deg, var(--pri-lite) 0%, var(--pri) 52%, var(--pri-d) 100%); } :root[data-theme="tech"]:not([data-theme="classic"]) .btn.primary:hover{ background:linear-gradient(180deg, var(--pri-lite) 0%, var(--pri) 62%, var(--pri-2) 100%); } /* ================================================================ * v1.0.325 起:全屏地图「浮层透明度」—— 皮肤层重申(与 style.css **同一份清单**,只是加皮肤前缀) * ---------------------------------------------------------------- * 为什么还要在皮肤层写一遍:上面「通用皮肤层」的浮层底色规则 * `:root[data-theme]:not([data-theme="classic"]) .map-fs .fs-panel-body{ background:var(--overlay) }`, * 以及各皮肤自己的 `.card{background:var(--card)}` 等规则,特指度都高于 style.css 的混色规则;虽然 * v1.0.337 起 style.css 的混色声明已带 `!important`(足以压过所有非 important 规则),这里仍保留一份 * **同清单**的皮肤层重申(同样带 !important,并靠皮肤前缀再高一档特指度),以防日后有人往皮肤层加了 * 带 `!important` 的底色规则。test_node 有护栏断言两份清单**完全一致**,避免只改一处。 * 颜色仍取该皮肤自己的 `--overlay` 令牌 ⇒ 每套皮肤各自正确的浮层色,只变透明度。 * ================================================================ */ :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-progress-fs, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-exit, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-route, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-tools, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-launch-card, /* ★ v1.0.538 */ :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-tools .fs-tool-sel, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-tools .fs-tool-inp, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-tab, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-ask-card, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-seq-hud, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-line-info, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .leaflet-bar a, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .plan-box, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body th, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .summary-bar, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .pick-list, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-tip, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .card, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .fleet-card, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .table-wrap, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .route-block, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .plan-tabs button, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .btn, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .inp, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-body .flt-panel, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-resize, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-wresize, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .plan-box .pb-nav, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .plan-box .pb-resize, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-tools .btn, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-seq-hud .md-veh-toggle, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-seq-hud .md-veh-inp, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .md-seq-hud .md-veh-sug, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .modal, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .toast, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .theme-pop{ background:color-mix(in srgb, var(--overlay) var(--fs-solid, 30%), transparent) !important; } /* v1.0.405:全屏下错误提示条重申(与 style.css 同一条口径:浮层透明度仍由 --fs-solid 决定, * 左侧实色色条保证任何档位都认得出"这是报错") */ :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .toast.err{ background:color-mix(in srgb, var(--err) var(--fs-solid, 30%), transparent) !important; color:#fff !important; box-shadow:inset 6px 0 0 0 var(--err), 0 6px 18px rgba(0,0,0,.25) !important; } :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .btn.primary, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .plan-tabs button.active{ background:color-mix(in srgb, var(--pri) var(--fs-solid, 30%), transparent) !important; } :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .btn.md-box-on{ background:color-mix(in srgb, var(--accent2-bg) var(--fs-solid, 30%), transparent) !important; } :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .pick-item.sel{ background:color-mix(in srgb, var(--bg-sel) var(--fs-solid, 30%), transparent) !important; } :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .btn:hover, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .pick-item:hover, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .plan-box .pb-nav:hover, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .plan-box .pb-resize:hover, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-resize:hover, :root[data-theme]:not([data-theme="classic"]) .map-fs:fullscreen .fs-panel-wresize:hover{ background:color-mix(in srgb, var(--bg-tint) var(--fs-solid, 30%), transparent) !important; }