rebrand: Editor — Dragonflight, ember orange hue-32

This commit is contained in:
Zac Gaetano 2026-05-21 22:49:00 -04:00
parent cd5fc3a05c
commit 5874c93956

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Editor — Z-AMPP</title> <title>Editor — Dragonflight</title>
<link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/common.css">
<style> <style>
/* ── Editor layout ── */ /* ── Editor layout ── */
@ -105,7 +105,7 @@
color: var(--text-primary); color: var(--text-primary);
cursor: pointer; cursor: pointer;
} }
.edit-transport-btn:hover { background: oklch(20% 0.030 260); border-color: oklch(45% 0.20 266 / 0.5); } .edit-transport-btn:hover { background: oklch(20% 0.030 260); border-color: oklch(45% 0.20 32 / 0.5); }
.edit-transport-btn:disabled { opacity: 0.4; cursor: not-allowed; } .edit-transport-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.edit-scrubber { .edit-scrubber {
flex: 1; min-width: 200px; flex: 1; min-width: 200px;
@ -124,8 +124,8 @@
background: linear-gradient(90deg, background: linear-gradient(90deg,
oklch(25% 0.05 260) 0%, oklch(25% 0.05 260) 0%,
oklch(25% 0.05 260) var(--in-pct, 0%), oklch(25% 0.05 260) var(--in-pct, 0%),
oklch(55% 0.20 266) var(--in-pct, 0%), oklch(55% 0.20 32) var(--in-pct, 0%),
oklch(55% 0.20 266) var(--out-pct, 100%), oklch(55% 0.20 32) var(--out-pct, 100%),
oklch(25% 0.05 260) var(--out-pct, 100%), oklch(25% 0.05 260) var(--out-pct, 100%),
oklch(25% 0.05 260) 100%); oklch(25% 0.05 260) 100%);
border-radius: 3px; border-radius: 3px;
@ -135,7 +135,7 @@
width: 14px; height: 14px; width: 14px; height: 14px;
background: var(--text-primary); background: var(--text-primary);
border-radius: 50%; border-radius: 50%;
border: 2px solid oklch(70% 0.18 266); border: 2px solid oklch(70% 0.18 32);
margin-top: -4px; margin-top: -4px;
cursor: pointer; cursor: pointer;
} }
@ -154,9 +154,9 @@
font-size: 12px; font-weight: 500; font-size: 12px; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
.edit-marker-btn:hover { border-color: oklch(45% 0.20 266 / 0.6); } .edit-marker-btn:hover { border-color: oklch(45% 0.20 32 / 0.6); }
.edit-marker-btn.in { color: oklch(70% 0.18 266); } .edit-marker-btn.in { color: oklch(70% 0.18 32); }
.edit-marker-btn.out { color: oklch(70% 0.18 266); } .edit-marker-btn.out { color: oklch(70% 0.18 32); }
/* Timeline strip */ /* Timeline strip */
.edit-timeline { .edit-timeline {
@ -196,8 +196,8 @@
transition: background 120ms ease, border-color 120ms ease; transition: background 120ms ease, border-color 120ms ease;
} }
.edit-track-empty.drag-over { .edit-track-empty.drag-over {
background: oklch(20% 0.05 266 / 0.4); background: oklch(20% 0.05 32 / 0.4);
border-color: oklch(55% 0.20 266 / 0.8); border-color: oklch(55% 0.20 32 / 0.8);
color: var(--accent-strong); color: var(--accent-strong);
} }
.edit-clip { .edit-clip {
@ -212,10 +212,10 @@
cursor: pointer; cursor: pointer;
transition: border-color 100ms ease; transition: border-color 100ms ease;
} }
.edit-clip:hover { border-color: oklch(45% 0.20 266 / 0.5); } .edit-clip:hover { border-color: oklch(45% 0.20 32 / 0.5); }
.edit-clip.active { .edit-clip.active {
border-color: oklch(70% 0.18 266); border-color: oklch(70% 0.18 32);
box-shadow: 0 0 0 1px oklch(70% 0.18 266 / 0.4); box-shadow: 0 0 0 1px oklch(70% 0.18 32 / 0.4);
} }
.edit-clip-thumb { .edit-clip-thumb {
width: 100%; height: 64px; width: 100%; height: 64px;
@ -233,7 +233,7 @@
.edit-clip-bar-fill { .edit-clip-bar-fill {
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
background: oklch(55% 0.20 266); background: oklch(55% 0.20 32);
} }
.edit-clip-meta { .edit-clip-meta {
padding: 4px 8px 6px; padding: 4px 8px 6px;
@ -307,8 +307,8 @@
<div class="shell"> <div class="shell">
<nav class="sidebar" aria-label="Main navigation"> <nav class="sidebar" aria-label="Main navigation">
<div class="sidebar-brand"> <div class="sidebar-brand">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo"> <img src="img/dragon-logo.png?v=1" alt="Dragonflight" class="sidebar-logo">
<span class="sidebar-brand-name">Z-AMPP</span> <span class="sidebar-brand-name">Dragonflight</span>
</div> </div>
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<a href="home.html" class="nav-item"> <a href="home.html" class="nav-item">