/* OmniRoute theme for the New API panel. * * Injected into by zaid-fix-proxy.mjs as the LAST stylesheet, which is * the whole mechanism: the panel's own tokens are declared on :root / .dark at * specificity (0,1,0), so an equal-specificity redeclaration later in source * order wins. That is also how the panel's own `@supports (color: lab())` * blocks override its hex defaults - this file simply lands after those too. * * Values are plain hex on purpose. The theme tokens are NOT registered with * @property (verified: 101 registrations, all --tw-*), so there is no syntax * constraint to satisfy and no need to match the lab()/oklch() notation the * bundle happens to use. * * Deliberately NOT overridden: --accent, --sidebar, --sidebar-accent and the * --table-* family. Upstream derives each of them with * color-mix(in oklch, var(--primary|--foreground) N%, var(--background)), so * they re-tint themselves from the new violet primary for free. Pinning them * to a flat colour - as an earlier draft did with --accent: #6366f1 - would * turn every subtle hover tint into a solid indigo block. */ /* ── Light ─────────────────────────────────────────────────────────────── */ :root { --radius: 0.875rem; /* 14px, OmniRoute's --radius */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --background: #f9f9fb; --foreground: #1a1a2e; --card: #ffffff; --card-foreground: #1a1a2e; --popover: #ffffff; --popover-foreground: #1a1a2e; --primary: #7c3aed; /* violet-600 */ --primary-foreground: #ffffff; --secondary: #f0f0f5; --secondary-foreground: #5b21b6; --muted: #f4f4f7; --muted-foreground: #71717a; --accent-foreground: #5b21b6; --destructive: #ef4444; --border: #00000014; /* rgba(0,0,0,.08) */ --input: #00000014; --ring: #7c3aed; --chart-1: #7c3aed; --chart-2: #6366f1; --chart-3: #a855f7; --chart-4: #22d3ee; --chart-5: #10b981; --overview-accent-1: #7c3aed; --overview-accent-2: #6366f1; --overview-accent-3: #a855f7; --sidebar-foreground: #1a1a2e; --sidebar-primary: #7c3aed; --sidebar-accent-foreground: #6d28d9; --sidebar-border: #00000014; --sidebar-ring: #7c3aed; --skeleton-base: #f0f0f5; --skeleton-highlight: #f9f9fb; } /* ── Dark ──────────────────────────────────────────────────────────────── */ /* Plain `.dark`, not `html.dark`: the bundle only ever uses the bare class * (370 descendant + 330 :is(.dark …) matches, zero html.dark/body.dark), so * this works whichever element React puts it on. It sits after :root here for * the same reason upstream does - equal specificity, later wins. */ .dark { --background: #0b0e14; /* OmniRoute deep navy */ --foreground: #e6e6ef; --card: #161b22; --card-foreground: #e6e6ef; --popover: #161b22; --popover-foreground: #e6e6ef; --primary: #7c3aed; --primary-foreground: #ffffff; --secondary: #111520; --secondary-foreground: #ddd6fe; --muted: #111520; --muted-foreground: #a1a1aa; --accent-foreground: #ede9fe; --destructive: #f87171; --border: #ffffff14; /* rgba(255,255,255,.08) */ --input: #ffffff1f; --ring: #8b5cf6; --chart-1: #a78bfa; --chart-2: #818cf8; --chart-3: #c084fc; --chart-4: #22d3ee; --chart-5: #34d399; --sidebar: #10141e; /* flat upstream (#1c1c1c), not derived */ --sidebar-foreground: #e6e6ef; --sidebar-primary: #8b5cf6; --sidebar-accent-foreground: #ddd6fe; --sidebar-border: #ffffff14; --sidebar-ring: #8b5cf6; --skeleton-base: #161b22; --skeleton-highlight: #1f2733; } /* ── Font ──────────────────────────────────────────────────────────────── */ /* --font-sans alone is not enough: the bundle also hardcodes the family on * html, which beats the token for anything that inherits rather than reading * var(--font-body). */ html { font-family: var(--font-sans); } /* ── Gradient primary buttons ──────────────────────────────────────────── */ /* OmniRoute's signature: 135deg violet→purple, brightness on hover, a 1% * press. Two attribute selectors instead of one [class*="bg-primary"]: * ~= catches the bare `bg-primary` token, *="bg-primary/" catches the opacity * variants (bg-primary/90). The broad *= form would also match * bg-primary-foreground and paint a gradient over what should be a white * surface. */ :where(button, [role="button"], a)[class~="bg-primary"], :where(button, [role="button"], a)[class*="bg-primary/"] { background-color: transparent; background-image: linear-gradient(135deg, #7c3aed, #a855f7); transition: filter .2s, transform .2s, box-shadow .2s; } :where(button, [role="button"], a)[class~="bg-primary"]:hover:not(:disabled), :where(button, [role="button"], a)[class*="bg-primary/"]:hover:not(:disabled) { filter: brightness(1.05); } :where(button, [role="button"], a)[class~="bg-primary"]:active:not(:disabled), :where(button, [role="button"], a)[class*="bg-primary/"]:active:not(:disabled) { transform: scale(.99); } /* ── Selection ─────────────────────────────────────────────────────────── */ ::selection { background-color: #7c3aed38; color: #7c3aed; } .dark ::selection { background-color: #8b5cf647; color: #ede9fe; } /* ── Scrollbar ─────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: #9ca3af33 transparent; } .dark * { scrollbar-color: #ffffff1f transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: #9ca3af33; border-radius: 9999px; } .dark *::-webkit-scrollbar-thumb { background-color: #ffffff1f; } /* ── Graph-paper wallpaper ─────────────────────────────────────────────── */ /* On body, not body::before. A negative-z-index pseudo-element paints above * body's own background but below every in-flow descendant, and the panel's * shell fills the viewport with an opaque bg-* surface - the grid would be * covered on all but a blank page. Layering the gradients onto body's own * background-image keeps them on the one surface the layout leaves visible. */ body { background-image: linear-gradient(to right, #00000012 1px, transparent 1px), linear-gradient(to bottom, #00000012 1px, transparent 1px); background-size: 32px 32px; background-attachment: fixed; } .dark body, body.dark { background-image: linear-gradient(to right, #ffffff0f 1px, transparent 1px), linear-gradient(to bottom, #ffffff0f 1px, transparent 1px); }