282 lines
7.4 KiB
CSS
282 lines
7.4 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: 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：展开时朝上（可折叠），折叠时朝下（可展开） */
|
||
.layer-panel-btn .material-symbols-rounded {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.layer-panel--collapsed .layer-panel-btn .material-symbols-rounded {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
/* ── 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;
|
||
}
|
||
|
||
.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. */
|