Updated

2026-06-06 22:45:50 -04:00
parent a4cd6e5bcb
commit b404ac9e52
1 changed files with 137 additions and 8 deletions
--- a/hubzilla/addon/vs01/view/css/vs01.css
+++ b/hubzilla/addon/vs01/view/css/vs01.css
@@ -1,15 +1,144 @@
-/* vs01 — Vital Signs — v0.1.0 */
+/* vs01 — Vital Signs — v0.3.0 */

-/* --- Layout --- */
+/* ----------------------------------------------------------------------------
+   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.
+   ---------------------------------------------------------------------------- */

-/* --- Header --- */
+.vs01-content {
+    font-family: var(--bs-font-sans-serif);
+    font-size: var(--civicinfra-fs-base);
+    color: var(--civicinfra-text);
+}

-/* --- Content --- */
+/* 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;
+}

-/* --- Directory (aside) --- */
+/* 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);
+}

-/* --- Directory: Core tab --- */
+.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);
+}

-/* --- Directory: Tier tabs --- */
+/* 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;
+}

-/* --- Placeholder states --- */
+/* 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);
+}