/* ========================================================================== Techmin tabs light: Figma node 9:5383 · dark: Figma node 9:23096 Variant implemented: "Tabs Bordered" (light 9:6046 / dark 9:25058). The mockup draws a 2px rule under the whole tablist; the current tab hangs its own 2px rule, in the accent colour, over that line. No boxes, no pills, no rounded corners — the only thing that moves between states is the label colour and that underline. The markup needs no change: the same rules cover `.nav-tabs` (Bootstrap's own tab look) and `.nav-pills`, which is what most of the CRM's switchers already use. Column layouts (`.nav.flex-column`) are excluded from the bordered block and follow the mockup's "Tabs Vertical Left" card instead. Load this file LAST in . `dark-theme.css` has no `.nav-tabs` or `.nav-pills` rules at all, so no `[data-bs-theme] body` prefix is needed here — unlike the sidebar and the header. What has to be beaten is `bootstrap.min.css` (`.nav-pills .nav-link.active`, 0,3,0) and `bootstrap-extended.css` (`.nav-tabs .nav-link`, 0,2,0); the selectors below are at least as specific and come later in the cascade. ========================================================================== */ /* --- Light theme --- */ .nav-tabs, .nav-pills { --tb-border: rgba(0, 0, 0, .2); --tb-color: rgba(0, 0, 0, .75); --tb-color-active: #000; --tb-accent: #007aff; --tb-vert-color: #000; --tb-vert-hover-bg: #f2f2f2; } /* --- Dark theme --- */ [data-bs-theme="dark"] .nav-tabs, [data-bs-theme="dark"] .nav-pills { --tb-border: #262626; --tb-color: #d4d4d4; --tb-color-active: #fafaf9; --tb-vert-color: #e5e5e5; --tb-vert-hover-bg: #171717; } /* -------------------------------------------------------------------------- Bordered tabs — the horizontal switcher -------------------------------------------------------------------------- */ /* The rule under the list. The tabs pull themselves down onto it by 2px, so the active one replaces that segment of the line instead of sitting below it — that is how the mockup stacks them (the active Tab frame is offset `bottom: -2px` against the tablist). */ .nav-tabs:not(.flex-column), .nav-pills:not(.flex-column) { gap: 0; border-bottom: 2px solid var(--tb-border); } /* Row of 43px = 21px label + 2×10px padding + the 2px underline. Poppins 600 14px/21px, square corners, no fill in any state. */ .nav-tabs:not(.flex-column) .nav-link, .nav-pills:not(.flex-column) .nav-link { margin-bottom: -2px; padding: 10px 20px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--tb-color); background-color: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; } /* Hover is the one state the mockup does not draw. Inventing a surface would contradict a design that has none, so hover only brings the label up to the active colour and leaves the underline alone. Keep this block ABOVE the `.active` block: the two are the same specificity, so the later one wins, and hovering the current tab must not erase its accent underline. */ .nav-tabs:not(.flex-column) .nav-link:hover, .nav-tabs:not(.flex-column) .nav-link:focus, .nav-pills:not(.flex-column) .nav-link:hover, .nav-pills:not(.flex-column) .nav-link:focus { color: var(--tb-color-active); background-color: transparent; border-bottom-color: transparent; } .nav-tabs:not(.flex-column) .nav-link.active, .nav-tabs:not(.flex-column) .nav-item.show .nav-link, .nav-pills:not(.flex-column) .nav-link.active, .nav-pills:not(.flex-column) .show > .nav-link { color: var(--tb-color-active); background-color: transparent; border-bottom-color: var(--tb-accent); } .nav-tabs:not(.flex-column) .nav-link.disabled, .nav-tabs:not(.flex-column) .nav-link:disabled, .nav-pills:not(.flex-column) .nav-link.disabled, .nav-pills:not(.flex-column) .nav-link:disabled { color: var(--bs-nav-link-disabled-color); background-color: transparent; border-bottom-color: transparent; } /* An icon inside a tab is drawn at the label's own size — same rule the button template uses, so a tab with an icon keeps the 43px row. */ .nav-tabs:not(.flex-column) .nav-link > i, .nav-pills:not(.flex-column) .nav-link > i { font-size: inherit; vertical-align: middle; } /* -------------------------------------------------------------------------- Column layouts — the mockup's "Tabs Vertical Left" (light 9:6012) The bordered variant is horizontal by construction: an underline shared by the whole list means nothing in a column. The Techmin page draws the vertical case separately, and that is what the CRM's two left-hand nav columns (themes.html, site-template.html) follow. -------------------------------------------------------------------------- */ .nav-tabs.flex-column .nav-link, .nav-pills.flex-column .nav-link { padding: 8px 16px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--tb-vert-color); background-color: transparent; border: 0; border-radius: 0; } /* Again no hover in the mockup — reuse the neutral row-hover fill the table template already defines for both themes, as the pagination does. */ .nav-tabs.flex-column .nav-link:hover, .nav-tabs.flex-column .nav-link:focus, .nav-pills.flex-column .nav-link:hover, .nav-pills.flex-column .nav-link:focus { color: var(--tb-vert-color); background-color: var(--tb-vert-hover-bg); } /* Solid accent block, white label, square corners — identical in both themes. */ .nav-tabs.flex-column .nav-link.active, .nav-tabs.flex-column .show > .nav-link, .nav-pills.flex-column .nav-link.active, .nav-pills.flex-column .show > .nav-link { color: #fff; background-color: var(--tb-accent); }