379 lines
9.6 KiB
CSS
379 lines
9.6 KiB
CSS
/* layer-panel.css — layer toggle panel (below brand, in left column) */
|
|
|
|
.hud-panel-layers {
|
|
/* Lives inside .earth-left-column — narrower than brand panel intentionally */
|
|
border-radius: 0;
|
|
padding: 0;
|
|
width: calc(260px * var(--hud-scale));
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
margin-top: calc(12px * var(--hud-scale));
|
|
}
|
|
|
|
/* ── Header / drag handle ─────────────────────────────────────── */
|
|
|
|
.layer-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(6px * var(--hud-scale));
|
|
padding: calc(8px * var(--hud-scale)) calc(10px * var(--hud-scale));
|
|
border-bottom: 1px solid var(--hud-line);
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.layer-panel-header:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.layer-panel-icon {
|
|
flex-shrink: 0;
|
|
font-size: calc(15px * var(--hud-scale));
|
|
color: var(--hud-text-soft);
|
|
line-height: 1;
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layer-panel-title {
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
color: var(--hud-text-soft);
|
|
font-size: var(--hud-panel-header-title-size);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ── Collapse / generic icon button ──────────────────────────── */
|
|
|
|
.layer-panel-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: calc(7px * var(--hud-scale));
|
|
border: 1px solid transparent;
|
|
border-radius: calc(4px * var(--hud-scale));
|
|
background: transparent;
|
|
color: var(--hud-text-muted);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition:
|
|
background 0.18s ease,
|
|
border-color 0.18s ease,
|
|
color 0.18s ease,
|
|
transform 0.18s ease,
|
|
opacity 0.18s ease;
|
|
}
|
|
|
|
.layer-panel-btn:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(225, 239, 255, 0.14);
|
|
color: var(--hud-accent-strong);
|
|
}
|
|
|
|
.layer-panel-btn .material-symbols-rounded {
|
|
font-size: calc(16px * var(--hud-scale));
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
transition: color 0.18s ease;
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
|
}
|
|
|
|
/* ── Search bar ───────────────────────────────────────────────── */
|
|
|
|
.layer-panel-search {
|
|
padding: calc(6px * var(--hud-scale)) calc(8px * var(--hud-scale));
|
|
border-bottom: 1px solid var(--hud-line);
|
|
}
|
|
|
|
.layer-panel-search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(5px * var(--hud-scale));
|
|
padding: calc(5px * var(--hud-scale)) calc(8px * var(--hud-scale));
|
|
border: 1px solid rgba(201, 225, 247, 0.14);
|
|
border-radius: calc(8px * var(--hud-scale));
|
|
background: rgba(255, 255, 255, 0.04);
|
|
transition: border-color 0.18s ease;
|
|
box-sizing: border-box;
|
|
height: calc(38px * var(--hud-scale));
|
|
}
|
|
|
|
.layer-panel-search-box:focus-within {
|
|
border-color: rgba(201, 225, 247, 0.28);
|
|
}
|
|
|
|
.layer-panel-search-icon {
|
|
flex-shrink: 0;
|
|
color: var(--hud-text-soft);
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layer-panel-search-icon.material-symbols-rounded {
|
|
font-size: calc(20px * var(--hud-scale));
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
|
}
|
|
|
|
.layer-panel-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--hud-text);
|
|
font-size: calc(0.78rem * var(--hud-scale));
|
|
line-height: 1.4;
|
|
outline: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.layer-panel-search-input::placeholder {
|
|
color: var(--hud-text-soft);
|
|
}
|
|
|
|
/* ── Empty search state ───────────────────────────────────────── */
|
|
|
|
.layer-panel-empty {
|
|
padding: calc(12px * var(--hud-scale)) calc(10px * var(--hud-scale));
|
|
color: var(--hud-text-soft);
|
|
font-size: calc(0.78rem * var(--hud-scale));
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Collapsible body ─────────────────────────────────────────── */
|
|
|
|
.layer-panel-body {
|
|
overflow: hidden;
|
|
max-height: 600px;
|
|
transition: max-height 0.24s ease, opacity 0.18s ease;
|
|
opacity: 1;
|
|
}
|
|
|
|
.layer-panel--collapsed .layer-panel-body {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ── Layer rows ───────────────────────────────────────────────── */
|
|
|
|
.layer-panel-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(5 * (56px * var(--hud-scale)));
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(160, 186, 216, 0.34) transparent;
|
|
}
|
|
|
|
.layer-panel-list::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.layer-panel-list::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.layer-panel-list::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, rgba(210, 225, 242, 0.2), rgba(126, 154, 185, 0.28));
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.layer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(8px * var(--hud-scale));
|
|
padding: calc(9px * var(--hud-scale)) calc(10px * var(--hud-scale));
|
|
border-bottom: 1px solid var(--hud-line);
|
|
transition: background 0.14s ease;
|
|
min-height: calc(56px * var(--hud-scale));
|
|
}
|
|
|
|
.layer-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.layer-row:hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.layer-row-icon {
|
|
flex-shrink: 0;
|
|
font-size: calc(15px * var(--hud-scale));
|
|
color: var(--hud-text-soft);
|
|
line-height: 1;
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
|
transition: color 0.18s ease;
|
|
}
|
|
|
|
/* Icon brightens when layer is active */
|
|
.layer-row:has(.layer-row-toggle.active) .layer-row-icon {
|
|
color: var(--hud-accent);
|
|
}
|
|
|
|
.layer-row-copy {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(1px * var(--hud-scale));
|
|
}
|
|
|
|
.layer-row-label {
|
|
color: var(--hud-text);
|
|
font-size: calc(0.82rem * var(--hud-scale));
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.18s ease;
|
|
}
|
|
|
|
.layer-row:has(.layer-row-toggle.active) .layer-row-label {
|
|
color: var(--hud-title);
|
|
}
|
|
|
|
.layer-row-meta {
|
|
color: var(--hud-text-soft);
|
|
font-size: calc(0.58rem * var(--hud-scale));
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ── Toggle switch ────────────────────────────────────────────── */
|
|
|
|
.layer-row-toggle {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: calc(34px * var(--hud-scale));
|
|
height: calc(20px * var(--hud-scale));
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: opacity 0.18s ease;
|
|
}
|
|
|
|
.layer-row-toggle-track {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(215, 229, 242, 0.12);
|
|
transition: background 0.18s ease, border-color 0.18s ease;
|
|
}
|
|
|
|
.layer-row-toggle:disabled {
|
|
cursor: progress;
|
|
opacity: 1;
|
|
}
|
|
|
|
.layer-row-toggle.is-disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.layer-row:has(.layer-row-toggle.is-disabled) .layer-row-label,
|
|
.layer-row:has(.layer-row-toggle.is-disabled) .layer-row-icon {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Thumb */
|
|
.layer-row-toggle-track::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(2px * var(--hud-scale));
|
|
left: calc(2px * var(--hud-scale));
|
|
width: calc(14px * var(--hud-scale));
|
|
height: calc(14px * var(--hud-scale));
|
|
border-radius: 50%;
|
|
background: #c8d8ea;
|
|
box-shadow: 0 2px 6px rgba(1, 8, 18, 0.3);
|
|
transition: transform 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.layer-row-toggle.is-loading .layer-row-toggle-track {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(104, 147, 221, 0.38),
|
|
rgba(143, 185, 255, 0.72),
|
|
rgba(104, 147, 221, 0.38)
|
|
);
|
|
background-size: 180% 100%;
|
|
border-color: rgba(223, 236, 252, 0.28);
|
|
animation: layer-toggle-loading-track 1.2s linear infinite;
|
|
}
|
|
|
|
.layer-row-toggle.is-loading .layer-row-toggle-track::after {
|
|
background: #f0f6ff;
|
|
transform: translateX(calc(7px * var(--hud-scale)));
|
|
animation: layer-toggle-loading-thumb 1s ease-in-out infinite;
|
|
}
|
|
|
|
/* Active (ON) state */
|
|
.layer-row-toggle.active .layer-row-toggle-track {
|
|
background: linear-gradient(180deg, rgba(143, 185, 255, 0.72), rgba(104, 147, 221, 0.78));
|
|
border-color: rgba(223, 236, 252, 0.28);
|
|
}
|
|
|
|
.layer-row-toggle.active .layer-row-toggle-track::after {
|
|
background: #f0f6ff;
|
|
transform: translateX(calc(14px * var(--hud-scale)));
|
|
}
|
|
|
|
@keyframes layer-toggle-loading-track {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
100% {
|
|
background-position: 180% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes layer-toggle-loading-thumb {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 2px 6px rgba(1, 8, 18, 0.3), 0 0 0 rgba(174, 205, 255, 0.18);
|
|
}
|
|
50% {
|
|
box-shadow: 0 2px 6px rgba(1, 8, 18, 0.3), 0 0 calc(10px * var(--hud-scale)) rgba(174, 205, 255, 0.42);
|
|
}
|
|
}
|
|
|
|
/* Layout-expanded: layer panel slides off with .earth-left-column — no
|
|
individual rule needed since the whole column translates together. */
|
|
|
|
.layout-mode-mobile .hud-panel-layers {
|
|
position: fixed;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: calc(88px + var(--safe-bottom));
|
|
width: auto;
|
|
max-height: min(60vh, 520px);
|
|
margin-top: 0;
|
|
z-index: 220;
|
|
transform: translateY(calc(100% + 28px));
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 0.24s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.layout-mode-mobile .hud-panel-layers.is-mobile-open {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.layout-mode-mobile .layer-panel-body {
|
|
max-height: min(52vh, 460px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.layout-mode-mobile .layer-panel-list {
|
|
max-height: none;
|
|
overflow-y: visible;
|
|
}
|