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

feat: refine earth hud panel behaviors and news board

Browse Source
This commit is contained in:
linkong
2026-04-17 17:41:15 +08:00
parent 8f3ab88743
commit 1cf1f32ddd
20 changed files with 1803 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,22 +65,6 @@
line-height: 1.2;
}
.hud-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--hud-gap-sm);
margin-bottom: var(--hud-gap-sm);
padding-bottom: var(--hud-gap-sm);
border-bottom: 1px solid var(--hud-line);
}
.hud-panel-header .hud-panel-title {
margin-bottom: 0;
color: var(--hud-text-soft);
font-size: calc(0.82rem * var(--hud-scale));
}
.hud-panel-drag-handle {
cursor: grab;
user-select: none;
@@ -90,19 +74,72 @@
cursor: grabbing;
}
.hud-panel__header,
.hud-panel-header {
--hud-header-padding: 0 0 var(--hud-gap-sm);
--hud-header-gap: var(--hud-gap-sm);
--hud-header-border-color: var(--hud-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hud-header-gap);
margin-bottom: var(--hud-gap-sm);
padding: var(--hud-header-padding);
border-bottom: 1px solid var(--hud-header-border-color);
}
.hud-panel__title-group {
display: flex;
align-items: center;
gap: var(--hud-gap-xs);
min-width: 0;
flex: 1 1 auto;
}
.hud-panel__title,
.hud-panel__header .hud-panel-title,
.hud-panel-header .hud-panel-title {
margin: 0;
color: var(--hud-text-soft);
font-size: var(--hud-panel-header-title-size);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
}
.hud-panel__subtitle {
color: var(--hud-text-soft);
font-size: calc(0.7rem * var(--hud-scale));
line-height: 1.4;
}
.hud-panel__chip {
flex: 0 0 auto;
}
.hud-panel__actions {
display: inline-flex;
align-items: center;
gap: var(--hud-gap-xs);
flex-shrink: 0;
}
.hud-panel__action,
.hud-panel-close {
align-self: flex-start;
width: calc(var(--hud-title-size) * 1.24);
height: calc(var(--hud-title-size) * 1.24);
min-width: calc(var(--hud-title-size) * 1.24);
padding: 0;
--hud-action-padding: calc(7px * var(--hud-scale));
--hud-action-icon-size: calc(16px * var(--hud-scale));
border: 1px solid transparent;
border-radius: calc(4px * var(--hud-scale));
background: transparent;
color: var(--hud-text-muted);
padding: var(--hud-action-padding);
width: auto;
height: auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: auto;
cursor: pointer;
transition:
background 0.18s ease,
@@ -112,17 +149,51 @@
opacity 0.18s ease;
}
.hud-panel__action .material-symbols-rounded,
.hud-panel-close .material-symbols-rounded {
font-size: calc(var(--hud-title-size) * 0.8);
font-size: var(--hud-action-icon-size);
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
pointer-events: none;
}
.hud-panel-close:hover {
.hud-panel__action:hover:not(:disabled),
.hud-panel-close:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(225, 239, 255, 0.14);
color: var(--hud-accent-strong);
}
.hud-panel__action:disabled,
.hud-panel-close:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.hud-panel__body {
position: relative;
z-index: 1;
}
.hud-panel__body--collapsible {
--hud-body-collapse-gap: var(--hud-gap-sm);
--hud-body-max-height: 1000px;
overflow: hidden;
opacity: 1;
max-height: var(--hud-body-max-height);
transition:
max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease,
margin 0.22s ease;
}
.hud-panel--collapsed .hud-panel__body--collapsible {
max-height: 0;
opacity: 0;
pointer-events: none;
margin-top: calc(-1 * var(--hud-body-collapse-gap));
}
.hud-panel.is-dragging {
transition: none !important;
box-shadow:
@@ -313,10 +384,22 @@
.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));
}
.earth-settings-content {