261 lines
6.8 KiB
CSS
261 lines
6.8 KiB
CSS
/* layer-panel.css — layer toggle panel (below brand, in left column) */
|
|
|
|
.hud-panel-layers {
|
|
/* Lives inside .earth-left-column — position is relative via column rule */
|
|
border-radius: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
margin-top: calc(6px * 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-title);
|
|
font-size: calc(0.82rem * var(--hud-scale));
|
|
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;
|
|
width: calc(22px * var(--hud-scale));
|
|
height: calc(22px * var(--hud-scale));
|
|
min-width: calc(22px * var(--hud-scale));
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: calc(4px * var(--hud-scale));
|
|
background: transparent;
|
|
color: var(--hud-text-muted);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background 0.14s ease, color 0.14s ease;
|
|
}
|
|
|
|
.layer-panel-btn:hover {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
color: var(--hud-text);
|
|
}
|
|
|
|
.layer-panel-btn .material-symbols-rounded {
|
|
font-size: calc(14px * var(--hud-scale));
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
transition: transform 0.22s ease;
|
|
}
|
|
|
|
/* Chevron rotates when collapsed */
|
|
.layer-panel--collapsed .layer-panel-btn .material-symbols-rounded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* ── Search bar ───────────────────────────────────────────────── */
|
|
|
|
.layer-panel-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(5px * var(--hud-scale));
|
|
padding: calc(6px * var(--hud-scale)) calc(10px * var(--hud-scale));
|
|
border-bottom: 1px solid var(--hud-line);
|
|
}
|
|
|
|
.layer-panel-search-icon {
|
|
flex-shrink: 0;
|
|
font-size: calc(14px * 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-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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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)));
|
|
}
|
|
|
|
/* Layout-expanded: layer panel slides off with .earth-left-column — no
|
|
individual rule needed since the whole column translates together. */
|