@import 'tailwindcss'; @plugin 'tailwindcss-animate'; /* Enable class-based dark mode for Tailwind v4. Without this, Tailwind v4 defaults to @media (prefers-color-scheme: dark), which ignores the .dark class on and always follows the OS setting. This makes the dark/light toggle in e_app_theme.svelte actually work. */ @custom-variant dark (&:where(.dark, .dark *)); /* Sync native browser control rendering (select dropdowns, scrollbars, etc.) with the app's dark/light mode toggle. Without this, native controls follow the OS theme rather than the app's .dark/.light class on . */ html.dark { color-scheme: dark; } html.light { color-scheme: light; } @import '@skeletonlabs/skeleton'; /* Register Preset Themes */ /* @import '@skeletonlabs/skeleton/themes/{theme-name}'; */ @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/concord'; @import '@skeletonlabs/skeleton/themes/crimson'; @import '@skeletonlabs/skeleton/themes/hamlindigo'; @import '@skeletonlabs/skeleton/themes/modern'; @import '@skeletonlabs/skeleton/themes/nouveau'; @import '@skeletonlabs/skeleton/themes/rocket'; @import '@skeletonlabs/skeleton/themes/terminus'; @import '@skeletonlabs/skeleton/themes/vintage'; @import '@skeletonlabs/skeleton/themes/wintry'; /* @import '@skeletonlabs/skeleton/themes/ae_c_osit'; */ /* @import '@skeletonlabs/skeleton/themes/ae_c_lci'; */ @import './ae-osit-default.css'; @import './ae-c-lci.css'; @import './ae-c-idaa-light.css'; @import './ae-firefly.css'; @import './ae-firefly-steelblue.css'; @import './ae-firefly-indigo.css'; @import './ae-firefly-rainbow.css'; @import './ae-firefly-axonius.css'; @import './ae-firefly-bgh.css'; @source '../node_modules/@skeletonlabs/skeleton-svelte/dist'; /* Add your theme import for your theme: "osit-custom-theme" here */ /* @plugin '@tailwindcss/forms'; */ /* @plugin '@tailwindcss/typography'; */ /* @import "tailwindcss/theme.css" layer(theme); */ /* @import "tailwindcss/preflight"; */ @import 'tailwindcss/utilities.css' layer(utilities); /*@tailwind utilities;*/ /* Register a Custom Themes */ /* Make sure to resolve the relative path. */ /* Note the .css extension is optional. */ /* @import '../{my-theme-name}'; */ /* @import '@fontsource/open-sans'; */ /* https://www.skeleton.dev/docs/guides/cookbook/light-switch */ /* @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); */ @layer base { :root { --background: 0 0% 100%; --foreground: 224 71.4% 4.1%; --muted: 220 14.3% 95.9%; --muted-foreground: 220 8.9% 46.1%; --popover: 0 0% 100%; --popover-foreground: 224 71.4% 4.1%; --card: 0 0% 100%; --card-foreground: 224 71.4% 4.1%; --border: 220 13% 91%; --input: 220 13% 91%; --primary: 220.9 39.3% 11%; --primary-foreground: 210 20% 98%; --secondary: 220 14.3% 95.9%; --secondary-foreground: 220.9 39.3% 11%; --accent: 220 14.3% 95.9%; --accent-foreground: 220.9 39.3% 11%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 210 20% 98%; --ring: 224 71.4% 4.1%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } /* .dark { --background: 224 71.4% 4.1%; --foreground: 210 20% 98%; --muted: 215 27.9% 16.9%; --muted-foreground: 217.9 10.6% 64.9%; --popover: 224 71.4% 4.1%; --popover-foreground: 210 20% 98%; --card: 224 71.4% 4.1%; --card-foreground: 210 20% 98%; --border: 215 27.9% 16.9%; --input: 215 27.9% 16.9%; --primary: 210 20% 98%; --primary-foreground: 220.9 39.3% 11%; --secondary: 215 27.9% 16.9%; --secondary-foreground: 210 20% 98%; --accent: 215 27.9% 16.9%; --accent-foreground: 210 20% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 20% 98%; --ring: 216 12.2% 83.9%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } */ } @layer base { * { border-color: hsl(var(--border)); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* Tailwind preflight strips native select padding — restore it globally */ select { padding-inline: 0.5rem; } } /* ============================================================ * Global dark mode fix for Skeleton UI form elements. * * Skeleton v3 form classes (.input, .select, .textarea) do not * include dark mode styles — browser renders them light even when * html.dark is active, producing white text on white backgrounds. * * This eliminates the need for per-component