145 lines
4.7 KiB
CSS
145 lines
4.7 KiB
CSS
/* 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.
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.vs01-content {
|
|
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);
|
|
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);
|
|
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;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
VS HEADER — breadcrumb and title block
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
VS NAVIGATION — association landing list and prev/next arrows
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
VERIFICATION SOURCES — "Where to verify this" button
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.vs01-verification-sources {
|
|
margin-bottom: var(--civicinfra-space-4);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
ASSOCIATION INDEX LIST
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.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);
|
|
}
|
|
|
|
.vs01-association-list .list-group-item:hover {
|
|
background: var(--civicinfra-surface);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
IMMUTABLE NOTICE
|
|
---------------------------------------------------------------------------- */
|
|
|
|
.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);
|
|
color: var(--civicinfra-muted);
|
|
}
|