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

fix: redesign earth hud interactions and legend behavior

Browse Source
This commit is contained in:
linkong
2026-03-26 17:58:03 +08:00
parent ab09f0ba78
commit 30a29a6e34
15 changed files with 988 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/public/earth/css/info-panel.css
View File

@@ -1,17 +1,12 @@
/* info-panel */
#info-panel {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(10, 10, 30, 0.85);
border-radius: 10px;
border-radius: 18px;
padding: 20px;
width: 320px;
z-index: 10;
box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
border: 1px solid rgba(0, 150, 255, 0.2);
backdrop-filter: blur(5px);
}
#info-panel h1 {
@@ -159,8 +154,14 @@
/* Info Card - Unified details panel (inside info-panel) */
.info-card {
margin-top: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(110, 176, 255, 0.04)),
rgba(7, 18, 36, 0.2);
border-radius: 14px;
border: 1px solid rgba(225, 242, 255, 0.12);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 24px rgba(0, 0, 0, 0.16);
padding: 0;
overflow: hidden;
}
@@ -174,7 +175,7 @@
display: flex;
align-items: center;
padding: 10px 12px;
background: rgba(77, 184, 255, 0.1);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(77, 184, 255, 0.06));
gap: 8px;
}
@@ -189,16 +190,35 @@
color: #4db8ff;
}
.info-card-content {
#info-card-content {
padding: 10px 12px;
max-height: 200px;
max-height: 40vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(160, 220, 255, 0.45) transparent;
}
#info-card-content::-webkit-scrollbar {
width: 6px;
}
#info-card-content::-webkit-scrollbar-track {
background: transparent;
}
#info-card-content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(210, 237, 255, 0.32), rgba(110, 176, 255, 0.34));
border-radius: 999px;
}
#info-card-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(232, 246, 255, 0.42), rgba(128, 198, 255, 0.46));
}
.info-card-property {
display: flex;
justify-content: space-between;
padding: 6px 0;
padding: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@@ -209,6 +229,12 @@
.info-card-label {
color: #aaa;
font-size: 0.85rem;
cursor: pointer;
transition: color 0.18s ease;
}
.info-card-label:hover {
color: #d9f1ff;
}
.info-card-value {