diff --git a/VERSION b/VERSION index 25939d35..20f06870 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.29.1 +0.29.2 diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index bdbc3ee6..f73cd04a 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -10,6 +10,25 @@ This project follows the repository versioning rule: ## [0.29.1] — 2026-04-20 +## [0.29.2] — 2026-04-21 + +### ✨ Highlights +- Earth 继续收口 HUD 交互与设置面板表现,设置弹窗改成更接近从按钮展开的窗口感,同时加入系统级 admin 入口 +- 修正天球太阳方向与地球受光解耦后的日照逻辑,地表昼夜判断改为按太阳直射点经纬度落到地球贴图坐标 + +### 🔧 Improvements +- toolbar 进一步收成更贴近 hub 的浅弓形排列,并统一成与 HUD panel 一致的液态玻璃配色与透明度 +- 设置弹窗与各 HUD panel 继续统一样式、等比缩放和头部基线,设置列表补充系统分组与 admin 跳转 +- 所有 HUD panel 增加更统一的液态玻璃高光与 hover / press 反馈 + +### 🐛 Fixes +- 修复设置弹窗仍像旧圆角矩形、标题文案重复和从底边直直飞出的动画问题 +- 修复天球与太阳方向混用显示校准导致中国白天仍落在夜面的日照错误 + +--- + +## [0.29.1] — 2026-04-20 + ### ✨ Highlights - Earth 加载状态条改成单一队列式通知面板,加载阶段不再因为步骤文案变化而回缩,也不会被其他通知打断 - 调整 brand panel 的呈现方式与昼夜/选中态可读性,让品牌区更自然、交互高亮在白天和黑夜里都更稳定 diff --git a/docs/version-history.md b/docs/version-history.md index fc63a8cd..2102adf7 100644 --- a/docs/version-history.md +++ b/docs/version-history.md @@ -16,12 +16,13 @@ ## Current Version - `main` 当前主线历史推导到:`0.16.5` -- `dev` 当前开发分支历史推导到:`0.29.1` +- `dev` 当前开发分支历史推导到:`0.29.2` ## Timeline | Version | Type | Branch | Commit | Summary | | --- | --- | --- | --- | --- | +| `0.29.2` | bugfix | `dev` | `pending` | 修正 Earth 设置弹窗展开表现与系统入口,继续统一液态玻璃 HUD,并校正太阳受光方向 | | `0.29.1` | bugfix | `dev` | `pending` | Earth 加载通知条改为队列式单面板显示,brand panel 去框并收敛昼夜与选中态可读性 | | `0.29.0` | feature | `dev` | `pending` | Earth 新增天球背景与太阳/月亮位置层,强化昼夜分隔并收口卫星图例与图层面板交互 | | `0.28.2` | bugfix | `dev` | `pending` | 修正媒体情报 tab 尺寸记忆与切换锚点逻辑,并清理 docs 根目录遗留旧路径文档 | diff --git a/frontend/package.json b/frontend/package.json index 549127c9..ec69aa82 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "planet-frontend", - "version": "0.29.1", + "version": "0.29.2", "private": true, "packageManager": "bun@1", "dependencies": { diff --git a/frontend/public/earth/css/hud.css b/frontend/public/earth/css/hud.css index fb905907..553ec78c 100644 --- a/frontend/public/earth/css/hud.css +++ b/frontend/public/earth/css/hud.css @@ -1,11 +1,16 @@ /* hud.css - HUD surfaces and shared overlays */ .hud-panel { + --panel-glow-x: 18%; + --panel-glow-y: 0%; + --panel-glow-opacity: 0.1; + --panel-tilt-x: 0deg; + --panel-tilt-y: 0deg; position: absolute; overflow: hidden; isolation: isolate; background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.08), transparent 30%), + radial-gradient(circle at var(--panel-glow-x) var(--panel-glow-y), rgba(255, 255, 255, calc(0.08 + var(--panel-glow-opacity))), transparent 30%), radial-gradient(circle at 86% 115%, rgba(145, 186, 255, 0.08), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 26%), linear-gradient(180deg, var(--hud-surface-top), var(--hud-surface-bottom)); @@ -14,9 +19,14 @@ inset 0 1px 0 var(--hud-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.03), var(--hud-shadow), - 0 0 0 1px rgba(255, 255, 255, 0.02); + 0 0 0 1px rgba(255, 255, 255, 0.02), + 0 0 20px rgba(123, 176, 236, calc(0.04 + var(--panel-glow-opacity) * 0.32)); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); + transition: + background 0.22s ease, + border-color 0.22s ease, + box-shadow 0.22s ease; } .hud-panel::before { @@ -28,6 +38,11 @@ linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 58%, transparent 100%); opacity: 0.52; pointer-events: none; + transform: + perspective(240px) + rotateX(calc(var(--panel-tilt-x) * 0.36)) + rotateY(calc(var(--panel-tilt-y) * 0.36)); + transition: opacity 0.18s ease, transform 0.18s ease; } .hud-panel::after { @@ -40,7 +55,11 @@ linear-gradient(135deg, rgba(244, 249, 255, 0.22), rgba(164, 194, 226, 0.08) 36%, rgba(90, 123, 161, 0.04) 70%, rgba(255, 255, 255, 0.16)); opacity: 0.72; pointer-events: none; - filter: blur(0.2px); + filter: url(#liquid-glass-distortion) blur(0.22px); + transform: + perspective(240px) + rotateX(calc(var(--panel-tilt-x) * 0.24)) + rotateY(calc(var(--panel-tilt-y) * 0.24)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); @@ -49,6 +68,36 @@ linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; + transition: opacity 0.18s ease, transform 0.18s ease; +} + +.hud-panel:hover:not(.is-dragging) { + --panel-glow-opacity: 0.16; + border-color: var(--hud-border-hover); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.18), + inset 0 -1px 0 rgba(255, 255, 255, 0.04), + 0 20px 48px rgba(1, 7, 16, 0.34), + 0 0 0 1px rgba(255, 255, 255, 0.03), + 0 0 28px rgba(123, 176, 236, 0.1); +} + +.hud-panel:hover:not(.is-dragging)::before { + opacity: 0.6; +} + +.hud-panel:hover:not(.is-dragging)::after { + opacity: 0.84; +} + +.hud-panel.is-pressed:not(.is-dragging) { + --panel-glow-opacity: 0.13; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.14), + inset 0 -1px 0 rgba(255, 255, 255, 0.04), + 0 14px 34px rgba(1, 7, 16, 0.28), + 0 0 0 1px rgba(255, 255, 255, 0.02), + 0 0 22px rgba(123, 176, 236, 0.08); } .hud-panel > * { @@ -406,11 +455,21 @@ position: fixed; inset: 0; z-index: 260; - display: none; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: opacity 0.24s ease, visibility 0.24s ease; +} + +.earth-settings-modal.is-opening, +.earth-settings-modal.is-open, +.earth-settings-modal.is-closing { + visibility: visible; } .earth-settings-modal.is-open { - display: block; + opacity: 1; + pointer-events: auto; } .earth-settings-backdrop { @@ -419,46 +478,47 @@ background: rgba(2, 8, 20, 0.46); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); + opacity: 0; + transition: opacity 0.26s ease; +} + +.earth-settings-modal.is-open .earth-settings-backdrop { + opacity: 1; } .earth-settings-sheet { + --settings-scale: clamp(0.72, calc(var(--hud-scale) * 0.96), 1); position: fixed; - top: max(32px, 9vh); - right: 16px; - left: 16px; - width: min(560px, calc(100vw - 32px)); - max-width: 560px; - max-height: calc(100vh - max(64px, 18vh)); + top: max(calc(32px * var(--settings-scale)), 9vh); + right: calc(16px * var(--settings-scale)); + left: calc(16px * var(--settings-scale)); + width: min(calc(560px * var(--settings-scale)), calc(100vw - (32px * var(--settings-scale)))); + max-width: calc(560px * var(--settings-scale)); + max-height: calc(100vh - max(calc(64px * var(--settings-scale)), 18vh)); margin-inline: auto; transform: none; - border-radius: calc(24px * var(--hud-scale)); - padding: calc(20px * var(--hud-scale)); + border-radius: 0; + padding: calc(var(--hud-panel-padding) * var(--settings-scale)); display: flex; flex-direction: column; - gap: var(--hud-gap-md); + gap: calc(var(--hud-gap-md) * var(--settings-scale)); overflow: hidden; + transform: translateZ(0); + opacity: 1; + filter: none; + border-radius: 0; + will-change: transform, opacity, filter, border-radius; } -.earth-settings-sheet.liquid-glass-surface { - animation: none; - background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.09), transparent 30%), - linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%), - linear-gradient(180deg, rgba(19, 34, 56, 0.92), rgba(8, 18, 31, 0.9)); - border-color: rgba(207, 224, 243, 0.12); +.earth-settings-sheet.hud-panel { + --panel-glow-x: 18%; + --panel-glow-y: 0%; + --panel-glow-opacity: 0.1; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.08), - 0 24px 56px rgba(2, 7, 15, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.025); -} - -.earth-settings-sheet.liquid-glass-surface:hover, -.earth-settings-sheet.liquid-glass-surface:active, -.earth-settings-sheet.liquid-glass-surface.is-pressed { - --btn-scale: 1; - --press-offset: 0px; - --glow-opacity: 0.24; - transform: none; + inset 0 1px 0 var(--hud-highlight), + inset 0 -1px 0 rgba(255, 255, 255, 0.03), + var(--hud-shadow), + 0 0 0 1px rgba(255, 255, 255, 0.02); } .earth-settings-header, @@ -468,12 +528,10 @@ } .earth-settings-header { - display: flex; - align-items: flex-start; - justify-content: space-between; + --hud-header-padding: 0 0 var(--hud-gap-sm); + --hud-header-gap: var(--hud-gap-md); + align-items: center; gap: var(--hud-gap-md); - padding-bottom: var(--hud-gap-sm); - border-bottom: 1px solid var(--hud-line); } .earth-settings-kicker { @@ -483,25 +541,9 @@ text-transform: uppercase; } -.earth-settings-title { - margin: 4px 0 0; - color: var(--hud-title); - font-size: var(--hud-panel-header-title-size); - font-weight: 600; - line-height: 1.2; -} - .earth-settings-close { - margin-top: 4px; - align-self: auto; - width: auto; - height: auto; - min-width: 0; - padding: calc(7px * var(--hud-scale)); -} - -.earth-settings-close .material-symbols-rounded { - font-size: calc(16px * var(--hud-scale)); + margin-top: 0; + flex-shrink: 0; } .earth-settings-content { @@ -566,6 +608,10 @@ transform: translateY(-1px); } +.earth-settings-link { + text-decoration: none; +} + .earth-settings-copy { display: flex; flex-direction: column; @@ -584,6 +630,22 @@ line-height: 1.4; } +.earth-settings-link-meta { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--hud-text-soft); + flex-shrink: 0; +} + +.earth-settings-link-meta .material-symbols-rounded:first-child { + font-size: 1.1rem; +} + +.earth-settings-link-meta .material-symbols-rounded:last-child { + font-size: 1rem; +} + .earth-settings-switch { position: relative; display: inline-flex; diff --git a/frontend/public/earth/css/toolbar.css b/frontend/public/earth/css/toolbar.css index f6a83b82..33898b6f 100644 --- a/frontend/public/earth/css/toolbar.css +++ b/frontend/public/earth/css/toolbar.css @@ -1,4 +1,4 @@ -/* toolbar.css - bottom dock and floating toolbar primitives */ +/* toolbar.css - orbital hub toolbar */ .earth-toolbar-group { position: absolute; @@ -6,7 +6,6 @@ left: 50%; transform: translateX(-50%); display: flex; - flex-direction: row; align-items: center; justify-content: center; z-index: 200; @@ -24,119 +23,153 @@ } .earth-toolbar { + --toolbar-scale: 1; + --toolbar-orb-size: calc(46px * var(--toolbar-scale)); + --toolbar-hub-size: calc(58px * var(--toolbar-scale)); + --toolbar-arc-width: calc(420px * var(--toolbar-scale)); + --toolbar-arc-height: calc(160px * var(--toolbar-scale)); + --toolbar-inner-arc-width: calc(260px * var(--toolbar-scale)); + --toolbar-inner-arc-height: calc(56px * var(--toolbar-scale)); position: relative; + width: min(620px, calc(100vw - 40px)); + height: calc(200px * var(--toolbar-scale)); display: flex; align-items: center; justify-content: center; - gap: 0; background: transparent; border: none; box-shadow: none; padding: 0; } -.earth-toolbar-items { - display: flex; - gap: 10px; - align-items: center; - flex-wrap: nowrap; -} - -.earth-toolbar-popover { +.earth-toolbar-cluster { position: relative; -} - -.earth-toolbar-popover::before { - content: ''; - position: absolute; - left: 50%; - bottom: 100%; - transform: translateX(-50%); - width: 56px; - height: 16px; - background: transparent; -} - -.earth-toolbar-popover > .earth-stack-toolbar { - position: absolute; - left: 50%; - top: auto; - right: auto; - bottom: calc(100% + 12px); - transform: translate(-50%, 10px); - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - opacity: 0; - visibility: hidden; + width: 100%; + height: 100%; pointer-events: none; - transition: - opacity 0.22s ease, - transform 0.22s ease, - visibility 0.22s ease; - z-index: 220; } -.earth-toolbar-btn { +.earth-toolbar-cluster::before { + content: ""; + position: absolute; + left: 50%; + bottom: calc(14px * var(--toolbar-scale)); + width: var(--toolbar-arc-width); + height: var(--toolbar-arc-height); + transform: translateX(-50%); + border-radius: 50%; + border: 1px solid rgba(145, 186, 255, 0.08); + border-bottom-color: transparent; + background: + radial-gradient(circle at 50% 100%, rgba(145, 186, 255, 0.05), transparent 58%); + opacity: 0.9; + mask: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 86%); + pointer-events: none; +} + +.earth-toolbar-orb { + position: absolute; + left: 50%; + bottom: calc(30px * var(--toolbar-scale)); + transform: translate(-50%, -50%); +} + +.earth-toolbar-hub { + position: absolute; + left: 50%; + bottom: calc(8px * var(--toolbar-scale)); + transform: translateX(-50%); +} + +.earth-toolbar-orb { + pointer-events: none; + opacity: 1; + transition: + transform 0.36s cubic-bezier(0.34, 1.15, 0.64, 1), + opacity 0.24s ease; +} + +.earth-toolbar-cluster.is-expanded .earth-toolbar-orb { + transform: translate(calc(-50% + var(--orb-x)), calc(-50% + var(--orb-y))); +} + +.earth-toolbar-cluster.is-collapsed .earth-toolbar-orb { + transform: translate(-50%, -50%) scale(0.42); + opacity: 0; +} + +.earth-toolbar-orb > *, +.earth-toolbar-hub > * { + pointer-events: auto; +} + +.earth-toolbar-orb > .liquid-glass-surface { + animation: floatDock 4.6s ease-in-out infinite; + animation-delay: var(--orb-delay, 0s); +} + +.earth-toolbar-cluster.is-dock-engaged .earth-toolbar-orb > .liquid-glass-surface { + animation-play-state: paused; +} + +.earth-toolbar-btn, +.earth-toolbar-hub-btn { position: relative; width: 28px; height: 28px; border: none; - border-radius: 0; background: transparent; - color: #4db8ff; + color: var(--hud-text-soft); font-size: 14px; cursor: pointer; - display: flex; + display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; margin: 0; - overflow: visible; appearance: none; -webkit-appearance: none; } .earth-toolbar-btn.floating-btn { - width: 42px; - height: 42px; - min-width: 42px; - min-height: 42px; + width: var(--toolbar-orb-size); + height: var(--toolbar-orb-size); + min-width: var(--toolbar-orb-size); + min-height: var(--toolbar-orb-size); border-radius: 50%; overflow: hidden; } -.earth-toolbar-btn:not(.liquid-glass-surface)::after { - content: none; +.earth-toolbar-hub-btn { + width: var(--toolbar-hub-size); + height: var(--toolbar-hub-size); + min-width: var(--toolbar-hub-size); + min-height: var(--toolbar-hub-size); + border-radius: 50%; + overflow: hidden; + color: var(--hud-title); +} + +.earth-toolbar-btn .icon, +.earth-toolbar-hub-btn .material-symbols-rounded { + position: relative; + z-index: 1; + line-height: 1; } .earth-toolbar-btn .icon { display: inline-flex; align-items: center; justify-content: center; - position: relative; - z-index: 1; - transform: translateZ(0); transition: transform 0.16s ease, opacity 0.16s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; - line-height: 1; } -.earth-toolbar-btn svg { - width: 20px; - height: 20px; - stroke: currentColor; - stroke-width: 2.1; - fill: none; - stroke-linecap: round; - stroke-linejoin: round; -} - -.earth-toolbar-btn .material-symbols-rounded { - font-size: 21px; +.earth-toolbar-btn .material-symbols-rounded, +.earth-toolbar-hub-btn .material-symbols-rounded { + font-size: calc(21px * var(--toolbar-scale)); line-height: 1; font-variation-settings: 'FILL' 0, @@ -154,28 +187,6 @@ -moz-osx-font-smoothing: grayscale; } -.earth-toolbar-btn img { - width: 20px; - height: 20px; - display: block; - user-select: none; - pointer-events: none; - shape-rendering: geometricPrecision; - image-rendering: -webkit-optimize-contrast; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.earth-toolbar-items > :nth-child(2n).floating-btn, -.earth-toolbar-items > :nth-child(2n) .floating-btn { - animation-delay: 0.18s; -} - -.earth-toolbar-items > :nth-child(3n).floating-btn, -.earth-toolbar-items > :nth-child(3n) .floating-btn { - animation-delay: 0.34s; -} - .liquid-glass-surface { --elastic-x: 0px; --elastic-y: 0px; @@ -190,12 +201,14 @@ position: relative; isolation: isolate; transform-style: preserve-3d; + transform-origin: center center; + will-change: transform, box-shadow; overflow: hidden; background: - radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.16), transparent 34%), - radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%), - linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom)), - rgba(8, 20, 38, 0.22); + radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.12), transparent 34%), + radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.05), transparent 30%), + linear-gradient(180deg, var(--hud-surface-top), var(--hud-surface-bottom)), + rgba(8, 20, 38, 0.12); border: 1px solid var(--hud-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), @@ -205,7 +218,11 @@ backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); transform: - translate3d(var(--elastic-x), calc(var(--float-offset) + var(--press-offset) + var(--elastic-y)), 0) + translate3d( + var(--elastic-x), + calc(var(--float-offset) + var(--press-offset) + var(--elastic-y)), + 0 + ) scale(var(--btn-scale)); transition: transform 0.22s ease, @@ -213,17 +230,16 @@ background 0.22s ease, opacity 0.18s ease, border-color 0.22s ease; - animation: floatDock 3.8s ease-in-out infinite; } .liquid-glass-surface::before { - content: ''; + content: ""; position: absolute; inset: 1px 1px 18px 1px; border-radius: inherit; background: - linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 28%, transparent 68%); - opacity: 0.5; + linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 28%, transparent 68%); + opacity: 0.42; pointer-events: none; transform: perspective(120px) @@ -234,14 +250,14 @@ } .liquid-glass-surface::after { - content: ''; + content: ""; position: absolute; inset: -1px; padding: 1.35px; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(168, 222, 255, 0.22) 34%, rgba(96, 175, 255, 0.16) 66%, rgba(255, 255, 255, 0.28)); - opacity: 0.82; + opacity: 0.72; pointer-events: none; filter: url(#liquid-glass-distortion) blur(0.35px); transform: @@ -260,15 +276,28 @@ transition: opacity 0.18s ease, transform 0.18s ease; } +.earth-toolbar-hub-btn.liquid-glass-surface { + background: + radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.16), transparent 34%), + linear-gradient(180deg, rgba(28, 54, 90, 0.26), rgba(11, 24, 43, 0.22)), + rgba(10, 28, 52, 0.16); + border-color: var(--hud-border); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.14), + inset 0 -1px 0 rgba(255, 255, 255, 0.05), + 0 16px 30px rgba(0, 0, 0, 0.24), + 0 0 30px rgba(104, 181, 247, 0.18); +} + .liquid-glass-surface:hover { - --btn-scale: 1.035; + --btn-scale: 1.04; --press-offset: -1px; --glow-opacity: 0.32; background: - radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%), - radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.1), transparent 30%), - linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(128, 198, 255, 0.1)), - rgba(8, 20, 38, 0.2); + radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.14), transparent 34%), + radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%), + linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(128, 198, 255, 0.06)), + rgba(8, 20, 38, 0.14); border-color: var(--hud-border-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), @@ -289,52 +318,16 @@ .liquid-glass-surface:active, .liquid-glass-surface.is-pressed { - --btn-scale: 0.942; + --btn-scale: 0.95; --press-offset: 2px; --glow-opacity: 0.2; - background: - radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.24), transparent 34%), - radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.14), transparent 30%), - linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(146, 210, 255, 0.16)), - rgba(10, 24, 44, 0.24); - border-color: rgba(240, 249, 255, 0.58); - box-shadow: - inset 0 2px 10px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.16), - 0 4px 10px rgba(0, 0, 0, 0.18), - 0 0 14px rgba(176, 226, 255, 0.18); -} - -.liquid-glass-surface:active::before, -.liquid-glass-surface.is-pressed::before { - opacity: 0.46; - transform: translateY(2px) scale(0.985); -} - -.liquid-glass-surface:active::after, -.liquid-glass-surface.is-pressed::after { - opacity: 0.78; - transform: scale(0.985); -} - -.liquid-glass-surface:active .icon, -.liquid-glass-surface.is-pressed .icon { - transform: translateY(1.5px); -} - -.liquid-glass-surface:active img, -.liquid-glass-surface.is-pressed img, -.liquid-glass-surface:active .material-symbols-rounded, -.liquid-glass-surface.is-pressed .material-symbols-rounded { - transform: translateY(1.5px); - transition: transform 0.16s ease, opacity 0.16s ease; } .liquid-glass-surface.active { background: - radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 34%), - linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(118, 200, 255, 0.14)), - rgba(11, 34, 58, 0.26); + radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.14), transparent 34%), + linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(118, 200, 255, 0.08)), + rgba(11, 34, 58, 0.18); border-color: var(--hud-border-active); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), @@ -357,137 +350,50 @@ .earth-zoom-group:hover > .earth-zoom-toolbar, .earth-zoom-group:focus-within > .earth-zoom-toolbar, -.earth-zoom-group.open > .earth-zoom-toolbar, -.earth-info-group:hover > .earth-info-toolbar, -.earth-info-group:focus-within > .earth-info-toolbar, -.earth-info-group.open > .earth-info-toolbar { +.earth-zoom-group.open > .earth-zoom-toolbar { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } -.earth-zoom-group.force-closed > .earth-zoom-toolbar, -.earth-info-group.force-closed > .earth-info-toolbar { +.earth-zoom-group.force-closed > .earth-zoom-toolbar { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); } -.earth-zoom-group > .earth-zoom-toolbar, -.earth-info-group > .earth-info-toolbar { +.earth-toolbar-popover::before { + content: ""; + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + width: calc(56px * var(--toolbar-scale)); + height: calc(16px * var(--toolbar-scale)); + background: transparent; +} + +.earth-toolbar-popover > .earth-stack-toolbar { + position: absolute; + left: 50%; top: auto; right: auto; - left: 50%; - bottom: calc(100% + 12px); + bottom: calc(100% + (12px * var(--toolbar-scale))); + transform: translate(-50%, 10px); display: flex; flex-direction: column; align-items: center; - justify-content: flex-start; - gap: 8px; -} - -.earth-info-toolbar { - width: min(280px, calc(100vw - 36px)); - padding: 12px; - border-radius: 22px; - background: - radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 34%), - linear-gradient(180deg, rgba(16, 29, 48, 0.96), rgba(8, 18, 33, 0.94)); - border: 1px solid rgba(211, 228, 246, 0.14); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.28), - inset 0 1px 0 rgba(255, 255, 255, 0.08); - backdrop-filter: blur(18px) saturate(135%); - -webkit-backdrop-filter: blur(18px) saturate(135%); -} - -.earth-layer-toolbar-header { - width: 100%; - padding: 2px 4px 8px; - border-bottom: 1px solid rgba(201, 225, 247, 0.08); - margin-bottom: 2px; -} - -.earth-layer-toolbar-title { - display: block; - color: var(--hud-accent-strong); - font-size: 0.86rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.earth-layer-toolbar-subtitle { - display: block; - margin-top: 4px; - color: var(--hud-text-soft); - font-size: 0.68rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.earth-layer-btn { - width: 100%; - min-width: 0; - min-height: 52px; - height: auto; - border-radius: 16px; - padding: 12px 14px; - justify-content: space-between; - align-items: center; - gap: 12px; - overflow: hidden; - animation: none; -} - -.earth-layer-btn__copy { - min-width: 0; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 3px; -} - -.earth-layer-btn__label { - color: var(--hud-text); - font-size: 0.92rem; - font-weight: 600; - line-height: 1.15; -} - -.earth-layer-btn__meta { - color: var(--hud-text-soft); - font-size: 0.68rem; - letter-spacing: 0.08em; - text-transform: uppercase; - line-height: 1.2; -} - -.earth-layer-btn__state { - flex: 0 0 auto; - min-width: 42px; - padding: 5px 10px; - border-radius: 999px; - border: 1px solid rgba(201, 225, 247, 0.12); - color: var(--hud-text-soft); - font-size: 0.67rem; - font-weight: 700; - letter-spacing: 0.12em; - text-align: center; - text-transform: uppercase; - background: rgba(255, 255, 255, 0.04); -} - -.earth-layer-btn.active .earth-layer-btn__state { - color: #dff4ff; - border-color: rgba(220, 240, 255, 0.24); - background: rgba(131, 197, 255, 0.14); -} - -.earth-layer-btn .earth-toolbar-tooltip { - display: none; + gap: calc(8px * var(--toolbar-scale)); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: + opacity 0.22s ease, + transform 0.22s ease, + visibility 0.22s ease; + z-index: 220; } .earth-zoom-toolbar .earth-zoom-btn, @@ -495,8 +401,8 @@ width: 42px; min-width: 42px; border-radius: 50%; - color: #4db8ff; - animation: floatDock 3.8s ease-in-out infinite; + color: var(--hud-text-soft); + animation: none; } .earth-zoom-toolbar .earth-zoom-btn { @@ -514,37 +420,8 @@ padding: 0; font-size: 0.68rem; letter-spacing: normal; - animation-delay: 0.18s; } -.earth-zoom-toolbar .earth-zoom-btn:active, -.earth-zoom-toolbar .earth-zoom-btn.is-pressed, -.earth-zoom-toolbar .earth-zoom-value:active, -.earth-zoom-toolbar .earth-zoom-value.is-pressed { - letter-spacing: -0.01em; -} - -.earth-zoom-toolbar .earth-zoom-btn:nth-child(1) { - animation-delay: 0s; -} - -.earth-zoom-toolbar .earth-zoom-btn:nth-child(3) { - animation-delay: 0.34s; -} - -.earth-zoom-toolbar .earth-toolbar-tooltip { - bottom: calc(100% + 10px); -} - -.earth-zoom-toolbar .earth-toolbar-tooltip::after { - top: 100%; - left: 50%; - transform: translateX(-50%); - border: 6px solid transparent; - border-top-color: rgba(77, 184, 255, 0.4); -} - - .earth-app.layout-expanded .earth-toolbar-group { bottom: 18px; transform: translateX(-50%); @@ -555,8 +432,9 @@ bottom: 56px; left: 50%; transform: translateX(-50%); - background: rgba(10, 10, 30, 0.95); - color: #fff; + background: + linear-gradient(180deg, rgba(18, 31, 52, 0.96), rgba(8, 18, 32, 0.95)); + color: var(--hud-text); padding: 6px 12px; border-radius: 6px; font-size: 12px; @@ -564,9 +442,10 @@ opacity: 0; visibility: hidden; transition: all 0.2s ease; - border: 1px solid rgba(77, 184, 255, 0.4); + border: 1px solid var(--hud-border); pointer-events: none; z-index: 100; + box-shadow: var(--hud-shadow-soft); } .earth-toolbar-btn:hover .earth-toolbar-tooltip, @@ -578,11 +457,11 @@ } .earth-toolbar-btn .earth-toolbar-tooltip::after { - content: ''; + content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; - border-top-color: rgba(77, 184, 255, 0.4); + border-top-color: rgba(18, 31, 52, 0.96); } diff --git a/frontend/public/earth/index.html b/frontend/public/earth/index.html index eb076998..17dff164 100644 --- a/frontend/public/earth/index.html +++ b/frontend/public/earth/index.html @@ -154,41 +154,43 @@
-
- - - - - -
+
+
+ +
+
+ +
+
+ +
+
+ +
+
- - - +
+ +
+
+ +
+
+ +
+
+ +
@@ -401,17 +414,16 @@