forked from BRETT/BRETT
1196 lines
49 KiB
CSS
1196 lines
49 KiB
CSS
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn-vue/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@utility cn-font-heading {
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-sans);
|
|
--font-weight-normal: 500;
|
|
--font-weight-medium: 600;
|
|
--font-weight-semibold: 700;
|
|
--font-weight-bold: 700;
|
|
--font-heading: var(--font-heading);
|
|
--font-logo: var(--font-logo);
|
|
--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-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--radius-xs: calc(var(--radius) * 0.2);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--radius-2xl: calc(var(--radius) * 1.6);
|
|
--radius-3xl: calc(var(--radius) * 2.4);
|
|
}
|
|
|
|
:root, [data-theme="standard"] {
|
|
--font-sans: 'Figtree', sans-serif;
|
|
--font-heading: 'Manrope', sans-serif;
|
|
--font-logo: 'Archivo Black', sans-serif;
|
|
--radius: 0.625rem;
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.459 0.187 3.815);
|
|
--primary-foreground: oklch(0.971 0.014 343.198);
|
|
--secondary: oklch(0.274 0.006 286.033);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.459 0.187 3.815);
|
|
--accent-foreground: oklch(0.971 0.014 343.198);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.823 0.12 346.018);
|
|
--chart-2: oklch(0.656 0.241 354.308);
|
|
--chart-3: oklch(0.592 0.249 0.584);
|
|
--chart-4: oklch(0.525 0.223 3.958);
|
|
--chart-5: oklch(0.459 0.187 3.815);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.656 0.241 354.308);
|
|
--sidebar-primary-foreground: oklch(0.971 0.014 343.198);
|
|
--sidebar-accent: oklch(0.459 0.187 3.815);
|
|
--sidebar-accent-foreground: oklch(0.971 0.014 343.198);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
|
|
/* Discord-Theme (tweakcn, Dark-Variante) */
|
|
[data-theme="discord"] {
|
|
--font-sans: 'Noto Sans JP', ui-sans-serif, sans-serif, system-ui;
|
|
--font-heading: 'Noto Sans JP', ui-sans-serif, sans-serif, system-ui;
|
|
--radius: 0.625rem;
|
|
--background: oklch(0.3225 0.0107 278.2517);
|
|
--foreground: oklch(1 0 0);
|
|
--card: oklch(0.3502 0.0122 279.2835);
|
|
--card-foreground: oklch(1 0 0);
|
|
--popover: oklch(0.3502 0.0122 279.2835);
|
|
--popover-foreground: oklch(1 0 0);
|
|
--primary: oklch(0.5774 0.2091 273.8504);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.3779 0.0118 285.8207);
|
|
--secondary-foreground: oklch(1 0 0);
|
|
--muted: oklch(0.3066 0.0108 278.2166);
|
|
--muted-foreground: oklch(0.723 0.0087 278.582);
|
|
--accent: oklch(0.4074 0.0134 280.1154);
|
|
--accent-foreground: oklch(1 0 0);
|
|
--destructive: oklch(0.8004 0.1141 23.185);
|
|
--border: oklch(0.369 0.0103 278.3345);
|
|
--input: oklch(0.3066 0.0108 278.2166);
|
|
--ring: oklch(0.5774 0.2091 273.8504);
|
|
--chart-1: oklch(0.8092 0.1122 345.1956);
|
|
--chart-2: oklch(0.8757 0.0979 83.6546);
|
|
--chart-3: oklch(0.9075 0.0946 165.054);
|
|
--chart-4: oklch(0.8406 0.0699 242.1914);
|
|
--chart-5: oklch(0.7865 0.1232 309.4396);
|
|
--sidebar: oklch(0.2981 0.0091 276.8201);
|
|
--sidebar-foreground: oklch(0.6876 0.0102 279.6082);
|
|
--sidebar-primary: oklch(0.3804 0.0102 278.3511);
|
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
--sidebar-accent: oklch(0.3309 0.0087 285.9137);
|
|
--sidebar-accent-foreground: oklch(1 0 0);
|
|
--sidebar-border: oklch(0.3494 0.0087 276.903);
|
|
--sidebar-ring: oklch(0.7151 0.1523 235.2888);
|
|
}
|
|
|
|
/* Cyberpunk-Theme (tweakcn „赛博朋克", Dark-Variante):
|
|
Neon-Grün auf Schwarz, Magenta-Primary, eckig, Glow-Schatten */
|
|
[data-theme="cyberpunk"] {
|
|
--font-sans: 'Orbitron', sans-serif;
|
|
--font-heading: 'Orbitron', sans-serif;
|
|
--radius: 0rem;
|
|
--background: oklch(0.1149 0 0);
|
|
--foreground: oklch(0.8803 0.2083 157.334);
|
|
--card: oklch(0.1591 0 0);
|
|
--card-foreground: oklch(1 0 0);
|
|
--popover: oklch(0.1149 0 0);
|
|
--popover-foreground: oklch(0.8803 0.2083 157.334);
|
|
--primary: oklch(0.6083 0.2973 312.1096);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.7392 0.1576 235.3407);
|
|
--secondary-foreground: oklch(1 0 0);
|
|
--muted: oklch(0.2178 0 0);
|
|
--muted-foreground: oklch(0.5693 0 0);
|
|
--accent: oklch(0.6354 0.2541 15.4582);
|
|
--accent-foreground: oklch(1 0 0);
|
|
--destructive: oklch(0.6317 0.2544 21.7529);
|
|
--border: oklch(0.3211 0 0);
|
|
--input: oklch(0.1591 0 0);
|
|
--ring: oklch(0.6083 0.2973 312.1096);
|
|
--chart-1: oklch(0.6083 0.2973 312.1096);
|
|
--chart-2: oklch(0.8803 0.2083 157.334);
|
|
--chart-3: oklch(0.7392 0.1576 235.3407);
|
|
--chart-4: oklch(0.6354 0.2541 15.4582);
|
|
--chart-5: oklch(0.9616 0.213 112.0777);
|
|
--sidebar: oklch(0.0847 0 0);
|
|
--sidebar-foreground: oklch(0.6268 0 0);
|
|
--sidebar-primary: oklch(0.6083 0.2973 312.1096);
|
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
--sidebar-accent: oklch(0.2178 0 0);
|
|
--sidebar-accent-foreground: oklch(0.8803 0.2083 157.334);
|
|
--sidebar-border: oklch(0.252 0 0);
|
|
--sidebar-ring: oklch(0.7392 0.1576 235.3407);
|
|
--shadow-2xs: 0 0 20px 4px hsl(340 100% 50% / 0.4);
|
|
--shadow-xs: 0 0 20px 4px hsl(340 100% 50% / 0.4);
|
|
--shadow-sm: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 1px 2px 3px hsl(340 100% 50% / 0.8);
|
|
--shadow: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 1px 2px 3px hsl(340 100% 50% / 0.8);
|
|
--shadow-md: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 2px 4px 3px hsl(340 100% 50% / 0.8);
|
|
--shadow-lg: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 4px 6px 3px hsl(340 100% 50% / 0.8);
|
|
--shadow-xl: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 8px 10px 3px hsl(340 100% 50% / 0.8);
|
|
--shadow-2xl: 0 0 20px 4px hsl(340 100% 50%);
|
|
}
|
|
|
|
[data-theme="cyberpunk"] body {
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* Spring-Theme (tweakcn „CuteSpringTheme", Dark-Variante):
|
|
Mauve/Pflaume-Hintergrund, Pink-Primary, Mint-Secondary, sehr rund */
|
|
[data-theme="spring"] {
|
|
--font-sans: 'Jua', sans-serif;
|
|
--font-heading: 'Jua', sans-serif;
|
|
--radius: 1.25rem;
|
|
--background: oklch(0.2482 0.0307 354.5794);
|
|
--foreground: oklch(0.9678 0.0166 3.6461);
|
|
--card: oklch(0.3001 0.0369 357.054);
|
|
--card-foreground: oklch(0.9678 0.0166 3.6461);
|
|
--popover: oklch(0.3001 0.0369 357.054);
|
|
--popover-foreground: oklch(0.9678 0.0166 3.6461);
|
|
--primary: oklch(0.7716 0.1387 9.6611);
|
|
--primary-foreground: oklch(0.2482 0.0307 354.5794);
|
|
--secondary: oklch(0.766 0.1179 145.295);
|
|
--secondary-foreground: oklch(0.2941 0.0509 145.0535);
|
|
--muted: oklch(0.3458 0.0388 356.0232);
|
|
--muted-foreground: oklch(0.8178 0.0293 355.5969);
|
|
--accent: oklch(0.8391 0.1615 84.3763);
|
|
--accent-foreground: oklch(0.2482 0.0307 354.5794);
|
|
--destructive: oklch(0.6875 0.142 21.4566);
|
|
--border: oklch(0.4074 0.043 356.7696);
|
|
--input: oklch(0.3001 0.0369 357.054);
|
|
--ring: oklch(0.7716 0.1387 9.6611);
|
|
--chart-1: oklch(0.7716 0.1387 9.6611);
|
|
--chart-2: oklch(0.766 0.1179 145.295);
|
|
--chart-3: oklch(0.8391 0.1615 84.3763);
|
|
--chart-4: oklch(0.6297 0.1321 299.3578);
|
|
--chart-5: oklch(0.7546 0.1512 38.2575);
|
|
--sidebar: oklch(0.2239 0.0279 355.4364);
|
|
--sidebar-foreground: oklch(0.9678 0.0166 3.6461);
|
|
--sidebar-primary: oklch(0.7716 0.1387 9.6611);
|
|
--sidebar-primary-foreground: oklch(0.2482 0.0307 354.5794);
|
|
--sidebar-accent: oklch(0.3001 0.0369 357.054);
|
|
--sidebar-accent-foreground: oklch(0.9678 0.0166 3.6461);
|
|
--sidebar-border: oklch(0.3458 0.0388 356.0232);
|
|
--sidebar-ring: oklch(0.7716 0.1387 9.6611);
|
|
}
|
|
|
|
[data-theme="spring"] body {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Terminal-Theme (tweakcn „iconic terminal", Dark-Variante):
|
|
Monospace, Teal-Phosphor auf Schwarz, eckig, keine Schatten */
|
|
[data-theme="terminal"] {
|
|
--font-sans: 'JetBrains Mono', monospace;
|
|
--font-heading: 'JetBrains Mono', monospace;
|
|
--radius: 0rem;
|
|
--background: oklch(0.1234 0.0134 174.8007);
|
|
--foreground: oklch(0.7678 0.1655 162.189);
|
|
--card: oklch(0.1577 0.018 172.3648);
|
|
--card-foreground: oklch(0.7678 0.1655 162.189);
|
|
--popover: oklch(0.1414 0.0154 174.4925);
|
|
--popover-foreground: oklch(0.7678 0.1655 162.189);
|
|
--primary: oklch(0.7678 0.1655 162.189);
|
|
--primary-foreground: oklch(0.1234 0.0134 174.8007);
|
|
--secondary: oklch(0.2393 0.0298 170.0849);
|
|
--secondary-foreground: oklch(0.7678 0.1655 162.189);
|
|
--muted: oklch(0.2123 0.0248 170.4461);
|
|
--muted-foreground: oklch(0.4814 0.0721 168.7206);
|
|
--accent: oklch(0.304 0.0414 169.4923);
|
|
--accent-foreground: oklch(0.8309 0.1796 162.0706);
|
|
--destructive: oklch(0.4344 0.1466 25.7809);
|
|
--border: oklch(0.4274 0.0886 163.5258);
|
|
--input: oklch(0.3519 0.0714 164.2596);
|
|
--ring: oklch(0.7678 0.1655 162.189);
|
|
--chart-1: oklch(0.7678 0.1655 162.189);
|
|
--chart-2: oklch(0.8052 0.1423 171.7621);
|
|
--chart-3: oklch(0.7935 0.133 163.1545);
|
|
--chart-4: oklch(0.6201 0.0963 179.7192);
|
|
--chart-5: oklch(0.4814 0.0721 168.7206);
|
|
--sidebar: oklch(0.0979 0.0106 174.8007);
|
|
--sidebar-foreground: oklch(0.7678 0.1655 162.189);
|
|
--sidebar-primary: oklch(0.7678 0.1655 162.189);
|
|
--sidebar-primary-foreground: oklch(0.1234 0.0134 174.8007);
|
|
--sidebar-accent: oklch(0.2393 0.0298 170.0849);
|
|
--sidebar-accent-foreground: oklch(0.8309 0.1796 162.0706);
|
|
--sidebar-border: oklch(0.3519 0.0714 164.2596);
|
|
--sidebar-ring: oklch(0.7678 0.1655 162.189);
|
|
--shadow-2xs: 0 0 0 0 transparent;
|
|
--shadow-xs: 0 0 0 0 transparent;
|
|
--shadow-sm: 0 0 0 0 transparent;
|
|
--shadow: 0 0 0 0 transparent;
|
|
--shadow-md: 0 0 0 0 transparent;
|
|
--shadow-lg: 0 0 0 0 transparent;
|
|
--shadow-xl: 0 0 0 0 transparent;
|
|
--shadow-2xl: 0 0 0 0 transparent;
|
|
}
|
|
|
|
[data-theme="terminal"] body {
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Infoseer-Theme (tweakcn, Dark-Variante): schlichtes Monochrome,
|
|
weiße Primary-Buttons mit dunkler Schrift */
|
|
[data-theme="infoseer"] {
|
|
--font-sans: 'Fira Sans', ui-sans-serif, sans-serif, system-ui;
|
|
--font-heading: 'Fira Sans', ui-sans-serif, sans-serif, system-ui;
|
|
--radius: 0.625rem;
|
|
--background: oklch(0.2138 0.0019 286.2347);
|
|
--foreground: oklch(0.9851 0 0);
|
|
--card: oklch(0.2138 0.0019 286.2347);
|
|
--card-foreground: oklch(0.9851 0 0);
|
|
--popover: oklch(0.2686 0 0);
|
|
--popover-foreground: oklch(0.9851 0 0);
|
|
--primary: oklch(0.9219 0 0);
|
|
--primary-foreground: oklch(0.2138 0.0019 286.2347);
|
|
--secondary: oklch(0.2686 0 0);
|
|
--secondary-foreground: oklch(0.9851 0 0);
|
|
--muted: oklch(0.2686 0 0);
|
|
--muted-foreground: oklch(0.709 0 0);
|
|
--accent: oklch(0.3715 0 0);
|
|
--accent-foreground: oklch(0.9851 0 0);
|
|
--destructive: oklch(0.709 0.1879 11.8353);
|
|
--border: oklch(0.2768 0 0);
|
|
--input: oklch(0.325 0 0);
|
|
--ring: oklch(0.5555 0 0);
|
|
--chart-1: oklch(0.8497 0.0888 233.6561);
|
|
--chart-2: oklch(0.6874 0.157 248.1539);
|
|
--chart-3: oklch(0.619 0.181 254.6741);
|
|
--chart-4: oklch(0.5528 0.1826 257.4254);
|
|
--chart-5: oklch(0.4684 0.1508 259.5323);
|
|
--sidebar: oklch(0.2138 0.0019 286.2347);
|
|
--sidebar-foreground: oklch(0.9851 0 0);
|
|
--sidebar-primary: oklch(0.5526 0.2035 259.283);
|
|
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
|
--sidebar-accent: oklch(0.2686 0 0);
|
|
--sidebar-accent-foreground: oklch(0.9851 0 0);
|
|
--sidebar-border: oklch(0.2768 0 0);
|
|
--sidebar-ring: oklch(0.4386 0 0);
|
|
}
|
|
|
|
[data-theme="infoseer"] body {
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
/* Homebrew-Theme (tweakcn, Dark-Variante): Matrix-Grün auf Schwarz,
|
|
eckig, grüner Neon-Glow */
|
|
[data-theme="homebrew"] {
|
|
--font-sans: 'Inter', ui-sans-serif, sans-serif, system-ui;
|
|
--font-heading: 'JetBrains Mono', ui-monospace, monospace;
|
|
--radius: 0rem;
|
|
--background: oklch(0 0 0);
|
|
--foreground: oklch(0.8686 0.2776 144.4661);
|
|
--card: oklch(0.2295 0.0624 145.0466);
|
|
--card-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--popover: oklch(0 0 0);
|
|
--popover-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--primary: oklch(0.8686 0.2776 144.4661);
|
|
--primary-foreground: oklch(0 0 0);
|
|
--secondary: oklch(0.3053 0.1039 142.4953);
|
|
--secondary-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--muted: oklch(0.1887 0.0642 142.4953);
|
|
--muted-foreground: oklch(0.7556 0.2021 146.5242);
|
|
--accent: oklch(0.3053 0.1039 142.4953);
|
|
--accent-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--destructive: oklch(0.6786 0.2095 24.6583);
|
|
--border: oklch(0.5412 0.175 144.0774);
|
|
--input: oklch(0.1149 0 0);
|
|
--ring: oklch(0.8686 0.2776 144.4661);
|
|
--chart-1: oklch(0.8686 0.2776 144.4661);
|
|
--chart-2: oklch(0.5638 0.1872 143.245);
|
|
--chart-3: oklch(0.3053 0.1039 142.4953);
|
|
--chart-4: oklch(0.1179 0.0327 343.3438);
|
|
--chart-5: oklch(0.8686 0.2776 144.4661);
|
|
--sidebar: oklch(0.1149 0 0);
|
|
--sidebar-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--sidebar-primary: oklch(0.8686 0.2776 144.4661);
|
|
--sidebar-primary-foreground: oklch(0 0 0);
|
|
--sidebar-accent: oklch(0.3053 0.1039 142.4953);
|
|
--sidebar-accent-foreground: oklch(0.8686 0.2776 144.4661);
|
|
--sidebar-border: oklch(0.5412 0.175 144.0774);
|
|
--sidebar-ring: oklch(0.8686 0.2776 144.4661);
|
|
--shadow-2xs: 0 0 15px 2px hsl(135 100% 50% / 0.2);
|
|
--shadow-xs: 0 0 15px 2px hsl(135 100% 50% / 0.2);
|
|
--shadow-sm: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 1px 2px 1px hsl(135 100% 50% / 0.4);
|
|
--shadow: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 1px 2px 1px hsl(135 100% 50% / 0.4);
|
|
--shadow-md: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 2px 4px 1px hsl(135 100% 50% / 0.4);
|
|
--shadow-lg: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 4px 6px 1px hsl(135 100% 50% / 0.4);
|
|
--shadow-xl: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 8px 10px 1px hsl(135 100% 50% / 0.4);
|
|
--shadow-2xl: 0 0 15px 2px hsl(135 100% 50%);
|
|
}
|
|
|
|
[data-theme="homebrew"] body {
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Florense-Theme (tweakcn, Dark-Variante): reines Monochrome,
|
|
weiße Primary mit schwarzer Schrift, keine Schatten */
|
|
[data-theme="florense"] {
|
|
--font-sans: 'Geist', ui-sans-serif, sans-serif, system-ui;
|
|
--font-heading: 'Lora', ui-serif, serif;
|
|
--radius: 1rem;
|
|
--background: oklch(0.0969 0 0);
|
|
--foreground: oklch(0.9851 0 0);
|
|
--card: oklch(0 0 0);
|
|
--card-foreground: oklch(0.9851 0 0);
|
|
--popover: oklch(0 0 0);
|
|
--popover-foreground: oklch(0.9851 0 0);
|
|
--primary: oklch(1 0 0);
|
|
--primary-foreground: oklch(0 0 0);
|
|
--secondary: oklch(0.2178 0 0);
|
|
--secondary-foreground: oklch(0.9851 0 0);
|
|
--muted: oklch(0.2178 0 0);
|
|
--muted-foreground: oklch(0.683 0 0);
|
|
--accent: oklch(0.2686 0 0);
|
|
--accent-foreground: oklch(1 0 0);
|
|
--destructive: oklch(1 0 0);
|
|
--border: oklch(0.1913 0 0);
|
|
--input: oklch(0.2686 0 0);
|
|
--ring: oklch(1 0 0);
|
|
--chart-1: oklch(1 0 0);
|
|
--chart-2: oklch(0.8452 0 0);
|
|
--chart-3: oklch(0.683 0 0);
|
|
--chart-4: oklch(0.5103 0 0);
|
|
--chart-5: oklch(0.3211 0 0);
|
|
--sidebar: oklch(0 0 0);
|
|
--sidebar-foreground: oklch(0.9851 0 0);
|
|
--sidebar-primary: oklch(1 0 0);
|
|
--sidebar-primary-foreground: oklch(0 0 0);
|
|
--sidebar-accent: oklch(0.2178 0 0);
|
|
--sidebar-accent-foreground: oklch(1 0 0);
|
|
--sidebar-border: oklch(0.2686 0 0);
|
|
--sidebar-ring: oklch(1 0 0);
|
|
--shadow-2xs: 0 0 0 0 transparent;
|
|
--shadow-xs: 0 0 0 0 transparent;
|
|
--shadow-sm: 0 0 0 0 transparent;
|
|
--shadow: 0 0 0 0 transparent;
|
|
--shadow-md: 0 0 0 0 transparent;
|
|
--shadow-lg: 0 0 0 0 transparent;
|
|
--shadow-xl: 0 0 0 0 transparent;
|
|
--shadow-2xl: 0 0 0 0 transparent;
|
|
}
|
|
|
|
/* Kawi-Green-Theme (tweakcn „high tech kawi green", Dark-Variante):
|
|
Schwarz mit Neon-Grün-Borders, roter Secondary, weiße Offset-Schatten */
|
|
[data-theme="kawi-green"] {
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-heading: 'JetBrains Mono', monospace;
|
|
--radius: 0rem;
|
|
--background: oklch(0 0 0);
|
|
--foreground: oklch(1 0 0);
|
|
--card: oklch(0 0 0);
|
|
--card-foreground: oklch(1 0 0);
|
|
--popover: oklch(0 0 0);
|
|
--popover-foreground: oklch(1 0 0);
|
|
--primary: oklch(0.8815 0.275 138.4872);
|
|
--primary-foreground: oklch(0 0 0);
|
|
--secondary: oklch(0.628 0.2577 29.2339);
|
|
--secondary-foreground: oklch(1 0 0);
|
|
--muted: oklch(0.1448 0 0);
|
|
--muted-foreground: oklch(1 0 0);
|
|
--accent: oklch(1 0 0);
|
|
--accent-foreground: oklch(0 0 0);
|
|
--destructive: oklch(0.628 0.2577 29.2339);
|
|
--border: oklch(0.8815 0.275 138.4872);
|
|
--input: oklch(0.8815 0.275 138.4872);
|
|
--ring: oklch(0.8815 0.275 138.4872);
|
|
--chart-1: oklch(0.8815 0.275 138.4872);
|
|
--chart-2: oklch(0.628 0.2577 29.2339);
|
|
--chart-3: oklch(1 0 0);
|
|
--chart-4: oklch(0.8003 0.1821 151.711);
|
|
--chart-5: oklch(0.645 0.2154 16.4393);
|
|
--sidebar: oklch(0 0 0);
|
|
--sidebar-foreground: oklch(1 0 0);
|
|
--sidebar-primary: oklch(0.8815 0.275 138.4872);
|
|
--sidebar-primary-foreground: oklch(0 0 0);
|
|
--sidebar-accent: oklch(0.1776 0 0);
|
|
--sidebar-accent-foreground: oklch(0.8815 0.275 138.4872);
|
|
--sidebar-border: oklch(0.8815 0.275 138.4872);
|
|
--sidebar-ring: oklch(0.8815 0.275 138.4872);
|
|
--shadow-2xs: -4px 4px 0 0 hsl(0 0% 100% / 0.5);
|
|
--shadow-xs: -4px 4px 0 0 hsl(0 0% 100% / 0.5);
|
|
--shadow-sm: -4px 4px 0 0 hsl(0 0% 100%), -4px 1px 2px -1px hsl(0 0% 100%);
|
|
--shadow: -4px 4px 0 0 hsl(0 0% 100%), -4px 1px 2px -1px hsl(0 0% 100%);
|
|
--shadow-md: -4px 4px 0 0 hsl(0 0% 100%), -4px 2px 4px -1px hsl(0 0% 100%);
|
|
--shadow-lg: -4px 4px 0 0 hsl(0 0% 100%), -4px 4px 6px -1px hsl(0 0% 100%);
|
|
--shadow-xl: -4px 4px 0 0 hsl(0 0% 100%), -4px 8px 10px -1px hsl(0 0% 100%);
|
|
--shadow-2xl: -4px 4px 0 0 hsl(0 0% 100%);
|
|
}
|
|
|
|
[data-theme="kawi-green"] body {
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Clo.nz-Theme (tweakcn, Dark-Variante): Slate-Dunkelblau,
|
|
Off-White-Primary, orangener Focus-Ring */
|
|
[data-theme="clonz"] {
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--radius: 0.5rem;
|
|
--background: oklch(0.2184 0.0079 274.5602);
|
|
--foreground: oklch(0.9596 0.0131 82.4019);
|
|
--card: oklch(0.2614 0.0094 276.7359);
|
|
--card-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--popover: oklch(0.2614 0.0094 276.7359);
|
|
--popover-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--primary: oklch(0.9596 0.0131 82.4019);
|
|
--primary-foreground: oklch(0.2184 0.0079 274.5602);
|
|
--secondary: oklch(0.3225 0.0205 73.1712);
|
|
--secondary-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--muted: oklch(0.3022 0.0091 276.8278);
|
|
--muted-foreground: oklch(0.7333 0.0115 280.4017);
|
|
--accent: oklch(0.3022 0.0091 276.8278);
|
|
--accent-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--destructive: oklch(0.5231 0.1583 27.6707);
|
|
--border: oklch(0.3022 0.0091 276.8278);
|
|
--input: oklch(0.3022 0.0091 276.8278);
|
|
--ring: oklch(0.6711 0.1394 48.3137);
|
|
--chart-1: oklch(0.9596 0.0131 82.4019);
|
|
--chart-2: oklch(0.6711 0.1394 48.3137);
|
|
--chart-3: oklch(0.484 0.0665 184.1633);
|
|
--chart-4: oklch(0.5194 0.0174 277.5749);
|
|
--chart-5: oklch(0.7333 0.0115 280.4017);
|
|
--sidebar: oklch(0.2184 0.0079 274.5602);
|
|
--sidebar-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--sidebar-primary: oklch(0.3022 0.0091 276.8278);
|
|
--sidebar-primary-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--sidebar-accent: oklch(0.3022 0.0091 276.8278);
|
|
--sidebar-accent-foreground: oklch(0.9596 0.0131 82.4019);
|
|
--sidebar-border: oklch(0.3022 0.0091 276.8278);
|
|
--sidebar-ring: oklch(0.6711 0.1394 48.3137);
|
|
}
|
|
|
|
/* Clawmorphism-Theme (tweakcn, Dark-Variante): neutrales Grau,
|
|
markante 6px-Offset-Schatten */
|
|
[data-theme="clawmorphism"] {
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-heading: 'Inter', sans-serif;
|
|
--radius: 0.575rem;
|
|
--background: oklch(0.2972 0 0);
|
|
--foreground: oklch(0.7826 0 0);
|
|
--card: oklch(0.325 0 0);
|
|
--card-foreground: oklch(0.7826 0 0);
|
|
--popover: oklch(0.2603 0 0);
|
|
--popover-foreground: oklch(0.931 0 0);
|
|
--primary: oklch(0.8822 0 0);
|
|
--primary-foreground: oklch(0.2435 0 0);
|
|
--secondary: oklch(0.3092 0 0);
|
|
--secondary-foreground: oklch(0.937 0 0);
|
|
--muted: oklch(0.2435 0 0);
|
|
--muted-foreground: oklch(0.6993 0 0);
|
|
--accent: oklch(0.3329 0 0);
|
|
--accent-foreground: oklch(0.9672 0 0);
|
|
--destructive: oklch(0.6398 0.0838 195.2629);
|
|
--border: oklch(0.36 0 0);
|
|
--input: oklch(0.3753 0 0);
|
|
--ring: oklch(0.2603 0 0);
|
|
--chart-1: oklch(0.9249 0 0);
|
|
--chart-2: oklch(0.7921 0 0);
|
|
--chart-3: oklch(0.66 0 0);
|
|
--chart-4: oklch(0.5208 0 0);
|
|
--chart-5: oklch(0.4017 0 0);
|
|
--sidebar: oklch(0.2435 0 0);
|
|
--sidebar-foreground: oklch(0.931 0 0);
|
|
--sidebar-primary: oklch(0.8822 0 0);
|
|
--sidebar-primary-foreground: oklch(0.2435 0 0);
|
|
--sidebar-accent: oklch(0.2809 0 0);
|
|
--sidebar-accent-foreground: oklch(0.931 0 0);
|
|
--sidebar-border: oklch(0.3171 0 0);
|
|
--sidebar-ring: oklch(0.6401 0 0);
|
|
--shadow-2xs: 6px 6px 16px 0 hsl(0 0% 8% / 0.38);
|
|
--shadow-xs: 6px 6px 16px 0 hsl(0 0% 8% / 0.38);
|
|
--shadow-sm: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 1px 2px -1px hsl(0 0% 8% / 0.76);
|
|
--shadow: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 1px 2px -1px hsl(0 0% 8% / 0.76);
|
|
--shadow-md: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 2px 4px -1px hsl(0 0% 8% / 0.76);
|
|
--shadow-lg: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 4px 6px -1px hsl(0 0% 8% / 0.76);
|
|
--shadow-xl: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 8px 10px -1px hsl(0 0% 8% / 0.76);
|
|
--shadow-2xl: 6px 6px 16px 0 hsl(0 0% 8%);
|
|
}
|
|
|
|
/* Realmorphism-Theme (tweakcn, Dark-Variante): dunkles Teal/Forest,
|
|
harte dunkelgrüne Offset-Schatten */
|
|
[data-theme="realmorphism"] {
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-heading: 'Inter', sans-serif;
|
|
--radius: 0.5rem;
|
|
--background: oklch(0.1276 0.0035 245.8087);
|
|
--foreground: oklch(0.9457 0.0091 161.3462);
|
|
--card: oklch(0.1712 0.0039 229.0605);
|
|
--card-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--popover: oklch(0.1712 0.0039 229.0605);
|
|
--popover-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--primary: oklch(0.4794 0.075 168.9054);
|
|
--primary-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--secondary: oklch(0.2201 0.0095 159.2095);
|
|
--secondary-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--muted: oklch(0.2201 0.0095 159.2095);
|
|
--muted-foreground: oklch(0.7341 0.0188 169.8711);
|
|
--accent: oklch(0.5955 0.0953 168.0699);
|
|
--accent-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--destructive: oklch(0.4041 0.112 23.5585);
|
|
--border: oklch(0.317 0.0173 165.969);
|
|
--input: oklch(0.2201 0.0095 159.2095);
|
|
--ring: oklch(0.5955 0.0953 168.0699);
|
|
--chart-1: oklch(0.4794 0.075 168.9054);
|
|
--chart-2: oklch(0.5337 0.0845 74.0079);
|
|
--chart-3: oklch(0.9068 0.1567 156.0616);
|
|
--chart-4: oklch(0.7341 0.0188 169.8711);
|
|
--chart-5: oklch(0.879 0.1534 91.6054);
|
|
--sidebar: oklch(0.1276 0.0035 245.8087);
|
|
--sidebar-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--sidebar-primary: oklch(0.4794 0.075 168.9054);
|
|
--sidebar-primary-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--sidebar-accent: oklch(0.2201 0.0095 159.2095);
|
|
--sidebar-accent-foreground: oklch(0.9457 0.0091 161.3462);
|
|
--sidebar-border: oklch(0.317 0.0173 165.969);
|
|
--sidebar-ring: oklch(0.5955 0.0953 168.0699);
|
|
--shadow-2xs: 2px 2px 0 1px hsl(160.6 43.6% 29.2% / 0.5);
|
|
--shadow-xs: 2px 2px 0 1px hsl(160.6 43.6% 29.2% / 0.5);
|
|
--shadow-sm: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 1px 2px 0 hsl(160.6 43.6% 29.2%);
|
|
--shadow: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 1px 2px 0 hsl(160.6 43.6% 29.2%);
|
|
--shadow-md: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 2px 4px 0 hsl(160.6 43.6% 29.2%);
|
|
--shadow-lg: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 4px 6px 0 hsl(160.6 43.6% 29.2%);
|
|
--shadow-xl: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 8px 10px 0 hsl(160.6 43.6% 29.2%);
|
|
--shadow-2xl: 2px 2px 0 1px hsl(160.6 43.6% 29.2%);
|
|
}
|
|
|
|
/* Amber-Theme (tweakcn „my amber theme", Dark-Variante):
|
|
Amber-Phosphor auf Schwarz, eckig, Amber-Glow, Retro-Font Workbench */
|
|
[data-theme="amber"] {
|
|
--font-sans: 'Workbench', ui-monospace, monospace;
|
|
--font-heading: 'Workbench', ui-monospace, monospace;
|
|
--radius: 0rem;
|
|
--background: oklch(0 0 0);
|
|
--foreground: oklch(0.8403 0.1724 84.0757);
|
|
--card: oklch(0.1149 0 0);
|
|
--card-foreground: oklch(0.8403 0.1724 84.0757);
|
|
--popover: oklch(0.1149 0 0);
|
|
--popover-foreground: oklch(0.8403 0.1724 84.0757);
|
|
--primary: oklch(0.8403 0.1724 84.0757);
|
|
--primary-foreground: oklch(0 0 0);
|
|
--secondary: oklch(0.266 0.055 80.8676);
|
|
--secondary-foreground: oklch(0.8403 0.1724 84.0757);
|
|
--muted: oklch(0.1845 0.0378 85.8185);
|
|
--muted-foreground: oklch(0.5155 0.107 79.2295);
|
|
--accent: oklch(0.8403 0.1724 84.0757);
|
|
--accent-foreground: oklch(0 0 0);
|
|
--destructive: oklch(0.2428 0.0996 29.2339);
|
|
--border: oklch(0.8403 0.1724 84.0757);
|
|
--input: oklch(0.8403 0.1724 84.0757);
|
|
--ring: oklch(0.8403 0.1724 84.0757);
|
|
--chart-1: oklch(0.8403 0.1724 84.0757);
|
|
--chart-2: oklch(0.7773 0.1595 84.1047);
|
|
--chart-3: oklch(0.7119 0.146 84.6103);
|
|
--chart-4: oklch(0.6462 0.1325 84.7159);
|
|
--chart-5: oklch(0.5775 0.1183 85.4662);
|
|
--sidebar: oklch(0 0 0);
|
|
--sidebar-foreground: oklch(0.8403 0.1724 84.0757);
|
|
--sidebar-primary: oklch(0.8403 0.1724 84.0757);
|
|
--sidebar-primary-foreground: oklch(0 0 0);
|
|
--sidebar-accent: oklch(0.266 0.055 80.8676);
|
|
--sidebar-accent-foreground: oklch(0.8403 0.1724 84.0757);
|
|
--sidebar-border: oklch(0.8403 0.1724 84.0757);
|
|
--sidebar-ring: oklch(0.8403 0.1724 84.0757);
|
|
--shadow-2xs: 0 0 4px 0 hsl(45 100% 50% / 0.1);
|
|
--shadow-xs: 0 0 4px 0 hsl(45 100% 50% / 0.1);
|
|
--shadow-sm: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 1px 2px -1px hsl(45 100% 50% / 0.2);
|
|
--shadow: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 1px 2px -1px hsl(45 100% 50% / 0.2);
|
|
--shadow-md: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 2px 4px -1px hsl(45 100% 50% / 0.2);
|
|
--shadow-lg: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 4px 6px -1px hsl(45 100% 50% / 0.2);
|
|
--shadow-xl: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 8px 10px -1px hsl(45 100% 50% / 0.2);
|
|
--shadow-2xl: 0 0 4px 0 hsl(45 100% 50% / 0.5);
|
|
}
|
|
|
|
[data-theme="amber"] body {
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
[data-theme="sunny-sprout"] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Instrument Sans', 'Inter', sans-serif;
|
|
--font-heading: 'Instrument Sans', 'Inter', sans-serif;
|
|
--font-serif: 'Source Serif Pro', serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--radius: 0.75rem;
|
|
--background: #2D2F28;
|
|
--foreground: #EEDF86;
|
|
--card: #373A31;
|
|
--card-foreground: #EEDF86;
|
|
--popover: #2D2F28;
|
|
--popover-foreground: #EEDF86;
|
|
--primary: #C7CD88;
|
|
--primary-foreground: #2D2F28;
|
|
--secondary: #969C87;
|
|
--secondary-foreground: #FDFBF7;
|
|
--muted: #3F4238;
|
|
--muted-foreground: #92886D;
|
|
--accent: #E7A552;
|
|
--accent-foreground: #2D2F28;
|
|
--destructive: #92886D;
|
|
--destructive-foreground: #EEDF86;
|
|
--border: #4C5141;
|
|
--input: #3F4238;
|
|
--ring: #C7CD88;
|
|
--chart-1: #C7CD88;
|
|
--chart-2: #969C87;
|
|
--chart-3: #E7A552;
|
|
--chart-4: #EEDF86;
|
|
--chart-5: #92886D;
|
|
--sidebar: #242620;
|
|
--sidebar-foreground: #C7CD88;
|
|
--sidebar-primary: #C7CD88;
|
|
--sidebar-primary-foreground: #2D2F28;
|
|
--sidebar-accent: #969C87;
|
|
--sidebar-accent-foreground: #FDFBF7;
|
|
--sidebar-border: #3F4238;
|
|
--sidebar-ring: #C7CD88;
|
|
--shadow-color: #000000;
|
|
--shadow-opacity: 0.4;
|
|
--shadow-blur: 12px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0px;
|
|
--shadow-offset-y: 6px;
|
|
--shadow-2xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
|
|
--shadow-xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
|
|
--shadow-sm: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
|
|
--shadow: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
|
|
--shadow-md: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 2px 4px -1px rgb(0 0 0 / 0.4);
|
|
--shadow-lg: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.4);
|
|
--shadow-xl: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 8px 10px -1px rgb(0 0 0 / 0.4);
|
|
--shadow-2xl: 0px 6px 12px 0px rgb(0 0 0 / 1);
|
|
--letter-spacing: 0.01em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="sunny-sprout"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* Spotify-Theme (tweakcn „Spotify", Dark-Variante):
|
|
sehr dunkles Graugrün, Spotify-Grün als Primary, dezente Akzente */
|
|
[data-theme="spotify"] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
|
|
--font-heading: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
|
|
--font-serif: Georgia, serif;
|
|
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--radius: 0.75rem;
|
|
--background: oklch(0.1606 0.0053 145.3237);
|
|
--foreground: oklch(0.9500 0.0034 145.5487);
|
|
--card: oklch(0.2090 0.0074 145.3034);
|
|
--card-foreground: oklch(0.9500 0.0034 145.5487);
|
|
--popover: oklch(0.2392 0.0072 145.3463);
|
|
--popover-foreground: oklch(0.9500 0.0034 145.5487);
|
|
--primary: oklch(0.7892 0.1803 148.7810);
|
|
--primary-foreground: oklch(0.1613 0.0088 4.6340);
|
|
--secondary: oklch(0.2509 0.0081 153.3184);
|
|
--secondary-foreground: oklch(0.9004 0.0103 145.4890);
|
|
--muted: oklch(0.2297 0.0083 153.2517);
|
|
--muted-foreground: oklch(0.6801 0.0199 150.4135);
|
|
--accent: oklch(0.2816 0.0763 148.8490);
|
|
--accent-foreground: oklch(0.8494 0.0990 148.7724);
|
|
--destructive: oklch(0.6789 0.2096 21.9475);
|
|
--destructive-foreground: oklch(1.0000 0 0);
|
|
--border: oklch(0.2988 0.0100 151.4948);
|
|
--input: oklch(0.2988 0.0100 151.4948);
|
|
--ring: oklch(0.7892 0.1803 148.7810);
|
|
--chart-1: oklch(0.7892 0.1803 148.7810);
|
|
--chart-2: oklch(0.8500 0.1550 173.9924);
|
|
--chart-3: oklch(0.8790 0.1436 123.7404);
|
|
--chart-4: oklch(0.6899 0.1121 198.6311);
|
|
--chart-5: oklch(0.9010 0.1081 99.0016);
|
|
--sidebar: oklch(0.1902 0.0086 153.0805);
|
|
--sidebar-foreground: oklch(0.9500 0.0034 145.5487);
|
|
--sidebar-primary: oklch(0.7892 0.1803 148.7810);
|
|
--sidebar-primary-foreground: oklch(0.1613 0.0088 4.6340);
|
|
--sidebar-accent: oklch(0.2816 0.0763 148.8490);
|
|
--sidebar-accent-foreground: oklch(0.8494 0.0990 148.7724);
|
|
--sidebar-border: oklch(0.2988 0.0100 151.4948);
|
|
--sidebar-ring: oklch(0.7892 0.1803 148.7810);
|
|
--shadow-color: #000000;
|
|
--shadow-opacity: 0.35;
|
|
--shadow-blur: 16px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0px;
|
|
--shadow-offset-y: 4px;
|
|
--shadow-2xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
|
|
--shadow-xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
|
|
--shadow-sm: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
|
|
--shadow: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
|
|
--shadow-md: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 2px 4px -1px hsl(0 0% 0% / 0.35);
|
|
--shadow-lg: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 4px 6px -1px hsl(0 0% 0% / 0.35);
|
|
--shadow-xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 8px 10px -1px hsl(0 0% 0% / 0.35);
|
|
--shadow-2xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.88);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="spotify"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* Nordic Theme (tweakcn, Dark-Variante):
|
|
kühles Blaugrau mit ruhigen, kontrastarmen Akzenten */
|
|
[data-theme="nordic"] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-heading: 'Inter', sans-serif;
|
|
--font-serif: 'Source Serif 4', serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--radius: 0.6rem;
|
|
--background: oklch(0.2890 0.0214 265.8475);
|
|
--foreground: oklch(0.8993 0.0164 262.7493);
|
|
--card: oklch(0.3244 0.0229 264.1820);
|
|
--card-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--popover: oklch(0.2603 0.0179 266.2766);
|
|
--popover-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--primary: oklch(0.4157 0.0324 264.1312);
|
|
--primary-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--secondary: oklch(0.4157 0.0324 264.1312);
|
|
--secondary-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--muted: oklch(0.3555 0.0299 264.0846);
|
|
--muted-foreground: oklch(0.7008 0.0301 263.3734);
|
|
--accent: oklch(0.3555 0.0299 264.0846);
|
|
--accent-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--destructive: oklch(0.6061 0.1206 15.3419);
|
|
--destructive-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--border: oklch(0.3593 0.0223 264.2405);
|
|
--input: oklch(0.3244 0.0229 264.1820);
|
|
--ring: oklch(0.4631 0.0209 264.3476);
|
|
--chart-1: oklch(0.8549 0.0892 84.0933);
|
|
--chart-2: oklch(0.7683 0.0749 131.0631);
|
|
--chart-3: oklch(0.6061 0.1206 15.3419);
|
|
--chart-4: oklch(0.6929 0.0963 38.2407);
|
|
--chart-5: oklch(0.5944 0.0772 254.0278);
|
|
--sidebar: oklch(0.2603 0.0179 266.2766);
|
|
--sidebar-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--sidebar-primary: oklch(0.3555 0.0299 264.0846);
|
|
--sidebar-primary-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--sidebar-accent: oklch(0.3555 0.0299 264.0846);
|
|
--sidebar-accent-foreground: oklch(0.8993 0.0164 262.7493);
|
|
--sidebar-border: oklch(0.3555 0.0299 264.0846);
|
|
--sidebar-ring: oklch(0.3244 0.0229 264.1820);
|
|
--shadow-color: oklch(0 0 0);
|
|
--shadow-opacity: 0.1;
|
|
--shadow-blur: 3px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0;
|
|
--shadow-offset-y: 1px;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="nordic"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* SS-Theme (tweakcn „ss", Dark-Variante):
|
|
neutrales Schwarz/Grau ohne Farbakzente */
|
|
[data-theme="ss"] {
|
|
color-scheme: dark;
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--radius: 0.625rem;
|
|
--background: oklch(0.1450 0 0);
|
|
--foreground: oklch(0.9850 0 0);
|
|
--card: oklch(0.2050 0 0);
|
|
--card-foreground: oklch(0.9850 0 0);
|
|
--popover: oklch(0.2690 0 0);
|
|
--popover-foreground: oklch(0.9850 0 0);
|
|
--primary: oklch(0.9220 0 0);
|
|
--primary-foreground: oklch(0.2050 0 0);
|
|
--secondary: oklch(0.2690 0 0);
|
|
--secondary-foreground: oklch(0.9850 0 0);
|
|
--muted: oklch(0.2690 0 0);
|
|
--muted-foreground: oklch(0.7080 0 0);
|
|
--accent: oklch(0.3710 0 0);
|
|
--accent-foreground: oklch(0.9850 0 0);
|
|
--destructive: oklch(0.7040 0.1910 22.2160);
|
|
--destructive-foreground: oklch(0.9850 0 0);
|
|
--border: oklch(0.2750 0 0);
|
|
--input: oklch(0.3250 0 0);
|
|
--ring: oklch(0.5560 0 0);
|
|
--chart-1: oklch(0.8100 0.1000 252);
|
|
--chart-2: oklch(0.6200 0.1900 260);
|
|
--chart-3: oklch(0.5500 0.2200 263);
|
|
--chart-4: oklch(0.4900 0.2200 264);
|
|
--chart-5: oklch(0.4200 0.1800 266);
|
|
--sidebar: oklch(0.2050 0 0);
|
|
--sidebar-foreground: oklch(0.9850 0 0);
|
|
--sidebar-primary: oklch(0.4880 0.2430 264.3760);
|
|
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
|
--sidebar-accent: oklch(0.2690 0 0);
|
|
--sidebar-accent-foreground: oklch(0.9850 0 0);
|
|
--sidebar-border: oklch(0.2750 0 0);
|
|
--sidebar-ring: oklch(0.4390 0 0);
|
|
--shadow-color: oklch(0 0 0);
|
|
--shadow-opacity: 0.1;
|
|
--shadow-blur: 3px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0;
|
|
--shadow-offset-y: 1px;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="ss"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* Amethyst-Haze-Theme (tweakcn, Dark-Variante):
|
|
dunkles Violett mit lavendelfarbener Primary und rosé Akzenten */
|
|
[data-theme="amethyst-haze"] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Geist', sans-serif;
|
|
--font-heading: 'Geist', sans-serif;
|
|
--font-serif: 'Lora', Georgia, serif;
|
|
--font-mono: 'Fira Code', 'Courier New', monospace;
|
|
--radius: 0.5rem;
|
|
--background: #1a1823;
|
|
--foreground: #e0ddef;
|
|
--card: #232030;
|
|
--card-foreground: #e0ddef;
|
|
--popover: #232030;
|
|
--popover-foreground: #e0ddef;
|
|
--primary: #a995c9;
|
|
--primary-foreground: #1a1823;
|
|
--secondary: #5a5370;
|
|
--secondary-foreground: #e0ddef;
|
|
--muted: #242031;
|
|
--muted-foreground: #a09aad;
|
|
--accent: #372e3f;
|
|
--accent-foreground: #f2b8c6;
|
|
--destructive: #e57373;
|
|
--destructive-foreground: #1a1823;
|
|
--border: #302c40;
|
|
--input: #413d57;
|
|
--ring: #655480;
|
|
--chart-1: #a995c9;
|
|
--chart-2: #f2b8c6;
|
|
--chart-3: #77b8a1;
|
|
--chart-4: #f0c88d;
|
|
--chart-5: #a0bbe3;
|
|
--sidebar: #16141e;
|
|
--sidebar-foreground: #e0ddef;
|
|
--sidebar-primary: #a995c9;
|
|
--sidebar-primary-foreground: #1a1823;
|
|
--sidebar-accent: #372e3f;
|
|
--sidebar-accent-foreground: #f2b8c6;
|
|
--sidebar-border: #2a273a;
|
|
--sidebar-ring: #a995c9;
|
|
--shadow-color: hsl(0 0% 0%);
|
|
--shadow-opacity: 0.06;
|
|
--shadow-blur: 5px;
|
|
--shadow-spread: 1px;
|
|
--shadow-offset-x: 1px;
|
|
--shadow-offset-y: 2px;
|
|
--shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
|
|
--shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
|
|
--shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="amethyst-haze"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* Deep-Wine-Theme (tweakcn „Deep Wine (Final)", Dark-Variante):
|
|
dunkles Blaugrau mit weinroter Primary */
|
|
[data-theme="deep-wine"] {
|
|
color-scheme: dark;
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--radius: 0.5rem;
|
|
--background: oklch(0.1608 0.0053 219.8085);
|
|
--foreground: oklch(0.9011 0.0051 228.8246);
|
|
--card: oklch(0.2198 0.0060 236.8407);
|
|
--card-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--popover: oklch(0.2198 0.0060 236.8407);
|
|
--popover-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--primary: oklch(0.5158 0.1252 6.4511);
|
|
--primary-foreground: oklch(0.9851 0 0);
|
|
--secondary: oklch(0.2198 0.0060 236.8407);
|
|
--secondary-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--muted: oklch(0.1989 0.0051 248.0841);
|
|
--muted-foreground: oklch(0.5810 0.0047 236.5524);
|
|
--accent: oklch(0.2412 0.0059 236.7944);
|
|
--accent-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--destructive: oklch(0.5010 0.2031 25.0094);
|
|
--destructive-foreground: oklch(0.9791 0 0);
|
|
--border: oklch(0.2791 0.0070 248.0795);
|
|
--input: oklch(0.2585 0.0071 248.1047);
|
|
--ring: oklch(0.5158 0.1252 6.4511);
|
|
--chart-1: oklch(0.5158 0.1252 6.4511);
|
|
--chart-2: oklch(0.6503 0.1704 144.9078);
|
|
--chart-3: oklch(0.7195 0.1780 55.0907);
|
|
--chart-4: oklch(0.6210 0.1998 259.8901);
|
|
--chart-5: oklch(0.6201 0.1591 319.7924);
|
|
--sidebar: oklch(0.1320 0.0049 226.3894);
|
|
--sidebar-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--sidebar-primary: oklch(0.5158 0.1252 6.4511);
|
|
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
|
--sidebar-accent: oklch(0.1989 0.0051 248.0841);
|
|
--sidebar-accent-foreground: oklch(0.9011 0.0051 228.8246);
|
|
--sidebar-border: oklch(0.2023 0.0061 236.8873);
|
|
--sidebar-ring: oklch(0.5158 0.1252 6.4511);
|
|
--shadow-color: oklch(0 0 0);
|
|
--shadow-opacity: 0.1;
|
|
--shadow-blur: 3px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0;
|
|
--shadow-offset-y: 1px;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="deep-wine"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* myClaude-Theme (tweakcn, Dark-Variante):
|
|
warmes Dunkelgrau mit Claude-Orange und Serif-Schrift */
|
|
[data-theme="my-claude"] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Newsreader', ui-serif, serif;
|
|
--font-heading: 'Newsreader', ui-serif, serif;
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
--radius: 1rem;
|
|
--background: #151515;
|
|
--foreground: #ecebe6;
|
|
--card: #212121;
|
|
--card-foreground: #ecebe6;
|
|
--popover: #20201f;
|
|
--popover-foreground: #ecebe6;
|
|
--primary: #d97757;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #2d2d2d;
|
|
--secondary-foreground: #ecebe6;
|
|
--muted: #212121;
|
|
--muted-foreground: #a3a29b;
|
|
--accent: #343434;
|
|
--accent-foreground: #ecebe6;
|
|
--destructive: #ef4444;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #292929;
|
|
--input: #20201f;
|
|
--ring: #d97757;
|
|
--chart-1: #6da7ec;
|
|
--chart-2: #9c87f5;
|
|
--chart-3: #1a1915;
|
|
--chart-4: #2f2b48;
|
|
--chart-5: #b4552d;
|
|
--sidebar: #151515;
|
|
--sidebar-foreground: #ecebe6;
|
|
--sidebar-primary: #d97757;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #343434;
|
|
--sidebar-accent-foreground: #ecebe6;
|
|
--sidebar-border: #292929;
|
|
--sidebar-ring: #d97757;
|
|
--shadow-color: oklch(0 0 0);
|
|
--shadow-opacity: 0.1;
|
|
--shadow-blur: 3px;
|
|
--shadow-spread: 0px;
|
|
--shadow-offset-x: 0;
|
|
--shadow-offset-y: 1px;
|
|
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
--letter-spacing: 0em;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
[data-theme="my-claude"] body {
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* Neo-Brutalismus: helle Pastell-Flächen, schwarze 2px-Borders,
|
|
harte Offset-Schatten, keine Rundungen */
|
|
|
|
[data-theme="neo"] {
|
|
--font-sans: 'Space Grotesk', sans-serif;
|
|
--font-heading: 'Archivo Black', sans-serif;
|
|
--radius: 0rem;
|
|
--background: oklch(0.96 0.045 95);
|
|
--foreground: oklch(0.22 0.02 60);
|
|
--card: oklch(0.99 0.01 95);
|
|
--card-foreground: oklch(0.22 0.02 60);
|
|
--popover: oklch(0.99 0.01 95);
|
|
--popover-foreground: oklch(0.22 0.02 60);
|
|
--primary: oklch(0.86 0.17 95);
|
|
--primary-foreground: oklch(0.22 0.02 60);
|
|
--secondary: oklch(0.9 0.06 95);
|
|
--secondary-foreground: oklch(0.22 0.02 60);
|
|
--muted: oklch(0.92 0.04 95);
|
|
--muted-foreground: oklch(0.45 0.03 60);
|
|
--accent: oklch(0.75 0.19 350);
|
|
--accent-foreground: oklch(0.22 0.02 60);
|
|
--destructive: oklch(0.6 0.24 25);
|
|
--border: oklch(0.22 0.02 60);
|
|
--input: oklch(0.22 0.02 60);
|
|
--ring: oklch(0.22 0.02 60);
|
|
--sidebar: oklch(0.99 0.01 95);
|
|
--sidebar-foreground: oklch(0.22 0.02 60);
|
|
--sidebar-primary: oklch(0.86 0.17 95);
|
|
--sidebar-primary-foreground: oklch(0.22 0.02 60);
|
|
--sidebar-accent: oklch(0.9 0.06 95);
|
|
--sidebar-accent-foreground: oklch(0.22 0.02 60);
|
|
--sidebar-border: oklch(0.22 0.02 60);
|
|
--sidebar-ring: oklch(0.22 0.02 60);
|
|
}
|
|
|
|
/* Brutalist-Regeln für alle neo-* Themes:
|
|
2px schwarze Borders + harter 4px-Offset-Schatten auf Karten-Elementen,
|
|
Buttons mit „reingedrückt"-Effekt beim Klick */
|
|
[data-theme^="neo"] .border,
|
|
[data-theme^="neo"] [data-slot="button"],
|
|
[data-theme^="neo"] .upload-tile-media {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-color: var(--border);
|
|
box-shadow: 4px 4px 0 0 var(--border);
|
|
}
|
|
|
|
[data-theme^="neo"] [data-slot="button"] {
|
|
transition: translate 0.1s ease, box-shadow 0.1s ease;
|
|
}
|
|
|
|
[data-theme^="neo"] [data-slot="button"]:hover {
|
|
translate: -1px -1px;
|
|
box-shadow: 5px 5px 0 0 var(--border);
|
|
}
|
|
|
|
[data-theme^="neo"] [data-slot="button"]:active {
|
|
translate: 2px 2px;
|
|
box-shadow: 1px 1px 0 0 var(--border);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
@apply font-sans;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
h1, h2, h3, h4 {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
/* View Transition für Upload-Media:
|
|
Das Bild morpht geschmeidig vom Thumbnail auf Thread-Größe.
|
|
Old/New nutzen den synchronen Standard-Crossfade (kein Blinken),
|
|
nur Dauer und Easing werden angeglichen. */
|
|
::view-transition-group(upload-media) {
|
|
animation-duration: 380ms;
|
|
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
::view-transition-old(upload-media),
|
|
::view-transition-new(upload-media) {
|
|
animation-duration: 380ms;
|
|
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
|
|
/* Phosphor-Glyphen haben mehr Innenrand im ViewBox als Lucide —
|
|
leicht hochskalieren, damit sie bei gleicher size-* gleich groß wirken. */
|
|
svg.iconify--ph {
|
|
transform: scale(1.15);
|
|
}
|