mirror of
https://github.com/Since-3/since3-portal.git
synced 2026-10-12 19:51:17 +00:00
230 lines
7.2 KiB
CSS
230 lines
7.2 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Ink-Skala: nur Helligkeit, kein Farbton — Basis für Text/Flächen/Borders */
|
|
:root {
|
|
--ink-0: oklch(1 0 0);
|
|
--ink-50: oklch(0.975 0 0);
|
|
--ink-100: oklch(0.945 0 0);
|
|
--ink-200: oklch(0.885 0 0);
|
|
--ink-300: oklch(0.785 0 0);
|
|
--ink-400: oklch(0.665 0 0);
|
|
--ink-500: oklch(0.555 0 0);
|
|
--ink-600: oklch(0.45 0 0);
|
|
--ink-700: oklch(0.35 0 0);
|
|
--ink-800: oklch(0.245 0 0);
|
|
--ink-900: oklch(0.155 0 0);
|
|
--ink-950: oklch(0.085 0 0);
|
|
--ink-1000: oklch(0 0 0);
|
|
|
|
/* Monochromer Akzent: kein Farbton, Wirkung entsteht über Kontrast (Schwarz auf Grau) */
|
|
--accent-400: oklch(0.35 0 0);
|
|
--accent-500: oklch(0.145 0 0);
|
|
--accent-600: oklch(0 0 0);
|
|
|
|
--signal-error: oklch(0.63 0.21 25);
|
|
--signal-success: oklch(0.72 0.17 150);
|
|
--signal-warning: oklch(0.78 0.15 80);
|
|
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
|
|
--duration-fast: 120ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 320ms;
|
|
|
|
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
|
|
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
|
|
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-inter);
|
|
--font-mono: var(--font-jetbrains-mono);
|
|
--font-heading: var(--font-sans);
|
|
/* Vorlagen (modules/templates): Werte setzt jede Variante selbst über ihre Palette */
|
|
--color-t-bg: var(--t-bg);
|
|
--color-t-fg: var(--t-fg);
|
|
--color-t-muted: var(--t-muted);
|
|
--color-t-surface: var(--t-surface);
|
|
--color-t-accent: var(--t-accent);
|
|
--color-t-accent-fg: var(--t-accent-fg);
|
|
--font-t-display: var(--t-display);
|
|
--font-t-body: var(--t-body);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-surface: var(--surface);
|
|
--color-surface-raised: var(--surface-raised);
|
|
--color-signal-error: var(--signal-error);
|
|
--color-signal-success: var(--signal-success);
|
|
--color-signal-warning: var(--signal-warning);
|
|
--color-accent-400: var(--accent-400);
|
|
--color-accent-500: var(--accent-500);
|
|
--color-accent-600: var(--accent-600);
|
|
--color-ink-0: var(--ink-0);
|
|
--color-ink-50: var(--ink-50);
|
|
--color-ink-100: var(--ink-100);
|
|
--color-ink-200: var(--ink-200);
|
|
--color-ink-300: var(--ink-300);
|
|
--color-ink-400: var(--ink-400);
|
|
--color-ink-500: var(--ink-500);
|
|
--color-ink-600: var(--ink-600);
|
|
--color-ink-700: var(--ink-700);
|
|
--color-ink-800: var(--ink-800);
|
|
--color-ink-900: var(--ink-900);
|
|
--color-ink-950: var(--ink-950);
|
|
--color-ink-1000: var(--ink-1000);
|
|
|
|
--text-display: clamp(2rem, 1.5rem + 3.5vw, 3rem);
|
|
--text-title: clamp(1.25rem, 1.1rem + 1.8vw, 1.75rem);
|
|
--text-lead: 1.125rem;
|
|
--text-body: 0.9375rem;
|
|
--text-small: 0.8125rem;
|
|
--text-label: 0.75rem;
|
|
|
|
--spacing-section: clamp(3rem, 2rem + 6vw, 5rem);
|
|
--container-app: 80rem;
|
|
--container-narrow: 40rem;
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.625rem;
|
|
--radius-lg: 1rem;
|
|
--radius-full: 999px;
|
|
}
|
|
|
|
:root {
|
|
--background: oklch(0.99 0 0);
|
|
--foreground: var(--ink-950);
|
|
--card: var(--ink-0);
|
|
--card-foreground: var(--ink-950);
|
|
--popover: var(--ink-0);
|
|
--popover-foreground: var(--ink-950);
|
|
--primary: var(--accent-500);
|
|
--primary-foreground: var(--ink-0);
|
|
--secondary: var(--ink-50);
|
|
--secondary-foreground: var(--ink-950);
|
|
--muted: var(--ink-50);
|
|
--muted-foreground: var(--ink-600);
|
|
--accent: var(--ink-100);
|
|
--accent-foreground: var(--ink-950);
|
|
--destructive: var(--signal-error);
|
|
--border: var(--ink-200);
|
|
--input: var(--ink-200);
|
|
--ring: var(--accent-500);
|
|
--chart-1: var(--ink-300);
|
|
--chart-2: var(--ink-400);
|
|
--chart-3: var(--ink-500);
|
|
--chart-4: var(--ink-600);
|
|
--chart-5: var(--ink-700);
|
|
--surface: var(--ink-50);
|
|
--surface-raised: var(--ink-0);
|
|
--sidebar: var(--ink-50);
|
|
--sidebar-foreground: var(--ink-950);
|
|
--sidebar-primary: var(--accent-500);
|
|
--sidebar-primary-foreground: var(--ink-0);
|
|
--sidebar-accent: var(--ink-100);
|
|
--sidebar-accent-foreground: var(--ink-950);
|
|
--sidebar-border: var(--ink-200);
|
|
--sidebar-ring: var(--accent-500);
|
|
}
|
|
|
|
.dark {
|
|
--background: var(--ink-950);
|
|
--foreground: var(--ink-0);
|
|
--card: var(--ink-800);
|
|
--card-foreground: var(--ink-0);
|
|
--popover: var(--ink-800);
|
|
--popover-foreground: var(--ink-0);
|
|
--primary: var(--ink-0);
|
|
--primary-foreground: var(--ink-950);
|
|
--secondary: var(--ink-900);
|
|
--secondary-foreground: var(--ink-0);
|
|
--muted: var(--ink-900);
|
|
--muted-foreground: var(--ink-400);
|
|
--accent: var(--ink-800);
|
|
--accent-foreground: var(--ink-0);
|
|
--destructive: var(--signal-error);
|
|
--border: var(--ink-800);
|
|
--input: var(--ink-800);
|
|
--ring: var(--ink-0);
|
|
--chart-1: var(--ink-300);
|
|
--chart-2: var(--ink-400);
|
|
--chart-3: var(--ink-500);
|
|
--chart-4: var(--ink-600);
|
|
--chart-5: var(--ink-700);
|
|
--surface: var(--ink-900);
|
|
--surface-raised: var(--ink-800);
|
|
--sidebar: var(--ink-900);
|
|
--sidebar-foreground: var(--ink-0);
|
|
--sidebar-primary: var(--accent-500);
|
|
--sidebar-primary-foreground: var(--ink-0);
|
|
--sidebar-accent: var(--ink-800);
|
|
--sidebar-accent-foreground: var(--ink-0);
|
|
--sidebar-border: var(--ink-800);
|
|
--sidebar-ring: var(--accent-500);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
line-height: 1.5;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.2;
|
|
}
|
|
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
|
|
outline: 2px solid var(--ring);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
/* iOS zoomt beim Fokussieren in Felder mit < 16px Schrift. Auf Touch-Geräten daher mindestens 16px. */
|
|
@media (pointer: coarse) {
|
|
input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea {
|
|
font-size: max(16px, 1em);
|
|
}
|
|
}
|