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

126
src/lib/components/HudPanel.svelte
View File

@@ -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 {