ayrisdevandClaude Sonnet 5
7d504d1938
Elle yazılmış tek-dosya CSS (sabit koyu tema, ham table/button, window.confirm ile silme onayı) yerine tutarlı bir bileşen sistemi: Card/Table/Badge/Button/ Input/Switch/AlertDialog primitifleri, Hanken Grotesk + JetBrains Mono tipografi çifti, "broadcast/monitör" temalı özel bir renk paleti (camgöbeği accent, ok/warn/err/live durum rengi sözlüğü). Tüm sayfalar (dashboard, kanal detay, segmentler, ayarlar, istatistik, kullanıcılar, login) aynı oturumda taşındı — silme onayları artık gerçek AlertDialog, native confirm() değil. Veri akışı/server action'lar değişmedi, tamamen görsel katman. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
|
||
/*
|
||
* Panel koyu temayla sabit tasarlandı (broadcast/monitör kimliği) — açık
|
||
* tema desteği bilinçli olarak yok, tek bir palet var.
|
||
*/
|
||
:root {
|
||
--radius: 0.625rem;
|
||
|
||
--background: #0a0e15;
|
||
--foreground: #e8ecf2;
|
||
|
||
--card: #121722;
|
||
--card-foreground: #e8ecf2;
|
||
|
||
--popover: #121722;
|
||
--popover-foreground: #e8ecf2;
|
||
|
||
--border: #232b3a;
|
||
--input: #1b2230;
|
||
|
||
--muted: #171d29;
|
||
--muted-foreground: #8b93a7;
|
||
|
||
--primary: #22d3c8;
|
||
--primary-foreground: #072421;
|
||
|
||
--secondary: #1b2230;
|
||
--secondary-foreground: #c7cfde;
|
||
|
||
--accent: #1a2130;
|
||
--accent-foreground: #e8ecf2;
|
||
|
||
--destructive: #ef5b5b;
|
||
--ring: #22d3c8;
|
||
|
||
/* Ürünün durum sözlüğü — badge/rozet renkleri, primary'den bağımsız */
|
||
--ok: #37c976;
|
||
--warn: #f2b84b;
|
||
--err: #ef5b5b;
|
||
--live: #ff5c5c;
|
||
}
|
||
|
||
@theme inline {
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-ring: var(--ring);
|
||
|
||
--color-ok: var(--ok);
|
||
--color-warn: var(--warn);
|
||
--color-err: var(--err);
|
||
--color-live: var(--live);
|
||
|
||
--font-sans: var(--font-hanken-grotesk);
|
||
--font-mono: var(--font-jetbrains-mono);
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.font-mono-num {
|
||
font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|