feat:themes, tactilea codec
This commit is contained in:
lenn
@@ -39,7 +39,7 @@
|
||||
export let matrixRows = 12;
|
||||
export let matrixCols = 7;
|
||||
export let rangeMin = 0;
|
||||
export let rangeMax = 5000;
|
||||
export let rangeMax = 16000;
|
||||
export let colorMapPreset: PressureColorMapPreset = "emerald";
|
||||
export let colorMapOptions: HudColorMapOption[] = [];
|
||||
export let replaySectionLabel = "";
|
||||
@@ -193,7 +193,7 @@
|
||||
</div>
|
||||
|
||||
<div class="canvas-wrap">
|
||||
{#key `${matrixRows}x${matrixCols}`}
|
||||
{#key `${matrixRows}x${matrixCols}:${colorMapPreset}`}
|
||||
<PressureMatrixViewer
|
||||
{pressureMatrix}
|
||||
{matrixRows}
|
||||
@@ -351,12 +351,17 @@
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 0.72rem;
|
||||
border: 1px solid rgb(101 133 152 / 0.2);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.2);
|
||||
background:
|
||||
linear-gradient(170deg, rgb(8 12 16 / 0.86) 0%, rgb(0 0 0 / 0.96) 58%, rgb(6 10 14 / 0.9) 100%),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.04), transparent 48%);
|
||||
linear-gradient(
|
||||
170deg,
|
||||
rgb(var(--hud-surface-rgb) / 0.86) 0%,
|
||||
rgb(var(--hud-surface-deep-rgb) / 0.96) 58%,
|
||||
rgb(var(--hud-surface-alt-rgb) / 0.9) 100%
|
||||
),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.04), transparent 48%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(175 216 240 / 0.08),
|
||||
inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
inset 0 -36px 72px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
@@ -390,16 +395,16 @@
|
||||
min-width: 0;
|
||||
max-inline-size: min(22rem, 62%);
|
||||
padding: 0.3rem 0.5rem 0.35rem;
|
||||
border: 1px solid rgb(112 146 166 / 0.2);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.2);
|
||||
border-radius: 0.45rem;
|
||||
background: rgb(2 8 12 / 0.45);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
margin: 0;
|
||||
font-size: 0.56rem;
|
||||
color: rgb(148 171 189 / 0.8);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
@@ -407,7 +412,7 @@
|
||||
h2 {
|
||||
margin: 0.08rem 0 0;
|
||||
font-size: clamp(0.75rem, 1.1vw, 0.92rem);
|
||||
color: rgb(222 241 255 / 0.96);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
letter-spacing: 0.03em;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
@@ -416,30 +421,30 @@
|
||||
.meta-hint {
|
||||
margin: 0.09rem 0 0;
|
||||
font-size: 0.62rem;
|
||||
color: rgb(142 165 183 / 0.76);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.76);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.runtime-status {
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
border: 1px solid rgb(95 128 149 / 0.35);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.35);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.66rem;
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgb(150 174 194 / 0.9);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.9);
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
background: rgb(3 10 15 / 0.62);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.62);
|
||||
}
|
||||
|
||||
.runtime-status.is-ok {
|
||||
color: rgb(204 248 184 / 0.94);
|
||||
color: rgb(var(--hud-lime-rgb) / 0.94);
|
||||
}
|
||||
|
||||
.runtime-status.is-warn {
|
||||
color: rgb(255 205 188 / 0.92);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.92);
|
||||
}
|
||||
|
||||
.canvas-wrap {
|
||||
@@ -533,15 +538,15 @@
|
||||
pointer-events: auto;
|
||||
display: grid;
|
||||
gap: 0.52rem;
|
||||
border: 1px solid rgb(95 136 159 / 0.34);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
|
||||
border-radius: 0.66rem;
|
||||
padding: 0.66rem 0.72rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(8 14 19 / 0.86), rgb(4 8 12 / 0.8)),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.07), transparent 56%);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.86), rgb(var(--hud-surface-deep-rgb) / 0.8)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.07), transparent 56%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(183 218 239 / 0.08),
|
||||
0 0 18px rgb(62 232 255 / 0.1);
|
||||
inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
0 0 18px rgb(var(--hud-glow-rgb) / 0.1);
|
||||
}
|
||||
|
||||
.replay-floating-panel.is-right {
|
||||
@@ -582,24 +587,24 @@
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(152 185 206 / 0.86);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.86);
|
||||
}
|
||||
|
||||
.replay-panel-file {
|
||||
font-size: 0.73rem;
|
||||
letter-spacing: 0.03em;
|
||||
color: rgb(221 241 255 / 0.94);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.94);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.replay-panel-frame {
|
||||
border: 1px solid rgb(133 255 68 / 0.36);
|
||||
border: 1px solid rgb(var(--hud-lime-rgb) / 0.36);
|
||||
border-radius: 999px;
|
||||
padding: 0.16rem 0.52rem;
|
||||
background: rgb(17 28 15 / 0.64);
|
||||
color: rgb(204 255 178 / 0.94);
|
||||
background: rgb(var(--hud-surface-alt-rgb) / 0.64);
|
||||
color: rgb(var(--hud-lime-rgb) / 0.94);
|
||||
font-size: 0.67rem;
|
||||
letter-spacing: 0.07em;
|
||||
white-space: nowrap;
|
||||
@@ -608,10 +613,10 @@
|
||||
.replay-close-btn {
|
||||
inline-size: 1.82rem;
|
||||
block-size: 1.82rem;
|
||||
border: 1px solid rgb(255 98 76 / 0.44);
|
||||
border: 1px solid rgb(var(--hud-orange-rgb) / 0.44);
|
||||
border-radius: 0.32rem;
|
||||
background: rgb(24 10 12 / 0.88);
|
||||
color: rgb(255 210 203 / 0.96);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.88);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.96);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
display: grid;
|
||||
@@ -624,9 +629,9 @@
|
||||
}
|
||||
|
||||
.replay-close-btn:hover {
|
||||
border-color: rgb(255 132 115 / 0.66);
|
||||
color: rgb(255 234 228 / 0.98);
|
||||
box-shadow: 0 0 12px rgb(255 91 63 / 0.2);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.66);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
box-shadow: 0 0 12px rgb(var(--hud-orange-rgb) / 0.2);
|
||||
}
|
||||
|
||||
.replay-panel-controls {
|
||||
@@ -643,11 +648,11 @@
|
||||
|
||||
.replay-action-btn {
|
||||
min-block-size: 1.82rem;
|
||||
border: 1px solid rgb(62 232 255 / 0.36);
|
||||
border: 1px solid rgb(var(--hud-cyan-rgb) / 0.36);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.66rem;
|
||||
background: rgb(8 19 25 / 0.9);
|
||||
color: rgb(225 246 255 / 0.96);
|
||||
background: rgb(var(--hud-surface-alt-rgb) / 0.9);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
@@ -657,19 +662,19 @@
|
||||
}
|
||||
|
||||
.replay-action-btn:hover {
|
||||
border-color: rgb(116 245 255 / 0.58);
|
||||
box-shadow: 0 0 10px rgb(62 232 255 / 0.14);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.58);
|
||||
box-shadow: 0 0 10px rgb(var(--hud-cyan-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.replay-action-btn.is-stop {
|
||||
border-color: rgb(255 91 63 / 0.44);
|
||||
color: rgb(255 223 214 / 0.94);
|
||||
background: rgb(27 12 10 / 0.86);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.44);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.94);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.86);
|
||||
}
|
||||
|
||||
.replay-action-btn.is-stop:hover {
|
||||
border-color: rgb(255 124 101 / 0.64);
|
||||
box-shadow: 0 0 10px rgb(255 91 63 / 0.18);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.64);
|
||||
box-shadow: 0 0 10px rgb(var(--hud-orange-rgb) / 0.18);
|
||||
}
|
||||
|
||||
.replay-speed-select,
|
||||
@@ -678,15 +683,15 @@
|
||||
align-items: center;
|
||||
gap: 0.36rem;
|
||||
min-block-size: 1.92rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.32);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
|
||||
border-radius: 999px;
|
||||
padding: 0.16rem 0.2rem 0.16rem 0.48rem;
|
||||
background: rgb(8 15 21 / 0.78);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.78);
|
||||
}
|
||||
|
||||
.replay-speed-select span,
|
||||
.replay-progress-slider span {
|
||||
color: rgb(154 176 194 / 0.84);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.84);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -694,11 +699,11 @@
|
||||
}
|
||||
|
||||
.replay-speed-select select {
|
||||
border: 1px solid rgb(95 132 158 / 0.34);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
|
||||
border-radius: 999px;
|
||||
padding: 0.22rem 0.48rem;
|
||||
background: rgb(4 11 16 / 0.88);
|
||||
color: rgb(216 235 248 / 0.96);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.88);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.05em;
|
||||
outline: none;
|
||||
@@ -710,7 +715,7 @@
|
||||
|
||||
.replay-progress-slider input {
|
||||
inline-size: 100%;
|
||||
accent-color: rgb(133 255 68 / 0.92);
|
||||
accent-color: rgb(var(--hud-lime-rgb) / 0.92);
|
||||
}
|
||||
|
||||
.stage-bottom-overlay {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
export let matrixRows = 12;
|
||||
export let matrixCols = 7;
|
||||
export let rangeMin = 0;
|
||||
export let rangeMax = 5000;
|
||||
export let rangeMax = 16000;
|
||||
export let colorMapPreset: PressureColorMapPreset = "emerald";
|
||||
export let colorMapOptions: HudColorMapOption[] = [];
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
matrixRows = 12;
|
||||
matrixCols = 7;
|
||||
rangeMin = 0;
|
||||
rangeMax = 5000;
|
||||
rangeMax = 16000;
|
||||
colorMapPreset = "emerald";
|
||||
}
|
||||
|
||||
@@ -222,13 +222,13 @@
|
||||
gap: 0.9rem;
|
||||
inline-size: min(23rem, 100%);
|
||||
padding: 0.92rem 0.96rem 1rem;
|
||||
border: 1px solid rgb(88 132 116 / 0.3);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.3);
|
||||
border-radius: 0.82rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(6 18 14 / 0.92), rgb(4 10 9 / 0.88)),
|
||||
radial-gradient(circle at 100% 0, rgb(97 146 255 / 0.07), transparent 38%);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-deep-rgb) / 0.88)),
|
||||
radial-gradient(circle at 100% 0, rgb(var(--hud-info-rgb) / 0.07), transparent 38%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(184 236 206 / 0.08),
|
||||
inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
0 18px 46px rgb(0 0 0 / 0.28);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@@ -249,7 +249,7 @@
|
||||
.field-label,
|
||||
.live-note {
|
||||
margin: 0;
|
||||
color: rgb(157 206 181 / 0.8);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.8);
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@@ -257,7 +257,7 @@
|
||||
|
||||
h3 {
|
||||
margin: 0.12rem 0 0;
|
||||
color: rgb(237 248 241 / 0.98);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
@@ -266,7 +266,7 @@
|
||||
.config-hint,
|
||||
.section-note {
|
||||
margin: 0.14rem 0 0;
|
||||
color: rgb(142 182 164 / 0.78);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.78);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
@@ -275,9 +275,9 @@
|
||||
position: relative;
|
||||
inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
border: 1px solid rgb(82 122 106 / 0.32);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
|
||||
border-radius: 999px;
|
||||
background: rgb(4 12 9 / 0.72);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.72);
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@@ -288,7 +288,7 @@
|
||||
left: 50%;
|
||||
inline-size: 0.8rem;
|
||||
block-size: 1px;
|
||||
background: rgb(182 210 195 / 0.9);
|
||||
background: rgb(var(--hud-text-main-rgb) / 0.9);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@@ -304,9 +304,9 @@
|
||||
display: grid;
|
||||
gap: 0.62rem;
|
||||
padding: 0.76rem 0.8rem;
|
||||
border: 1px solid rgb(72 116 96 / 0.22);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.22);
|
||||
border-radius: 0.72rem;
|
||||
background: linear-gradient(180deg, rgb(7 15 12 / 0.76), rgb(5 10 8 / 0.64));
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.76), rgb(var(--hud-surface-deep-rgb) / 0.64));
|
||||
}
|
||||
|
||||
.section-head {
|
||||
@@ -331,11 +331,11 @@
|
||||
.preset-btn,
|
||||
.reset-btn,
|
||||
.palette-btn {
|
||||
border: 1px solid rgb(80 126 105 / 0.28);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.28);
|
||||
border-radius: 999px;
|
||||
padding: 0.38rem 0.72rem;
|
||||
background: rgb(8 19 15 / 0.76);
|
||||
color: rgb(191 219 206 / 0.92);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.76);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.92);
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
cursor: pointer;
|
||||
@@ -347,10 +347,10 @@
|
||||
}
|
||||
|
||||
.preset-btn.is-active {
|
||||
border-color: rgb(98 201 149 / 0.48);
|
||||
background: linear-gradient(180deg, rgb(18 54 37 / 0.96), rgb(10 32 23 / 0.92));
|
||||
color: rgb(233 247 240 / 0.98);
|
||||
box-shadow: inset 0 1px 0 rgb(198 246 222 / 0.14), 0 0 16px rgb(63 184 120 / 0.14);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.48);
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92));
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.palette-btn {
|
||||
@@ -363,10 +363,10 @@
|
||||
}
|
||||
|
||||
.palette-btn.is-active {
|
||||
border-color: rgb(98 201 149 / 0.48);
|
||||
background: linear-gradient(180deg, rgb(18 54 37 / 0.96), rgb(10 32 23 / 0.92));
|
||||
color: rgb(233 247 240 / 0.98);
|
||||
box-shadow: inset 0 1px 0 rgb(198 246 222 / 0.14), 0 0 16px rgb(63 184 120 / 0.14);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.48);
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92));
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.palette-preview {
|
||||
@@ -405,26 +405,26 @@
|
||||
display: grid;
|
||||
gap: 0.38rem;
|
||||
padding: 0.58rem 0.64rem 0.66rem;
|
||||
border: 1px solid rgb(68 106 89 / 0.26);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
|
||||
border-radius: 0.58rem;
|
||||
background: linear-gradient(180deg, rgb(6 14 11 / 0.86), rgb(3 8 6 / 0.82));
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.86), rgb(var(--hud-surface-deep-rgb) / 0.82));
|
||||
}
|
||||
|
||||
.field-card input {
|
||||
inline-size: 100%;
|
||||
border: 1px solid rgb(82 131 109 / 0.28);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.28);
|
||||
border-radius: 0.46rem;
|
||||
padding: 0.55rem 0.62rem;
|
||||
background: rgb(7 16 12 / 0.92);
|
||||
color: rgb(238 246 241 / 0.98);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.92);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
font: inherit;
|
||||
font-size: 0.86rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-card input:focus {
|
||||
border-color: rgb(97 201 147 / 0.54);
|
||||
box-shadow: 0 0 0 1px rgb(97 201 147 / 0.24);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.54);
|
||||
box-shadow: 0 0 0 1px rgb(var(--hud-lime-rgb) / 0.24);
|
||||
}
|
||||
|
||||
.config-foot {
|
||||
@@ -435,11 +435,11 @@
|
||||
}
|
||||
|
||||
.live-note {
|
||||
color: rgb(142 182 164 / 0.8);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.8);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: linear-gradient(180deg, rgb(10 21 17 / 0.88), rgb(6 12 10 / 0.84));
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.88), rgb(var(--hud-surface-deep-rgb) / 0.84));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@@ -377,8 +377,8 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 30% 12%, rgb(62 232 255 / 0.08), transparent 42%),
|
||||
radial-gradient(circle at 84% 10%, rgb(133 255 68 / 0.07), transparent 40%),
|
||||
radial-gradient(circle at 30% 12%, rgb(var(--hud-glow-rgb) / 0.08), transparent 42%),
|
||||
radial-gradient(circle at 84% 10%, rgb(var(--hud-glow-alt-rgb) / 0.07), transparent 40%),
|
||||
rgb(0 0 0 / 0.6);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: clamp(0.65rem, 2.4vw, 1.25rem);
|
||||
@@ -392,14 +392,19 @@
|
||||
block-size: min(720px, 100%);
|
||||
max-inline-size: calc(100% - 2 * clamp(0.65rem, 2.4vw, 1.25rem));
|
||||
max-block-size: calc(100% - 2 * clamp(0.65rem, 2.4vw, 1.25rem));
|
||||
border: 1px solid rgb(95 132 158 / 0.34);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
|
||||
border-radius: 0.72rem;
|
||||
background:
|
||||
linear-gradient(172deg, rgb(8 12 16 / 0.96) 0%, rgb(4 8 12 / 0.96) 52%, rgb(3 6 10 / 0.98) 100%),
|
||||
radial-gradient(circle at 18% 0, rgb(62 232 255 / 0.06), transparent 42%),
|
||||
radial-gradient(circle at 90% 0, rgb(133 255 68 / 0.05), transparent 38%);
|
||||
linear-gradient(
|
||||
172deg,
|
||||
rgb(var(--hud-surface-rgb) / 0.96) 0%,
|
||||
rgb(var(--hud-surface-deep-rgb) / 0.96) 52%,
|
||||
rgb(var(--hud-surface-deep-rgb) / 0.98) 100%
|
||||
),
|
||||
radial-gradient(circle at 18% 0, rgb(var(--hud-glow-rgb) / 0.06), transparent 42%),
|
||||
radial-gradient(circle at 90% 0, rgb(var(--hud-glow-alt-rgb) / 0.05), transparent 38%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(192 221 240 / 0.08),
|
||||
inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
0 22px 50px rgb(0 0 0 / 0.52);
|
||||
overflow: hidden;
|
||||
transform: translate3d(var(--explorer-drag-x, 0), var(--explorer-drag-y, 0), 0);
|
||||
@@ -411,8 +416,8 @@
|
||||
justify-content: space-between;
|
||||
gap: 0.65rem;
|
||||
padding: 0.72rem 0.85rem 0.65rem;
|
||||
border-bottom: 1px solid rgb(95 132 158 / 0.28);
|
||||
background: linear-gradient(180deg, rgb(16 25 32 / 0.6), transparent);
|
||||
border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.28);
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.6), transparent);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
@@ -434,12 +439,12 @@
|
||||
block-size: 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--hud-lime);
|
||||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.14);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.explorer-title {
|
||||
margin: 0;
|
||||
color: #ecf9ff;
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -448,10 +453,10 @@
|
||||
.header-close-btn {
|
||||
inline-size: 2rem;
|
||||
block-size: 1.64rem;
|
||||
border: 1px solid rgb(98 131 156 / 0.36);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.36);
|
||||
border-radius: 0.36rem;
|
||||
background: rgb(8 13 18 / 0.9);
|
||||
color: rgb(174 219 244 / 0.9);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.9);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.9);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
@@ -461,8 +466,8 @@
|
||||
}
|
||||
|
||||
.header-close-btn:hover {
|
||||
border-color: rgb(255 91 63 / 0.6);
|
||||
color: rgb(255 208 198 / 0.96);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.6);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.96);
|
||||
}
|
||||
|
||||
.explorer-toolbar {
|
||||
@@ -470,17 +475,17 @@
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.58rem;
|
||||
padding: 0.62rem 0.85rem;
|
||||
border-bottom: 1px solid rgb(95 132 158 / 0.22);
|
||||
background: linear-gradient(90deg, rgb(62 232 255 / 0.03), transparent 44%, rgb(133 255 68 / 0.02));
|
||||
border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.22);
|
||||
background: linear-gradient(90deg, rgb(var(--hud-glow-rgb) / 0.03), transparent 44%, rgb(var(--hud-glow-alt-rgb) / 0.02));
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
min-block-size: 1.95rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.36);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.36);
|
||||
border-radius: 0.42rem;
|
||||
padding: 0.25rem 0.65rem;
|
||||
background: rgb(9 16 21 / 0.86);
|
||||
color: rgb(213 233 245 / 0.94);
|
||||
background: rgb(var(--hud-surface-alt-rgb) / 0.86);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.94);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
@@ -491,8 +496,8 @@
|
||||
}
|
||||
|
||||
.tool-btn:hover:not(:disabled) {
|
||||
border-color: rgb(62 232 255 / 0.46);
|
||||
box-shadow: inset 0 0 0 1px rgb(178 216 239 / 0.08);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.46);
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08);
|
||||
}
|
||||
|
||||
.tool-btn:disabled {
|
||||
@@ -506,14 +511,14 @@
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.32);
|
||||
border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
|
||||
border-radius: 0.42rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
background: rgb(8 14 18 / 0.76);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.76);
|
||||
}
|
||||
|
||||
.path-label {
|
||||
color: rgb(140 163 181 / 0.84);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.84);
|
||||
font-size: 0.63rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -525,7 +530,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgb(225 243 255 / 0.97);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.97);
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
@@ -306,15 +306,25 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
gap: clamp(0.5rem, 1.2vw, 0.85rem);
|
||||
--panel-line: rgb(var(--hud-border-rgb) / 0.34);
|
||||
--panel-line-soft: rgb(var(--hud-border-rgb) / 0.22);
|
||||
--panel-line-strong: rgb(var(--hud-border-strong-rgb) / 0.42);
|
||||
--panel-surface: rgb(var(--hud-surface-rgb) / 0.7);
|
||||
--panel-surface-strong: rgb(var(--hud-surface-alt-rgb) / 0.84);
|
||||
--panel-surface-deep: rgb(var(--hud-surface-deep-rgb) / 0.9);
|
||||
--panel-text: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
--panel-text-dim: rgb(var(--hud-text-dim-rgb) / 0.84);
|
||||
--panel-glow: rgb(var(--hud-glow-rgb) / 0.12);
|
||||
--panel-glow-alt: rgb(var(--hud-glow-alt-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgb(108 143 166 / 0.22);
|
||||
border-bottom: 1px solid var(--panel-line-soft);
|
||||
padding: 0.05rem 0.1rem 0.55rem 0.1rem;
|
||||
background: linear-gradient(180deg, rgb(15 22 28 / 0.32), transparent);
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.32), transparent);
|
||||
}
|
||||
|
||||
.title-cluster {
|
||||
@@ -328,15 +338,15 @@
|
||||
inline-size: 0.52rem;
|
||||
block-size: 0.52rem;
|
||||
border-radius: 50%;
|
||||
background: rgb(133 255 68 / 0.95);
|
||||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.14);
|
||||
background: rgb(var(--hud-lime-rgb) / 0.95);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
color: #f0fbff;
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -359,10 +369,10 @@
|
||||
justify-content: center;
|
||||
inline-size: 1.8rem;
|
||||
block-size: 1.52rem;
|
||||
border: 1px solid rgb(82 120 146 / 0.36);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 0.34rem;
|
||||
color: rgb(179 245 255 / 0.92);
|
||||
background: rgb(8 12 16 / 0.82);
|
||||
color: rgb(var(--hud-cyan-rgb) / 0.92);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.82);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 200ms ease,
|
||||
@@ -381,27 +391,27 @@
|
||||
}
|
||||
|
||||
.window-btn:hover {
|
||||
border-color: rgb(62 232 255 / 0.42);
|
||||
background: rgb(14 20 26 / 0.9);
|
||||
color: #f3fdff;
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.42);
|
||||
background: rgb(var(--hud-surface-alt-rgb) / 0.9);
|
||||
color: rgb(var(--hud-text-main-rgb) / 1);
|
||||
}
|
||||
|
||||
.window-btn.is-maximized {
|
||||
border-color: rgb(133 255 68 / 0.5);
|
||||
color: rgb(211 255 190 / 0.92);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.5);
|
||||
color: rgb(var(--hud-lime-rgb) / 0.92);
|
||||
}
|
||||
|
||||
.window-btn.is-close:hover {
|
||||
border-color: rgb(255 91 63 / 0.62);
|
||||
background: rgb(27 11 10 / 0.9);
|
||||
color: rgb(255 200 188 / 0.96);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.62);
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.92);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.96);
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding: 0 0.1rem;
|
||||
background: linear-gradient(90deg, rgb(62 232 255 / 0.02), transparent 45%, rgb(133 255 68 / 0.015));
|
||||
background: linear-gradient(90deg, rgb(var(--hud-glow-rgb) / 0.02), transparent 45%, rgb(var(--hud-glow-alt-rgb) / 0.015));
|
||||
}
|
||||
|
||||
.control-main-row {
|
||||
@@ -416,32 +426,32 @@
|
||||
align-items: center;
|
||||
gap: 0.42rem;
|
||||
min-block-size: 2rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.3);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.62rem 0.2rem 0.36rem;
|
||||
background: rgb(10 16 20 / 0.68);
|
||||
background: var(--panel-surface);
|
||||
}
|
||||
|
||||
.state-dot {
|
||||
inline-size: 0.55rem;
|
||||
block-size: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: rgb(143 165 186 / 0.92);
|
||||
box-shadow: 0 0 0 2px rgb(143 165 186 / 0.14);
|
||||
background: rgb(var(--hud-text-dim-rgb) / 0.92);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-text-dim-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.state-dot.ok {
|
||||
background: var(--hud-lime);
|
||||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.16);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.16);
|
||||
}
|
||||
|
||||
.state-dot.warn {
|
||||
background: var(--hud-orange);
|
||||
box-shadow: 0 0 0 2px rgb(255 91 63 / 0.16);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-orange-rgb) / 0.16);
|
||||
}
|
||||
|
||||
.state-label {
|
||||
color: rgb(154 176 194 / 0.84);
|
||||
color: var(--panel-text-dim);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -449,7 +459,7 @@
|
||||
}
|
||||
|
||||
.state-value {
|
||||
color: #ecf8ff;
|
||||
color: var(--panel-text);
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
@@ -461,10 +471,10 @@
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
min-block-size: 2rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.3);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.18rem 0.2rem 0.18rem 0.56rem;
|
||||
background: rgb(10 16 20 / 0.7);
|
||||
background: var(--panel-surface);
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
@@ -475,7 +485,7 @@
|
||||
}
|
||||
|
||||
.serial-tag {
|
||||
color: rgb(154 176 194 / 0.84);
|
||||
color: var(--panel-text-dim);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -487,11 +497,11 @@
|
||||
appearance: none;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 7rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.32);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 1.5rem 0.3rem 0.6rem;
|
||||
background: rgb(4 11 16 / 0.84);
|
||||
color: #d5ebfb;
|
||||
background: rgb(var(--hud-surface-deep-rgb) / 0.84);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.92);
|
||||
font-size: 0.84rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
@@ -502,12 +512,12 @@
|
||||
}
|
||||
|
||||
.serial-select-input:hover {
|
||||
border-color: rgb(62 232 255 / 0.36);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.36);
|
||||
}
|
||||
|
||||
.serial-select-input:focus-visible {
|
||||
border-color: rgb(62 232 255 / 0.5);
|
||||
box-shadow: 0 0 0 2px rgb(62 232 255 / 0.14);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.5);
|
||||
box-shadow: 0 0 0 2px rgb(var(--hud-cyan-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.serial-select-caret {
|
||||
@@ -516,8 +526,8 @@
|
||||
inset-block-start: 50%;
|
||||
inline-size: 0.42rem;
|
||||
block-size: 0.42rem;
|
||||
border-right: 1px solid rgb(153 189 214 / 0.82);
|
||||
border-bottom: 1px solid rgb(153 189 214 / 0.82);
|
||||
border-right: 1px solid rgb(var(--hud-text-main-rgb) / 0.82);
|
||||
border-bottom: 1px solid rgb(var(--hud-text-main-rgb) / 0.82);
|
||||
transform: translateY(-64%) rotate(45deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -527,13 +537,13 @@
|
||||
align-items: center;
|
||||
gap: 0.36rem;
|
||||
min-block-size: 2rem;
|
||||
border: 1px solid rgb(95 132 158 / 0.34);
|
||||
border: 1px solid var(--panel-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.24rem 0.64rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(11 18 24 / 0.92), rgb(7 12 17 / 0.88)),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.1), transparent 58%);
|
||||
color: rgb(214 236 248 / 0.96);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-rgb) / 0.88)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 58%);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
@@ -556,10 +566,10 @@
|
||||
}
|
||||
|
||||
.refresh-btn:hover:not(:disabled) {
|
||||
border-color: rgb(62 232 255 / 0.44);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.44);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(167 218 252 / 0.07),
|
||||
0 0 10px rgb(62 232 255 / 0.1);
|
||||
inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.07),
|
||||
0 0 10px rgb(var(--hud-glow-rgb) / 0.1);
|
||||
}
|
||||
|
||||
.refresh-btn:disabled {
|
||||
@@ -572,13 +582,13 @@
|
||||
align-items: center;
|
||||
gap: 0.42rem;
|
||||
min-block-size: 2rem;
|
||||
border: 1px solid rgb(133 255 68 / 0.4);
|
||||
border: 1px solid rgb(var(--hud-lime-rgb) / 0.4);
|
||||
border-radius: 999px;
|
||||
padding: 0.24rem 0.76rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(24 33 22 / 0.96), rgb(12 19 12 / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(133 255 68 / 0.12), transparent 58%);
|
||||
color: #f2ffe8;
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-alt-rgb) / 0.12), transparent 58%);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
@@ -591,10 +601,10 @@
|
||||
}
|
||||
|
||||
.connect-btn:hover:not(:disabled) {
|
||||
border-color: rgb(170 255 121 / 0.62);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.62);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(231 255 214 / 0.08),
|
||||
0 0 12px rgb(133 255 68 / 0.14);
|
||||
inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.08),
|
||||
0 0 12px rgb(var(--hud-glow-alt-rgb) / 0.14);
|
||||
}
|
||||
|
||||
.connect-btn:disabled {
|
||||
@@ -603,19 +613,19 @@
|
||||
}
|
||||
|
||||
.connect-btn.is-busy {
|
||||
border-color: rgb(255 91 63 / 0.48);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.48);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(38 18 15 / 0.96), rgb(23 10 10 / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(255 91 63 / 0.12), transparent 58%);
|
||||
color: rgb(255 223 217 / 0.96);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-deep-rgb) / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-orange-rgb) / 0.12), transparent 58%);
|
||||
color: rgb(var(--hud-orange-rgb) / 0.96);
|
||||
}
|
||||
|
||||
.connect-btn.is-connected {
|
||||
border-color: rgb(62 232 255 / 0.46);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.46);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(10 28 32 / 0.96), rgb(6 15 18 / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.14), transparent 58%);
|
||||
color: rgb(227 251 255 / 0.98);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-cyan-rgb) / 0.14), transparent 58%);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.98);
|
||||
}
|
||||
|
||||
.connect-btn-indicator {
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
export let matrixRows = 12;
|
||||
export let matrixCols = 7;
|
||||
export let rangeMin = 0;
|
||||
export let rangeMax = 5000;
|
||||
export let rangeMax = 16000;
|
||||
export let colorMapPreset: PressureColorMapPreset = "emerald";
|
||||
|
||||
let viewerEl: HTMLDivElement | undefined;
|
||||
@@ -34,7 +34,7 @@
|
||||
let overlayEl: HTMLCanvasElement | undefined;
|
||||
let stats: ViewerStats = { total: 0, max: 0, avg: 0 };
|
||||
|
||||
const RAW_DATA_MAX = 5000;
|
||||
const DEFAULT_RANGE_MAX = 16000;
|
||||
const BASE_MATRIX_SPAN = 24;
|
||||
const MATRIX_SPAN_GROWTH = 0.6;
|
||||
const MIN_MATRIX_SPAN = 24;
|
||||
@@ -64,7 +64,6 @@
|
||||
const MATRIX_ROTATION_Y = 0;
|
||||
|
||||
const labelVector = new THREE.Vector3();
|
||||
const whiteColor = new THREE.Color("#ffffff");
|
||||
$: resolvedColorPalette = pressureColorPalettes[colorMapPreset] ?? pressureColorPalettes.emerald;
|
||||
$: surfaceBaseColor = new THREE.Color(resolvedColorPalette.surfaceBase);
|
||||
$: surfaceLowColor = new THREE.Color(resolvedColorPalette.surfaceLow);
|
||||
@@ -75,6 +74,38 @@
|
||||
$: labelLowColor = new THREE.Color(resolvedColorPalette.labelLow);
|
||||
$: labelMidColor = new THREE.Color(resolvedColorPalette.labelMid);
|
||||
$: labelHighColor = new THREE.Color(resolvedColorPalette.labelHigh);
|
||||
$: sceneClearColor = new THREE.Color(resolvedColorPalette.uiTheme.bg30);
|
||||
$: sceneBoardColor = new THREE.Color(resolvedColorPalette.uiTheme.bg20);
|
||||
$: sceneGridCenterColor = new THREE.Color(resolvedColorPalette.surfaceMid);
|
||||
$: sceneGridLineColor = new THREE.Color(resolvedColorPalette.uiTheme.bg20);
|
||||
$: sceneAmbientLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.textMainRgb);
|
||||
$: sceneKeyLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowAltRgb);
|
||||
$: sceneAccentLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
|
||||
$: surfaceThemeAccentColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
|
||||
$: labelThemeAccentColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
|
||||
$: labelHighlightCss = colorToCss(surfaceHotColor);
|
||||
$: viewerThemeStyle = [
|
||||
`--matrix-bg-10: ${resolvedColorPalette.uiTheme.bg10}`,
|
||||
`--matrix-bg-20: ${resolvedColorPalette.uiTheme.bg20}`,
|
||||
`--matrix-bg-30: ${resolvedColorPalette.uiTheme.bg30}`,
|
||||
`--matrix-text-main-rgb: ${resolvedColorPalette.uiTheme.textMainRgb}`,
|
||||
`--matrix-text-dim-rgb: ${resolvedColorPalette.uiTheme.textDimRgb}`,
|
||||
`--matrix-border-rgb: ${resolvedColorPalette.uiTheme.borderRgb}`,
|
||||
`--matrix-border-strong-rgb: ${resolvedColorPalette.uiTheme.borderStrongRgb}`,
|
||||
`--matrix-surface-rgb: ${resolvedColorPalette.uiTheme.surfaceRgb}`,
|
||||
`--matrix-surface-alt-rgb: ${resolvedColorPalette.uiTheme.surfaceAltRgb}`,
|
||||
`--matrix-surface-deep-rgb: ${resolvedColorPalette.uiTheme.surfaceDeepRgb}`,
|
||||
`--matrix-glow-rgb: ${resolvedColorPalette.uiTheme.glowRgb}`,
|
||||
`--matrix-glow-alt-rgb: ${resolvedColorPalette.uiTheme.glowAltRgb}`
|
||||
].join("; ");
|
||||
|
||||
let rendererRef: THREE.WebGLRenderer | null = null;
|
||||
let boardMaterialRef: THREE.MeshBasicMaterial | null = null;
|
||||
let gridRef: THREE.GridHelper | null = null;
|
||||
let gridMaterialRef: THREE.Material | THREE.Material[] | null = null;
|
||||
let ambientLightRef: THREE.AmbientLight | null = null;
|
||||
let dirLightRef: THREE.DirectionalLight | null = null;
|
||||
let sideLightRef: THREE.DirectionalLight | null = null;
|
||||
|
||||
function sanitizeGridValue(value: number): number {
|
||||
return clamp(Math.round(Number.isFinite(value) ? value : 12), 1, 128);
|
||||
@@ -82,7 +113,7 @@
|
||||
|
||||
function sanitizeRangePair(minValue: number, maxValue: number): { min: number; max: number } {
|
||||
const resolvedMin = Math.round(Number.isFinite(minValue) ? minValue : 0);
|
||||
const resolvedMax = Math.max(Math.round(Number.isFinite(maxValue) ? maxValue : RAW_DATA_MAX), resolvedMin + 1);
|
||||
const resolvedMax = Math.max(Math.round(Number.isFinite(maxValue) ? maxValue : DEFAULT_RANGE_MAX), resolvedMin + 1);
|
||||
return { min: resolvedMin, max: resolvedMax };
|
||||
}
|
||||
|
||||
@@ -107,6 +138,10 @@
|
||||
return clamp((value - minValue) / Math.max(1, maxValue - minValue), 0, 1);
|
||||
}
|
||||
|
||||
function rgbTripletToThreeColor(rgbTriplet: string): THREE.Color {
|
||||
return new THREE.Color(`rgb(${rgbTriplet.replace(/\s+/g, ", ")})`);
|
||||
}
|
||||
|
||||
function surfaceColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
|
||||
const value = clamp(valueNormalized, 0, 1);
|
||||
let mapped: THREE.Color;
|
||||
@@ -122,14 +157,15 @@
|
||||
mapped = target.copy(surfaceMidColor).lerp(surfaceHighColor, t);
|
||||
}
|
||||
|
||||
const baseAccentStrength = (1 - smoothstep(0.12, 0.52, value)) * 0.34;
|
||||
const highlightStrength = smoothstep(0.82, 1, value) * 0.3;
|
||||
return mapped.lerp(surfaceHotColor, highlightStrength);
|
||||
return mapped.lerp(surfaceThemeAccentColor, baseAccentStrength).lerp(surfaceHotColor, highlightStrength);
|
||||
}
|
||||
|
||||
function glowColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
|
||||
const value = clamp(valueNormalized, 0, 1);
|
||||
const glowStrength = smoothstep(0.55, 1, value);
|
||||
return surfaceColorMap(value, target).lerp(whiteColor, glowStrength * 0.42);
|
||||
return surfaceColorMap(value, target).lerp(surfaceHotColor, glowStrength * 0.42);
|
||||
}
|
||||
|
||||
function labelColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
|
||||
@@ -147,8 +183,9 @@
|
||||
mapped = target.copy(labelMidColor).lerp(labelHighColor, t);
|
||||
}
|
||||
|
||||
const baseAccentStrength = (1 - smoothstep(0.16, 0.58, value)) * 0.46;
|
||||
const highlightStrength = smoothstep(0.8, 1, value) * 0.36;
|
||||
return mapped.lerp(whiteColor, highlightStrength);
|
||||
return mapped.lerp(labelThemeAccentColor, baseAccentStrength).lerp(surfaceHotColor, highlightStrength);
|
||||
}
|
||||
|
||||
function shapeHeightValue(valueNormalized: number): number {
|
||||
@@ -208,7 +245,8 @@
|
||||
|
||||
function copyExternalField(target: Float32Array, values: number[]): void {
|
||||
for (let index = 0; index < target.length; index += 1) {
|
||||
target[index] = clamp(values[index] ?? 0, 0, RAW_DATA_MAX);
|
||||
const value = Number(values[index] ?? 0);
|
||||
target[index] = Number.isFinite(value) ? value : 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -217,7 +255,7 @@
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round(clamp(rawValue, 0, Math.max(maxValue, RAW_DATA_MAX)));
|
||||
return Math.round(rawValue);
|
||||
}
|
||||
|
||||
function colorToCss(color: THREE.Color): string {
|
||||
@@ -228,6 +266,57 @@
|
||||
const t = index / 32;
|
||||
return colorToCss(labelColorMap(t, new THREE.Color()));
|
||||
});
|
||||
$: labelGlowPalette = Array.from({ length: 33 }, (_, index) => {
|
||||
const t = index / 32;
|
||||
return colorToCss(glowColorMap(t, new THREE.Color()));
|
||||
});
|
||||
|
||||
function applyGridTheme(grid: THREE.GridHelper, divisions: number): void {
|
||||
const colorAttribute = grid.geometry.getAttribute("color");
|
||||
if (!(colorAttribute instanceof THREE.BufferAttribute)) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let division = 0; division <= divisions; division += 1) {
|
||||
const lineColor = division === divisions / 2 ? sceneGridCenterColor : sceneGridLineColor;
|
||||
const vertexBase = division * 4;
|
||||
|
||||
for (let vertexOffset = 0; vertexOffset < 4; vertexOffset += 1) {
|
||||
colorAttribute.setXYZ(vertexBase + vertexOffset, lineColor.r, lineColor.g, lineColor.b);
|
||||
}
|
||||
}
|
||||
|
||||
colorAttribute.needsUpdate = true;
|
||||
}
|
||||
|
||||
function applySceneTheme(): void {
|
||||
if (!rendererRef || !boardMaterialRef || !gridRef || !gridMaterialRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
rendererRef.setClearColor(sceneClearColor, 1);
|
||||
boardMaterialRef.color.copy(sceneBoardColor);
|
||||
boardMaterialRef.needsUpdate = true;
|
||||
applyGridTheme(gridRef, matrixLayout.gridDivisions);
|
||||
|
||||
if (Array.isArray(gridMaterialRef)) {
|
||||
for (const material of gridMaterialRef) {
|
||||
material.transparent = true;
|
||||
material.opacity = 0.034;
|
||||
material.needsUpdate = true;
|
||||
}
|
||||
} else {
|
||||
gridMaterialRef.transparent = true;
|
||||
gridMaterialRef.opacity = 0.034;
|
||||
gridMaterialRef.needsUpdate = true;
|
||||
}
|
||||
|
||||
ambientLightRef?.color.copy(sceneAmbientLightColor);
|
||||
dirLightRef?.color.copy(sceneKeyLightColor);
|
||||
sideLightRef?.color.copy(sceneAccentLightColor);
|
||||
}
|
||||
|
||||
$: applySceneTheme();
|
||||
|
||||
onMount(() => {
|
||||
if (!viewerEl || !canvasEl || !overlayEl) {
|
||||
@@ -251,8 +340,9 @@
|
||||
alpha: true,
|
||||
powerPreference: "high-performance"
|
||||
});
|
||||
rendererRef = renderer;
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
||||
renderer.setClearColor(0x06080a, 1);
|
||||
renderer.setClearColor(sceneClearColor, 1);
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
@@ -277,11 +367,14 @@
|
||||
controls.target.set(CAMERA_TARGET_X, CAMERA_TARGET_Y, CAMERA_TARGET_Z);
|
||||
controls.enabled = false;
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.26);
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, 0.34);
|
||||
const ambientLight = new THREE.AmbientLight(sceneAmbientLightColor, 0.26);
|
||||
const dirLight = new THREE.DirectionalLight(sceneKeyLightColor, 0.34);
|
||||
dirLight.position.set(50, 100, 50);
|
||||
const sideLight = new THREE.DirectionalLight(0x7cffba, 0.16);
|
||||
const sideLight = new THREE.DirectionalLight(sceneAccentLightColor, 0.16);
|
||||
sideLight.position.set(-50, 50, -50);
|
||||
ambientLightRef = ambientLight;
|
||||
dirLightRef = dirLight;
|
||||
sideLightRef = sideLight;
|
||||
scene.add(ambientLight, dirLight, sideLight);
|
||||
|
||||
const matrixGroup = new THREE.Group();
|
||||
@@ -292,29 +385,33 @@
|
||||
const board = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(boardWidth + boardPadding * 2, boardDepth + boardPadding * 2),
|
||||
new THREE.MeshBasicMaterial({
|
||||
color: 0x05070a,
|
||||
color: sceneBoardColor,
|
||||
transparent: true,
|
||||
opacity: 0.12,
|
||||
toneMapped: false
|
||||
})
|
||||
);
|
||||
boardMaterialRef = board.material;
|
||||
board.rotation.x = -Math.PI / 2;
|
||||
board.position.y = -0.04;
|
||||
matrixGroup.add(board);
|
||||
|
||||
const grid = new THREE.GridHelper(gridSpan, gridDivisions, 0x1a2630, 0x0a1015);
|
||||
const grid = new THREE.GridHelper(gridSpan, gridDivisions, sceneGridCenterColor, sceneGridLineColor);
|
||||
gridRef = grid;
|
||||
grid.position.y = 0;
|
||||
const gridMaterial = grid.material;
|
||||
gridMaterialRef = gridMaterial;
|
||||
if (Array.isArray(gridMaterial)) {
|
||||
for (const material of gridMaterial) {
|
||||
material.transparent = true;
|
||||
material.opacity = 0.028;
|
||||
material.opacity = 0.034;
|
||||
}
|
||||
} else {
|
||||
gridMaterial.transparent = true;
|
||||
gridMaterial.opacity = 0.028;
|
||||
gridMaterial.opacity = 0.034;
|
||||
}
|
||||
matrixGroup.add(grid);
|
||||
applySceneTheme();
|
||||
|
||||
const cellX = new Float32Array(instanceCount);
|
||||
const cellZ = new Float32Array(instanceCount);
|
||||
@@ -377,14 +474,14 @@
|
||||
|
||||
overlayContext.font = `600 ${glyphSize.toFixed(1)}px "JetBrains Mono", "IBM Plex Mono", "Consolas", monospace`;
|
||||
overlayContext.shadowBlur = glowBlur;
|
||||
overlayContext.shadowColor = labelPalette[bucket];
|
||||
overlayContext.shadowColor = labelGlowPalette[bucket];
|
||||
|
||||
overlayContext.fillStyle = labelPalette[bucket];
|
||||
overlayContext.globalAlpha = displayValue === 0 ? 0.86 : 1;
|
||||
overlayContext.fillText(displayText, screenX, screenY);
|
||||
|
||||
if (normalized >= 0.8) {
|
||||
overlayContext.fillStyle = "rgb(255 245 220)";
|
||||
overlayContext.fillStyle = labelHighlightCss;
|
||||
overlayContext.globalAlpha = smoothstep(0.8, 1, normalized) * 0.34;
|
||||
overlayContext.fillText(displayText, screenX, screenY);
|
||||
}
|
||||
@@ -493,11 +590,18 @@
|
||||
gridMaterial.dispose();
|
||||
}
|
||||
renderer.dispose();
|
||||
rendererRef = null;
|
||||
boardMaterialRef = null;
|
||||
gridRef = null;
|
||||
gridMaterialRef = null;
|
||||
ambientLightRef = null;
|
||||
dirLightRef = null;
|
||||
sideLightRef = null;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="viewer-root" bind:this={viewerEl}>
|
||||
<div class="viewer-root" bind:this={viewerEl} style={viewerThemeStyle}>
|
||||
<canvas class="viewer-canvas" bind:this={canvasEl} aria-label="Pressure Matrix Viewer"></canvas>
|
||||
<canvas class="viewer-overlay" bind:this={overlayEl} aria-hidden="true"></canvas>
|
||||
|
||||
@@ -532,9 +636,9 @@
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% 58%, rgb(72 127 255 / 0.065), transparent 32%),
|
||||
radial-gradient(circle at 50% 12%, rgb(151 231 255 / 0.05), transparent 26%),
|
||||
linear-gradient(180deg, rgb(10 13 17 / 0.82), rgb(5 7 10 / 0.96));
|
||||
radial-gradient(circle at 50% 58%, rgb(var(--matrix-glow-rgb) / 0.11), transparent 32%),
|
||||
radial-gradient(circle at 50% 12%, rgb(var(--matrix-glow-alt-rgb) / 0.09), transparent 26%),
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--matrix-bg-10) 84%, transparent), color-mix(in srgb, var(--matrix-bg-30) 96%, black 4%));
|
||||
}
|
||||
|
||||
.viewer-canvas,
|
||||
@@ -563,7 +667,14 @@
|
||||
}
|
||||
|
||||
.viewer-noise {
|
||||
background: repeating-linear-gradient(180deg, rgb(124 165 216 / 0.02) 0, rgb(124 165 216 / 0.02) 1px, transparent 1px, transparent 3px);
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
rgb(var(--matrix-glow-alt-rgb) / 0.025) 0,
|
||||
rgb(var(--matrix-glow-alt-rgb) / 0.025) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
@@ -580,17 +691,19 @@
|
||||
display: grid;
|
||||
gap: 0.58rem;
|
||||
padding: 0.74rem 0.84rem 0.82rem;
|
||||
border: 1px solid rgb(86 151 118 / 0.32);
|
||||
border: 1px solid rgb(var(--matrix-border-rgb) / 0.32);
|
||||
border-radius: 0.76rem;
|
||||
background: linear-gradient(180deg, rgb(7 17 14 / 0.9), rgb(5 10 9 / 0.84));
|
||||
box-shadow: inset 0 1px 0 rgb(171 224 197 / 0.08), 0 0 24px rgb(42 138 88 / 0.08);
|
||||
background: linear-gradient(180deg, rgb(var(--matrix-surface-alt-rgb) / 0.92), rgb(var(--matrix-surface-deep-rgb) / 0.86));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(var(--matrix-border-strong-rgb) / 0.08),
|
||||
0 0 24px rgb(var(--matrix-glow-rgb) / 0.08);
|
||||
}
|
||||
|
||||
.stats-label,
|
||||
.stats-key,
|
||||
.stats-note {
|
||||
margin: 0;
|
||||
color: rgb(165 212 187 / 0.84);
|
||||
color: rgb(var(--matrix-text-dim-rgb) / 0.84);
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@@ -607,9 +720,9 @@
|
||||
gap: 0.24rem;
|
||||
min-height: 4.2rem;
|
||||
padding: 0.58rem 0.64rem;
|
||||
border: 1px solid rgb(71 122 96 / 0.24);
|
||||
border: 1px solid rgb(var(--matrix-border-rgb) / 0.24);
|
||||
border-radius: 0.56rem;
|
||||
background: linear-gradient(180deg, rgb(8 16 14 / 0.88), rgb(5 9 8 / 0.84));
|
||||
background: linear-gradient(180deg, rgb(var(--matrix-surface-rgb) / 0.9), rgb(var(--matrix-surface-deep-rgb) / 0.86));
|
||||
}
|
||||
|
||||
.stats-card-wide {
|
||||
@@ -617,7 +730,7 @@
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
color: rgb(240 246 255 / 0.98);
|
||||
color: rgb(var(--matrix-text-main-rgb) / 0.98);
|
||||
font-size: clamp(1.16rem, 1vw + 0.82rem, 1.56rem);
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -162,16 +162,16 @@
|
||||
aspect-ratio: 1.44 / 1;
|
||||
min-block-size: 11.8rem;
|
||||
justify-self: start;
|
||||
border: 1px solid rgb(130 174 202 / 0.42);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
|
||||
border-radius: 0.92rem;
|
||||
padding: 0.56rem 0.62rem 0.58rem;
|
||||
background:
|
||||
linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
|
||||
radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
|
||||
linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
|
||||
radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(165 224 255 / 0.08),
|
||||
inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
inset 0 -24px 32px rgb(0 0 0 / 0.48),
|
||||
0 0 14px rgb(62 232 255 / 0.14);
|
||||
0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1) rotate(0);
|
||||
transition:
|
||||
@@ -215,7 +215,7 @@
|
||||
.panel-code {
|
||||
margin: 0;
|
||||
font-size: 0.63rem;
|
||||
color: rgb(153 188 211 / 0.88);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.88);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -223,7 +223,7 @@
|
||||
.panel-title {
|
||||
margin: 0.12rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(225 243 255 / 0.96);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@@ -236,25 +236,25 @@
|
||||
}
|
||||
|
||||
.icon-chip {
|
||||
border: 1px solid rgb(138 178 204 / 0.44);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
|
||||
border-radius: 999px;
|
||||
padding: 0.08rem 0.36rem;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgb(209 237 255 / 0.94);
|
||||
background: rgb(5 13 20 / 0.66);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.94);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.66);
|
||||
}
|
||||
|
||||
.icon-chip.tone-cyan {
|
||||
border-color: rgb(62 232 255 / 0.54);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.54);
|
||||
}
|
||||
|
||||
.icon-chip.tone-lime {
|
||||
border-color: rgb(133 255 68 / 0.56);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.56);
|
||||
}
|
||||
|
||||
.icon-chip.tone-orange {
|
||||
border-color: rgb(255 91 63 / 0.58);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.58);
|
||||
}
|
||||
|
||||
.icon-chip.tone-violet {
|
||||
@@ -272,12 +272,12 @@
|
||||
.chart-stage {
|
||||
position: relative;
|
||||
block-size: clamp(6.4rem, 9vw, 8.2rem);
|
||||
border: 1px solid rgb(132 174 200 / 0.32);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
|
||||
border-radius: 0.62rem;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -287,7 +287,7 @@
|
||||
}
|
||||
|
||||
.grid-line-group line {
|
||||
stroke: rgb(138 184 210 / 0.16);
|
||||
stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
|
||||
stroke-width: 0.45;
|
||||
}
|
||||
|
||||
@@ -300,15 +300,15 @@
|
||||
}
|
||||
|
||||
.series-line.tone-cyan {
|
||||
stroke: rgb(62 232 255 / 0.95);
|
||||
stroke: rgb(var(--hud-cyan-rgb) / 0.95);
|
||||
}
|
||||
|
||||
.series-line.tone-lime {
|
||||
stroke: rgb(133 255 68 / 0.94);
|
||||
stroke: rgb(var(--hud-lime-rgb) / 0.94);
|
||||
}
|
||||
|
||||
.series-line.tone-orange {
|
||||
stroke: rgb(255 91 63 / 0.94);
|
||||
stroke: rgb(var(--hud-orange-rgb) / 0.94);
|
||||
}
|
||||
|
||||
.series-line.tone-violet {
|
||||
@@ -329,12 +329,12 @@
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
rgb(146 191 214 / 0.04) 0,
|
||||
rgb(146 191 214 / 0.04) 1px,
|
||||
rgb(var(--hud-border-strong-rgb) / 0.04) 0,
|
||||
rgb(var(--hud-border-strong-rgb) / 0.04) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
),
|
||||
linear-gradient(180deg, transparent 0%, rgb(62 232 255 / 0.06) 50%, transparent 100%);
|
||||
linear-gradient(180deg, transparent 0%, rgb(var(--hud-glow-rgb) / 0.06) 50%, transparent 100%);
|
||||
background-size: 100% 100%, 100% 100%;
|
||||
mix-blend-mode: screen;
|
||||
pointer-events: none;
|
||||
@@ -353,7 +353,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: rgb(173 206 227 / 0.9);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.9);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -365,19 +365,19 @@
|
||||
}
|
||||
|
||||
.dot.tone-cyan {
|
||||
background: rgb(62 232 255);
|
||||
background: rgb(var(--hud-cyan-rgb));
|
||||
}
|
||||
|
||||
.dot.tone-lime {
|
||||
background: rgb(133 255 68);
|
||||
background: rgb(var(--hud-lime-rgb));
|
||||
}
|
||||
|
||||
.dot.tone-orange {
|
||||
background: rgb(255 91 63);
|
||||
background: rgb(var(--hud-orange-rgb));
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: rgb(144 172 191 / 0.82);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.82);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
@@ -313,15 +313,15 @@
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 0.4rem;
|
||||
padding: 0.56rem 0.62rem 0.58rem;
|
||||
border: 1px solid rgb(130 174 202 / 0.42);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
|
||||
border-radius: 0.92rem;
|
||||
background:
|
||||
linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
|
||||
radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
|
||||
linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
|
||||
radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(165 224 255 / 0.08),
|
||||
inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
|
||||
inset 0 -24px 32px rgb(0 0 0 / 0.48),
|
||||
0 0 14px rgb(62 232 255 / 0.14);
|
||||
0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1) rotate(0);
|
||||
transition:
|
||||
@@ -360,7 +360,7 @@
|
||||
.panel-code {
|
||||
margin: 0;
|
||||
font-size: 0.63rem;
|
||||
color: rgb(153 188 211 / 0.88);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.88);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -368,7 +368,7 @@
|
||||
.panel-title {
|
||||
margin: 0.12rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(225 243 255 / 0.96);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.96);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@@ -381,36 +381,36 @@
|
||||
}
|
||||
|
||||
.icon-chip {
|
||||
border: 1px solid rgb(138 178 204 / 0.44);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
|
||||
border-radius: 999px;
|
||||
padding: 0.08rem 0.36rem;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgb(209 237 255 / 0.94);
|
||||
background: rgb(5 13 20 / 0.66);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.94);
|
||||
background: rgb(var(--hud-surface-rgb) / 0.66);
|
||||
}
|
||||
|
||||
.icon-chip.tone-cyan {
|
||||
border-color: rgb(62 232 255 / 0.54);
|
||||
border-color: rgb(var(--hud-cyan-rgb) / 0.54);
|
||||
}
|
||||
|
||||
.icon-chip.tone-lime {
|
||||
border-color: rgb(133 255 68 / 0.56);
|
||||
border-color: rgb(var(--hud-lime-rgb) / 0.56);
|
||||
}
|
||||
|
||||
.icon-chip.tone-orange {
|
||||
border-color: rgb(255 91 63 / 0.58);
|
||||
border-color: rgb(var(--hud-orange-rgb) / 0.58);
|
||||
}
|
||||
|
||||
.chart-stage {
|
||||
position: relative;
|
||||
block-size: clamp(6.4rem, 9vw, 8.2rem);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(132 174 200 / 0.32);
|
||||
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
|
||||
border-radius: 0.62rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
|
||||
radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
|
||||
linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
|
||||
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -420,7 +420,7 @@
|
||||
}
|
||||
|
||||
.grid-lines line {
|
||||
stroke: rgb(138 184 210 / 0.16);
|
||||
stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
|
||||
stroke-width: 0.45;
|
||||
}
|
||||
|
||||
@@ -430,20 +430,20 @@
|
||||
|
||||
.summary-line {
|
||||
fill: none;
|
||||
stroke: rgb(62 232 255 / 0.96);
|
||||
stroke: rgb(var(--hud-cyan-rgb) / 0.96);
|
||||
stroke-width: 1.35;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: drop-shadow(0 0 4px rgb(62 232 255 / 0.22));
|
||||
filter: drop-shadow(0 0 4px rgb(var(--hud-cyan-rgb) / 0.22));
|
||||
}
|
||||
|
||||
.summary-dot {
|
||||
fill: rgb(133 255 68 / 0.98);
|
||||
filter: drop-shadow(0 0 6px rgb(133 255 68 / 0.3));
|
||||
fill: rgb(var(--hud-lime-rgb) / 0.98);
|
||||
filter: drop-shadow(0 0 6px rgb(var(--hud-lime-rgb) / 0.3));
|
||||
}
|
||||
|
||||
.axis-label {
|
||||
fill: rgb(176 204 222 / 0.88);
|
||||
fill: rgb(var(--hud-text-main-rgb) / 0.88);
|
||||
font-size: 2.8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -453,11 +453,11 @@
|
||||
}
|
||||
|
||||
.y-axis-label {
|
||||
fill: rgb(162 198 220 / 0.84);
|
||||
fill: rgb(var(--hud-text-dim-rgb) / 0.84);
|
||||
}
|
||||
|
||||
.x-axis-label {
|
||||
fill: rgb(162 198 220 / 0.9);
|
||||
fill: rgb(var(--hud-text-dim-rgb) / 0.9);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -466,11 +466,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(155 186 204 / 0.76);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.76);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
background: linear-gradient(180deg, rgb(2 7 11 / 0.06), rgb(2 7 11 / 0.18));
|
||||
background: linear-gradient(180deg, rgb(var(--hud-surface-deep-rgb) / 0.06), rgb(var(--hud-surface-deep-rgb) / 0.18));
|
||||
}
|
||||
|
||||
.panel-foot {
|
||||
@@ -486,13 +486,13 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
color: rgb(173 206 227 / 0.9);
|
||||
color: rgb(var(--hud-text-main-rgb) / 0.9);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.metric-text {
|
||||
color: rgb(146 173 191 / 0.82);
|
||||
color: rgb(var(--hud-text-dim-rgb) / 0.82);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -503,15 +503,15 @@
|
||||
}
|
||||
|
||||
.dot.tone-cyan {
|
||||
background: rgb(62 232 255);
|
||||
background: rgb(var(--hud-cyan-rgb));
|
||||
}
|
||||
|
||||
.dot.tone-lime {
|
||||
background: rgb(133 255 68);
|
||||
background: rgb(var(--hud-lime-rgb));
|
||||
}
|
||||
|
||||
.dot.tone-orange {
|
||||
background: rgb(255 91 63);
|
||||
background: rgb(var(--hud-orange-rgb));
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
@@ -12,6 +12,25 @@ export interface PressureColorPalette {
|
||||
labelHigh: string;
|
||||
rangeStops: [string, string, string, string, string, string];
|
||||
rangeGlow: [string, string, string];
|
||||
uiTheme: {
|
||||
bg00: string;
|
||||
bg10: string;
|
||||
bg20: string;
|
||||
bg30: string;
|
||||
textMainRgb: string;
|
||||
textDimRgb: string;
|
||||
borderRgb: string;
|
||||
borderStrongRgb: string;
|
||||
surfaceRgb: string;
|
||||
surfaceAltRgb: string;
|
||||
surfaceDeepRgb: string;
|
||||
glowRgb: string;
|
||||
glowAltRgb: string;
|
||||
cyanRgb: string;
|
||||
limeRgb: string;
|
||||
orangeRgb: string;
|
||||
infoRgb: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColorPalette> = {
|
||||
@@ -26,7 +45,26 @@ export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColor
|
||||
labelMid: "#98e6ff",
|
||||
labelHigh: "#ffab78",
|
||||
rangeStops: ["#13201a", "#285338", "#3f8a66", "#6dd3ad", "#98e6ff", "#ffab78"],
|
||||
rangeGlow: ["#54df8e", "#98e6ff", "#ffab78"]
|
||||
rangeGlow: ["#54df8e", "#98e6ff", "#ffab78"],
|
||||
uiTheme: {
|
||||
bg00: "#020403",
|
||||
bg10: "#07100d",
|
||||
bg20: "#0c1712",
|
||||
bg30: "#040806",
|
||||
textMainRgb: "240 251 255",
|
||||
textDimRgb: "157 206 181",
|
||||
borderRgb: "88 132 116",
|
||||
borderStrongRgb: "120 190 156",
|
||||
surfaceRgb: "8 18 14",
|
||||
surfaceAltRgb: "12 26 20",
|
||||
surfaceDeepRgb: "4 10 8",
|
||||
glowRgb: "84 223 142",
|
||||
glowAltRgb: "152 230 255",
|
||||
cyanRgb: "152 230 255",
|
||||
limeRgb: "84 223 142",
|
||||
orangeRgb: "255 171 120",
|
||||
infoRgb: "122 198 255"
|
||||
}
|
||||
},
|
||||
arctic: {
|
||||
surfaceBase: "#08141d",
|
||||
@@ -39,7 +77,26 @@ export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColor
|
||||
labelMid: "#aef3ff",
|
||||
labelHigh: "#ffffff",
|
||||
rangeStops: ["#08141d", "#14354d", "#1f6690", "#58bee8", "#aef3ff", "#ffffff"],
|
||||
rangeGlow: ["#5ea9ff", "#7fe5ff", "#ffffff"]
|
||||
rangeGlow: ["#5ea9ff", "#7fe5ff", "#ffffff"],
|
||||
uiTheme: {
|
||||
bg00: "#02070c",
|
||||
bg10: "#07131b",
|
||||
bg20: "#0d1f2b",
|
||||
bg30: "#040b12",
|
||||
textMainRgb: "236 248 255",
|
||||
textDimRgb: "147 187 212",
|
||||
borderRgb: "86 129 160",
|
||||
borderStrongRgb: "129 193 228",
|
||||
surfaceRgb: "7 16 24",
|
||||
surfaceAltRgb: "10 23 34",
|
||||
surfaceDeepRgb: "4 9 15",
|
||||
glowRgb: "109 200 255",
|
||||
glowAltRgb: "174 243 255",
|
||||
cyanRgb: "109 200 255",
|
||||
limeRgb: "174 243 255",
|
||||
orangeRgb: "255 194 138",
|
||||
infoRgb: "94 169 255"
|
||||
}
|
||||
},
|
||||
ember: {
|
||||
surfaceBase: "#1b0c08",
|
||||
@@ -52,6 +109,25 @@ export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColor
|
||||
labelMid: "#ffd06a",
|
||||
labelHigh: "#fff4df",
|
||||
rangeStops: ["#1b0c08", "#4a1f15", "#8f4124", "#d9772f", "#ffd06a", "#fff4df"],
|
||||
rangeGlow: ["#ff7247", "#ffb14d", "#fff4df"]
|
||||
rangeGlow: ["#ff7247", "#ffb14d", "#fff4df"],
|
||||
uiTheme: {
|
||||
bg00: "#0a0503",
|
||||
bg10: "#140906",
|
||||
bg20: "#22120c",
|
||||
bg30: "#0c0504",
|
||||
textMainRgb: "255 241 231",
|
||||
textDimRgb: "202 156 128",
|
||||
borderRgb: "144 101 77",
|
||||
borderStrongRgb: "214 145 92",
|
||||
surfaceRgb: "20 10 8",
|
||||
surfaceAltRgb: "32 15 11",
|
||||
surfaceDeepRgb: "13 7 6",
|
||||
glowRgb: "255 138 78",
|
||||
glowAltRgb: "255 208 106",
|
||||
cyanRgb: "255 180 109",
|
||||
limeRgb: "255 208 106",
|
||||
orangeRgb: "255 108 84",
|
||||
infoRgb: "255 160 96"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,6 +8,19 @@
|
||||
--hud-cyan: #3ee8ff;
|
||||
--hud-lime: #85ff44;
|
||||
--hud-orange: #ff5b3f;
|
||||
--hud-cyan-rgb: 62 232 255;
|
||||
--hud-lime-rgb: 133 255 68;
|
||||
--hud-orange-rgb: 255 91 63;
|
||||
--hud-info-rgb: 122 198 255;
|
||||
--hud-border-rgb: 95 132 158;
|
||||
--hud-border-strong-rgb: 140 184 210;
|
||||
--hud-surface-rgb: 8 14 19;
|
||||
--hud-surface-alt-rgb: 12 20 26;
|
||||
--hud-surface-deep-rgb: 4 10 14;
|
||||
--hud-glow-rgb: 62 232 255;
|
||||
--hud-glow-alt-rgb: 133 255 68;
|
||||
--hud-text-main-rgb: 207 231 255;
|
||||
--hud-text-dim-rgb: 134 162 184;
|
||||
--hud-range-0: #13201a;
|
||||
--hud-range-1: #285338;
|
||||
--hud-range-2: #3f8a66;
|
||||
@@ -20,8 +33,8 @@
|
||||
|
||||
/* Keep root surface close to the main board style to avoid visible drag-edge seams. */
|
||||
background:
|
||||
radial-gradient(circle at 18% 8%, rgb(62 232 255 / 0.05), transparent 38%),
|
||||
radial-gradient(circle at 84% 14%, rgb(133 255 68 / 0.04), transparent 36%),
|
||||
radial-gradient(circle at 18% 8%, rgb(var(--hud-glow-rgb) / 0.05), transparent 38%),
|
||||
radial-gradient(circle at 84% 14%, rgb(var(--hud-glow-alt-rgb) / 0.04), transparent 36%),
|
||||
linear-gradient(165deg, var(--hud-bg-20) 0%, var(--hud-bg-10) 48%, var(--hud-bg-30) 100%);
|
||||
background-color: var(--hud-bg-00);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user