5f661c8bfd
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 12m53s
197 lines
4.7 KiB
CSS
197 lines
4.7 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* ============================================
|
|
SWOT Manager - CSS Variables Theme System
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Background & Foreground */
|
|
--background: #f8fafc;
|
|
--foreground: #0f172a;
|
|
|
|
/* Cards & Surfaces */
|
|
--card: #ffffff;
|
|
--card-hover: #f1f5f9;
|
|
--card-border: #e2e8f0;
|
|
|
|
/* Primary - Cyan/Teal */
|
|
--primary: #0891b2;
|
|
--primary-hover: #0e7490;
|
|
--primary-foreground: #ffffff;
|
|
|
|
/* SWOT Quadrant Colors */
|
|
--strength: #059669;
|
|
--strength-bg: #ecfdf5;
|
|
--strength-border: #a7f3d0;
|
|
|
|
--weakness: #dc2626;
|
|
--weakness-bg: #fef2f2;
|
|
--weakness-border: #fecaca;
|
|
|
|
--opportunity: #2563eb;
|
|
--opportunity-bg: #eff6ff;
|
|
--opportunity-border: #bfdbfe;
|
|
|
|
--threat: #d97706;
|
|
--threat-bg: #fffbeb;
|
|
--threat-border: #fde68a;
|
|
|
|
/* Accent Colors */
|
|
--accent: #8b5cf6;
|
|
--accent-hover: #7c3aed;
|
|
--purple: #8b5cf6;
|
|
|
|
/* Status */
|
|
--success: #059669;
|
|
--warning: #d97706;
|
|
--destructive: #dc2626;
|
|
|
|
/* Neutral */
|
|
--muted: #64748b;
|
|
--muted-foreground: #94a3b8;
|
|
--border: #e2e8f0;
|
|
--input: #f1f5f9;
|
|
--input-border: #cbd5e1;
|
|
|
|
/* Focus Ring */
|
|
--ring: #0891b2;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.375rem;
|
|
--radius: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
}
|
|
|
|
.dark {
|
|
/* Background & Foreground */
|
|
--background: #0f172a;
|
|
--foreground: #e2e8f0;
|
|
|
|
/* Cards & Surfaces */
|
|
--card: #1e293b;
|
|
--card-hover: #283548;
|
|
--card-border: #2d3d53;
|
|
|
|
/* Primary - Cyan/Teal (softened) */
|
|
--primary: #22a1b8;
|
|
--primary-hover: #38b2c7;
|
|
--primary-foreground: #0f172a;
|
|
|
|
/* SWOT Quadrant Colors - Dark Mode (muted & softer) */
|
|
--strength: #4ade80;
|
|
--strength-bg: #162825;
|
|
--strength-border: #24473f;
|
|
|
|
--weakness: #f87171;
|
|
--weakness-bg: #2a1f1f;
|
|
--weakness-border: #4a3030;
|
|
|
|
--opportunity: #60a5fa;
|
|
--opportunity-bg: #1a2536;
|
|
--opportunity-border: #2a3e5c;
|
|
|
|
--threat: #fbbf24;
|
|
--threat-bg: #282318;
|
|
--threat-border: #453d25;
|
|
|
|
/* Accent Colors */
|
|
--accent: #a78bfa;
|
|
--accent-hover: #c4b5fd;
|
|
--purple: #a78bfa;
|
|
|
|
/* Status (softened) */
|
|
--success: #4ade80;
|
|
--warning: #fbbf24;
|
|
--destructive: #f87171;
|
|
|
|
/* Neutral */
|
|
--muted: #94a3b8;
|
|
--muted-foreground: #64748b;
|
|
--border: #2d3d53;
|
|
--input: #1e293b;
|
|
--input-border: #3d4f66;
|
|
|
|
/* Focus Ring */
|
|
--ring: #22a1b8;
|
|
|
|
/* Shadows - Dark Mode */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
|
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-hover: var(--card-hover);
|
|
--color-card-border: var(--card-border);
|
|
--color-primary: var(--primary);
|
|
--color-primary-hover: var(--primary-hover);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-strength: var(--strength);
|
|
--color-strength-bg: var(--strength-bg);
|
|
--color-strength-border: var(--strength-border);
|
|
--color-weakness: var(--weakness);
|
|
--color-weakness-bg: var(--weakness-bg);
|
|
--color-weakness-border: var(--weakness-border);
|
|
--color-opportunity: var(--opportunity);
|
|
--color-opportunity-bg: var(--opportunity-bg);
|
|
--color-opportunity-border: var(--opportunity-border);
|
|
--color-threat: var(--threat);
|
|
--color-threat-bg: var(--threat-bg);
|
|
--color-threat-border: var(--threat-border);
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--color-destructive: var(--destructive);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-input-border: var(--input-border);
|
|
--color-ring: var(--ring);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
}
|
|
|
|
/* Focus styles */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--muted-foreground);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted);
|
|
}
|