/* * Thinky Admin — theme overrides. * Loaded AFTER styles.css (the vendor Tailwind bundle) so these rules win the * cascade without touching the 700KB+ compiled vendor file directly. Redefines * the same CSS custom properties the vendor bundle already reads from * (--primary, --mono, --background, --accent, --border, ...), so every page * that extends admin.layouts.app inherits this automatically — no per-page * changes needed. Palette/typography inspired by a navy-and-blue mini-sidebar * edtech admin reference (IBM Plex Sans + Rubik, deep navy chrome, blue accent). */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Rubik:wght@500;600;700&display=swap"); :root { --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-display: "Rubik", var(--font-sans); --primary: #0052cc; --primary-foreground: #ffffff; --mono: #172b4c; --mono-foreground: #ffffff; --ring: #0052cc; --radius: 0.625rem; } /* Sidebar carries the .dark class deliberately (distinct chrome vs. the light content area) — repaint its tokens from near-black zinc to a rich navy that matches the reference instead of a generic dark-mode grey. Because .dark is also what real dark-mode toggles to on , this reskins full dark mode too, consistently. */ .dark { --background: #10192e; --foreground: #e8edf7; --card: #10192e; --card-foreground: #e8edf7; --popover: #16213b; --popover-foreground: #e8edf7; --primary: #2f7dfa; --primary-foreground: #ffffff; --secondary: #1b2947; --secondary-foreground: #e8edf7; --muted: #1b2947; --muted-foreground: #8ea0c4; --accent: #1b2947; --accent-foreground: #ffffff; --mono: #ffffff; --mono-foreground: #10192e; --border: #22304f; --input: #22304f; --ring: #2f7dfa; } body { font-family: var(--font-sans); } /* ── Sidebar ─────────────────────────────────────────────────────────── */ .kt-sidebar { box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.04); } .kt-sidebar .kt-sidebar-logo .default-logo .small-logo, .kt-sidebar .default-logo { font-family: var(--font-display); letter-spacing: 0.02em; } /* Active nav item: a solid primary-coloured pill (reference's signature treatment) instead of a faint accent wash, so the current page reads instantly against the navy chrome. */ .kt-sidebar .kt-menu-item.active > .kt-menu-link { background-color: var(--primary) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .kt-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon i, .kt-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title { color: #ffffff !important; } .kt-sidebar .kt-menu-link:hover { background-color: var(--accent); } .kt-sidebar-header { border-bottom: 1px solid var(--border); } .kt-sidebar-footer { background-color: rgba(0, 0, 0, 0.12); } /* ── Header ──────────────────────────────────────────────────────────── */ #header { border-bottom: 1px solid var(--border); } #header[data-kt-sticky-class~="shadow-sm"].kt-sticky-active { box-shadow: 0 4px 12px rgba(16, 25, 46, 0.06); } /* ── Headings / display type ────────────────────────────────────────── */ h1, h2, h3, .kt-card-title, .text-mono { font-family: var(--font-display); } /* ── Cards: a touch more depth than the flat vendor default ────────────── */ .kt-card { box-shadow: 0 1px 2px rgba(16, 25, 46, 0.04), 0 1px 12px rgba(16, 25, 46, 0.03); border-radius: var(--radius); } /* ── Buttons: slightly bolder radius/weight to match the reference's chunkier control style ─────────────────────────────────────────────────────── */ .kt-btn-primary { box-shadow: 0 1px 2px rgba(0, 82, 204, 0.24); } /* ── Login branded panel ───────────────────────────────────────────────── The blade markup here originally relied on `bg-gradient-to-br from-primary/90 to-primary/60` — arbitrary-opacity gradient utilities that were never actually compiled into the vendor styles.css bundle (a pre-existing gap, not something this file caused), so the panel rendered blank white. Defined explicitly here instead of depending on utilities this static bundle doesn't ship. */ .login-brand-panel { background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, #001640) 100%); } /* Same gap as above: text-white/80, text-white/90, bg-white/20 (opacity variants of literal white) aren't in the compiled bundle either. */ .login-brand-panel p { color: rgba(255, 255, 255, 0.85); } .login-brand-panel .size-12, .login-brand-panel .size-5 { background-color: rgba(255, 255, 255, 0.2); } .login-brand-panel span.text-sm { color: rgba(255, 255, 255, 0.92); }