5aa043daea
Woodpecker CI is gone from the runtime; this purges the stale mentions in env/dev scripts, dashboards, homepages, CSS comments, and READMEs. Renames the SSO admin env var WOODPECKER_ADMIN to GITEA_ADMIN to match where the admin actually lives. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1075 lines
27 KiB
CSS
1075 lines
27 KiB
CSS
/* HTI-5 — Federal Register editorial design system
|
|
Universal injectable CSS.
|
|
Injected via Traefik rewrite-body plugin into:
|
|
Grafana, Traefik Dashboard, RustFS/MinIO, Jaeger, Prometheus, Trino
|
|
Palette matches: Gitea, Marimo, nginx dashboard themes */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
HTI-5 COLOR PALETTE
|
|
============================================ */
|
|
:root {
|
|
--background: #F7F5F0;
|
|
--foreground: #1A1A18;
|
|
--card: #FAFAF7;
|
|
--card-foreground: #1A1A18;
|
|
--primary: #1C2B3A;
|
|
--primary-foreground: #F7F5F0;
|
|
--secondary: #EDEBE6;
|
|
--secondary-foreground:#2D2D2B;
|
|
--muted: #EDEBE6;
|
|
--muted-foreground: #6B6B68;
|
|
--accent: #EDEBE6;
|
|
--accent-foreground: #1A1A18;
|
|
--destructive: #C0392B;
|
|
--destructive-foreground: #F7F5F0;
|
|
--border: #D4D0C8;
|
|
--input: #D4D0C8;
|
|
--ring: #1C2B3A;
|
|
|
|
--sidebar: #1C2B3A;
|
|
--sidebar-foreground: #B8C5D0;
|
|
--sidebar-accent: #253748;
|
|
--sidebar-accent-foreground: #EEE9E0;
|
|
--sidebar-border: #253748;
|
|
|
|
--chart-1: #6B7FD7;
|
|
--chart-2: #4A5CB8;
|
|
--chart-3: #2E3D8F;
|
|
--chart-4: #2E8B6E;
|
|
--chart-5: #C8702A;
|
|
|
|
--font-display: "Playfair Display", Georgia, serif;
|
|
--font-body: "Source Serif 4", Georgia, serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
}
|
|
|
|
/* ============================================
|
|
BASE STYLES
|
|
============================================ */
|
|
body, html {
|
|
font-family: var(--font-body) !important;
|
|
background: var(--background) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADINGS — Playfair Display editorial
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display) !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.3 !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
h1 { font-size: 18px !important; }
|
|
h2 { font-size: 15px !important; color: var(--primary) !important; }
|
|
h3 { font-size: 13px !important; }
|
|
h4, h5, h6 { font-size: 12px !important; }
|
|
|
|
/* ============================================
|
|
NAVIGATION / HEADER BARS
|
|
============================================ */
|
|
nav,
|
|
header,
|
|
[class*="navbar"],
|
|
[class*="header"],
|
|
[class*="toolbar"],
|
|
[class*="topbar"],
|
|
[class*="top-bar"],
|
|
[class*="app-bar"] {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
color: var(--sidebar-foreground) !important;
|
|
}
|
|
|
|
/* Nav links and items — serif body, not mono */
|
|
nav a,
|
|
nav li,
|
|
[class*="navbar"] a,
|
|
[class*="navbar"] li,
|
|
[class*="nav-item"],
|
|
[class*="NavItem"],
|
|
[class*="menu-item"],
|
|
[class*="MenuItem"] {
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR / NAVIGATION MENUS
|
|
============================================ */
|
|
aside,
|
|
[class*="sidebar"],
|
|
[class*="sidenav"],
|
|
[class*="side-nav"],
|
|
[class*="drawer"],
|
|
[class*="menu-panel"] {
|
|
background: var(--sidebar) !important;
|
|
border-right: 3px solid var(--foreground) !important;
|
|
color: var(--sidebar-foreground) !important;
|
|
}
|
|
|
|
/* Sidebar text — serif body */
|
|
aside a,
|
|
aside li,
|
|
[class*="sidebar"] a,
|
|
[class*="sidebar"] li,
|
|
[class*="sidenav"] a,
|
|
[class*="sidenav"] li {
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
TABLES
|
|
Body cells use serif body; headers are metadata labels (mono)
|
|
============================================ */
|
|
table {
|
|
border-collapse: collapse !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 10px !important;
|
|
padding: 10px 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.1em !important;
|
|
border: 1px solid var(--sidebar-accent) !important;
|
|
}
|
|
|
|
td {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--border) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: color-mix(in srgb, var(--primary) 8%, var(--background)) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS — serif body for labels
|
|
============================================ */
|
|
button,
|
|
[role="button"],
|
|
.btn,
|
|
[class*="button"] {
|
|
font-family: var(--font-body) !important;
|
|
font-weight: 500 !important;
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius, 0.2rem) !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
button:hover,
|
|
[role="button"]:hover,
|
|
.btn:hover,
|
|
[class*="button"]:hover {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
button:active,
|
|
[role="button"]:active {
|
|
transform: translate(1px, 1px) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Primary action buttons */
|
|
button[type="submit"],
|
|
[class*="primary"],
|
|
[class*="submit"] {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border: 1px solid var(--primary) !important;
|
|
}
|
|
|
|
button[type="submit"]:hover,
|
|
[class*="primary"]:hover {
|
|
background: var(--sidebar-accent) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
INPUTS AND FORMS
|
|
Search/query inputs stay mono (user is typing expressions);
|
|
regular text inputs get serif body.
|
|
============================================ */
|
|
input,
|
|
textarea,
|
|
select,
|
|
[class*="input"],
|
|
[contenteditable="true"] {
|
|
font-family: var(--font-body) !important;
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius, 0.2rem) !important;
|
|
}
|
|
|
|
/* Query/expression inputs — mono (PromQL, SQL, search expressions) */
|
|
[class*="query-input"],
|
|
[class*="QueryInput"],
|
|
[class*="expression-input"],
|
|
[class*="ExpressionInput"],
|
|
[class*="search-input"][class*="query"],
|
|
textarea[class*="query"],
|
|
textarea[class*="Query"],
|
|
input[placeholder*="PromQL" i],
|
|
input[placeholder*="query" i],
|
|
input[placeholder*="Query" i] {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--primary) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE BLOCKS — always mono
|
|
============================================ */
|
|
pre, code {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
code {
|
|
background: var(--secondary) !important;
|
|
color: var(--primary) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
pre {
|
|
background: var(--secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 4px !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LINKS
|
|
============================================ */
|
|
a {
|
|
color: var(--primary) !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.15s ease !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--foreground) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS / PANELS / CONTAINERS
|
|
============================================ */
|
|
[class*="card"],
|
|
[class*="panel"],
|
|
[class*="widget"],
|
|
[class*="Paper"],
|
|
[class*="container"]:not(body):not(html) {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
DROPDOWNS / MENUS / POPOVERS
|
|
============================================ */
|
|
[role="menu"],
|
|
[role="listbox"],
|
|
[class*="dropdown"],
|
|
[class*="popover"],
|
|
[class*="tooltip"],
|
|
[class*="Popover"],
|
|
[class*="Menu-list"],
|
|
[class*="MenuList"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
[role="menuitem"]:hover,
|
|
[role="option"]:hover,
|
|
[class*="MenuItem"]:hover {
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BADGES / PILLS / CHIPS / TAGS
|
|
Metadata labels — mono small caps is correct here
|
|
============================================ */
|
|
[class*="badge"],
|
|
[class*="chip"],
|
|
[class*="tag"],
|
|
[class*="label"],
|
|
[class*="pill"] {
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 11px !important;
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Status indicators */
|
|
[class*="success"],
|
|
[class*="healthy"],
|
|
[class*="running"],
|
|
[class*="active"],
|
|
[class*="ok"] {
|
|
color: var(--chart-4) !important;
|
|
}
|
|
|
|
[class*="error"],
|
|
[class*="danger"],
|
|
[class*="failed"],
|
|
[class*="critical"] {
|
|
color: var(--destructive) !important;
|
|
}
|
|
|
|
[class*="warning"],
|
|
[class*="pending"] {
|
|
color: var(--chart-5) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLLBARS
|
|
============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--muted-foreground);
|
|
}
|
|
|
|
/* ============================================
|
|
TEXT SELECTION
|
|
============================================ */
|
|
::selection {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
FOCUS STYLES
|
|
============================================ */
|
|
:focus-visible {
|
|
outline: 2px solid var(--primary) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
HIDE SERVICE LOGOS (universal)
|
|
============================================ */
|
|
[class*="logo"],
|
|
[class*="Logo"],
|
|
[class*="brand-logo"],
|
|
img[src*="logo"],
|
|
img[alt*="logo" i],
|
|
img[alt*="Logo" i] {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
GRAFANA-SPECIFIC
|
|
================================================================ */
|
|
|
|
/* Hide Grafana logo */
|
|
.grafana-app .preloader__logo,
|
|
.grafana-app [class*="Logo"],
|
|
.grafana-app img[src*="logo"],
|
|
.grafana-app [class*="branding"] img,
|
|
.grafana-app [class*="Branding"] img,
|
|
.grafana-app [class*="sidemenu"] img[class*="logo"],
|
|
.grafana-app [aria-label="Home"] img {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Main app background */
|
|
.grafana-app,
|
|
.main-view,
|
|
.scroll-canvas {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Top navbar */
|
|
.grafana-app .navbar,
|
|
.grafana-app nav,
|
|
.grafana-app [class*="NavBar"],
|
|
.grafana-app [class*="Topbar"],
|
|
.grafana-app [aria-label="Main menu"] {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
}
|
|
|
|
/* Sidenav */
|
|
.grafana-app [class*="sidemenu"],
|
|
.grafana-app [class*="NavBar"][class*="wrapper"] {
|
|
background: var(--sidebar) !important;
|
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
}
|
|
|
|
/* Dashboard container */
|
|
.grafana-app .dashboard-container,
|
|
.grafana-app [class*="DashboardPage"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Panels */
|
|
.grafana-app .panel-container,
|
|
.grafana-app [class*="panel-content"],
|
|
.grafana-app [class*="PanelChrome"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Panel headers — Playfair display for panel titles */
|
|
.grafana-app .panel-title,
|
|
.grafana-app [class*="panel-header"],
|
|
.grafana-app [class*="PanelHeader"] {
|
|
background: var(--secondary) !important;
|
|
font-family: var(--font-display) !important;
|
|
font-size: 13px !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
/* Explore page */
|
|
.grafana-app [class*="explore"],
|
|
.grafana-app [class*="Explore"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Grafana query editor — mono for PromQL/LogQL expressions */
|
|
.grafana-app [class*="query-editor"],
|
|
.grafana-app [class*="QueryEditor"],
|
|
.grafana-app [class*="prom-query"],
|
|
.grafana-app [class*="PromQueryField"],
|
|
.grafana-app [class*="loki-query"],
|
|
.grafana-app textarea {
|
|
font-family: var(--font-mono) !important;
|
|
background: var(--secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Alert list */
|
|
.grafana-app [class*="AlertList"],
|
|
.grafana-app [class*="alert-rule"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Grafana page toolbar */
|
|
.grafana-app [class*="page-toolbar"],
|
|
.grafana-app [class*="PageToolbar"] {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
JAEGER-SPECIFIC
|
|
================================================================ */
|
|
|
|
/* Hide Jaeger logo */
|
|
[class*="TracePageHeader--titleRow"] img,
|
|
[class*="TopNav"] img,
|
|
[class*="TopNav"] svg[class*="logo"],
|
|
[class*="jaeger-logo"],
|
|
header img[alt*="Jaeger" i] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Header bar */
|
|
.jaeger-ui .TopNav,
|
|
.jaeger-ui [class*="TopNav"],
|
|
[class*="jaeger"] [class*="TopNav"],
|
|
[data-testid="TopNav"] {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
}
|
|
|
|
/* Trace page */
|
|
.TracePage,
|
|
[class*="TracePage"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Timeline viewer */
|
|
.TraceTimelineViewer,
|
|
[class*="TraceTimelineViewer"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Span bars */
|
|
[class*="SpanBar"] {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Search form */
|
|
.SearchForm,
|
|
[class*="SearchForm"],
|
|
[class*="search-form"] {
|
|
background: var(--secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
/* Trace result list */
|
|
[class*="ResultItem"],
|
|
[class*="result-item"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
[class*="ResultItem"]:hover,
|
|
[class*="result-item"]:hover {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
/* Span detail — trace/span IDs, timestamps, tag values → mono */
|
|
[class*="SpanDetail"],
|
|
[class*="AccordianKeyValues"] {
|
|
background: var(--secondary) !important;
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Trace IDs, span IDs — mono metadata */
|
|
[class*="traceId"],
|
|
[class*="spanId"],
|
|
[class*="trace-id"],
|
|
[class*="span-id"],
|
|
[class*="TraceId"],
|
|
[class*="SpanId"] {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Jaeger-specific selects */
|
|
.jaeger-ui select,
|
|
[class*="jaeger"] select {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
PROMETHEUS-SPECIFIC
|
|
================================================================ */
|
|
|
|
/* Hide Prometheus logo */
|
|
nav.navbar img,
|
|
nav.navbar svg,
|
|
.navbar-brand img,
|
|
.navbar-brand svg {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Main navbar */
|
|
.prometheus-app nav.navbar,
|
|
nav.navbar {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
}
|
|
|
|
/* Navbar brand — Playfair for the service title */
|
|
nav.navbar .navbar-brand {
|
|
font-family: var(--font-display) !important;
|
|
font-size: 13px !important;
|
|
color: var(--sidebar-foreground) !important;
|
|
}
|
|
|
|
/* Expression input — mono for PromQL */
|
|
.prometheus-app .expression-input,
|
|
[class*="expression-input"],
|
|
.cm-expression-input {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Graph container */
|
|
.graph-container,
|
|
[class*="graph-container"],
|
|
.panel {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Graph tab controls */
|
|
.graph-controls,
|
|
[class*="graph-controls"],
|
|
.nav-tabs {
|
|
background: var(--secondary) !important;
|
|
border-bottom: 1px solid var(--border) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link,
|
|
.nav-tabs a {
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active,
|
|
.nav-tabs .active a {
|
|
color: var(--foreground) !important;
|
|
border-bottom: 3px solid var(--primary) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Alert/Rule manager */
|
|
.rules-head,
|
|
[class*="rules"] th {
|
|
background: var(--primary) !important;
|
|
}
|
|
|
|
/* Prometheus targets page — section headers in Playfair */
|
|
.target-head,
|
|
[class*="scrape-pool"] h2 {
|
|
font-family: var(--font-display) !important;
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge-success,
|
|
.label-success {
|
|
background: var(--chart-4) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.badge-danger,
|
|
.label-danger {
|
|
background: var(--destructive) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.badge-warning,
|
|
.label-warning {
|
|
background: var(--chart-5) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
TRAEFIK DASHBOARD-SPECIFIC
|
|
================================================================ */
|
|
|
|
/* Hide Traefik logo */
|
|
#app img[src*="logo"],
|
|
#app img[alt*="Traefik" i],
|
|
#app [class*="logo"] img,
|
|
#app [class*="logo"] svg,
|
|
#app [class*="brand"] img {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Vue app root */
|
|
#app {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Traefik top nav */
|
|
#app nav,
|
|
#app [class*="nav-bar"],
|
|
#app .navbar {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
}
|
|
|
|
/* Sidebar */
|
|
#app [class*="sidebar"],
|
|
#app [class*="side-menu"],
|
|
#app aside {
|
|
background: var(--sidebar) !important;
|
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
}
|
|
|
|
/* Sidebar menu items — serif body */
|
|
#app [class*="sidebar"] a,
|
|
#app [class*="side-menu"] a {
|
|
color: var(--sidebar-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
border-left: 3px solid transparent !important;
|
|
}
|
|
|
|
#app [class*="sidebar"] a:hover,
|
|
#app [class*="side-menu"] a:hover,
|
|
#app [class*="sidebar"] a.active,
|
|
#app [class*="side-menu"] a.active {
|
|
color: var(--sidebar-accent-foreground) !important;
|
|
background: var(--sidebar-accent) !important;
|
|
border-left-color: var(--sidebar-primary, #5B8FA8) !important;
|
|
}
|
|
|
|
/* Main content area */
|
|
#app main,
|
|
#app [class*="main-content"],
|
|
#app [class*="page-body"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Status indicators */
|
|
#app [class*="status"][class*="positive"],
|
|
#app [class*="status"][class*="success"],
|
|
#app [class*="pill"][class*="green"],
|
|
#app [class*="positive"] {
|
|
background: var(--chart-4) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
#app [class*="status"][class*="negative"],
|
|
#app [class*="status"][class*="error"],
|
|
#app [class*="pill"][class*="red"],
|
|
#app [class*="negative"] {
|
|
background: var(--destructive) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
#app [class*="status"][class*="warning"],
|
|
#app [class*="pill"][class*="orange"] {
|
|
background: var(--chart-5) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* Traefik table rows */
|
|
#app table tr:hover td {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
/* Service detail panels */
|
|
#app [class*="detail"],
|
|
#app [class*="panel-block"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Route/service names — mono for identifiers */
|
|
#app [class*="route-name"],
|
|
#app [class*="service-name"],
|
|
#app [class*="router-name"],
|
|
#app [class*="middleware-name"] {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
RUSTFS / MINIO CONSOLE-SPECIFIC (Material UI)
|
|
================================================================ */
|
|
|
|
/* Hide MinIO/RustFS logo */
|
|
#root img[src*="logo"],
|
|
#root img[alt*="MinIO" i],
|
|
#root img[alt*="RustFS" i],
|
|
#root [class*="logo"] img,
|
|
#root [class*="logo"] svg,
|
|
#root [class*="Logo"] img,
|
|
#root [class*="Logo"] svg {
|
|
display: none !important;
|
|
}
|
|
|
|
/* MUI root */
|
|
#root {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* App bar */
|
|
#root .MuiAppBar-root,
|
|
#root [class*="MuiAppBar"] {
|
|
background: var(--sidebar) !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* MUI Drawer / Sidebar */
|
|
#root .MuiDrawer-root,
|
|
#root .MuiDrawer-paper,
|
|
#root [class*="MuiDrawer"] {
|
|
background: var(--sidebar) !important;
|
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
}
|
|
|
|
/* Drawer list items — serif body for nav labels */
|
|
#root .MuiListItem-root,
|
|
#root .MuiListItemButton-root,
|
|
#root [class*="MuiListItem"] {
|
|
color: var(--sidebar-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
#root .MuiListItem-root:hover,
|
|
#root .MuiListItemButton-root:hover,
|
|
#root [class*="MuiListItem"]:hover {
|
|
background: var(--sidebar-accent) !important;
|
|
color: var(--sidebar-accent-foreground) !important;
|
|
}
|
|
|
|
#root .Mui-selected,
|
|
#root [class*="Mui-selected"] {
|
|
background: var(--sidebar-accent) !important;
|
|
color: var(--sidebar-accent-foreground) !important;
|
|
}
|
|
|
|
/* MUI Paper */
|
|
#root .MuiPaper-root,
|
|
#root [class*="MuiPaper"] {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* MUI Buttons — serif body for button labels */
|
|
#root .MuiButton-root,
|
|
#root [class*="MuiButton"] {
|
|
font-family: var(--font-body) !important;
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius, 0.2rem) !important;
|
|
text-transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#root .MuiButton-root:hover,
|
|
#root [class*="MuiButton"]:hover {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-color: var(--primary) !important;
|
|
}
|
|
|
|
#root .MuiButton-containedPrimary,
|
|
#root [class*="MuiButton-containedPrimary"] {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border: 1px solid var(--primary) !important;
|
|
}
|
|
|
|
#root .MuiButton-containedPrimary:hover {
|
|
background: var(--sidebar-accent) !important;
|
|
}
|
|
|
|
/* MUI Table — body cells serif, headers mono */
|
|
#root .MuiTableCell-root,
|
|
#root [class*="MuiTableCell"] {
|
|
border-color: var(--border) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
#root .MuiTableCell-head,
|
|
#root [class*="MuiTableCell-head"] {
|
|
background: var(--primary) !important;
|
|
color: var(--primary-foreground) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 10px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.1em !important;
|
|
}
|
|
|
|
/* Object/bucket names — mono for identifiers */
|
|
#root [class*="bucket-name"],
|
|
#root [class*="object-name"],
|
|
#root [class*="file-name"],
|
|
#root [class*="BucketName"],
|
|
#root [class*="ObjectName"] {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
#root .MuiTableRow-root:hover,
|
|
#root [class*="MuiTableRow"]:hover {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
/* MUI Inputs */
|
|
#root .MuiInputBase-root,
|
|
#root .MuiOutlinedInput-root,
|
|
#root [class*="MuiInputBase"],
|
|
#root [class*="MuiOutlinedInput"] {
|
|
background: var(--card) !important;
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
#root .MuiOutlinedInput-notchedOutline,
|
|
#root [class*="notchedOutline"] {
|
|
border-color: var(--border) !important;
|
|
}
|
|
|
|
#root .MuiInputLabel-root,
|
|
#root [class*="MuiInputLabel"] {
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* MUI Dialogs */
|
|
#root .MuiDialog-paper,
|
|
#root [class*="MuiDialog-paper"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* MUI Tabs — serif for tab labels */
|
|
#root .MuiTab-root,
|
|
#root [class*="MuiTab"] {
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
#root .MuiTab-root.Mui-selected,
|
|
#root [class*="MuiTab"][class*="Mui-selected"] {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
#root .MuiTabs-indicator,
|
|
#root [class*="MuiTabs-indicator"] {
|
|
background: var(--primary) !important;
|
|
}
|
|
|
|
/* MUI Breadcrumbs */
|
|
#root .MuiBreadcrumbs-root,
|
|
#root [class*="MuiBreadcrumbs"] {
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-body) !important;
|
|
}
|
|
|
|
/* MUI Chips — mono for metadata labels */
|
|
#root .MuiChip-root,
|
|
#root [class*="MuiChip"] {
|
|
background: var(--secondary) !important;
|
|
color: var(--foreground) !important;
|
|
border: 1px solid var(--border) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
/* MUI Icons */
|
|
#root .MuiSvgIcon-root,
|
|
#root [class*="MuiSvgIcon"],
|
|
#root svg {
|
|
color: var(--muted-foreground) !important;
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
TRINO-SPECIFIC
|
|
================================================================ */
|
|
|
|
/* Trino has a simple UI - mostly tables and headers */
|
|
body > h2,
|
|
body > h3 {
|
|
font-family: var(--font-display) !important;
|
|
color: var(--foreground) !important;
|
|
padding: 10px 0 !important;
|
|
border-bottom: 3px solid var(--foreground) !important;
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
/* Trino status page tables */
|
|
body > table {
|
|
width: 100% !important;
|
|
margin: 15px 0 !important;
|
|
}
|
|
|
|
/* Trino worker status */
|
|
[class*="query-list"],
|
|
[class*="query-detail"] {
|
|
background: var(--card) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Trino query IDs — mono for identifiers */
|
|
[class*="query-id"],
|
|
[class*="queryId"],
|
|
[class*="worker-id"],
|
|
[class*="workerId"] {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Progress bars used by various services */
|
|
progress,
|
|
[role="progressbar"],
|
|
[class*="progress-bar"],
|
|
[class*="ProgressBar"] {
|
|
background: var(--secondary) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
background: var(--secondary) !important;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background: var(--primary) !important;
|
|
}
|
|
|
|
/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
|
|
|
|
/* Focus indicators (2.4.7, 2.4.11) */
|
|
:focus-visible {
|
|
outline: 2px solid var(--primary) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Reduced motion (2.3.3) */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Minimum target size (2.5.8) */
|
|
button, [role="button"], a, input, select, textarea {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
}
|