linkong/planet
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

release: bump version to 0.29.2

Browse Source
This commit is contained in:
linkong
2026-04-21 10:43:48 +08:00
parent e6d0332fba
commit 2b0d4cfc49
13 changed files with 816 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/public/earth/css/hud.css
View File

@@ -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;