2240 lines
50 KiB
CSS
2240 lines
50 KiB
CSS
/* Overview metrics, charts, dashboard density, inline layout controls and presets */
|
|
|
|
html[data-theme=ultra_dark] :is(.card, .stat, dialog) {
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
|
|
}
|
|
|
|
html[data-theme=cream] :is(.card, .stat, dialog) {
|
|
box-shadow: 0 6px 20px rgba(78, 58, 38, .055);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: var(--ui-gap);
|
|
margin-bottom: var(--ui-gap);
|
|
}
|
|
|
|
/* Summary tiles outside the Overview dashboard (Cache, Traffic, Transform) fill
|
|
every row instead of leaving empty grid columns after the last tile. */
|
|
.stats-grid.cache-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stats-grid.cache-stats>.stat {
|
|
flex: 1 1 190px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.stat {
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
position: relative;
|
|
padding: 11px;
|
|
}
|
|
|
|
.stat:first-child {
|
|
border-top: 2px solid var(--accent);
|
|
}
|
|
|
|
.stat small {
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.stat strong {
|
|
display: block;
|
|
font-family: var(--mono);
|
|
font-weight: 450;
|
|
letter-spacing: -1px;
|
|
line-height: 1.3;
|
|
font-size: calc(clamp(20px, 1.8vw, 26px));
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.status-good,
|
|
.stat:first-child small,
|
|
.acl-policy-preview-head .is-allow,
|
|
.acl-profile-rule-action-badge.is-allow,
|
|
.vhost-backend-popup-field.has-success>span:last-child,
|
|
#panel-tls .certificate-operation-card[data-state=complete] .pill,
|
|
#panel-tls .certificate-operation-card[data-state=ready] .pill,
|
|
.cache-hit-key,
|
|
.cache-fill-key {
|
|
color: var(--green);
|
|
}
|
|
|
|
.activity-card #chart-peak {
|
|
margin-left: auto;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#traffic-chart {
|
|
width: 100%;
|
|
height: 107px;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.chart-grid {
|
|
stroke: var(--chart-grid);
|
|
stroke-width: 1;
|
|
fill: none;
|
|
opacity: var(--chart-grid-opacity, .55);
|
|
stroke-dasharray: var(--chart-grid-dash, 2 5);
|
|
}
|
|
|
|
/* Axis labels are HTML overlays, not stretched SVG text. */
|
|
.rp-chart-axis-host {
|
|
position: relative;
|
|
display: flow-root;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rp-chart-axis-host>svg { display: block; vertical-align: top; }
|
|
|
|
.rp-chart-axis-y {
|
|
position: absolute;
|
|
inset: 0 0 15px;
|
|
pointer-events: none;
|
|
font: 9px/1.15 var(--mono);
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.rp-chart-axis-y span {
|
|
position: absolute;
|
|
left: 3px;
|
|
max-width: calc(100% - 6px);
|
|
padding: 1px 3px;
|
|
border-radius: 2px;
|
|
white-space: nowrap;
|
|
background: color-mix(in srgb, var(--panel) 82%, transparent);
|
|
}
|
|
|
|
.rp-chart-axis-top { top: var(--rp-axis-top, 8%); transform: translateY(-30%); }
|
|
.rp-chart-axis-middle { top: 50%; transform: translateY(-50%); }
|
|
.rp-chart-axis-bottom { top: var(--rp-axis-bottom, 92%); transform: translateY(-70%); }
|
|
|
|
.rp-chart-axis-x {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
gap: 5px;
|
|
min-height: 15px;
|
|
padding: 2px 3px 0;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font: 9px/1.2 var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.rp-chart-axis-x .rp-chart-axis-start { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
.rp-chart-axis-x .rp-chart-axis-end { min-width: 0; text-align: right; }
|
|
.rp-chart-axis-compact .rp-chart-axis-y,
|
|
.rp-chart-axis-multiple .rp-chart-axis-y,
|
|
.rp-chart-axis-series[hidden] { display: none; visibility: hidden; }
|
|
.rp-chart-axis-compact .rp-chart-axis-x { font-size: 8px; gap: 2px; }
|
|
.rp-chart-axis-series {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px 10px;
|
|
padding: 2px 3px;
|
|
font: 8px/1.2 var(--mono);
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.rp-chart-axis-y .rp-chart-axis-middle { display: none; }
|
|
.rp-chart-axis-x { font-size: 8px; }
|
|
}
|
|
|
|
.chart-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
gap: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.mini-metrics dd {
|
|
overflow-wrap: anywhere;
|
|
font: 10px var(--mono);
|
|
margin: 0;
|
|
text-align: end;
|
|
min-width: 0;
|
|
}
|
|
|
|
.system-card h2 {
|
|
font: 23px var(--mono);
|
|
}
|
|
|
|
#system-chart {
|
|
display: block;
|
|
width: 100%;
|
|
height: 65px;
|
|
}
|
|
|
|
.memory-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-size: 9px;
|
|
color: var(--muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.memory-line b {
|
|
font-weight: 400;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.mini-metrics {
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
.mini-metrics div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.mini-metrics dt,
|
|
.acl-policy-condition b {
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.mini-live-chart-stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mini-live-chart {
|
|
min-width: 0;
|
|
margin-top: 10px;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.mini-live-chart-stack .mini-live-chart,
|
|
.runtime-information-card {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mini-live-chart-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
margin-bottom: 5px;
|
|
color: var(--muted);
|
|
font: 10px var(--mono);
|
|
}
|
|
|
|
.mini-live-chart-head b {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
|
|
.mini-live-chart svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 60px;
|
|
overflow: visible;
|
|
filter: var(--chart-svg-filter);
|
|
}
|
|
|
|
.mini-chart-legend {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 3px;
|
|
font: 9px var(--mono);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.mini-chart-legend span:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 2px;
|
|
margin-right: 4px;
|
|
vertical-align: middle;
|
|
background: currentColor;
|
|
}
|
|
|
|
.vh-group legend {
|
|
font-weight: 600;
|
|
padding: 0 5px;
|
|
color: var(--text);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.pool-card .fine {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.pool-table {
|
|
font-size: 11px;
|
|
width: 100%;
|
|
min-width: 640px;
|
|
}
|
|
|
|
.pool-table td:nth-child(n/**/+4) {
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
[dir=rtl] table,
|
|
.pool-table th:nth-child(n/**/+4),
|
|
.logging-builder-action .small-label {
|
|
text-align: right;
|
|
}
|
|
|
|
.pool-table td:first-child,
|
|
.pool-table td:nth-child(2) {
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.window-heading h2,
|
|
.card-heading h2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notice.fine,
|
|
.stat p,
|
|
.pool-card>.fine,
|
|
.vh-header-row label span,
|
|
.docker-protocol-fixed small {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.activity-card svg {
|
|
height: 105px;
|
|
}
|
|
|
|
.system-card svg {
|
|
height: 80px;
|
|
}
|
|
|
|
.pool-card {
|
|
margin-bottom: var(--ui-gap);
|
|
}
|
|
|
|
.pool-table td,
|
|
.pool-table th {
|
|
white-space: nowrap;
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
.pool-card .table-scroll {
|
|
max-height: 205px;
|
|
}
|
|
|
|
body[data-density=dense] .stat strong {
|
|
font-size: 22px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.traffic-chart-grid,
|
|
.logging-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin: 14px 0;
|
|
}
|
|
|
|
.traffic-chart-legend {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
min-width: 0;
|
|
}
|
|
|
|
.traffic-chart-legend li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.traffic-chart-legend li>span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.traffic-chart-swatch {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.traffic-chart-label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.traffic-chart-legend b {
|
|
font: 700 10px var(--mono);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.traffic-wide-chart,
|
|
#panel-overview .dashboard-overview-grid>.card:not(.pool-card),
|
|
.docker-alias-field,
|
|
.docker-acl-grid .docker-profile-field,
|
|
.docker-agent-grid .docker-profile-field {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.traffic-bar-chart {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.vhost-chart {
|
|
border: 1px solid var(--line);
|
|
margin-top: 9px;
|
|
background: var(--chart-surface-alt);
|
|
}
|
|
|
|
.vhost-chart-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 7px 10px 0;
|
|
}
|
|
|
|
.vhost-chart svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 54px;
|
|
filter: var(--chart-svg-filter);
|
|
}
|
|
|
|
.pool-vhost-disabled {
|
|
opacity: .55;
|
|
background: var(--neutral-soft);
|
|
}
|
|
|
|
.stream-chart-rx {
|
|
fill: none;
|
|
stroke-width: var(--chart-line-width);
|
|
stroke-linecap: var(--chart-linecap);
|
|
stroke-linejoin: var(--chart-linejoin);
|
|
vector-effect: non-scaling-stroke;
|
|
stroke: var(--chart-accent);
|
|
}
|
|
|
|
.stream-chart-tx {
|
|
fill: none;
|
|
stroke-width: var(--chart-line-width);
|
|
stroke-linecap: var(--chart-linecap);
|
|
stroke-linejoin: var(--chart-linejoin);
|
|
vector-effect: non-scaling-stroke;
|
|
stroke: var(--chart-secondary);
|
|
}
|
|
|
|
.stream-chart-legend {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
padding: 0 10px 7px;
|
|
color: var(--muted);
|
|
font: 10px var(--mono);
|
|
}
|
|
|
|
.redirect-rule legend {
|
|
padding: 0 .4rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.traffic-protocol-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px 16px;
|
|
margin: 2px 0 7px;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
}
|
|
|
|
.traffic-protocol-legend i {
|
|
width: 12px;
|
|
height: 2px;
|
|
display: inline-block;
|
|
background: var(--muted);
|
|
}
|
|
|
|
.traffic-protocol-legend .legend-h1 i {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.traffic-protocol-legend .legend-h2 i {
|
|
background: var(--green);
|
|
}
|
|
|
|
.traffic-protocol-legend .legend-h3 i {
|
|
background: var(--blue);
|
|
}
|
|
|
|
.traffic-protocol-legend .legend-transform i {
|
|
background: var(--transform-chart);
|
|
}
|
|
|
|
.traffic-protocol-legend b {
|
|
color: var(--text);
|
|
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;
|
|
overflow: auto;
|
|
gap: 8px;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.stat-with-action {
|
|
padding-right: 116px;
|
|
}
|
|
|
|
.stat-corner-action {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Keep the block title clear of the corner button whatever padding the grid applies. */
|
|
#panel-overview .stat-with-action>span:first-child {
|
|
display: block;
|
|
padding-right: 104px;
|
|
}
|
|
|
|
#panel-overview .stat-with-action .stat-corner-action {
|
|
max-width: 96px;
|
|
padding: 3px 7px;
|
|
font-size: 11px;
|
|
line-height: 1.25;
|
|
white-space: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-unlocked .stat-with-action .stat-corner-action {
|
|
top: 44px;
|
|
}
|
|
|
|
.stat-chart strong {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.stat-chart svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 26px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 6px 10px;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend i {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
display: inline-block;
|
|
background: currentColor;
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend .legend-h1 i,
|
|
#panel-overview .backend-mode-h1 {
|
|
background: var(--traffic-h1);
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend .legend-h2 i,
|
|
#panel-overview .backend-mode-auto {
|
|
background: var(--traffic-h2);
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend .legend-h3 i,
|
|
#panel-overview .backend-mode-h2 {
|
|
background: var(--traffic-h3);
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend b {
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-chart .chart-grid {
|
|
opacity: var(--chart-grid-opacity, .28);
|
|
}
|
|
|
|
.function-live-chart {
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.function-live-chart-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 52px;
|
|
padding: 13px 15px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.function-live-chart-summary:before {
|
|
content: "▸";
|
|
flex: 0 0 auto;
|
|
color: var(--muted);
|
|
font: 12px var(--mono);
|
|
}
|
|
|
|
.function-live-chart[open]>.function-live-chart-summary:before {
|
|
content: "▾";
|
|
}
|
|
|
|
.function-live-chart-heading {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.function-live-chart-heading strong {
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.function-live-chart-heading small {
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
}
|
|
|
|
.function-live-chart-summary>b {
|
|
flex: 0 0 auto;
|
|
color: var(--text);
|
|
font: 11px var(--mono);
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.function-live-chart-body {
|
|
border-top: 1px solid var(--line);
|
|
padding: 14px 15px 12px;
|
|
}
|
|
|
|
.function-live-chart svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 180px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.function-live-chart-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px 18px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.function-live-chart-samples {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.function-live-chart-samples select {
|
|
min-width: 116px;
|
|
padding: 5px 25px 5px 8px;
|
|
font: 10px var(--mono);
|
|
}
|
|
|
|
.function-live-chart-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 7px 16px;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
}
|
|
|
|
.function-live-chart-legend i,
|
|
.connection-legend i {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 2px;
|
|
background: currentColor;
|
|
}
|
|
|
|
.runtime-information-card h3 {
|
|
margin: 16px 0 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.runtime-information-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.runtime-information-grid>div {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.runtime-information-grid code {
|
|
overflow-wrap: anywhere;
|
|
white-space: normal;
|
|
}
|
|
|
|
.connection-card h2 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
|
|
.connection-card h2 small {
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.connection-card svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.connection-exchange-line {
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 2;
|
|
stroke: var(--chart-secondary);
|
|
}
|
|
|
|
.connection-open-line {
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 2;
|
|
stroke: var(--chart-accent);
|
|
}
|
|
|
|
.connection-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px 14px;
|
|
margin: 4px 0 8px;
|
|
color: var(--muted);
|
|
font: 9px var(--mono);
|
|
}
|
|
|
|
.connection-open-key {
|
|
color: var(--accent) !important;
|
|
}
|
|
|
|
.connection-exchange-key {
|
|
color: var(--green) !important;
|
|
}
|
|
|
|
.dashboard-widget-setting-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.appearance-chart-preview {
|
|
min-height: 118px;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--rp-radius-surface, 0);
|
|
background: var(--chart-surface);
|
|
}
|
|
|
|
.appearance-chart-preview svg {
|
|
width: 100%;
|
|
height: 78px;
|
|
filter: var(--chart-svg-filter);
|
|
}
|
|
|
|
.appearance-chart-preview polyline {
|
|
fill: none;
|
|
stroke-width: var(--chart-line-width);
|
|
stroke-linecap: var(--chart-linecap);
|
|
stroke-linejoin: var(--chart-linejoin);
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.appearance-chart-primary,
|
|
#panel-overview .overview-wide-series-0,
|
|
#panel-overview .overview-donut-hit,
|
|
#panel-overview .www-ring-0,
|
|
.www-dot-0,
|
|
.cache-miss-line,
|
|
#sparkline-h1.traffic-line-h1,
|
|
.cache-hot-line,
|
|
.cache-transient-total-line {
|
|
stroke: var(--chart-accent);
|
|
}
|
|
|
|
.chart-style-palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.chart-style-choice {
|
|
display: grid;
|
|
grid-template-columns: 42px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
padding: 5px 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--rp-radius-control, 0);
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
text-align: left;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.chart-style-choice.active,
|
|
.docker-service-row.is-dirty {
|
|
border-color: var(--accent);
|
|
box-shadow: inset 3px 0 0 var(--accent);
|
|
}
|
|
|
|
.chart-style-swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
height: 16px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.chart-style-swatches i:first-child {
|
|
background: var(--sw1);
|
|
}
|
|
|
|
.chart-style-swatches i:nth-child(2) {
|
|
background: var(--sw2);
|
|
}
|
|
|
|
.chart-style-swatches i:nth-child(3) {
|
|
background: var(--sw3);
|
|
}
|
|
|
|
.chart-style-swatches i:nth-child(4) {
|
|
background: var(--sw4);
|
|
}
|
|
|
|
.dashboard-widget-settings {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 5px;
|
|
}
|
|
|
|
.dashboard-widget-list {
|
|
min-width: 0;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
|
|
margin-top: 4px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dashboard-widget-setting {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
min-height: 34px;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 1 280px;
|
|
min-width: min(280px, 100%);
|
|
max-width: 100%;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.dashboard-widget-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
min-height: 26px;
|
|
padding: 3px 6px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
}
|
|
|
|
.dashboard-widget-visibility {
|
|
flex: 0 0 8px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 1px solid var(--green);
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
}
|
|
|
|
.dashboard-widget-toggle.is-hidden .dashboard-widget-visibility {
|
|
border-color: var(--muted);
|
|
background: transparent;
|
|
}
|
|
|
|
.dashboard-widget-setting-actions {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.dashboard-widget-setting-actions button {
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
padding: 1px 5px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
:is(.stat-chart, .activity-card, .system-card, .function-live-chart) svg,
|
|
:is(.traffic-donut, .traffic-bar-chart span) {
|
|
filter: var(--chart-svg-filter);
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stats-grid,
|
|
html[data-dashboard-density=normal] #panel-overview .stats-grid,
|
|
html[data-dashboard-density=ultra] #panel-overview .stats-grid {
|
|
gap: var(--ui-gap);
|
|
}
|
|
|
|
html[data-dashboard-density=normal] #panel-overview .stat,
|
|
#panel-tls .certificate-inventory-card,
|
|
#panel-tls .certificate-generator-card {
|
|
padding: 14px;
|
|
}
|
|
|
|
html[data-dashboard-density=normal] #panel-overview .stat strong {
|
|
font-size: 26px;
|
|
margin: 6px 0 4px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat {
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat>span {
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat-cache-outcomes .cache-mix-header>span {
|
|
font-size: 11px;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat strong {
|
|
font-size: 22px;
|
|
margin: 3px 0 2px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat small {
|
|
font-size: 10px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .payload-split {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat {
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat>span {
|
|
font-size: 9px;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-mix-header>span {
|
|
line-height: 1.08;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat strong {
|
|
font-size: 18px;
|
|
margin: 2px 0 1px;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat small {
|
|
font-size: 7.5px;
|
|
line-height: 1.12;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .stat-chart svg {
|
|
height: 24px;
|
|
}
|
|
|
|
html[data-dashboard-density=normal] #panel-overview .stat-chart svg {
|
|
height: 34px;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .stat-chart svg {
|
|
height: 28px;
|
|
}
|
|
|
|
html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
|
stroke-width: var(--chart-line-width);
|
|
stroke-linecap: var(--chart-linecap);
|
|
stroke-linejoin: var(--chart-linejoin);
|
|
}
|
|
|
|
.system-info-heading-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.system-info-heading-actions .pill,
|
|
.docker-open-logs,
|
|
.docker-open-app,
|
|
.config-history-detail-actions button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stream-backend-row>legend {
|
|
font-weight: 650;
|
|
padding: 0 .35rem;
|
|
}
|
|
|
|
.dashboard-widget-toggle:focus-visible,
|
|
.file-log-tab:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
#panel-overview .stream-traffic-legend .legend-rx i,
|
|
#panel-overview .www-ring-legend i,
|
|
#panel-overview .www-segment-0,
|
|
#panel-overview .cache-mix-hit,
|
|
#panel-overview .cache-mix-hit-key i {
|
|
background: var(--chart-accent);
|
|
}
|
|
|
|
#panel-overview .stats-grid .stat-chart>.stat-chart-legend,
|
|
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom] .overview-wide-legend,
|
|
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom] .stat-chart-legend {
|
|
flex-wrap: wrap;
|
|
white-space: normal;
|
|
}
|
|
|
|
#panel-overview .backend-mode-bar {
|
|
display: flex;
|
|
height: 7px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
gap: 2px;
|
|
border-radius: var(--rp-radius-surface, 5px);
|
|
background: var(--line);
|
|
margin: 7px 0 5px;
|
|
}
|
|
|
|
#panel-overview .backend-mode-compat {
|
|
background: var(--traffic-h2);
|
|
opacity: .5;
|
|
}
|
|
|
|
#panel-overview .backend-mode-bar[aria-label] {
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#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>.pool-card {
|
|
grid-column: 1/-1;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.overview-widget-type {
|
|
display: inline-block;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 2px 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--rp-radius-control, 4px);
|
|
background: var(--panel2);
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.dashboard-widget-setting .overview-widget-type {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.overview-inline-actions {
|
|
display: inline-flex;
|
|
gap: 7px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.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: 40px !important;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget]:hover,
|
|
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget]:focus-within {
|
|
outline-style: solid;
|
|
}
|
|
|
|
/* While sorting, the grid keeps strict DOM order: the placeholder is exactly where the block lands. */
|
|
#panel-overview .dashboard-overview-grid.is-overview-sorting {
|
|
grid-auto-flow: row !important;
|
|
user-select: none;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder {
|
|
grid-column: auto/span 2;
|
|
box-sizing: border-box;
|
|
border: 2px dashed var(--accent);
|
|
border-radius: var(--rp-radius-surface, 9px);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="3"] { grid-column: auto/span 3; }
|
|
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="4"] { grid-column: auto/span 4; }
|
|
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="6"] { grid-column: auto/span 6; }
|
|
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder[data-dashboard-span="12"] { grid-column: 1/-1; }
|
|
|
|
#panel-overview .dashboard-overview-grid>.is-overview-lifted,
|
|
#panel-overview .dashboard-overview-grid>.is-overview-lifted * {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.is-overview-lifted {
|
|
box-shadow: 0 18px 40px rgb(0 0 0 / .28), 0 0 0 2px var(--accent);
|
|
opacity: .94;
|
|
transition: none;
|
|
will-change: transform;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overview-inline-toolbar {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
right: 5px;
|
|
z-index: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
gap: 3px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar button {
|
|
min-width: 26px;
|
|
min-height: 26px;
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* Narrow blocks keep only the essentials; arrow keys on the grip still move them. */
|
|
#panel-overview .dashboard-overview-grid>[data-dashboard-span="2"] .overview-inline-toolbar :is(.overview-widget-type, .overview-inline-up, .overview-inline-down),
|
|
#panel-overview .dashboard-overview-grid>[data-dashboard-span="3"] .overview-inline-toolbar :is(.overview-inline-up, .overview-inline-down) {
|
|
display: none;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>[data-dashboard-span="2"] .overview-inline-toolbar .overview-inline-hide {
|
|
margin-left: auto;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar .overview-inline-grip {
|
|
cursor: grab;
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar .overview-inline-grip:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar .overview-widget-type {
|
|
margin: 0 auto 0 0;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar .overview-inline-hide {
|
|
color: var(--red);
|
|
border: 1px solid var(--danger-line);
|
|
background: var(--panel);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#panel-overview .overview-inline-toolbar .overview-inline-hide:focus-visible,
|
|
#panel-overview .overview-inline-toolbar .overview-inline-hide:hover {
|
|
border-color: var(--danger-line-strong);
|
|
background: var(--notice-bg);
|
|
}
|
|
|
|
.overview-inline-hidden {
|
|
margin: 0 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--rp-radius-surface, 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,
|
|
.vhost-backend-protocol-badge:focus-visible,
|
|
.vhost-backend-trigger:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.overview-inline-hidden-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
max-height: calc(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: var(--rp-radius-surface, 7px);
|
|
color: var(--text);
|
|
background: var(--panel2);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.overview-inline-hidden-item>button {
|
|
flex: 0 0 auto;
|
|
min-width: 27px;
|
|
min-height: 27px;
|
|
padding: 1px 7px;
|
|
border-radius: var(--rp-radius-control, 5px);
|
|
border: 1px solid var(--field-line);
|
|
color: var(--green);
|
|
background: var(--panel);
|
|
}
|
|
|
|
#panel-overview {
|
|
container: overview-canvas / inline-size;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned {
|
|
display: grid;
|
|
--overview-gap: var(--ui-gap);
|
|
margin: 0;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
grid-auto-flow: row;
|
|
grid-auto-rows: auto;
|
|
align-items: stretch;
|
|
align-content: start;
|
|
gap: var(--overview-gap);
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned.stats-grid {
|
|
gap: var(--overview-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;
|
|
}
|
|
|
|
.page-source,
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.pool-card,
|
|
.acl-policy-mode-custom,
|
|
.stream-backend-section,
|
|
.web-service-setting-section,
|
|
.renewal-entry .fine {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.card.overview-row-start,
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.overview-row-start,
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget].overview-row-start {
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
#panel-overview .overview-wide-chart {
|
|
padding: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
html[data-dashboard-density=normal] #panel-overview .dashboard-overview-grid>.card:not(.pool-card) {
|
|
padding: 13px;
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .dashboard-overview-grid>.card:not(.pool-card) {
|
|
padding: 10px;
|
|
}
|
|
|
|
html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.card:not(.pool-card) {
|
|
padding: 7px;
|
|
}
|
|
|
|
#panel-overview .overview-wide-chart .card-heading {
|
|
min-width: 0;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
#panel-overview .overview-wide-chart h2,
|
|
.file-log-field span {
|
|
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: 125px;
|
|
margin-block: 13px 9px;
|
|
}
|
|
|
|
#panel-overview .overview-wide-svg .chart-grid {
|
|
vector-effect: non-scaling-stroke;
|
|
stroke: var(--line);
|
|
fill: none;
|
|
stroke-width: 1;
|
|
opacity: .6;
|
|
}
|
|
|
|
#panel-overview .overview-wide-series {
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 2;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
#panel-overview .overview-wide-series-2,
|
|
#panel-overview .www-ring-2,
|
|
.www-dot-2,
|
|
.cache-bypass-line,
|
|
#sparkline-h3.traffic-line-h3,
|
|
.cache-cold-line,
|
|
.cache-queue-line {
|
|
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-2,
|
|
#panel-overview .www-ring-legend .www-dot-2,
|
|
#panel-overview .www-segment-2,
|
|
#panel-overview .cache-mix-bypass,
|
|
#panel-overview .cache-mix-bypass-key i {
|
|
background: var(--chart-tertiary);
|
|
}
|
|
|
|
#panel-overview .overview-wide-legend b {
|
|
font: 500 11px var(--mono);
|
|
color: var(--text);
|
|
}
|
|
|
|
.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-inline-hidden-item>.overview-widget-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.overview-inline-hidden-item>.overview-inline-restore {
|
|
order: 3;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dashboard-widget-setting .dashboard-widget-toggle {
|
|
width: auto;
|
|
flex: 1 1 auto;
|
|
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;
|
|
}
|
|
|
|
.appearance-settings-grid.dashboard-appearance-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.appearance-settings-grid.dashboard-appearance-grid>.dashboard-density-setting {
|
|
display: grid;
|
|
grid-template-columns: minmax(145px, 200px) minmax(180px, 290px) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-appearance-grid>.dashboard-widget-settings {
|
|
grid-column: 1/-1;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dashboard-widget-settings-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
}
|
|
|
|
.dashboard-widget-settings-intro {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
flex: 1 1 290px;
|
|
}
|
|
|
|
.dashboard-widget-settings-controls {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dashboard-widget-settings-controls>.dashboard-widget-scroll-button {
|
|
min-width: 30px;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 2px 1px 9px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: thin;
|
|
overscroll-behavior-x: contain;
|
|
scroll-snap-type: x proximity;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list>.dashboard-widget-setting {
|
|
flex: 0 0 226px;
|
|
width: 226px;
|
|
min-width: 226px;
|
|
max-width: 226px;
|
|
min-height: 33px;
|
|
box-sizing: border-box;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list.is-expanded {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(225px, 100%), 1fr));
|
|
gap: 7px;
|
|
overflow: visible;
|
|
padding-bottom: 0;
|
|
scroll-snap-type: none;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list.is-expanded>.dashboard-widget-setting {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
}
|
|
|
|
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-inline-hidden-item, .overview-inline-hidden, .notice, .toast, .chart-style-choice, .pool-card, .vhost-card, .vh-backend-card, .entity, .settings-filter-row, .stream-backend-row, .file-log-advanced-parser, .metric-info-popover),
|
|
html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-style=rounded], [data-corner-style=extra]) :is(.backend-column-options, .renewal-meta-item) {
|
|
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(.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;
|
|
}
|
|
|
|
#panel-overview .stat-meter>.overview-meter {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 10px;
|
|
margin: 9px 0 8px;
|
|
overflow: hidden;
|
|
border-radius: var(--rp-progress-radius);
|
|
background: var(--rp-progress-track);
|
|
}
|
|
|
|
#panel-overview .overview-meter-fill {
|
|
display: block;
|
|
width: 0;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--rp-progress-fill);
|
|
transition: width .18s;
|
|
}
|
|
|
|
#panel-overview .system-card .system-memory-meter {
|
|
display: block;
|
|
width: 100%;
|
|
height: 5px;
|
|
margin: 6px 0 9px;
|
|
overflow: hidden;
|
|
background: var(--rp-progress-track);
|
|
border-radius: var(--rp-progress-radius);
|
|
}
|
|
|
|
#panel-overview .stat-meter>small,
|
|
.file-log-search-help-popover code {
|
|
display: block;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
margin: 4px 0 2px;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-svg {
|
|
display: block;
|
|
width: 62px;
|
|
height: 62px;
|
|
flex: 0 0 62px;
|
|
overflow: visible;
|
|
filter: var(--chart-svg-filter);
|
|
}
|
|
|
|
#panel-overview .overview-donut-svg circle {
|
|
fill: none;
|
|
stroke-width: 9;
|
|
transform: rotate(-90deg);
|
|
transform-origin: 32px 32px;
|
|
}
|
|
|
|
#panel-overview .overview-donut-track {
|
|
stroke: var(--line);
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-legend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .overview-donut-legend>span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-overview .overview-donut-legend i {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 8px;
|
|
border-radius: 50%;
|
|
background: var(--chart-accent);
|
|
}
|
|
|
|
#panel-overview .overview-donut-legend b {
|
|
color: var(--text);
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
}
|
|
|
|
#panel-overview .overview-wide-series-3,
|
|
#panel-overview .www-ring-3,
|
|
.www-dot-3,
|
|
.cache-io-line {
|
|
stroke: var(--chart-quaternary);
|
|
}
|
|
|
|
#panel-overview .overview-wide-legend .overview-wide-key-3,
|
|
#panel-overview .www-ring-legend .www-dot-3,
|
|
#panel-overview .www-segment-3 {
|
|
background: var(--chart-quaternary);
|
|
}
|
|
|
|
.page-intro .overview-samples-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px 12px;
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
margin: 0 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.page-intro .overview-samples-toolbar .function-live-chart-samples select {
|
|
min-width: 100px;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-info>strong {
|
|
display: block;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-info>.overview-donut-legend {
|
|
gap: 2px;
|
|
}
|
|
|
|
#panel-overview .www-ring-legend {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
column-gap: 7px;
|
|
row-gap: 5px;
|
|
}
|
|
|
|
#panel-overview .www-ring-legend span {
|
|
white-space: nowrap;
|
|
font-size: 10px;
|
|
}
|
|
|
|
#panel-overview .www-ring-arc {
|
|
stroke-width: 9;
|
|
}
|
|
|
|
#panel-overview .www-segmented {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 10px;
|
|
margin: 9px 0 8px;
|
|
background: var(--rp-progress-track);
|
|
border-radius: var(--rp-progress-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#panel-overview .www-segmented span {
|
|
display: block;
|
|
height: 100%;
|
|
transition: width .18s;
|
|
}
|
|
|
|
#panel-overview .www-segment-4,
|
|
#panel-overview .cache-mix-other-key i {
|
|
background: var(--muted);
|
|
}
|
|
|
|
#panel-overview .www-top-bars {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
min-height: 90px;
|
|
}
|
|
|
|
#panel-overview .www-top-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(60px, 1fr) minmax(30px, 2fr) auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
font: 11px var(--mono);
|
|
font-family: var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#panel-overview .www-top-row>span,
|
|
.file-log-column-picker .log-column-option span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#panel-overview .www-top-meter {
|
|
height: 7px;
|
|
background: var(--rp-progress-track);
|
|
border-radius: var(--rp-progress-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#panel-overview .www-top-meter span {
|
|
display: block;
|
|
background: var(--rp-progress-fill);
|
|
border-radius: inherit;
|
|
height: 100%;
|
|
}
|
|
|
|
#panel-overview .www-top-row b {
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
#panel-web-server .www-service-panel {
|
|
min-width: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#panel-web-server .www-service-split {
|
|
color: var(--muted);
|
|
font: 11px var(--mono);
|
|
overflow-wrap: anywhere;
|
|
margin: 4px 10px 8px;
|
|
}
|
|
|
|
/* Custom layouts follow the saved order exactly (no implicit back-filling of gaps);
|
|
"Fill gaps" in the layout editor compacts explicitly. */
|
|
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom] {
|
|
grid-auto-flow: row;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {
|
|
--overview-widget-placement: auto/span 2;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="3"] {
|
|
--overview-widget-placement: auto/span 3;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"] {
|
|
--overview-widget-placement: auto/span 4;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="6"] {
|
|
--overview-widget-placement: auto/span 6;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="12"] {
|
|
--overview-widget-placement: 1/-1;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget]:is([data-dashboard-span="2"], [data-dashboard-span="3"], [data-dashboard-span="4"], [data-dashboard-span="6"], [data-dashboard-span="12"]) {
|
|
grid-column: var(--overview-widget-placement);
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom]>[data-dashboard-widget].overview-row-start {
|
|
grid-column-start: auto;
|
|
}
|
|
|
|
#panel-overview .overview-inline-width {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
font: 11px var(--mono);
|
|
color: var(--text);
|
|
gap: 3px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#panel-overview .overview-inline-width-value {
|
|
min-width: 31px;
|
|
text-align: center;
|
|
}
|
|
|
|
#panel-overview :is(.system-card, .connection-card) :is(.card-heading h2, .card-heading .meta, .memory-line, .chart-footer, .connection-legend),
|
|
:is(.overview-wide-summary, .overview-wide-legend, .overview-donut-legend, .www-method-legend, .stat-chart-legend, .mini-chart-legend, .connection-legend, .traffic-protocol-legend, .traffic-chart-legend, .function-live-chart-legend, .stream-chart-legend, .chart-footer, .vhost-chart-head, .network-interface-rate),
|
|
#panel-overview .overview-wide-chart>.fine,
|
|
#panel-overview .stat-chart>small {
|
|
font-family: var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#panel-overview :is(.system-card, .connection-card) .card-heading h2 {
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.overview-presets-dialog {
|
|
width: calc(min(730px, 100vw - 24px));
|
|
max-height: calc(100dvh - 24px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.overview-presets-content {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.overview-presets-create,
|
|
.overview-presets-list,
|
|
.appearance-settings-grid>label {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.overview-presets-create-controls,
|
|
.listener-active-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.overview-presets-create-controls input {
|
|
min-width: 150px;
|
|
flex: 1 1 240px;
|
|
}
|
|
|
|
.overview-presets-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--rp-radius-surface, var(--radius, 8px));
|
|
background: var(--panel);
|
|
}
|
|
|
|
.overview-presets-row strong {
|
|
font-size: 13px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.overview-presets-actions,
|
|
.renewal-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
#panel-overview .activity-card .card-heading h2,
|
|
#panel-overview .overview-wide-chart .card-heading h2,
|
|
#panel-overview :is(.stat-chart, .stat-donut)>span:first-child,
|
|
.mini-live-chart>.mini-live-chart-head>span:first-child {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#panel-overview :is(.system-card, .connection-card) .overview-chart-heading {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: uppercase;
|
|
color: var(--text);
|
|
margin: 0 0 5px;
|
|
}
|
|
|
|
.function-live-chart-heading>strong,
|
|
.traffic-chart-card>h3.subheading,
|
|
.vhost-chart-head>span:first-child {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
#panel-overview :is(.overview-wide-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stat-chart-legend, .mini-chart-legend, .connection-legend, .traffic-protocol-legend, .stream-traffic-legend),
|
|
:is(.overview-wide-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stat-chart-legend, .mini-chart-legend, .connection-legend, .traffic-protocol-legend, .traffic-chart-legend, .function-live-chart-legend, .stream-chart-legend, .stream-traffic-legend) {
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#panel-overview :is(.overview-wide-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stat-chart-legend, .mini-chart-legend, .connection-legend, .traffic-protocol-legend, .stream-traffic-legend) :is(span, b, strong, small, li, em),
|
|
:is(.overview-wide-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stat-chart-legend, .mini-chart-legend, .connection-legend, .traffic-protocol-legend, .traffic-chart-legend, .function-live-chart-legend, .stream-chart-legend, .stream-traffic-legend) :is(span, b, strong, small, li, em) {
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stream-traffic-legend),
|
|
html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .overview-donut-legend, .www-ring-legend, .www-method-legend, .stream-traffic-legend) :is(span, b, small, strong, li) {
|
|
font-size: 9px;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.card .mini-heading>h3,
|
|
#panel-overview .dashboard-overview-grid>.card .overview-chart-heading,
|
|
#panel-overview .dashboard-overview-grid>.stat>span:first-child {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
color: var(--muted);
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.card:is(.overview-wide-chart, .activity-card, .pool-card) .card-heading h2 {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>[data-dashboard-widget] :is(small, .mini-metrics dt, .mini-metrics dd, .mini-live-chart-head, .memory-line, .chart-footer, .small-label, .meta, .fine) {
|
|
font-family: var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
text-transform: none;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid .mini-live-chart>.mini-live-chart-head>span:first-child {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#panel-overview .stat-cache-outcomes .cache-mix-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .stat-cache-outcomes .cache-mix-header>span {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
color: var(--muted);
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
#panel-overview .stat-cache-outcomes .cache-mix-caption {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
color: var(--muted);
|
|
font: 500 10px/1.35 var(--mono);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#panel-overview .stat-cache-outcomes .cache-mix-bar {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 12px;
|
|
margin: 7px 0 9px;
|
|
border-radius: var(--rp-progress-radius);
|
|
background: var(--rp-progress-track);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#panel-overview .cache-mix-bar>span {
|
|
display: block;
|
|
height: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .cache-mix-other {
|
|
background: var(--muted);
|
|
opacity: .65;
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 7px;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend>span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend i {
|
|
display: inline-block;
|
|
flex: 0 0 7px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: var(--rp-radius-control, 2px);
|
|
}
|
|
|
|
#panel-overview .stream-traffic-legend .legend-tx i,
|
|
#panel-overview .overview-wide-legend .overview-wide-key-1,
|
|
#panel-overview .overview-donut-miss-key i,
|
|
#panel-overview .www-ring-legend .www-dot-1,
|
|
#panel-overview .www-segment-1,
|
|
#panel-overview .cache-mix-miss,
|
|
#panel-overview .cache-mix-miss-key i {
|
|
background: var(--chart-secondary);
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend b {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 2px;
|
|
margin-left: 1px;
|
|
color: var(--text);
|
|
font: 500 9px var(--mono);
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend .cache-mix-percent {
|
|
color: var(--muted);
|
|
font: 400 8px var(--mono);
|
|
}
|
|
|
|
#panel-overview .cache-mix-legend .cache-mix-percent::before {
|
|
content: "· ";
|
|
}
|
|
|
|
#panel-overview .system-card .system-uptime-meta,
|
|
#panel-overview .connection-card .connection-backends-meta {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#panel-overview .system-card .system-uptime-meta b,
|
|
#panel-overview .connection-card .connection-backends-meta b {
|
|
color: var(--text);
|
|
font-weight: 650;
|
|
}
|
|
|
|
#panel-overview .connection-card .connection-heading-main {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .connection-card .connection-current-main {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-overview .connection-card .connection-backends-meta {
|
|
margin-left: auto;
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* Live values stay on one line so refreshes do not change card heights. */
|
|
.mini-live-chart-head> :last-child,
|
|
.network-interface-row-head .network-interface-head-actions {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mini-live-chart-head>span:first-child {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|