WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

rebrand: Recorders — Dragonflight, ember orange hue-32

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 02:54:10 +00:00
parent cc45cc6347
commit 6e43ab30c2
1 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
services/web-ui/public/recorders.html
View file

@ -4,14 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Recorders — Z-AMPP</title>
<title>Recorders — Dragonflight</title>
<link rel="stylesheet" href="css/common.css?v=3">
<style>
/* ── Recorders page · AMPP-aligned theme ── */
.main {
background:
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 266 / 0.35), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 266 / 0.18), transparent 65%),
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(28% 0.10 32 / 0.35), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 100%, oklch(35% 0.16 32 / 0.18), transparent 65%),
var(--bg-base);
}
.page-content { padding: 24px 32px 48px; }
@ -33,7 +33,7 @@
backdrop-filter: blur(6px);
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.recorder-card:hover { border-color: oklch(45% 0.20 266 / 0.4); }
.recorder-card:hover { border-color: oklch(45% 0.20 32 / 0.4); }
.recorder-card.recording {
border-color: oklch(62% 0.22 25 / 0.55);
background: oklch(15% 0.025 260 / 0.8);
@ -57,11 +57,11 @@
.recorder-status-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.recorder-status-row .text-sm { font-size: 13px; font-weight: 500; }
.recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 266); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.recorder-timer { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: oklch(70% 0.18 32); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.recorder-card.recording .recorder-timer { color: oklch(62% 0.22 25); }
.signal-strip { position: relative; height: 4px; background: oklch(20% 0.04 260); border-radius: 2px; overflow: hidden; }
.signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 266), oklch(70% 0.18 266)); animation: signalSlide 2.4s linear infinite; }
.signal-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, oklch(55% 0.20 32), oklch(70% 0.18 32)); animation: signalSlide 2.4s linear infinite; }
.signal-strip--warn .signal-strip-fill { background: oklch(82% 0.15 90); }
.signal-strip--bad .signal-strip-fill { background: oklch(62% 0.22 25); animation: none; opacity: 0.4; }
.signal-strip--idle .signal-strip-fill { background: oklch(35% 0.04 260); animation: none; opacity: 0.4; }
@ -94,13 +94,13 @@
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.source-type-btn:hover, .mode-btn:hover {
border-color: oklch(45% 0.20 266 / 0.5);
border-color: oklch(45% 0.20 32 / 0.5);
color: var(--text-primary);
}
.source-type-btn.active, .mode-btn.active {
border-color: oklch(55% 0.20 266 / 0.7);
background: oklch(20% 0.08 266 / 0.45);
color: oklch(78% 0.14 266);
border-color: oklch(55% 0.20 32 / 0.7);
background: oklch(20% 0.08 32 / 0.45);
color: oklch(78% 0.14 32);
font-weight: 600;
}
@ -166,8 +166,8 @@
}
.codec-tab:hover { color: var(--text-secondary); }
.codec-tab.active {
color: oklch(78% 0.14 266);
border-bottom-color: oklch(55% 0.20 266 / 0.85);
color: oklch(78% 0.14 32);
border-bottom-color: oklch(55% 0.20 32 / 0.85);
}
.codec-tab-panel { display: none; padding: 14px; }
.codec-tab-panel.active { display: block; }
@ -178,7 +178,7 @@
border: 1px solid oklch(28% 0.04 260 / 0.45);
border-radius: 10px;
background:
radial-gradient(ellipse 60% 40% at 50% 0%, oklch(28% 0.10 266 / 0.18), transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 0%, oklch(28% 0.10 32 / 0.18), transparent 70%),
oklch(11% 0.018 250 / 0.6);
padding: 14px 16px 12px;
display: flex; flex-direction: column; gap: 8px;
@ -215,7 +215,7 @@
}
.bmd-card-trace {
fill: none;
stroke: oklch(35% 0.08 266 / 0.4);
stroke: oklch(35% 0.08 32 / 0.4);
stroke-width: 0.8;
stroke-dasharray: 2 3;
}
@ -244,19 +244,19 @@
}
.bmd-port-group { transition: filter 120ms ease; }
.bmd-port-group:hover .bmd-port-ring {
stroke: oklch(60% 0.18 266 / 0.8);
stroke: oklch(60% 0.18 32 / 0.8);
}
.bmd-port-group.is-selected .bmd-port-ring {
fill: oklch(30% 0.14 266 / 0.55);
stroke: oklch(75% 0.18 266);
fill: oklch(30% 0.14 32 / 0.55);
stroke: oklch(75% 0.18 32);
stroke-width: 2;
filter: drop-shadow(0 0 6px oklch(60% 0.20 266 / 0.7));
filter: drop-shadow(0 0 6px oklch(60% 0.20 32 / 0.7));
}
.bmd-port-group.is-selected .bmd-port-pin {
fill: oklch(85% 0.10 266);
fill: oklch(85% 0.10 32);
}
.bmd-port-group.is-selected .bmd-port-label {
fill: oklch(82% 0.14 266);
fill: oklch(82% 0.14 32);
}
</style>
</head>
@ -265,8 +265,8 @@
<!-- Sidebar -->
<nav class="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
<span class="sidebar-brand-name">Z-AMPP</span>
<img src="img/dragon-logo.png?v=1" alt="Dragonflight" class="sidebar-logo">
<span class="sidebar-brand-name">Dragonflight</span>
</div>
<nav class="sidebar-nav">
<a href="home.html" class="nav-item">