Name update

crates/webui/src/app.css

@@ -1,4 +1,4 @@
-/* PXEForge web UI — Netbox-style minimal layout, fully offline.
+/* OpenPXE web UI — Netbox-style minimal layout, fully offline.
  *
  * Theme tokens live on `:root` (dark default) and `:root[data-theme=light]`.
  * Both palettes share variable *names*, so component CSS uses
@@ -279,35 +279,35 @@ label.check input { accent-color: var(--accent); }
 .progress.active { display: block; }
 .progress .bar { height: 100%; width: 0%; background: var(--accent); transition: width .25s; }
 
-/* ── Forge progress widget ─────────────────────────────────────────
-   Anvil-with-sparks animation paired with a horizontal progress bar.
-   Used on the Forge Gate tab to give a sense of the "in-flight"
-   imaging count without having to read a number. */
-.forge-progress {
+/* ── Imaging progress widget ───────────────────────────────────────
+   Animated brand mark paired with a horizontal progress bar; surfaces
+   on Dashboard and the Queue tab. Renamed from `.forge-progress` in
+   v0.3.0 — the anvil-themed naming is gone with the rebrand. */
+.queue-progress {
   display: flex; align-items: center; gap: 16px;
   padding: 16px;
 }
-.forge-progress .anvil {
-  width: 64px; height: 64px; flex: none;
-  background: url("/assets/anvil-forge.svg") no-repeat center / contain;
-  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--warn) 40%, transparent));
+.queue-progress .mark {
+  width: 56px; height: 56px; flex: none; border-radius: 50%;
+  background: url("/assets/loader.svg") no-repeat center / contain;
+  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.10));
 }
-.forge-progress .info { flex: 1; min-width: 0; }
-.forge-progress .info .label {
+.queue-progress .info { flex: 1; min-width: 0; }
+.queue-progress .info .label {
   font-size: 12.5px; color: var(--fg-dim); margin-bottom: 6px;
 }
-.forge-progress .bar-track {
+.queue-progress .bar-track {
   height: 8px; background: var(--bg-elev); border-radius: 4px;
   overflow: hidden; position: relative;
 }
-.forge-progress .bar-fill {
+.queue-progress .bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--warn), var(--accent));
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
   width: 0%;
   transition: width 0.4s ease;
   position: relative;
 }
-.forge-progress .bar-fill::after {
+.queue-progress .bar-fill::after {
   /* Subtle moving sheen so the bar feels alive even at 0% movement. */
   content: ""; position: absolute; inset: 0;
   background: linear-gradient(
@@ -315,24 +315,24 @@ label.check input { accent-color: var(--accent); }
     rgba(255,255,255,0) 0%,
     rgba(255,255,255,0.18) 50%,
     rgba(255,255,255,0) 100%);
-  animation: forge-sheen 1.6s linear infinite;
+  animation: queue-sheen 1.6s linear infinite;
 }
-@keyframes forge-sheen {
+@keyframes queue-sheen {
   from { transform: translateX(-100%); }
   to   { transform: translateX(100%); }
 }
-.forge-progress.idle .anvil { filter: none; opacity: 0.45; }
-.forge-progress.idle .bar-fill::after { animation: none; }
+.queue-progress.idle .mark { filter: grayscale(0.85) opacity(0.55); }
+.queue-progress.idle .bar-fill::after { animation: none; }
 
-/* ── Page-load anvil ──────────────────────────────────────────────── */
+/* ── Page-load loader ────────────────────────────────────────────── */
 .loader {
   display: flex; flex-direction: column; align-items: center; gap: 12px;
   padding: 40px 20px;
   color: var(--fg-dim);
 }
-.loader .anvil {
-  width: 110px; height: 110px;
-  background: url("/assets/anvil-forge.svg") no-repeat center / contain;
+.loader .mark {
+  width: 96px; height: 96px;
+  background: url("/assets/loader.svg") no-repeat center / contain;
 }
 
 /* ── Top bar readiness chip ──────────────────────────────────────── */
@@ -381,22 +381,22 @@ tr.unbootable td:first-child { border-left: 3px solid var(--warn); }
 @media (max-width: 900px) { .form-row { grid-template-columns: 1fr; } }
 
 /* ── Gate queue "horse race" visual ──────────────────────────────── */
-.gate-track {
+.queue-track {
   display: grid; gap: 6px;
   padding: 10px 0;
 }
-.gate-row {
+.queue-row {
   display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center;
   gap: 14px;
   padding: 8px 14px;
   background: var(--bg-panel-2); border-radius: var(--radius);
   border-left: 3px solid var(--accent);
 }
-.gate-row.assigned { border-left-color: var(--ok); }
-.gate-row .pos { font-family: var(--mono); font-size: 15px; color: var(--accent); font-weight: 600; }
-.gate-row.assigned .pos { color: var(--ok); }
-.gate-row .mac { font-family: var(--mono); font-size: 13px; }
-.gate-row .meta { color: var(--fg-dim); font-size: 12px; }
+.queue-row.assigned { border-left-color: var(--ok); }
+.queue-row .pos { font-family: var(--mono); font-size: 15px; color: var(--accent); font-weight: 600; }
+.queue-row.assigned .pos { color: var(--ok); }
+.queue-row .mac { font-family: var(--mono); font-size: 13px; }
+.queue-row .meta { color: var(--fg-dim); font-size: 12px; }
 
 .empty { color: var(--fg-dim); padding: 30px; text-align: center; }
 .msg { color: var(--fg-dim); font-size: 12.5px; margin-top: 8px; }