261 lines
6.8 KiB
CSS
261 lines
6.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ============================================================
|
|
ACCENT PRESETS
|
|
Applied via data-accent="<key>" on <html>
|
|
============================================================ */
|
|
|
|
/* Default / Schaeffler Green */
|
|
:root,
|
|
[data-accent="green"] {
|
|
--color-accent: #00893d;
|
|
--color-accent-hover: #006e31;
|
|
--color-accent-light: #e6f4ec;
|
|
--color-accent-text: #ffffff;
|
|
}
|
|
|
|
[data-accent="blue"] {
|
|
--color-accent: #2563eb;
|
|
--color-accent-hover: #1d4ed8;
|
|
--color-accent-light: #dbeafe;
|
|
--color-accent-text: #ffffff;
|
|
}
|
|
|
|
[data-accent="purple"] {
|
|
--color-accent: #7c3aed;
|
|
--color-accent-hover: #6d28d9;
|
|
--color-accent-light: #ede9fe;
|
|
--color-accent-text: #ffffff;
|
|
}
|
|
|
|
[data-accent="amber"] {
|
|
--color-accent: #d97706;
|
|
--color-accent-hover: #b45309;
|
|
--color-accent-light: #fef3c7;
|
|
--color-accent-text: #ffffff;
|
|
}
|
|
|
|
[data-accent="teal"] {
|
|
--color-accent: #0d9488;
|
|
--color-accent-hover: #0f766e;
|
|
--color-accent-light: #ccfbf1;
|
|
--color-accent-text: #ffffff;
|
|
}
|
|
|
|
/* ============================================================
|
|
LIGHT THEME (default)
|
|
============================================================ */
|
|
:root {
|
|
/* Surfaces */
|
|
--color-bg-app: #f9fafb;
|
|
--color-bg-surface: #ffffff;
|
|
--color-bg-surface-hover: #f9fafb;
|
|
--color-bg-muted: #f3f4f6;
|
|
|
|
/* Text */
|
|
--color-text: #111827;
|
|
--color-text-secondary: #4b5563;
|
|
--color-text-muted: #9ca3af;
|
|
--color-text-inverse: #ffffff;
|
|
|
|
/* Borders */
|
|
--color-border: #e5e7eb;
|
|
--color-border-light: #f3f4f6;
|
|
|
|
/* Status — Success */
|
|
--color-status-success-bg: #dcfce7;
|
|
--color-status-success-text: #166534;
|
|
|
|
/* Status — Warning */
|
|
--color-status-warning-bg: #fef9c3;
|
|
--color-status-warning-text: #854d0e;
|
|
|
|
/* Status — Error */
|
|
--color-status-error-bg: #fee2e2;
|
|
--color-status-error-text: #991b1b;
|
|
|
|
/* Status — Info */
|
|
--color-status-info-bg: #dbeafe;
|
|
--color-status-info-text: #1e40af;
|
|
}
|
|
|
|
/* ============================================================
|
|
DARK THEME
|
|
Applied via .dark class on <html>
|
|
============================================================ */
|
|
:root.dark {
|
|
/* Surfaces */
|
|
--color-bg-app: #0f172a;
|
|
--color-bg-surface: #1e293b;
|
|
--color-bg-surface-hover: #334155;
|
|
--color-bg-muted: #1e293b;
|
|
|
|
/* Text */
|
|
--color-text: #f1f5f9;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-text-muted: #64748b;
|
|
--color-text-inverse: #0f172a;
|
|
|
|
/* Borders */
|
|
--color-border: #334155;
|
|
--color-border-light: #1e293b;
|
|
|
|
/* Status — Success */
|
|
--color-status-success-bg: rgba(34, 197, 94, 0.15);
|
|
--color-status-success-text: #4ade80;
|
|
|
|
/* Status — Warning */
|
|
--color-status-warning-bg: rgba(234, 179, 8, 0.15);
|
|
--color-status-warning-text: #facc15;
|
|
|
|
/* Status — Error */
|
|
--color-status-error-bg: rgba(239, 68, 68, 0.15);
|
|
--color-status-error-text: #f87171;
|
|
|
|
/* Status — Info */
|
|
--color-status-info-bg: rgba(59, 130, 246, 0.15);
|
|
--color-status-info-text: #60a5fa;
|
|
}
|
|
|
|
/* Dark accent-light overrides (rgba instead of solid pastel) */
|
|
:root.dark,
|
|
:root.dark [data-accent="green"] {
|
|
--color-accent-light: rgba(0, 137, 61, 0.15);
|
|
}
|
|
:root.dark [data-accent="blue"] {
|
|
--color-accent-light: rgba(37, 99, 235, 0.15);
|
|
}
|
|
:root.dark [data-accent="purple"] {
|
|
--color-accent-light: rgba(124, 58, 237, 0.15);
|
|
}
|
|
:root.dark [data-accent="amber"] {
|
|
--color-accent-light: rgba(217, 119, 6, 0.15);
|
|
}
|
|
:root.dark [data-accent="teal"] {
|
|
--color-accent-light: rgba(13, 148, 136, 0.15);
|
|
}
|
|
|
|
/* ============================================================
|
|
BASE LAYER
|
|
============================================================ */
|
|
@layer base {
|
|
body {
|
|
@apply antialiased;
|
|
background-color: var(--color-bg-app);
|
|
color: var(--color-text);
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
}
|
|
|
|
/* Native color scheme for form controls */
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
:root.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Checkbox / radio accent color */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
accent-color: var(--color-accent);
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
COMPONENT CLASSES
|
|
============================================================ */
|
|
@layer components {
|
|
/* Buttons */
|
|
.btn {
|
|
@apply inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.btn-primary {
|
|
@apply btn;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
--tw-ring-color: var(--color-accent);
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
.btn-secondary {
|
|
@apply btn border;
|
|
background-color: var(--color-bg-surface);
|
|
color: var(--color-text-secondary);
|
|
border-color: var(--color-border);
|
|
--tw-ring-color: var(--color-accent);
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background-color: var(--color-bg-surface-hover);
|
|
}
|
|
.btn-danger {
|
|
@apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
@apply rounded-lg border shadow-sm;
|
|
background-color: var(--color-bg-surface);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
.badge-green {
|
|
@apply badge;
|
|
background-color: var(--color-status-success-bg);
|
|
color: var(--color-status-success-text);
|
|
}
|
|
.badge-yellow {
|
|
@apply badge;
|
|
background-color: var(--color-status-warning-bg);
|
|
color: var(--color-status-warning-text);
|
|
}
|
|
.badge-red {
|
|
@apply badge;
|
|
background-color: var(--color-status-error-bg);
|
|
color: var(--color-status-error-text);
|
|
}
|
|
.badge-blue {
|
|
@apply badge;
|
|
background-color: var(--color-status-info-bg);
|
|
color: var(--color-status-info-text);
|
|
}
|
|
.badge-gray {
|
|
@apply badge;
|
|
background-color: var(--color-bg-muted);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Input base — replaces repeated inline input patterns */
|
|
.input-base {
|
|
@apply w-full px-3 py-2 rounded-md text-sm border focus:outline-none focus:ring-2 transition-colors;
|
|
background-color: var(--color-bg-surface);
|
|
color: var(--color-text);
|
|
border-color: var(--color-border);
|
|
--tw-ring-color: var(--color-accent);
|
|
}
|
|
.input-base::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
.input-base:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Small input variant (used in admin tables) */
|
|
.input-sm {
|
|
@apply px-2 py-1 rounded text-sm border focus:outline-none focus:ring-1 transition-colors;
|
|
background-color: var(--color-bg-surface);
|
|
color: var(--color-text);
|
|
border-color: var(--color-border);
|
|
--tw-ring-color: var(--color-accent);
|
|
}
|
|
.input-sm:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
}
|