/* ========================================================================== HELMECH — application theme -------------------------------------------------------------------------- A replacement skin for the Rubick admin template. Loaded after dist/css/app.css and before @stack('styles'). Design: slate + indigo, light shell, compact density. canvas #ffffff sidebar #f8fafc card #ffffff / 1px #e2e8f0 accent #4f46e5 ink #0f172a muted #64748b Rubick's signature devices are deliberately switched off rather than layered over — the curved sidebar notches (SVG background-images on :before/:after), the floating rounded content panel, and the royal-blue html background. Overriding those only partially is what produces stray white blocks, so each is neutralised explicitly and commented. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Surfaces */ --h-canvas: #ffffff; --h-canvas-sunken: #f8fafc; --h-card: #ffffff; /* Dark rail. Text tokens are chosen to clear 4.5:1 on --h-sidebar: #94a3b8 → 5.2:1, #e2e8f0 → 12.6:1. */ --h-sidebar: #0f172a; --h-sidebar-line: #1e293b; --h-sidebar-ink: #cbd5e1; --h-sidebar-muted: #94a3b8; --h-sidebar-hover: #1e293b; --h-sidebar-active-bg: rgba(99, 102, 241, 0.18); --h-sidebar-active-ink: #c7d2fe; /* Lines */ --h-line: #e2e8f0; --h-line-soft: #eef2f6; --h-line-strong: #cbd5e1; /* Ink */ --h-ink: #0f172a; --h-ink-2: #334155; --h-muted: #64748b; --h-faint: #94a3b8; /* Accent */ --h-accent: #4f46e5; --h-accent-hover: #4338ca; --h-accent-soft: #eef2ff; --h-accent-line: #c7d2fe; /* Status */ /* #059669 is only 3.8:1 on white — short of 4.5 for the status labels and for white text on the filled success button. #047857 clears it at 5.5. */ --h-success: #047857; --h-success-soft: #ecfdf5; --h-warning: #d97706; --h-warning-soft: #fffbeb; --h-danger: #dc2626; --h-danger-soft: #fef2f2; --h-info: #0284c7; --h-info-soft: #f0f9ff; /* Shape */ --h-r-sm: 4px; --h-r: 6px; --h-r-lg: 8px; --h-ring: 0 0 0 3px rgba(79, 70, 229, 0.18); --h-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --h-shadow: 0 4px 12px rgba(15, 23, 42, 0.07); --h-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* Density — compact */ --h-row-h: 38px; --h-cell-y: 6px; --h-cell-x: 10px; --h-control-h: 32px; --h-text: 13px; --h-topbar-h: 56px; --h-sidebar-w: 232px; --h-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 2. Shell Rubick paints the page blue on and floats .content as a rounded panel on top. The new theme is a flat two-column shell instead. -------------------------------------------------------------------------- */ html { background-color: var(--h-canvas) !important; } body.main { background: var(--h-canvas); /* The theme insets the whole app by 1.25rem top/bottom and 12px on the sides, which leaves a stray white gutter to the left of the sidebar. The shell should meet the window edge. */ padding: 0 !important; color: var(--h-ink); font-size: var(--h-text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .content { background-color: var(--h-canvas) !important; border-radius: 0; min-height: 100vh; padding: 0 28px 56px; /* The theme's intro animation starts elements at translateX(50px), which flashes a horizontal scrollbar on load. `clip` suppresses it without creating a scroll container, so the sticky top bar still works. */ overflow-x: clip; } @media (max-width: 767.98px) { .content { padding: 0 16px 40px; } } /* Figures line up down the column. */ .table, .table td, .table th, input.form-control, .badge, .pagination { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } h1, h2, h3, h4, h5, h6 { color: var(--h-ink); letter-spacing: -0.014em; font-weight: 600; } h2.intro-y.fs-lg, h2.fs-lg { font-size: 18px; font-weight: 600; } a { color: var(--h-accent); text-decoration: none; } a:hover { color: var(--h-accent-hover); } hr { border-color: var(--h-line); opacity: 1; } /* -------------------------------------------------------------------------- 3. Sidebar -------------------------------------------------------------------------- */ .side-nav { position: sticky; top: 0; align-self: stretch; width: var(--h-sidebar-w); /* Fill the window even when the menu is shorter than the viewport, so the rail does not stop mid-page and expose white beneath it. */ min-height: 100vh; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 32px; background-color: var(--h-sidebar); border-right: 1px solid var(--h-sidebar-line); scrollbar-width: thin; scrollbar-color: #334155 transparent; } .side-nav::-webkit-scrollbar { width: 8px; } .side-nav::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 999px; } /* Logo block. The wordmark is dark artwork, so it sits on a white plate rather than being filtered — that keeps the brand colours intact. */ .side-nav > a:first-child { display: block !important; padding: 14px 4px 10px !important; margin: 0; } .side-nav > a:first-child img { display: block; width: 100%; max-width: 100%; height: auto; padding: 10px 12px; background: #ffffff; border-radius: var(--h-r-lg); } .side-nav .side-nav__devider { background-color: var(--h-sidebar-line) !important; margin: 2px 0 10px !important; opacity: 1; } /* Menu filter */ .side-nav > .pb-3 { position: sticky; top: 0; z-index: 6; padding: 6px 0 10px; background-color: var(--h-sidebar); } .side-nav #menuSearch { height: 34px; padding: 0 10px; font-size: 12.5px; color: var(--h-sidebar-ink); background-color: #1e293b !important; border: 1px solid #334155; border-radius: var(--h-r); box-shadow: none; } .side-nav #menuSearch::placeholder { color: #64748b; } .side-nav #menuSearch:focus { border-color: var(--h-accent); background-color: #1e293b !important; box-shadow: var(--h-ring); } /* Nav items */ .side-nav .side-menu { height: 34px; margin-bottom: 1px; padding: 0 10px; border-radius: var(--h-r); font-size: 13px; font-weight: 500; color: var(--h-sidebar-ink); transition: background-color 0.12s var(--h-ease), color 0.12s var(--h-ease); } .side-nav .side-menu:hover { background-color: var(--h-sidebar-hover); color: #ffffff; } .side-nav .side-menu .side-menu__title { margin-left: 10px; font-size: 13px; } .side-nav .side-menu .side-menu__icon { color: var(--h-sidebar-muted); } .side-nav .side-menu .side-menu__icon svg { width: 16px; height: 16px; stroke-width: 1.9; } .side-nav .side-menu .side-menu__sub-icon { margin-right: 0; } .side-nav .side-menu .side-menu__sub-icon svg { width: 14px; height: 14px; color: var(--h-faint); } /* Active state. Rubick draws the active item as a light pill plus two 30x30 curved corner notches rendered as SVG background-images on :before/:after. Those only make sense against the blue rail, so both pseudo-elements are removed outright — never merely recoloured. */ .side-nav > ul > li > .side-menu.side-menu--active:before, .side-nav > ul > li > .side-menu.side-menu--active:after, .side-nav .side-menu.side-menu--active:before, .side-nav .side-menu.side-menu--active:after { content: none !important; display: none !important; background-image: none !important; } .side-nav .side-menu.side-menu--active, .side-nav > ul > li > .side-menu.side-menu--active { background-color: var(--h-sidebar-active-bg) !important; color: var(--h-sidebar-active-ink) !important; font-weight: 600; } .side-nav .side-menu.side-menu--active .side-menu__title, .side-nav > ul > li > .side-menu.side-menu--active .side-menu__title { color: var(--h-sidebar-active-ink) !important; } .side-nav .side-menu.side-menu--active .side-menu__icon, .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon { color: var(--h-sidebar-active-ink) !important; } /* The theme also masks the pill with a pseudo-element on the icon. */ .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon:before { content: none !important; display: none !important; } /* Sub-menus: hairline guide, quieter type. */ .side-nav ul ul { margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--h-sidebar-line); } /* The theme colours sub-items with `.side-nav>ul ul li a:not(.side-menu--active)` — specificity (0,2,4), and a pale lavender meant to sit on the blue rail. Match that weight or the text stays near-invisible on the light sidebar. */ .side-nav > ul ul li a.side-menu:not(.side-menu--active), .side-nav ul ul .side-menu { height: 31px; font-size: 12.5px; font-weight: 400; color: var(--h-sidebar-muted); } .side-nav > ul ul li a.side-menu:not(.side-menu--active):hover { background-color: var(--h-sidebar-hover); color: #ffffff; } /* The theme fills open sub-menu panels with deep blue (rgb(26,56,159)) to sit on the old rail. Every nesting level has to be cleared, or sub-item text sits on a blue block inside the light sidebar. */ .side-nav ul ul, .side-nav ul ul ul, .side-nav .side-menu__sub-open { background-color: transparent !important; } .side-nav ul ul .side-menu .side-menu__title { font-size: 12.5px; } .side-nav ul ul .side-menu .side-menu__icon svg { width: 14px; height: 14px; } /* -------------------------------------------------------------------------- 4. Top bar -------------------------------------------------------------------------- */ .top-bar { position: sticky; top: 0; z-index: 51; height: var(--h-topbar-h); margin-inline: -28px; padding-inline: 28px; background-color: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--h-line); } @media (max-width: 767.98px) { .top-bar { margin-inline: -16px; padding-inline: 16px; } } /* Breadcrumb was white-on-blue; it is now dark-on-white. */ .top-bar .breadcrumb a { color: var(--h-muted); font-size: 13px; font-weight: 500; } .top-bar .breadcrumb a:hover { color: var(--h-ink); } .top-bar .breadcrumb .breadcrumb--active { color: var(--h-ink); font-weight: 600; } .top-bar .breadcrumb .breadcrumb__icon { width: 14px; height: 14px; color: var(--h-faint); margin: 0 6px; } /* Fiscal-year pill: the view sets colours inline, so they are forced here. */ .top-bar .rounded-pill[data-bs-toggle="dropdown"] { height: 30px; background-color: var(--h-canvas) !important; color: var(--h-ink) !important; border: 1px solid var(--h-line) !important; border-radius: var(--h-r) !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600; } .top-bar .rounded-pill[data-bs-toggle="dropdown"]:hover { background-color: var(--h-canvas-sunken) !important; border-color: var(--h-line-strong) !important; } .top-bar .rounded-pill[data-bs-toggle="dropdown"] svg { color: var(--h-muted); } .top-bar .dropdown-toggle.rounded-pill.image-fit { border: 1px solid var(--h-line); box-shadow: none !important; background-color: var(--h-canvas); } /* Uploaded avatars are usually wide company wordmarks (388x180 here). The theme's `object-fit: cover` crops that to an unreadable centre slice, so fit the whole image inside the circle instead. */ .top-bar .image-fit > img { object-fit: contain; padding: 3px; background-color: var(--h-canvas); } /* Account dropdown was a dark panel; align it with the rest. */ .top-bar .dropdown-content.bg-theme-26 { background-color: var(--h-card) !important; color: var(--h-ink) !important; } .top-bar .dropdown-content.bg-theme-26 .text-white, .top-bar .dropdown-content.bg-theme-26 .dropdown-item { color: var(--h-ink) !important; } .top-bar .dropdown-content.bg-theme-26 .dropdown-item:hover { background-color: var(--h-canvas-sunken) !important; color: var(--h-accent) !important; } /* -------------------------------------------------------------------------- 5. Cards / panels Flat, bordered, no drop shadow. -------------------------------------------------------------------------- */ .box { background-color: var(--h-card) !important; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); box-shadow: none; } /* Panel header strip on add/edit forms. */ .box > .d-flex.border-bottom:first-child { gap: 8px; padding: 12px 16px !important; background-color: var(--h-canvas-sunken); border-color: var(--h-line) !important; border-radius: var(--h-r-lg) var(--h-r-lg) 0 0; } .box > .d-flex.border-bottom:first-child h2 { font-size: 14px; font-weight: 600; } /* --- Dashboard stat tiles ------------------------------------------- The view assigns each icon a different theme utility (text-theme-10/11/12, theme-9, theme-6), so the tiles read as eight unrelated colours. One treatment for all of them: a soft accent chip, with the figure carrying the emphasis. */ .report-box .box { padding: 16px !important; } /* Two classes deep so this beats the .text-theme-* status overrides defined further down this file — those also use !important and would otherwise win on source order. */ .report-box .report-box__icon, .report-box svg.report-box__icon { width: 34px !important; height: 34px !important; padding: 7px; border-radius: var(--h-r); background-color: var(--h-accent-soft); color: var(--h-accent) !important; stroke-width: 2; } .report-box__total { margin-top: 14px !important; font-size: 26px !important; font-weight: 650; line-height: 1.1; color: var(--h-ink); letter-spacing: -0.025em; } .report-box .fs-base { font-size: 12.5px !important; color: var(--h-muted) !important; } .report-box.zoom-in:hover { transform: none; } .report-box .box:hover { border-color: var(--h-accent-line); } .box .fs-3xl, .box .fs-2xl { color: var(--h-ink); font-weight: 650; letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- 6. Tables -------------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; margin-bottom: 0; font-size: var(--h-text); border-color: var(--h-line); } .table > thead > tr > th { padding: 8px var(--h-cell-x); background-color: var(--h-canvas-sunken); color: var(--h-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; border-bottom: 1px solid var(--h-line-strong); } .table > tbody > tr > td { height: var(--h-row-h); padding: var(--h-cell-y) var(--h-cell-x); line-height: 1.35; vertical-align: middle; color: var(--h-ink-2); border-color: var(--h-line-soft); } /* The first column is the record identifier on every grid in this app (job no, tran no, voucher no). Those are hyphenated, so the browser happily breaks them across three lines in a narrow column — pin them to one line and let the wider descriptive columns absorb the wrapping instead. */ .table > tbody > tr > td:first-child, .table > thead > tr > th:first-child { white-space: nowrap; } .table > tbody > tr { transition: background-color 0.1s var(--h-ease); } .table > tbody > tr:hover > td { background-color: var(--h-canvas-sunken); } /* Full grid lines on every table, not just `.table-bordered`. On dense freight/accounts grids the vertical rules are what let the eye track a value back to its column. */ .table > :not(caption) > * > *, .table.table-bordered > :not(caption) > * > * { border-width: 1px; border-style: solid; border-color: var(--h-line); } .table > thead > tr > th { border-color: var(--h-line-strong) !important; } /* Outer frame, so the grid reads as one block inside the panel. */ .table { border: 1px solid var(--h-line); border-radius: var(--h-r); border-collapse: separate; border-spacing: 0; overflow: hidden; } .table > :not(caption) > * > *:first-child { border-left: 0; } .table > :not(caption) > * > *:last-child { border-right: 0; } .table > thead > tr:first-child > * { border-top: 0; } .table > tbody > tr:last-child > * { border-bottom: 0; } /* Status tints the app paints on job-charge rows must still win. */ .table > tbody > tr > td.background-green-td, .table > tbody > tr > td.background-grey-td, .table > tbody > tr > td.background-white-td, .table > tbody > tr.bg-theme-9-table > td, .table > tbody > tr.bg-gray-300 > td { background-color: inherit; } /* Inputs inside grid cells must not inflate the row. */ .table .form-control, .table .form-select { height: 28px; min-height: 28px; padding: 2px 8px; font-size: 12.5px; border-radius: var(--h-r-sm); } .table .form-check-input { margin-top: 0; } /* Frozen columns on the job charge grids. charges.blade.php pins four columns with an inline