/* * Density override — compacts the Vuexy template by role, not uniformly. * Load LAST in , after core.css, theme-default.css, demo.css, and all vendor CSS. * No markup changes, no vendor/core file edits. * * SCOPE NOTE, so nobody is misled by the word "configuration": * only 8 of the 45 rules below are pure CSS-variable overrides. 6 more mix variables with a * font-size. The remaining 31 are DIRECT PROPERTY overrides, because Vuexy/Bootstrap 5.3 does * not expose a variable for what they change: .form-control padding, table cell padding, * .btn-icon's literal width/height square, .menu-link padding, .layout-navbar height, .avatar * sizing, .nav-pills padding, container padding, and the timeline point are all hardcoded * upstream. Roughly half of those 31 are not size changes at all but coupling repairs that the * size changes forced (caret clearances, form-check gutters, avatar-group overlap, the demo.css * navbar offset, RTL mirrors). Each one carries a comment saying what it fixes and what it * measured. It is still configuration in spirit — nothing here is decorative restyling — but it * is not the "short list of non-variable overrides" the brief imagined, and pretending otherwise * would hide real maintenance surface from whoever owns this next. * * Three tiers: * LIGHT — content you read (buttons, form fields, cards, tables, alerts, list content): ~15-25% tighter. * MODERATE — repeated chrome you don't read word-for-word (icon buttons, nav, sidebar, navbar): ~25-55% tighter. * ULTRA — badges/pills/toggles/decorative dots, em-based: pushed hard. */ /* ============================== LIGHT TIER ============================== */ .btn { --bs-btn-padding-y: 0.45rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 0.875rem; } /* The rule above is `.btn` (0,1,0) and loads AFTER core.css — which is exactly the specificity and order of core's own `.btn-lg` / `.btn-sm` / `.btn-xs` / `.btn-xl` variable blocks. A `.btn.btn-lg` therefore takes MY --bs-btn-padding-y instead of its own, and the whole size ladder collapses to one height. Measured before this block: .btn, .btn-xs and .btn-lg all rendered at exactly 32.16px. Each variant is restated below, scaled by the same ~0.75 padding / ~0.93 type factor as the default, so the ladder survives compaction instead of flattening. Ordering matters: these must follow the `.btn` rule above to win. */ .btn-xl, .btn-group-xl > .btn { --bs-btn-padding-y: 0.656rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1.15rem; } .btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: 0.63rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1rem; } .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.31rem; --bs-btn-padding-x: 0.7rem; --bs-btn-font-size: 0.75rem; } .btn-xs, .btn-group-xs > .btn { --bs-btn-padding-y: 0.13rem; --bs-btn-padding-x: 0.6rem; --bs-btn-font-size: 0.65rem; } /* line-height 1.24 is not arbitrary: it lands .form-control at 31.75px against .btn's 31.78px, satisfying the "buttons and inputs must resolve to the same height" constraint. Measured in the browser against a real button, not derived on paper. */ .form-control, .form-select { padding: 0.4rem 0.75rem; font-size: 0.875rem; line-height: 1.24; } /* .form-select paints its dropdown caret as a 22px-wide background image at `right 0.875rem`, and core.css reserves room for it with padding-right: 2.45rem. The `padding` shorthand above would cut that to 0.75rem and let long option labels run underneath the caret. Restore the clearance (verified: text was overlapping the arrow by 24px before this rule). */ .form-select { padding-right: 2.35rem; } [dir=rtl] .form-select { padding-right: 0.75rem; padding-left: 2.35rem; } .input-group-text { padding: 0.4rem 0.75rem; font-size: 0.875rem; line-height: 1.24; } /* .form-control-sm/-lg and .form-select-sm/-lg are plain single-class selectors, same specificity as the base rule above, so — same ladder bug as .btn/.btn-icon/.avatar — they'd silently collapse toward the base size. form-control-sm looked fine only by coincidence: its own untouched `min-height` formula happens to floor below our compacted base height. form- control-lg is NOT so lucky — its min-height floor (which recalculates off the CURRENT, compacted font-size, not stock) measured 42px live, higher than intended and not a value anyone deliberately chose. Both min-heights now set explicitly so neither is accidental. */ .form-control-sm { padding: 0.3rem 0.6rem; font-size: 0.8125rem; min-height: calc(1.5em + 0.4rem + calc(var(--bs-border-width) * 2)); } .form-control-lg { padding: 0.5rem 0.9rem; font-size: 1rem; min-height: calc(1.5em + 0.9rem + calc(var(--bs-border-width) * 2)); } .form-select-sm { padding-top: 0.3rem; padding-bottom: 0.3rem; padding-left: 0.6rem; font-size: 0.8125rem; } .form-select-lg { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.9rem; font-size: 1rem; } .card { --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-title-spacer-y: 0.75rem; --bs-card-cap-padding-y: 0.75rem; --bs-card-cap-padding-x: 1.25rem; } .card p, .card .card-text { font-size: 0.875rem; line-height: 1.4; } .table > :not(caption) > * > * { padding: 0.45rem 1rem; font-size: 0.875rem; } /* .table-sm> :not(caption)>*>* is equal specificity (0,2,0) to the rule above, and a `` matches BOTH — so table-sm silently collapsed to the exact same padding as a regular table (confirmed live: both measured 47.2px). Re-declared after the base rule so source order breaks the tie in table-sm's favor, scaled down proportionally to how stock Bootstrap treats it (roughly half the padding-y of the base table). */ .table-sm > :not(caption) > * > * { padding: 0.2rem 0.75rem; font-size: 0.8125rem; } .alert { --bs-alert-padding-y: 0.45rem; --bs-alert-padding-x: 0.7rem; font-size: 0.8125rem; } .accordion-body { --bs-accordion-body-padding-y: 0.55rem; --bs-accordion-body-padding-x: 0.8rem; font-size: 0.8125rem; } .list-group-item { --bs-list-group-item-padding-y: 0.4rem; --bs-list-group-item-padding-x: 0.9rem; font-size: 0.8125rem; } body { --bs-body-font-size: 0.875rem; } /* ============================== MODERATE TIER ============================== */ /* .btn-icon is a literal fixed width/height square in core.css, not padding-driven — direct override required. Core pairs every size tier with a matching font-size (see .btn-icon.btn-sm / .btn-icon.btn-lg upstream) because the icon glyph doesn't scale with the box on its own — `.ti` in tabler-icons.css sets `font-size: 1.25rem` DIRECTLY on the `` element. That means a font-size set on the BUTTON never reaches the icon at all: an explicit rule on an element always wins over an inherited value, regardless of which has higher specificity or loads later. (First attempt at this fix set font-size on `.btn-icon.btn-xs` itself — verified in the browser that the icon glyph size didn't move a single pixel, which is what exposed this.) Every rule below therefore targets the icon element directly via a descendant combinator, matching `.ti`'s specificity class-for-class but winning on the extra descendant. */ .btn-icon { width: calc(1.5rem + calc(var(--bs-border-width) * 2)); height: calc(1.5rem + calc(var(--bs-border-width) * 2)); } .btn-icon > i, .btn-icon > span { font-size: 0.9rem; } .btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn { width: calc(1.0625rem + calc(var(--bs-border-width) * 2)); height: calc(1.0625rem + calc(var(--bs-border-width) * 2)); } .btn-icon.btn-sm > i, .btn-icon.btn-sm > span, .btn-group-sm > .btn-icon.btn > i, .btn-group-sm > .btn-icon.btn > span { font-size: 0.8125rem; } .btn-icon.btn-xl, .btn-group-xl > .btn-icon.btn { width: calc(2.3rem + calc(var(--bs-border-width) * 2)); height: calc(2.3rem + calc(var(--bs-border-width) * 2)); } .btn-icon.btn-xl > i, .btn-icon.btn-xl > span, .btn-group-xl > .btn-icon.btn > i, .btn-group-xl > .btn-icon.btn > span { font-size: 1.1rem; } .btn-icon.btn-lg, .btn-group-lg > .btn-icon.btn { width: calc(2.09rem + calc(var(--bs-border-width) * 2)); height: calc(2.09rem + calc(var(--bs-border-width) * 2)); } .btn-icon.btn-lg > i, .btn-icon.btn-lg > span, .btn-group-lg > .btn-icon.btn > i, .btn-group-lg > .btn-icon.btn > span { font-size: 1rem; } /* .btn-icon.btn-xs is NOT scaled by the same ~0.665 ratio as the other tiers. At that ratio the box lands at ~11px, which cannot hold a legible icon glyph at any font-size — the same floor this session already hit once with the toggle switch. Held near its STOCK size instead (15.89px box / 11.04px icon) since xs was already close to the practical minimum for a recognizable icon before any of this compaction started. */ .btn-icon.btn-xs, .btn-group-xs > .btn-icon.btn { width: calc(0.85rem + calc(var(--bs-border-width) * 2)); height: calc(0.85rem + calc(var(--bs-border-width) * 2)); } .btn-icon.btn-xs > i, .btn-icon.btn-xs > span, .btn-group-xs > .btn-icon.btn > i, .btn-group-xs > .btn-icon.btn > span { font-size: 0.69rem; } .pagination .page-link { --bs-pagination-padding-y: 0.2rem; --bs-pagination-padding-x: 0.5rem; --bs-pagination-font-size: 0.8125rem; line-height: 1.2; } /* Two real bugs found auditing this, not one: 1) .pagination-sm/.pagination-lg set --bs-pagination-* on the ANCESTOR