From d1a244aae6d8a7304e1b845e6cc931ef2dcae98f Mon Sep 17 00:00:00 2001 From: TheRON Date: Sat, 6 Jun 2026 22:48:37 -0400 Subject: [PATCH] Updated --- hubzilla/addon/vs01/view/css/vs01.css | 130 ++++++++++++++------------ 1 file changed, 70 insertions(+), 60 deletions(-) diff --git a/hubzilla/addon/vs01/view/css/vs01.css b/hubzilla/addon/vs01/view/css/vs01.css index ccd2b19..8b6c0be 100644 --- a/hubzilla/addon/vs01/view/css/vs01.css +++ b/hubzilla/addon/vs01/view/css/vs01.css @@ -1,67 +1,52 @@ /* vs01 — Vital Signs — v0.3.0 */ /* ---------------------------------------------------------------------------- - VS FORM — question text and field labels - All text in the VS form uses sans-serif at consistent sizes anchored to the - civicinfra type scale. This overrides the region_2 serif inheritance so the - form reads as UI, not prose. + ROOT FONT OVERRIDE + #region_2 inherits Georgia serif from the theme. Everything inside .vs01-content + must explicitly use sans-serif to read as UI, not prose. Target every element + that could pick up the serif inheritance. ---------------------------------------------------------------------------- */ -.vs01-content { +.vs01-content, +.vs01-content p, +.vs01-content h2, +.vs01-content h3, +.vs01-content label, +.vs01-content legend, +.vs01-content .form-label, +.vs01-content .form-check-label, +.vs01-content fieldset, +.vs01-content .vs01-field, +.vs01-content .vs01-instruction, +.vs01-content .vs01-diagnostic-question, +.vs01-content .list-group-item, +.vs01-content .breadcrumb, +.vs01-content .alert { font-family: var(--bs-font-sans-serif); - font-size: var(--civicinfra-fs-base); - color: var(--civicinfra-text); } -/* Question text — the diagnostic question above each form */ -.vs01-diagnostic-question { - font-family: var(--bs-font-sans-serif); - font-size: var(--civicinfra-fs-sm); - color: var(--civicinfra-muted); - margin-bottom: var(--civicinfra-space-4); - line-height: 1.5; -} - -/* Field question labels rendered as

in the renderer */ -.vs01-form p { - font-family: var(--bs-font-sans-serif); - font-size: var(--civicinfra-fs-sm); - line-height: 1.5; - margin-bottom: var(--civicinfra-space-2); -} - -.vs01-form p strong, -.vs01-form label { - font-family: var(--bs-font-sans-serif); +/* Base size anchor — all form text at sm */ +.vs01-content label, +.vs01-content legend, +.vs01-content .form-label, +.vs01-content .form-check-label { font-size: var(--civicinfra-fs-sm); font-weight: 600; color: var(--civicinfra-text); } -/* Instruction text above the form */ -.vs01-instruction { - font-family: var(--bs-font-sans-serif); +/* Question text above each field — the label IS the question */ +.vs01-field label.form-label, +.vs01-field legend.form-label { font-size: var(--civicinfra-fs-sm); - color: var(--civicinfra-muted); - margin-bottom: var(--civicinfra-space-4); - padding: var(--civicinfra-space-3) var(--civicinfra-space-4); - background: var(--civicinfra-surface); - border-left: 0.25rem solid var(--civicinfra-accent-muted); - border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0; -} - -/* VS form field grouping */ -.vs01-form .mb-3 { - padding-bottom: var(--civicinfra-space-3); - border-bottom: 1px solid var(--civicinfra-surface-muted); -} - -.vs01-form .mb-3:last-of-type { - border-bottom: none; + font-weight: 600; + line-height: 1.5; + margin-bottom: var(--civicinfra-space-2); + display: block; } /* ---------------------------------------------------------------------------- - VS HEADER — breadcrumb and title block + VS HEADER ---------------------------------------------------------------------------- */ .vs01-vs-header { @@ -77,15 +62,50 @@ margin-bottom: var(--civicinfra-space-2); } +/* Diagnostic question below the h3 */ +.vs01-diagnostic-question { + font-size: var(--civicinfra-fs-sm); + color: var(--civicinfra-muted); + margin-bottom: 0; + line-height: 1.5; +} + /* ---------------------------------------------------------------------------- - VS NAVIGATION — association landing list and prev/next arrows + INSTRUCTION BLOCK + ---------------------------------------------------------------------------- */ + +.vs01-instruction { + font-size: var(--civicinfra-fs-sm); + color: var(--civicinfra-muted); + margin-bottom: var(--civicinfra-space-4); + padding: var(--civicinfra-space-3) var(--civicinfra-space-4); + background: var(--civicinfra-surface); + border-left: 0.25rem solid var(--civicinfra-accent-muted); + border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0; + line-height: 1.5; +} + +/* ---------------------------------------------------------------------------- + FIELD SEPARATORS + ---------------------------------------------------------------------------- */ + +.vs01-field { + padding-bottom: var(--civicinfra-space-3); + border-bottom: 1px solid var(--civicinfra-surface-muted); +} + +.vs01-field:last-of-type { + border-bottom: none; +} + +/* ---------------------------------------------------------------------------- + VS NAVIGATION ---------------------------------------------------------------------------- */ .vs01-vs-nav .list-group-item { background: transparent; border-color: var(--civicinfra-border); padding: var(--civicinfra-space-3) var(--civicinfra-space-4); - font-family: var(--bs-font-sans-serif); font-size: var(--civicinfra-fs-sm); transition: background-color var(--civicinfra-transition); } @@ -107,22 +127,13 @@ } /* ---------------------------------------------------------------------------- - VERIFICATION SOURCES — "Where to verify this" button - ---------------------------------------------------------------------------- */ - -.vs01-verification-sources { - margin-bottom: var(--civicinfra-space-4); -} - -/* ---------------------------------------------------------------------------- - ASSOCIATION INDEX LIST + ASSOCIATION INDEX ---------------------------------------------------------------------------- */ .vs01-association-list .list-group-item { background: transparent; border-color: var(--civicinfra-border); padding: var(--civicinfra-space-3) var(--civicinfra-space-4); - font-family: var(--bs-font-sans-serif); font-size: var(--civicinfra-fs-sm); transition: background-color var(--civicinfra-transition); } @@ -136,7 +147,6 @@ ---------------------------------------------------------------------------- */ .vs01-immutable-notice { - font-family: var(--bs-font-sans-serif); font-size: var(--civicinfra-fs-sm); background: var(--civicinfra-surface); border-color: var(--civicinfra-border);