8bd649d9ab
P23 — Skinny Packages: - Break conf→bib circular dependency with lazy guarded import - Extract aco.table.base → conf.table_base (shared foundation) - Add try/except ImportError guards on all cross-module imports - Define per-module optional-dependencies in pyproject.toml - Slim base deps to just pydantic; all heavy deps in optional groups - Add gen_config.py --check validation for module/dep sync - Add skinny-install CI matrix job (tests each extra in isolation) P24 — Tree Reorganization: - Move service configs to infra/ (traefik, coredns, grafana, etc.) - Consolidate Dockerfiles under infra/images/ - Move styles/ → assets/css/ + assets/icons/ + assets/nature.py - Update compose.yml, stack.toml, gen_config.py, all backend emitters - Update bootstrap scripts and install_certs.sh P25 — Cloud Provider Abstraction: - Add cloud/ directory with self-hosted, aws, gcp, azure stubs - Add cloud contexts (aws, gcp, azure) to stack.toml - Add conf/storage.py — get_filesystem() dispatches per context - Add aws, gcp, azure optional dependency groups - Document service mapping for each provider All 11955 tests pass. Zero functionality lost.
976 lines
23 KiB
CSS
976 lines
23 KiB
CSS
/* LOCH — deep-navy design system
|
|
Universal injectable CSS.
|
|
Injected via Traefik rewrite-body plugin into:
|
|
Grafana, Traefik Dashboard, RustFS/MinIO, Jaeger, Prometheus, Trino
|
|
Palette matches: Gitea, Woodpecker, Marimo, nginx dashboard themes */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============================================
|
|
LOCH COLOR PALETTE
|
|
============================================ */
|
|
:root {
|
|
--ds-navy: #0a1628;
|
|
--ds-navy-light: #162040;
|
|
--ds-navy-mid: #1e2d50;
|
|
--ds-slate: #2a3f5f;
|
|
--ds-steel: #7a90b0;
|
|
--ds-white: #f0f0f0;
|
|
|
|
--ds-blue: #4488dd;
|
|
--ds-blue-light: #5588dd;
|
|
--ds-blue-bright: #88aaee;
|
|
|
|
--ds-red: #ee5577;
|
|
--ds-red-light: #dd4466;
|
|
|
|
--ds-green: #44aa44;
|
|
--ds-green-light: #66cc66;
|
|
--ds-yellow: #ddaa33;
|
|
}
|
|
|
|
/* ============================================
|
|
BASE STYLES
|
|
============================================ */
|
|
body, html {
|
|
font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
|
|
background: var(--ds-navy) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
HEADINGS
|
|
============================================ */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
line-height: 1.8 !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 16px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
h2 {
|
|
font-size: 13px !important;
|
|
color: var(--ds-blue-bright) !important;
|
|
}
|
|
h3 {
|
|
font-size: 11px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
h4, h5, h6 {
|
|
font-size: 10px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
NAVIGATION / HEADER BARS
|
|
============================================ */
|
|
nav,
|
|
header,
|
|
[class*="navbar"],
|
|
[class*="header"],
|
|
[class*="toolbar"],
|
|
[class*="topbar"],
|
|
[class*="top-bar"],
|
|
[class*="app-bar"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR / NAVIGATION MENUS
|
|
============================================ */
|
|
aside,
|
|
[class*="sidebar"],
|
|
[class*="sidenav"],
|
|
[class*="side-nav"],
|
|
[class*="drawer"],
|
|
[class*="menu-panel"] {
|
|
background: var(--ds-navy) !important;
|
|
border-right: 3px solid var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
TABLES (Table styling)
|
|
============================================ */
|
|
table {
|
|
border-collapse: collapse !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 9px !important;
|
|
padding: 10px 12px !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 1px !important;
|
|
border: 1px solid var(--ds-blue-light) !important;
|
|
}
|
|
|
|
td {
|
|
background: var(--ds-navy) !important;
|
|
color: var(--ds-white) !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--ds-navy-light) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: var(--ds-navy-light) !important;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
button,
|
|
[role="button"],
|
|
.btn,
|
|
[class*="button"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-weight: 500 !important;
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
button:hover,
|
|
[role="button"]:hover,
|
|
.btn:hover,
|
|
[class*="button"]:hover {
|
|
background: var(--ds-blue) !important;
|
|
border-color: var(--ds-blue-light) !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(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-blue-light) !important;
|
|
}
|
|
|
|
button[type="submit"]:hover,
|
|
[class*="primary"]:hover {
|
|
background: var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
INPUTS AND FORMS
|
|
============================================ */
|
|
input,
|
|
textarea,
|
|
select,
|
|
[class*="input"],
|
|
[contenteditable="true"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--ds-blue-light) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CODE BLOCKS
|
|
============================================ */
|
|
pre, code {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
}
|
|
|
|
code {
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-blue-bright) !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
pre {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ============================================
|
|
LINKS
|
|
============================================ */
|
|
a {
|
|
color: var(--ds-blue-bright) !important;
|
|
text-decoration: none !important;
|
|
transition: color 0.15s ease !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--ds-white) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS / PANELS / CONTAINERS
|
|
============================================ */
|
|
[class*="card"],
|
|
[class*="panel"],
|
|
[class*="widget"],
|
|
[class*="Paper"],
|
|
[class*="container"]:not(body):not(html) {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
DROPDOWNS / MENUS / POPOVERS
|
|
============================================ */
|
|
[role="menu"],
|
|
[role="listbox"],
|
|
[class*="dropdown"],
|
|
[class*="popover"],
|
|
[class*="tooltip"],
|
|
[class*="Popover"],
|
|
[class*="Menu-list"],
|
|
[class*="MenuList"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
[role="menuitem"]:hover,
|
|
[role="option"]:hover,
|
|
[class*="MenuItem"]:hover {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
BADGES / PILLS / CHIPS / TAGS
|
|
============================================ */
|
|
[class*="badge"],
|
|
[class*="chip"],
|
|
[class*="tag"],
|
|
[class*="label"],
|
|
[class*="pill"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 11px !important;
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 1px solid var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* Status indicators */
|
|
[class*="success"],
|
|
[class*="healthy"],
|
|
[class*="running"],
|
|
[class*="active"],
|
|
[class*="ok"] {
|
|
color: var(--ds-green-light) !important;
|
|
}
|
|
|
|
[class*="error"],
|
|
[class*="danger"],
|
|
[class*="failed"],
|
|
[class*="critical"] {
|
|
color: var(--ds-red) !important;
|
|
}
|
|
|
|
[class*="warning"],
|
|
[class*="pending"] {
|
|
color: var(--ds-yellow) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
SCROLLBARS
|
|
============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--ds-navy-light);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--ds-slate);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--ds-navy-light);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--ds-steel);
|
|
}
|
|
|
|
/* ============================================
|
|
TEXT SELECTION
|
|
============================================ */
|
|
::selection {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* ============================================
|
|
FOCUS STYLES
|
|
============================================ */
|
|
:focus-visible {
|
|
outline: 2px solid var(--ds-blue-light) !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(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Sidenav */
|
|
.grafana-app [class*="sidemenu"],
|
|
.grafana-app [class*="NavBar"][class*="wrapper"] {
|
|
background: var(--ds-navy) !important;
|
|
border-right: 3px solid var(--ds-slate) !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(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Panel headers */
|
|
.grafana-app .panel-title,
|
|
.grafana-app [class*="panel-header"],
|
|
.grafana-app [class*="PanelHeader"] {
|
|
background: var(--ds-navy-light) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 9px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* Explore page */
|
|
.grafana-app [class*="explore"],
|
|
.grafana-app [class*="Explore"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Grafana query editor */
|
|
.grafana-app [class*="query-editor"],
|
|
.grafana-app [class*="QueryEditor"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Alert list */
|
|
.grafana-app [class*="AlertList"],
|
|
.grafana-app [class*="alert-rule"] {
|
|
background: var(--ds-navy) !important;
|
|
border: 1px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Grafana page toolbar */
|
|
.grafana-app [class*="page-toolbar"],
|
|
.grafana-app [class*="PageToolbar"] {
|
|
background: var(--ds-navy-light) !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(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Trace page */
|
|
.TracePage,
|
|
[class*="TracePage"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Timeline viewer */
|
|
.TraceTimelineViewer,
|
|
[class*="TraceTimelineViewer"] {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Span bars */
|
|
[class*="SpanBar"] {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Search form */
|
|
.SearchForm,
|
|
[class*="SearchForm"],
|
|
[class*="search-form"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
/* Trace result list */
|
|
[class*="ResultItem"],
|
|
[class*="result-item"] {
|
|
background: var(--ds-navy) !important;
|
|
border: 1px solid var(--ds-slate) !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
[class*="ResultItem"]:hover,
|
|
[class*="result-item"]:hover {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
/* Span detail */
|
|
[class*="SpanDetail"],
|
|
[class*="AccordianKeyValues"] {
|
|
background: var(--ds-navy-light) !important;
|
|
}
|
|
|
|
/* Jaeger-specific selects */
|
|
.jaeger-ui select,
|
|
[class*="jaeger"] select {
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !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(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
nav.navbar .navbar-brand {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 10px !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* Expression input */
|
|
.prometheus-app .expression-input,
|
|
[class*="expression-input"],
|
|
.cm-expression-input {
|
|
background: var(--ds-navy) !important;
|
|
border: 3px solid var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
}
|
|
|
|
/* Graph container */
|
|
.graph-container,
|
|
[class*="graph-container"],
|
|
.panel {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Graph tab controls */
|
|
.graph-controls,
|
|
[class*="graph-controls"],
|
|
.nav-tabs {
|
|
background: var(--ds-navy-light) !important;
|
|
border-bottom: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link,
|
|
.nav-tabs a {
|
|
color: var(--ds-steel) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active,
|
|
.nav-tabs .active a {
|
|
color: var(--ds-white) !important;
|
|
border-bottom: 3px solid var(--ds-blue) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Alert/Rule manager */
|
|
.rules-head,
|
|
[class*="rules"] th {
|
|
background: var(--ds-blue) !important;
|
|
}
|
|
|
|
/* Prometheus targets page */
|
|
.target-head,
|
|
[class*="scrape-pool"] h2 {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge-success,
|
|
.label-success {
|
|
background: var(--ds-green) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
.badge-danger,
|
|
.label-danger {
|
|
background: var(--ds-red) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
.badge-warning,
|
|
.label-warning {
|
|
background: var(--ds-yellow) !important;
|
|
color: var(--ds-navy) !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(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Sidebar */
|
|
#app [class*="sidebar"],
|
|
#app [class*="side-menu"],
|
|
#app aside {
|
|
background: var(--ds-navy) !important;
|
|
border-right: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Sidebar menu items */
|
|
#app [class*="sidebar"] a,
|
|
#app [class*="side-menu"] a {
|
|
color: var(--ds-steel) !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(--ds-white) !important;
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
border-left-color: var(--ds-blue) !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(--ds-green) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
#app [class*="status"][class*="negative"],
|
|
#app [class*="status"][class*="error"],
|
|
#app [class*="pill"][class*="red"],
|
|
#app [class*="negative"] {
|
|
background: var(--ds-red) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
#app [class*="status"][class*="warning"],
|
|
#app [class*="pill"][class*="orange"] {
|
|
background: var(--ds-yellow) !important;
|
|
color: var(--ds-navy) !important;
|
|
}
|
|
|
|
/* Traefik table rows */
|
|
#app table tr:hover td {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
/* Service detail panels */
|
|
#app [class*="detail"],
|
|
#app [class*="panel-block"] {
|
|
background: var(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !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(--ds-navy-light) !important;
|
|
border-bottom: 3px solid var(--ds-slate) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* MUI Drawer / Sidebar */
|
|
#root .MuiDrawer-root,
|
|
#root .MuiDrawer-paper,
|
|
#root [class*="MuiDrawer"] {
|
|
background: var(--ds-navy) !important;
|
|
border-right: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Drawer list items */
|
|
#root .MuiListItem-root,
|
|
#root .MuiListItemButton-root,
|
|
#root [class*="MuiListItem"] {
|
|
color: var(--ds-steel) !important;
|
|
}
|
|
|
|
#root .MuiListItem-root:hover,
|
|
#root .MuiListItemButton-root:hover,
|
|
#root [class*="MuiListItem"]:hover {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
#root .Mui-selected,
|
|
#root [class*="Mui-selected"] {
|
|
background: rgba(51, 102, 204, 0.3) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
/* MUI Paper */
|
|
#root .MuiPaper-root,
|
|
#root [class*="MuiPaper"] {
|
|
background: var(--ds-navy) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* MUI Buttons */
|
|
#root .MuiButton-root,
|
|
#root [class*="MuiButton"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: var(--ds-navy-light) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
border-radius: 4px !important;
|
|
text-transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#root .MuiButton-root:hover,
|
|
#root [class*="MuiButton"]:hover {
|
|
background: var(--ds-blue) !important;
|
|
border-color: var(--ds-blue-light) !important;
|
|
}
|
|
|
|
#root .MuiButton-containedPrimary,
|
|
#root [class*="MuiButton-containedPrimary"] {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 2px solid var(--ds-blue-light) !important;
|
|
}
|
|
|
|
#root .MuiButton-containedPrimary:hover {
|
|
background: var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* MUI Table */
|
|
#root .MuiTableCell-root,
|
|
#root [class*="MuiTableCell"] {
|
|
border-color: var(--ds-slate) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
}
|
|
|
|
#root .MuiTableCell-head,
|
|
#root [class*="MuiTableCell-head"] {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 9px !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
#root .MuiTableRow-root:hover,
|
|
#root [class*="MuiTableRow"]:hover {
|
|
background: rgba(51, 102, 204, 0.2) !important;
|
|
}
|
|
|
|
/* MUI Inputs */
|
|
#root .MuiInputBase-root,
|
|
#root .MuiOutlinedInput-root,
|
|
#root [class*="MuiInputBase"],
|
|
#root [class*="MuiOutlinedInput"] {
|
|
background: var(--ds-navy-mid) !important;
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
#root .MuiOutlinedInput-notchedOutline,
|
|
#root [class*="notchedOutline"] {
|
|
border-color: var(--ds-slate) !important;
|
|
}
|
|
|
|
#root .MuiInputLabel-root,
|
|
#root [class*="MuiInputLabel"] {
|
|
color: var(--ds-steel) !important;
|
|
}
|
|
|
|
/* MUI Dialogs */
|
|
#root .MuiDialog-paper,
|
|
#root [class*="MuiDialog-paper"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 3px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* MUI Tabs */
|
|
#root .MuiTab-root,
|
|
#root [class*="MuiTab"] {
|
|
color: var(--ds-steel) !important;
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
#root .MuiTab-root.Mui-selected,
|
|
#root [class*="MuiTab"][class*="Mui-selected"] {
|
|
color: var(--ds-white) !important;
|
|
}
|
|
|
|
#root .MuiTabs-indicator,
|
|
#root [class*="MuiTabs-indicator"] {
|
|
background: var(--ds-blue) !important;
|
|
}
|
|
|
|
/* MUI Breadcrumbs */
|
|
#root .MuiBreadcrumbs-root,
|
|
#root [class*="MuiBreadcrumbs"] {
|
|
color: var(--ds-steel) !important;
|
|
}
|
|
|
|
/* MUI Chips */
|
|
#root .MuiChip-root,
|
|
#root [class*="MuiChip"] {
|
|
background: var(--ds-blue) !important;
|
|
color: var(--ds-white) !important;
|
|
border: 1px solid var(--ds-blue-light) !important;
|
|
}
|
|
|
|
/* MUI Icons */
|
|
#root .MuiSvgIcon-root,
|
|
#root [class*="MuiSvgIcon"],
|
|
#root svg {
|
|
color: var(--ds-steel) !important;
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
|
|
/* ================================================================
|
|
TRINO-SPECIFIC
|
|
============================================ */
|
|
|
|
/* Trino has a simple UI - mostly tables and headers */
|
|
body > h2,
|
|
body > h3 {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
color: var(--ds-white) !important;
|
|
padding: 10px 0 !important;
|
|
border-bottom: 3px solid var(--ds-slate) !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(--ds-navy) !important;
|
|
border: 2px solid var(--ds-slate) !important;
|
|
}
|
|
|
|
/* Progress bars used by various services */
|
|
progress,
|
|
[role="progressbar"],
|
|
[class*="progress-bar"],
|
|
[class*="ProgressBar"] {
|
|
background: var(--ds-navy-light) !important;
|
|
border: 1px solid var(--ds-slate) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
background: var(--ds-navy-light) !important;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background: var(--ds-blue) !important;
|
|
}
|
|
|
|
/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
|
|
|
|
/* Focus indicators (2.4.7, 2.4.11) */
|
|
:focus-visible {
|
|
outline: 2px solid #4488dd !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;
|
|
}
|