jekyll-theme-centos 2.52.0.beta.85 → 2.52.0.beta.86

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b26c32164c0114ea621d445ceb40c7a569158712db0206f96f07c4aefc038d3
-  data.tar.gz: ab2ee634b6635b3f9c0e0ff52087b9256ec4727526b602c75781d213814b0e6e
+  metadata.gz: 3943a6b85706eb275f04a4388be077c827e49d040c9ec4ffa249549997ac1323
+  data.tar.gz: a8e33703d73166f851e02353b57d8509b3bd02cdd0671164d9c447943c8d6541
 SHA512:
-  metadata.gz: d36db093009d770ce36ab9490e8901f36e079d60294b60f922cd8d6ebdbebe49143f72706268b0ba948ad282ebc192be7b7c356a4b14a5ca63a5238a964cca20
-  data.tar.gz: 5d29d270aed80d3f1da128db0e1db86b23798f7b70b0a5495133bf16fd103d72b558cc4533f51675752d6a9e2e8cef3e284bb3c61adf635676d5a23e01d9be76
+  metadata.gz: 485202a17eaeb368b58e834f3412b85d45322aeb6220b1e0f0e230002c9db2befa9f9640bf200ae5de9c86c067d5158214559400437fad2bed5e1d57ef27a64c
+  data.tar.gz: 02e87bb36e5e23d99993d6294cdfe3981fd7e50c24b9da876b9b11390bfc86d7f01908999aa2c1837c94e624f04bbba9dd05fe452c69c00d2402365070350c3a

data/_includes/base/color-table.html.liquid

@@ -1,5 +1,5 @@
 <table class="table dataTable">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th>{{ include.name_label | default: "Color" }}</th>
       <th class="text-nowrap">Hex</th>

data/_includes/base/configuration_variables-nested.html.liquid

@@ -28,7 +28,7 @@ others. Requires two distinct loops for valid HTML structure.
   <p class="my-3">The <code>{{ parent_name }}</code> variable is a {{ type_desc }} with the following properties:</p>
 
   <table id="{{ table_id }}" class="{{ table_classes }}">
-    <thead class="table-light">
+    <thead>
       <tr>
         <th scope="col">{{ col_name }}</th>
         {% if columns %}

data/_includes/base/configuration_variables.html.liquid

@@ -27,7 +27,7 @@ of separate, nested DataTables for complex properties.
 
   {% comment %} 3. Render the top-level table completely {% endcomment %}
   <table class="{{ table_classes }}">
-    <thead class="table-light">
+    <thead>
       <tr>
         <th scope="col">{{ col_name }}</th>
         {% if columns %}

data/_includes/base/navindex.html.liquid

@@ -129,7 +129,7 @@ Data Object Properties:
 {% capture table %}
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <table class="table dataTable">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th>Name</th>
       <th>Description</th>
@@ -155,7 +155,7 @@ Data Object Properties:
 
 {% capture component_table %}
 <table class="table dataTable">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th>Name</th>
       <th>Status</th>

data/_sass/base/_calendar.scss

@@ -1,49 +1,31 @@
 // ================================================================================
 // Event Calendar (@event-calendar/build) theming
 // ================================================================================
-// Purpose: Map the CentOS color palette onto the Event Calendar library's own
-// CSS custom properties (--ec-*), instead of hand-rolling calendar styles.
+// Purpose: map the CentOS color palette onto the library's own CSS custom
+// properties (--ec-*) instead of hand-rolling calendar styles.
 //
-// Selector specificity note: the library ships its own `.ec { --ec-*: ...; }`
-// block (see https://github.com/vkurko/calendar/blob/master/packages/core/src/styles/theme.css)
-// inside event-calendar.min.css, which this theme loads via the "CSS
-// dependencies" block in head.html.liquid — AFTER this theme's own
-// stylesheet.min.css. A same-specificity `.ec { ... }` override placed here
-// would therefore lose the cascade to the library's own later-loaded rule.
-// Prefixing with `body` bumps our selector's specificity above the
-// library's plain `.ec` rule so our values win regardless of load order
-// (the same technique this file's DataTables corrections use in
-// _customization.scss, e.g. `.content .dt-container`).
+// `body` prefix: event-calendar.min.css loads after this theme's own
+// stylesheet (see head.html.liquid) and ships its own same-specificity
+// `.ec { --ec-*: ...; }` block, so a plain `.ec { }` here would lose the
+// cascade. `body .ec` bumps specificity above it.
 //
