release: bump version to 0.62.0
This commit is contained in:
linkong
@@ -756,6 +756,10 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.earth-mobile-page--settings {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.earth-mobile-page--tv {
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1290,11 +1294,24 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.earth-mobile-settings-subsection-title {
|
||||
margin: 8px 2px -2px;
|
||||
color: rgba(201, 219, 241, 0.72);
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.earth-mobile-settings-title + .earth-mobile-settings-subsection-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.earth-mobile-settings-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
margin-top: -2px;
|
||||
padding: 4px 1px 4px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@@ -1344,6 +1361,105 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.earth-about-card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.earth-about-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.earth-about-card--mobile {
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(212, 227, 244, 0.08);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
|
||||
rgba(255, 255, 255, 0.03);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.earth-about-logo-frame {
|
||||
width: 100%;
|
||||
min-height: calc(92px * var(--hud-scale, 1));
|
||||
max-height: calc(150px * var(--hud-scale, 1));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(212, 227, 244, 0.1);
|
||||
padding: calc(10px * var(--hud-scale, 1));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.earth-about-logo {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: calc(126px * var(--hud-scale, 1));
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.earth-about-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.earth-about-heading strong {
|
||||
color: var(--hud-title);
|
||||
font-size: calc(0.94rem * var(--hud-scale, 1));
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.earth-about-heading span:last-child {
|
||||
color: rgba(145, 186, 255, 0.82);
|
||||
font-size: calc(0.72rem * var(--hud-scale, 1));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.earth-about-kicker {
|
||||
color: var(--hud-text-muted);
|
||||
font-size: calc(0.62rem * var(--hud-scale, 1));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.earth-about-copy {
|
||||
margin: 0;
|
||||
color: var(--hud-text-soft);
|
||||
font-size: calc(0.78rem * var(--hud-scale, 1));
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.earth-about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.earth-about-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.earth-about-meta span {
|
||||
color: var(--hud-text-muted);
|
||||
font-size: calc(0.64rem * var(--hud-scale, 1));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.earth-about-meta strong {
|
||||
color: var(--hud-text);
|
||||
font-size: calc(0.78rem * var(--hud-scale, 1));
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.earth-mobile-settings-card--stacked {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@@ -1643,6 +1759,21 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-status-message {
|
||||
left: auto !important;
|
||||
right: calc(10px + var(--safe-right)) !important;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-status-message.earth-status-message--ticker-stack {
|
||||
left: auto !important;
|
||||
right: calc(10px + var(--safe-right)) !important;
|
||||
transform: translate(12px, 0);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-status-message.earth-status-message--ticker-stack.visible {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-status-message.visible,
|
||||
.layout-mode-mobile .earth-error-message.visible {
|
||||
transform: translate(0, 0);
|
||||
@@ -2215,7 +2346,7 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: calc(6px * var(--settings-scale));
|
||||
padding: calc(2px * var(--settings-scale)) 0 calc(4px * var(--settings-scale));
|
||||
}
|
||||
@@ -2320,6 +2451,18 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.earth-settings-subsection-title {
|
||||
margin: 10px 2px 2px;
|
||||
color: rgba(201, 219, 241, 0.72);
|
||||
font-size: calc(0.66rem * var(--hud-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.earth-settings-list > .earth-settings-subsection-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.earth-settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2544,6 +2687,83 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
0 8px 18px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.earth-cruise-region-order {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid rgba(122, 180, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
color: var(--hud-text);
|
||||
padding: calc(6px * var(--hud-scale)) calc(10px * var(--hud-scale));
|
||||
font: inherit;
|
||||
font-size: calc(0.69rem * var(--hud-scale));
|
||||
font-weight: 650;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
background 0.18s ease,
|
||||
opacity 0.18s ease,
|
||||
transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item:hover {
|
||||
border-color: rgba(122, 180, 255, 0.34);
|
||||
background: rgba(122, 180, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-list.is-dragging .earth-cruise-region-order-item:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item.is-dragging {
|
||||
opacity: 0.56;
|
||||
scale: 0.96;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item .material-symbols-rounded {
|
||||
font-size: calc(0.95rem * var(--hud-scale));
|
||||
opacity: 0.76;
|
||||
pointer-events: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.earth-cruise-region-order-item span {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.earth-settings-slider {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
@@ -2758,6 +2978,24 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.earth-shortcut-panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.earth-shortcut-panel-heading .earth-settings-copy,
|
||||
.earth-shortcut-panel-heading .earth-mobile-settings-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.earth-shortcut-panel-heading [data-shortcut-reset-all] {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.earth-shortcut-category {
|
||||
margin-top: 4px;
|
||||
color: var(--hud-text-soft);
|
||||
@@ -2866,11 +3104,6 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
font-size: calc(0.9rem * var(--hud-scale));
|
||||
}
|
||||
|
||||
.earth-settings-shortcut-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.earth-mobile-settings-card .earth-shortcut-category {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
@@ -3044,31 +3277,221 @@ label.is-disabled.earth-mobile-settings-card {
|
||||
background: #39e58c;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-mobile-motion-debug-mount {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
.earth-mobile-motion-empty {
|
||||
border: 1px solid rgba(212, 227, 244, 0.08);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
|
||||
rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-mobile-motion-debug-mount > .hud-panel-motion-debug {
|
||||
position: relative !important;
|
||||
inset: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
pointer-events: auto;
|
||||
.earth-mobile-motion-empty {
|
||||
padding: 14px 16px;
|
||||
color: var(--hud-text-soft);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .earth-mobile-motion-debug-mount .hud-panel-drag-handle {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug {
|
||||
position: fixed !important;
|
||||
right: calc(12px + var(--safe-right)) !important;
|
||||
bottom: calc(92px + var(--safe-bottom)) !important;
|
||||
top: auto !important;
|
||||
left: auto;
|
||||
width: min(42vw, 188px);
|
||||
min-width: 138px;
|
||||
max-width: 220px;
|
||||
aspect-ratio: 16 / 11;
|
||||
padding: 0;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(212, 227, 244, 0.14);
|
||||
background: rgba(7, 13, 22, 0.56);
|
||||
box-shadow:
|
||||
0 18px 42px rgba(0, 0, 0, 0.34),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
overflow: hidden;
|
||||
z-index: 260;
|
||||
pointer-events: auto;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug.is-mobile-dragging {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug.is-mobile-pressing:not(.is-mobile-dragging) {
|
||||
transform: scale(0.965);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-header {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-title,
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-status,
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-footer,
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-header-actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug [data-motion-debug-close] {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: rgba(5, 10, 18, 0.58);
|
||||
border: 1px solid rgba(214, 230, 247, 0.18);
|
||||
color: rgba(237, 246, 255, 0.92);
|
||||
pointer-events: auto;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug [data-motion-debug-close] .material-symbols-rounded {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug .motion-debug-canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-height: 0 !important;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug.is-motion-matched::before {
|
||||
content: "MATCH";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
bottom: 7px;
|
||||
z-index: 2;
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
pointer-events: none;
|
||||
color: rgba(216, 255, 239, 0.94);
|
||||
background: rgba(20, 184, 166, 0.28);
|
||||
border: 1px solid rgba(57, 229, 140, 0.28);
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug.is-mobile-play-flash::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
z-index: 3;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border-top: 13px solid transparent;
|
||||
border-bottom: 13px solid transparent;
|
||||
border-left: 21px solid rgba(240, 248, 255, 0.78);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
opacity: 0.95;
|
||||
transform: translate(-36%, -50%) scale(1);
|
||||
transform-origin: center;
|
||||
transition: none;
|
||||
animation: motionDebugPlayPop 500ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.36));
|
||||
-webkit-mask: none;
|
||||
mask: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-mode-mobile .hud-panel-motion-debug.is-mobile-pause-flash::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 3;
|
||||
width: 7px;
|
||||
height: 27px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
background: rgba(240, 248, 255, 0.76);
|
||||
box-shadow:
|
||||
13px 0 0 rgba(240, 248, 255, 0.76),
|
||||
0 2px 8px rgba(0, 0, 0, 0.34),
|
||||
13px 2px 8px rgba(0, 0, 0, 0.28);
|
||||
opacity: 0;
|
||||
transform: translate(-10px, -50%) scale(0.64);
|
||||
transform-origin: center;
|
||||
transition: none;
|
||||
animation: motionDebugPausePop 500ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
|
||||
filter: none;
|
||||
-webkit-mask: none;
|
||||
mask: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes motionDebugPlayPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-36%, -50%) scale(0.58);
|
||||
}
|
||||
32% {
|
||||
opacity: 0.96;
|
||||
transform: translate(-36%, -50%) scale(1.18);
|
||||
}
|
||||
62% {
|
||||
opacity: 0.86;
|
||||
transform: translate(-36%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-36%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes motionDebugPausePop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-10px, -50%) scale(0.58);
|
||||
}
|
||||
32% {
|
||||
opacity: 0.88;
|
||||
transform: translate(-10px, -50%) scale(1.18);
|
||||
}
|
||||
62% {
|
||||
opacity: 0.82;
|
||||
transform: translate(-10px, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-10px, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.earth-settings-sheet {
|
||||
top: 24px;
|
||||
|
||||
@@ -31,6 +31,14 @@
|
||||
--toolbar-arc-height: var(--initial-toolbar-arc-height, calc(160px * var(--toolbar-scale)));
|
||||
--toolbar-inner-arc-width: var(--initial-toolbar-inner-arc-width, calc(260px * var(--toolbar-scale)));
|
||||
--toolbar-inner-arc-height: var(--initial-toolbar-inner-arc-height, calc(56px * var(--toolbar-scale)));
|
||||
--toolbar-light-rgb: 91, 186, 255;
|
||||
--toolbar-light-intensity: 0.8;
|
||||
--toolbar-light-size-ratio: 0.85;
|
||||
--toolbar-glass-opacity: 0.07;
|
||||
--toolbar-glass-blur: calc(16px * var(--toolbar-scale));
|
||||
--toolbar-light-blur: calc(24px * var(--toolbar-scale));
|
||||
--toolbar-outer-glow-blur: calc(16px * var(--toolbar-scale));
|
||||
--toolbar-active-light-scale: 1.15;
|
||||
position: relative;
|
||||
width: min(620px, calc(100vw - 40px));
|
||||
height: var(--initial-toolbar-height, calc(200px * var(--toolbar-scale)));
|
||||
@@ -74,6 +82,7 @@
|
||||
left: 50%;
|
||||
bottom: calc(30px * var(--toolbar-scale));
|
||||
transform: translate(-50%, -50%);
|
||||
--toolbar-button-size: var(--toolbar-orb-size);
|
||||
}
|
||||
|
||||
.earth-toolbar-hub {
|
||||
@@ -81,6 +90,12 @@
|
||||
left: 50%;
|
||||
bottom: calc(8px * var(--toolbar-scale));
|
||||
transform: translateX(-50%);
|
||||
--toolbar-button-size: var(--toolbar-hub-size);
|
||||
}
|
||||
|
||||
.earth-toolbar-orb,
|
||||
.earth-toolbar-hub {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.earth-toolbar-orb {
|
||||
@@ -105,6 +120,71 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.earth-toolbar-orb::before,
|
||||
.earth-toolbar-hub::before,
|
||||
.earth-toolbar-orb::after,
|
||||
.earth-toolbar-hub::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
transition:
|
||||
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.earth-toolbar-orb::before,
|
||||
.earth-toolbar-hub::before {
|
||||
width: calc(var(--toolbar-button-size) * var(--toolbar-light-size-ratio));
|
||||
height: calc(var(--toolbar-button-size) * var(--toolbar-light-size-ratio));
|
||||
background:
|
||||
radial-gradient(
|
||||
circle,
|
||||
rgba(var(--toolbar-light-rgb), var(--toolbar-light-intensity)) 0%,
|
||||
rgba(var(--toolbar-light-rgb), 0.28) 28%,
|
||||
rgba(var(--toolbar-light-rgb), 0) 72%
|
||||
);
|
||||
filter: blur(var(--toolbar-light-blur));
|
||||
opacity: 0.12;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.earth-toolbar-orb::after,
|
||||
.earth-toolbar-hub::after {
|
||||
width: calc(var(--toolbar-button-size) + (24px * var(--toolbar-scale)));
|
||||
height: calc(var(--toolbar-button-size) + (24px * var(--toolbar-scale)));
|
||||
background:
|
||||
radial-gradient(
|
||||
circle,
|
||||
rgba(var(--toolbar-light-rgb), calc(var(--toolbar-light-intensity) * 0.42)) 0%,
|
||||
rgba(var(--toolbar-light-rgb), 0) 72%
|
||||
);
|
||||
filter: blur(var(--toolbar-outer-glow-blur));
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.earth-toolbar-orb:hover::before,
|
||||
.earth-toolbar-orb:focus-within::before,
|
||||
.earth-toolbar-orb:has(> .liquid-glass-surface.active)::before,
|
||||
.earth-toolbar-cluster.is-expanded .earth-toolbar-hub::before {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(var(--toolbar-active-light-scale));
|
||||
filter: blur(calc(var(--toolbar-light-blur) * 0.85));
|
||||
}
|
||||
|
||||
.earth-toolbar-orb:hover::after,
|
||||
.earth-toolbar-orb:focus-within::after,
|
||||
.earth-toolbar-orb:has(> .liquid-glass-surface.active)::after,
|
||||
.earth-toolbar-cluster.is-expanded .earth-toolbar-hub::after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.08);
|
||||
}
|
||||
|
||||
.earth-toolbar-orb:has(#layer-action) {
|
||||
display: none;
|
||||
}
|
||||
@@ -207,6 +287,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.earth-toolbar-btn {
|
||||
color: var(--hud-title);
|
||||
}
|
||||
|
||||
.liquid-glass-surface {
|
||||
--elastic-x: 0px;
|
||||
--elastic-y: 0px;
|
||||
@@ -215,28 +299,23 @@
|
||||
--btn-scale: 1;
|
||||
--press-offset: 0px;
|
||||
--float-offset: 0px;
|
||||
--glow-opacity: 0.24;
|
||||
--glow-x: 50%;
|
||||
--glow-y: 22%;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: center center;
|
||||
will-change: transform, box-shadow;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.12), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.05), transparent 30%),
|
||||
linear-gradient(180deg, var(--hud-surface-top), var(--hud-surface-bottom)),
|
||||
rgba(8, 20, 38, 0.12);
|
||||
border: 1px solid var(--hud-border);
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.085), transparent 38%),
|
||||
rgba(255, 255, 255, var(--toolbar-glass-opacity));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||
var(--glass-shadow),
|
||||
var(--glass-glow);
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||
0 8px 28px rgba(0, 0, 0, 0.38),
|
||||
inset 0 1.5px 2px rgba(255, 255, 255, 0.22),
|
||||
inset 0 -1.5px 2px rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(var(--toolbar-glass-blur, 16px)) saturate(108%) brightness(0.92);
|
||||
-webkit-backdrop-filter: blur(var(--toolbar-glass-blur, 16px)) saturate(108%) brightness(0.92);
|
||||
|
||||
transform:
|
||||
translate3d(
|
||||
var(--elastic-x),
|
||||
@@ -244,116 +323,123 @@
|
||||
0
|
||||
)
|
||||
scale(var(--btn-scale));
|
||||
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease,
|
||||
background 0.22s ease,
|
||||
opacity 0.18s ease,
|
||||
border-color 0.22s ease;
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1px 1px 18px 1px;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 28%, transparent 68%);
|
||||
opacity: 0.42;
|
||||
radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.13), transparent 34%),
|
||||
radial-gradient(circle at 54% 54%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.035), transparent 58%);
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.7))
|
||||
rotateY(calc(var(--tilt-y) * 0.7))
|
||||
translate3d(calc(var(--elastic-x) * 0.22), calc(var(--elastic-y) * 0.22), 0);
|
||||
transform: translate3d(calc(var(--elastic-x) * 0.08), calc(var(--elastic-y) * 0.08), 0);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.liquid-glass-surface::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
padding: 1.35px;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(168, 222, 255, 0.22) 34%, rgba(96, 175, 255, 0.16) 66%, rgba(255, 255, 255, 0.28));
|
||||
opacity: 0.72;
|
||||
radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.1) 100%);
|
||||
box-shadow:
|
||||
inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
filter: url(#liquid-glass-distortion) blur(0.35px);
|
||||
transform:
|
||||
perspective(120px)
|
||||
rotateX(calc(var(--tilt-x) * 0.5))
|
||||
rotateY(calc(var(--tilt-y) * 0.5))
|
||||
translate3d(calc(var(--elastic-x) * 0.16), calc(var(--elastic-y) * 0.16), 0);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
transition: opacity 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.earth-toolbar-hub-btn.liquid-glass-surface {
|
||||
background:
|
||||
radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.16), transparent 34%),
|
||||
linear-gradient(180deg, rgba(28, 54, 90, 0.26), rgba(11, 24, 43, 0.22)),
|
||||
rgba(10, 28, 52, 0.16);
|
||||
border-color: var(--hud-border);
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.095), transparent 40%),
|
||||
rgba(255, 255, 255, 0.07);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 16px 30px rgba(0, 0, 0, 0.24),
|
||||
0 0 30px rgba(104, 181, 247, 0.18);
|
||||
0 9px 30px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1.5px 2px rgba(255, 255, 255, 0.24),
|
||||
inset 0 -1.5px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover {
|
||||
--btn-scale: 1.04;
|
||||
--btn-scale: 1.03;
|
||||
--press-offset: -1px;
|
||||
--glow-opacity: 0.32;
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.14), transparent 34%),
|
||||
radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.08), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(128, 198, 255, 0.06)),
|
||||
rgba(8, 20, 38, 0.14);
|
||||
border-color: var(--hud-border-hover);
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.14), transparent 40%),
|
||||
radial-gradient(circle at 52% 52%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.12), transparent 62%),
|
||||
rgba(255, 255, 255, 0.085);
|
||||
border-color: rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.42);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 18px 36px rgba(0, 0, 0, 0.24),
|
||||
0 0 28px rgba(145, 214, 255, 0.22);
|
||||
0 12px 40px rgba(0, 0, 0, 0.44),
|
||||
inset 0 1.5px 3px rgba(255, 255, 255, 0.36),
|
||||
inset 0 -1.5px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::before {
|
||||
opacity: 0.62;
|
||||
transform: scale(1.01);
|
||||
opacity: 1;
|
||||
background:
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.2), transparent 36%),
|
||||
radial-gradient(circle at 52% 52%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.14), transparent 62%);
|
||||
transform: translate3d(calc(var(--elastic-x) * 0.08), calc(var(--elastic-y) * 0.08 - 1px), 0);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:hover::after {
|
||||
opacity: 0.96;
|
||||
transform: scale(1.01);
|
||||
opacity: 1;
|
||||
box-shadow:
|
||||
inset 0 0 0 0.75px rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.16);
|
||||
}
|
||||
|
||||
.liquid-glass-surface:active,
|
||||
.liquid-glass-surface.is-pressed {
|
||||
--btn-scale: 0.95;
|
||||
--press-offset: 2px;
|
||||
--glow-opacity: 0.2;
|
||||
--btn-scale: 0.94;
|
||||
--press-offset: 3px;
|
||||
box-shadow:
|
||||
0 4px 14px rgba(0, 0, 0, 0.28),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.18),
|
||||
inset 0 -1px 3px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.liquid-glass-surface.active {
|
||||
background:
|
||||
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.14), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(118, 200, 255, 0.08)),
|
||||
rgba(11, 34, 58, 0.18);
|
||||
border-color: var(--hud-border-active);
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.14), transparent 40%),
|
||||
radial-gradient(circle at 52% 52%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.13), transparent 62%),
|
||||
rgba(255, 255, 255, 0.09);
|
||||
border-color: rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.42);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
inset 0 0 18px rgba(160, 220, 255, 0.14),
|
||||
0 18px 34px rgba(0, 0, 0, 0.24),
|
||||
0 0 30px rgba(145, 214, 255, 0.24);
|
||||
0 12px 40px rgba(0, 0, 0, 0.46),
|
||||
inset 0 1.5px 3px rgba(255, 255, 255, 0.38),
|
||||
inset 0 -1.5px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.liquid-glass-surface.active:hover {
|
||||
background:
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.16), transparent 40%),
|
||||
radial-gradient(circle at 52% 52%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.17), transparent 64%),
|
||||
rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 12px 42px rgba(0, 0, 0, 0.48),
|
||||
inset 0 1.5px 3px rgba(255, 255, 255, 0.42),
|
||||
inset 0 -1.5px 3px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.earth-toolbar-cluster.is-expanded .earth-toolbar-hub-btn.liquid-glass-surface {
|
||||
background:
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.15), transparent 42%),
|
||||
radial-gradient(circle at 52% 52%, rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.15), transparent 64%),
|
||||
rgba(255, 255, 255, 0.095);
|
||||
border-color: rgba(var(--toolbar-light-rgb, 91, 186, 255), 0.44);
|
||||
box-shadow:
|
||||
0 12px 42px rgba(0, 0, 0, 0.48),
|
||||
inset 0 1.5px 3px rgba(255, 255, 255, 0.4),
|
||||
inset 0 -1.5px 3px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.earth-rotate-toggle .icon-play,
|
||||
|
||||
Reference in New Issue
Block a user