feat: responsive header

2026-07-24 14:50:59 +02:00
parent 4c146902e3
commit 3d7c0d2332
15 changed files with 364 additions and 610 deletions
--- a/src/components/Led/Led.css
+++ b/src/components/Led/Led.css
@ -0,0 +1,58 @@
+/* ---------- LED status dot ---------- */
+
+.led {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* remove flex: 1 and align-self: stretch entirely */
+}
+
+.led-dot {
+  width: 80%;
+  height: 80%;
+
+  border-radius: 50%;
+
+  background: var(--accent-down);
+
+  transition:
+    width var(--dur-base) var(--ease-standard),
+    height var(--dur-base) var(--ease-standard),
+    background var(--dur-base) var(--ease-standard),
+    box-shadow var(--dur-base) var(--ease-standard);
+}
+
+.led-dot--connected {
+  width: 100%;
+  height: 100%;
+
+  background: var(--accent-live);
+  box-shadow: 0 0 6px 1px var(--accent-live);
+}
+
+.led-dot--connecting {
+  background: var(--accent-connecting);
+  box-shadow: 0 0 6px 1px var(--accent-connecting);
+
+  animation: pulse 1s var(--ease-standard) infinite;
+}
+
+.led-dot--disconnected {
+  background: var(--accent-down);
+  box-shadow: 0 0 4px 0 var(--accent-down);
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.25);
+    opacity: 0.7;
+  }
+}