v0.32.2
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
bb025dcf44
commit
b0f211555a
74 files changed
+6089
-556
No files matched your search
+521
-5
@@ -132,6 +132,135 @@ html[data-theme="light"] {
|
||||
--scrollbar-thumb-hover: #879684
|
||||
}
|
||||
|
||||
|
||||
/* Optional AMOLED palette: near-black surfaces, readable borders and restrained
|
||||
mint/coral emphasis. Does not change the established dark appearance. */
|
||||
html[data-theme="ultra_dark"] {
|
||||
color-scheme: dark;
|
||||
--bg: #030404;
|
||||
--panel: #0b0d0e;
|
||||
--panel2: #121516;
|
||||
--line: #292f30;
|
||||
--muted: #a4afb0;
|
||||
--text: #f1f4f2;
|
||||
--accent: #93dfc8;
|
||||
--logo-accent: #f69b74;
|
||||
--logo-secondary: #cfe0ac;
|
||||
--green: #b1dcb0;
|
||||
--red: #ff9899;
|
||||
--sidebar-bg: #000000;
|
||||
--brand-secondary: #a9cfb5;
|
||||
--nav-active-bg: #172422;
|
||||
--nav-hover-bg: #121819;
|
||||
--text-subtle: #879695;
|
||||
--separator: #526261;
|
||||
--border-hover: #7c9f96;
|
||||
--field-bg: #090b0c;
|
||||
--field-line: #445352;
|
||||
--placeholder: #879593;
|
||||
--row-line: #202627;
|
||||
--outline-line: #79968f;
|
||||
--chart-grid: #303839;
|
||||
--code-bg: #0e1313;
|
||||
--code-alt-bg: #101a1d;
|
||||
--code-alt-text: #d5eae9;
|
||||
--nav-selected-bg: #213730;
|
||||
--accent-ink: #071814;
|
||||
--accent-hover: #b6f2dd;
|
||||
--selected-ink: #071814;
|
||||
--notice-text: #e6c99c;
|
||||
--notice-line: #66533a;
|
||||
--notice-bg: #201a11;
|
||||
--pill-line: #625544;
|
||||
--pill-live-line: #506c59;
|
||||
--toast-bg: #bcf3da;
|
||||
--toast-text: #10221a;
|
||||
--toast-line: #d8ffe8;
|
||||
--toast-error-bg: #ffd5d0;
|
||||
--toast-error-line: #ff9c96;
|
||||
--toast-error-text: #472625;
|
||||
--danger-line: #754245;
|
||||
--danger-line-strong: #965257;
|
||||
--warn-line: #89754c;
|
||||
--blue: #8bbdfb;
|
||||
--transform-chart: #cfaeff;
|
||||
--backdrop: rgb(0 0 0 / .86);
|
||||
--backdrop-soft: rgb(0 0 0 / .77);
|
||||
--shadow-mid: rgb(0 0 0 / .64);
|
||||
--shadow-strong: rgb(0 0 0 / .84);
|
||||
--neutral-soft: rgb(132 171 158 / .045);
|
||||
--scrollbar-track: #060808;
|
||||
--scrollbar-thumb: #364243;
|
||||
--scrollbar-thumb-hover: #617373;
|
||||
}
|
||||
|
||||
/* Warm, muted ivory. No pure-white canvas; numeric values and charts retain
|
||||
clear contrast against their slightly lighter, neutral card surfaces. */
|
||||
html[data-theme="cream"] {
|
||||
color-scheme: light;
|
||||
--bg: #f2ede3;
|
||||
--panel: #fcf9f2;
|
||||
--panel2: #eae3d6;
|
||||
--line: #d5cabb;
|
||||
--muted: #6b6257;
|
||||
--text: #302c27;
|
||||
--accent: #8c5942;
|
||||
--green: #5e7655;
|
||||
--red: #a54645;
|
||||
--sidebar-bg: #eae2d5;
|
||||
--brand-secondary: #668367;
|
||||
--nav-active-bg: #e0d3c0;
|
||||
--nav-hover-bg: #e6dccc;
|
||||
--text-subtle: #786e61;
|
||||
--separator: #afa494;
|
||||
--border-hover: #968776;
|
||||
--field-bg: #fffcf7;
|
||||
--field-line: #baad9a;
|
||||
--placeholder: #807466;
|
||||
--row-line: #e2d9cb;
|
||||
--outline-line: #9c8d7c;
|
||||
--chart-grid: #ddd3c4;
|
||||
--code-bg: #f0e8da;
|
||||
--code-alt-bg: #e7ebe9;
|
||||
--code-alt-text: #364f4e;
|
||||
--nav-selected-bg: #d9cbb7;
|
||||
--accent-ink: #ffffff;
|
||||
--accent-hover: #774632;
|
||||
--selected-ink: #ffffff;
|
||||
--notice-text: #765e40;
|
||||
--notice-line: #d9c3a1;
|
||||
--notice-bg: #f8efdf;
|
||||
--pill-line: #c2a78d;
|
||||
--pill-live-line: #b0bd9d;
|
||||
--toast-bg: #d6ead2;
|
||||
--toast-text: #263d29;
|
||||
--toast-line: #b8d5b6;
|
||||
--toast-error-bg: #f8ded7;
|
||||
--toast-error-line: #dca99c;
|
||||
--toast-error-text: #60352f;
|
||||
--danger-line: #d2a29a;
|
||||
--danger-line-strong: #b97870;
|
||||
--warn-line: #b49c6b;
|
||||
--blue: #4d7292;
|
||||
--transform-chart: #83659a;
|
||||
--backdrop: rgb(37 27 16 / .44);
|
||||
--backdrop-soft: rgb(47 35 21 / .48);
|
||||
--shadow-mid: rgb(64 49 34 / .13);
|
||||
--shadow-strong: rgb(64 49 34 / .24);
|
||||
--neutral-soft: rgb(104 91 69 / .045);
|
||||
--scrollbar-track: #ece4d7;
|
||||
--scrollbar-thumb: #b5a997;
|
||||
--scrollbar-thumb-hover: #978a76;
|
||||
}
|
||||
|
||||
/* Theme palettes change color only; corners are controlled independently. */
|
||||
html[data-theme="ultra_dark"] :is(.card, .stat, dialog) {
|
||||
box-shadow: 0 6px 24px rgb(0 0 0 / .18);
|
||||
}
|
||||
html[data-theme="cream"] :is(.card, .stat, dialog) {
|
||||
box-shadow: 0 6px 20px rgb(78 58 38 / .055);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
@@ -198,7 +327,7 @@ html:not(.app-loading) .app-startup {
|
||||
}
|
||||
|
||||
.app-startup-brand span {
|
||||
color: var(--accent, #65cfa2)
|
||||
color: var(--logo-secondary, var(--accent, #65cfa2))
|
||||
}
|
||||
|
||||
.app-startup-spinner {
|
||||
@@ -361,8 +490,8 @@ h2 {
|
||||
|
||||
.brand-mark {
|
||||
font: 700 33px var(--mono);
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--logo-accent, var(--accent));
|
||||
color: var(--logo-accent, var(--accent));
|
||||
place-content: center;
|
||||
position: relative
|
||||
}
|
||||
@@ -371,7 +500,7 @@ h2 {
|
||||
font-size: 22px;
|
||||
left: 29px;
|
||||
top: 19px;
|
||||
color: var(--brand-secondary)
|
||||
color: var(--logo-secondary, var(--brand-secondary))
|
||||
}
|
||||
|
||||
.edition {
|
||||
@@ -10175,4 +10304,391 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
#panel-overview .stats-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Optional HTTP backend mode distribution (configured modes, not negotiated ALPN). */
|
||||
#panel-overview .backend-mode-bar {
|
||||
display: flex;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
gap: 2px;
|
||||
border-radius: 5px;
|
||||
background: var(--line);
|
||||
margin: 7px 0 5px;
|
||||
}
|
||||
#panel-overview .backend-mode-bar span { min-width: 0; }
|
||||
#panel-overview .backend-mode-h1 { background: var(--traffic-h1); }
|
||||
#panel-overview .backend-mode-auto { background: var(--traffic-h2); }
|
||||
#panel-overview .backend-mode-compat { background: var(--traffic-h2); opacity: .5; }
|
||||
#panel-overview .backend-mode-h2 { background: var(--traffic-h3); }
|
||||
|
||||
#panel-overview .backend-mode-bar[aria-label] { background-clip: padding-box; }
|
||||
.vh-origin-protocol-info { color: var(--muted); }
|
||||
.vh-origin-protocol-warning { color: var(--muted); }
|
||||
|
||||
/* Overview arrangement dialog: visual clones never participate in metric updates. */
|
||||
.overview-layout-dialog {
|
||||
width: min(1180px, calc(100vw - 24px));
|
||||
max-height: calc(100dvh - 24px);
|
||||
overflow: auto;
|
||||
}
|
||||
.overview-layout-dialog > .window-heading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.overview-layout-body { display: grid; gap: 16px; padding: 14px; }
|
||||
.overview-layout-body h3 { font-size: 14px; margin: 0 0 10px; }
|
||||
.overview-layout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-gap, 10px); }
|
||||
.overview-layout-tile { min-width: 0; border: 1px solid var(--line); background: var(--panel); cursor: grab; }
|
||||
.overview-layout-tile:active { cursor: grabbing; }
|
||||
.overview-layout-tile.is-dragging { opacity: .4; }
|
||||
.overview-layout-tile.is-drop-target { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.overview-layout-tile-toolbar { display: flex; align-items: center; gap: 3px; padding: 4px; border-bottom: 1px solid var(--line); }
|
||||
.overview-layout-tile-toolbar button { min-height: 28px; min-width: 28px; padding: 3px 7px; }
|
||||
.overview-layout-grip { padding: 0 5px; color: var(--muted); user-select: none; }
|
||||
.overview-layout-hide { margin-inline-start: auto; font-size: 11px; }
|
||||
.overview-layout-grid .stat { border: 0; padding: 12px; min-height: 98px; pointer-events: none; }
|
||||
.overview-layout-grid .stat > span { font-size: 11px; }
|
||||
.overview-layout-grid .stat strong { font-size: 24px; margin-top: 7px; overflow-wrap: anywhere; }
|
||||
.overview-layout-grid .stat small { display: block; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
|
||||
.overview-layout-grid .stat svg { width: 100%; height: 53px; }
|
||||
.overview-layout-grid .stat-chart-legend { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.overview-layout-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.overview-layout-section-heading input { max-width: 230px; }
|
||||
.overview-layout-hidden-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
|
||||
.overview-layout-hidden-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); padding: 8px; background: var(--panel); min-width: 0; }
|
||||
.overview-layout-hidden-item span { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
|
||||
.overview-layout-hidden-item button { flex-shrink: 0; }
|
||||
.overview-layout-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--bg); z-index: 2; }
|
||||
.overview-layout-footer p { margin: 0 auto 0 0; font-size: 11px; overflow-wrap: anywhere; }
|
||||
.dashboard-layout-open-settings { margin: 5px 0; justify-self: start; }
|
||||
@media (max-width: 850px) {
|
||||
.overview-layout-grid, .overview-layout-hidden-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.overview-layout-grid, .overview-layout-hidden-list { grid-template-columns: minmax(0, 1fr); }
|
||||
.overview-layout-section-heading { align-items: stretch; flex-direction: column; }
|
||||
.overview-layout-section-heading input { max-width: none; width: 100%; }
|
||||
.overview-layout-footer { flex-wrap: wrap; }
|
||||
.overview-layout-footer p { width: 100%; }
|
||||
}
|
||||
|
||||
/* One rearrangeable Overview canvas. Existing large charts, diagnostics and the
|
||||
backend table keep their original nodes/IDs and their data update handlers. */
|
||||
#panel-overview .dashboard-overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: var(--ui-gap);
|
||||
align-items: stretch;
|
||||
}
|
||||
#panel-overview .dashboard-overview-grid > [data-dashboard-widget] { min-width: 0; }
|
||||
#panel-overview .dashboard-overview-grid > [hidden] { display: none !important; }
|
||||
#panel-overview .dashboard-overview-grid > .card:not(.pool-card) { grid-column: span 2; }
|
||||
#panel-overview .dashboard-overview-grid > .pool-card { grid-column: 1 / -1; margin-bottom: 0; }
|
||||
#panel-overview .dashboard-overview-grid > .activity-card svg { min-width: 0; }
|
||||
@media (max-width: 1200px) {
|
||||
#panel-overview .dashboard-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
#panel-overview .dashboard-overview-grid > .stat { grid-column: span 2; }
|
||||
#panel-overview .dashboard-overview-grid > .card:not(.pool-card) { grid-column: span 2; }
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
#panel-overview .dashboard-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
#panel-overview .dashboard-overview-grid > .stat { grid-column: span 1; }
|
||||
#panel-overview .dashboard-overview-grid > .card:not(.pool-card) { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
#panel-overview .dashboard-overview-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
#panel-overview .dashboard-overview-grid > .stat { grid-column: 1; }
|
||||
}
|
||||
.overview-layout-tile.is-panel { grid-column: span 2; }
|
||||
.overview-layout-grid .overview-layout-panel-preview {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding: 12px;
|
||||
min-height: 98px;
|
||||
background: var(--panel);
|
||||
pointer-events: none;
|
||||
}
|
||||
.overview-layout-panel-preview > strong { font-size: 13px; }
|
||||
.overview-layout-panel-preview svg { width: 100%; height: 80px; }
|
||||
.overview-layout-panel-preview small { color: var(--muted); }
|
||||
.overview-layout-footer #overview-layout-default { margin-right: auto; }
|
||||
.overview-reset-confirm { width: min(460px, calc(100vw - 24px)); padding: 16px; }
|
||||
.overview-reset-confirm > p { line-height: 1.5; }
|
||||
@media (max-width: 850px) { .overview-layout-tile.is-panel { grid-column: span 2; } }
|
||||
@media (max-width: 550px) { .overview-layout-tile.is-panel { grid-column: span 1; } }
|
||||
|
||||
/* Overview block kinds come from the same server-validated registry as the
|
||||
saved order. Labels distinguish numbers, plots, tables and diagnostic panels. */
|
||||
.overview-widget-type {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
background: var(--panel2);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.dashboard-widget-setting .dashboard-widget-toggle { flex-wrap: wrap; }
|
||||
.dashboard-widget-setting .overview-widget-type { margin-left: 15px; }
|
||||
.overview-layout-tile-toolbar .overview-widget-type { margin-left: 3px; }
|
||||
.overview-layout-hidden-item .overview-widget-type { flex: 0 0 auto; }
|
||||
.overview-layout-filters { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.overview-layout-filters select, .overview-layout-filters input { width: min(220px, 100%); max-width: 100%; }
|
||||
|
||||
/* Inline editing of the actual Overview blocks; live charts and original DOM
|
||||
IDs remain in place. Dragging is enabled only on the explicit grip button. */
|
||||
.overview-inline-actions { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
|
||||
.overview-inline-actions[hidden], .overview-inline-hint[hidden] { display: none !important; }
|
||||
.overview-inline-hint { margin: 0 0 10px; }
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > [data-dashboard-widget] {
|
||||
position: relative;
|
||||
outline: 1px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
padding-top: 66px;
|
||||
}
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > .is-overview-dragging { opacity: .45; }
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > .is-overview-drop-before {
|
||||
box-shadow: inset 4px 0 var(--accent);
|
||||
}
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > .is-overview-drop-after {
|
||||
box-shadow: inset -4px 0 var(--accent);
|
||||
}
|
||||
.overview-inline-toolbar {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#panel-overview .overview-inline-toolbar button {
|
||||
min-width: 28px;
|
||||
min-height: 27px;
|
||||
padding: 2px 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-grip { cursor: grab; user-select: none; }
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-grip:active { cursor: grabbing; }
|
||||
#panel-overview .overview-inline-toolbar .overview-widget-type { margin-left: auto; }
|
||||
@media (max-width: 600px) {
|
||||
.overview-layout-hidden-item { flex-wrap: wrap; }
|
||||
.overview-layout-filters select, .overview-layout-filters input { width: 100%; }
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > [data-dashboard-widget] { padding-top: 68px; }
|
||||
}
|
||||
|
||||
|
||||
/* Direct Overview editing: hide is reversible until Save and remains
|
||||
recoverable later from the block selector or the compact hidden shelf. */
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-hide {
|
||||
color: var(--red);
|
||||
border: 1px solid var(--danger-line);
|
||||
background: var(--panel);
|
||||
/* Use the same .quiet radius/corner preset as the arrow buttons. */
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-hide:hover,
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-hide:focus-visible {
|
||||
border-color: var(--danger-line-strong);
|
||||
background: var(--notice-bg);
|
||||
}
|
||||
.overview-inline-hidden {
|
||||
margin: 0 0 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
}
|
||||
.overview-inline-hidden > summary {
|
||||
padding: 9px 12px;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.overview-inline-hidden > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
.overview-inline-hidden-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
max-height: min(30vh, 240px);
|
||||
overflow-y: auto;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.overview-inline-hidden-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
max-width: 100%;
|
||||
padding: 4px 7px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
color: var(--text);
|
||||
background: var(--panel2);
|
||||
font-size: 12px;
|
||||
}
|
||||
.overview-inline-hidden-item > span:not(.overview-widget-type) { overflow-wrap: anywhere; }
|
||||
.overview-inline-hidden-item > button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 27px;
|
||||
min-height: 27px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--field-line);
|
||||
color: var(--green);
|
||||
background: var(--panel);
|
||||
}
|
||||
.overview-inline-hidden-item > button:hover { border-color: var(--accent); }
|
||||
@media (max-width: 600px) {
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked > [data-dashboard-widget] { padding-top: 82px; }
|
||||
.overview-inline-hidden-item { max-width: 100%; }
|
||||
}
|
||||
|
||||
/* The original fixed Overview grid, also used for personalized layouts.
|
||||
Metrics, wide charts, diagnostic panels and tables are separate rows;
|
||||
every tile in a row stretches to the SAME height. This intentionally
|
||||
favors symmetry over masonry or floating short cards beside tall panels.
|
||||
Existing density controls define the identical horizontal/vertical gap. */
|
||||
#panel-overview { container: overview-canvas / inline-size; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: auto;
|
||||
align-items: stretch;
|
||||
align-content: start;
|
||||
gap: var(--ui-gap);
|
||||
}
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > [data-dashboard-widget] {
|
||||
grid-column: auto / span 2;
|
||||
grid-row: auto;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
margin-block: 0;
|
||||
position: relative;
|
||||
}
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card:not(.pool-card) { grid-column: auto / span 4; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card.overview-wide-chart { grid-column: auto / span 6; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .pool-card { grid-column: 1 / -1; }
|
||||
/* Each size category starts at the first track, even after drag/drop. */
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .overview-row-start,
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card.overview-row-start { grid-column-start: 1; }
|
||||
@container overview-canvas (max-width: 1080px) {
|
||||
#panel-overview .dashboard-overview-grid.is-aligned { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > [data-dashboard-widget].stat { grid-column: auto / span 2; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card:not(.pool-card) { grid-column: auto / span 3; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card.overview-wide-chart,
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .pool-card { grid-column: 1 / -1; }
|
||||
}
|
||||
@container overview-canvas (max-width: 700px) {
|
||||
#panel-overview .dashboard-overview-grid.is-aligned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > [data-dashboard-widget].stat { grid-column: auto / span 1; }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > .card:not(.pool-card) { grid-column: 1 / -1; }
|
||||
}
|
||||
@container overview-canvas (max-width: 440px) {
|
||||
#panel-overview .dashboard-overview-grid.is-aligned { grid-template-columns: minmax(0, 1fr); }
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > [data-dashboard-widget].stat { grid-column: 1; }
|
||||
}
|
||||
/* Keep category boundaries intact at every responsive breakpoint. */
|
||||
#panel-overview .dashboard-overview-grid.is-aligned > [data-dashboard-widget].overview-row-start { grid-column-start: 1; }
|
||||
|
||||
/* Full-size optional charts: static SVG geometry and bounded historical data. */
|
||||
#panel-overview .overview-wide-chart { padding: 15px; overflow: hidden; }
|
||||
#panel-overview .overview-wide-chart .card-heading { min-width: 0; align-items: baseline; gap: 10px; }
|
||||
#panel-overview .overview-wide-chart h2 { min-width: 0; overflow-wrap: anywhere; }
|
||||
#panel-overview .overview-wide-summary { color: var(--accent); font: 500 12px var(--mono); white-space: nowrap; }
|
||||
#panel-overview .overview-wide-svg { display: block; width: 100%; height: clamp(125px, 13vw, 190px); margin-block: 13px 9px; }
|
||||
#panel-overview .overview-wide-svg .chart-grid { stroke: var(--line); fill: none; stroke-width: 1; opacity: .6; }
|
||||
#panel-overview .overview-wide-series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
|
||||
#panel-overview .overview-wide-series-0 { stroke: var(--chart-accent); }
|
||||
#panel-overview .overview-wide-series-1 { stroke: var(--chart-secondary); }
|
||||
#panel-overview .overview-wide-series-2 { stroke: var(--chart-tertiary); }
|
||||
#panel-overview .overview-wide-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font-size: 11px; }
|
||||
#panel-overview .overview-wide-legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
|
||||
#panel-overview .overview-wide-legend i { width: 8px; height: 8px; border-radius: 100%; background: var(--chart-accent); }
|
||||
#panel-overview .overview-wide-legend .overview-wide-key-1 { background: var(--chart-secondary); }
|
||||
#panel-overview .overview-wide-legend .overview-wide-key-2 { background: var(--chart-tertiary); }
|
||||
#panel-overview .overview-wide-legend b { font: 500 11px var(--mono); color: var(--text); }
|
||||
/* Block metadata stays to the left of every action group. */
|
||||
.dashboard-widget-setting .dashboard-widget-toggle { flex-wrap: nowrap; }
|
||||
.dashboard-widget-setting .dashboard-widget-toggle .overview-widget-type { margin: 0 0 0 auto; flex: 0 0 auto; }
|
||||
.dashboard-widget-setting .dashboard-widget-setting-actions { justify-self: end; flex-shrink: 0; }
|
||||
.overview-layout-tile-toolbar { flex-wrap: wrap; }
|
||||
.overview-layout-tile-toolbar .overview-widget-type { margin: 0; }
|
||||
.overview-layout-tile-toolbar .overview-layout-controls { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
|
||||
.overview-layout-hidden-item > button { margin-left: auto; }
|
||||
.overview-layout-hidden-item > .overview-widget-type { margin: 0; }
|
||||
#panel-overview .overview-inline-toolbar .overview-widget-type { margin: 0 auto 0 0; }
|
||||
#panel-overview .overview-inline-toolbar .overview-inline-hide { margin-left: 0; }
|
||||
.overview-inline-hidden-item > .overview-widget-type { margin-right: 0; }
|
||||
.overview-inline-hidden-item > .overview-inline-restore { order: 3; margin-left: auto; }
|
||||
|
||||
/* Appearance selector: always show the block-kind label, independently from
|
||||
the visibility button, with actions pinned to the right edge. */
|
||||
.dashboard-widget-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
.dashboard-widget-setting {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 6px;
|
||||
}
|
||||
.dashboard-widget-setting .dashboard-widget-toggle {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.dashboard-widget-setting .dashboard-widget-setting-label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.dashboard-widget-setting > .overview-widget-type {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
.dashboard-widget-setting > .dashboard-widget-setting-actions {
|
||||
justify-self: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Global shape preference. "default" applies NO overrides so existing dark,
|
||||
light, cream and Ultra Dark keep the same established corner geometry.
|
||||
Circular status dots, spinners, switches and chart markers retain their
|
||||
semantic shape; underline tabs and navigation accent strips stay intact. */
|
||||
html[data-corner-style="square"] { --rp-radius-surface: 0px; --rp-radius-control: 0px; }
|
||||
html[data-corner-style="subtle"] { --rp-radius-surface: 5px; --rp-radius-control: 4px; }
|
||||
html[data-corner-style="rounded"] { --rp-radius-surface: 12px; --rp-radius-control: 8px; }
|
||||
html[data-corner-style="extra"] { --rp-radius-surface: 18px; --rp-radius-control: 12px; }
|
||||
html:is([data-corner-style="square"], [data-corner-style="subtle"], [data-corner-style="rounded"], [data-corner-style="extra"]) :is(
|
||||
.card, .stat, dialog, .login-card, .appearance-section, .settings-tabs,
|
||||
.dashboard-widget-setting, .overview-layout-tile, .overview-layout-hidden-item,
|
||||
.overview-inline-hidden-item, .notice, .toast,
|
||||
.chart-style-choice, .stream-dashboard-card, .pool-card,
|
||||
.file-log-advanced-parser, .table-container, .metric-info-popover
|
||||
) { border-radius: var(--rp-radius-surface) !important; }
|
||||
html:is([data-corner-style="square"], [data-corner-style="subtle"], [data-corner-style="rounded"], [data-corner-style="extra"]) :is(
|
||||
button:not(.nav):not(.file-log-tab), input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
select, textarea, .pill, .overview-widget-type, .badge, .quiet, .outline, .primary,
|
||||
.code, .command, .dashboard-widget-toggle, .settings-tabs button,
|
||||
.overview-inline-hidden-toggle, .overview-inline-restore
|
||||
) { border-radius: var(--rp-radius-control) !important; }
|
||||
|
||||
/* Appearance stays badge-free; badges remain useful in the visual editor. */
|
||||
#settings-page-appearance .dashboard-widget-setting .overview-widget-type { display: none; }
|
||||
Reference in new issue
Block a user