release: bump version to 0.27.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
rayd1o
2026-04-14 07:37:45 +08:00
parent 2ee4773f4f
commit 7cd29cf9c0
24 changed files with 1565 additions and 630 deletions

View File

@@ -1,146 +1,175 @@
/* info-panel */
/* info-panel.css — brand panel + detail card */
.hud-panel-info {
/* ── Left column wrapper ──────────────────────────────────────── */
.earth-left-column {
position: absolute;
top: var(--hud-offset);
left: var(--hud-offset);
border-radius: var(--hud-radius);
padding: calc(22px * var(--hud-scale));
width: calc(336px * var(--hud-scale));
display: flex;
flex-direction: column;
z-index: 10;
font-size: var(--hud-font-size);
pointer-events: none;
/* Width is set by the widest child (brand or info card) */
max-width: min(calc(340px * var(--hud-scale)), calc(100vw - 32px));
}
.hud-panel-info .earth-brand {
margin-bottom: calc(12px * var(--hud-scale));
.earth-left-column > * {
position: relative; /* override .hud-panel position:absolute */
pointer-events: auto;
width: 100%;
box-sizing: border-box;
}
/* ── Brand panel ──────────────────────────────────────────────── */
.hud-panel-brand {
border-radius: 0;
padding: calc(12px * var(--hud-scale)) calc(14px * var(--hud-scale));
display: flex;
align-items: flex-start;
align-items: center;
justify-content: center;
/* Reserve full panel height before brand images load */
min-height: calc(66px * var(--hud-scale));
}
.hud-panel-brand .earth-brand {
display: flex;
align-items: center;
gap: calc(10px * var(--hud-scale));
min-width: 0;
}
.hud-panel-info .earth-brand__logo {
.hud-panel-brand .earth-brand__logo {
display: block;
flex: 0 0 auto;
width: min(calc(148px * var(--hud-scale)), 41%);
height: auto;
width: calc(128px * var(--hud-scale));
height: calc(128px * var(--hud-scale));
object-fit: contain;
image-rendering: auto;
}
.hud-panel-info .earth-brand__copy {
.hud-panel-brand .earth-brand__copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: calc(8px * var(--hud-scale));
gap: calc(5px * var(--hud-scale));
}
.hud-panel-info .earth-brand__title {
.hud-panel-brand .earth-brand__title {
display: block;
width: min(100%, calc(196px * var(--hud-scale)));
width: min(100%, calc(160px * var(--hud-scale)));
max-width: 100%;
height: auto;
min-height: calc(20px * var(--hud-scale));
object-fit: contain;
image-rendering: auto;
}
.hud-panel-info .earth-brand__meta {
text-align: left;
.hud-panel-brand .earth-brand__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(4px * var(--hud-scale));
gap: calc(2px * var(--hud-scale));
width: fit-content;
}
.hud-panel-info .earth-brand__subtitle {
.hud-panel-brand .earth-brand__subtitle {
color: var(--hud-text-muted);
font-size: calc(0.84rem * var(--hud-scale));
line-height: 1.38;
font-size: calc(0.74rem * var(--hud-scale));
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.015em;
letter-spacing: 0.01em;
/* Prevent text from pushing brand wider than logo column */
width: fit-content;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hud-panel-info .earth-brand__description {
.hud-panel-brand .earth-brand__description {
color: var(--hud-text-soft);
font-size: calc(0.66rem * var(--hud-scale));
line-height: 1.35;
font-size: calc(0.6rem * var(--hud-scale));
line-height: 1.3;
letter-spacing: 0.08em;
width: fit-content;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hud-panel-info .earth-brand--en .earth-brand__logo {
width: min(calc(140px * var(--hud-scale)), 39%);
.hud-panel-brand .earth-brand--en .earth-brand__title {
width: min(100%, calc(172px * var(--hud-scale)));
}
.hud-panel-info .earth-brand--en .earth-brand__title {
width: min(100%, calc(208px * var(--hud-scale)));
}
.hud-panel-info .earth-brand--en .earth-brand__meta {
gap: calc(3px * var(--hud-scale));
}
.hud-panel-info .earth-brand--en .earth-brand__subtitle,
.hud-panel-info .earth-brand--en .earth-brand__description {
.hud-panel-brand .earth-brand--en .earth-brand__subtitle,
.hud-panel-brand .earth-brand--en .earth-brand__description {
font-family: "Roboto Condensed", "Arial Narrow", "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.hud-panel-info .earth-brand--en .earth-brand__subtitle {
line-height: 1.26;
letter-spacing: 0.01em;
}
/* ── Info detail panel (floating, positioned near click by JS) ── */
.hud-panel-info .earth-brand--en .earth-brand__description {
line-height: 1.24;
letter-spacing: 0.045em;
}
/* Info Card - Unified details panel (inside info-panel) */
.info-card {
display: none;
margin-top: var(--hud-gap-lg);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
rgba(255, 255, 255, 0.025);
border-radius: calc(18px * var(--hud-scale));
border: 1px solid rgba(214, 229, 245, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 12px 28px rgba(0, 0, 0, 0.14);
.hud-panel-info {
position: absolute;
z-index: 50;
width: min(calc(300px * var(--hud-scale)), calc(100vw - 32px));
border-radius: 0;
padding: 0;
overflow: hidden;
/* Start hidden */
opacity: 0;
transform: scale(0.94) translateY(4px);
pointer-events: none;
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.hud-panel-info.is-visible {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.info-card.no-border {
background: transparent;
border: none;
/* ── Info Card ────────────────────────────────────────────────── */
.info-card {
display: block;
}
.info-card-header {
display: flex;
align-items: center;
padding: calc(12px * var(--hud-scale)) calc(14px * var(--hud-scale));
padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
border-bottom: 1px solid var(--hud-line);
gap: var(--hud-gap-sm);
gap: var(--hud-gap-xs);
}
.info-card-icon {
font-size: calc(18px * var(--hud-scale));
font-size: calc(16px * var(--hud-scale));
flex-shrink: 0;
}
.info-card-header h3 {
flex: 1;
margin: 0;
font-size: calc(0.96rem * var(--hud-scale));
font-size: calc(0.92rem * var(--hud-scale));
color: var(--hud-title);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-card-close {
flex-shrink: 0;
}
.info-card-content {
padding: calc(12px * var(--hud-scale)) calc(14px * var(--hud-scale));
max-height: 40vh;
padding: calc(8px * var(--hud-scale)) calc(12px * var(--hud-scale));
max-height: 58vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(160, 186, 216, 0.34) transparent;
@@ -148,7 +177,7 @@
}
.info-card-content::-webkit-scrollbar {
width: 6px;
width: 4px;
}
.info-card-content::-webkit-scrollbar-track {
@@ -160,15 +189,11 @@
border-radius: 999px;
}
.info-card-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(226, 236, 246, 0.28), rgba(136, 164, 196, 0.34));
}
.info-card-property {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: calc(8px * var(--hud-scale)) 0;
padding: calc(6px * var(--hud-scale)) 0;
border-bottom: 1px solid rgba(214, 229, 245, 0.06);
pointer-events: auto;
gap: var(--hud-gap-sm);
@@ -180,10 +205,11 @@
.info-card-label {
color: var(--hud-text-soft);
font-size: calc(0.72rem * var(--hud-scale));
font-size: calc(0.68rem * var(--hud-scale));
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
flex-shrink: 0;
transition: color 0.18s ease;
}
@@ -194,35 +220,34 @@
.info-card-value {
color: var(--hud-text);
font-weight: 600;
font-size: calc(0.88rem * var(--hud-scale));
font-size: calc(0.82rem * var(--hud-scale));
line-height: 1.45;
text-align: right;
max-width: calc(190px * var(--hud-scale));
max-width: calc(180px * var(--hud-scale));
word-break: break-word;
}
/* Cable type */
.info-card.cable {
border-color: rgba(255, 200, 0, 0.4);
}
/* Type-specific header accent colors */
.info-card.cable .info-card-header {
background: rgba(255, 200, 0, 0.15);
}
.info-card.cable .info-card-header h3 {
color: #ffc800;
}
/* Satellite type */
.info-card.satellite {
border-color: rgba(0, 229, 255, 0.4);
background: rgba(255, 200, 0, 0.12);
border-bottom-color: rgba(255, 200, 0, 0.15);
}
.info-card.cable .info-card-header h3 { color: #ffc800; }
.info-card.satellite .info-card-header {
background: rgba(0, 229, 255, 0.15);
background: rgba(0, 229, 255, 0.12);
border-bottom-color: rgba(0, 229, 255, 0.15);
}
.info-card.satellite .info-card-header h3 { color: #00e5ff; }
.info-card.satellite .info-card-header h3 {
color: #00e5ff;
.info-card.bgp .info-card-header {
background: rgba(120, 180, 255, 0.12);
border-bottom-color: rgba(120, 180, 255, 0.15);
}
.info-card.bgp .info-card-header h3 { color: var(--hud-accent-strong); }
/* ── Layout-expanded: slide left column off-screen ────────────── */
.earth-app.layout-expanded .earth-left-column {
transform: translate(calc(-100% + var(--hud-offset)), 0);
}