/* ============================================================ SHENZHEN CBD 3D — glass UI（暗色 / 亮色双主题）主题由切换，见 js/theme.js。 ============================================================ */ :root{ --bg:#05070c; --bg-2:#0a0f18; --line:rgba(120,160,220,.14); --line-2:rgba(120,160,220,.28); --fg:#dce6f5; --fg-dim:#7f8ea6; --accent:#4ea8ff; --accent-2:#7cf3d0; --warn:#ffb547; --glass:rgba(10,16,26,.72); /* 主题相关的杂项色，亮色下整组覆盖 */ --inset:rgba(0,0,0,.35); /* 输入框 / 内凹底 */ --hairline:rgba(0,0,0,.4); /* 色块描边 */ --shadow:0 8px 30px rgba(0,0,0,.6); --shadow-sm:0 3px 14px rgba(0,0,0,.5); --minimap-bg:radial-gradient(circle at 50% 50%,#0d1626,#05070c); --gate-bg:radial-gradient(circle at 50% 35%,#0b1626,#03050a 70%); --label-bg:rgba(5,9,16,.62); --label-fg:#e8f2ff; --label-line:rgba(120,160,220,.22); --label-shadow:0 1px 3px #000; --joy-bg:radial-gradient(circle,rgba(10,16,26,.62),rgba(10,16,26,.28)); --btn-primary-fg:#031018; --kbd-bg:rgba(255,255,255,.04); --track:rgba(255,255,255,.08); --crosshair:rgba(220,235,255,.75); --card-bg:rgba(255,255,255,.02); --sw-idle:#1b2430; --fg-faint:#54637a; --radius:10px; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; } /* ---------- 亮色主题 ---------- */ body[data-theme="light"]{ --bg:#eef2f7; --bg-2:#ffffff; --line:rgba(30,60,100,.16); --line-2:rgba(30,60,100,.30); --fg:#16222e; --fg-dim:#5b6c7e; --accent:#1d6fd0; --accent-2:#0d8f74; --warn:#b3630a; --glass:rgba(255,255,255,.80); --inset:rgba(20,40,70,.06); --hairline:rgba(20,40,70,.22); --shadow:0 8px 26px rgba(30,50,80,.18); --shadow-sm:0 3px 12px rgba(30,50,80,.16); --minimap-bg:radial-gradient(circle at 50% 50%,#ffffff,#dde5ee); --gate-bg:radial-gradient(circle at 50% 35%,#f4f8fc,#cdd9e6 70%); --label-bg:rgba(255,255,255,.86); --label-fg:#14202c; --label-line:rgba(30,60,100,.22); --label-shadow:0 1px 2px rgba(255,255,255,.9); --joy-bg:radial-gradient(circle,rgba(255,255,255,.72),rgba(255,255,255,.34)); --btn-primary-fg:#ffffff; --kbd-bg:rgba(20,40,70,.05); --track:rgba(20,40,70,.12); --crosshair:rgba(20,40,70,.7); --card-bg:rgba(20,40,70,.035); --sw-idle:#c3cedb; --fg-faint:#7c8b9c; } *{box-sizing:border-box} [hidden]{display:none !important} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--fg); font:12px/1.5 var(--mono); overflow:hidden; -webkit-font-smoothing:antialiased; letter-spacing:.02em; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} canvas#scene{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none} /* ---------- shared ---------- */ .panel,.topbar,.hud,.card,.tooltip{ background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); } .muted{color:var(--fg-dim)} .sep{color:var(--fg-dim);margin:0 2px} .btn{ font:inherit;color:var(--fg);cursor:pointer; background:linear-gradient(180deg,rgba(78,168,255,.16),rgba(78,168,255,.05)); border:1px solid var(--line-2);border-radius:7px; padding:6px 12px;text-transform:uppercase;letter-spacing:.08em; transition:.15s border-color,.15s background,.15s transform; } .btn:hover{border-color:var(--accent);background:rgba(78,168,255,.22)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn.ghost{background:transparent;padding:5px 9px} .btn.primary{background:linear-gradient(180deg,var(--accent),#2b7fd4);border-color:transparent;color:var(--btn-primary-fg);font-weight:700} .btn.on{border-color:var(--accent-2);background:rgba(124,243,208,.18)} .mini{ font:11px/1 var(--mono);color:var(--fg-dim);cursor:pointer; background:none;border:1px solid var(--line);border-radius:5px;padding:4px 7px; } .mini:hover{color:var(--accent);border-color:var(--accent)} /* ---------- topbar ---------- */ .topbar{ position:fixed;top:0;left:0;right:0;height:44px;z-index:30; display:flex;align-items:center;justify-content:space-between; padding:0 12px;border-width:0 0 1px 0; } .brand{display:flex;align-items:center;gap:7px;font-size:12px} .brand strong{letter-spacing:.16em} .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 10px currentColor;transition:.3s} .dot.ok{background:var(--accent-2)} .dot.load{background:var(--accent);animation:pulse 1s infinite} @keyframes pulse{50%{opacity:.35}} .topbar-right{display:flex;align-items:center;gap:6px} .pill{ display:flex;gap:6px;align-items:center; border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11px; } .pill .k{color:var(--fg-dim);letter-spacing:.1em} .pill .v{color:var(--fg)} /* ---------- panels ---------- */ .panel{ position:fixed;top:56px;bottom:64px;width:262px;z-index:25; display:flex;flex-direction:column;gap:8px; padding:8px;border-radius:var(--radius); overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:var(--line-2) transparent; } .panel::-webkit-scrollbar{width:6px} .panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .panel-left{left:10px} .panel-right{right:10px} .panel.hidden{display:none} .card{border-radius:8px;padding:9px;background:var(--card-bg)} .card-head{ display:flex;justify-content:space-between;align-items:center; font-size:10.5px;letter-spacing:.14em;color:var(--fg-dim); text-transform:uppercase;margin-bottom:7px; padding-bottom:6px;border-bottom:1px solid var(--line); } .tag{ font-size:10px;padding:2px 6px;border-radius:4px; border:1px solid var(--line-2);color:var(--accent); } .kv{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0;font-size:11.5px} .kv span{color:var(--fg-dim)} .kv b{font-weight:500;text-align:right;word-break:break-all} .row{display:block;margin:7px 0;font-size:11px;color:var(--fg-dim)} .row em{color:var(--accent);font-style:normal} .row input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:3px;margin-top:6px; background:var(--line-2);border-radius:2px;outline:none; } .row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:12px;height:12px;border-radius:50%; background:var(--accent);cursor:pointer;box-shadow:0 0 8px rgba(78,168,255,.7); } .row input[type=range]::-moz-range-thumb{ width:12px;height:12px;border:0;border-radius:50%;background:var(--accent);cursor:pointer; } .row.switch{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--fg)} .row.switch input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer} /* ---------- minimap ---------- */ .minimap-wrap{ position:relative;width:100%;aspect-ratio:1; border:1px solid var(--line);border-radius:6px;overflow:hidden; background:var(--minimap-bg); } #minimap{width:100%;height:100%;display:block} .legend{display:flex;flex-wrap:wrap;gap:4px 9px;margin:7px 0;font-size:10px;color:var(--fg-dim);align-items:center} .sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:2px} .sw-ready{background:#2f7fd6} .sw-load{background:var(--warn)} .sw-idle{background:var(--sw-idle);border:1px solid var(--line-2)} .sw-view{background:transparent;border:1px solid var(--accent-2)} /* ---------- search / landmarks ---------- */ .search{display:flex;gap:5px} .search input{ flex:1;min-width:0;font:inherit;color:var(--fg); background:var(--inset);border:1px solid var(--line-2); border-radius:6px;padding:6px 8px;outline:none; } .search input:focus{border-color:var(--accent)} .landmarks{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px} .landmarks li{ display:flex;justify-content:space-between;align-items:center;gap:6px; padding:5px 7px;border:1px solid transparent;border-radius:6px; cursor:pointer;font-size:11.5px;transition:.12s; } .landmarks li:hover{background:rgba(78,168,255,.12);border-color:var(--line-2)} .landmarks li i{font-style:normal;color:var(--fg-dim);font-size:10px} .btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px} .btn-grid.tri{grid-template-columns:repeat(3,1fr)} .btn-grid .btn{padding:6px 4px;font-size:10.5px} /* ---------- 配色图例 ---------- */ .colorkey{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--fg-dim)} .colorkey .ck-row{display:flex;align-items:center;gap:6px} .colorkey .ck-sw{width:11px;height:11px;border-radius:3px;flex:none;border:1px solid var(--hairline)} .colorkey .ck-ramp{ height:9px;border-radius:3px;flex:1; border:1px solid var(--hairline); } .colorkey .ck-scale{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:0} /* ---------- debug ---------- */ .collapsible.closed .card-body{display:none} .card-head{cursor:default} #debugHead{cursor:pointer} #debugLog{ margin:0 0 7px;font:10.5px/1.45 var(--mono);color:var(--fg-dim); max-height:150px;overflow:auto;white-space:pre-wrap;word-break:break-all; } /* ---------- hud ---------- */ .hud{ position:fixed;bottom:0;left:0;right:0;z-index:28; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 12px;border-width:1px 0 0 0; font-size:10.5px;color:var(--fg-dim);flex-wrap:wrap; } .keys{display:flex;align-items:center;gap:5px;flex-wrap:wrap} kbd{ font:10px/1 var(--mono);color:var(--fg); border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px; padding:3px 5px;background:var(--kbd-bg); } .keys span{margin-right:8px} /* ---------- tooltip / crosshair ---------- */ .tooltip{ position:fixed;z-index:40;pointer-events:none; padding:7px 10px;border-radius:7px;max-width:230px; font-size:11px;line-height:1.5;box-shadow:var(--shadow); } .tooltip b{color:var(--accent-2);display:block;margin-bottom:2px;font-size:12px} .crosshair{ position:fixed;left:50%;top:50%;width:14px;height:14px;z-index:35; transform:translate(-50%,-50%);pointer-events:none; } .crosshair::before,.crosshair::after{ content:"";position:absolute;background:var(--crosshair); } .crosshair::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)} .crosshair::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)} /* ---------- labels (CSS overlay) ---------- */ .label-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden} .map-label{ position:absolute;transform:translate(-50%,-100%); font-size:10.5px;line-height:1;white-space:nowrap; color:var(--label-fg);padding:3px 6px;border-radius:5px; background:var(--label-bg);border:1px solid var(--label-line); text-shadow:var(--label-shadow);transition:opacity .2s; } .map-label.station{color:var(--accent-2);border-color:rgba(124,243,208,.3)} .map-label.place{color:var(--warn);border-color:rgba(255,181,71,.3);letter-spacing:.1em} /* ---------- gate ---------- */ .gate{ position:fixed;inset:0;z-index:60;display:grid;place-items:center; background:var(--gate-bg); transition:opacity .6s; } .gate.gone{opacity:0;pointer-events:none} .gate-inner{text-align:center;max-width:440px;padding:24px} .gate-title{font-size:26px;letter-spacing:.3em;font-weight:700} .gate-sub{color:var(--fg-dim);margin:6px 0 22px;letter-spacing:.2em} .bar{height:3px;background:var(--track);border-radius:2px;overflow:hidden} .bar i{ display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s; } .gate-state{margin:12px 0 20px;color:var(--fg-dim);font-size:11px;min-height:16px} .gate-tip{margin-top:18px;font-size:10.5px;color:var(--fg-faint);line-height:1.7} /* ---------- modal ---------- */ .modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(2,4,8,.72)} .modal-box{ max-width:460px;padding:20px;border-radius:12px; background:var(--bg-2);border:1px solid var(--line-2); } .modal-box h3{margin:0 0 12px;font-size:14px;letter-spacing:.1em} .modal-box ul{margin:0 0 16px;padding-left:18px;color:var(--fg-dim);line-height:1.9;font-size:11.5px} .modal-box b{color:var(--fg)} /* ---------- 帮助文案按设备切换 ---------- */ .help-mobile{display:none} body.is-mobile .help-desktop{display:none} body.is-mobile .help-mobile{display:block} /* ================================================================ 移动端 / 触屏 ================================================================ */ /* 抽屉标签栏（仅移动端注入） */ .drawer-bar{ position:fixed;left:0;right:0;bottom:0;z-index:32; display:flex;gap:6px;padding:6px 8px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); background:var(--glass);border-top:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .dtab{ flex:1;font:11px/1 var(--mono);color:var(--fg-dim); background:var(--kbd-bg);border:1px solid var(--line); border-radius:7px;padding:9px 6px;cursor:pointer; } .dtab.on{color:var(--accent);border-color:var(--accent);background:rgba(78,168,255,.14)} /* 抽屉化的面板。宽度用 min(calc(100vw-16px),460px) 显式算出来，再靠 translateX(-50%) 居中： position:fixed 同时设 left/right 时 max-width + margin:auto 不生效。 */ .panel.drawer{ position:fixed;left:50%;right:auto; width:min(calc(100vw - 16px),460px); transform:translateX(-50%); top:auto;bottom:58px;bottom:calc(58px + env(safe-area-inset-bottom)); max-height:52vh;z-index:33; transition:transform .25s ease,opacity .2s; } .panel.drawer.collapsed{ transform:translateX(-50%) translateY(130%);opacity:0;pointer-events:none; } /* 虚拟摇杆 + 动作按钮 */ .mobile-ui{position:fixed;inset:0;z-index:31;pointer-events:none} .mobile-ui > *{pointer-events:auto} .mstick{ position:absolute;left:20px; bottom:calc(84px + env(safe-area-inset-bottom)); width:124px;height:124px;border-radius:50%; border:1px solid var(--line-2); background:var(--joy-bg); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); touch-action:none;transition:border-color .15s; } .mstick.active{border-color:var(--accent)} .mstick-knob{ position:absolute;left:50%;top:50%;width:46px;height:46px; transform:translate(-50%,-50%);border-radius:50%; background:linear-gradient(180deg,rgba(78,168,255,.9),rgba(43,127,212,.75)); box-shadow:var(--shadow-sm); } .mbtns{ position:absolute;right:18px; bottom:calc(88px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:10px;align-items:flex-end; } .mbtn{ font:11px/1 var(--mono);color:var(--fg); background:var(--glass);border:1px solid var(--line-2); border-radius:50%;width:66px;height:66px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .mbtn.down{border-color:var(--accent-2);background:rgba(124,243,208,.22)} .mbtn.sm{ width:auto;height:auto;border-radius:7px;padding:8px 11px;font-size:11px; } .mmode{ position:absolute;right:18px;top:56px; display:flex;flex-direction:column;gap:6px; } .mmode .mbtn.on{color:var(--accent);border-color:var(--accent);background:rgba(78,168,255,.16)} /* 环绕模式没有跳跃/加速的语义，隐藏以免误触 */ .mobile-ui.orbit .mbtns{display:none} .mobile-ui.orbit .mstick{opacity:.55} /* 移动端整体布局微调 */ body.is-mobile .hud{display:none} body.is-mobile .crosshair{display:none} body.is-mobile .topbar{height:40px;padding:0 8px} body.is-mobile .brand strong{letter-spacing:.1em;font-size:11px} body.is-mobile .brand .muted,body.is-mobile .brand .sep{display:none} body.is-mobile .topbar-right .pill{padding:2px 7px;font-size:10px} body.is-mobile .minimap-wrap{max-width:200px;margin:0 auto} body.is-mobile .gate-title{font-size:20px;letter-spacing:.18em} body.is-mobile .modal-box{margin:12px;max-height:80vh;overflow-y:auto} body.is-mobile .map-label{font-size:9.5px;padding:2px 4px} /* 触屏上把可点区域放大到 44px 起，符合可达性建议 */ body.is-mobile .landmarks li{padding:10px 8px;font-size:12px} body.is-mobile .btn{padding:9px 12px} body.is-mobile .mini{padding:7px 9px} body.is-mobile .row input[type=range]{height:5px} body.is-mobile .row input[type=range]::-webkit-slider-thumb{width:20px;height:20px} body.is-mobile .row input[type=range]::-moz-range-thumb{width:20px;height:20px} body.is-mobile .row.switch input{width:18px;height:18px} body.is-mobile .search input{padding:9px 10px;font-size:12px} /* 横屏手机：面板改成侧边窄栏，避免吃掉垂直空间 */ @media (max-width:940px) and (orientation:landscape){ body.is-mobile .panel.drawer{ left:8px;right:auto;transform:none; width:250px;top:46px;bottom:8px;max-height:none; } body.is-mobile .panel.drawer.panel-right{left:auto;right:8px} body.is-mobile .panel.drawer.collapsed{transform:scale(.96);opacity:0} .drawer-bar{left:auto;right:8px;bottom:8px;width:auto;border-radius:8px;border:1px solid var(--line)} .mstick{bottom:20px;width:104px;height:104px} .mbtns{bottom:24px;right:96px;flex-direction:row} .mbtn{width:58px;height:58px} } /* ---------- 桌面端窄屏（非触屏）---------- */ @media (max-width:1080px){ .panel{width:228px} } @media (max-width:820px){ body:not(.is-mobile) .panel{ position:fixed;top:auto;bottom:auto;left:8px;right:8px;width:auto; max-height:38vh; } body:not(.is-mobile) .panel-left{top:52px} body:not(.is-mobile) .panel-right{top:auto;bottom:78px} body:not(.is-mobile) .keys{display:none} body:not(.is-mobile) .hud{justify-content:center} } /* 尊重系统的减少动效偏好 */ @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important;animation-duration:.01ms !important} }