731 lines
20 KiB
CSS
731 lines
20 KiB
CSS
/*
|
|
* USCIVICINFRA theme overrides.
|
|
*
|
|
* This theme is intentionally conservative. It extends redbasic without
|
|
* replacing Hubzilla's interaction model. The first pass establishes a civic,
|
|
* diagnostic visual frame and reusable class hooks for later addons.
|
|
*/
|
|
|
|
/* ============================================================
|
|
DESIGN TOKENS
|
|
============================================================ */
|
|
|
|
:root {
|
|
--civicinfra-bg: #faf9f6;
|
|
--civicinfra-surface: #f2efe8;
|
|
--civicinfra-surface-muted: #e7e1d6;
|
|
--civicinfra-text: #24231f;
|
|
--civicinfra-muted: #5f655d;
|
|
--civicinfra-border: #cfc6b6;
|
|
--civicinfra-rule: #b7ad9d;
|
|
--civicinfra-primary: #243f3b;
|
|
--civicinfra-primary-contrast: #f8f6ef;
|
|
--civicinfra-accent: #8a673c;
|
|
--civicinfra-accent-muted: #d8c4a2;
|
|
--civicinfra-danger: #7a342c;
|
|
--civicinfra-focus: #5a6f69;
|
|
--civicinfra-mono-bg: #ebe6dc;
|
|
|
|
/* Bootstrap bridge */
|
|
--bs-body-bg: var(--civicinfra-bg);
|
|
--bs-body-color: var(--civicinfra-text);
|
|
--bs-primary: var(--civicinfra-primary);
|
|
--bs-primary-rgb: 36, 63, 59;
|
|
--bs-link-color: #244f49;
|
|
--bs-link-hover-color: #193b36;
|
|
--bs-border-color: var(--civicinfra-border);
|
|
|
|
/* Typography */
|
|
--bs-body-font-family: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--bs-font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
|
|
/* Type scale */
|
|
--civicinfra-fs-xs: 0.75rem;
|
|
--civicinfra-fs-sm: 0.875rem;
|
|
--civicinfra-fs-base: 1rem;
|
|
--civicinfra-fs-md: 1.0625rem;
|
|
--civicinfra-fs-lg: 1.25rem;
|
|
--civicinfra-fs-xl: 1.5rem;
|
|
--civicinfra-fs-2xl: 1.875rem;
|
|
|
|
/* Spacing */
|
|
--civicinfra-space-1: 0.25rem;
|
|
--civicinfra-space-2: 0.5rem;
|
|
--civicinfra-space-3: 0.75rem;
|
|
--civicinfra-space-4: 1rem;
|
|
--civicinfra-space-6: 1.5rem;
|
|
--civicinfra-space-8: 2rem;
|
|
|
|
/* Radius */
|
|
--civicinfra-radius-sm: 2px;
|
|
--civicinfra-radius: 3px;
|
|
|
|
/* Transition */
|
|
--civicinfra-transition: 150ms ease;
|
|
}
|
|
|
|
[data-bs-theme="dark"] {
|
|
--civicinfra-bg: #141715;
|
|
--civicinfra-surface: #1d211f;
|
|
--civicinfra-surface-muted: #272d2a;
|
|
--civicinfra-text: #eee9df;
|
|
--civicinfra-muted: #b4b9b1;
|
|
--civicinfra-border: #465049;
|
|
--civicinfra-rule: #667168;
|
|
--civicinfra-primary: #8ca79f;
|
|
--civicinfra-primary-contrast: #111412;
|
|
--civicinfra-accent: #c1a06c;
|
|
--civicinfra-accent-muted: #5c4b32;
|
|
--civicinfra-danger: #d09286;
|
|
--civicinfra-focus: #acc8c0;
|
|
--civicinfra-mono-bg: #242a27;
|
|
|
|
--bs-body-bg: var(--civicinfra-bg);
|
|
--bs-body-color: var(--civicinfra-text);
|
|
--bs-link-color: #aecbc3;
|
|
--bs-link-hover-color: #d3e4df;
|
|
--bs-border-color: var(--civicinfra-border);
|
|
}
|
|
|
|
/* ============================================================
|
|
BASE
|
|
============================================================ */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--civicinfra-bg);
|
|
color: var(--civicinfra-text);
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* UI chrome uses sans-serif */
|
|
body,
|
|
button, input, select, textarea,
|
|
.btn, .nav, .navbar, .dropdown-menu,
|
|
.modal, .card, .badge, .alert,
|
|
label, th, td, caption {
|
|
font-family: var(--bs-font-sans-serif);
|
|
}
|
|
|
|
/* Content areas use serif */
|
|
main,
|
|
.wall-item-content,
|
|
.generic-content-wrapper,
|
|
.section-content-wrapper,
|
|
#region_2,
|
|
#content,
|
|
.article-content,
|
|
.civicinfra-prose {
|
|
font-family: var(--bs-body-font-family);
|
|
}
|
|
|
|
code, pre, kbd, samp,
|
|
.civicinfra-record-id,
|
|
.civicinfra-cid,
|
|
.civicinfra-token {
|
|
font-family: var(--bs-font-monospace);
|
|
}
|
|
|
|
/* ============================================================
|
|
TYPOGRAPHY
|
|
============================================================ */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-weight: 700;
|
|
color: var(--civicinfra-text);
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
h1 { font-size: var(--civicinfra-fs-2xl); }
|
|
h2 { font-size: var(--civicinfra-fs-xl); }
|
|
h3 { font-size: var(--civicinfra-fs-lg); }
|
|
h4 { font-size: var(--civicinfra-fs-md); }
|
|
h5 { font-size: var(--civicinfra-fs-base); font-weight: 600; }
|
|
h6 { font-size: var(--civicinfra-fs-sm); font-weight: 600; }
|
|
|
|
p { line-height: 1.65; }
|
|
|
|
/* Tabular numerals for data-heavy contexts */
|
|
.civicinfra-data-table,
|
|
.civicinfra-record-id,
|
|
.civicinfra-cid {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ============================================================
|
|
LINKS
|
|
============================================================ */
|
|
|
|
a, .nav-link, .dropdown-item {
|
|
text-decoration-thickness: 0.08em;
|
|
text-underline-offset: 0.14em;
|
|
transition: color var(--civicinfra-transition);
|
|
}
|
|
|
|
a:hover, a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--civicinfra-focus);
|
|
outline-offset: 2px;
|
|
border-radius: var(--civicinfra-radius-sm);
|
|
}
|
|
|
|
/* ============================================================
|
|
CHROME
|
|
============================================================ */
|
|
|
|
.navbar, #nav-bar,
|
|
.app-menu, aside,
|
|
.generic-content-wrapper,
|
|
.section-content-wrapper,
|
|
.card, .modal-content, .dropdown-menu {
|
|
border-color: var(--civicinfra-border);
|
|
}
|
|
|
|
.navbar, #nav-bar {
|
|
border-bottom: 1px solid var(--civicinfra-rule);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.generic-content-wrapper,
|
|
.section-content-wrapper,
|
|
.card, .modal-content, .dropdown-menu {
|
|
background-color: var(--civicinfra-bg);
|
|
}
|
|
|
|
.card-header,
|
|
.section-title-wrapper,
|
|
.generic-content-wrapper-styled .section-title-wrapper {
|
|
background-color: var(--civicinfra-surface);
|
|
border-color: var(--civicinfra-border);
|
|
color: var(--civicinfra-text);
|
|
}
|
|
|
|
hr, .dropdown-divider {
|
|
border-color: var(--civicinfra-rule);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
BUTTONS
|
|
============================================================ */
|
|
|
|
.btn {
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-weight: 600;
|
|
border-radius: var(--civicinfra-radius);
|
|
transition:
|
|
background-color var(--civicinfra-transition),
|
|
border-color var(--civicinfra-transition),
|
|
color var(--civicinfra-transition);
|
|
}
|
|
|
|
.btn-primary, .btn-success {
|
|
background-color: var(--civicinfra-primary);
|
|
border-color: var(--civicinfra-primary);
|
|
color: var(--civicinfra-primary-contrast);
|
|
}
|
|
|
|
.btn-primary:hover, .btn-primary:focus,
|
|
.btn-success:hover, .btn-success:focus {
|
|
background-color: #1b312e;
|
|
border-color: #1b312e;
|
|
color: var(--civicinfra-primary-contrast);
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: var(--civicinfra-danger);
|
|
border-color: var(--civicinfra-danger);
|
|
color: var(--civicinfra-primary-contrast);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
border-color: var(--civicinfra-border);
|
|
color: var(--civicinfra-muted);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--civicinfra-surface);
|
|
border-color: var(--civicinfra-rule);
|
|
color: var(--civicinfra-text);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .btn-primary:hover,
|
|
[data-bs-theme="dark"] .btn-primary:focus,
|
|
[data-bs-theme="dark"] .btn-success:hover,
|
|
[data-bs-theme="dark"] .btn-success:focus {
|
|
background-color: #a8beb7;
|
|
border-color: #a8beb7;
|
|
color: var(--civicinfra-primary-contrast);
|
|
}
|
|
|
|
/* ============================================================
|
|
FORMS
|
|
============================================================ */
|
|
|
|
.form-control,
|
|
.form-select {
|
|
background-color: var(--civicinfra-bg);
|
|
border-color: var(--civicinfra-border);
|
|
border-radius: var(--civicinfra-radius);
|
|
color: var(--civicinfra-text);
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
transition:
|
|
border-color var(--civicinfra-transition),
|
|
box-shadow var(--civicinfra-transition);
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background-color: var(--civicinfra-bg);
|
|
border-color: var(--civicinfra-focus);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--civicinfra-focus) 20%, transparent);
|
|
color: var(--civicinfra-text);
|
|
}
|
|
|
|
.form-label {
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
font-weight: 600;
|
|
color: var(--civicinfra-text);
|
|
margin-bottom: var(--civicinfra-space-1);
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--civicinfra-primary);
|
|
border-color: var(--civicinfra-primary);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .form-control,
|
|
[data-bs-theme="dark"] .form-select {
|
|
background-color: var(--civicinfra-surface);
|
|
border-color: var(--civicinfra-border);
|
|
color: var(--civicinfra-text);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .form-control:focus,
|
|
[data-bs-theme="dark"] .form-select:focus {
|
|
background-color: var(--civicinfra-surface);
|
|
}
|
|
|
|
/* ============================================================
|
|
TABLES
|
|
============================================================ */
|
|
|
|
.table {
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
--bs-table-bg: transparent;
|
|
--bs-table-border-color: var(--civicinfra-border);
|
|
}
|
|
|
|
.table th {
|
|
font-weight: 700;
|
|
color: var(--civicinfra-muted);
|
|
font-size: var(--civicinfra-fs-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
border-bottom: 2px solid var(--civicinfra-rule);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover > * {
|
|
background-color: var(--civicinfra-surface);
|
|
}
|
|
|
|
/* Civic data table — used in manage index */
|
|
.civicinfra-data-table {
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-radius: var(--civicinfra-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.civicinfra-data-table thead {
|
|
background-color: var(--civicinfra-surface);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.civicinfra-data-table tbody tr {
|
|
border-bottom: 1px solid var(--civicinfra-surface-muted);
|
|
transition: background-color var(--civicinfra-transition);
|
|
}
|
|
|
|
.civicinfra-data-table tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.civicinfra-data-table tbody tr:hover {
|
|
background-color: var(--civicinfra-surface);
|
|
}
|
|
|
|
/* ============================================================
|
|
CIVIC DIAGNOSTIC PRIMITIVES
|
|
============================================================ */
|
|
|
|
/* Diagnostic surface — primary record container */
|
|
.civicinfra-diagnostic-surface {
|
|
background: var(--civicinfra-bg);
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-left: 0.35rem solid var(--civicinfra-primary);
|
|
padding: var(--civicinfra-space-4);
|
|
border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
|
|
}
|
|
|
|
/* Record frame — secondary data container */
|
|
.civicinfra-record-frame {
|
|
background: var(--civicinfra-surface);
|
|
border: 1px solid var(--civicinfra-border);
|
|
padding: 0.85rem var(--civicinfra-space-4);
|
|
border-radius: var(--civicinfra-radius);
|
|
}
|
|
|
|
/* Section heading within records */
|
|
.civicinfra-record-heading {
|
|
color: var(--civicinfra-primary);
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid var(--civicinfra-surface-muted);
|
|
padding-bottom: var(--civicinfra-space-2);
|
|
margin-bottom: var(--civicinfra-space-3);
|
|
}
|
|
|
|
/* Monospace identifiers */
|
|
.civicinfra-record-id,
|
|
.civicinfra-cid {
|
|
background: var(--civicinfra-mono-bg);
|
|
border: 1px solid var(--civicinfra-border);
|
|
color: var(--civicinfra-text);
|
|
display: inline-block;
|
|
font-size: 0.85em;
|
|
padding: 0.12rem 0.35rem;
|
|
word-break: break-all;
|
|
border-radius: var(--civicinfra-radius-sm);
|
|
}
|
|
|
|
/* Affordance and scope tokens */
|
|
.civicinfra-affordance,
|
|
.civicinfra-scope-token {
|
|
border: 1px solid var(--civicinfra-border);
|
|
color: var(--civicinfra-text);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--bs-font-monospace);
|
|
font-size: var(--civicinfra-fs-xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.2;
|
|
padding: 0.18rem 0.42rem;
|
|
text-transform: uppercase;
|
|
border-radius: var(--civicinfra-radius-sm);
|
|
}
|
|
|
|
.civicinfra-affordance { background: var(--civicinfra-surface); }
|
|
.civicinfra-scope-token { background: var(--civicinfra-accent-muted); border-color: var(--civicinfra-accent); }
|
|
|
|
/* Form section */
|
|
.civicinfra-form-section {
|
|
background: var(--civicinfra-bg);
|
|
border: 1px solid var(--civicinfra-border);
|
|
padding: var(--civicinfra-space-4);
|
|
border-radius: var(--civicinfra-radius);
|
|
}
|
|
|
|
.civicinfra-form-section + .civicinfra-form-section {
|
|
margin-top: var(--civicinfra-space-4);
|
|
}
|
|
|
|
/* Help and meta text */
|
|
.civicinfra-help-text,
|
|
.civicinfra-field-note,
|
|
.civicinfra-record-meta {
|
|
color: var(--civicinfra-muted);
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Notice and warning callouts */
|
|
.civicinfra-notice {
|
|
background: var(--civicinfra-surface);
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-left: 0.35rem solid var(--civicinfra-accent);
|
|
padding: 0.85rem var(--civicinfra-space-4);
|
|
border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
}
|
|
|
|
.civicinfra-warning {
|
|
border-left-color: var(--civicinfra-danger);
|
|
}
|
|
|
|
/* Diagnostic flags */
|
|
.civicinfra-flag {
|
|
border-left: 0.25rem solid var(--civicinfra-accent);
|
|
padding: var(--civicinfra-space-2) var(--civicinfra-space-3);
|
|
margin-top: var(--civicinfra-space-2);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
|
|
}
|
|
|
|
.civicinfra-flag-standard {
|
|
background: color-mix(in srgb, var(--civicinfra-accent-muted) 30%, var(--civicinfra-bg));
|
|
border-left-color: var(--civicinfra-accent);
|
|
}
|
|
|
|
.civicinfra-flag-high {
|
|
background: color-mix(in srgb, var(--civicinfra-accent-muted) 50%, var(--civicinfra-bg));
|
|
border-left-color: var(--civicinfra-accent);
|
|
}
|
|
|
|
.civicinfra-flag-critical {
|
|
background: color-mix(in srgb, var(--civicinfra-danger) 10%, var(--civicinfra-bg));
|
|
border-left-color: var(--civicinfra-danger);
|
|
color: var(--civicinfra-danger);
|
|
}
|
|
|
|
/* Channel list */
|
|
.civicinfra-channel-list {
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-radius: var(--civicinfra-radius);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.civicinfra-channel-list > li {
|
|
border-bottom: 1px solid var(--civicinfra-border);
|
|
padding: 0.65rem 0.8rem;
|
|
transition: background-color var(--civicinfra-transition);
|
|
}
|
|
|
|
.civicinfra-channel-list > li:last-child { border-bottom: 0; }
|
|
.civicinfra-channel-list > li:hover { background-color: var(--civicinfra-surface); }
|
|
|
|
.civicinfra-channel-label {
|
|
color: var(--civicinfra-primary);
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ============================================================
|
|
MANAGE INTERFACE PRIMITIVES
|
|
============================================================ */
|
|
|
|
.civicinfra-manage-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--civicinfra-space-4);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--civicinfra-space-6);
|
|
padding-bottom: var(--civicinfra-space-4);
|
|
border-bottom: 2px solid var(--civicinfra-rule);
|
|
}
|
|
|
|
.civicinfra-manage-title {
|
|
font-size: var(--civicinfra-fs-xl);
|
|
font-weight: 700;
|
|
color: var(--civicinfra-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.civicinfra-manage-actions {
|
|
display: flex;
|
|
gap: var(--civicinfra-space-2);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.civicinfra-search-bar {
|
|
display: flex;
|
|
gap: var(--civicinfra-space-2);
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
|
|
background: var(--civicinfra-surface);
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-radius: var(--civicinfra-radius);
|
|
margin-bottom: var(--civicinfra-space-4);
|
|
}
|
|
|
|
.civicinfra-pagination {
|
|
display: flex;
|
|
gap: var(--civicinfra-space-1);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: var(--civicinfra-space-3);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
color: var(--civicinfra-muted);
|
|
border-top: 1px solid var(--civicinfra-surface-muted);
|
|
}
|
|
|
|
.civicinfra-diff-block {
|
|
background: var(--civicinfra-mono-bg);
|
|
border: 1px solid var(--civicinfra-border);
|
|
border-radius: var(--civicinfra-radius);
|
|
padding: var(--civicinfra-space-4);
|
|
font-family: var(--bs-font-monospace);
|
|
font-size: var(--civicinfra-fs-xs);
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.civicinfra-diff-add { color: #2d6b32; background: #e8f5e9; display: block; }
|
|
.civicinfra-diff-remove { color: #7a342c; background: #fdecea; display: block; text-decoration: line-through; }
|
|
.civicinfra-diff-same { color: var(--civicinfra-muted); display: block; }
|
|
|
|
[data-bs-theme="dark"] .civicinfra-diff-add { color: #81c784; background: #1b2e1d; }
|
|
[data-bs-theme="dark"] .civicinfra-diff-remove { color: #d09286; background: #2e1b1b; }
|
|
|
|
/* ============================================================
|
|
BREADCRUMB
|
|
============================================================ */
|
|
|
|
.breadcrumb {
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-sm);
|
|
color: var(--civicinfra-muted);
|
|
}
|
|
|
|
.breadcrumb-item.active { color: var(--civicinfra-muted); }
|
|
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
color: var(--civicinfra-rule);
|
|
}
|
|
|
|
/* ============================================================
|
|
BADGES AND STATUS
|
|
============================================================ */
|
|
|
|
.civicinfra-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--bs-font-sans-serif);
|
|
font-size: var(--civicinfra-fs-xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: var(--civicinfra-radius-sm);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.civicinfra-status-active { background: #d4edda; color: #2d6b32; border: 1px solid #b7dfbc; }
|
|
.civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); border: 1px solid var(--civicinfra-border); }
|
|
.civicinfra-status-alert { background: #fdecea; color: var(--civicinfra-danger); border: 1px solid #f5c6c2; }
|
|
|
|
[data-bs-theme="dark"] .civicinfra-status-active { background: #1b2e1d; color: #81c784; border-color: #2d4a30; }
|
|
[data-bs-theme="dark"] .civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); }
|
|
[data-bs-theme="dark"] .civicinfra-status-alert { background: #2e1b1b; color: var(--civicinfra-danger); border-color: #4a2b28; }
|
|
|
|
/* ============================================================
|
|
PRINT — diagnostic record output
|
|
============================================================ */
|
|
|
|
@media print {
|
|
:root {
|
|
--civicinfra-bg: #ffffff;
|
|
--civicinfra-surface: #f5f5f5;
|
|
--civicinfra-text: #000000;
|
|
--civicinfra-muted: #444444;
|
|
--civicinfra-border: #cccccc;
|
|
--civicinfra-primary: #000000;
|
|
}
|
|
|
|
.navbar, #nav-bar, #region_1, #region_3,
|
|
aside, .right-aside, .btn, .civicinfra-manage-actions,
|
|
.civicinfra-search-bar, .civicinfra-pagination,
|
|
nav[aria-label="breadcrumb"] {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
font-size: 10pt;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
color: #000;
|
|
background: #fff;
|
|
}
|
|
|
|
.civicinfra-diagnostic-surface,
|
|
.civicinfra-record-frame,
|
|
.civicinfra-form-section {
|
|
border: 1px solid #ccc;
|
|
padding: 0.5rem;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.civicinfra-record-heading {
|
|
font-size: 8pt;
|
|
border-bottom: 1px solid #999;
|
|
}
|
|
|
|
.civicinfra-flag {
|
|
border: 1px solid #ccc;
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 8pt;
|
|
color: #666;
|
|
}
|
|
|
|
h1, h2, h3 { page-break-after: avoid; }
|
|
.assoc-profile-group { page-break-inside: avoid; }
|
|
}
|
|
|
|
/* ============================================================
|
|
RESPONSIVE
|
|
============================================================ */
|
|
|
|
@media (max-width: 767.98px) {
|
|
.civicinfra-diagnostic-surface,
|
|
.civicinfra-record-frame,
|
|
.civicinfra-form-section,
|
|
.civicinfra-notice {
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.civicinfra-record-id,
|
|
.civicinfra-cid {
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.civicinfra-manage-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.civicinfra-search-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.civicinfra-data-table {
|
|
font-size: var(--civicinfra-fs-xs);
|
|
}
|
|
|
|
.civicinfra-diff-block {
|
|
font-size: 0.65rem;
|
|
}
|
|
}
|