/* ============================================================================ Neo theme — Blazor port of the Neo.WPF.Main theme system. Token values mirror Themes/LightTheme.xaml (:root) and Themes/DarkTheme.xaml ([data-theme="dark"]). Names follow the WPF resource keys where they map one-to-one (CardBackground, CardBorder, PrimaryText, SecondaryText, AccentColor, InputBackground, FocusBorder, ReadOnlyBackground, PlaceholderText, GridHeaderBackground, RowHoverBackground, GridSelection*, SidebarBackground, Nav*, and the StyledButton action profiles New/Save/Delete/Confirm/Accent/Default). Light/dark switch is driven by a `data-theme` attribute on .neo-shell (BaseLayout toggles it). Keep every color a token — never hardcode hex. ============================================================================ */ :root { /* Surfaces — WPF: AppBackground / BodyBackground / CardBackground / TitleBarBackground */ --neo-app-bg: #F1F5F9; --neo-body-bg: #E2E8F0; --neo-card-bg: #FFFFFF; --neo-topbar-bg: #FFFFFF; --neo-topbar-fore: #0F172A; --neo-sidebar-bg: #F8FAFC; /* SidebarBackground */ --neo-sidebar-fore: #334155; --neo-sidebar-active: #E4EDFE; /* NavActiveBackground */ /* Text — WPF: PrimaryText / SecondaryText */ --neo-label: #0F172A; --neo-muted: #64748B; --neo-fore: #334155; --neo-accent: #2563EB; /* AccentColor */ /* Inputs — WPF: InputBackground / ReadOnlyBackground / CardBorder / FocusBorder / PlaceholderText */ --neo-bg: #FFFFFF; --neo-bg-readonly: #F8FAFC; --neo-border: #E2E8F0; --neo-border-strong: #94A3B8; --neo-border-focus: #3B82F6; --neo-placeholder: #94A3B8; /* Selection (one selection language across list/grid/combo) */ --neo-selection-bg: #DBEAFE; --neo-selection-fg: #1E3A8A; /* Grid — WPF: GridHeaderBackground / RowHoverBackground / GridSelection* */ --neo-grid-header-bg: #F8FAFC; --neo-grid-header-fg: #0F172A; --neo-grid-hairline: #F1F5F9; --neo-row-hover: #F1F5F9; --neo-grid-selection-bg: #DBEAFE; --neo-grid-selection-fg: #1E3A8A; /* Accent / primary action — AccentColor drives checked/selected/links */ --neo-primary: #2563EB; --neo-primary-hover: #1D4ED8; --neo-primary-fore: #FFFFFF; --neo-primary-bg: #DBEAFE; /* Status (chips + alerts). SuccessBrush = #16A34A. */ --neo-success: #16A34A; --neo-success-bg: #DCFCE7; --neo-success-border: #BBF7D0; --neo-info: #1D4ED8; --neo-info-bg: #DBEAFE; --neo-info-border: #BFDBFE; --neo-warning: #B45309; --neo-warning-bg: #FEF3C7; --neo-warning-border: #FDE68A; --neo-danger: #B91C1C; --neo-danger-hover: #991B1B; --neo-danger-bg: #FEE2E2; --neo-danger-border: #FECACA; /* Button action profiles — WPF StyledButton.Profile (LightTheme.xaml) */ --neo-btn-new-bg: #386CB0; --neo-btn-new-fg: #FFFFFF; --neo-btn-new-border: #386CB0; --neo-btn-save-bg: #3F7A4E; --neo-btn-save-fg: #FFFFFF; --neo-btn-save-border: #3F7A4E; --neo-btn-delete-bg: #A94A44; --neo-btn-delete-fg: #FFFFFF; --neo-btn-delete-border: #A94A44; --neo-btn-confirm-bg: #6D28D9; --neo-btn-confirm-fg: #FFFFFF; --neo-btn-confirm-border: #6D28D9; --neo-btn-accent-bg: #0B7C72; --neo-btn-accent-fg: #FFFFFF; --neo-btn-accent-border: #0B7C72; --neo-btn-default-bg: #F1F5F9; --neo-btn-default-fg: #334155; --neo-btn-default-border: #CBD5E1; /* Nav / combo hover washes */ --neo-nav-hover: #EEF2F7; --neo-combo-hover: #EEF2F7; --neo-combo-selected-bg: #DBEAFE; --neo-combo-selected-fg: #1E3A8A; /* Nav group folder glyph — NavGroupIconColor / NavGroupIconOpenColor. Intentionally the same gold in every theme (a folder reads as a folder). */ --neo-nav-group-icon: #D8A93F; --neo-nav-group-icon-open: #A87B24; /* Shape & chrome */ --neo-radius: 6px; /* cards, tabs, menus */ --neo-radius-sm: 4px; /* inputs (WPF StyledComboBox/DatePicker CornerRadius) */ --neo-radius-xs: 2px; /* buttons (WPF StyledButton CornerRadius) */ --neo-shadow: none; --neo-focus-ring: 0 0 0 3px rgb(59 130 246 / .18); /* Type — Segoe UI, same family as the WPF shell (compact 12-13px scale) */ --neo-font: 13px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; --neo-font-sm: 11px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; --neo-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; } [data-theme="dark"] { --neo-app-bg: #101014; --neo-body-bg: #0C0C10; --neo-card-bg: #1E1E24; --neo-topbar-bg: #141419; --neo-topbar-fore: #EDEDEF; --neo-sidebar-bg: #15151B; --neo-sidebar-fore: #A8A8B3; --neo-sidebar-active: #22304E; --neo-label: #EDEDEF; --neo-muted: #A8A8B3; --neo-fore: #E2E8F0; --neo-accent: #4F8CFF; --neo-bg: #26262E; --neo-bg-readonly: #232329; --neo-border: #3A3A44; --neo-border-strong: #7C7C8A; --neo-border-focus: #3B82F6; --neo-placeholder: #7C7C8A; --neo-selection-bg: #2E3B58; --neo-selection-fg: #E4EAFB; --neo-grid-header-bg: #232329; --neo-grid-header-fg: #EDEDEF; --neo-grid-hairline: #2A2A33; --neo-row-hover: #2B2B34; --neo-grid-selection-bg: #33456B; --neo-grid-selection-fg: #EAF0FC; --neo-primary: #4F8CFF; --neo-primary-hover: #6A9CFF; --neo-primary-fore: #FFFFFF; --neo-primary-bg: #2E3B58; --neo-success: #4ADE80; --neo-success-bg: #123B26; --neo-success-border: #1E5C3C; --neo-info: #7EA8FF; --neo-info-bg: #1B2B4B; --neo-info-border: #2B4475; --neo-warning: #F0B85C; --neo-warning-bg: #3B2E12; --neo-warning-border: #5A461E; --neo-danger: #F48A84; --neo-danger-hover: #FFB1AD; --neo-danger-bg: #3B1B1B; --neo-danger-border: #5C2626; --neo-btn-new-bg: #2F6FB5; --neo-btn-new-fg: #FFFFFF; --neo-btn-new-border: #2F6FB5; --neo-btn-save-bg: #3E7A52; --neo-btn-save-fg: #FFFFFF; --neo-btn-save-border: #3E7A52; --neo-btn-delete-bg: #B34A42; --neo-btn-delete-fg: #FFFFFF; --neo-btn-delete-border: #B34A42; --neo-btn-confirm-bg: #7C52D6; --neo-btn-confirm-fg: #FFFFFF; --neo-btn-confirm-border: #7C52D6; --neo-btn-accent-bg: #0B7568; --neo-btn-accent-fg: #FFFFFF; --neo-btn-accent-border: #0B7568; --neo-btn-default-bg: #1E293B; --neo-btn-default-fg: #E2E8F0; --neo-btn-default-border: #475569; --neo-nav-hover: #26262E; --neo-combo-hover: #26262E; --neo-combo-selected-bg: #2E3B58; --neo-combo-selected-fg: #E4EAFB; } * { box-sizing: border-box; } body { margin: 0; font: var(--neo-font); color: var(--neo-fore); background: var(--neo-app-bg); } /* Theme-aware scrollbars (Chrome/Edge/Safari) */ *::-webkit-scrollbar { width: 10px !important; height: 10px !important; } *::-webkit-scrollbar-track { background: var(--neo-app-bg) !important; } *::-webkit-scrollbar-thumb { background: var(--neo-border) !important; border-radius: 5px !important; border: 2px solid var(--neo-app-bg) !important; } *::-webkit-scrollbar-thumb:hover { background: var(--neo-muted) !important; } *::-webkit-scrollbar-corner { background: var(--neo-app-bg) !important; } /* Theme-aware scrollbars (Firefox + Chrome 121+) */ *, *::before, *::after { scrollbar-color: var(--neo-border) var(--neo-app-bg); scrollbar-width: thin; } /* Shared form-field helpers (global so every control stays consistent) */ .neo-label { font: var(--neo-font); font-size: 11px; line-height: 1.2; color: var(--neo-muted); } /* Native widgets (select dropdowns, etc.) must follow the active theme, otherwise an OS/browser dark popup can render grey-on-white placeholders. */ .neo-shell { color-scheme: light; } .neo-shell[data-theme="dark"] { color-scheme: dark; } .neo-error-text { font: var(--neo-font); font-size: 12px; color: var(--neo-danger); } .neo-hint-text { font: var(--neo-font); font-size: 12px; color: var(--neo-muted); }