-// The dark-mode toggle classes (`.ec-dark`/`.ec-auto-dark`) are applied by
-// the page to whichever element wraps the calendar — commonly `<body>`
-// itself, per this library's own docs. A `body .ec-dark .ec` selector would
-// require `.ec-dark` on a *descendant* of body and never match when body
-// carries the class directly, so the dark blocks anchor to `html` instead
-// (always an ancestor of body, regardless of which element the toggle class
-// lands on) to stay correct in both cases.
+// Dark mode keys off Bootstrap's `[data-bs-theme="dark"]`, not the
+// library's own `.ec-dark`/`.ec-auto-dark` classes, to match every other
+// Bootstrap component. Two selector branches below because the attribute
+// can sit on `<html>` itself or on some other ancestor (e.g. `<nav>`), and
+// one selector can't match both.
 // ================================================================================
 
 body .ec {
-  // The library defines --ec-bg-color but never applies it to .ec itself
-  // (only to specific inner elements like popups), so the calendar's outer
-  // container has no background of its own and shows whatever it's placed
-  // on through — inconsistent depending on the page's own layout. Declared
-  // once here (not repeated in the dark-mode blocks below): --ec-surface-bg-color
-  // cascades normally, so this always reads whichever value currently wins
-  // for this element, light or dark.
+  // --ec-bg-color is never applied to .ec itself, leaving the outer
+  // container transparent. --ec-surface-bg-color fills that gap (declared
+  // once here, cascades to the dark block below).
   //
-  // Deliberately a separate variable from --ec-bg-color, not the same one:
-  // the library also derives --ec-day-bg-color (grid cells), .ec-sidebar,
-  // and .ec-col-head (weekday row) from --ec-bg-color. Every component's
-  // "Live example" across this theme's docs sits inside a `.text-bg-light`
-  // preview box (see e.g. components/calendar.md), painted with $light —
-  // so the outer container/toolbar use $light too, to sit flush with that
-  // surface. But feeding $light into --ec-bg-color directly also recolors
-  // the day cells and weekday header to $light, flattening the grid against
-  // its own container and losing the contrast that gives the calendar its
-  // shape. --ec-bg-color stays $white so those inner surfaces keep
-  // contrasting against the (now $light) outer one.
+  // Kept separate from --ec-bg-color: the library also derives
+  // --ec-day-bg-color, .ec-sidebar, and .ec-col-head from --ec-bg-color, so
+  // feeding it $light (to match the doc preview boxes) would flatten the
+  // day grid to the same color and lose contrast. --ec-bg-color stays
+  // $white.
   background-color: var(--ec-surface-bg-color);
   --ec-surface-bg-color: #{$light};
 
@@ -53,10 +35,16 @@ body .ec {
 
   --ec-button-bg-color: #{$white};
   --ec-button-border-color: #{$border-color};
-  --ec-button-text-color: #{$body-color};
-  --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-100')};
+  --ec-button-text-color: var(--bs-link-color);
+  --ec-button-active-bg-color: #{$primary};
   --ec-button-active-border-color: #{$primary};
-  --ec-button-active-text-color: #{$primary};
+  --ec-button-active-text-color: #{$white};
+
+  // --bs-pagination-hover-* only exists inside `.pagination`, so use the
+  // root-scoped tokens instead — also keeps this in sync with
+  // [data-bs-theme] without a separate dark-mode copy.
+  --ec-button-hover-bg-color: var(--bs-tertiary-bg);
+  --ec-button-hover-text-color: var(--bs-link-hover-color);
 
   --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-50')};
   --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-50')};
@@ -68,82 +56,55 @@ body .ec {
   --ec-now-indicator-color: #{$danger};
   --ec-popup-bg-color: #{$white};
 
-  // The library renders event titles as <h4 class="ec-event-title"> but only
-  // resets its font-size in list view (`.ec-list .ec-event-title`) — in every
-  // other view it falls through to this theme's Bootstrap h4 size. Match it
-  // to the calendar's own body text size (the same size the day-of-week
-  // header row uses) instead of an oversized heading.
+  // The library only resets .ec-event-title's font-size in list view;
+  // elsewhere it falls through to this theme's Bootstrap h4 size. Matched
+  // to the calendar's own body text size instead.
   //
-  // In month/all-day grid views the library also sets a `min-block-size:
-  // 1.5em` on this same element for tap-target sizing. Since it's
-  // `display: block`, that extra height just extends downward past the
-  // (now correctly-sized, single-line) text instead of centering it,
-  // leaving the name visibly top-biased in its pill. Making the title a
-  // flex container of its own single line of text centers it within
-  // whatever height the library gives it — a no-op in list/time-grid views,
-  // which don't set that min-height in the first place.
+  // Grid/all-day views also set `min-block-size: 1.5em` here for tap
+  // targets; since the element is `display: block`, the shrunk text stays
+  // top-biased inside that height. Flex + centered alignment fixes that (a
+  // no-op where the min-height isn't set).
   .ec-event-title {
     font-size: #{$font-size-base};
     display: flex;
     align-items: center;
   }
 
-  // List view's day-group heading (day name + date) is also an <h4>, hitting
-  // the same Bootstrap h4 collision as .ec-event-title above. Match it to the
-  // same body text size as the event name, kept bold (the library's own
-  // default weight for this heading) so the two rows stay visually distinct.
-  // (.ec-day-head doubles as the day-number cell in month view, so this
-  // covers both.)
+  // Same h4 collision as .ec-event-title above; matched to body text size,
+  // kept bold so the two rows stay visually distinct. (.ec-day-head also
+  // doubles as the day-number cell in month view.)
   .ec-day-head {
     font-size: #{$font-size-base};
     font-weight: 700;
   }
 
-  // Headings inside the calendar (.ec-title — the "August 2026" navigation
-  // title; .ec-col-head, the Sun/Mon/… weekday row; .ec-day-head, the
-  // day-number/day-group heading above) all rely on inherited `color`, since
-  // the library never sets one itself: its own h1-h6 rule is `color:
-  // var(--bs-heading-color)`, and this theme leaves that Bootstrap variable
-  // empty (`$headings-color: null`), so the value is invalid and falls back
-  // to whatever color is inherited from the calendar's ancestors. That's
-  // normally this theme's own body color, but it silently breaks wherever
-  // the calendar is embedded inside anything that sets its own text color —
-  // e.g. this component's own doc example, wrapped in Bootstrap's
-  // `.text-bg-light` for a bordered preview box, which forces black. Set it
-  // explicitly instead of depending on inheritance, so the calendar's
-  // headings always match the page's own heading color regardless of what
-  // wraps it.
+  // These are real headings, so they inherit this theme's
+  // `color: var(--bs-heading-color)` → `inherit` ($headings-color is
+  // unset). Normally that's the body color, but breaks wherever the
+  // calendar sits inside something that forces its own text color (e.g.
+  // the doc example's `.text-bg-light` preview, which forces black). Set
+  // explicitly instead of relying on inheritance.
   .ec-title,
   .ec-col-head,
   .ec-day-head {
     color: var(--ec-text-color);
   }
 
-  // List view's per-event color tag (a thin bar next to the event name) only
-  // gets an inline background color when the event data itself sets one; our
-  // example events don't, so give it the same event color used everywhere
-  // else instead of leaving it transparent/invisible.
+  // Only gets a background when event data sets one inline; our example
+  // events don't, so default it to the event color instead of leaving it
+  // invisible.
   .ec-event-tag {
     background-color: var(--ec-event-bg-color);
   }
 
-  // The toolbar (view title + nav/view-switcher buttons) sits inside
-  // .ec-header, which the library makes `position: sticky` so it stays
-  // pinned while the grid/list body scrolls underneath — but the library
-  // never gives the toolbar its own background. Left unset it stays
-  // transparent, so scrolled-under event content shows through it instead
-  // of the toolbar blending into the calendar around it. Match it to the
-  // same --ec-surface-bg-color used for .ec itself so it reads as one
-  // surface (see the --ec-surface-bg-color vs. --ec-bg-color note above).
+  // .ec-header is `position: sticky`, but the library only backgrounds its
+  // own .ec-sidebar cell inside it — the toolbar cell stays transparent, so
+  // scrolled-under content shows through. .ec-toolbar gets the same
+  // --ec-surface-bg-color as .ec to close that gap.
   //
-  // The library also spaces the toolbar from the grid/list body below with
-  // `margin-block-end: 1em`, not padding. A margin sits outside the
-  // toolbar's own border box, so that gap isn't painted by the
-  // background-color above — it shows whatever is behind the (transparent)
-  // .ec-header instead, leaving a visible seam of mismatched color between
-  // the toolbar and the calendar body. Zero out the margin and swap in the
-  // same amount of padding so the toolbar's own background extends through
-  // that space instead of leaving a gap for it to show through.
+  // The library also spaces the toolbar from the body with
+  // `margin-block-end: 1em` (not padding), so that gap isn't painted by the
+  // background above. Zeroed out and replaced with equal padding instead.
   .ec-toolbar {
     background-color: var(--ec-surface-bg-color);
     margin-block-end: 0;
@@ -151,9 +112,57 @@ body .ec {
   }
 }
 
-// Manual dark toggle (an ancestor — typically <body> itself — carries the
-// .ec-dark class).
-html .ec-dark .ec {
+// The library's hover rule shares --ec-button-active-* with .ec-active, so
+// hover and the persisted selection would look identical; `:not(.ec-active)`
+// leaves the active button's fill alone on hover.
+body .ec .ec-button:not(:disabled):hover:not(.ec-active) {
+  background-color: var(--ec-button-hover-bg-color);
+  border-color: var(--ec-button-border-color);
+  color: var(--ec-button-hover-text-color);
+  // Avoids tying with .ec-active's z-index:1 at the grouped buttons' 1px
+  // overlap seam, which made hover/active flicker near that pixel.
+  z-index: 0;
+}
+
+// Event Calendar draws its prev/next glyph as a pure-CSS border trick (no
+// icon-injection API exists). Swapped for real FontAwesome chevrons to
+// match datatable's pagination icons (datatable.js). `rotate: none` cancels
+// the library's LTR/RTL mirroring transform, sized for the old glyph; our
+// `body .ec` prefix out-specifies its `[dir=rtl]` variant too. Coupled to
+// FontAwesome's default "css" mode and "Font Awesome 7 Free" family
+// (with_fontawesome_data.version default 7.0.1) — revisit if either changes.
+//
+// .ec-icon also needs resizing: the library sizes it at a fixed 1em for the
+// old 0.5em glyph. `1.25em` matches FontAwesome's default icon width;
+// `line-height: 1` mirrors FontAwesome's own rule instead of the button's 1.5.
+body .ec .ec-icon.ec-prev,
+body .ec .ec-icon.ec-next {
+  inline-size: 1.25em;
+  text-align: center;
+  line-height: 1;
+}
+
+body .ec .ec-icon.ec-prev::after,
+body .ec .ec-icon.ec-next::after {
+  content: "\f053"; // fa-chevron-left
+  font-family: "Font Awesome 7 Free";
+  font-weight: 900;
+  font-style: normal; // matches FontAwesome's own .fas rule; guards against inherited italics
+  border: none;
+  rotate: none;
+  inset-inline-start: 0;
+  block-size: auto;
+  inline-size: auto;
+}
+
+body .ec .ec-icon.ec-next::after {
+  content: "\f054"; // fa-chevron-right
+}
+
+// [data-bs-theme="dark"] may sit on <html> itself or on some other ancestor
+// — two branches to match both (see header comment).
+html[data-bs-theme="dark"] .ec,
+html [data-bs-theme="dark"] .ec {
   --ec-surface-bg-color: #{$dark};
   --ec-bg-color: #{$dark};
   --ec-text-color: #{$light};
@@ -161,10 +170,9 @@ html .ec-dark .ec {
 
   --ec-button-bg-color: #{$dark};
   --ec-button-border-color: #{map-get($theme-colors, 'centos-purple-800')};
-  --ec-button-text-color: #{$light};
-  --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-700')};
-  --ec-button-active-border-color: #{map-get($theme-colors, 'centos-purple-400')};
-  --ec-button-active-text-color: #{$light};
+  --ec-button-active-bg-color: #{$primary};
+  --ec-button-active-border-color: #{$primary};
+  --ec-button-active-text-color: #{$white};
 
   --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-900')};
   --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-900')};
@@ -175,30 +183,3 @@ html .ec-dark .ec {
 
   --ec-popup-bg-color: #{$dark};
 }
-
-// Automatic dark mode (an ancestor carries the .ec-auto-dark class and the
-// OS/browser prefers a dark color scheme) — same values as the manual toggle.
-@media (prefers-color-scheme: dark) {
-  html .ec-auto-dark .ec {
-    --ec-surface-bg-color: #{$dark};
-    --ec-bg-color: #{$dark};
-    --ec-text-color: #{$light};
-    --ec-border-color: #{map-get($theme-colors, 'centos-purple-800')};
-
-    --ec-button-bg-color: #{$dark};
-    --ec-button-border-color: #{map-get($theme-colors, 'centos-purple-800')};
-    --ec-button-text-color: #{$light};
-    --ec-button-active-bg-color: #{map-get($theme-colors, 'centos-purple-700')};
-    --ec-button-active-border-color: #{map-get($theme-colors, 'centos-purple-400')};
-    --ec-button-active-text-color: #{$light};
-
-    --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-900')};
-    --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-900')};
-
-    --ec-event-bg-color: #{map-get($theme-colors, 'centos-purple-400')};
-    --ec-event-text-color: #{$dark};
-    --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-800')};
-
-    --ec-popup-bg-color: #{$dark};
-  }
-}

data/_sass/base/_customization.scss

@@ -1,22 +1,24 @@
-// This file is for custom CSS rules and utility classes that override standard
-// Bootstrap structure. It should be the last file in your import sequence.
+// Custom CSS rules and utility classes that override standard Bootstrap
+// structure. Imported after `base/bootstrap` (so these win the cascade) and
+// before third-party component overrides like base/calendar (so those win
+// over these in turn).
 // Here, you define and generate custom utility classes using the variables and
 // maps that were set up previously.
 
 // ================================================================================
-// CSS Custom Properties (for dynamic inline styles)
+// CSS Custom Properties (currently unused)
 // ================================================================================
-// These variables are used in head.html.liquid for dynamic CSS generation.
-// Defined here for centralized configuration and availability to inline styles.
+// Not read anywhere — head.html.liquid computes its own scroll-offset values
+// inline from Liquid data instead, and the copy-button icon size below is
+// hardcoded rather than referencing --highlight-icon-width/height. Kept as a
+// record of the values those should stay in sync with.
 :root {
   // Breaking News Component
-  // Measurements used for calculating scroll-margin-top in head.html.liquid
   --breakingnews-alert-height: 31px;
   --navbar-height: 42px;
   --heading-margin-top: 48px;
 
   // Highlight.js Icon Sizing
-  // Used for copy button icon dimensions
   --highlight-icon-width: 24px;
   --highlight-icon-height: 24px;
 }
@@ -142,7 +144,8 @@ body {
 //                Excluded from CSS icon styling via .announcement class.
 // Alerts:        Use CSS-based SVG icons ($centos-alert-icons map) for markdown-based
 //                alerts within .content, with type-specific icons per color.
-//                Only applied to .alert:not(.announcement) to avoid styling announcements.
+//                Only applied to .alert:not(.announcement):not(.breakingnews), to
+//                avoid styling announcements and breaking news.
 
 $centos-alert-icons: (
   "primary": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 42.333 42.333'><g transform='rotate(45 -180.13 -610.203) scale(1.0529)'><circle cx='388.123' cy='-290.716' r='20.103' style='fill:rgba(#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))},1);stroke:none;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))}'/><path d='M377.366-301.473v6.301l-4.456 4.456 4.456 4.456v6.302h6.302l4.456 4.456 4.456-4.456h6.301v-6.302l4.456-4.456-4.456-4.456v-6.301h-6.301l-4.456-4.456-4.456 4.456zm2.271 4.183 1.913-1.912 3.227 3.227v1.913h-1.912zm-2.163 5.222h4.565l1.352 1.352-1.352 1.353h-4.564zm9.297-9.297h2.705v4.564l-1.352 1.353-1.353-1.353zm.091 7.607 1.261 1.282 1.26-1.283-.015 1.798 1.798-.016-1.282 1.26 1.283 1.261-1.798-.015.016 1.798-1.26-1.282-1.261 1.283.015-1.799-1.798.016 1.282-1.26-1.283-1.26 1.799.015zm-7.225 9.617 3.228-3.228h1.912v1.913l-3.227 3.227zm11.833-11.834 3.228-3.227 1.913 1.912-3.228 3.228h-1.912zm-4.698 11.345 1.352-1.352 1.352 1.352v4.564h-2.704zm6.085-6.085 1.352-1.353h4.564v2.705h-4.564zm-1.387 3.346h1.913l3.228 3.228-1.913 1.912-3.228-3.227z' style='fill:%23fff;fill-opacity:1;stroke-width:9.12808;stroke-linecap:round;paint-order:fill markers stroke;stop-color:%23000'/></g></svg>"),
@@ -192,13 +195,11 @@ $centos-alert-icons: (
 
 main {
   // --------------------------------------------------------------------------------
-  // Navbar and linked headings' correction.
-  //
-  // By default, when you access page headings from the page table of content
-  // (toc) links, the heading is hidden behind the navbar.  This workaround
-  // fixes the linked headings visibility issue in the page.
-  // Also applies the same correction to accordion buttons for consistent behavior.
+  // Linked headings' bottom clearance.
   // --------------------------------------------------------------------------------
+  // Navbar-independent baseline spacing for anchor-linked headings/figures.
+  // The fixed-navbar top clearance for these same selectors lives in the
+  // `.has-navbar main` block near the end of this file.
   .content > h1,
   .content > h2,
   .content > h3,
@@ -289,25 +290,14 @@ main {
     color: var(--bs-primary);
   }
 
-  // Accordion containers' correction.
-  //
-  // When accessing accordion containers via internal anchor links, they wouldn't be
-  // hidden behind the navbar. This correction ensures accordion containers remain
-  // visible when linked to, and works in conjunction with the dynamic calculation
-  // in head.html.liquid when breaking news is present.
-  //
-  // Note: Applied to .accordion container (not items) to avoid disrupting accordion
-  // item internal layout while still providing proper scroll margin and visual spacing.
+  // Accordion containers' bottom clearance — same as the headings/figure
+  // block above, applied to both `.accordion` and `.accordion-item` since an
+  // anchor can target either level.
   .content .accordion,
   .content .accordion-item {
     scroll-margin-bottom: 100px;
   }
 
-  // --------------------------------------------------------------------------------
-  // DataTable BS5 corrections
-  // --------------------------------------------------------------------------------
-  .content { .dt-container { margin-bottom: 1rem; } }
-
   // --------------------------------------------------------------------------------
   // Copy Value Component
   // --------------------------------------------------------------------------------
@@ -370,10 +360,7 @@ main {
         height: 1rem; /* Adjust icon size as needed */
       }
       code {
-        border-left: 5px;
-        border-top: 1px;
-        border-right: 1px;
-        border-bottom: 1px;
+        border: 1px;
         border-color: var(--bs-light-border-subtle);
         border-style: solid;
       }

data/_sass/base/_datatable.scss

@@ -0,0 +1,125 @@
+// ================================================================================
+// DataTables (datatables.net) BS5 theming corrections
+// ================================================================================
+// Purpose: fix up the parts of DataTables' Bootstrap 5 styling integration
+// that don't compose cleanly with this theme's own Bootstrap variables and
+// tokens.
+// ================================================================================
+
+main {
+  // --------------------------------------------------------------------------------
+  // DataTable BS5 corrections
+  // --------------------------------------------------------------------------------
+  .content { .dt-container { margin-bottom: 0.5rem; } }
+
+  // Bootstrap paints table cells from `--bs-table-bg`, not `background-color`,
+  // so override that variable instead of adding a class. Scoped to `thead`
+  // only, without requiring `.table-light`: kramdown's `{:.table .dataTable}`
+  // IAL can't add a class to the generated `<thead>`, so a `.table-light`
+  // requirement would silently skip every Markdown-authored table.
+  .content {
+    table.dataTable thead {
+      --bs-table-bg: var(--bs-centos-purple-100);
+    }
+  }
+
+  // DataTables' bundled CSS never reads `--bs-table-striped-bg`; it paints
+  // striped rows with a hardcoded black box-shadow (`--dt-row-stripe`) that
+  // paints over any background-color, so neither the Bootstrap variable nor
+  // a class has any effect. Overridden directly with `--bs-light` — the same
+  // token driving the DataTables wrapper's `.bg-light` (datatable.js), so
+  // stripe and container share one semantic color.
+  // `:not(:hover)` defers to the hover rule below; `:not([class])` defers to
+  // contextual row classes like `.table-warning`.
+  .content {
+    table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1):not(:hover):not([class]) > * {
+      box-shadow: inset 0 0 0 9999px var(--bs-light);
+    }
+  }
+
+  // DataTables' own hover rule has the same box-shadow-over-background issue
+  // (`--dt-row-hover`, flat 7.5%-opacity black). Translucent purple composites
+  // over whatever's already on the row — plain, striped, or `.table-warning`
+  // — instead of needing to exclude any of them; alpha kept low (0.05) so it
+  // doesn't collide with the stripe color (`--bs-light`).
+  .content {
+    table.table.dataTable.table-hover > tbody > tr:hover > * {
+      box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.05);
+    }
+  }
+
+  // DataTables marks sort state by opacity alone (idle/active), no hue and
+  // no icon-injection API — replaced with real FontAwesome glyphs so each
+  // header shows one icon matching its actual state. Coupled to
+  // with_fontawesome_data.version's default "Font Awesome 7 Free" family —
+  // revisit if that changes.
+  //
+  // Our selectors out-specify DataTables' own, but specificity wins per
+  // property, not per rule — every ::before/::after property that would
+  // conflict with a single centered glyph is redeclared below.
+  .content {
+    table.dataTable thead tr th .dt-column-order,
+    table.dataTable thead tr td .dt-column-order {
+      text-align: center;
+      line-height: 20px;
+    }
+
+    // Idle: orderable but not the active sort column/direction — single
+    // fa-sort (⇅) on ::before; ::after suppressed so only one glyph shows.
+    table.dataTable thead tr th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before,
+    table.dataTable thead tr td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before {
+      content: "\f0dc"; // fa-sort
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-centos-purple-300);
+    }
+
+    table.dataTable thead tr th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after,
+    table.dataTable thead tr td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after {
+      display: none;
+    }
+
+    // Ascending: ::before becomes fa-sort-up; ::after suppressed.
+    table.dataTable thead tr th.dt-ordering-asc .dt-column-order::before,
+    table.dataTable thead tr td.dt-ordering-asc .dt-column-order::before {
+      content: "\f0de"; // fa-sort-up
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-primary);
+    }
+
+    table.dataTable thead tr th.dt-ordering-asc .dt-column-order::after,
+    table.dataTable thead tr td.dt-ordering-asc .dt-column-order::after {
+      display: none;
+    }
+
+    // Descending: ::after becomes fa-sort-down; ::before suppressed.
+    table.dataTable thead tr th.dt-ordering-desc .dt-column-order::after,
+    table.dataTable thead tr td.dt-ordering-desc .dt-column-order::after {
+      content: "\f0dd"; // fa-sort-down
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-primary);
+    }
+
+    table.dataTable thead tr th.dt-ordering-desc .dt-column-order::before,
+    table.dataTable thead tr td.dt-ordering-desc .dt-column-order::before {
+      display: none;
+    }
+  }
+}

data/assets/css/base/stylesheet.min.scss

@@ -37,3 +37,4 @@
 // 7. Third-party component theme overrides (must load after our own
 // customizations so component-specific corrections win the cascade).
 @import "base/calendar";
+@import "base/datatable";