1003 lines
25 KiB
Svelte
1003 lines
25 KiB
Svelte
<script lang="ts">
|
||
import { createEventDispatcher } from "svelte";
|
||
import type {
|
||
ConnectionState,
|
||
HudConfigLink,
|
||
HudNoticeTone,
|
||
LocaleCode,
|
||
WindowControlAction
|
||
} from "$lib/types/hud";
|
||
|
||
export let appName = "";
|
||
export let suiteName = "";
|
||
export let controlAreaLabel = "";
|
||
export let locale: LocaleCode = "zh-CN";
|
||
export let connectionState: ConnectionState = "offline";
|
||
export let connectionLabel = "";
|
||
export let connectedLabel = "";
|
||
export let connectingLabel = "";
|
||
export let disconnectedLabel = "";
|
||
export let deviceLabel = "";
|
||
export let deviceValue = "";
|
||
export let sampleRateLabel = "";
|
||
export let sampleRateValue = "";
|
||
export let channelsLabel = "";
|
||
export let channelsValue = "";
|
||
export let serialPortLabel = "";
|
||
export let serialPortValue = "";
|
||
export let serialPortOptions: string[] = [];
|
||
export let refreshPortsLabel = "";
|
||
export let configLinksLabel = "";
|
||
export let configLinks: HudConfigLink[] = [];
|
||
export let connectActionLabel = "";
|
||
export let disconnectActionLabel = "";
|
||
export let exportActionLabel = "";
|
||
export let exportingActionLabel = "";
|
||
export let importActionLabel = "";
|
||
export let connectionNotice = "";
|
||
export let connectionNoticeTone: HudNoticeTone = "info";
|
||
export let isRefreshingPorts = false;
|
||
export let isConnectDisabled = false;
|
||
export let isExporting = false;
|
||
export let isExportDisabled = false;
|
||
export let isWindowMaximized = false;
|
||
|
||
const dispatch = createEventDispatcher<{
|
||
windowcontrol: WindowControlAction;
|
||
localechange: LocaleCode;
|
||
configlink: string;
|
||
portchange: string;
|
||
serialrefresh: void;
|
||
serialconnect: string;
|
||
serialexport: void;
|
||
csvimport: void;
|
||
noticeclear: void;
|
||
}>();
|
||
|
||
const connectionToneByState: Record<ConnectionState, "ok" | "warn" | "idle"> = {
|
||
online: "ok",
|
||
connecting: "warn",
|
||
offline: "idle"
|
||
};
|
||
|
||
$: connectionTone = connectionToneByState[connectionState];
|
||
$: connectionText =
|
||
connectionState === "online"
|
||
? connectedLabel
|
||
: connectionState === "connecting"
|
||
? connectingLabel
|
||
: disconnectedLabel;
|
||
$: connectButtonText =
|
||
connectionState === "online"
|
||
? disconnectActionLabel
|
||
: connectionState === "connecting"
|
||
? connectingLabel
|
||
: connectActionLabel;
|
||
$: exportButtonText = isExporting ? exportingActionLabel || exportActionLabel : exportActionLabel;
|
||
$: resolvedSerialPortOptions =
|
||
serialPortOptions.length > 0 ? serialPortOptions : serialPortValue ? [serialPortValue] : [];
|
||
|
||
function emitWindowControl(action: WindowControlAction): void {
|
||
dispatch("windowcontrol", action);
|
||
}
|
||
|
||
function switchLocale(nextLocale: LocaleCode): void {
|
||
dispatch("localechange", nextLocale);
|
||
}
|
||
|
||
function emitConfigLink(linkId: string): void {
|
||
dispatch("configlink", linkId);
|
||
}
|
||
|
||
function emitPortChange(event: Event): void {
|
||
const target = event.currentTarget as HTMLSelectElement;
|
||
dispatch("portchange", target.value);
|
||
}
|
||
|
||
function emitSerialConnect(): void {
|
||
dispatch("serialconnect", serialPortValue);
|
||
}
|
||
|
||
function emitSerialRefresh(): void {
|
||
dispatch("serialrefresh");
|
||
}
|
||
|
||
function emitSerialExport(): void {
|
||
dispatch("serialexport");
|
||
}
|
||
|
||
function emitCsvImport(): void {
|
||
dispatch("csvimport");
|
||
}
|
||
|
||
function emitNoticeClear(): void {
|
||
dispatch("noticeclear");
|
||
}
|
||
</script>
|
||
|
||
<section class="hud-panel" aria-label={controlAreaLabel}>
|
||
<div class="title-bar" role="group" aria-label="Title Bar" data-tauri-drag-region>
|
||
<div class="title-cluster" data-tauri-drag-region>
|
||
<span class="title-pulse" aria-hidden="true"></span>
|
||
<strong class="app-name">{appName}</strong>
|
||
<span class="suite-tag">{suiteName}</span>
|
||
</div>
|
||
|
||
<div class="window-controls" aria-label="Window Controls">
|
||
<button
|
||
type="button"
|
||
class="window-btn"
|
||
on:click={() => emitWindowControl("minimize")}
|
||
aria-label="Minimize window"
|
||
>
|
||
<svg viewBox="0 0 12 12" aria-hidden="true">
|
||
<path d="M2 6h8"></path>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="window-btn"
|
||
class:is-maximized={isWindowMaximized}
|
||
on:click={() => emitWindowControl("toggle-maximize")}
|
||
aria-label="Toggle maximize window"
|
||
>
|
||
<svg viewBox="0 0 12 12" aria-hidden="true">
|
||
<path d="M2.6 2.6h6.8v6.8h-6.8z"></path>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="window-btn is-close"
|
||
on:click={() => emitWindowControl("close")}
|
||
aria-label="Close window"
|
||
>
|
||
<svg viewBox="0 0 12 12" aria-hidden="true">
|
||
<path d="M2.6 2.6l6.8 6.8"></path>
|
||
<path d="M9.4 2.6l-6.8 6.8"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-bar">
|
||
<div class="control-main-row">
|
||
<section class="config-links" aria-label={configLinksLabel}>
|
||
{#each configLinks as link (link.id)}
|
||
<button
|
||
type="button"
|
||
class="config-link tone-{link.tone ?? 'neutral'}"
|
||
class:is-active={Boolean(link.active)}
|
||
on:click={() => emitConfigLink(link.id)}
|
||
>
|
||
<span class="config-indicator" aria-hidden="true"></span>
|
||
<span class="config-label">{link.label}</span>
|
||
</button>
|
||
{/each}
|
||
</section>
|
||
|
||
<section class="state-card" aria-label={connectionLabel}>
|
||
<span class="state-dot" class:ok={connectionTone === "ok"} class:warn={connectionTone === "warn"}></span>
|
||
<span class="state-label">{connectionLabel}</span>
|
||
<strong class="state-value">{connectionText}</strong>
|
||
</section>
|
||
|
||
<label class="serial-select" aria-label={serialPortLabel}>
|
||
<span class="serial-tag">{serialPortLabel}</span>
|
||
<span class="serial-select-wrap">
|
||
<select
|
||
class="serial-select-input"
|
||
value={serialPortValue}
|
||
disabled={connectionState !== "offline" || isRefreshingPorts}
|
||
on:change={emitPortChange}
|
||
>
|
||
{#each resolvedSerialPortOptions as option}
|
||
<option value={option}>{option}</option>
|
||
{/each}
|
||
</select>
|
||
<span class="serial-select-caret" aria-hidden="true"></span>
|
||
</span>
|
||
</label>
|
||
|
||
<button
|
||
type="button"
|
||
class="refresh-btn"
|
||
disabled={isRefreshingPorts || connectionState !== "offline"}
|
||
on:click={emitSerialRefresh}
|
||
>
|
||
<svg viewBox="0 0 16 16" aria-hidden="true">
|
||
<path d="M13 4.8V1.8"></path>
|
||
<path d="M13 1.8H10"></path>
|
||
<path d="M13 1.8a5.7 5.7 0 0 0-9.7 3.4"></path>
|
||
<path d="M3 11.2v3"></path>
|
||
<path d="M3 14.2h3"></path>
|
||
<path d="M3 14.2a5.7 5.7 0 0 0 9.7-3.4"></path>
|
||
</svg>
|
||
<span>{isRefreshingPorts ? `${refreshPortsLabel}...` : refreshPortsLabel}</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
class="connect-btn"
|
||
class:is-busy={connectionState === "connecting"}
|
||
class:is-connected={connectionState === "online"}
|
||
disabled={isConnectDisabled}
|
||
on:click={emitSerialConnect}
|
||
>
|
||
<span class="connect-btn-indicator" aria-hidden="true"></span>
|
||
<span>{connectButtonText}</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
class="export-btn"
|
||
disabled={isExportDisabled || isExporting}
|
||
on:click={emitSerialExport}
|
||
>
|
||
<svg viewBox="0 0 16 16" aria-hidden="true">
|
||
<path d="M8 2.2v7.2"></path>
|
||
<path d="M5.4 7.8L8 10.5l2.6-2.7"></path>
|
||
<path d="M3.1 12.3h9.8"></path>
|
||
</svg>
|
||
<span>{exportButtonText}</span>
|
||
</button>
|
||
|
||
<button type="button" class="import-btn" on:click={emitCsvImport}>
|
||
<svg viewBox="0 0 16 16" aria-hidden="true">
|
||
<path d="M8 10.8V3.6"></path>
|
||
<path d="M5.4 6.3L8 3.6l2.6 2.7"></path>
|
||
<path d="M3.1 12.6h9.8"></path>
|
||
</svg>
|
||
<span>{importActionLabel}</span>
|
||
</button>
|
||
|
||
<section class="locale-switch" aria-label="Language">
|
||
<button
|
||
type="button"
|
||
class="locale-btn"
|
||
class:is-active={locale === "zh-CN"}
|
||
on:click={() => switchLocale("zh-CN")}
|
||
>
|
||
中文
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="locale-btn"
|
||
class:is-active={locale === "en-US"}
|
||
on:click={() => switchLocale("en-US")}
|
||
>
|
||
English
|
||
</button>
|
||
</section>
|
||
</div>
|
||
|
||
{#if connectionNotice}
|
||
<div class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
|
||
<p class="connection-notice-text">{connectionNotice}</p>
|
||
<button
|
||
type="button"
|
||
class="notice-close-btn"
|
||
aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
|
||
on:click={emitNoticeClear}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
{/if}
|
||
|
||
<section class="info-grid">
|
||
<article class="info-cell">
|
||
<p class="meta-label">{deviceLabel}</p>
|
||
<p class="meta-value">{deviceValue}</p>
|
||
</article>
|
||
<article class="info-cell">
|
||
<p class="meta-label">{sampleRateLabel}</p>
|
||
<p class="meta-value">{sampleRateValue}</p>
|
||
</article>
|
||
<article class="info-cell">
|
||
<p class="meta-label">{channelsLabel}</p>
|
||
<p class="meta-value">{channelsValue}</p>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.hud-panel {
|
||
display: grid;
|
||
grid-template-rows: auto auto;
|
||
gap: clamp(0.5rem, 1.2vw, 0.85rem);
|
||
}
|
||
|
||
.title-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgb(108 143 166 / 0.22);
|
||
padding: 0.05rem 0.1rem 0.55rem 0.1rem;
|
||
background: linear-gradient(180deg, rgb(15 22 28 / 0.32), transparent);
|
||
}
|
||
|
||
.title-cluster {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.55rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.title-pulse {
|
||
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);
|
||
}
|
||
|
||
.app-name {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.07em;
|
||
color: #f0fbff;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.suite-tag {
|
||
font-size: 0.72rem;
|
||
color: var(--hud-text-dim);
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.window-controls {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.38rem;
|
||
}
|
||
|
||
.window-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
inline-size: 1.8rem;
|
||
block-size: 1.52rem;
|
||
border: 1px solid rgb(82 120 146 / 0.36);
|
||
border-radius: 0.34rem;
|
||
color: rgb(179 245 255 / 0.92);
|
||
background: rgb(8 12 16 / 0.82);
|
||
cursor: pointer;
|
||
transition:
|
||
background-color 200ms ease,
|
||
border-color 200ms ease,
|
||
color 200ms ease;
|
||
}
|
||
|
||
.window-btn svg {
|
||
inline-size: 0.8rem;
|
||
block-size: 0.8rem;
|
||
stroke: currentColor;
|
||
stroke-width: 1.4;
|
||
fill: none;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.window-btn:hover {
|
||
border-color: rgb(62 232 255 / 0.42);
|
||
background: rgb(14 20 26 / 0.9);
|
||
color: #f3fdff;
|
||
}
|
||
|
||
.window-btn.is-maximized {
|
||
border-color: rgb(133 255 68 / 0.5);
|
||
color: rgb(211 255 190 / 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);
|
||
}
|
||
|
||
.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));
|
||
}
|
||
|
||
.control-main-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.58rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.state-card {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.42rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(95 132 158 / 0.3);
|
||
border-radius: 999px;
|
||
padding: 0.2rem 0.62rem 0.2rem 0.36rem;
|
||
background: rgb(10 16 20 / 0.68);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.state-dot.ok {
|
||
background: var(--hud-lime);
|
||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.16);
|
||
}
|
||
|
||
.state-dot.warn {
|
||
background: var(--hud-orange);
|
||
box-shadow: 0 0 0 2px rgb(255 91 63 / 0.16);
|
||
}
|
||
|
||
.state-label {
|
||
color: rgb(154 176 194 / 0.84);
|
||
font-size: 0.66rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
line-height: 1;
|
||
}
|
||
|
||
.state-value {
|
||
color: #ecf8ff;
|
||
font-size: 0.92rem;
|
||
letter-spacing: 0.02em;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.serial-select {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.38rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(95 132 158 / 0.3);
|
||
border-radius: 999px;
|
||
padding: 0.18rem 0.2rem 0.18rem 0.56rem;
|
||
background: rgb(10 16 20 / 0.7);
|
||
min-inline-size: 0;
|
||
}
|
||
|
||
.serial-select-wrap {
|
||
position: relative;
|
||
display: inline-block;
|
||
min-inline-size: 0;
|
||
}
|
||
|
||
.serial-tag {
|
||
color: rgb(154 176 194 / 0.84);
|
||
font-size: 0.66rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.serial-select-input {
|
||
appearance: none;
|
||
inline-size: 100%;
|
||
min-inline-size: 7rem;
|
||
border: 1px solid rgb(95 132 158 / 0.32);
|
||
border-radius: 999px;
|
||
padding: 0.3rem 1.5rem 0.3rem 0.6rem;
|
||
background: rgb(4 11 16 / 0.84);
|
||
color: #d5ebfb;
|
||
font-size: 0.84rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
outline: none;
|
||
transition:
|
||
border-color 180ms ease,
|
||
box-shadow 180ms ease;
|
||
}
|
||
|
||
.serial-select-input:hover {
|
||
border-color: rgb(62 232 255 / 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);
|
||
}
|
||
|
||
.serial-select-caret {
|
||
position: absolute;
|
||
inset-inline-end: 0.68rem;
|
||
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);
|
||
transform: translateY(-64%) rotate(45deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.refresh-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.36rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(95 132 158 / 0.34);
|
||
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);
|
||
font-size: 0.74rem;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
color 180ms ease,
|
||
box-shadow 200ms ease,
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
.refresh-btn svg {
|
||
inline-size: 0.84rem;
|
||
block-size: 0.84rem;
|
||
stroke: currentColor;
|
||
stroke-width: 1.35;
|
||
fill: none;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.refresh-btn:hover:not(:disabled) {
|
||
border-color: rgb(62 232 255 / 0.44);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(167 218 252 / 0.07),
|
||
0 0 10px rgb(62 232 255 / 0.1);
|
||
}
|
||
|
||
.refresh-btn:disabled {
|
||
opacity: 0.72;
|
||
cursor: default;
|
||
}
|
||
|
||
.connect-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.42rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(133 255 68 / 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;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
color 180ms ease,
|
||
box-shadow 200ms ease,
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
.connect-btn:hover:not(:disabled) {
|
||
border-color: rgb(170 255 121 / 0.62);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(231 255 214 / 0.08),
|
||
0 0 12px rgb(133 255 68 / 0.14);
|
||
}
|
||
|
||
.connect-btn:disabled {
|
||
opacity: 0.72;
|
||
cursor: default;
|
||
}
|
||
|
||
.connect-btn.is-busy {
|
||
border-color: rgb(255 91 63 / 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);
|
||
}
|
||
|
||
.connect-btn.is-connected {
|
||
border-color: rgb(62 232 255 / 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);
|
||
}
|
||
|
||
.connect-btn-indicator {
|
||
inline-size: 0.4rem;
|
||
block-size: 0.4rem;
|
||
border-radius: 999px;
|
||
background: var(--hud-lime);
|
||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.15);
|
||
}
|
||
|
||
.connect-btn.is-busy .connect-btn-indicator {
|
||
background: var(--hud-orange);
|
||
box-shadow: 0 0 0 2px rgb(255 91 63 / 0.16);
|
||
}
|
||
|
||
.connect-btn.is-connected .connect-btn-indicator {
|
||
background: var(--hud-cyan);
|
||
box-shadow: 0 0 0 2px rgb(62 232 255 / 0.16);
|
||
}
|
||
|
||
.export-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.36rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(62 232 255 / 0.4);
|
||
border-radius: 999px;
|
||
padding: 0.24rem 0.72rem;
|
||
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);
|
||
font-size: 0.74rem;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
color 180ms ease,
|
||
box-shadow 200ms ease,
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
.export-btn svg {
|
||
inline-size: 0.84rem;
|
||
block-size: 0.84rem;
|
||
stroke: currentColor;
|
||
stroke-width: 1.35;
|
||
fill: none;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.export-btn:hover:not(:disabled) {
|
||
border-color: rgb(115 245 255 / 0.62);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(231 255 255 / 0.08),
|
||
0 0 12px rgb(62 232 255 / 0.14);
|
||
}
|
||
|
||
.export-btn:disabled {
|
||
opacity: 0.72;
|
||
cursor: default;
|
||
}
|
||
|
||
.import-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.36rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(122 198 255 / 0.36);
|
||
border-radius: 999px;
|
||
padding: 0.24rem 0.72rem;
|
||
background:
|
||
linear-gradient(180deg, rgb(11 22 32 / 0.94), rgb(7 13 20 / 0.9)),
|
||
radial-gradient(circle at 50% 0, rgb(122 198 255 / 0.13), transparent 58%);
|
||
color: rgb(226 243 255 / 0.97);
|
||
font-size: 0.74rem;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
color 180ms ease,
|
||
box-shadow 200ms ease;
|
||
}
|
||
|
||
.import-btn svg {
|
||
inline-size: 0.84rem;
|
||
block-size: 0.84rem;
|
||
stroke: currentColor;
|
||
stroke-width: 1.35;
|
||
fill: none;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.import-btn:hover {
|
||
border-color: rgb(164 220 255 / 0.6);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(231 244 255 / 0.08),
|
||
0 0 12px rgb(122 198 255 / 0.14);
|
||
}
|
||
|
||
.connection-notice {
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.6rem;
|
||
border: 1px solid rgb(95 132 158 / 0.32);
|
||
border-radius: 0.5rem;
|
||
padding: 0.38rem 0.45rem 0.38rem 0.7rem;
|
||
background: rgb(8 14 19 / 0.72);
|
||
}
|
||
|
||
.connection-notice-text {
|
||
margin: 0;
|
||
flex: 1;
|
||
min-width: 0;
|
||
color: rgb(214 236 248 / 0.96);
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.connection-notice.tone-warn {
|
||
border-color: rgb(255 91 63 / 0.42);
|
||
background: rgb(28 12 11 / 0.78);
|
||
color: rgb(255 218 208 / 0.96);
|
||
}
|
||
|
||
.connection-notice.tone-ok {
|
||
border-color: rgb(133 255 68 / 0.4);
|
||
background: rgb(18 26 16 / 0.76);
|
||
color: rgb(228 255 214 / 0.96);
|
||
}
|
||
|
||
.connection-notice.tone-info {
|
||
border-color: rgb(62 232 255 / 0.34);
|
||
background: rgb(8 17 22 / 0.76);
|
||
}
|
||
|
||
.notice-close-btn {
|
||
inline-size: 1.36rem;
|
||
block-size: 1.36rem;
|
||
border: 1px solid rgb(116 151 176 / 0.4);
|
||
border-radius: 0.28rem;
|
||
background: rgb(7 12 16 / 0.82);
|
||
color: rgb(194 225 245 / 0.92);
|
||
font-size: 0.92rem;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
transition:
|
||
border-color 180ms ease,
|
||
color 180ms ease,
|
||
background-color 180ms ease;
|
||
}
|
||
|
||
.notice-close-btn:hover {
|
||
border-color: rgb(62 232 255 / 0.5);
|
||
color: rgb(237 250 255 / 0.98);
|
||
background: rgb(9 16 22 / 0.92);
|
||
}
|
||
|
||
.connection-notice.tone-warn .notice-close-btn:hover {
|
||
border-color: rgb(255 91 63 / 0.6);
|
||
color: rgb(255 227 220 / 0.98);
|
||
background: rgb(34 13 12 / 0.9);
|
||
}
|
||
|
||
.connection-notice.tone-ok .notice-close-btn:hover {
|
||
border-color: rgb(133 255 68 / 0.56);
|
||
color: rgb(236 255 227 / 0.98);
|
||
background: rgb(17 28 14 / 0.9);
|
||
}
|
||
|
||
.info-grid {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.05rem;
|
||
flex-wrap: wrap;
|
||
padding-inline: 0.15rem;
|
||
}
|
||
|
||
.info-cell {
|
||
min-width: 0;
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.42rem;
|
||
}
|
||
|
||
.meta-label {
|
||
margin: 0;
|
||
font-size: 0.58rem;
|
||
letter-spacing: 0.1em;
|
||
color: rgb(140 163 181 / 0.82);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.meta-value {
|
||
margin: 0;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.03em;
|
||
color: rgb(205 228 245 / 0.92);
|
||
}
|
||
|
||
.locale-switch {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.34rem;
|
||
border: 1px solid rgb(95 132 158 / 0.34);
|
||
border-radius: 999px;
|
||
padding: 0.18rem;
|
||
background: rgb(10 16 20 / 0.7);
|
||
}
|
||
|
||
.config-links {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.2rem;
|
||
min-block-size: 2rem;
|
||
border: 1px solid rgb(95 132 158 / 0.36);
|
||
border-radius: 999px;
|
||
padding: 0.17rem 0.2rem;
|
||
background: linear-gradient(180deg, rgb(9 15 19 / 0.9), rgb(4 8 12 / 0.86));
|
||
box-shadow: inset 0 0 0 1px rgb(140 184 210 / 0.06);
|
||
}
|
||
|
||
.config-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.34rem;
|
||
border: 1px solid transparent;
|
||
border-radius: 999px;
|
||
padding: 0.26rem 0.64rem;
|
||
background: transparent;
|
||
color: rgb(164 188 208 / 0.9);
|
||
font-size: 0.81rem;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
transition:
|
||
color 180ms ease,
|
||
border-color 180ms ease,
|
||
background-color 180ms ease,
|
||
box-shadow 220ms ease;
|
||
}
|
||
|
||
.config-indicator {
|
||
inline-size: 0.34rem;
|
||
block-size: 0.34rem;
|
||
border-radius: 999px;
|
||
background: rgb(136 157 174 / 0.88);
|
||
box-shadow: 0 0 0 2px rgb(136 157 174 / 0.16);
|
||
transition:
|
||
background-color 180ms ease,
|
||
box-shadow 200ms ease;
|
||
}
|
||
|
||
.config-label {
|
||
line-height: 1;
|
||
}
|
||
|
||
.config-link:hover {
|
||
color: #d7edfb;
|
||
border-color: rgb(62 232 255 / 0.26);
|
||
}
|
||
|
||
.config-link.is-active {
|
||
color: #f1fdff;
|
||
border-color: rgb(106 150 180 / 0.56);
|
||
background: rgb(18 27 35 / 0.9);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(167 218 252 / 0.08),
|
||
0 0 10px rgb(62 232 255 / 0.12);
|
||
}
|
||
|
||
.config-link.tone-cyan.is-active {
|
||
border-color: rgb(62 232 255 / 0.48);
|
||
}
|
||
|
||
.config-link.tone-lime.is-active {
|
||
border-color: rgb(133 255 68 / 0.52);
|
||
}
|
||
|
||
.config-link.tone-orange.is-active {
|
||
border-color: rgb(255 91 63 / 0.52);
|
||
}
|
||
|
||
.config-link.tone-cyan.is-active .config-indicator {
|
||
background: var(--hud-cyan);
|
||
box-shadow: 0 0 0 2px rgb(62 232 255 / 0.17);
|
||
}
|
||
|
||
.config-link.tone-lime.is-active .config-indicator {
|
||
background: var(--hud-lime);
|
||
box-shadow: 0 0 0 2px rgb(133 255 68 / 0.17);
|
||
}
|
||
|
||
.config-link.tone-orange.is-active .config-indicator {
|
||
background: var(--hud-orange);
|
||
box-shadow: 0 0 0 2px rgb(255 91 63 / 0.18);
|
||
}
|
||
|
||
.locale-btn {
|
||
border: 1px solid transparent;
|
||
border-radius: 999px;
|
||
padding: 0.26rem 0.6rem;
|
||
background: transparent;
|
||
color: rgb(150 173 189 / 0.9);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.04em;
|
||
cursor: pointer;
|
||
transition:
|
||
color 180ms ease,
|
||
border-color 180ms ease,
|
||
background-color 180ms ease;
|
||
}
|
||
|
||
.locale-btn:hover {
|
||
color: #d7edfb;
|
||
border-color: rgb(62 232 255 / 0.3);
|
||
}
|
||
|
||
.locale-btn.is-active {
|
||
color: #f1fdff;
|
||
border-color: rgb(133 255 68 / 0.48);
|
||
background: rgb(24 31 25 / 0.9);
|
||
}
|
||
|
||
@media (max-width: 1080px) {
|
||
.config-links {
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 820px) {
|
||
.control-main-row {
|
||
gap: 0.44rem;
|
||
}
|
||
|
||
.config-links {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.serial-select {
|
||
padding-inline-start: 0.45rem;
|
||
}
|
||
|
||
.info-grid {
|
||
gap: 0.84rem;
|
||
}
|
||
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.suite-tag {
|
||
display: none;
|
||
}
|
||
|
||
.control-main-row {
|
||
align-items: stretch;
|
||
}
|
||
|
||
.serial-select {
|
||
inline-size: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.info-grid {
|
||
gap: 0.42rem 0.8rem;
|
||
}
|
||
|
||
.info-cell {
|
||
inline-size: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.window-btn {
|
||
inline-size: 1.75rem;
|
||
}
|
||
|
||
}
|
||
</style>
|