/* * BlueOneHR — Theme Override * Loaded after Horilla's style.min.css so every rule here wins. * * Palette * ------- * --bon-navy #0D2545 sidebar, dark headings * --bon-steel #1558A8 sidebar background * --bon-royal #1A56DB primary actions, active states * --bon-sky #29ABE2 accents, info badges * --bon-baby #E8F4FD highlighted backgrounds, hover fills * --bon-grey-bg #EEF2F7 main page background * --bon-grey-mid #6B7280 secondary text, placeholders * --bon-card-bg #FFFFFF card/panel backgrounds * --bon-border #DDE3ED subtle borders * * Horilla 1.5.0 actual class names (verified from style.min.css): * Stat tiles → .oh-card-dashboard (NOT .oh-dashboard-card) * Widget cards → .oh-dashboard-card (large content cards) * General cards → .oh-card (border-radius: 0 by default) * Section hdr → .oh-titlebar-container (NOT .oh-titlebar) * Auth page → .oh-auth, .oh-auth-card */ :root { --bon-navy: #0D2545; --bon-steel: #1558A8; --bon-royal: #1A56DB; --bon-sky: #29ABE2; --bon-baby: #E8F4FD; --bon-grey-bg: #EEF2F7; --bon-grey-mid: #6B7280; --bon-card-bg: #FFFFFF; --bon-border: #DDE3ED; } /* ═══════════════════════════════════════════════════════════════════════ FOUC PREVENTION Two-layer defence so Horilla's ion-icon web-components never flash: Layer 1 — always suppress ion-icon dimensions/opacity so even if they somehow escape Layer 2 they remain invisible. Layer 2 — hide the entire icon slot until sidebar_custom.js has finished replacing every ion-icon with an inline SVG and added the `bon-icons-ready` class to . The slot is then revealed in one clean paint containing our SVGs only. ═══════════════════════════════════════════════════════════════════════ */ /* Layer 1 */ .oh-sidebar__menu-icon ion-icon { opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } /* Layer 2 — hide the whole slot until JS is done */ body:not(.bon-icons-ready) .oh-sidebar__menu-icon { visibility: hidden; } /* ═══════════════════════════════════════════════════════════════════════ PAGE & CONTENT BACKGROUND ═══════════════════════════════════════════════════════════════════════ */ body { background-color: var(--bon-grey-bg) !important; } /* Main scrollable content region — the area to the right of the sidebar */ .oh-main-content, .oh-dashboard__container, .oh-content, main { background-color: var(--bon-grey-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════════════════ */ .oh-sidebar { background-color: var(--bon-steel) !important; border-right: none !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12) !important; } .oh-sidebar__section-title { color: rgba(255, 255, 255, 0.40) !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.09em; } .oh-sidebar__menu-link { color: rgba(255, 255, 255, 0.85) !important; border-radius: 6px !important; transition: background .15s ease, color .15s ease !important; } .oh-sidebar__menu-link:hover { background-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } .oh-sidebar__menu-link--active { background-color: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } .oh-sidebar__menu-link--active .oh-sidebar__menu-text { color: #ffffff !important; } .oh-sidebar__menu-icon { color: rgba(255, 255, 255, 0.75) !important; display: flex !important; align-items: center !important; } .oh-sidebar__submenu { background-color: rgba(0, 0, 0, 0.16) !important; border-radius: 0 0 6px 6px !important; } .oh-sidebar__submenu-link { color: rgba(255, 255, 255, 0.68) !important; } .oh-sidebar__submenu-link:hover, .oh-sidebar__submenu-link--active { color: #ffffff !important; } .oh-sidebar__company { border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } .oh-sidebar__company-title { color: #ffffff !important; } .oh-sidebar__company-link { color: rgba(255, 255, 255, 0.55) !important; } /* ═══════════════════════════════════════════════════════════════════════ TOP NAVBAR ═══════════════════════════════════════════════════════════════════════ */ .oh-navbar { background-color: #ffffff !important; border-bottom: 1px solid var(--bon-border) !important; box-shadow: 0 1px 6px rgba(13, 37, 69, 0.06) !important; } .oh-navbar__breadcrumb-link.active { color: var(--bon-royal) !important; } /* ═══════════════════════════════════════════════════════════════════════ GENERAL CARDS (.oh-card) Horilla default: border-radius 0 — we make them rounded with shadow. ═══════════════════════════════════════════════════════════════════════ */ .oh-card { background-color: var(--bon-card-bg) !important; border: 1px solid var(--bon-border) !important; border-radius: 12px !important; box-shadow: 0 1px 4px rgba(13, 37, 69, 0.05), 0 4px 16px rgba(13, 37, 69, 0.04) !important; transition: box-shadow .2s ease, transform .15s ease !important; } .oh-card:hover { box-shadow: 0 2px 8px rgba(13, 37, 69, 0.08), 0 8px 24px rgba(13, 37, 69, 0.07) !important; } .oh-card__header, .oh-kanban__header { border-bottom: 1px solid var(--bon-border) !important; border-radius: 12px 12px 0 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ DASHBOARD KPI STAT TILES (.oh-card-dashboard) These are the 3-4 count tiles at the top of the dashboard (New Joining Today / This Week / Total Strength / etc.) Horilla gives them border-top: 5px solid + scale-on-hover. We enhance with a soft gradient, deeper shadow, and lift-on-hover. ═══════════════════════════════════════════════════════════════════════ */ .oh-card-dashboard { background: linear-gradient(145deg, #ffffff 0%, #f5f8ff 100%) !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(21, 88, 168, 0.08), 0 1px 3px rgba(13, 37, 69, 0.05) !important; transition: box-shadow .2s ease, transform .2s ease !important; } .oh-card-dashboard:hover { /* Override Horilla's scale(102%) with a subtle lift */ transform: translateY(-3px) scale(100%) !important; box-shadow: 0 8px 24px rgba(21, 88, 168, 0.14), 0 2px 6px rgba(13, 37, 69, 0.08) !important; } .oh-card-dashboard__count { color: var(--bon-navy) !important; font-weight: 700 !important; } .oh-card-dashboard__title { color: var(--bon-grey-mid) !important; } /* Re-colour the top-border accents to our brand palette */ .oh-card-dashboard--success { border-top-color: #10b981 !important; } .oh-card-dashboard--warning { border-top-color: #f59e0b !important; } .oh-card-dashboard--neutral { border-top-color: var(--bon-sky) !important; } .oh-card-dashboard--danger { border-top-color: var(--bon-royal) !important; } /* ═══════════════════════════════════════════════════════════════════════ DASHBOARD WIDGET CARDS (.oh-dashboard-card) Larger content cards (Offline Employees, Leave Requests, etc.) ═══════════════════════════════════════════════════════════════════════ */ .oh-dashboard-card { border-radius: 12px !important; border: 1px solid var(--bon-border) !important; box-shadow: 0 1px 4px rgba(13, 37, 69, 0.05), 0 4px 16px rgba(13, 37, 69, 0.04) !important; transition: box-shadow .2s ease !important; } .oh-dashboard-card:hover { box-shadow: 0 2px 8px rgba(13, 37, 69, 0.08), 0 8px 24px rgba(13, 37, 69, 0.07) !important; } /* ═══════════════════════════════════════════════════════════════════════ SECTION / PAGE HEADERS (.oh-titlebar-container) Actual Horilla class name — NOT .oh-titlebar (that doesn't exist). ═══════════════════════════════════════════════════════════════════════ */ .oh-titlebar-container { background: linear-gradient(90deg, #f0f5ff 0%, var(--bon-grey-bg) 100%) !important; border-bottom: 1px solid var(--bon-border) !important; border-radius: 10px 10px 0 0 !important; padding: 12px 20px !important; margin-bottom: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════════ */ .oh-table, table { border-radius: 10px !important; overflow: hidden !important; border: 1px solid var(--bon-border) !important; } .oh-table th, thead th { background-color: #f5f8ff !important; color: var(--bon-navy) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--bon-border) !important; } .oh-table tr:hover td, tbody tr:hover td { background-color: #f0f5ff !important; } /* ═══════════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════════ */ .oh-btn--secondary { background-color: var(--bon-royal) !important; border-color: var(--bon-royal) !important; color: #ffffff !important; border-radius: 8px !important; font-weight: 600 !important; transition: background .15s ease, box-shadow .15s ease !important; } .oh-btn--secondary:hover, .oh-btn--secondary:focus { background-color: #1347b8 !important; border-color: #1347b8 !important; box-shadow: 0 4px 12px rgba(26, 86, 219, 0.28) !important; } .oh-btn--light, .oh-btn--outline { border-radius: 8px !important; } /* ═══════════════════════════════════════════════════════════════════════ LINKS ═══════════════════════════════════════════════════════════════════════ */ a.oh-link--secondary, .oh-link--secondary { color: var(--bon-royal) !important; } a.oh-link--secondary:hover { color: var(--bon-sky) !important; } /* ═══════════════════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════════════════ */ .oh-tabs__tab--active { border-bottom-color: var(--bon-royal) !important; color: var(--bon-royal) !important; } /* ═══════════════════════════════════════════════════════════════════════ BADGES / PILLS ═══════════════════════════════════════════════════════════════════════ */ .oh-badge--info, .oh-badge--primary { background-color: var(--bon-baby) !important; color: var(--bon-royal) !important; border-radius: 20px !important; } /* ═══════════════════════════════════════════════════════════════════════ FORM INPUTS ═══════════════════════════════════════════════════════════════════════ */ .oh-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { border-radius: 8px !important; border-color: #cbd5e1 !important; transition: border-color .15s ease, box-shadow .15s ease !important; } .oh-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--bon-royal) !important; box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.14) !important; outline: none !important; } /* ═══════════════════════════════════════════════════════════════════════ LOGIN PAGE ═══════════════════════════════════════════════════════════════════════ */ .oh-auth { background: linear-gradient(135deg, #e8f0fe 0%, var(--bon-grey-bg) 60%, #e8f4fd 100%) !important; } .oh-auth-card { border: 1px solid var(--bon-border) !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(13, 37, 69, 0.10), 0 2px 8px rgba(13, 37, 69, 0.06) !important; } /* ═══════════════════════════════════════════════════════════════════════ SCROLLBAR (webkit) ═══════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c7d2e4 !important; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--bon-royal) !important; } /* ── Login page logo ──────────────────────────────────────────────────────── #blueonehr-login-logo is placed BELOW .oh-auth-card in Horilla's template, so it sits directly on the .oh-auth gradient background. Strip any box/card styling and let it float cleanly on the gradient. */ #blueonehr-login-logo { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: -0.5rem 0 0 !important; padding: 0.5rem 1rem 1rem !important; } /* Logo image sizing — constrained to fit login form width (~340px on screen) */ #blueonehr-login-logo img, div[style*="display: contents"] img[alt*="BlueOneHR"], div[style*="display: contents"] img[alt*="Horilla"], div[style*="display:contents"] img { max-height: 64px !important; max-width: 240px !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* ═══════════════════════════════════════════════════════════════════════ STAT TILES — light polish only (no structural changes) Rounded corners + shadow to match the BlueOneHR card language. No icon injection, no left stripes — preserves Horilla's internal tile layout exactly. ═══════════════════════════════════════════════════════════════════════ */ .oh-card-dashboard { border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important; border: 1px solid var(--bon-border) !important; transition: box-shadow .15s ease !important; }