v0.36.3
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
5cb63f542c
commit
17e314e159
27 files changed
+1017
-291
No files matched your search
+208
-14
@@ -257,20 +257,6 @@ html[data-theme=cream] {
|
||||
--scrollbar-thumb-hover: #978a76;
|
||||
}
|
||||
|
||||
body[data-density=dense] {
|
||||
--ui-gap: 4px;
|
||||
--ui-card: 7px;
|
||||
--ui-font: 11.5px;
|
||||
--ui-control: 25px;
|
||||
}
|
||||
|
||||
body[data-density=comfortable] {
|
||||
--ui-gap: 13px;
|
||||
--ui-card: 17px;
|
||||
--ui-font: 14px;
|
||||
--ui-control: 36px;
|
||||
}
|
||||
|
||||
html[data-button-style=compact] body {
|
||||
--button-padding: 3px 7px;
|
||||
--button-font-size: 10px;
|
||||
@@ -333,6 +319,62 @@ html[data-button-style=compact] body {
|
||||
--sw4: #70d7ff;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=sunset] {
|
||||
--sw1: #ff7a59;
|
||||
--sw2: #ffb347;
|
||||
--sw3: #e8509b;
|
||||
--sw4: #9b6bff;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=aurora] {
|
||||
--sw1: #4ff0b0;
|
||||
--sw2: #6ec8ff;
|
||||
--sw3: #b78cff;
|
||||
--sw4: #ff7ad9;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=ocean] {
|
||||
--sw1: #3fa7ff;
|
||||
--sw2: #2fd0c0;
|
||||
--sw3: #6f8cff;
|
||||
--sw4: #9be7ff;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=forest] {
|
||||
--sw1: #7bc96f;
|
||||
--sw2: #d6c45a;
|
||||
--sw3: #4fae9a;
|
||||
--sw4: #c98f5c;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=pastel] {
|
||||
--sw1: #f4b6c2;
|
||||
--sw2: #b5e0c2;
|
||||
--sw3: #b4c8f5;
|
||||
--sw4: #e3c8f0;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=terminal] {
|
||||
--sw1: #6bff7a;
|
||||
--sw2: #e5ff6b;
|
||||
--sw3: #4fd0a0;
|
||||
--sw4: #ffb347;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=blueprint] {
|
||||
--sw1: #cfe6ff;
|
||||
--sw2: #8fc4ff;
|
||||
--sw3: #ffffff;
|
||||
--sw4: #7aa8e0;
|
||||
}
|
||||
|
||||
.chart-style-choice[data-chart-preset=colorblind] {
|
||||
--sw1: #e69f00;
|
||||
--sw2: #56b4e9;
|
||||
--sw3: #009e73;
|
||||
--sw4: #cc79a7;
|
||||
}
|
||||
|
||||
html[data-chart-style=default] {
|
||||
--chart-accent: var(--accent);
|
||||
--chart-secondary: var(--green);
|
||||
@@ -485,6 +527,158 @@ html[data-chart-style=warm] {
|
||||
--chart-svg-filter: saturate(1.1) brightness(1.04);
|
||||
}
|
||||
|
||||
html[data-chart-style=sunset] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #ff7a59;
|
||||
--chart-secondary: #ffb347;
|
||||
--chart-tertiary: #e8509b;
|
||||
--chart-quaternary: #9b6bff;
|
||||
--chart-quinary: #ffd479;
|
||||
--chart-senary: #ff9fb2;
|
||||
--chart-septenary: #c08ad8;
|
||||
--chart-octonary: #8f6aa8;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 90%, #3a1428 10%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 92%, #2e1022 8%);
|
||||
--chart-line-width: 2.5;
|
||||
--chart-grid-opacity: .36;
|
||||
--chart-grid-dash: 1 0;
|
||||
--chart-svg-filter: saturate(1.12) brightness(1.04);
|
||||
}
|
||||
|
||||
html[data-chart-style=aurora] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #4ff0b0;
|
||||
--chart-secondary: #6ec8ff;
|
||||
--chart-tertiary: #b78cff;
|
||||
--chart-quaternary: #ff7ad9;
|
||||
--chart-quinary: #c8ff7a;
|
||||
--chart-senary: #7affea;
|
||||
--chart-septenary: #8fa0ff;
|
||||
--chart-octonary: #d0a8ff;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 91%, #0a2630 9%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 92%, #082028 8%);
|
||||
--chart-line-width: 2.4;
|
||||
--chart-grid-opacity: .4;
|
||||
--chart-grid-dash: 2 5;
|
||||
--chart-svg-filter: saturate(1.2) brightness(1.08);
|
||||
}
|
||||
|
||||
html[data-chart-style=ocean] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #3fa7ff;
|
||||
--chart-secondary: #2fd0c0;
|
||||
--chart-tertiary: #6f8cff;
|
||||
--chart-quaternary: #9be7ff;
|
||||
--chart-quinary: #52e0a8;
|
||||
--chart-senary: #78b8ff;
|
||||
--chart-septenary: #4a7fb5;
|
||||
--chart-octonary: #5f9ea8;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 90%, #061c33 10%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 92%, #05182b 8%);
|
||||
--chart-line-width: 2.2;
|
||||
--chart-grid-opacity: .4;
|
||||
--chart-grid-dash: 2 5;
|
||||
--chart-svg-filter: saturate(1.05);
|
||||
}
|
||||
|
||||
html[data-chart-style=forest] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #7bc96f;
|
||||
--chart-secondary: #d6c45a;
|
||||
--chart-tertiary: #4fae9a;
|
||||
--chart-quaternary: #c98f5c;
|
||||
--chart-quinary: #a4d86a;
|
||||
--chart-senary: #e0a84f;
|
||||
--chart-septenary: #7aa86a;
|
||||
--chart-octonary: #8c7a5a;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 91%, #11230f 9%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 92%, #0e1d0d 8%);
|
||||
--chart-line-width: 2.3;
|
||||
--chart-grid-opacity: .34;
|
||||
--chart-grid-dash: 1 0;
|
||||
--chart-svg-filter: saturate(.96);
|
||||
}
|
||||
|
||||
html[data-chart-style=pastel] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #f4b6c2;
|
||||
--chart-secondary: #b5e0c2;
|
||||
--chart-tertiary: #b4c8f5;
|
||||
--chart-quaternary: #e3c8f0;
|
||||
--chart-quinary: #f6dba4;
|
||||
--chart-senary: #a8dcdc;
|
||||
--chart-septenary: #d2b8e8;
|
||||
--chart-octonary: #b9c2cc;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 90%, #fff 10%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 93%, #fff 7%);
|
||||
--chart-line-width: 3;
|
||||
--chart-grid-opacity: .44;
|
||||
--chart-grid-dash: 1 0;
|
||||
--chart-svg-filter: saturate(.82) brightness(1.08);
|
||||
}
|
||||
|
||||
html[data-chart-style=terminal] {
|
||||
--chart-linecap: square;
|
||||
--chart-linejoin: miter;
|
||||
--chart-accent: #6bff7a;
|
||||
--chart-secondary: #e5ff6b;
|
||||
--chart-tertiary: #4fd0a0;
|
||||
--chart-quaternary: #ffb347;
|
||||
--chart-quinary: #a6ff9a;
|
||||
--chart-senary: #d4ff9a;
|
||||
--chart-septenary: #58b868;
|
||||
--chart-octonary: #7a8f58;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 88%, #031a07 12%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 90%, #021405 10%);
|
||||
--chart-line-width: 1.6;
|
||||
--chart-grid-opacity: .7;
|
||||
--chart-grid-dash: 1 3;
|
||||
--chart-svg-filter: saturate(1.1) contrast(1.1);
|
||||
}
|
||||
|
||||
html[data-chart-style=blueprint] {
|
||||
--chart-linecap: square;
|
||||
--chart-linejoin: miter;
|
||||
--chart-accent: #cfe6ff;
|
||||
--chart-secondary: #8fc4ff;
|
||||
--chart-tertiary: #ffffff;
|
||||
--chart-quaternary: #7aa8e0;
|
||||
--chart-quinary: #a8d0ff;
|
||||
--chart-senary: #e8f2ff;
|
||||
--chart-septenary: #6a90c0;
|
||||
--chart-octonary: #506c94;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 84%, #0a2a5c 16%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 88%, #08224a 12%);
|
||||
--chart-line-width: 1.3;
|
||||
--chart-grid-opacity: .78;
|
||||
--chart-grid-dash: 4 4;
|
||||
--chart-svg-filter: saturate(.9) contrast(1.06);
|
||||
}
|
||||
|
||||
html[data-chart-style=colorblind] {
|
||||
--chart-linecap: round;
|
||||
--chart-linejoin: round;
|
||||
--chart-accent: #e69f00;
|
||||
--chart-secondary: #56b4e9;
|
||||
--chart-tertiary: #009e73;
|
||||
--chart-quaternary: #cc79a7;
|
||||
--chart-quinary: #f0e442;
|
||||
--chart-senary: #0072b2;
|
||||
--chart-septenary: #d55e00;
|
||||
--chart-octonary: #bdbdbd;
|
||||
--chart-surface: color-mix(in srgb, var(--panel2) 94%, #000 6%);
|
||||
--chart-surface-alt: color-mix(in srgb, var(--panel) 94%, #000 6%);
|
||||
--chart-line-width: 2.6;
|
||||
--chart-grid-opacity: .7;
|
||||
--chart-grid-dash: 3 4;
|
||||
--chart-svg-filter: contrast(1.1);
|
||||
}
|
||||
|
||||
html[data-chart-style] {
|
||||
--traffic-h1: var(--chart-accent);
|
||||
--traffic-h2: var(--chart-secondary);
|
||||
|
||||
@@ -1067,43 +1067,10 @@ dialog .vh-form,
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
body[data-density=compact] {
|
||||
--ui-gap: 2px;
|
||||
--ui-card: 5px;
|
||||
--ui-font: 10.75px;
|
||||
--ui-control: 22px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
body[data-density=compact] main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .card-heading {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .card-heading h2,
|
||||
html[data-dashboard-density=compact] #panel-overview .dashboard-overview-grid>.card .card-heading h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .outline,
|
||||
body[data-density=compact] .primary,
|
||||
body[data-density=compact] .quiet,
|
||||
body[data-density=compact] button,
|
||||
body[data-density=compact] input:not([type=checkbox]):not([type=radio]),
|
||||
body[data-density=compact] select,
|
||||
body[data-density=compact] textarea {
|
||||
padding: 3px 7px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .page-footer {
|
||||
padding: 7px 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.network-interface-row-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1151,7 +1118,7 @@ body[data-density=compact] .page-footer {
|
||||
font: 10px var(--mono);
|
||||
}
|
||||
|
||||
.network-interface-row svg {
|
||||
.network-interface-row svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
@@ -1251,6 +1218,29 @@ body[data-density=compact] .page-footer {
|
||||
min-height: 24px;
|
||||
padding: 3px 7px;
|
||||
font: 9px var(--mono);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Small controls: a smaller icon must not change the button height when the
|
||||
optional SVG icons are toggled or re-applied during a refresh (Safari jumped). */
|
||||
.network-interface-hide>.ui-icon,
|
||||
.network-interface-hidden .quiet>.ui-icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-inline-end: 4px;
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
html[data-interface-icons="true"] .network-interface-hide>svg.ui-icon,
|
||||
html[data-interface-icons="true"] .network-interface-hidden .quiet>svg.ui-icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.network-interface-charts {
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
.network-interface-row+.network-interface-row,
|
||||
@@ -1570,14 +1560,6 @@ html[data-table-density=ultra] :is(table th, table td) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.path-permissions-commands {
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.path-permissions-actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.path-permissions-options>summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1599,6 +1581,7 @@ html[data-table-density=ultra] :is(table th, table td) {
|
||||
}
|
||||
|
||||
.path-permissions-commands {
|
||||
max-height: 180px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1608,4 +1591,13 @@ html[data-table-density=ultra] :is(table th, table td) {
|
||||
|
||||
.path-permissions-actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
/* Safety net: whatever chart/card rule is added later, injected UI icons stay inline,
|
||||
fixed-size and out of layout flow (they used to stretch inside chart cards on mobile Safari). */
|
||||
html[data-interface-icons="true"] :is(button, a, summary)>svg.ui-icon {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
flex: 0 0 auto;
|
||||
max-width: none;
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -604,37 +604,6 @@ main {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .shell {
|
||||
grid-template-columns: 164px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
body[data-density=compact] .sidebar {
|
||||
padding: 14px 9px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .nav,
|
||||
body[data-density=compact] .stat {
|
||||
padding: 6px 7px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .topbar {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .page-intro {
|
||||
padding: 7px 0 6px;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .page-intro h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .page-intro .lead {
|
||||
font-size: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.top-log-menu>summary,
|
||||
.backend-column-picker>summary,
|
||||
.file-log-search-help>summary {
|
||||
|
||||
@@ -280,7 +280,7 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mini-live-chart svg {
|
||||
.mini-live-chart svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
@@ -361,11 +361,11 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.activity-card svg {
|
||||
.activity-card svg:not(.ui-icon) {
|
||||
height: 105px;
|
||||
}
|
||||
|
||||
.system-card svg {
|
||||
.system-card svg:not(.ui-icon) {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@@ -383,11 +383,6 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
max-height: 205px;
|
||||
}
|
||||
|
||||
body[data-density=dense] .stat strong {
|
||||
font-size: 22px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.traffic-chart-grid,
|
||||
.logging-grid {
|
||||
display: grid;
|
||||
@@ -468,7 +463,7 @@ body[data-density=dense] .stat strong {
|
||||
padding: 7px 10px 0;
|
||||
}
|
||||
|
||||
.vhost-chart svg {
|
||||
.vhost-chart svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
@@ -550,37 +545,12 @@ body[data-density=dense] .stat strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body[data-density=compact] .stat strong {
|
||||
font-size: 18px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
body[data-density=compact] .stat p,
|
||||
body[data-density=compact] .stat small,
|
||||
html[data-dashboard-density=normal] #panel-overview .stat small,
|
||||
html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-mix-header>span,
|
||||
html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-mix-caption {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .activity-card svg {
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .system-card svg {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .pool-table td,
|
||||
body[data-density=compact] .pool-table th {
|
||||
padding: 3px 5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .pool-card .table-scroll {
|
||||
max-height: 170px;
|
||||
}
|
||||
|
||||
.network-interface-charts {
|
||||
display: grid;
|
||||
max-height: 260px;
|
||||
@@ -664,7 +634,7 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-chart svg {
|
||||
.stat-chart svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
@@ -769,7 +739,7 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
padding: 14px 15px 12px;
|
||||
}
|
||||
|
||||
.function-live-chart svg {
|
||||
.function-live-chart svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
@@ -851,7 +821,7 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.connection-card svg {
|
||||
.connection-card svg:not(.ui-icon) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
@@ -1052,7 +1022,7 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:is(.stat-chart, .activity-card, .system-card, .function-live-chart) svg,
|
||||
:is(.stat-chart, .activity-card, .system-card, .function-live-chart) svg:not(.ui-icon),
|
||||
:is(.traffic-donut, .traffic-bar-chart span) {
|
||||
filter: var(--chart-svg-filter);
|
||||
}
|
||||
@@ -1127,15 +1097,15 @@ html[data-dashboard-density=ultra] #panel-overview .stat small {
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
html[data-dashboard-density=ultra] #panel-overview .stat-chart svg {
|
||||
html[data-dashboard-density=ultra] #panel-overview .stat-chart svg:not(.ui-icon) {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
html[data-dashboard-density=normal] #panel-overview .stat-chart svg {
|
||||
html[data-dashboard-density=normal] #panel-overview .stat-chart svg:not(.ui-icon) {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
html[data-dashboard-density=compact] #panel-overview .stat-chart svg {
|
||||
html[data-dashboard-density=compact] #panel-overview .stat-chart svg:not(.ui-icon) {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
@@ -1737,7 +1707,7 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
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):not(.vhost-backend-trigger), input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .pill, .vhost-backend-protocol-badge, .overview-widget-type, .badge, .quiet, .outline, .primary, .code, .command, .dashboard-widget-toggle, .settings-tabs button, .overview-inline-restore),
|
||||
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):not(.vhost-backend-trigger), input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .pill, .vhost-backend-protocol-badge, .overview-widget-type, .quiet, .outline, .primary, .code, .command, .dashboard-widget-toggle, .settings-tabs button, .overview-inline-restore),
|
||||
html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-style=rounded], [data-corner-style=extra]) :is(.nav, .file-log-tab, .vhost-backend-trigger, .backend-column-options, .docker-service-quick-actions a, .docker-service-quick-actions button, .docker-view-toggle, .provider-picker, .renewal-meta-item) {
|
||||
border-radius: var(--rp-radius-control) !important;
|
||||
}
|
||||
@@ -2074,7 +2044,7 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
gap: 8px;
|
||||
padding: 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--rp-radius-surface, var(--radius, 8px));
|
||||
border-radius: var(--rp-radius-surface, 8px);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
@@ -2213,8 +2183,8 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
#panel-overview .stat-cache-outcomes .cache-mix-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
margin: 7px 0 9px;
|
||||
height: 20px;
|
||||
margin: 3px 0 4px;
|
||||
border-radius: var(--rp-progress-radius);
|
||||
background: var(--rp-progress-track);
|
||||
overflow: hidden;
|
||||
@@ -2224,6 +2194,17 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
color: #0c0e11;
|
||||
font: 600 10px/20px var(--mono, ui-monospace, monospace);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#panel-overview .cache-mix-bar>span.is-tight {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#panel-overview .cache-mix-other {
|
||||
@@ -2322,4 +2303,61 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
/* WebSocket tunnels: "Established" sits to the right of the main value instead of a third text line. */
|
||||
#panel-overview .stat .stat-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
column-gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#panel-overview .stat .stat-value-row>strong {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#panel-overview .stat .stat-value-row>.stat-side-value {
|
||||
display: block;
|
||||
margin: 0 0 0 auto;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.3;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#panel-overview .stat .stat-value-row>.stat-side-value b {
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
/* Compact stat cards: a card made only of title, value and one secondary line shows that line
|
||||
beside the value (right-aligned) instead of on a line of its own. */
|
||||
#panel-overview .stats-grid>.stat:is(:not(.stat-donut, .stat-meter, .stat-with-action, .stat-chart):not(:has(>:not(span, strong, small))):has(>small)) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
column-gap: 10px;
|
||||
align-items: baseline;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
#panel-overview .stats-grid>.stat:is(:not(.stat-donut, .stat-meter, .stat-with-action, .stat-chart):not(:has(>:not(span, strong, small))):has(>small))>span:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
#panel-overview .stats-grid>.stat:is(:not(.stat-donut, .stat-meter, .stat-with-action, .stat-chart):not(:has(>:not(span, strong, small))):has(>small))>strong {
|
||||
grid-column: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#panel-overview .stats-grid>.stat:is(:not(.stat-donut, .stat-meter, .stat-with-action, .stat-chart):not(:has(>:not(span, strong, small))):has(>small))>small {
|
||||
grid-column: 2;
|
||||
max-width: 14em;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
.traffic-chart-card,
|
||||
#panel-overview .backend-mode-bar span,
|
||||
#panel-overview .stats-grid>.stat,
|
||||
#panel-overview .dashboard-overview-grid>.activity-card svg,
|
||||
#panel-overview .dashboard-overview-grid>.activity-card svg:not(.ui-icon),
|
||||
#panel-overview .dashboard-overview-grid>[data-dashboard-widget],
|
||||
.dashboard-density-setting>.fine,
|
||||
.dashboard-density-setting>select,
|
||||
@@ -1140,7 +1140,7 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 11px;
|
||||
background: var(--surface, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vh-backend-health-editor h3 {
|
||||
@@ -1483,18 +1483,22 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
/* Same geometry and typography as .pill so protocol indicators sit evenly in the
|
||||
Vhost policy row; only the colour (muted = not observed, green = observed) differs. */
|
||||
.vhost-backend-protocol-badge {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--pill-line);
|
||||
border-radius: var(--rp-radius-control, 4px);
|
||||
background: var(--panel2);
|
||||
border-radius: var(--rp-radius-control, 0);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
padding: 3px 7px;
|
||||
font: 10px var(--mono);
|
||||
min-height: 0;
|
||||
padding: 4px 8px;
|
||||
font: 9px/10px var(--mono);
|
||||
letter-spacing: 1px;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1504,6 +1508,10 @@ html.app-loading,
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.vhost-policy-pills>.vhost-backend-protocol-badge {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.vhost-backend-protocol-badge[data-observed=true] {
|
||||
color: var(--green);
|
||||
border-color: var(--pill-live-line);
|
||||
@@ -1788,12 +1796,12 @@ html.app-loading,
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
gap: 7px;
|
||||
padding: 2px 4px 2px 9px;
|
||||
border-radius: var(--rp-radius-control, 15px);
|
||||
gap: 5px;
|
||||
padding: 4px 5px 4px 8px;
|
||||
border-radius: var(--rp-radius-control, 0);
|
||||
border: 1px solid var(--pill-live-line);
|
||||
background: var(--nav-selected-bg);
|
||||
font-size: 11px;
|
||||
background: var(--panel);
|
||||
font: 10px var(--mono);
|
||||
}
|
||||
|
||||
.acl-picker-tag>span {
|
||||
@@ -1803,13 +1811,12 @@ html.app-loading,
|
||||
|
||||
.acl-picker-tag .acl-picker-remove {
|
||||
border: none;
|
||||
border-radius: var(--rp-radius-control, 50%);
|
||||
border-radius: var(--rp-radius-control, 0);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
padding: 0 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1940,4 +1947,76 @@ html.app-loading,
|
||||
.web-service-preset-toggles>.check {
|
||||
margin: 0 !important;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
/* Spacing review (0.36.2): descriptive text and blocks that used to touch the next
|
||||
element. Rules only add space where the layout had none; grid/flex gaps are untouched. */
|
||||
.fine+:is(.switch-grid, .settings-tabs, .table-scroll, .soft-card, .appearance-settings-grid, .runtime-information-grid, details),
|
||||
.form-actions+.fine,
|
||||
.table-scroll+:is(.empty, .fine),
|
||||
.empty+.file-logs-pager {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:is(.card-heading, .window-heading)+.fine,
|
||||
h2+.fine {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.location-help-content :is(p, .fine)+:is(p, .fine) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.location-help-content :is(p, .fine, ul, ol, table, pre)+:is(h3, h4) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.cache-toolbar+.function-live-chart,
|
||||
.function-live-chart+.stats-grid,
|
||||
.soft-card+.soft-card,
|
||||
.field-grid+.field-grid {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.function-live-chart-summary+.function-live-chart-body {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tls-pqc-control>:is(.fine, a) {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.tls-pqc-control {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tls-pqc-control>a {
|
||||
justify-self: start;
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#settings-page-tls-policy .switch-grid {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#panel-settings .fine+.settings-tabs.sub-tabs,
|
||||
.fine+.field-grid,
|
||||
.vh-grid+.fine,
|
||||
.logs-card+.log-footnote,
|
||||
.overview-presets-content+.overview-layout-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#settings-page-policies>.edit-form+div {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
#panel-settings .settings-tabs.sub-tabs+:is(div, form) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@@ -130,7 +130,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body[data-density=compact] .sidebar nav,
|
||||
.certificate-coverage {
|
||||
margin-top: 14px;
|
||||
}
|
||||
@@ -688,40 +687,6 @@ body[data-density=compact] .sidebar nav,
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-row {
|
||||
padding: 6px 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-head,
|
||||
body[data-density=compact] .security-stack {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-agent-overview {
|
||||
gap: 4px 12px;
|
||||
margin: 4px 0 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-agent-details {
|
||||
margin-bottom: 6px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-editor {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-editor[open]>summary {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .security-editor {
|
||||
margin-top: 8px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.docker-agent-grid>label {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
@@ -1294,4 +1259,224 @@ html[data-dashboard-density=normal] #panel-overview .stat>span,
|
||||
.global-rate-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Settings rows (0.36.3): label and help on the left, control on the right, one setting per row. */
|
||||
#settings-page-appearance .appearance-section-heading .small-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-section-heading h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(170px, 260px);
|
||||
grid-template-areas: "name control" "help control";
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
column-gap: 24px;
|
||||
row-gap: 3px;
|
||||
margin: 0;
|
||||
padding: 11px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label>span:first-child {
|
||||
grid-area: name;
|
||||
align-self: end;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label>:is(select, input[type=range]) {
|
||||
grid-area: control;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label>small {
|
||||
grid-area: help;
|
||||
align-self: start;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label:not(:has(>small), .check) {
|
||||
grid-template-areas: "name control";
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label:not(:has(>small), .check)>span:first-child {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#settings-page-appearance .refresh-settings-grid>label.check>span,
|
||||
#settings-page-appearance .dashboard-widget-settings-intro>span {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-scale-control>span:first-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Checkbox settings: text on the left, the checkbox on the right edge of the row
|
||||
(.check is display:flex !important, so the row is reversed instead of using grid areas). */
|
||||
#settings-page-appearance .appearance-settings-grid>label.check {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label.check>input {
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label.check>span {
|
||||
grid-area: text;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label.check>span b {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label.check>span small {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-chart-preview {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#settings-page-appearance .dashboard-appearance-grid>.dashboard-widget-settings {
|
||||
margin-top: 4px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
#settings-page-appearance .refresh-settings-grid>label.check {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
#settings-page-appearance .appearance-settings-grid>label {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas: "name" "help" "control";
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
#settings-page-appearance .appearance-settings-grid>label>span:first-child {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Settings navigation (0.36.3) */
|
||||
@media (min-width: 761px) {
|
||||
/* Sub-tabs are a horizontal tab bar; the vertical rail layout is for the main settings menu only. */
|
||||
#panel-settings .settings-tabs.sub-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 5px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#panel-settings .settings-tabs.sub-tabs button {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
padding: 7px 14px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Visual groups in the main menu: appearance / traffic / rules / observability / system / security. */
|
||||
#panel-settings #settings-tabs button:is([data-settings-tab=listeners], [data-settings-tab=policies], [data-settings-tab=logging], [data-settings-tab=administration], [data-settings-tab=certificate-api]) {
|
||||
margin-top: 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#panel-settings #settings-tabs button:is([data-settings-tab=listeners], [data-settings-tab=policies], [data-settings-tab=logging], [data-settings-tab=administration], [data-settings-tab=certificate-api])::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
|
||||
/* Cache and static transformation pages (0.36.3): grouped sections, help attached to its switch. */
|
||||
#cache-form .cache-section-title {
|
||||
margin-top: 20px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#cache-form [data-cache-settings-page=general]>.cache-section-title:first-child {
|
||||
margin-top: 2px;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
:is(#cache-form, #transform-form)>.check:first-of-type,
|
||||
#cache-form [data-cache-settings-page=general]>.check:first-of-type {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:is(#cache-form, #transform-form) .check+.fine {
|
||||
margin: 3px 0 12px 24px;
|
||||
}
|
||||
|
||||
:is(#cache-form, #transform-form) .cache-memory-sizing .card-heading {
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:is(#cache-form, #transform-form) .cache-memory-sizing .card-heading>h3 {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
:is(#cache-form, #transform-form) .field-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
|
||||
column-gap: 14px;
|
||||
}
|
||||
|
||||
#transform-form .switch-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
|
||||
}
|
||||
|
||||
#cache-form #cache-default-ttl {
|
||||
display: block;
|
||||
max-width: 320px;
|
||||
}
|
||||
@@ -430,13 +430,12 @@ html[data-dashboard-density] #panel-overview .dashboard-overview-grid>.card.pool
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 6px;
|
||||
padding: 1px 5px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--pill-line);
|
||||
border-radius: var(--rp-radius-control, 3px);
|
||||
border-radius: var(--rp-radius-control, 0);
|
||||
color: var(--accent);
|
||||
font: 9px var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .35px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.cache-toolbar-message {
|
||||
@@ -574,8 +573,8 @@ html[data-dashboard-density] #panel-overview .dashboard-overview-grid>.card.pool
|
||||
button.config-history-day.has-revisions {
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
border-color: var(--line-strong, var(--line));
|
||||
background: var(--surface, var(--bg));
|
||||
border-color: var(--line);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
button.config-history-day.has-revisions:hover,
|
||||
@@ -834,7 +833,6 @@ html[data-table-density=ultra] .file-log-inline-detail {
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .mini-metrics div,
|
||||
.acl-policy-mode-card input,
|
||||
.docker-service-certificate-bar>.check>input,
|
||||
html[data-table-density=ultra] .file-log-field-grid {
|
||||
@@ -1006,7 +1004,7 @@ html[data-table-density=ultra] .file-log-inline-detail pre {
|
||||
.file-log-advanced-parser {
|
||||
margin: 0 0 1rem;
|
||||
padding: .75rem 1rem;
|
||||
border-radius: var(--rp-radius-surface, var(--radius, 12px));
|
||||
border-radius: var(--rp-radius-surface, 12px);
|
||||
}
|
||||
|
||||
.file-log-aggregate-form {
|
||||
@@ -1074,3 +1072,78 @@ html[data-table-density=ultra] .file-log-inline-detail pre {
|
||||
max-height: 68dvh;
|
||||
font: 11px/1.5 var(--mono);
|
||||
}
|
||||
|
||||
/* Cache → Domains and effectiveness (0.36.3): numeric columns aligned, outcomes coloured like the dashboard bar. */
|
||||
#cache-domain-scroll .cache-table :is(th, td):nth-child(n+3):nth-child(-n+8) {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#cache-domain-scroll .cache-table td:first-child {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#cache-domain-scroll .cache-table td:nth-child(2) {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#cache-domain-scroll .cache-table tbody tr:hover {
|
||||
background: var(--panel2);
|
||||
}
|
||||
|
||||
#cache-domain-scroll .cache-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cache-outcomes-cell {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.cache-outcome-hit {
|
||||
color: var(--chart-accent);
|
||||
}
|
||||
|
||||
.cache-outcome-miss {
|
||||
color: var(--chart-secondary);
|
||||
}
|
||||
|
||||
.cache-outcome-bypass {
|
||||
color: var(--chart-tertiary);
|
||||
}
|
||||
|
||||
.cache-outcome-sep {
|
||||
margin: 0 5px;
|
||||
color: var(--muted);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.cache-ratio-cell {
|
||||
min-width: 96px;
|
||||
}
|
||||
|
||||
.cache-ratio-value {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cache-ratio-meter {
|
||||
display: block;
|
||||
height: 3px;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.cache-ratio-meter>i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--chart-accent);
|
||||
}
|
||||
|
||||
#cache-domain-scroll .cache-reason {
|
||||
border-color: transparent;
|
||||
background: var(--panel2);
|
||||
color: var(--muted);
|
||||
}
|
||||
@@ -302,18 +302,6 @@
|
||||
max-width: calc(100vw - 12px);
|
||||
}
|
||||
|
||||
body[data-density=compact] .sidebar nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body[data-density=compact] .sidebar {
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .topbar {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.sidebar .brand {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -1293,16 +1281,6 @@
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-row {
|
||||
padding: 8px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
body[data-density=compact] .docker-service-head-actions .docker-runtime .pill {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.backend-column-options {
|
||||
width: min(330px, calc(100vw - 32px));
|
||||
min-width: 0;
|
||||
@@ -1703,3 +1681,53 @@
|
||||
--overview-widget-placement: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
#panel-overview .system-card .card-heading {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 12px;
|
||||
}
|
||||
|
||||
#panel-overview .system-card .system-uptime-meta {
|
||||
white-space: normal;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* Docker vhosts (0.36.3): compact service rows - switch | name and details | health and actions. */
|
||||
@media (min-width:900px) {
|
||||
.docker-service-head {
|
||||
grid-template-columns: auto minmax(220px, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 6px 18px;
|
||||
}
|
||||
|
||||
.docker-service-head-actions {
|
||||
grid-column: auto;
|
||||
justify-content: flex-end;
|
||||
gap: 6px 10px;
|
||||
}
|
||||
|
||||
.docker-service-head-actions .docker-runtime {
|
||||
flex: 1 0 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.docker-service-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 1px 14px;
|
||||
}
|
||||
|
||||
.docker-service-meta>b {
|
||||
flex: 0 0 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.docker-service-meta>span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user