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

fix: polish earth toolbar controls and loading copy

Browse Source
This commit is contained in:
linkong
2026-03-26 14:04:57 +08:00
parent 7b53cf9a06
commit ab09f0ba78
8 changed files with 239 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/public/earth/css/base.css
View File

@@ -65,6 +65,7 @@ body {
font-weight: 600;
color: #4db8ff;
min-width: 30px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 2px 4px;
@@ -96,6 +97,7 @@ body {
margin: 0;
flex: 0 0 auto;
box-sizing: border-box;
position: relative;
}
#zoom-toolbar .zoom-btn:hover {
@@ -104,6 +106,55 @@ body {
box-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
}
#zoom-toolbar #reset-view svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
#zoom-toolbar .zoom-percent {
position: relative;
}
#zoom-toolbar .tooltip {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: rgba(10, 10, 30, 0.95);
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
border: 1px solid rgba(77, 184, 255, 0.4);
pointer-events: none;
z-index: 100;
}
#zoom-toolbar .zoom-btn:hover .tooltip,
#zoom-toolbar .zoom-percent:hover .tooltip {
opacity: 1;
visibility: visible;
}
#zoom-toolbar .tooltip::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: rgba(77, 184, 255, 0.4);
}
#loading {
position: absolute;
top: 50%;
@@ -264,11 +315,23 @@ input[type="range"]::-webkit-slider-thumb {
}
.toggle-arrow {
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4db8ff;
transition: transform 0.3s ease;
}
.toggle-arrow svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
#control-toolbar.collapsed .toggle-arrow {
transform: rotate(0deg);
}
@@ -328,6 +391,31 @@ input[type="range"]::-webkit-slider-thumb {
box-shadow: 0 0 10px rgba(77, 184, 255, 0.4) inset;
}
.toolbar-btn .icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.toolbar-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2.1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
#rotate-toggle .icon-play,
#rotate-toggle.is-stopped .icon-pause {
display: none;
}
#rotate-toggle.is-stopped .icon-play {
display: inline-flex;
}
.toolbar-btn .tooltip {
position: absolute;
bottom: 50px;