/** * Base form fixes — loaded under every theme. * * The Helix Justice template forces select height to ~38px while the * body line-height is 1.7 with 17px font-size (~29px line). With the * 12-15px padding on .form-control, descenders ("p", "y", "g") get * clipped — visible in the Suggest-a-group form on the Type select. * * The fixes below: * - Give selects + form-control inputs a comfortable min-height * and tighter line-height so descenders never clip. * - Make multi-select boxes (e.g. the new multi-select Type) render * visibly larger so users notice they CAN multi-select. * - Apply lighter focus rings consistent with brand bronze (themes * can still override via their stronger selectors). * * Themed colour overrides keep working — these rules only touch * sizing/spacing, not colour. */ /* Single-row selects + .form-control inputs */ .form-select, .form-control, input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], select.form-control, select:not([multiple]) { min-height: 44px; line-height: 1.4; padding-top: 0.55rem; padding-bottom: 0.55rem; } /* Native single selects: the Justice CSS forces a tight calc height — * override with !important so our value wins. */ select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) { height: 44px !important; line-height: 1.4 !important; } /* Multi-select boxes show several rows + don't collapse to single-row * height. min-height covers Helix's `height` override. */ select[multiple], select.form-select[multiple] { height: auto !important; min-height: 8rem; line-height: 1.4; padding-top: 0.4rem; padding-bottom: 0.4rem; } select[multiple] option, select.form-select[multiple] option { padding: 6px 10px; } /* Textareas: keep their natural growth but match the input padding. */ textarea.form-control, textarea { line-height: 1.5; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* The "kbd" hint used in the multi-select label */ kbd { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(184, 115, 51, 0.3); border-radius: 3px; padding: 0.05em 0.4em; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } /* Focus is left to the theme files except where Helix sets box-shadow:none * !important, in which case we restore a soft outline. */ .form-select:focus, .form-control:focus, select:focus, input:focus, textarea:focus { outline: none; } /* WCAG 1.4.1 (Use of Colour) — links inside body prose carry an underline * so they're distinguishable from surrounding text without relying on colour * alone. Loaded under every theme. Strategy: underline all links in the * content area, then strip the underline back off the interactive components * (buttons, tags, pagination, menus, breadcrumb) and image links, whose * shape or position already marks them as interactive. */ .sp-page-content a, .article-introtext a, .article-fulltext a, .item-content a, .entry-content a { text-decoration: underline !important; text-underline-offset: 0.15em; } .sp-page-content a.btn, .sp-page-content .btn a, .sp-page-content a.sppb-btn, .sp-page-content .sppb-btn a, .sp-page-content .btn-primary, .sp-page-content .sppb-btn-primary, .sp-page-content .tags a, .sp-page-content .pagination a, .sp-page-content .pager a, .sp-page-content .sp-megamenu-parent a, .sp-page-content .breadcrumb a, .item-content .tags a, .item-content .pagination a, .entry-content .tags a, .entry-content .pagination a, .article-fulltext .tags a, .article-fulltext .pagination a, .sp-page-content a:has(> img), .item-content a:has(> img), .entry-content a:has(> img), .article-fulltext a:has(> img) { text-decoration: none !important; } /* ----------------------------------------------------------------------- * Bootstrap-5 table-striped contrast fix (applies to every theme). * * Bootstrap 5 drives table cell colour through a chain of CSS variables * (`--bs-table-color` ← `var(--bs-body-color)`, `--bs-table-striped-color`, * `--bs-table-color-type`) where every link in the chain has fixed * near-black defaults calculated for LIGHT backgrounds. On every OTT * dark theme those values render almost invisible — visible on * CommunityQuiz "matching" question rows (quiz 22 Q2 etc.). * * Two earlier iterations failed because of a subtle cascade trap: * 1) v0.4.5: rerouted the cell vars to `var(--bs-body-color)`. Helix * Justice sets `body { color: #c9b896 }` DIRECTLY but DOES NOT set * `--bs-body-color`, so the var fell back to Bootstrap's `:root` * default `#212529` (near-black). Every row dim. * 2) v0.4.6: set `color: inherit !important` on cells only. Didn't * work either — because Bootstrap also drives `color:` on the * `.table` element itself via `var(--bs-table-color)`, which * resolves through `var(--bs-body-color)` to `#212529`. So the * table itself was dark, and cells inheriting from the table * inherited that dark value, not the body's actual `#c9b896`. * * Final fix (v0.4.7): break the chain at the `.table` element itself. * Force `.table` to inherit colour from its parent (cascade goes * .table → some div → body, picking up body's actual `color:` along * the way). Then force cells to inherit from the table. End-to-end, * each theme's `body { color }` carries through to every cell. * `!important` is justified — we're explicitly overriding a vendor * mechanism that breaks on dark themes; themes that want bespoke * table colour can still win with more-specific selectors. * --------------------------------------------------------------------- */ .table { color: inherit !important; } .table > tbody > tr > th, .table > tbody > tr > td, .table-striped > tbody > tr > * { color: inherit !important; } /* ----------------------------------------------------------------------- * Native dropdown opens, browsers render