aboutsummaryrefslogtreecommitdiff
path: root/src/zenserver/frontend/html/zen.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/zenserver/frontend/html/zen.css')
-rw-r--r--src/zenserver/frontend/html/zen.css824
1 files changed, 700 insertions, 124 deletions
diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index cc53c0519..a968aecab 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -2,66 +2,202 @@
/* theme -------------------------------------------------------------------- */
+/* system preference (default) */
@media (prefers-color-scheme: light) {
:root {
- --theme_g0: #000;
- --theme_g4: #fff;
- --theme_g1: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 45%);
- --theme_g2: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 80%);
- --theme_g3: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 96%);
-
- --theme_p0: #069;
- --theme_p4: hsl(210deg 40% 94%);
+ --theme_g0: #1f2328;
+ --theme_g1: #656d76;
+ --theme_g2: #d0d7de;
+ --theme_g3: #f6f8fa;
+ --theme_g4: #ffffff;
+
+ --theme_p0: #0969da;
+ --theme_p4: #ddf4ff;
--theme_p1: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
--theme_p2: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
--theme_p3: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
--theme_ln: var(--theme_p0);
- --theme_er: #fcc;
+ --theme_er: #ffebe9;
+
+ --theme_ok: #1a7f37;
+ --theme_warn: #9a6700;
+ --theme_fail: #cf222e;
+
+ --theme_bright: #1f2328;
+ --theme_faint: #6e7781;
+ --theme_border_subtle: #d8dee4;
}
}
@media (prefers-color-scheme: dark) {
:root {
- --theme_g0: #ddd;
- --theme_g4: #222;
- --theme_g1: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 35%);
- --theme_g2: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 65%);
- --theme_g3: color-mix(in oklab, var(--theme_g0), var(--theme_g4) 88%);
-
- --theme_p0: #479;
- --theme_p4: #333;
+ --theme_g0: #c9d1d9;
+ --theme_g1: #8b949e;
+ --theme_g2: #30363d;
+ --theme_g3: #161b22;
+ --theme_g4: #0d1117;
+
+ --theme_p0: #58a6ff;
+ --theme_p4: #1c2128;
--theme_p1: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
--theme_p2: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
--theme_p3: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
- --theme_ln: #feb;
- --theme_er: #622;
+ --theme_ln: #58a6ff;
+ --theme_er: #1c1c1c;
+
+ --theme_ok: #3fb950;
+ --theme_warn: #d29922;
+ --theme_fail: #f85149;
+
+ --theme_bright: #f0f6fc;
+ --theme_faint: #6e7681;
+ --theme_border_subtle: #21262d;
}
}
+/* manual overrides (higher specificity than media queries) */
+:root[data-theme="light"] {
+ --theme_g0: #1f2328;
+ --theme_g1: #656d76;
+ --theme_g2: #d0d7de;
+ --theme_g3: #f6f8fa;
+ --theme_g4: #ffffff;
+
+ --theme_p0: #0969da;
+ --theme_p4: #ddf4ff;
+ --theme_p1: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+ --theme_p2: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+ --theme_p3: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+ --theme_ln: var(--theme_p0);
+ --theme_er: #ffebe9;
+
+ --theme_ok: #1a7f37;
+ --theme_warn: #9a6700;
+ --theme_fail: #cf222e;
+
+ --theme_bright: #1f2328;
+ --theme_faint: #6e7781;
+ --theme_border_subtle: #d8dee4;
+}
+
+:root[data-theme="dark"] {
+ --theme_g0: #c9d1d9;
+ --theme_g1: #8b949e;
+ --theme_g2: #30363d;
+ --theme_g3: #161b22;
+ --theme_g4: #0d1117;
+
+ --theme_p0: #58a6ff;
+ --theme_p4: #1c2128;
+ --theme_p1: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+ --theme_p2: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+ --theme_p3: color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+ --theme_ln: #58a6ff;
+ --theme_er: #1c1c1c;
+
+ --theme_ok: #3fb950;
+ --theme_warn: #d29922;
+ --theme_fail: #f85149;
+
+ --theme_bright: #f0f6fc;
+ --theme_faint: #6e7681;
+ --theme_border_subtle: #21262d;
+}
+
+/* theme toggle ------------------------------------------------------------- */
+
+#zen_ws_toggle {
+ position: fixed;
+ top: 16px;
+ right: 60px;
+ z-index: 10;
+ width: 36px;
+ height: 36px;
+ border-radius: 6px;
+ border: 1px solid var(--theme_g2);
+ background: var(--theme_g3);
+ color: var(--theme_g1);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ line-height: 1;
+ transition: color 0.15s, background 0.15s, border-color 0.15s;
+ user-select: none;
+}
+
+#zen_ws_toggle:hover {
+ color: var(--theme_g0);
+ background: var(--theme_p4);
+ border-color: var(--theme_g1);
+}
+
+#zen_theme_toggle {
+ position: fixed;
+ top: 16px;
+ right: 16px;
+ z-index: 10;
+ width: 36px;
+ height: 36px;
+ border-radius: 6px;
+ border: 1px solid var(--theme_g2);
+ background: var(--theme_g3);
+ color: var(--theme_g1);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ line-height: 1;
+ transition: color 0.15s, background 0.15s, border-color 0.15s;
+ user-select: none;
+}
+
+#zen_theme_toggle:hover {
+ color: var(--theme_g0);
+ background: var(--theme_p4);
+ border-color: var(--theme_g1);
+}
+
/* page --------------------------------------------------------------------- */
-body, input {
- font-family: consolas, monospace;
- font-size: 11pt;
+body, input, button {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ font-size: 14px;
}
body {
overflow-y: scroll;
margin: 0;
+ padding: 20px;
background-color: var(--theme_g4);
color: var(--theme_g0);
}
-pre {
- margin: 0;
+pre, code {
+ font-family: 'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+ font-size: 13px;
+ margin: 0;
}
input {
color: var(--theme_g0);
background-color: var(--theme_g3);
border: 1px solid var(--theme_g2);
+ border-radius: 4px;
+ padding: 4px 8px;
+}
+
+button {
+ color: var(--theme_g0);
+ background: transparent;
+ border: none;
+ cursor: pointer;
}
* {
@@ -69,17 +205,44 @@ input {
}
#container {
- max-width: 130em;
- min-width: 80em;
+ max-width: 1400px;
margin: auto;
> div {
- margin: 0.0em 2.2em 0.0em 2.2em;
padding-top: 1.0em;
padding-bottom: 1.5em;
}
}
+/* service nav -------------------------------------------------------------- */
+
+#service_nav {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 16px;
+ padding: 4px;
+ background-color: var(--theme_g3);
+ border: 1px solid var(--theme_g2);
+ border-radius: 6px;
+
+ a {
+ padding: 6px 14px;
+ border-radius: 4px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--theme_g1);
+ text-decoration: none;
+ transition: color 0.15s, background 0.15s;
+ }
+
+ a:hover {
+ background-color: var(--theme_p4);
+ color: var(--theme_g0);
+ text-decoration: none;
+ }
+}
+
/* links -------------------------------------------------------------------- */
a {
@@ -103,28 +266,37 @@ a {
}
h1 {
- font-size: 1.5em;
+ font-size: 20px;
+ font-weight: 600;
width: 100%;
+ color: var(--theme_bright);
border-bottom: 1px solid var(--theme_g2);
+ padding-bottom: 0.4em;
+ margin-bottom: 16px;
}
h2 {
- font-size: 1.25em;
- margin-bottom: 0.5em;
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 12px;
}
h3 {
- font-size: 1.1em;
+ font-size: 14px;
+ font-weight: 600;
margin: 0em;
- padding: 0.4em;
- background-color: var(--theme_p4);
- border-left: 5px solid var(--theme_p2);
- font-weight: normal;
+ padding: 8px 12px;
+ background-color: var(--theme_g3);
+ border: 1px solid var(--theme_g2);
+ border-radius: 6px 6px 0 0;
+ color: var(--theme_g1);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
- margin-bottom: 3em;
+ margin-bottom: 2em;
> *:not(h1) {
- margin-left: 2em;
+ margin-left: 0;
}
}
@@ -134,23 +306,36 @@ a {
.zen_table {
display: grid;
border: 1px solid var(--theme_g2);
- border-left-style: none;
+ border-radius: 6px;
+ overflow: hidden;
margin-bottom: 1.2em;
+ font-size: 13px;
> div {
display: contents;
}
- > div:nth-of-type(odd) {
+ > div:nth-of-type(odd) > div {
+ background-color: var(--theme_g4);
+ }
+
+ > div:nth-of-type(even) > div {
background-color: var(--theme_g3);
}
> div:first-of-type {
- font-weight: bold;
- background-color: var(--theme_p3);
+ font-weight: 600;
+ > div {
+ background-color: var(--theme_g3);
+ color: var(--theme_g1);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-size: 11px;
+ border-bottom: 1px solid var(--theme_g2);
+ }
}
- > div:hover {
+ > div:not(:first-of-type):hover > div {
background-color: var(--theme_p4);
}
@@ -160,16 +345,37 @@ a {
}
> div > div {
- padding: 0.3em;
- padding-left: 0.75em;
- padding-right: 0.75em;
+ padding: 8px 12px;
align-content: center;
- border-left: 1px solid var(--theme_g2);
+ border-left: 1px solid var(--theme_border_subtle);
overflow: auto;
overflow-wrap: break-word;
- background-color: inherit;
white-space: pre-wrap;
}
+
+ > div > div:first-child {
+ border-left: none;
+ }
+}
+
+/* expandable cell ---------------------------------------------------------- */
+
+.zen_expand_icon {
+ cursor: pointer;
+ margin-right: 0.5em;
+ color: var(--theme_g1);
+ font-weight: bold;
+ user-select: none;
+}
+
+.zen_expand_icon:hover {
+ color: var(--theme_ln);
+}
+
+.zen_data_text {
+ user-select: text;
+ font-family: 'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+ font-size: 13px;
}
/* toolbar ------------------------------------------------------------------ */
@@ -178,6 +384,7 @@ a {
display: flex;
margin-top: 0.5em;
margin-bottom: 0.6em;
+ font-size: 13px;
> div {
display: flex;
@@ -225,15 +432,16 @@ a {
z-index: -1;
top: 0;
left: 0;
- width: 100%;
+ width: 100%;
height: 100%;
background: var(--theme_g0);
opacity: 0.4;
}
> div {
- border-radius: 0.5em;
- background-color: var(--theme_g4);
+ border-radius: 6px;
+ background-color: var(--theme_g3);
+ border: 1px solid var(--theme_g2);
opacity: 1.0;
width: 35em;
padding: 0em 2em 2em 2em;
@@ -244,10 +452,11 @@ a {
}
.zen_modal_title {
- font-size: 1.2em;
+ font-size: 16px;
+ font-weight: 600;
border-bottom: 1px solid var(--theme_g2);
padding: 1.2em 0em 0.5em 0em;
- color: var(--theme_g1);
+ color: var(--theme_bright);
}
.zen_modal_buttons {
@@ -257,16 +466,19 @@ a {
> div {
margin: 0em 1em 0em 1em;
- padding: 1em;
+ padding: 10px 16px;
align-content: center;
- border-radius: 0.3em;
- background-color: var(--theme_p3);
+ border-radius: 6px;
+ background-color: var(--theme_p4);
+ border: 1px solid var(--theme_g2);
width: 6em;
cursor: pointer;
+ font-weight: 500;
+ transition: background 0.15s;
}
> div:hover {
- background-color: var(--theme_p4);
+ background-color: var(--theme_p3);
}
}
@@ -284,15 +496,18 @@ a {
top: 0;
left: 0;
width: 100%;
- height: 0.5em;
+ height: 4px;
+ border-radius: 2px;
+ overflow: hidden;
> div:first-of-type {
/* label */
padding: 0.3em;
- padding-top: 0.8em;
- background-color: var(--theme_p4);
+ padding-top: 8px;
+ background-color: var(--theme_g3);
width: max-content;
- font-size: 0.8em;
+ font-size: 12px;
+ color: var(--theme_g1);
}
> div:last-of-type {
@@ -302,7 +517,8 @@ a {
left: 0;
width: 0%;
height: 100%;
- background-color: var(--theme_p1);
+ background-color: var(--theme_p0);
+ transition: width 0.3s ease;
}
> div:nth-of-type(2) {
@@ -312,7 +528,7 @@ a {
left: 0;
width: 100%;
height: 100%;
- background-color: var(--theme_p3);
+ background-color: var(--theme_g3);
}
}
@@ -321,53 +537,25 @@ a {
#crumbs {
display: flex;
position: relative;
- top: -1em;
+ top: -0.5em;
+ font-size: 13px;
+ color: var(--theme_g1);
> div {
padding-right: 0.5em;
}
> div:nth-child(odd)::after {
- content: ":";
- font-weight: bolder;
- color: var(--theme_p2);
+ content: "/";
+ color: var(--theme_g2);
+ padding-left: 0.5em;
}
}
-/* branding ----------------------------------------------------------------- */
-
-#branding {
- font-size: 10pt;
- font-weight: bolder;
- margin-bottom: 2.6em;
- position: relative;
+/* banner ------------------------------------------------------------------- */
- #logo {
- width: min-content;
- margin: auto;
- user-select: none;
- position: relative;
-
- #go_home {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
-
- #logo:hover {
- filter: drop-shadow(0 0.15em 0.1em var(--theme_p2));
- }
-
- #ue_logo {
- position: absolute;
- top: 1em;
- right: 0;
- width: 5em;
- margin: auto;
- }
+zen-banner {
+ margin-bottom: 24px;
}
/* error -------------------------------------------------------------------- */
@@ -378,26 +566,23 @@ a {
z-index: 1;
color: var(--theme_g0);
background-color: var(--theme_er);
- padding: 1.0em 2em 2em 2em;
+ padding: 12px 20px 16px 20px;
width: 100%;
- border-top: 1px solid var(--theme_g0);
+ border-top: 1px solid var(--theme_g2);
display: flex;
+ gap: 16px;
+ align-items: center;
+ font-size: 13px;
> div:nth-child(1) {
- font-size: 2.5em;
- font-weight: bolder;
- font-family: serif;
- transform: rotate(-13deg);
- color: var(--theme_p0);
- }
-
- > div:nth-child(2) {
- margin-left: 2em;
+ font-size: 24px;
+ font-weight: bold;
+ color: var(--theme_fail);
}
> div:nth-child(2) > pre:nth-child(2) {
- margin-top: 0.5em;
- font-size: 0.8em;
+ margin-top: 4px;
+ font-size: 12px;
color: var(--theme_g1);
}
}
@@ -409,18 +594,144 @@ a {
min-width: 15%;
}
+/* sections ----------------------------------------------------------------- */
+
+.zen_sector {
+ position: relative;
+}
+
+.dropall {
+ position: absolute;
+ top: 16px;
+ right: 0;
+ font-size: 12px;
+ margin: 0;
+}
+
+/* stats tiles -------------------------------------------------------------- */
+
+.stats-tiles {
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.stats-tile {
+ cursor: pointer;
+ transition: border-color 0.15s, background 0.15s;
+}
+
+.stats-tile:hover {
+ border-color: var(--theme_p0);
+ background: var(--theme_p4);
+}
+
+.stats-tile-detailed {
+ position: relative;
+}
+
+.stats-tile-detailed::after {
+ content: "details \203A";
+ position: absolute;
+ bottom: 12px;
+ right: 20px;
+ font-size: 11px;
+ color: var(--theme_g1);
+ opacity: 0.6;
+ transition: opacity 0.15s;
+}
+
+.stats-tile-detailed:hover::after {
+ opacity: 1;
+ color: var(--theme_p0);
+}
+
+.stats-tile-selected {
+ border-color: var(--theme_p0);
+ background: var(--theme_p4);
+ box-shadow: 0 0 0 1px var(--theme_p0);
+}
+
+.stats-tile-selected::after {
+ content: "details \2039";
+ opacity: 1;
+ color: var(--theme_p0);
+}
+
+.tile-metrics {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.tile-columns {
+ display: flex;
+ gap: 24px;
+}
+
+.tile-columns > .tile-metrics {
+ flex: 1;
+ min-width: 0;
+}
+
+.tile-metric .metric-value {
+ font-size: 16px;
+}
+
+.tile-metric-hero .metric-value {
+ font-size: 28px;
+}
+
/* start -------------------------------------------------------------------- */
#start {
- .dropall {
- text-align: right;
- font-size: 0.85em;
- margin: -0.5em 0 0.5em 0;
- }
#version {
- color: var(--theme_g1);
+ color: var(--theme_faint);
text-align: center;
- font-size: 0.85em;
+ font-size: 12px;
+ margin-top: 24px;
+ }
+}
+
+/* info --------------------------------------------------------------------- */
+
+#info {
+ .info-tiles {
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ }
+
+ .info-tile {
+ overflow: hidden;
+ }
+
+ .info-props {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ font-size: 13px;
+ }
+
+ .info-prop {
+ display: flex;
+ gap: 12px;
+ padding: 4px 0;
+ border-bottom: 1px solid var(--theme_border_subtle);
+ }
+
+ .info-prop:last-child {
+ border-bottom: none;
+ }
+
+ .info-prop-label {
+ color: var(--theme_g1);
+ min-width: 140px;
+ flex-shrink: 0;
+ text-transform: capitalize;
+ }
+
+ .info-prop-value {
+ color: var(--theme_bright);
+ word-break: break-all;
+ margin-left: auto;
+ text-align: right;
}
}
@@ -437,6 +748,8 @@ a {
/* tree --------------------------------------------------------------------- */
#tree {
+ font-size: 13px;
+
#tree_root > ul {
margin-left: 0em;
}
@@ -448,29 +761,33 @@ a {
li > div {
display: flex;
border-bottom: 1px solid transparent;
- padding-left: 0.3em;
- padding-right: 0.3em;
+ padding: 4px 6px;
+ border-radius: 4px;
}
li > div > div[active] {
text-transform: uppercase;
+ color: var(--theme_p0);
+ font-weight: 600;
}
li > div > div:nth-last-child(3) {
margin-left: auto;
}
li > div > div:nth-last-child(-n + 3) {
- font-size: 0.8em;
+ font-size: 12px;
width: 10em;
text-align: right;
+ color: var(--theme_g1);
+ font-family: 'SF Mono', 'Cascadia Mono', Consolas, monospace;
}
li > div > div:nth-last-child(1) {
width: 6em;
}
li > div:hover {
background-color: var(--theme_p4);
- border-bottom: 1px solid var(--theme_g2);
+ border-bottom: 1px solid var(--theme_border_subtle);
}
li a {
- font-weight: bolder;
+ font-weight: 600;
}
li::marker {
content: "+";
@@ -503,3 +820,262 @@ html:has(#map) {
}
}
}
+
+/* ========================================================================== */
+/* Shared classes for compute / dashboard pages */
+/* ========================================================================== */
+
+/* cards -------------------------------------------------------------------- */
+
+.card {
+ background: var(--theme_g3);
+ border: 1px solid var(--theme_g2);
+ border-radius: 6px;
+ padding: 20px;
+}
+
+.card-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--theme_g1);
+ margin-bottom: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* grid --------------------------------------------------------------------- */
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 20px;
+ margin-bottom: 24px;
+}
+
+/* metrics ------------------------------------------------------------------ */
+
+.metric-value {
+ font-size: 36px;
+ font-weight: 600;
+ color: var(--theme_bright);
+ line-height: 1;
+}
+
+.metric-label {
+ font-size: 12px;
+ color: var(--theme_g1);
+ margin-top: 4px;
+}
+
+/* section titles ----------------------------------------------------------- */
+
+.section-title {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: var(--theme_bright);
+}
+
+/* html tables (compute pages) ---------------------------------------------- */
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+}
+
+th {
+ text-align: left;
+ color: var(--theme_g1);
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--theme_g2);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-size: 11px;
+}
+
+td {
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--theme_border_subtle);
+ color: var(--theme_g0);
+}
+
+tr:last-child td {
+ border-bottom: none;
+}
+
+.total-row td {
+ border-top: 2px solid var(--theme_g2);
+ font-weight: 600;
+ color: var(--theme_bright);
+}
+
+/* status badges ------------------------------------------------------------ */
+
+.status-badge {
+ display: inline-block;
+ padding: 2px 8px;
+ border-radius: 4px;
+ font-size: 11px;
+ font-weight: 600;
+}
+
+.status-badge.active,
+.status-badge.success {
+ background: color-mix(in srgb, var(--theme_ok) 15%, transparent);
+ color: var(--theme_ok);
+}
+
+.status-badge.inactive {
+ background: color-mix(in srgb, var(--theme_g1) 15%, transparent);
+ color: var(--theme_g1);
+}
+
+.status-badge.failure {
+ background: color-mix(in srgb, var(--theme_fail) 15%, transparent);
+ color: var(--theme_fail);
+}
+
+/* health dots -------------------------------------------------------------- */
+
+.health-dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: var(--theme_g1);
+}
+
+.health-green {
+ background: var(--theme_ok);
+}
+
+.health-yellow {
+ background: var(--theme_warn);
+}
+
+.health-red {
+ background: var(--theme_fail);
+}
+
+/* inline progress bar ------------------------------------------------------ */
+
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: var(--theme_border_subtle);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 8px;
+}
+
+.progress-fill {
+ height: 100%;
+ background: var(--theme_p0);
+ transition: width 0.3s ease;
+}
+
+/* stats row (label + value pair) ------------------------------------------- */
+
+.stats-row {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 12px;
+ padding: 8px 0;
+ border-bottom: 1px solid var(--theme_border_subtle);
+}
+
+.stats-row:last-child {
+ border-bottom: none;
+ margin-bottom: 0;
+}
+
+.stats-label {
+ color: var(--theme_g1);
+ font-size: 13px;
+}
+
+.stats-value {
+ color: var(--theme_bright);
+ font-weight: 600;
+ font-size: 13px;
+}
+
+/* detail tag (inline badge) ------------------------------------------------ */
+
+.detail-tag {
+ display: inline-block;
+ padding: 2px 8px;
+ border-radius: 4px;
+ background: var(--theme_border_subtle);
+ color: var(--theme_g0);
+ font-size: 11px;
+ margin: 2px 4px 2px 0;
+}
+
+/* timestamp ---------------------------------------------------------------- */
+
+.timestamp {
+ font-size: 12px;
+ color: var(--theme_faint);
+}
+
+/* inline error ------------------------------------------------------------- */
+
+.error {
+ color: var(--theme_fail);
+ padding: 12px;
+ background: var(--theme_er);
+ border-radius: 6px;
+ margin: 20px 0;
+ font-size: 13px;
+}
+
+/* empty state -------------------------------------------------------------- */
+
+.empty-state {
+ color: var(--theme_faint);
+ font-size: 13px;
+ padding: 20px 0;
+ text-align: center;
+}
+
+/* header layout ------------------------------------------------------------ */
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+}
+
+/* history tabs ------------------------------------------------------------- */
+
+.history-tabs {
+ display: flex;
+ gap: 4px;
+ background: var(--theme_g4);
+ border-radius: 6px;
+ padding: 2px;
+}
+
+.history-tab {
+ background: transparent;
+ color: var(--theme_g1);
+ font-size: 12px;
+ font-weight: 600;
+ padding: 4px 12px;
+ border-radius: 4px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.history-tab:hover {
+ color: var(--theme_g0);
+}
+
+.history-tab.active {
+ background: var(--theme_g2);
+ color: var(--theme_bright);
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-06 17:32:14 +0000