Updated
This commit is contained in:
730
hubzilla/view/theme/uscivicinfra/css/style.css
Normal file
730
hubzilla/view/theme/uscivicinfra/css/style.css
Normal file
@@ -0,0 +1,730 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user