0800ba8b9e
Replaces the half-effective inject.css alone with a comprehensive Grafana-specific stylesheet (assets/css/grafana.css, ~700 lines) targeting Grafana 12's actual DOM via aria roles, data-testid, and the legacy class names that survived the emotion CSS-in-JS migration. Covers: - Self-contained palette (cream / federal navy / amber / teal) - Sidebar (always dark navy w/ amber active stripe) - Top bar, breadcrumbs, tabs (uppercase serif, low contrast) - Panels (cream cards, subtle elevation, hover lift) - Stat panels (Playfair Display number, editorial weight) - Buttons (primary navy, danger fed-red, icon-only minimal) - Inputs / forms (serif body, focus ring, italic placeholder) - Dropdowns / popovers / menus (warm card, lg shadow) - Tables (Federal Register data table — uppercase head, stripe) - Alerts (left-stripe, color-coded background) - Modals / drawers (cream card, navy backdrop blur) - Login page (centered editorial form, "fhirworx" eyebrow) - Explore / query editor / logs panel (mono, log-level stripe) - Time picker / pagination / kbd / tabs / badges Loaded after fhirworx.css base palette via index.html sed-patch. Light theme is the baseline (GF_USERS_DEFAULT_THEME=light). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
820 lines
26 KiB
CSS
820 lines
26 KiB
CSS
/* HTI-5 — fhirworx editorial design system, Grafana 12 overlay
|
|
──────────────────────────────────────────────────────────────
|
|
Federal Register meets data journalism. Cream background, deep
|
|
navy primary, serif typography. Targets Grafana's compiled
|
|
light-theme selectors plus emotion-generated DOM via aria roles
|
|
and data-testid attributes (Grafana hashes class names so we
|
|
can't rely on .css-*; we use semantic selectors instead).
|
|
|
|
Companion to inject.css; grafana-specific overrides only. The
|
|
palette is defined here (self-contained — no @import) so the
|
|
file can be served alone and survive a missing fhirworx.css.
|
|
|
|
Loaded into Grafana via a startup sed-patch on
|
|
/usr/share/grafana/public/views/index.html (see compose.yml). */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Serif+4:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
1. CORE PALETTE (HTI-5 / fhirworx)
|
|
============================================ */
|
|
:root {
|
|
/* Surfaces */
|
|
--fw-bg: #F7F5F0; /* cream — main background */
|
|
--fw-bg-elev-1: #FAFAF7; /* slightly warmer card */
|
|
--fw-bg-elev-2: #FDFCF9; /* hover / active panel */
|
|
--fw-bg-inset: #F0EDE6; /* inputs, recessed wells */
|
|
--fw-bg-stripe: #EDEBE6; /* alt rows */
|
|
|
|
--fw-fg: #1A1A18; /* near-black text */
|
|
--fw-fg-muted: #4A4A47;
|
|
--fw-fg-subtle: #6B6B68;
|
|
--fw-fg-faint: #908C84;
|
|
|
|
/* Primary (federal navy) + variants */
|
|
--fw-primary: #1C2B3A;
|
|
--fw-primary-hover: #253748;
|
|
--fw-primary-fg: #F7F5F0;
|
|
--fw-primary-tint: #EDF0F4;
|
|
--fw-primary-tint-2: #D4DCE6;
|
|
|
|
/* Accents */
|
|
--fw-accent: #2E3D8F; /* indigo */
|
|
--fw-accent-hover: #1F2D74;
|
|
--fw-success: #2E8B6E; /* teal-green */
|
|
--fw-warning: #C8A838; /* amber */
|
|
--fw-danger: #C0392B; /* fed red */
|
|
--fw-info: #4A5CB8;
|
|
|
|
/* Lines */
|
|
--fw-border: #D4D0C8;
|
|
--fw-border-strong: #B0ACA4;
|
|
--fw-border-subtle: #E8E4DC;
|
|
--fw-divider: rgba(26, 26, 24, 0.08);
|
|
|
|
/* Sidebar (always dark navy) */
|
|
--fw-sidebar-bg: #1C2B3A;
|
|
--fw-sidebar-bg-2: #253748;
|
|
--fw-sidebar-fg: #EEE9E0;
|
|
--fw-sidebar-fg-muted: #B8C5D0;
|
|
--fw-sidebar-border: #2E3D52;
|
|
--fw-sidebar-active: rgba(247, 245, 240, 0.10);
|
|
|
|
/* Charts (consistent with marimo theme) */
|
|
--fw-chart-1: #1C2B3A; /* navy */
|
|
--fw-chart-2: #2E8B6E; /* teal */
|
|
--fw-chart-3: #C8A838; /* amber */
|
|
--fw-chart-4: #C0392B; /* red */
|
|
--fw-chart-5: #6B7FD7; /* indigo light */
|
|
--fw-chart-6: #4A5CB8; /* indigo */
|
|
--fw-chart-7: #908C84; /* warm gray */
|
|
--fw-chart-8: #2E3D8F; /* deep indigo */
|
|
|
|
/* Type */
|
|
--fw-font-display: "Playfair Display", "Times New Roman", Georgia, serif;
|
|
--fw-font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
--fw-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
|
|
/* Shadows / elevation */
|
|
--fw-shadow-sm: 0 1px 2px rgba(28, 43, 58, 0.04), 0 1px 1px rgba(28, 43, 58, 0.03);
|
|
--fw-shadow-md: 0 2px 8px rgba(28, 43, 58, 0.06), 0 1px 3px rgba(28, 43, 58, 0.04);
|
|
--fw-shadow-lg: 0 8px 24px rgba(28, 43, 58, 0.10), 0 4px 8px rgba(28, 43, 58, 0.06);
|
|
|
|
/* Geometry */
|
|
--fw-radius-xs: 2px;
|
|
--fw-radius-sm: 3px;
|
|
--fw-radius-md: 4px;
|
|
--fw-radius-lg: 6px;
|
|
}
|
|
|
|
/* ============================================
|
|
2. GLOBAL — body, app shell, scrollbars
|
|
============================================ */
|
|
html, body, .grafana-app, [class*="app-grafana"] {
|
|
background-color: var(--fw-bg) !important;
|
|
color: var(--fw-fg) !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
font-feature-settings: "ss01", "kern", "liga";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
letter-spacing: 0.005em;
|
|
}
|
|
|
|
body {
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* Scrollbars — thin warm accents */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: var(--fw-bg-inset); }
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--fw-border);
|
|
border-radius: var(--fw-radius-sm);
|
|
border: 2px solid var(--fw-bg-inset);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: var(--fw-border-strong); }
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: rgba(28, 43, 58, 0.18);
|
|
color: var(--fw-fg);
|
|
}
|
|
|
|
/* Links */
|
|
a, a:visited {
|
|
color: var(--fw-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 120ms ease;
|
|
}
|
|
a:hover {
|
|
border-bottom-color: var(--fw-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
3. TYPOGRAPHY — Playfair for headings, Source Serif for body
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6,
|
|
[class*="page-title"], [class*="PageHeader"],
|
|
.dashboard-title, .panel-title,
|
|
[data-testid*="title"], [data-testid*="Title"],
|
|
.modal-header h2, .modal-header h3 {
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 600 !important;
|
|
color: var(--fw-fg) !important;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1, .dashboard-title, [class*="page-title"] h1 {
|
|
font-size: 28px !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
h2 { font-size: 22px !important; }
|
|
h3 { font-size: 18px !important; }
|
|
|
|
/* Panel titles — slightly smaller, all-small-caps for editorial feel */
|
|
.panel-title, [data-testid*="header-container"] h2,
|
|
[class*="panel-header"] h2, [class*="panel-header"] h6 {
|
|
font-size: 13px !important;
|
|
font-weight: 600 !important;
|
|
font-family: var(--fw-font-display) !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.06em !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
}
|
|
|
|
/* Code, queries, mono surfaces */
|
|
code, pre, .monaco-editor, .monaco-editor *,
|
|
.cm-editor, .cm-editor *, .ace_editor, .ace_editor *,
|
|
[class*="query-editor"] textarea, [class*="QueryEditor"] textarea,
|
|
[class*="logs-row__cell"], [class*="LogRowMessage"] {
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-feature-settings: "ss01", "ss02", "calt", "liga";
|
|
}
|
|
|
|
/* ============================================
|
|
4. SIDEBAR / MAIN NAV — dark navy, always
|
|
============================================ */
|
|
nav[aria-label="Main menu"],
|
|
[data-testid="data-testid Nav menu"],
|
|
[class*="sidemenu"], [class*="SideMenu"],
|
|
.scrollbar-view > div > nav,
|
|
ul[aria-label="Main menu"],
|
|
section[aria-label="Main menu"] {
|
|
background: var(--fw-sidebar-bg) !important;
|
|
border-right: 1px solid var(--fw-sidebar-border) !important;
|
|
color: var(--fw-sidebar-fg) !important;
|
|
}
|
|
|
|
nav[aria-label="Main menu"] *,
|
|
[data-testid="data-testid Nav menu"] *,
|
|
[class*="sidemenu"] *, [class*="SideMenu"] * {
|
|
color: var(--fw-sidebar-fg-muted) !important;
|
|
}
|
|
|
|
nav[aria-label="Main menu"] a:hover,
|
|
[data-testid="data-testid Nav menu"] a:hover,
|
|
nav[aria-label="Main menu"] [role="menuitem"]:hover,
|
|
nav[aria-label="Main menu"] li:hover {
|
|
background: var(--fw-sidebar-active) !important;
|
|
color: var(--fw-sidebar-fg) !important;
|
|
}
|
|
|
|
nav[aria-label="Main menu"] [aria-current="page"],
|
|
[data-testid="data-testid Nav menu"] [aria-current="page"],
|
|
nav[aria-label="Main menu"] .is-active,
|
|
nav[aria-label="Main menu"] a[class*="active"] {
|
|
background: var(--fw-sidebar-active) !important;
|
|
color: var(--fw-sidebar-fg) !important;
|
|
border-left: 2px solid var(--fw-warning) !important;
|
|
}
|
|
|
|
/* Sidebar logo / brand area */
|
|
[data-testid="data-testid Branding logo"],
|
|
[class*="Logo"], [class*="brand"] {
|
|
background: var(--fw-sidebar-bg-2) !important;
|
|
border-bottom: 1px solid var(--fw-sidebar-border) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
5. TOP BAR / BREADCRUMBS / TOOLBAR
|
|
============================================ */
|
|
header, [class*="page-toolbar"], [class*="PageToolbar"],
|
|
[data-testid*="toolbar"], [class*="topnav"], [class*="TopNav"] {
|
|
background: var(--fw-bg) !important;
|
|
border-bottom: 1px solid var(--fw-border) !important;
|
|
color: var(--fw-fg) !important;
|
|
box-shadow: var(--fw-shadow-sm) !important;
|
|
}
|
|
|
|
[class*="breadcrumbs"], [class*="Breadcrumbs"],
|
|
nav[aria-label="Breadcrumbs"] a,
|
|
nav[aria-label="Breadcrumbs"] span {
|
|
font-family: var(--fw-font-body) !important;
|
|
font-size: 13px !important;
|
|
color: var(--fw-fg-subtle) !important;
|
|
}
|
|
|
|
nav[aria-label="Breadcrumbs"] [aria-current="page"] {
|
|
color: var(--fw-fg) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
6. PANELS / DASHBOARD CARDS
|
|
============================================ */
|
|
.panel-container, [data-panelid], [class*="panel-container"],
|
|
[class*="PanelChrome"], [data-testid="data-testid panel content"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border: 1px solid var(--fw-border-subtle) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
box-shadow: var(--fw-shadow-sm) !important;
|
|
transition: box-shadow 180ms ease, border-color 180ms ease;
|
|
}
|
|
|
|
.panel-container:hover, [data-panelid]:hover {
|
|
border-color: var(--fw-border) !important;
|
|
box-shadow: var(--fw-shadow-md) !important;
|
|
}
|
|
|
|
.panel-content, [class*="panel-content"] {
|
|
background: transparent !important;
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
/* Stat panel — large number, editorial */
|
|
[class*="stat-panel"] [class*="value"],
|
|
[class*="big-value"], [class*="StatPanel"] [class*="value-text"] {
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.02em;
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
/* No-data placeholder */
|
|
[class*="no-data"], [class*="NoData"] {
|
|
font-family: var(--fw-font-display) !important;
|
|
font-style: italic;
|
|
color: var(--fw-fg-faint) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
7. BUTTONS — Federal Register editorial
|
|
============================================ */
|
|
.btn, button[type="button"], button[type="submit"],
|
|
[class*="Button"]:not([class*="IconButton"]) {
|
|
font-family: var(--fw-font-body) !important;
|
|
font-weight: 500 !important;
|
|
font-size: 13px !important;
|
|
letter-spacing: 0.01em !important;
|
|
border-radius: var(--fw-radius-sm) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
background: var(--fw-bg-elev-1) !important;
|
|
color: var(--fw-fg) !important;
|
|
padding: 6px 14px !important;
|
|
transition: background-color 120ms ease, border-color 120ms ease;
|
|
box-shadow: var(--fw-shadow-sm) !important;
|
|
}
|
|
|
|
.btn:hover, button[type="button"]:hover, button[type="submit"]:hover {
|
|
background: var(--fw-bg-elev-2) !important;
|
|
border-color: var(--fw-border-strong) !important;
|
|
}
|
|
|
|
.btn-primary, [class*="Button"][class*="primary"],
|
|
button[type="submit"]:not([class*="secondary"]):not([class*="destructive"]) {
|
|
background: var(--fw-primary) !important;
|
|
color: var(--fw-primary-fg) !important;
|
|
border-color: var(--fw-primary) !important;
|
|
}
|
|
.btn-primary:hover, [class*="Button"][class*="primary"]:hover {
|
|
background: var(--fw-primary-hover) !important;
|
|
border-color: var(--fw-primary-hover) !important;
|
|
}
|
|
|
|
.btn-danger, .btn-destructive, [class*="destructive"] {
|
|
background: var(--fw-danger) !important;
|
|
color: #FFF !important;
|
|
border-color: var(--fw-danger) !important;
|
|
}
|
|
|
|
/* Icon buttons — minimal */
|
|
[class*="IconButton"], button[aria-label][class*="icon"] {
|
|
background: transparent !important;
|
|
border: 1px solid transparent !important;
|
|
border-radius: var(--fw-radius-sm) !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
}
|
|
[class*="IconButton"]:hover, button[aria-label][class*="icon"]:hover {
|
|
background: var(--fw-bg-inset) !important;
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
8. INPUTS / FORMS / SELECTS
|
|
============================================ */
|
|
input, textarea, select,
|
|
.gf-form-input, [class*="Input"] input, [class*="TextArea"] textarea,
|
|
[role="textbox"], [role="combobox"], [role="searchbox"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
color: var(--fw-fg) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-sm) !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
font-size: 13px !important;
|
|
padding: 6px 10px !important;
|
|
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
input:focus, textarea:focus, select:focus,
|
|
[role="textbox"]:focus-visible, [role="combobox"]:focus-visible {
|
|
border-color: var(--fw-primary) !important;
|
|
box-shadow: 0 0 0 3px rgba(28, 43, 58, 0.10) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
input::placeholder, textarea::placeholder {
|
|
color: var(--fw-fg-faint) !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Search bars (Grafana puts these everywhere) */
|
|
[class*="search-input"], [data-testid*="search"] input {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
}
|
|
|
|
label, .gf-form-label, [class*="FieldLabel"] {
|
|
color: var(--fw-fg-muted) !important;
|
|
font-size: 12px !important;
|
|
font-weight: 500 !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* Checkboxes / radios */
|
|
input[type="checkbox"], input[type="radio"] {
|
|
accent-color: var(--fw-primary);
|
|
}
|
|
|
|
/* Switches */
|
|
[role="switch"], [class*="Switch"] {
|
|
--switch-on: var(--fw-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
9. DROPDOWNS / POPOVERS / MENUS
|
|
============================================ */
|
|
[role="listbox"], [role="menu"], [role="tooltip"],
|
|
[class*="Tooltip"], [class*="Menu"], [class*="Popover"],
|
|
[data-popper-placement] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
color: var(--fw-fg) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
box-shadow: var(--fw-shadow-lg) !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
}
|
|
|
|
[role="menuitem"], [role="option"] {
|
|
color: var(--fw-fg) !important;
|
|
padding: 6px 12px !important;
|
|
}
|
|
|
|
[role="menuitem"]:hover, [role="option"]:hover,
|
|
[role="menuitem"][aria-selected="true"], [role="option"][aria-selected="true"] {
|
|
background: var(--fw-bg-inset) !important;
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
[role="menuitem"][aria-current="true"], [role="option"][data-active="true"] {
|
|
background: var(--fw-primary-tint) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
10. TABLES — Federal Register data tables
|
|
============================================ */
|
|
table, [role="table"], .css-table {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
color: var(--fw-fg) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
border-collapse: separate !important;
|
|
border-spacing: 0 !important;
|
|
}
|
|
|
|
table th, [role="columnheader"] {
|
|
background: var(--fw-bg-inset) !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
font-family: var(--fw-font-display) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: 8px 12px !important;
|
|
border-bottom: 2px solid var(--fw-border) !important;
|
|
text-align: left;
|
|
}
|
|
|
|
table td, [role="cell"] {
|
|
padding: 8px 12px !important;
|
|
border-bottom: 1px solid var(--fw-border-subtle) !important;
|
|
font-size: 13px;
|
|
}
|
|
|
|
table tr:nth-child(even),
|
|
[role="row"]:nth-child(even) {
|
|
background: var(--fw-bg-stripe);
|
|
}
|
|
|
|
table tr:hover, [role="row"]:hover {
|
|
background: var(--fw-primary-tint) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
11. CHARTS / VISUALIZATIONS
|
|
============================================ */
|
|
/* uPlot/Plotly grid colors */
|
|
.u-grid, [class*="uplot"] .u-grid {
|
|
stroke: var(--fw-border-subtle) !important;
|
|
}
|
|
|
|
/* Axis labels / tick text */
|
|
.u-axis text, [class*="uplot"] text,
|
|
.gauge-axis text, .grafana-axis text {
|
|
fill: var(--fw-fg-subtle) !important;
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* Legend */
|
|
[class*="legend"], [class*="Legend"] {
|
|
font-family: var(--fw-font-body) !important;
|
|
font-size: 12px !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
}
|
|
|
|
[class*="legend-item"], [class*="LegendItem"] {
|
|
border-radius: var(--fw-radius-xs);
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
[class*="legend-item"]:hover {
|
|
background: var(--fw-bg-inset);
|
|
}
|
|
|
|
/* ============================================
|
|
12. ALERTS / NOTIFICATIONS / STATES
|
|
============================================ */
|
|
[class*="Alert"], .alert {
|
|
border-radius: var(--fw-radius-md) !important;
|
|
border-left-width: 3px !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
background: var(--fw-bg-elev-1) !important;
|
|
box-shadow: var(--fw-shadow-sm) !important;
|
|
}
|
|
|
|
[class*="Alert"][class*="error"], .alert-error {
|
|
background: #FEF5F4 !important;
|
|
border-color: var(--fw-danger) !important;
|
|
color: #4A0D09 !important;
|
|
}
|
|
|
|
[class*="Alert"][class*="warning"], .alert-warning {
|
|
background: #FEFBF0 !important;
|
|
border-color: var(--fw-warning) !important;
|
|
color: #2E1E00 !important;
|
|
}
|
|
|
|
[class*="Alert"][class*="success"], .alert-success {
|
|
background: #F2FAF7 !important;
|
|
border-color: var(--fw-success) !important;
|
|
color: #08261C !important;
|
|
}
|
|
|
|
[class*="Alert"][class*="info"], .alert-info {
|
|
background: var(--fw-primary-tint) !important;
|
|
border-color: var(--fw-primary) !important;
|
|
color: var(--fw-primary) !important;
|
|
}
|
|
|
|
/* Status badges */
|
|
[class*="Badge"] {
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-size: 11px !important;
|
|
font-weight: 500 !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 2px 8px !important;
|
|
border-radius: var(--fw-radius-sm) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
13. MODALS / DRAWERS
|
|
============================================ */
|
|
[role="dialog"], [class*="Modal"], [class*="Drawer"] {
|
|
background: var(--fw-bg) !important;
|
|
color: var(--fw-fg) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-lg) !important;
|
|
box-shadow: var(--fw-shadow-lg), 0 0 0 1px var(--fw-divider) !important;
|
|
}
|
|
|
|
[class*="ModalHeader"], [class*="DrawerHeader"],
|
|
[role="dialog"] header {
|
|
border-bottom: 1px solid var(--fw-border-subtle) !important;
|
|
padding: 16px 20px !important;
|
|
font-family: var(--fw-font-display) !important;
|
|
}
|
|
|
|
[class*="ModalContent"], [class*="DrawerContent"],
|
|
[role="dialog"] [class*="content"] {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
/* Backdrop */
|
|
[class*="Modal"][class*="backdrop"], [class*="Backdrop"] {
|
|
background: rgba(26, 26, 24, 0.45) !important;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* ============================================
|
|
14. LOGIN PAGE — editorial centered form
|
|
============================================ */
|
|
.login, [class*="LoginPage"], .login-page,
|
|
body:has(.login-form), body:has([class*="LoginForm"]) {
|
|
background: var(--fw-bg) !important;
|
|
}
|
|
|
|
.login-content, [class*="login-content"], [class*="LoginContent"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-lg) !important;
|
|
box-shadow: var(--fw-shadow-lg) !important;
|
|
padding: 48px 40px !important;
|
|
max-width: 440px !important;
|
|
}
|
|
|
|
.login-content h1, [class*="LoginContent"] h1,
|
|
.login h1 {
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 700 !important;
|
|
font-size: 32px !important;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.login-content::before, [class*="LoginContent"]::before {
|
|
content: "fhirworx";
|
|
display: block;
|
|
font-family: var(--fw-font-display);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
color: var(--fw-fg-faint);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* OAuth provider button (Sign in with Gitea) */
|
|
[class*="LoginPage"] [class*="oauth"], a[href*="generic_oauth"],
|
|
.login a[href*="oauth"] {
|
|
background: var(--fw-primary) !important;
|
|
color: var(--fw-primary-fg) !important;
|
|
border: 1px solid var(--fw-primary) !important;
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-size: 12px !important;
|
|
padding: 10px 16px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
15. DASHBOARD GRID + LAYOUT
|
|
============================================ */
|
|
[class*="dashboard-page"], [class*="DashboardPage"] {
|
|
background: var(--fw-bg) !important;
|
|
padding: 16px !important;
|
|
}
|
|
|
|
[class*="dashboard-row"], .dashboard-row {
|
|
background: transparent !important;
|
|
border-top: 1px solid var(--fw-border-subtle) !important;
|
|
padding-top: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
[class*="dashboard-row__title"], .dashboard-row__title {
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 700 !important;
|
|
font-size: 14px !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--fw-fg-muted) !important;
|
|
}
|
|
|
|
/* Variable picker */
|
|
[class*="variable-picker"], [class*="VariablePicker"] {
|
|
font-family: var(--fw-font-mono) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
16. EXPLORE / QUERY EDITOR
|
|
============================================ */
|
|
[class*="explore"], [class*="Explore"] {
|
|
background: var(--fw-bg) !important;
|
|
}
|
|
|
|
[class*="query-editor-row"], [data-testid*="query-editor"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border: 1px solid var(--fw-border-subtle) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
padding: 12px !important;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
[class*="query-editor-row"]:hover {
|
|
border-color: var(--fw-border) !important;
|
|
}
|
|
|
|
[class*="datasource-picker"] {
|
|
font-family: var(--fw-font-display) !important;
|
|
}
|
|
|
|
/* Logs panel */
|
|
[class*="logs-panel"], [class*="LogsPanel"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-size: 12px !important;
|
|
line-height: 1.6 !important;
|
|
}
|
|
|
|
[class*="logs-row"], [class*="LogRow"] {
|
|
border-bottom: 1px solid var(--fw-border-subtle) !important;
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
[class*="logs-row"]:hover, [class*="LogRow"]:hover {
|
|
background: var(--fw-bg-stripe) !important;
|
|
}
|
|
|
|
/* Log levels — color stripe on the left */
|
|
[class*="logs-row"][class*="logs-row-level-error"],
|
|
[data-testid*="log-row-error"] {
|
|
border-left: 3px solid var(--fw-danger) !important;
|
|
}
|
|
[class*="logs-row"][class*="logs-row-level-warn"],
|
|
[data-testid*="log-row-warning"] {
|
|
border-left: 3px solid var(--fw-warning) !important;
|
|
}
|
|
[class*="logs-row"][class*="logs-row-level-info"] {
|
|
border-left: 3px solid var(--fw-info) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
17. TABS
|
|
============================================ */
|
|
[role="tablist"] {
|
|
border-bottom: 1px solid var(--fw-border) !important;
|
|
gap: 4px;
|
|
}
|
|
|
|
[role="tab"] {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-bottom: 2px solid transparent !important;
|
|
border-radius: 0 !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
font-family: var(--fw-font-display) !important;
|
|
font-weight: 600 !important;
|
|
font-size: 13px !important;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
[role="tab"][aria-selected="true"] {
|
|
color: var(--fw-fg) !important;
|
|
border-bottom-color: var(--fw-primary) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
[role="tab"]:hover:not([aria-selected="true"]) {
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
18. SPINNERS / LOADING
|
|
============================================ */
|
|
[class*="spinner"], [class*="Spinner"], [class*="loading"] svg {
|
|
color: var(--fw-primary) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
19. KBD / KEYBOARD HINTS
|
|
============================================ */
|
|
kbd, [class*="kbd"], [class*="Kbd"] {
|
|
font-family: var(--fw-font-mono) !important;
|
|
background: var(--fw-bg-inset) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-xs) !important;
|
|
padding: 1px 5px !important;
|
|
font-size: 11px !important;
|
|
color: var(--fw-fg-muted) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
20. FOOTER / FOOTNOTES
|
|
============================================ */
|
|
footer, [class*="footer"], [class*="Footer"] {
|
|
background: transparent !important;
|
|
border-top: 1px solid var(--fw-border-subtle) !important;
|
|
color: var(--fw-fg-faint) !important;
|
|
font-family: var(--fw-font-body) !important;
|
|
font-size: 12px !important;
|
|
padding: 16px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
21. TIME PICKER
|
|
============================================ */
|
|
[class*="time-picker"], [data-testid*="time-picker"],
|
|
[class*="TimePicker"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-size: 12px !important;
|
|
color: var(--fw-fg) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
22. PROVISIONING / DATASOURCE LIST
|
|
============================================ */
|
|
[class*="ds-list"], [class*="DataSourceList"],
|
|
[data-testid*="data-source"] {
|
|
background: var(--fw-bg-elev-1) !important;
|
|
border: 1px solid var(--fw-border-subtle) !important;
|
|
border-radius: var(--fw-radius-md) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
23. EDITORIAL FLOURISHES
|
|
============================================ */
|
|
/* Section dividers — Federal Register horizontal rules */
|
|
hr, [class*="divider"]:not([class*="vertical"]) {
|
|
border: none !important;
|
|
border-top: 1px solid var(--fw-border) !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
/* Subtle drop-cap on first letter of stat panels */
|
|
[class*="big-value"] [class*="value-container"] > span:first-child::first-letter {
|
|
font-size: 1em; /* leave the actual numeric unstyled */
|
|
}
|
|
|
|
/* Pagination */
|
|
[class*="pagination"], [class*="Pagination"] {
|
|
font-family: var(--fw-font-mono) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* ============================================
|
|
24. DARK-THEME FALLBACK
|
|
If a user flips to dark, leave Grafana's compiled
|
|
dark theme alone — overlay-only on light. Use a
|
|
media-query escape hatch so dark works.
|
|
============================================ */
|
|
[data-theme="dark"], html[data-theme="dark"] body {
|
|
/* fall back to Grafana's own dark — our overlay variables
|
|
don't apply when the user opts into dark mode */
|
|
}
|