TheRON/kane-diagnostics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Updated

Browse Source
This commit is contained in:
TheRON
2026-06-06 22:48:37 -04:00
parent b404ac9e52
commit d1a244aae6
1 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
hubzilla/addon/vs01/view/css/vs01.css
View File

@@ -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 <p><strong> 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);