Initial commit

2026-05-19 22:20:29 +02:00
commit 0fbe856dce
173 changed files with 38316 additions and 0 deletions
@@ -0,0 +1,192 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Dark-first CSS variables (shadcn/ui compatible) ─────────────────────── */
+@layer base {
+  :root {
+    /* Zinc dark palette — always dark */
+    --background: 0 0% 3.9%;        /* zinc-950 */
+    --foreground: 0 0% 98%;         /* white */
+
+    --card: 0 0% 9%;                /* zinc-900 */
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 9%;             /* zinc-900 */
+    --popover-foreground: 0 0% 98%;
+
+    /* Amber accent — brand colour */
+    --primary: 38 92% 50%;          /* amber-500 */
+    --primary-foreground: 38 100% 6%;
+
+    --secondary: 0 0% 14.9%;        /* zinc-800 */
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;            /* zinc-800 */
+    --muted-foreground: 0 0% 63.9%; /* zinc-400 */
+
+    --accent: 0 0% 14.9%;           /* zinc-800 */
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;           /* zinc-800 */
+    --input: 0 0% 9%;               /* zinc-900 */
+    --ring: 38 92% 50%;             /* amber-500 */
+
+    --radius: 0.625rem;             /* 10px */
+
+    /* Status colors */
+    --status-approved: 142 71% 45%;
+    --status-rejected: 0 72% 51%;
+    --status-pending: 38 92% 50%;
+    --status-changes: 271 76% 53%;
+  }
+
+  /* Force dark mode globally */
+  html {
+    color-scheme: dark;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-full;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+}
+
+/* ── Custom utilities ────────────────────────────────────────────────────── */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Cinematic glow effect for review player */
+  .player-glow {
+    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 120px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Annotation canvas cursor crosshair */
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
+
+  /* Timeline scrub cursor */
+  .cursor-ew-resize {
+    cursor: ew-resize;
+  }
+
+  /* Status colors */
+  .status-approved {
+    color: hsl(var(--status-approved));
+  }
+  .status-rejected {
+    color: hsl(var(--status-rejected));
+  }
+  .status-pending {
+    color: hsl(var(--status-pending));
+  }
+  .status-changes {
+    color: hsl(var(--status-changes));
+  }
+
+  .bg-status-approved {
+    background-color: hsl(var(--status-approved) / 0.15);
+  }
+  .bg-status-rejected {
+    background-color: hsl(var(--status-rejected) / 0.15);
+  }
+  .bg-status-pending {
+    background-color: hsl(var(--status-pending) / 0.15);
+  }
+  .bg-status-changes {
+    background-color: hsl(var(--status-changes) / 0.15);
+  }
+}
+
+/* ── Review player specific styles ──────────────────────────────────────── */
+.review-player-container {
+  position: relative;
+  background: #000;
+  user-select: none;
+}
+
+.review-player-container video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Annotation canvas overlay */
+.annotation-canvas-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.annotation-canvas-overlay.is-annotating {
+  pointer-events: auto;
+}
+
+/* Frame timeline */
+.frame-timeline {
+  position: relative;
+  height: 48px;
+  background: hsl(0 0% 6%);
+  border-top: 1px solid hsl(0 0% 14%);
+  cursor: ew-resize;
+  overflow: hidden;
+}
+
+/* Comment badge on timeline */
+.timeline-comment-marker {
+  position: absolute;
+  top: 4px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: hsl(213 94% 68%);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+/* Keyframe indicator */
+.playhead {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: hsl(0 72% 51%);
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* Player controls glassmorphism */
+.player-controls {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
+}