222 lines
6.7 KiB
CSS
222 lines
6.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root {
|
|
/* OKLCH Zentral-Farbsystem */
|
|
--oklch-background: 0.145 0.01 148;
|
|
--oklch-surface: 0.20 0.01 148;
|
|
--oklch-surface-hover: 0.25 0.012 148;
|
|
--oklch-primary: 0.68 0.18 255;
|
|
--oklch-primary-hover: 0.75 0.18 255;
|
|
--oklch-secondary: 0.76 0.15 155;
|
|
--oklch-text-main: 0.98 0 0;
|
|
--oklch-text-muted: 0.70 0.01 148;
|
|
--oklch-border: 0.31 0.012 148;
|
|
|
|
/* Dynamische Branding Variablen */
|
|
--primary-custom: #2563eb;
|
|
--accent-custom: #38bdf8;
|
|
--success-custom: #10b981;
|
|
--warning-custom: #f59e0b;
|
|
--destructive-custom: #ef4444;
|
|
--bg-glow-1: #3b82f6;
|
|
--bg-glow-2: #1d4ed8;
|
|
--gradient-from: #2563eb;
|
|
--gradient-to: #1e40af;
|
|
|
|
/* Classic HSL Mappings */
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 217 91% 60%;
|
|
--radius: 0.75rem;
|
|
}
|
|
|
|
/* 100% Dynamische Farbbindung für das gesamte Webshop Design-System */
|
|
.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600, .bg-sky-500, .bg-cyan-600, .bg-indigo-600 {
|
|
background-color: var(--primary-custom) !important;
|
|
}
|
|
|
|
.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover, .hover\:bg-blue-600:hover {
|
|
background-color: var(--primary-custom) !important;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400, .text-sky-300, .text-indigo-400 {
|
|
color: var(--primary-custom) !important;
|
|
}
|
|
|
|
.border-blue-500, .border-blue-600, .border-violet-500, .border-sky-500 {
|
|
border-color: var(--primary-custom) !important;
|
|
}
|
|
|
|
/* Dynamische Transparenz-Schichten & Badges mit color-mix */
|
|
[class*="bg-blue-500/"], [class*="bg-violet-500/"], [class*="bg-purple-500/"], [class*="bg-sky-500/"] {
|
|
background-color: color-mix(in srgb, var(--primary-custom) 15%, transparent) !important;
|
|
}
|
|
|
|
[class*="border-blue-500/"], [class*="border-violet-500/"], [class*="border-purple-500/"], [class*="border-sky-500/"] {
|
|
border-color: color-mix(in srgb, var(--primary-custom) 35%, transparent) !important;
|
|
}
|
|
|
|
/* Dynamische Gradients */
|
|
.from-blue-600, .from-blue-500, .from-violet-600 {
|
|
--tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
|
|
--tw-gradient-to: rgb(255 255 255 / 0) !important;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
|
|
}
|
|
|
|
.to-indigo-600, .to-indigo-500, .to-sky-500, .to-sky-400, .to-violet-500 {
|
|
--tw-gradient-to: var(--gradient-to, var(--accent-custom)) !important;
|
|
}
|
|
|
|
/* Dynamische Signalfarben (Success, Warning, Destructive) */
|
|
.bg-emerald-500, .bg-green-500, .bg-emerald-600, .bg-green-600 {
|
|
background-color: var(--success-custom) !important;
|
|
}
|
|
|
|
.text-emerald-400, .text-green-400, .text-emerald-500, .text-green-500, .text-green-600 {
|
|
color: var(--success-custom) !important;
|
|
}
|
|
|
|
.border-emerald-500, .border-green-500 {
|
|
border-color: var(--success-custom) !important;
|
|
}
|
|
|
|
[class*="bg-emerald-500/"], [class*="bg-green-500/"] {
|
|
background-color: color-mix(in srgb, var(--success-custom) 15%, transparent) !important;
|
|
}
|
|
|
|
[class*="border-emerald-500/"], [class*="border-green-500/"] {
|
|
border-color: color-mix(in srgb, var(--success-custom) 35%, transparent) !important;
|
|
}
|
|
|
|
.bg-amber-500, .bg-amber-600 {
|
|
background-color: var(--warning-custom) !important;
|
|
}
|
|
|
|
.text-amber-400, .text-amber-500, .text-amber-600 {
|
|
color: var(--warning-custom) !important;
|
|
}
|
|
|
|
.border-amber-500, .border-amber-600 {
|
|
border-color: var(--warning-custom) !important;
|
|
}
|
|
|
|
[class*="bg-amber-500/"] {
|
|
background-color: color-mix(in srgb, var(--warning-custom) 15%, transparent) !important;
|
|
}
|
|
|
|
[class*="border-amber-500/"] {
|
|
border-color: color-mix(in srgb, var(--warning-custom) 35%, transparent) !important;
|
|
}
|
|
|
|
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
|
|
background-color: var(--destructive-custom) !important;
|
|
}
|
|
|
|
.text-red-500, .text-red-400, .text-rose-400, .text-rose-500 {
|
|
color: var(--destructive-custom) !important;
|
|
}
|
|
|
|
.border-red-500, .border-rose-500 {
|
|
border-color: var(--destructive-custom) !important;
|
|
}
|
|
|
|
[class*="bg-red-500/"], [class*="bg-rose-500/"] {
|
|
background-color: color-mix(in srgb, var(--destructive-custom) 15%, transparent) !important;
|
|
}
|
|
|
|
[class*="border-red-500/"], [class*="border-rose-500/"] {
|
|
border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
|
|
}
|
|
|
|
/* Background Glowing Orbs & Dynamic Surfaces */
|
|
.blur-\[120px\] {
|
|
background-color: var(--bg-glow-1) !important;
|
|
}
|
|
|
|
.bg-\[\#020617\] {
|
|
background-color: oklch(var(--oklch-background)) !important;
|
|
}
|
|
|
|
/* Dynamische Buttons & Badges über globale CSS Variablen */
|
|
.btn-primary-theme, .bg-primary-theme {
|
|
background-color: var(--button-bg, var(--primary-custom)) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.text-highlight-theme {
|
|
color: var(--text-highlight, var(--accent-custom)) !important;
|
|
}
|
|
|
|
.border-glow-theme {
|
|
border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
|
|
}
|
|
|
|
.ring-theme {
|
|
--tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
|
|
}
|
|
|
|
input, select, textarea, option {
|
|
background-color: oklch(var(--oklch-surface)) !important;
|
|
color: oklch(var(--oklch-text-main)) !important;
|
|
border: 1px solid oklch(var(--oklch-border) / 0.4) !important;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--primary-custom) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px var(--primary-custom) !important;
|
|
}
|
|
|
|
option {
|
|
color: oklch(var(--oklch-text-main)) !important;
|
|
background-color: oklch(var(--oklch-surface)) !important;
|
|
}
|
|
|
|
/* Eye-Catcher & Rüttel-Animation für fehlende Pflichtkategorien */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
15%, 55% { transform: translateX(-4px); }
|
|
35%, 75% { transform: translateX(4px); }
|
|
}
|
|
|
|
@keyframes eye-catcher-glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), inset 0 0 8px rgba(244, 63, 94, 0.3);
|
|
border-color: rgba(244, 63, 94, 0.9);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 28px rgba(239, 68, 68, 0.9), inset 0 0 14px rgba(239, 68, 68, 0.5);
|
|
border-color: rgba(239, 68, 68, 1);
|
|
}
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake 0.6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-eye-catcher {
|
|
animation: eye-catcher-glow 1.2s ease-in-out infinite, shake 0.8s ease-in-out infinite !important;
|
|
} |