/* ========================================================= Pastel Clean Theme (single theme for now) Text: #111417 Page BG: #F7F9FB Slab BG: #EEF4F8 Border: #D7E2EC Navbar: #2F4B68 Navbar Hover: #3A5E80 Accent: #5C8FB8 Ambient BG: #F7F9FB Ambient 2: #E3EDF7 ========================================================= */ :root { --c-text: #111417; --c-bg: #F7F9FB; --c-slab: #EEF4F8; --c-border: #D7E2EC; --c-nav: #2F4B68; --c-nav-hover: #3A5E80; --c-accent: #5C8FB8; --c-ambient-bg: #F7F9FB; --c-ambient-2: #E6EAEE; --ambient-opacity: 0.28; --shadow-soft: 0 10px 26px rgba(17, 20, 23, 0.10); --focus-ring: rgba(92, 143, 184, 0.28); --pill-shadow-hover: 0 18px 44px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.10); --pill-shadow-active: 0 12px 30px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.08); } /* ===== Dark mode palette (toggle adds .dark on body) ===== */ :root.dark, body.dark{ --c-text: #e8ebee; --c-bg: #05060A; --c-slab: #111417; /* slightly lighter than bg for slabs */ --c-border: rgba(232, 235, 238, 0.12); --c-nav: #111417; /* nav same as slab */ --c-nav-hover: rgba(232, 235, 238, 0.08); --c-accent: #746f95; --c-ambient-bg: #05060A; --c-ambient-2: #141622; --ambient-opacity: 0.28; --shadow-soft: 0 14px 34px rgba(0,0,0,0.45); --focus-ring: rgba(116, 111, 149, 0.35); } body.dark html, body.dark body{ background: var(--c-bg) !important; color: var(--c-text) !important; } /* app.css ------- Small, project-specific styling on top of the vendor dashboard theme. The goal here is readability: grouped sections, minimal overrides, and predictable selectors. */ /* ========================= Base layout ========================= */ html, body { width: 100%; height: 100%; margin: 0; overflow-x: hidden; } /* ========================= Typography ========================= */ :root { --font-sans: 'Zain', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body, button, input, select, textarea { font-family: var(--font-sans); font-weight: 400; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Apply Zain broadly across the UI (vendor theme sets fonts in a few places). */ body, p, a, span, div, li, td, th, label, small, button, input, select, textarea, .navbar, .navbar a, .navbar-brand, .navbar-nav > li > a, .card, .card-title, .title, .category, .table, .table td, .table th, .btn, .form-control, .footer { font-family: var(--font-sans) !important; } /* Do NOT let the site font override icon fonts. */ .fa, .fa:before { font-family: FontAwesome !important; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } /* Keep content safe under the floating nav "island" */ body { padding-top: 95px; background: #E6EAF0; } .page-content { padding: 20px; max-width: 1200px; margin: 0 auto; } /* Utility: align header title + action button nicely */ .header-flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* Reusable "island" look (matches navbar + badge) */ .island { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); backdrop-filter: blur(6px); } /* ========================= Navbar "island" ========================= */ /* Active navbar link */ .navbar .nav > li.active > a { font-weight: 700; } /* Navbar links as "button" pills with animated underline */ .navbar-nav.nav-pillbar { display: flex; align-items: center; gap: 2px; float: none !important; margin: 0 6px 0 0 !important; padding: 0 !important; } .navbar-nav.nav-pillbar > li { float: none !important; } .navbar-nav.nav-pillbar > li > a.item-link { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px !important; margin: 0 4px; border-radius: 14px; border: 1px solid transparent; background: transparent; line-height: 1; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } /* Navbar icon/text alignment (Zain + FontAwesome vertical metrics differ slightly) */ .navbar-nav.nav-pillbar > li > a.item-link .nav-icon{ display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 16px; position: relative; top: -1px; } .navbar-nav.nav-pillbar > li > a.item-link .nav-text{ line-height: 1; } .navbar-nav.nav-pillbar > li > a.item-link::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--c-accent); opacity: 0.35; transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 180ms ease; } .navbar-nav.nav-pillbar > li > a.item-link:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } .navbar-nav.nav-pillbar > li > a.item-link:hover::before { transform: scaleX(1); opacity: 0.55; } .navbar-nav.nav-pillbar > li.active > a.item-link { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.10); transform: translateY(-1px); } .navbar-nav.nav-pillbar > li.active > a.item-link::before { transform: scaleX(1); opacity: 0.95; } .navbar-nav.nav-pillbar > li > a.item-link:focus, .navbar-nav.nav-pillbar > li > a.item-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17, 20, 23, 0.14); } /* Icon sizing in nav links */ .navbar-nav.nav-pillbar .nav-icon { font-size: 14px; line-height: 1; width: 16px; text-align: center; } .navbar.navbar-default.navbar-fixed-top { /* Float the navbar as a rounded island */ position: fixed; width: calc(100% - 60px); /* 30px left + 30px right */ max-width: 1200px; margin: 15px auto 0 auto; /* space from top */ left: 0; right: 0; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.06); } /* Layout inside the island: links on the right, logo positioned absolutely */ .navbar.navbar-default.navbar-fixed-top .container-fluid { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 70px; padding-left: 0 !important; padding-right: 0 !important; } .navbar-header { display: flex; align-items: center; flex: 0 0 auto; } /* Logo positioning. The !important flags match the existing theme specificity. */ .navbar-brand { position: absolute; left: 30px; /* controls horizontal placement */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; height: auto !important; padding: 0 !important; margin: 0 !important; } .navbar-brand img { height: 36px; width: auto; display: block; /* If the PNG has transparent padding, this pushes it outward visually */ margin-left: -12px; } /* Push right-side links outward a bit */ .navbar-nav.navbar-right { margin-right: 6px !important; } /* If a .nav-links helper exists anywhere, don't let it override the navbar */ .navbar .nav-links { width: auto !important; justify-content: flex-end !important; padding: 0 !important; } /* ========================= Footer badge ========================= */ .medcomp-badge { position: fixed; right: 18px; bottom: 14px; z-index: 9999; font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, 0.55); padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } /* ========================= Tabs "content island" ========================= */ .tab-content { margin-top: 16px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); padding: 18px; backdrop-filter: blur(6px); } /* Tab pane spacing */ .tab-content .tab-pane { padding: 4px 2px; } /* Make tabs look modern + match the island */ .nav-tabs { border-bottom: none; display: flex; gap: 8px; } .nav-tabs > li > a { border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 14px !important; background: rgba(255,255,255,0.75); padding: 10px 14px; font-weight: 500; color: rgba(0, 0, 0, 0.55); box-shadow: 0 6px 16px rgba(0,0,0,0.06); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(0,0,0,0.06) !important; font-weight: 700; color: rgba(0, 0, 0, 0.75); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } /* Ambient WebGL background canvas */ .ambient-webgl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.18; filter: blur(0.2px); } /* Ensure app content stays above the canvas */ .wrapper, .main-panel, .page-content, .navbar, .footer, .fixed-plugin, .sidebar, .content, .container-fluid, .card, .badge-footer { position: relative; z-index: 1; } /* Force UI surfaces opaque so ambient animation stays behind them */ .navbar.navbar-default { background-color: #ffffff !important; background: #ffffff !important; opacity: 1 !important; } .navbar.navbar-default .container-fluid { background-color: #ffffff !important; } .card, .card .content, .tab-content, .footer, .badge-footer, .alert, .panel, .well, .modal-content, .dropdown-menu { background-color: #ffffff !important; opacity: 1 !important; } /* Make label “bubbles” solid */ /* Restore “bubble” pill styling for labels/badges */ .label, .badge { display: inline-block; border-radius: 999px !important; padding: 4px 10px !important; line-height: 1.2 !important; font-weight: 600; } .label[class*="label-"], .badge { box-shadow: 0 6px 16px rgba(17, 20, 23, 0.14); } /* Keep label text crisp */ .label { text-shadow: none !important; } /* ========================= Rounding + bubble polish fixes ========================= */ /* Make navbar “button” pills fully pill-shaped */ .navbar-nav.nav-pillbar > li > a.item-link { border-radius: 999px !important; } /* Add a soft shadow on hover/active so the pills read as “bubbles” */ .navbar-nav.nav-pillbar > li > a.item-link:hover { box-shadow: 0 10px 22px rgba(17, 20, 23, 0.10); } .navbar-nav.nav-pillbar > li.active > a.item-link { box-shadow: 0 12px 26px rgba(17, 20, 23, 0.14); } /* Ensure label “bubbles” are always rounded and keep their shadow */ .label, .badge { border-radius: 999px !important; box-shadow: 0 6px 16px rgba(17, 20, 23, 0.14) !important; } /* Bring all cards to the same rounded “island” radius so nothing looks boxy */ .card { border-radius: 16px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; } /* ========================= Fix rounded corners + opacity on navbar/cards/bubbles ========================= */ /* Make the navbar truly rounded by clipping inner backgrounds */ .navbar.navbar-default.navbar-fixed-top { background: #ffffff !important; overflow: hidden; /* clips .container-fluid background so corners stay rounded */ } /* Ensure inner navbar container doesn't paint square corners */ .navbar.navbar-default.navbar-fixed-top .container-fluid { background: transparent !important; border-radius: 16px; } /* Nav items as real "pills" */ .navbar-nav.nav-pillbar > li > a.item-link { border-radius: 999px !important; } /* Underline matches pill rounding */ .navbar-nav.nav-pillbar > li > a.item-link::before { border-radius: 999px; } /* Cards: consistent rounded islands and no bleed-through */ .card { border-radius: 16px !important; overflow: hidden; /* keeps inner backgrounds from squaring the corners */ } /* Text bubbles: pill + soft shadow (Bootstrap labels are squared by default) */ .label, .badge { border-radius: 999px !important; padding: 6px 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.10) !important; } /* ===== Pastel Clean Theme application ===== */ html, body { background: var(--c-bg) !important; color: var(--c-text) !important; } /* Ensure ambient canvas is visible as page background */ .main-panel, .main-panel > .content, .content, .page-content { background: transparent !important; background-color: transparent !important; } /* Opaque UI surfaces */ .navbar.navbar-default, .navbar.navbar-default.navbar-fixed-top, .navbar.navbar-default.navbar-fixed-top .container-fluid { background: var(--c-nav) !important; background-color: var(--c-nav) !important; border-color: rgba(47, 75, 104, 0.35) !important; } .navbar.navbar-default .navbar-brand, .navbar.navbar-default .navbar-nav > li > a, .navbar.navbar-default .navbar-nav > li > a.item-link { color: rgba(247, 249, 251, 0.92) !important; } .navbar .nav > li > a.item-link:hover { background: var(--c-nav-hover) !important; color: rgba(247, 249, 251, 0.96) !important; } .navbar .nav > li.active > a.item-link, .navbar .nav > li.active > a.item-link:hover, .navbar .nav > li.active > a.item-link:focus { background: rgba(92, 143, 184, 0.30) !important; /* accent wash */ color: rgba(247, 249, 251, 0.98) !important; } .navbar .nav > li > a.item-link::before { background: var(--c-accent) !important; } /* Mode toggle button (if present from earlier work) */ .mode-toggle{ background: rgba(247, 249, 251, 0.14) !important; border: 1px solid rgba(247, 249, 251, 0.22) !important; color: rgba(247, 249, 251, 0.92) !important; } .mode-toggle:hover{ background: rgba(247, 249, 251, 0.20) !important; } /* Sidebar stays dark but consistent */ .sidebar, .sidebar .sidebar-wrapper{ background: var(--c-nav) !important; background-color: var(--c-nav) !important; } .sidebar .nav li a, .sidebar .logo a { color: rgba(247, 249, 251, 0.88) !important; } .sidebar .nav li.active > a, .sidebar .nav li > a:hover, .sidebar .nav li > a:focus{ background: rgba(92, 143, 184, 0.28) !important; color: rgba(247, 249, 251, 0.95) !important; } /* Slabs (cards, panels, etc.) */ .card, .card .content, .tab-content, .modal-content, .dropdown-menu, .footer, .badge-footer, .alert, .panel, .well{ background: var(--c-slab) !important; background-color: var(--c-slab) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; box-shadow: var(--shadow-soft) !important; } .card { border-radius: 16px !important; overflow: hidden; } /* Borders elsewhere */ .table > thead > tr > th, .table > tbody > tr > td, .form-control, .input-group-addon, .dropdown-menu { border-color: var(--c-border) !important; } /* Headings */ .card .title, .card h1, .card h2, .card h3, .card h4, .card h5{ color: var(--c-text) !important; } /* Links + accents */ a, a:hover, a:focus { color: var(--c-accent) !important; } /* Forms */ .form-control{ background: rgba(247, 249, 251, 0.92) !important; background-color: rgba(247, 249, 251, 0.92) !important; color: var(--c-text) !important; } .form-control:focus{ border-color: var(--c-accent) !important; box-shadow: 0 0 0 4px var(--focus-ring) !important; } /* Buttons */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active{ background: var(--c-nav) !important; border-color: var(--c-nav) !important; color: rgba(247, 249, 251, 0.98) !important; } .btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active{ background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: rgba(247, 249, 251, 0.98) !important; } .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active{ background: rgba(247, 249, 251, 0.70) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; } /* Bubbles */ .label, .badge{ border-radius: 999px !important; box-shadow: 0 8px 18px rgba(17, 20, 23, 0.10) !important; } .label-info, .badge-info{ background: var(--c-accent) !important; color: rgba(247, 249, 251, 0.98) !important; } .label-primary, .badge-primary{ background: var(--c-nav) !important; color: rgba(247, 249, 251, 0.98) !important; } .label-default, .badge-default{ background: rgba(247, 249, 251, 0.78) !important; color: var(--c-text) !important; } /* Ambient */ .ambient-webgl{ opacity: var(--ambient-opacity) !important; filter: blur(0.25px); } /* ===== Pastel Clean v2 tweaks (lighter navbar + stronger ambient contrast) ===== */ :root{ --c-nav: #E5EEF5; /* pastel blue navbar */ --c-nav-hover: #D9E6F1; /* hover */ --c-ambient-2: #CFE4F8; /* second ambient tone (more defined) */ --ambient-opacity: 0.34; /* slightly stronger so it's visible */ } /* Navbar is light now, so use dark text */ .navbar.navbar-default, .navbar.navbar-default.navbar-fixed-top, .navbar.navbar-default.navbar-fixed-top .container-fluid{ background: var(--c-nav) !important; background-color: var(--c-nav) !important; border-color: var(--c-border) !important; } .navbar.navbar-default .navbar-brand, .navbar.navbar-default .navbar-nav > li > a, .navbar.navbar-default .navbar-nav > li > a.item-link{ color: rgba(17, 20, 23, 0.82) !important; } .navbar .nav > li > a.item-link:hover{ background: var(--c-nav-hover) !important; color: var(--c-text) !important; } .navbar .nav > li.active > a.item-link, .navbar .nav > li.active > a.item-link:hover, .navbar .nav > li.active > a.item-link:focus{ background: rgba(92, 143, 184, 0.26) !important; /* accent wash */ color: var(--c-text) !important; } .navbar .nav > li > a.item-link::before{ background: var(--c-accent) !important; } /* Sidebar: match navbar (light pastel) */ .sidebar, .sidebar .sidebar-wrapper{ background: var(--c-nav) !important; background-color: var(--c-nav) !important; } .sidebar .nav li a, .sidebar .logo a{ color: rgba(17, 20, 23, 0.72) !important; } .sidebar .nav li.active > a, .sidebar .nav li > a:hover, .sidebar .nav li > a:focus{ background: rgba(92, 143, 184, 0.18) !important; color: var(--c-text) !important; } /* Mode toggle button tuned for light navbar */ .mode-toggle{ background: rgba(17, 20, 23, 0.06) !important; border: 1px solid rgba(17, 20, 23, 0.10) !important; color: rgba(17, 20, 23, 0.78) !important; } .mode-toggle:hover{ background: rgba(17, 20, 23, 0.10) !important; } .navbar .navbar-brand.brand-link:hover, .navbar .navbar-brand.brand-link:focus, .navbar .navbar-brand.brand-link:active{ background: rgba(17, 20, 23, 0.06) !important; border-color: rgba(17, 20, 23, 0.10) !important; color: var(--c-text) !important; } .navbar .navbar-brand.brand-link img{ height: 30px; width: auto; display: block; } /* Ambient visibility */ .ambient-webgl{ opacity: var(--ambient-opacity) !important; } /* ===== Pastel Clean v4 tweaks (lighter navbar, whiter slabs) ===== */ :root{ --c-bg: #F7F9FB; --c-slab: #F9FBFD; /* extremely white, hint of blue */ --c-border: #D7E2EC; --c-nav: #DCEBFA; /* light blue navbar */ --c-nav-hover: #CFE4F8; /* slightly stronger hover */ --c-accent: #5C8FB8; /* keep */ --c-ambient-bg: #F7F9FB; --c-ambient-2: #CFE4F8; /* more defined than bg */ --ambient-opacity: 0.32; } /* Brand logo (left corner). Hover/press only (no active state). */ .navbar .navbar-header{ display: flex; align-items: center; height: 100%; } .navbar .navbar-brand.brand-link{ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* keep it visually centered in the navbar */ margin: 0 10px !important; padding: 0 !important; /* pill size tuned to logo */ width: 52px; height: 44px; background: transparent !important; border: 1px solid transparent !important; border-radius: 14px !important; /* rounded-rectangle (not circle) */ line-height: 1 !important; } .navbar .navbar-brand.brand-link:hover, .navbar .navbar-brand.brand-link:focus, .navbar .navbar-brand.brand-link:active{ background: var(--c-nav-hover) !important; border-color: rgba(17, 20, 23, 0.08) !important; } .navbar .navbar-brand.brand-link img.brand-img{ height: 32px; width: auto; display: block; } /* Prevent Bootstrap default navbar-brand padding from affecting alignment */ .navbar.navbar-default .navbar-brand{ padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; } /* ===== v8 fix: logo flush-left + smaller pill, same logo size ===== */ /* Override only the brand-link used for the logo button (keeps other navbar-brand rules untouched). */ .navbar.navbar-default .navbar-header{ float: left !important; /* keep it on the left edge */ display: flex !important; align-items: center !important; height: 60px; margin-left: 0 !important; margin-right: 0 !important; } .navbar.navbar-default .navbar-header .navbar-brand.brand-link{ position: relative !important; left: auto !important; top: auto !important; transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* flush-left */ margin: 0 8px 0 0 !important; /* smaller pill behind the logo (logo stays big) */ padding: 2px 6px !important; height: 42px !important; width: auto !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 10px !important; /* tighter rounded-rect */ line-height: 1 !important; } .navbar.navbar-default .navbar-header .navbar-brand.brand-link:hover, .navbar.navbar-default .navbar-header .navbar-brand.brand-link:focus, .navbar.navbar-default .navbar-header .navbar-brand.brand-link:active{ background: var(--c-nav-hover) !important; border-color: rgba(17, 20, 23, 0.08) !important; } .navbar.navbar-default .navbar-header .navbar-brand.brand-link img.brand-img{ height: 38px !important; /* same logo size */ width: auto !important; display: block; margin: 0 !important; /* kill any old offsets */ } .navbar.navbar-default .container-fluid{ display: flex !important; align-items: center !important; justify-content: center !important; } /* left logo */ .navbar.navbar-default .navbar-header{ float: none !important; flex: 0 0 auto !important; margin-right: 10px !important; } /* center nav */ .navbar.navbar-default ul.nav.nav-pillbar{ float: none !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* If Bootstrap's navbar-right is present, neutralize it so centering works */ .navbar.navbar-default .navbar-right{ float: none !important; } /* Restore nav button sizing (avoid tiny buttons) */ .navbar.navbar-default .nav > li > a.item-link{ padding: 16px 12px !important; font-size: 16px !important; line-height: 1 !important; } .navbar.navbar-default .nav > li > a.item-link .link-icon{ width: 20px !important; height: 20px !important; margin-right: 6px !important; } .navbar.navbar-default .navbar-header .navbar-brand.brand-link{ margin-left: 8px !important; /* slight inset from edge */ } /* ===== v10 navbar layout: logo inset-left, nav buttons far-right ===== */ .navbar.navbar-default .container-fluid{ display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 14px !important; padding-right: 14px !important; } /* left logo */ .navbar.navbar-default .navbar-header{ float: none !important; flex: 0 0 auto !important; margin: 0 !important; } /* right nav */ .navbar.navbar-default ul.nav.nav-pillbar{ float: none !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; } /* neutralize bootstrap navbar-right floats */ .navbar.navbar-default .navbar-right{ float: none !important; } /* Ensure normal sizing for nav pills */ .navbar.navbar-default .nav > li > a.item-link{ padding: 16px 12px !important; font-size: 16px !important; line-height: 1 !important; } .navbar.navbar-default .nav > li > a.item-link .link-icon{ width: 20px !important; height: 20px !important; margin-right: 6px !important; } /* Logo pill: keep compact and centered inside itself */ .navbar.navbar-default .navbar-header .navbar-brand.brand-link{ margin-left: 8px !important; margin-right: 0 !important; } /* v11: force logo shift right */ .navbar.navbar-default .navbar-header .navbar-brand.brand-link{ margin-left: 8px !important; margin-right: 0 !important; } /* ===== v13: logo pill shadow only on hover/press (light + dark) ===== */ .navbar.navbar-default .navbar-header .navbar-brand.brand-link{ border-radius: 999px !important; /* pill shape */ box-shadow: none !important; /* no shadow at rest */ transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } /* Light mode hover/focus */ .navbar.navbar-default .navbar-header .navbar-brand.brand-link:hover, .navbar.navbar-default .navbar-header .navbar-brand.brand-link:focus{ box-shadow: 0 10px 22px rgba(17, 20, 23, 0.12) !important; transform: translateY(-1px); } /* Light mode active */ .navbar.navbar-default .navbar-header .navbar-brand.brand-link:active{ box-shadow: 0 7px 16px rgba(17, 20, 23, 0.11) !important; transform: translateY(0px); } /* Dark mode hover/focus (stronger, plus subtle outline) */ :root.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:hover, :root.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:focus, body.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:hover, body.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:focus{ box-shadow: 0 18px 44px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.10) !important; } /* Dark mode active */ :root.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:active, body.dark .navbar.navbar-default .navbar-header .navbar-brand.brand-link:active{ box-shadow: 0 12px 30px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.08) !important; } /* ===== v15: active navbar pill matches hover background (no bold) ===== */ .navbar.navbar-default .nav > li.active > a.item-link, .navbar.navbar-default .nav > li.active > a.item-link:hover, .navbar.navbar-default .nav > li.active > a.item-link:focus{ background: var(--c-nav-hover) !important; /* same as hover */ color: var(--c-text) !important; font-weight: 400 !important; /* avoid bold */ letter-spacing: 0 !important; } /* In case the JS toggles .active directly on the link */ .navbar.navbar-default a.item-link.active{ background: var(--c-nav-hover) !important; color: var(--c-text) !important; font-weight: 400 !important; } /* Hover stays the same */ .navbar.navbar-default .nav > li > a.item-link:hover{ background: var(--c-nav-hover) !important; color: var(--c-text) !important; font-weight: 400 !important; } /* ===== v17: remove "gradient" look in bubbles + restore muted descriptions ===== The "gradient" was not a real CSS gradient; it was translucency (rgba) + backdrop-filter blur on tab containers, letting the animated background show through as tonal variation. */ :root{ --c-muted: rgba(17, 20, 23, 0.62); } /* Make all main content bubbles fully solid (no translucency, no blur) */ .island, .tab-content, .card, .card .header, .card .content, .card .footer, .modal-content, .dropdown-menu, .panel, .well, .alert, .footer, .badge-footer{ background: var(--c-slab) !important; background-color: var(--c-slab) !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; } /* Ensure text uses the agreed main color */ .island, .tab-content, .card, .card *:not(.text-muted):not(.card-category):not(.category):not(.help-block):not(small){ color: var(--c-text) !important; } /* Keep descriptions/subtitles subtle (intended secondary text) */ .text-muted, .card .category, .card .card-category, .card .description, .card .stats, .help-block, small{ color: var(--c-muted) !important; } /* Tables should stay readable */ .table, .table td, .table th, .table > thead > tr > th, .table > tbody > tr > td{ color: var(--c-text) !important; } /* ===== v18: remove card header "gradient bar" + darker description text ===== */ /* Some Light Bootstrap Dashboard variants add a tinted/gradient header strip via .card .header or pseudo-elements. Force the header area to be the same solid slab as the rest of the card. */ .card .header, .card-header, .card .header-bg, .card .header .content, .card .header:before, .card .header:after, .card .header .title, .card .header .category{ background: var(--c-slab) !important; background-color: var(--c-slab) !important; background-image: none !important; box-shadow: none !important; } /* Kill any decorative top bars on "plain" or "stats" cards if present */ .card.card-plain .header, .card.card-plain .content, .card.card-plain .footer{ background: var(--c-slab) !important; background-image: none !important; } /* Make description/subtitle text a darker gray-black (still secondary, but clearer) */ :root{ --c-muted: rgba(17, 20, 23, 0.74); } .text-muted, .card .category, .card .card-category, .card .description, .card .stats, .help-block, small{ color: var(--c-muted) !important; } /* ===== v19: remove header strip by making header transparent, and lighten secondary text ===== */ /* We keep the header element (spacing/layout), but remove its background/gradient entirely. */ .card .header, .card-header, .card .header:before, .card .header:after{ background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Optional: subtle divider so the header doesn't feel "banded" */ .card .header{ border-bottom: 1px solid var(--c-border) !important; } /* Secondary/description text: lighter gray (still readable) */ :root{ --c-muted: rgba(17, 20, 23, 0.58); } .text-muted, .card .category, .card .card-category, .card .description, .card .stats, .help-block, small{ color: var(--c-muted) !important; } /* ===== v22: "white blob" shell between UI and animation ===== Ensure the WebGL canvas is fixed behind everything, and place a large off-white rounded panel behind the UI. */ #glscreen, .ambient-webgl{ position: fixed !important; inset: 0 !important; z-index: 0 !important; } .ambient-scrim{ position: fixed; top: 62px; left: 56px; right: 56px; bottom: 62px; background: var(--c-bg); opacity: 1; border-radius: 34px; box-shadow: 0 22px 70px rgba(17, 20, 23, 0.10); pointer-events: none; z-index: 1; } /* UI above the blob */ .navbar.navbar-default, .sidebar, .main-panel, .main-panel > .content, .footer, .page-content, .content, .island, .card, .modal, .modal-backdrop{ position: relative; z-index: 2; } /* Responsive: keep blob but give room */ @media (max-width: 992px){ .ambient-scrim{ left: 18px; right: 18px; top: 56px; bottom: 56px; border-radius: 24px; } } @media (max-width: 576px){ .ambient-scrim{ left: 10px; right: 10px; top: 52px; bottom: 52px; border-radius: 18px; } } /* ===== Dark mode toggle button in navbar ===== */ .navbar-nav.nav-pillbar > li.mode-li{ display: flex; align-items: center; } /* Make the