155 lines
4.7 KiB
CSS
155 lines
4.7 KiB
CSS
/* vs01 — Vital Signs — v0.3.0 */
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
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 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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--civicinfra-space-2);
|
|
display: block;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
VS HEADER
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.vs01-vs-header {
|
|
border-bottom: 2px solid var(--civicinfra-rule);
|
|
padding-bottom: var(--civicinfra-space-4);
|
|
margin-bottom: var(--civicinfra-space-6);
|
|
}
|
|
|
|
.vs01-vs-header h3 {
|
|
font-size: var(--civicinfra-fs-lg);
|
|
font-weight: 700;
|
|
color: var(--civicinfra-primary);
|
|
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;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
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-size: var(--civicinfra-fs-sm);
|
|
transition: background-color var(--civicinfra-transition);
|
|
}
|
|
|
|
.vs01-vs-nav .list-group-item:hover {
|
|
background: var(--civicinfra-surface);
|
|
}
|
|
|
|
.vs01-vs-nav .list-group-item p {
|
|
font-size: var(--civicinfra-fs-xs);
|
|
color: var(--civicinfra-muted);
|
|
margin-bottom: 0;
|
|
margin-top: var(--civicinfra-space-1);
|
|
}
|
|
|
|
.vs01-vs-nav-arrows {
|
|
border-top: 1px solid var(--civicinfra-surface-muted);
|
|
padding-top: var(--civicinfra-space-4);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
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-size: var(--civicinfra-fs-sm);
|
|
transition: background-color var(--civicinfra-transition);
|
|
}
|
|
|
|
.vs01-association-list .list-group-item:hover {
|
|
background: var(--civicinfra-surface);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
IMMUTABLE NOTICE
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.vs01-immutable-notice {
|
|
font-size: var(--civicinfra-fs-sm);
|
|
background: var(--civicinfra-surface);
|
|
border-color: var(--civicinfra-border);
|
|
color: var(--civicinfra-muted);
|
|
}
|