/* ============================================================================= astera-ui.css — the project's override layer. Loaded after style.min.css (see ASTERA_GLOBAL_CSS in partials/assets-manifest.php) so it wins on equal specificity without needing !important. PHASE 1 — REPAIR ONLY. Everything here is additive and keyed to classes the markup already uses, so no page had to be edited. The whole layer reverts by removing one entry from the manifest array. Why it exists: ~125 class usages across four families were written into the markup but defined by no stylesheet — not by style.css and not by Bootstrap. They rendered as bare white or as uncoloured text. That is most of what "the UI looks too plain" actually was. bg-light-{primary,secondary,success,danger,warning,info} 69 uses, 0 rules bg-white-transparent 4 uses, 0 rules badge-line{success,danger,warning,info,secondary} 49 uses, 0 usable rules* bg-{success,danger,warning}-900 3 uses, 0 rules * The only badge-line rules in 46k lines are `.profile-head-action .badge-linesuccess` (scoped to a profile header), `.badge .badge-linedanger` (a badge inside a badge — never matches), and one missing its leading dot. Colour values are the theme's own intended ramp from assets/scss/utils/ _variables.scss ($success-100 etc.), so these match the one badge family that already worked (.badge-soft-*). Text inks are darkened for contrast — the ramp's own base colours do not reach 4.5:1 on their matching tint. Phase 2 retunes the tokens below; nothing else should need to change. ========================================================================== */ :root { /* Brand — both from assets/img/logo.svg, which is navy + orange. The portal has been using only the orange; the navy arrives structurally in Phase 2. */ --au-ink: #092C4C; --au-accent: #FE9F43; /* Surfaces. The page/card step was #F7F7F7 -> #FFFFFF: a 3% luminance difference with a hairline border and box-shadow:none, which is the single biggest reason the layout reads flat. */ --au-bg: #EEF1F4; --au-surface: #FFFFFF; --au-line: #DDE3E9; /* Tints — theme ramp *-100 values, matching .badge-soft-*. */ --au-tint-primary: #FFF6EE; --au-tint-secondary: #E4E8EC; --au-tint-success: #EEFAF1; --au-tint-warning: #FFFAEE; --au-tint-danger: #FFEDE9; --au-tint-info: #E7F0FF; /* Inks for text/icons sitting on those tints. Deliberately darker than the theme's base colours, which fail contrast on their own tint. */ --au-ink-primary: #9A5B12; --au-ink-secondary: #092C4C; --au-ink-success: #15803D; --au-ink-warning: #B45309; --au-ink-danger: #B91C1C; --au-ink-info: #1D4ED8; /* Strong ramp steps used by a handful of KPI tiles. */ --au-strong-success: #4ECD7E; --au-strong-warning: #FFD048; --au-strong-danger: #FF4031; /* Elevation. The theme's surviving shadow is a 60px blur of a colour 24 units off white — it cannot read as elevation at any size. These have a perceptible edge. */ --au-shadow-sm: 0 1px 2px rgba(9, 44, 76, .06); --au-shadow: 0 1px 3px rgba(9, 44, 76, .08), 0 1px 2px rgba(9, 44, 76, .04); --au-shadow-raised: 0 4px 12px rgba(9, 44, 76, .10), 0 2px 4px rgba(9, 44, 76, .06); /* Interaction feedback reads as responsive at 150-250ms. The theme uses `transition: all 0.5s` on buttons, cards and the page wrapper. */ --au-speed: 160ms; } /* ----------------------------------------------------------------------------- 1. Tint utilities Used as KPI card grounds and as the chip behind an icon. Because the class was undefined, every tinted card on the dashboard, cash-flow, gst-reports and client-statement rendered as a plain white box. No !important: these load after style.min.css, and nothing else defines them. -------------------------------------------------------------------------- */ .bg-light-primary { background-color: var(--au-tint-primary); } .bg-light-secondary { background-color: var(--au-tint-secondary); } .bg-light-success { background-color: var(--au-tint-success); } .bg-light-warning { background-color: var(--au-tint-warning); } .bg-light-danger { background-color: var(--au-tint-danger); } .bg-light-info { background-color: var(--au-tint-info); } /* Sits on a filled (bg-primary) card, so it must be a wash of white rather than a solid — used for the icon chip on the dashboard's solid KPI tiles. */ .bg-white-transparent { background-color: rgba(255, 255, 255, .18); } /* Strong ramp steps. Paired with .text-white in the markup. */ .bg-success-900 { background-color: var(--au-strong-success); } .bg-warning-900 { background-color: var(--au-strong-warning); } .bg-danger-900 { background-color: var(--au-strong-danger); } /* ----------------------------------------------------------------------------- 2. Status pills The markup uses four different badge families for the same three or four meanings. This defines the missing "line" family as a soft outlined pill. NOTE, correcting an earlier comment here: this block is NOT scaffolding to be deleted once the rollout finishes. ui_status_pill() emits exactly these class names, so these rules ARE the pill. Deleting them would strip the styling from every status in the portal. What the rollout removes is hand-written `badge-line*` in src/ — a status should come from ui_status_pill() so the vocabulary stays in one place. A Pending badge must not be a solid yellow chip on leaves-admin.php and invisible text on attendance-regularize.php. Base .badge already supplies padding, radius, weight and letter-spacing. -------------------------------------------------------------------------- */ .badge-linesuccess, .badge-linedanger, .badge-linewarning, .badge-lineinfo, .badge-linesecondary { display: inline-flex; align-items: center; border: 1px solid transparent; background-color: transparent; white-space: nowrap; } .badge-linesuccess { background-color: var(--au-tint-success); color: var(--au-ink-success); border-color: rgba(21, 128, 61, .22); } .badge-linedanger { background-color: var(--au-tint-danger); color: var(--au-ink-danger); border-color: rgba(185, 28, 28, .22); } .badge-linewarning { background-color: var(--au-tint-warning); color: var(--au-ink-warning); border-color: rgba(180, 83, 9, .22); } .badge-lineinfo { background-color: var(--au-tint-info); color: var(--au-ink-info); border-color: rgba(29, 78, 216, .22); } .badge-linesecondary { background-color: var(--au-tint-secondary); color: var(--au-ink-secondary); border-color: rgba(9, 44, 76, .18); } /* The theme scopes .badge-linesuccess/.badge-linedanger to .profile-head-action with a heavier treatment. Keep those pages consistent with everywhere else. */ .profile-head-action .badge-linesuccess { background-color: var(--au-tint-success); color: var(--au-ink-success); } .profile-head-action .badge-linedanger { background-color: var(--au-tint-danger); color: var(--au-ink-danger); } /* ----------------------------------------------------------------------------- 3. Surfaces and elevation .card was `border: 1px solid #E6EAED; box-shadow: none;` on a #F7F7F7 page. Deepening the ground and giving the card a real (small) shadow is what makes the layout stop reading as one flat sheet. No decoration is added. -------------------------------------------------------------------------- */ body { background-color: var(--au-bg); } .card { border-color: var(--au-line); box-shadow: var(--au-shadow); transition: box-shadow var(--au-speed) ease, transform var(--au-speed) ease; } /* 56 elements use .border-0 to remove the card outline. They still need to read as a surface, so give them the shadow back. */ .card.border-0 { box-shadow: var(--au-shadow); } /* The dashboard's 12 KPI tiles are . They were clickable with no hover affordance at all, and the theme's `transition: all .5s` animated nothing because nothing changed on interaction. */ a.card { cursor: pointer; } a.card:hover, a.card:focus-visible { box-shadow: var(--au-shadow-raised); transform: translateY(-2px); } /* Modals and dropdowns genuinely float; they should not share the card's resting elevation. */ .modal-content { border-color: var(--au-line); box-shadow: 0 16px 48px rgba(9, 44, 76, .18); } .dropdown-menu { border-color: var(--au-line); box-shadow: var(--au-shadow-raised); } /* ----------------------------------------------------------------------------- 4. Focus visibility style.css carries `.btn:focus { box-shadow: none !important }` and 11 `outline: none` rules against 3 :focus-visible rules in 46,492 lines, so keyboard users had essentially no visible position. !important is required here only to beat that existing !important. :focus-visible (not :focus) keeps the ring off mouse clicks. -------------------------------------------------------------------------- */ .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--au-accent) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Sidebar and topbar sit on dark or tinted grounds where orange-on-navy is the readable pairing; keep the same ring but lift it off the background. */ .sidebar a:focus-visible, .header a:focus-visible { outline-offset: -2px !important; } /* ----------------------------------------------------------------------------- 5. Interaction timing `transition: all 0.5s` is well past the point where feedback reads as responsive, and `all` animates properties that were never meant to move. -------------------------------------------------------------------------- */ .btn { transition: background-color var(--au-speed) ease, border-color var(--au-speed) ease, color var(--au-speed) ease, box-shadow var(--au-speed) ease; } /* ----------------------------------------------------------------------------- 6. Motion preference -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .card, a.card:hover, a.card:focus-visible, .btn { transition: none; transform: none; } } /* ============================================================================= PHASE 2 — DESIGN SYSTEM Still additive and still keyed to existing markup. Where Phase 1 restored what was missing, this establishes the hierarchy, rhythm and density that were never there. Navy is applied to titles, table headers and the active nav item. It is NOT applied to the sidebar ground: 36 rules in style.css set .sidebar background and 1,125 more colour its contents, so flipping it from an override layer would need !important throughout and risks breaking the nav in some state. That is a theme variant, not an override — tracked separately. ========================================================================== */ /* ----------------------------------------------------------------------------- 7. Type scale The hierarchy collapsed at the top: `.page-header h4` and `.card .card-title` both computed to 18px/700, so a page title was indistinguishable from a card heading and only 4px larger than body text. That is the single biggest reason the pages read as undifferentiated. -------------------------------------------------------------------------- */ .page-header h4, .page-header .page-title h4 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--au-ink); } /* The subtitle under the page title is 14px/400 — same as body. Step it down so the pair reads as one unit rather than two competing lines. */ .page-header .page-title h6 { font-size: 13px; font-weight: 400; line-height: 1.4; } /* Card titles sit a clear step below page titles. */ .card .card-title { font-size: 16px; font-weight: 600; color: var(--au-ink); letter-spacing: -0.005em; } /* On narrow screens the theme drops the page title to 14px — identical to body text, which removes the hierarchy exactly where there is least room for it. */ @media (max-width: 991.98px) { .page-header h4, .page-header .page-title h4 { font-size: 20px; } } /* ----------------------------------------------------------------------------- 8. Rhythm `mb-3` accounts for 529 of ~1,030 margin utilities, so there is effectively a single spacing value. This does not rewrite the utilities — it aligns the two card insets that disagree and gives the page a bottom margin. -------------------------------------------------------------------------- */ /* Header padding was 16px top/bottom against the body's 20px, so a card header and its body did not share an inset. */ .card .card-header { padding: 16px 20px; border-bottom-color: var(--au-line); } /* `.page-wrapper .content` sets padding-bottom: 0, so the last card on every page sits flush against the viewport edge. */ .page-wrapper .content { padding-bottom: 24px; } /* ----------------------------------------------------------------------------- 9. Tables Rows were ~39px from `padding: 10px 20px`. Body cells are already 14px (a later rule overrides the 13px on `.table td`), so the cramped feel is row height, not type size. Only 2 of 273 tables opted into .table-hover despite rows being clickable, so hover feedback is made the default rather than opt-in. -------------------------------------------------------------------------- */ .table > tbody > tr > td, .table > thead > tr > th { padding-top: 12px; padding-bottom: 12px; } /* Column headers as labels rather than another row of body text. */ .table thead tr th, .thead-light th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--au-ink); background-color: #F4F6F8; border-bottom: 1px solid var(--au-line); } .table tbody tr { transition: background-color var(--au-speed) ease; } .table tbody tr:hover > td { background-color: #F7F9FB; } /* ----------------------------------------------------------------------------- 10. Numerals This is a finance portal: money is the content. Tabular figures make columns of digits align on the decimal so they can be scanned and compared, which proportional figures actively prevent. Applied to every table cell — harmless for text, and it means the invoice, payroll, expense and report tables all gain it without markup changes. `.money` is for Phase 3's shared partial. -------------------------------------------------------------------------- */ .table td, .table th, .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .money { white-space: nowrap; } /* ui_money() emits a , and `text-align` does nothing on an inline element — it aligns a block's inline content, so the *cell* has to carry it. The rule here used to sit on `.money` itself, which meant the money column never actually right-aligned: the one thing tabular figures exist for. Scoped to cells on purpose. ui_stat_card() also renders ui_money(), inside an

, and a KPI figure belongs at the left edge under its label. */ .table td:has(> .money) { text-align: right; } /* ----------------------------------------------------------------------------- 11. Muted text contrast `.text-muted` is #9595b5, roughly 3.0:1 on white — below the WCAG AA 4.5:1 floor for body text — and it is the most-used text colour in the app at 324 occurrences, 79 of them combined with small/fs-10..12. Every empty-state message and helper caption is affected. !important is needed only to beat the existing !important. -------------------------------------------------------------------------- */ .text-muted { color: #5C6670 !important; } /* ----------------------------------------------------------------------------- 12. Active navigation — deliberately left alone. An accent rail was tried and removed. partials/sidebar.php emits two different shapes for the same state: menuItem() marks the
  • (`
  • `) while menuGroup() marks the (`
  • `). A rail therefore landed on group parents but not on top-level items, which reads as a bug rather than a system. The theme's own active treatment — orange text on a pale orange pill — is already unambiguous. Unifying the two shapes belongs with the shared nav partial in Phase 3. -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 13. Card-header filter controls Every list page sized its filter per row. Without a floor the column collapses to the width of the longest shift name and the control is unusable; it was an inline width on the . -------------------------------------------------------------------------- */ .col-assign { width: 15rem; } /* ----------------------------------------------------------------------------- 17. Clipped free-text cell A free-text column (a leave reason, a note) has to be capped or one long entry sets the width of the whole table. Paired with .text-truncate, which needs a width to truncate against. Previously an inline max-width per page. -------------------------------------------------------------------------- */ .cell-clip { max-width: 12rem; } /* A free-text column that gets more room than a name: the activity log's description, which is a sentence rather than a label. */ .cell-clip-wide { max-width: 20rem; } /* ----------------------------------------------------------------------------- 16. Leave-calendar hover card leave-calendar.php floats a small detail card next to the hovered event. Its position is set from JS, but the layer, width bounds and pointer transparency are fixed — they were an inline style on the element. -------------------------------------------------------------------------- */ .leave-popover { z-index: 9999; min-width: 13.75rem; max-width: 17.5rem; pointer-events: none; } /* ----------------------------------------------------------------------------- 22. Rate-input column and slim progress bar Two more values lifted out of inline styles during the Projects rollout. .col-rate joins .col-label (8.75rem) and .col-assign (15rem) as the third member of the fixed-column family; it holds an input-group with a currency prefix, so it needs more room than a plain label column. .progress-slim replaces `style="height:12px"`. The bar's *width* stays inline on project-pl.php because it is a computed value, not a design decision. -------------------------------------------------------------------------- */ .col-rate { width: 10rem; } /* A row-number gutter (activities.php). */ .col-num { width: 3rem; } .progress-slim { height: 0.75rem; } /* projects.php and project-tasks.php run thinner completion bars inside a card header, where .progress-slim is too heavy. */ .progress-hair { height: 0.375rem; } /* ----------------------------------------------------------------------------- 23. Preserved line breaks, and a fixed-size initials chip .note-text keeps the line breaks a user typed into a note. It is the one place in the portal where whitespace is content rather than layout. .avatar-initials sizes a circle holding one or two letters. The theme's .avatar-xs/.avatar-sm size an *image*; when the content is a text node they collapse to the text's own box, which is why activities.php and project-tasks.php both carried a five-property inline style to force a square. -------------------------------------------------------------------------- */ .note-text { white-space: pre-wrap; } /* ----------------------------------------------------------------------------- 24. Single-purpose screens change-password.php and 2fa-setup.php are gates rather than pages: you are sent there and you finish there. Both centred a narrow column with an inline max-width. Neither gets a page header or a breadcrumb — offering a way out is exactly wrong on a screen the user has to complete. .qr-frame keeps a white quiet zone around the enrolment QR. A QR needs light ground to scan, and the card behind it follows the viewer's theme. -------------------------------------------------------------------------- */ .content-narrow { max-width: 30rem; margin-inline: auto; } .content-narrow-lg { max-width: 35rem; margin-inline: auto; } .qr-frame { display: inline-block; padding: 0.5rem; background: #fff; } /* A bounded, scrollable picker — chat.php's group-member list. */ .scroll-box { max-height: 17.5rem; overflow-y: auto; } .avatar-initials { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; } .avatar-initials-xs { width: 1.375rem; height: 1.375rem; font-size: 0.625rem; } /* ----------------------------------------------------------------------------- 20. Meta chip A chip that labels something which is *not* a status: a record type ("Lead: Acme"), an assignee, a shift name. These were written as `badge-linesuccess` / `badge-linesecondary`, which made them read as statuses the row does not actually have — on followups.php a client follow-up showed a blue chip next to its real status pill, and on shift.php a shift *name* was rendered in success green. Same geometry as a status pill so a table keeps one rhythm, deliberately toneless so colour stays meaningful. -------------------------------------------------------------------------- */ .badge-tag { display: inline-flex; align-items: center; border: 1px solid rgba(9, 44, 76, .14); background-color: var(--au-tint-secondary); color: var(--au-ink-secondary); font-weight: 500; white-space: nowrap; } /* ----------------------------------------------------------------------------- 21. Lead pipeline board leads.php is the portal's only kanban view: five equal columns that scroll sideways rather than wrapping. The three values below were inline styles on the row, the column and the column body. The column ground is a step *down* from the card it sits in, so the cards inside it read as raised — the same figure/ground move as section 3, one level in. -------------------------------------------------------------------------- */ .kanban-row { overflow-x: auto; } .kanban-col { min-width: 16.25rem; } .kanban-body { min-height: 7.5rem; background: var(--au-bg); } /* todo.php and project-tasks.php run taller columns than the lead board, since a task card is bigger than a lead card. Same ground, more floor. */ .kanban-body-lg { min-height: 18.75rem; } /* ============================================================================= HORIZONTAL NAVIGATION — structural layout The theme ships a horizontal *skin* but not a horizontal *layout*. Of the 206 [data-layout=horizontal] rules in style.css, 170 are gated behind a colour attribute (data-topbar / data-topbarcolor / data-theme), and nothing anywhere repositions .sidebar-horizontal out of the fixed left column that .sidebar sets — position:fixed, top:65px, bottom:0, left:0. Rendered as shipped, the bar is laid out as a column behind the page content and is invisible. So the geometry below is ours. The colour and hover treatment still come from the theme's own .nav-menu rules, which are not colour-gated. Markup contract, from partials/ui/nav-horizontal.php: .header > .sidebar.sidebar-horizontal > .sidebar-menu > .main-menu > ul.nav-menu > li.submenu > a + ul > li[.submenu-two] > a + ul > li > a Opening is handled by the existing `.sidebar-menu a` handler in script.js, which slideDown()s $(this).next('ul'); these rules only place the panel. ========================================================================== */ /* The bar itself: a normal block inside the header, not a fixed column. */ [data-layout="horizontal"] .sidebar.sidebar-horizontal { position: static; inset: auto; width: 100%; max-width: none; height: auto; margin: 0; padding: 0 24px !important; border: 0; border-top: 1px solid var(--au-line); background: var(--au-surface); overflow: visible; z-index: auto; } [data-layout="horizontal"] .sidebar.sidebar-horizontal .sidebar-menu, [data-layout="horizontal"] .sidebar.sidebar-horizontal .main-menu { height: auto; padding: 0; overflow: visible; } /* Top level: one row of section dropdowns. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu { position: relative; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu > a { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--au-ink); white-space: nowrap; border-radius: 6px; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu > a:hover, [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu > a.active { background: var(--au-tint-primary); color: var(--au-ink); } /* The caret, which the theme draws with a background image in the sidebar. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu .menu-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .55; transform: none; background: none; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu .menu-arrow.inside-submenu { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; border-right: 0; margin-left: auto; } /* Dropdown panels. display is driven by script.js's slideDown/slideUp. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--au-surface); border: 1px solid var(--au-line); border-radius: 8px; box-shadow: var(--au-shadow-raised); z-index: 1002; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu ul li a { display: flex; align-items: center; padding: 8px 10px; font-size: 13px; border-radius: 5px; color: #4A5560; white-space: nowrap; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu ul li a:hover, [data-layout="horizontal"] .sidebar-horizontal .nav-menu ul li a.active { background: var(--au-tint-primary); color: var(--au-ink); } /* Third level flies out to the side rather than stacking. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu li.submenu-two { position: relative; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu li.submenu-two > ul { display: none; position: absolute; top: -6px; left: 100%; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--au-surface); border: 1px solid var(--au-line); border-radius: 8px; box-shadow: var(--au-shadow-raised); z-index: 1003; } /* Panels that would run off the right edge open leftwards instead. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu:nth-last-child(-n+2) > ul { left: auto; right: 0; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu > li.submenu:nth-last-child(-n+2) li.submenu-two > ul { left: auto; right: 100%; } /* The page no longer sits beside a sidebar, and the header is now two rows tall, so the content needs a deeper top inset instead of a left one. */ [data-layout="horizontal"] .page-wrapper { margin-left: 0; padding-top: 118px; } [data-layout="horizontal"] .header { left: 0; } /* Below the lg breakpoint the bar would wrap into several rows and eat the viewport, so it scrolls sideways instead. */ @media (max-width: 991.98px) { [data-layout="horizontal"] .sidebar.sidebar-horizontal { padding: 0 12px !important; } [data-layout="horizontal"] .sidebar-horizontal .nav-menu { flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; } [data-layout="horizontal"] .page-wrapper { padding-top: 124px; } } /* The theme draws its caret with a bordered ::before chevron sized for the vertical sidebar. Ours is a CSS triangle, so suppress theirs or both show. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu .menu-arrow::before, [data-layout="horizontal"] .sidebar-horizontal .nav-menu .menu-arrow::after { content: none; display: none; } /* .page-wrapper .content keeps its own padding, but the wrapper no longer has a sidebar gutter, so give the page a matching inset on both sides. */ [data-layout="horizontal"] .page-wrapper .content { padding-left: 24px; padding-right: 24px; } /* ----------------------------------------------------------------------------- Sidebar submenu caret The theme positions the caret absolutely at top:10px inside the row, which sits high against the ~40px row height — more so since Phase 2 gave rows more breathing space. 15px centres it. Applies to both the main sidebar and the settings sub-nav, which share the rule in style.css (.sidebar .sidebar-menu .menu-arrow, .settings-sidebar .sidebar-menu .menu-arrow) and are used by 11 settings pages. Kept here rather than edited into style.css so the 1.3 MB vendor sheet and its minified build stay untouched for a one-line change. -------------------------------------------------------------------------- */ .sidebar .sidebar-menu .menu-arrow, .settings-sidebar .sidebar-menu .menu-arrow { top: 15px; } /* The horizontal bar's caret is a CSS triangle sitting inline in a flex row, so it must not inherit the sidebar's absolute positioning — otherwise it anchors to the
  • corner and moves whenever the rule above is retuned. */ [data-layout="horizontal"] .sidebar-horizontal .nav-menu .menu-arrow { position: static; top: auto; right: auto; flex: 0 0 auto; }