/* ============================================================================ VRYNO LIST TOOLBAR (and the controls in a card header) ============================================================================ One height and one icon size for the controls in the toolbar above a list, and the same restraint applied to the controls in a card header. Measured across the product before writing this, a single toolbar row -- the same row on every module -- held controls at five different heights: All dropdown 37px filter button 33px pinned filter chip 34px view switcher 40px (.vrd-iconbar) View Settings 35px (.btn-icon) primary action 36px overflow (kebab) 33px and every icon in it rendered at 17px regardless of the font-size its button declared, because the .ti webfont class sets its own size. Nothing here changes what a control does or how it looks otherwise -- only the box it occupies and the size of the glyph inside it. The height and the glyph are deliberately below what the theme shipped: a toolbar is chrome, not content, and at 30/14 it reads as a quiet strip above the list rather than a row competing with it. Text size is left alone -- the labels still have to be read. ---- how the row is found ------------------------------------------------- The row has no class of its own and is named differently per module (.navbar-header.nav-bottom in most, .hero-actions in Sign Forms, a bare .d-flex in Bookings), so it is matched by what it CONTAINS: the view switcher. :has() gives the row without asking every page to opt in, which is what keeps this working on pages nobody has touched yet. ---- why !important ------------------------------------------------------- theme-script.js is parser-blocking and injects this file at the top of , so it lands ahead of style.css -- where .vrd-iconbar's own sizes live. At equal specificity the later sheet wins, so the declarations that have to beat style.css say so. The ones that only beat a utility class do not need it and do not use it. ============================================================================ */ :root { /* The one height every toolbar control shares, and the one glyph size. */ --vr-tb-h: 30px; --vr-tb-icon: 14px; /* Side padding for a control with a label. The theme shipped 12px and 16px in the same row; one value, tighter, is what makes the strip read as a set rather than a pile. */ --vr-tb-pad: 10px; /* A pinned filter chip is current state, not an action, so it sits one step below the controls around it. That difference is what lets the eye separate "what I can do" from "what is filtering the list". */ --vr-tb-chip-h: 24px; --vr-tb-chip-icon: 12px; } /* --------------------------------------------------------- the strip itself */ /* The row inherits the TOP navbar's min-height (--topbar-height, 56px), which it no longer needs: 30px of control plus 6px above and below is 42. The inner row's own padding comes from a .py-2 utility, which carries !important, so the override does too. */ .navbar-header:has(.vrd-iconbar) { min-height: 44px; } .navbar-header:has(.vrd-iconbar) > * { padding-top: 6px !important; padding-bottom: 6px !important; } /* ---------------------------------------------------------- view switcher */ /* 24 + 2px padding + 1px border on each side = 30, the shared height. */ .vrd-iconbar { padding: 2px !important; gap: 2px !important; height: var(--vr-tb-h) !important; } .vrd-iconbar a { width: 24px !important; height: 24px !important; font-size: var(--vr-tb-icon) !important; } .vrd-iconbar a i { font-size: var(--vr-tb-icon) !important; line-height: 1; } /* ------------------------------------------------- everything beside it */ /* Two scopes, because the switcher sits in two shapes of toolbar. In most modules the row is a .navbar-header holding a left group (the saved-view dropdown, the filter button, the pinned chips) and a right group (the switcher and the actions) -- both halves are the same toolbar and get the same height. Sign Forms and Bookings have no .navbar-header and put everything in one group beside the switcher, which the second selector catches. The top navbar is never matched: it holds no switcher. */ .navbar-header:has(.vrd-iconbar) .btn, div:has(> .vrd-iconbar) .btn { height: var(--vr-tb-h); min-height: var(--vr-tb-h); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* One side padding for every labelled control. !important because the row sets its own with utility classes (.px-3, .px-2, .px-[8px]), and those carry !important themselves. Vertical padding is redundant once the height is fixed, and zeroing it keeps a tall glyph from pushing the label. */ .navbar-header:has(.vrd-iconbar) .btn, div:has(> .vrd-iconbar) .btn { padding-left: var(--vr-tb-pad) !important; padding-right: var(--vr-tb-pad) !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Icon-only controls are square at that height. The padding stays as the theme set it -- border-box means it is absorbed, and the flex centring above keeps the glyph in the middle either way. */ .navbar-header:has(.vrd-iconbar) .btn-icon, .navbar-header:has(.vrd-iconbar) .btn.px-2, div:has(> .vrd-iconbar) .btn-icon, div:has(> .vrd-iconbar) .btn.px-2 { width: var(--vr-tb-h); padding-left: 0 !important; padding-right: 0 !important; } .navbar-header:has(.vrd-iconbar) .btn > i, div:has(> .vrd-iconbar) .btn > i { font-size: var(--vr-tb-icon); line-height: 1; } /* ------------------------------------------------------------ filter chips */ /* Three spellings exist for the same thing: most modules render the chip as a .btn inside a [data-pin-key] wrapper, Leads as a .pinned-filter-btn, and a few (Sign Documents among them) use the bare recipe with no wrapper at all -- which is why .py-[3px], the utility every chip in the product carries, is matched too. All three, so a row never shows one of each at different sizes. */ .navbar-header:has(.vrd-iconbar) [data-pin-key] > .btn, .navbar-header:has(.vrd-iconbar) .pinned-filter-btn, .navbar-header:has(.vrd-iconbar) .btn.py-\[3px\], div:has(> .vrd-iconbar) [data-pin-key] > .btn, div:has(> .vrd-iconbar) .pinned-filter-btn, div:has(> .vrd-iconbar) .btn.py-\[3px\] { height: var(--vr-tb-chip-h) !important; min-height: var(--vr-tb-chip-h) !important; padding-left: 8px !important; padding-right: 8px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; gap: 5px !important; } .navbar-header:has(.vrd-iconbar) [data-pin-key] > .btn > i, .navbar-header:has(.vrd-iconbar) .pinned-filter-btn > i, .navbar-header:has(.vrd-iconbar) .btn.py-\[3px\] > i, div:has(> .vrd-iconbar) [data-pin-key] > .btn > i, div:has(> .vrd-iconbar) .pinned-filter-btn > i, div:has(> .vrd-iconbar) .btn.py-\[3px\] > i { font-size: var(--vr-tb-chip-icon) !important; line-height: 1; } /* The chip's dismiss control. Its glyph is set inline on the element (text-[15px]), which is why this has to say !important to reach it. */ .navbar-header:has(.vrd-iconbar) .pinned-filter-remove, div:has(> .vrd-iconbar) .pinned-filter-remove { width: 16px; height: 16px; } .navbar-header:has(.vrd-iconbar) .pinned-filter-remove i, div:has(> .vrd-iconbar) .pinned-filter-remove i { font-size: 11px !important; line-height: 1; } /* A dropdown or drawer opened FROM the toolbar is not part of the toolbar; its buttons keep their own sizing. */ .navbar-header:has(.vrd-iconbar) .dropdown-menu .btn, .navbar-header:has(.vrd-iconbar) .offcanvas .btn, .navbar-header:has(.vrd-iconbar) .modal .btn, div:has(> .vrd-iconbar) .dropdown-menu .btn, div:has(> .vrd-iconbar) .offcanvas .btn, div:has(> .vrd-iconbar) .modal .btn { height: auto !important; min-height: 0 !important; /* No !important on width. A menu's own buttons are often w-100 -- "share this row between us" -- and Bootstrap writes that as width: 100% !important. Forcing width here beat it, and the Reset and Apply pair at the foot of a filter chip collapsed to the width of their own text, sitting side by side in the corner of a 212px row. Without !important this still overrides the icon-button width above, which is not important, and loses to w-100, which is. */ width: auto; /* Bootstrap's own button metrics, read from the variables .btn sets, so a .btn-sm in a menu gets the -sm values and nothing is transcribed here. `revert` was wrong: it rolls a property back to the BROWSER default, not to the framework's, so it threw away Bootstrap's padding and font size altogether -- measured at 0 padding and a 16px-tall button where the theme draws 34. */ padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem) !important; font-size: var(--bs-btn-font-size, 1rem); line-height: var(--bs-btn-line-height, 1.5); } .navbar-header:has(.vrd-iconbar) .dropdown-menu .btn > i, .navbar-header:has(.vrd-iconbar) .offcanvas .btn > i, .navbar-header:has(.vrd-iconbar) .modal .btn > i, div:has(> .vrd-iconbar) .dropdown-menu .btn > i, div:has(> .vrd-iconbar) .offcanvas .btn > i, div:has(> .vrd-iconbar) .modal .btn > i { font-size: inherit; } /* ========================================================================== CONTROLS IN A CARD HEADER ========================================================================== A card's header carries the same kind of controls as the page toolbar -- a scope picker, a period switcher, the chart-type menu, an expand button, a "View all" link -- at full button size. On a half-width card that alone is enough to press them against the heading and wrap the row onto a second line. They get the same quiet treatment, one step smaller again, because a card header is a smaller surface than the page toolbar. Two shapes are matched. Most cards have a real .card-header (or the dashboards' .vrd-card-head); the rest have no header element at all and put the title row inside .card-body, which is why the third selector exists -- narrowed by :has() to a row that actually contains a heading, so an ordinary flex row in a card body is left alone. Scoped by the header rather than by what the card contains, so it reaches every card in the product, not only the ones holding a chart. ========================================================================== */ :root { --vr-ch-h: 28px; --vr-ch-icon: 14px; } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .btn { height: var(--vr-ch-h); min-height: var(--vr-ch-h); padding-left: 7px !important; padding-right: 7px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .btn > i { font-size: var(--vr-ch-icon); line-height: 1; } /* Square controls: the theme's .btn-icon, and the expand button, which is its own class and was landing 2px short of everything beside it. */ :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) :is(.btn-icon, .vrd-expand-btn) { width: var(--vr-ch-h); height: var(--vr-ch-h); min-height: var(--vr-ch-h); padding-left: 0 !important; padding-right: 0 !important; } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .vrd-expand-btn > i { font-size: var(--vr-ch-icon); } /* The period switcher (Weekly / Monthly / Quarterly / Yearly) is a segmented control, not four buttons, so it is sized as one pill the same height as the controls beside it: 22px of tab inside 2px of padding and the pill's own 1px border is 28. */ :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .nav-tabs { height: var(--vr-ch-h); padding: 2px !important; gap: 2px !important; flex-wrap: nowrap; } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .nav-tabs .nav-link { height: 22px; padding: 0 10px !important; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; } /* The heading and the controls are two things, not one run of text: 10px between them -- enough that the first control never reads as part of the title, or of the info marker that sits after it -- and 6px between the controls, which belong together. */ :is(.card-header, [class*="card-head"]).justify-content-between, :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .d-flex.justify-content-between, .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title)) { column-gap: 10px; } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .d-flex:not(.justify-content-between) { column-gap: 6px; } /* Members of a control row carry their own spacing utilities (.me-2 and friends) from before the row had a gap. Two spacings in one row is what pushed it past the card's width; the gap is the one that stays. */ :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between:has(:is(h4, h5, h6, .card-title))) .d-flex:not(.justify-content-between) > * { margin-left: 0 !important; margin-right: 0 !important; } /* Keep the controls to the right even in a header that is not space-between. */ .card-header > .d-flex:last-child:not(:first-child), .card-header > .d-flex > .d-flex:last-child:not(:first-child), [class*="card-head"] > .d-flex:last-child:not(:first-child) { margin-inline-start: auto; } /* Menus and drawers opened from a card header keep their own sizing. */ :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between) :is(.dropdown-menu, .offcanvas, .modal) .btn { height: auto !important; min-height: 0 !important; /* No !important on width. A menu's own buttons are often w-100 -- "share this row between us" -- and Bootstrap writes that as width: 100% !important. Forcing width here beat it, and the Reset and Apply pair at the foot of a filter chip collapsed to the width of their own text, sitting side by side in the corner of a 212px row. Without !important this still overrides the icon-button width above, which is not important, and loses to w-100, which is. */ width: auto; /* Bootstrap's own button metrics, read from the variables .btn sets, so a .btn-sm in a menu gets the -sm values and nothing is transcribed here. `revert` was wrong: it rolls a property back to the BROWSER default, not to the framework's, so it threw away Bootstrap's padding and font size altogether -- measured at 0 padding and a 16px-tall button where the theme draws 34. */ padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem) !important; font-size: var(--bs-btn-font-size, 1rem); line-height: var(--bs-btn-line-height, 1.5); } :is(.card-header, [class*="card-head"], .card-body > .d-flex.justify-content-between) :is(.dropdown-menu, .offcanvas, .modal) .btn > i { font-size: inherit; }