/* ══════════════════════════════════════════════════════════ globe-ui.css — 环球时钟界面重设计 ────────────────────────────────────────────────────────── globe.js 的样式是打开时才注入 的，排在本文件之后， 所以这里统一用更高优先级的选择器（body #globe-root、 #globe-root .gl-xxx）覆盖，不依赖加载顺序。 方向：让界面退到背景里，把注意力还给地球本身。 去掉彩色描边和实心色块，改用发丝边 + 玻璃 + 单一强调色。 ══════════════════════════════════════════════════════════ */ body #globe-root{ --gl-ink:#EDF1FA; --gl-ink-2:rgba(237,241,250,.62); --gl-ink-3:rgba(237,241,250,.34); --gl-line:rgba(255,255,255,.09); --gl-line-2:rgba(255,255,255,.16); --gl-glass:rgba(13,16,30,.72); --gl-accent:#8AB4FF; --gl-spring:cubic-bezier(.16,1,.3,1); color:var(--gl-ink); background: radial-gradient(60% 40% at 50% 0%, rgba(90,130,220,.13), transparent 70%), radial-gradient(50% 40% at 85% 100%, rgba(150,110,210,.10), transparent 72%), linear-gradient(178deg,#0A0C16 0%,#070812 55%,#04050C 100%); } body.theme-light #globe-root{ --gl-ink:#1B2233; --gl-ink-2:rgba(27,34,51,.62); --gl-ink-3:rgba(27,34,51,.38); --gl-line:rgba(20,28,50,.10); --gl-line-2:rgba(20,28,50,.18); --gl-glass:rgba(255,255,255,.82); --gl-accent:#3D6FD9; background: radial-gradient(60% 40% at 50% 0%, rgba(140,175,240,.35), transparent 70%), linear-gradient(178deg,#EDF2FB 0%,#F6F0F7 60%,#FBF7FA 100%); } /* WebGL 球面层：垫在 2D 叠加层下面 */ #globe-root #globe-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:0; } #globe-root #globe-canvas{position:absolute; inset:0; z-index:1; background:transparent;} /* ── 顶栏：渐隐玻璃条 ── */ #globe-root .gl-top{ position:relative; z-index:5; padding:12px 18px; gap:12px; background:linear-gradient(180deg, rgba(6,8,16,.68), rgba(6,8,16,0)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--gl-line); } body.theme-light #globe-root .gl-top{ background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); } #globe-root .gl-top h3{ margin:0; font-size:.95rem; font-weight:600; letter-spacing:.04em; color:var(--gl-ink); background:none; -webkit-text-fill-color:currentColor; } /* ── 搜索：从彩色描边改为安静的玻璃条 ── */ #globe-root .gl-search input{ padding:9px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--gl-line-2); color:var(--gl-ink); font-size:.82rem; transition:border-color .18s var(--gl-spring), background .18s var(--gl-spring), box-shadow .18s var(--gl-spring); } body.theme-light #globe-root .gl-search input{background:rgba(255,255,255,.75);} #globe-root .gl-search input::placeholder{color:var(--gl-ink-3);} #globe-root .gl-search input:focus{ border-color:var(--gl-accent); background:rgba(255,255,255,.08); box-shadow:0 0 0 4px rgba(138,180,255,.13); } #globe-root .gl-sr{ border-radius:14px; padding:5px; background:var(--gl-glass); border:1px solid var(--gl-line-2); backdrop-filter:blur(28px) saturate(1.5); -webkit-backdrop-filter:blur(28px) saturate(1.5); box-shadow:0 24px 60px rgba(0,0,0,.55); } #globe-root .gl-sr-item{ border-radius:9px; padding:9px 11px; font-size:.8rem; transition:background .14s var(--gl-spring); } #globe-root .gl-sr-item:hover{background:rgba(138,180,255,.14);} /* ── 图标按钮 ── */ #globe-root .gl-ico{ width:34px; height:34px; border-radius:11px; border:1px solid var(--gl-line); background:rgba(255,255,255,.05); color:var(--gl-ink); font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; transition:background .18s var(--gl-spring), transform .18s var(--gl-spring), border-color .18s var(--gl-spring); } #globe-root .gl-ico:hover{ background:rgba(255,255,255,.1); border-color:var(--gl-line-2); transform:translateY(-1px); } #globe-root .gl-ico:active{transform:scale(.94);} #globe-root .gl-ico:focus-visible{outline:2px solid var(--gl-accent); outline-offset:2px;} /* ── 操作提示：更轻，别和地球抢注意力 ── */ #globe-root .gl-hint{ top:14px; font-size:.68rem; letter-spacing:.03em; color:var(--gl-ink-3); z-index:4; } /* ── 城市卡：本模块唯一的重量级元素 ── */ #globe-root .gl-card{ width:min(340px,92vw); border-radius:22px; padding:20px 20px 18px; z-index:6; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--gl-glass); border:1px solid var(--gl-line-2); backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6); box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); } #globe-root .gl-card::before{ content:''; position:absolute; top:0; left:24%; right:24%; height:1px; background:linear-gradient(90deg, transparent, var(--gl-accent), transparent); opacity:.7; } #globe-root .gl-card-flag{font-size:1.55rem;} #globe-root .gl-card-name{font-size:1.02rem; font-weight:600; letter-spacing:-.01em;} #globe-root .gl-card-tz{ font-size:.64rem; color:var(--gl-ink-3); font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; } /* 时间是这张卡的主角：等宽、大字号、克制的单色 */ #globe-root .gl-card-time{ font-size:2.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,monospace; color:var(--gl-ink); background:none; -webkit-text-fill-color:currentColor; } #globe-root .gl-card-date{font-size:.76rem; color:var(--gl-ink-2); margin:4px 0 14px;} #globe-root .gl-card-btn{ width:100%; padding:12px; border-radius:13px; cursor:pointer; font-size:.86rem; font-weight:600; font-family:inherit; transition:transform .18s var(--gl-spring), box-shadow .18s var(--gl-spring), border-color .18s var(--gl-spring); } #globe-root .gl-card-btn.add{ color:#0A0C16; border:0; background:linear-gradient(135deg,#A8C6FF,var(--gl-accent)); box-shadow:0 10px 26px rgba(138,180,255,.26), inset 0 1px 0 rgba(255,255,255,.4); } #globe-root .gl-card-btn.add:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(138,180,255,.34); } #globe-root .gl-card-btn.del{ background:transparent; border:1px solid rgba(248,113,113,.4); color:#FCA5A5; } #globe-root .gl-card-btn.del:hover{background:rgba(248,113,113,.1);} #globe-root .gl-card-close{ top:12px; right:12px; width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.06); color:var(--gl-ink-3); font-size:.68rem; transition:.18s var(--gl-spring); } #globe-root .gl-card-close:hover{background:rgba(255,255,255,.12); color:var(--gl-ink);} /* ── 底部时区 chips：去掉刺眼的黄色 ── */ #globe-root .gl-chips{ padding:12px 16px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(0deg, rgba(6,8,16,.55), transparent); } body.theme-light #globe-root .gl-chips{ background:linear-gradient(0deg, rgba(255,255,255,.6), transparent); } #globe-root .gl-chips-label{ font-size:.66rem; color:var(--gl-ink-3); letter-spacing:.1em; } #globe-root .gl-chip{ padding:7px 12px; border-radius:999px; font-size:.74rem; font-weight:500; color:var(--gl-ink); background:rgba(255,255,255,.06); border:1px solid var(--gl-line-2); transition:background .18s var(--gl-spring), border-color .18s var(--gl-spring), transform .18s var(--gl-spring); } #globe-root .gl-chip:hover{ background:rgba(138,180,255,.14); border-color:var(--gl-accent); transform:translateY(-1px); } #globe-root .gl-chip .x{opacity:.45; font-size:.64rem;} @media (prefers-reduced-motion:reduce){ #globe-root *{transition-duration:.01ms !important; animation-duration:.01ms !important;} } /* ══ 时区面板：左下角收起式 ══════════════════════════════ */ #globe-root .gl-chips{ position:absolute; left:16px; right:auto; bottom:calc(16px + env(safe-area-inset-bottom)); display:block; width:auto; overflow:visible; padding:0; background:none; z-index:7; } #globe-root .gl-chips-toggle{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:.76rem; font-weight:500; color:var(--gl-ink); background:var(--gl-glass); border:1px solid var(--gl-line-2); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .18s var(--gl-spring), border-color .18s var(--gl-spring); } #globe-root .gl-chips-toggle:hover{transform:translateY(-1px); border-color:var(--gl-accent);} #globe-root .gl-chips-toggle:focus-visible{outline:2px solid var(--gl-accent); outline-offset:2px;} #globe-root .gl-chips-ico{font-size:.9rem;} #globe-root .gl-chips-count{ min-width:19px; height:19px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--gl-accent); background:rgba(138,180,255,.16); border:1px solid rgba(138,180,255,.3); } #globe-root .gl-chips-caret{font-size:.6rem; opacity:.5;} #globe-root .gl-chips-drop{ position:absolute; left:0; bottom:calc(100% + 8px); width:min(250px, calc(100vw - 32px)); max-height:0; overflow:hidden; opacity:0; padding:0 6px; border-radius:16px; background:var(--gl-glass); border:1px solid transparent; backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); transition:max-height .26s var(--gl-spring), opacity .18s var(--gl-spring), padding .26s var(--gl-spring), border-color .18s var(--gl-spring); } #globe-root .gl-chips.open .gl-chips-drop{ max-height:min(52vh,380px); overflow-y:auto; opacity:1; padding:6px; border-color:var(--gl-line-2); box-shadow:0 26px 60px rgba(0,0,0,.55); } #globe-root .gl-chips-drop::-webkit-scrollbar{width:6px;} #globe-root .gl-chips-drop::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:99px;} #globe-root .gl-chips-hd{ font-size:.62rem; letter-spacing:.12em; color:var(--gl-ink-3); padding:7px 10px 6px; } #globe-root .gl-chips-empty{ font-size:.72rem; color:var(--gl-ink-3); line-height:1.8; padding:14px 12px; text-align:center; } #globe-root .gl-chip{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border-radius:10px; cursor:pointer; text-align:left; background:transparent; border:0; color:var(--gl-ink); font-family:inherit; font-size:.78rem; transition:background .14s var(--gl-spring); } #globe-root .gl-chip:hover{background:rgba(138,180,255,.14);} #globe-root .gl-chip-flag{font-size:.95rem; flex:0 0 auto;} #globe-root .gl-chip-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #globe-root .gl-chip .x{opacity:0; font-size:.62rem; color:var(--gl-ink-3); transition:opacity .14s;} #globe-root .gl-chip:hover .x{opacity:.7;} /* ══════════════════════════════════════════════════════════ v3：顶栏 / 控制按钮 / 星空层 / 城市卡 / 时区面板 ══════════════════════════════════════════════════════════ */ #globe-root svg.ico{width:16px;height:16px;flex:none} #globe-root .gl-top{padding:max(12px,env(safe-area-inset-top)) 16px 12px} #globe-root .gl-brand{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--gl-accent); background:linear-gradient(145deg,rgba(138,180,255,.22),rgba(180,140,255,.12));box-shadow:inset 0 0 0 1px rgba(138,180,255,.28)} #globe-root .gl-brand svg.ico{width:20px;height:20px} #globe-root .gl-title{display:flex;flex-direction:column;gap:2px;min-width:0} #globe-root .gl-title h3{font-size:15px;font-weight:650;letter-spacing:.04em;line-height:1.2} #globe-root #gl-utc{font-size:11.5px;color:var(--gl-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em} #globe-root .gl-search{display:flex;align-items:center;gap:0;position:relative;color:var(--gl-ink-3)} #globe-root .gl-search>svg.ico{position:absolute;left:12px;pointer-events:none;width:15px;height:15px} #globe-root .gl-search input{width:min(250px,42vw);padding:9px 34px 9px 34px} #globe-root .gl-search kbd{position:absolute;right:9px;min-width:18px;height:18px;padding:0 4px;border-radius:5px;font:600 11px/18px system-ui;text-align:center; color:var(--gl-ink-3);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--gl-line-2);pointer-events:none} #globe-root .gl-search input:focus + kbd{opacity:0} #globe-root .gl-sr{min-width:280px;left:auto;right:0} #globe-root .gl-sr-item{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:8px} #globe-root .gl-sr-item.on{background:rgba(138,180,255,.18)} #globe-root .gl-sr-item .f{font-size:.95rem} #globe-root .gl-sr-item .n{font-weight:600;color:var(--gl-ink)} #globe-root .gl-sr-item mark{background:none;color:var(--gl-accent)} #globe-root .gl-sr-item .tz{font-size:.66rem;color:var(--gl-ink-3)} #globe-root .gl-sr-item .t{font-size:.74rem;color:var(--gl-ink-2);font-variant-numeric:tabular-nums} #globe-root .gl-sr-empty{padding:12px;font-size:.78rem;color:var(--gl-ink-3);text-align:center} #globe-root .gl-ico{width:36px;height:36px} #globe-root .gl-ico svg.ico{width:17px;height:17px} /* 星空层：垫在 WebGL 球体下面，靠 transform 平移做视差 */ #globe-root .gl-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} #globe-root .gl-stars canvas{position:absolute;left:0;top:0;will-change:transform;animation:glStarBreath 9s ease-in-out infinite} @keyframes glStarBreath{0%,100%{opacity:1}50%{opacity:.78}} #globe-root #globe-gl{z-index:1} #globe-root #globe-canvas{z-index:2} #globe-root .gl-hint{top:16px;padding:6px 12px;border-radius:999px;background:rgba(10,12,28,.5);box-shadow:inset 0 0 0 1px var(--gl-line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--gl-ink-2);transition:opacity .6s,transform .6s} #globe-root .gl-hint.gone{opacity:0;transform:translate(-50%,-8px)} body.theme-light #globe-root .gl-hint{background:rgba(255,255,255,.7)} /* 右下角控制按钮 */ #globe-root .gl-ctrl{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:7;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:14px; background:var(--gl-glass);box-shadow:inset 0 0 0 1px var(--gl-line-2),0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)} #globe-root .gl-cbtn{width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--gl-ink-2);cursor:pointer;display:grid;place-items:center; transition:background .16s,color .16s,transform .16s var(--gl-spring)} #globe-root .gl-cbtn:hover{background:rgba(255,255,255,.08);color:var(--gl-ink)} #globe-root .gl-cbtn:active{transform:scale(.9)} #globe-root .gl-cbtn.on{color:var(--gl-accent)} #globe-root .gl-cbtn svg.ico{width:17px;height:17px} #globe-root .gl-cdiv{height:1px;margin:2px 6px;background:var(--gl-line-2)} body.theme-light #globe-root .gl-cbtn:hover{background:rgba(20,28,50,.06)} /* 城市卡 */ #globe-root .gl-card{bottom:calc(20px + env(safe-area-inset-bottom))} #globe-root .gl-card-hd{align-items:center;gap:10px;margin-bottom:10px;padding-right:28px} #globe-root .gl-card-nm{display:flex;flex-direction:column;gap:2px;min-width:0} #globe-root .gl-card-tz{margin:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #globe-root .gl-card-close{display:grid;place-items:center} #globe-root .gl-card-close svg.ico{width:13px;height:13px} #globe-root .gl-card-time{font-family:"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-weight:600} #globe-root .gl-card-date{margin:2px 0 10px} #globe-root .gl-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px} #globe-root .gl-dn,#globe-root .gl-diff{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;font-size:.74rem;font-weight:600; background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--gl-line-2);color:var(--gl-ink-2)} #globe-root .gl-dn svg.ico{width:14px;height:14px} #globe-root .gl-dn.day{color:#F5C563;background:rgba(245,197,99,.12);box-shadow:inset 0 0 0 1px rgba(245,197,99,.3)} #globe-root .gl-dn.dusk{color:#FFAD7A;background:rgba(255,173,122,.12);box-shadow:inset 0 0 0 1px rgba(255,173,122,.3)} #globe-root .gl-dn.night{color:#A5B4FC;background:rgba(165,180,252,.12);box-shadow:inset 0 0 0 1px rgba(165,180,252,.3)} body.theme-light #globe-root .gl-dn.day{color:#A36A06} body.theme-light #globe-root .gl-dn.night{color:#4F46E5} #globe-root .gl-card-btn{display:flex;align-items:center;justify-content:center;gap:7px} #globe-root .gl-card-btn svg.ico{width:15px;height:15px} #globe-root .gl-card-btn.main{background:rgba(255,255,255,.05);border:1px solid var(--gl-line-2);color:var(--gl-ink-2);cursor:default} /* 首页时区面板：一行一座城市 */ #globe-root .gl-chips-toggle svg.ico{width:15px;height:15px} #globe-root .gl-chips-caret{display:grid;transition:transform .22s var(--gl-spring)} #globe-root .gl-chips.open .gl-chips-caret{transform:rotate(180deg)} #globe-root .gl-chips-drop{width:min(300px,calc(100vw - 32px))} #globe-root .gl-chip{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto 24px;align-items:center;gap:8px;padding:8px 6px 8px 10px} #globe-root .gl-chip-name em{font-style:normal;margin-left:6px;padding:0 5px;border-radius:5px;font-size:.6rem;font-weight:700;color:var(--gl-accent);background:rgba(138,180,255,.16)} #globe-root .gl-chip-diff{font-size:.66rem;color:var(--gl-ink-3);font-variant-numeric:tabular-nums} #globe-root .gl-chip-time{font-size:.86rem;font-weight:600;color:var(--gl-ink);font-variant-numeric:tabular-nums;font-family:"SF Pro Display","Segoe UI",system-ui,sans-serif} #globe-root .gl-chip .x{width:24px;height:24px;border:0;border-radius:7px;background:none;cursor:pointer;display:grid;place-items:center;color:var(--gl-ink-3);opacity:.35} #globe-root .gl-chip .x svg.ico{width:12px;height:12px} #globe-root .gl-chip:hover .x{opacity:1} #globe-root .gl-chip .x:hover{color:#FCA5A5;background:rgba(248,113,113,.14)} #globe-root .gl-chip .x.ph{visibility:hidden} @media (hover:none){#globe-root .gl-chip .x{opacity:.7}} @media (max-width:640px){ #globe-root .gl-title #gl-utc{display:none} #globe-root .gl-search input{width:42vw} #globe-root .gl-search kbd{display:none} #globe-root .gl-ctrl{bottom:calc(70px + env(safe-area-inset-bottom));right:12px} #globe-root .gl-card{bottom:calc(66px + env(safe-area-inset-bottom))} #globe-root .gl-hint{white-space:normal;width:84vw;text-align:center} }