yanjie/JE-Skin
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat:themes, tactilea codec

Browse Source
This commit is contained in:
lenn
2026-04-03 16:40:48 +08:00
parent 7688986ad7
commit 1c5ac13da8
42 changed files with 881 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/lib/components/ConfigPanel.svelte
View File

@@ -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;
}