/* ------------------------------------------------------------------ BizerioBooks Theme (Bootstrap-friendly, no Tailwind build required) Place in: wwwroot/css/theme.css -------------------------------------------------------------------*/ /* Light tokens */ :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: .625rem; /* Sidebar tokens */ --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } /* Dark tokens (enable by putting .dark on in a future step) */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } /* Base */ html, body { background: var(--background); color: var(--foreground); } :focus { outline-color: color-mix(in oklab, var(--ring) 50%, transparent); outline-offset: 2px; } /* Cards / popovers (Bootstrap components pick this up via variables) */ .card { background: var(--card); color: var(--card-foreground); border-color: var(--border); } .modal-content, .dropdown-menu { background: var(--popover); color: var(--popover-foreground); border-color: var(--border); } /* Buttons mapped from tokens */ .btn-teal { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: color-mix(in oklab, var(--primary) 90%, black); --bs-btn-hover-border-color: color-mix(in oklab, var(--primary) 90%, black); --bs-btn-active-bg: color-mix(in oklab, var(--primary) 85%, black); --bs-btn-active-border-color: color-mix(in oklab, var(--primary) 85%, black); color: var(--primary-foreground); } /* Inputs */ .form-control, .form-select { background: var(--card); color: var(--foreground); border-color: var(--input); } .form-control:focus, .form-select:focus { border-color: var(--ring); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--ring) 25%, transparent); } /* Borders / radii */ :root { --bs-border-color: var(--border); --bs-border-radius: var(--radius); } /* --------------------------------------------- App navigation (left sidebar). Your existing layout will pick these up. ----------------------------------------------*/ .app-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border); } .app-sidebar .nav-link { color: var(--sidebar-foreground); border-radius: .5rem; } .app-sidebar .nav-link:hover { background: color-mix(in oklab, var(--sidebar-accent) 80%, transparent); color: var(--sidebar-accent-foreground); } .app-sidebar .nav-link.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 600; } /* --------------------------------------------- Login page (matches your Login.razor) ----------------------------------------------*/ .auth-shell { background: #f7f9fb; } .dark .auth-shell { background: var(--background); } .auth-left { width: 48%; min-width: 520px; background: radial-gradient(120% 120% at 0% 0%, #0ea5a5 0%, #0b7c7c 40%, #065f5f 100%); } @media (max-width: 991.98px) { .auth-left { display: none !important; } } .brand-box { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); border-radius: .75rem; padding: 1.5rem 2rem; text-align: left; } .brand-logo { height: 48px; width: auto; display: inline-block; } /* Bullet dots in the hero list */ .check-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset; } /* Right panel */ .auth-right { background: #fff; } .dark .auth-right { background: var(--card); } /* Utility chips (badges) pick theme colors */ .badge.bg-accent { background: var(--accent); color: var(--accent-foreground); } /* Table tweaks */ .table { color: inherit; } .table thead th { border-bottom-color: var(--border); } .table td, .table th { border-color: var(--border); } /* Optional: charts could use your chart tokens */ :root { --chart-color-1: var(--chart-1); --chart-color-2: var(--chart-2); --chart-color-3: var(--chart-3); --chart-color-4: var(--chart-4); --chart-color-5: var(--chart-5); }