V2

2026-05-11 21:24:15 +02:00
parent 1a9185f88f
commit b8a6fdfcc2
12 changed files with 5580 additions and 0 deletions
--- a/overlay/src/styles.css
+++ b/overlay/src/styles.css
@@ -0,0 +1,156 @@
+@import "tailwindcss";
+
+@source "../index.html";
+@source "./**/*.ts";
+
+@theme {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
+}
+
+@layer base {
+  :root {
+    color-scheme: dark;
+    font-family: var(--font-sans);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    @apply h-full overflow-hidden bg-transparent select-none;
+  }
+
+  body {
+    @apply m-0 flex items-center justify-center;
+  }
+}
+
+@layer components {
+  .overlay {
+    @apply flex h-full w-full items-center justify-center p-2 opacity-100;
+    transform: translateY(0) scale(1);
+    transition:
+      opacity 180ms ease,
+      transform 180ms ease;
+  }
+
+  .overlay.hidden {
+    @apply opacity-0;
+    transform: translateY(7px) scale(0.985);
+  }
+
+  .overlay.decaying {
+    @apply opacity-0;
+    transform: translateY(6px) scale(0.992);
+  }
+
+  .panel {
+    @apply w-full max-w-full overflow-hidden text-white;
+    background: rgba(58, 59, 61, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.11);
+    border-radius: 18px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+    padding: 17px 18px 18px;
+  }
+
+  h1 {
+    @apply mb-4 overflow-hidden text-center text-lg leading-tight text-ellipsis whitespace-nowrap text-white;
+    font-weight: 650;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
+  }
+
+  .button-strip {
+    @apply grid grid-cols-10 gap-[5px];
+  }
+
+  .button-tile {
+    @apply relative flex min-h-[54px] min-w-0 items-center overflow-hidden px-1.5 pt-[7px] pb-2;
+    background: rgba(255, 255, 255, 0.095);
+    border-radius: 6px;
+    transition:
+      background-color 120ms ease,
+      box-shadow 120ms ease,
+      transform 120ms ease;
+  }
+
+  .button-tile::before {
+    @apply absolute top-0 right-0 left-0 content-[''];
+    background: var(--button-color);
+    height: 4px;
+    opacity: 0.68;
+    transition:
+      height 120ms ease,
+      opacity 120ms ease;
+  }
+
+  .button-label {
+    @apply relative z-10 line-clamp-2 w-full min-w-0 overflow-hidden text-center text-xs leading-tight text-ellipsis text-white;
+    display: -webkit-box;
+    font-weight: 650;
+    -webkit-box-orient: vertical;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
+  }
+
+  .overlay.entering .panel {
+    animation: osd-pop 280ms cubic-bezier(0.2, 0.95, 0.22, 1) both;
+  }
+
+  .overlay.entering .button-tile {
+    animation: tile-rise 220ms ease-out both;
+    animation-delay: calc(45ms + (var(--tile-index) * 16ms));
+  }
+
+  .button-tile.pressed {
+    background: rgba(255, 255, 255, 0.22);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+      inset 0 2px 7px rgba(255, 255, 255, 0.08),
+      0 1px 2px rgba(0, 0, 0, 0.22);
+    transform: translateY(1px) scale(0.975);
+  }
+
+  .button-tile.pressed::before {
+    height: 6px;
+    opacity: 1;
+  }
+}
+
+@keyframes osd-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.975);
+  }
+
+  62% {
+    opacity: 1;
+    transform: translateY(-1px) scale(1.006);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tile-rise {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .panel,
+  .button-tile {
+    animation: none;
+    transition: opacity 120ms ease;
+  }
+}