v0.36.8
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
1ac94213e0
commit
0119b11005
28 files changed
+698
-153
No files matched your search
@@ -758,7 +758,8 @@ progress::-moz-progress-bar {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#pool-search {
|
||||
#pool-search,
|
||||
#bo-search {
|
||||
width: calc(min(250px, 30vw));
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
@@ -2349,3 +2349,108 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Backends overview card (0.36.7): follows table density (global table rules), corner style tokens and interface colours */
|
||||
#panel-overview .backend-overview-card.is-no-proxy { display: none !important; }
|
||||
.bo-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
|
||||
.bo-summary { color: var(--muted); font: 11px var(--mono); }
|
||||
.bo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
|
||||
.bo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--rp-radius-control, 0); background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); cursor: pointer; }
|
||||
.bo-chip:hover { color: var(--text); border-color: var(--border-hover); }
|
||||
.bo-chip[aria-pressed=true] { color: var(--text); background: var(--nav-active-bg); border-color: var(--pill-line); }
|
||||
.bo-chip b { color: var(--text-subtle); font: 600 11px var(--mono); }
|
||||
.bo-chip[aria-pressed=true] b { color: var(--accent); }
|
||||
.bo-chip.is-down b:not(.is-zero) { color: var(--red); }
|
||||
.backend-overview-card .table-scroll { max-height: 520px; overflow: auto; border-top: 1px solid var(--line); }
|
||||
.bo-table { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 12px; }
|
||||
.bo-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: var(--panel); color: var(--muted); font: 600 10px/1.2 var(--sans); letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
|
||||
.bo-table td { padding: 9px 10px; border-top: 1px solid var(--row-line); vertical-align: middle; white-space: nowrap; }
|
||||
.bo-table .is-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
|
||||
.bo-table th.is-num { font-family: var(--sans); }
|
||||
.bo-table .is-zero { color: var(--text-subtle); }
|
||||
.bo-row:hover>td { background: var(--panel2); }
|
||||
.bo-row.is-disabled>td:not(:first-child) { opacity: .6; }
|
||||
.bo-row>td:first-child { box-shadow: inset 3px 0 0 var(--line); }
|
||||
.bo-row.is-up>td:first-child { box-shadow: inset 3px 0 0 var(--pill-live-line); }
|
||||
.bo-row.is-down>td:first-child { box-shadow: inset 3px 0 0 var(--red); }
|
||||
.bo-row.is-warn>td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.bo-expand { width: 24px; height: 24px; min-width: 0; padding: 0; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; }
|
||||
.bo-expand::before { content: "›"; display: inline-block; font-size: 15px; transition: transform .15s ease; }
|
||||
.bo-expand[aria-expanded=true]::before { transform: rotate(90deg); }
|
||||
.bo-expand:hover { color: var(--text); border-color: var(--field-line); }
|
||||
.bo-identity { max-width: 360px; }
|
||||
.bo-name { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; }
|
||||
.bo-sub { margin-top: 2px; overflow: hidden; color: var(--muted); font: .88em var(--mono); text-overflow: ellipsis; }
|
||||
.bo-badge { display: inline-flex; align-items: center; gap: 7px; padding: 2px 8px; border: 1px solid var(--field-line); border-radius: var(--rp-radius-control, 0); color: var(--muted); font: .82em var(--mono); letter-spacing: 1px; text-transform: uppercase; }
|
||||
.bo-badge>i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); }
|
||||
.bo-badge.is-up { border-color: var(--pill-live-line); color: var(--green); }
|
||||
.bo-badge.is-up>i { background: var(--green); }
|
||||
.bo-badge.is-down { border-color: var(--danger-line-strong); color: var(--red); }
|
||||
.bo-badge.is-down>i { background: var(--red); }
|
||||
.bo-badge.is-warn { border-color: var(--warn-line); color: var(--accent); }
|
||||
.bo-badge.is-warn>i { background: var(--accent); }
|
||||
.bo-errors { min-width: 130px; }
|
||||
.bo-meter-top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
|
||||
.bo-meter-top small { color: var(--text-subtle); font-size: .9em; }
|
||||
.bo-meter { height: 2px; margin-top: 5px; overflow: hidden; background: var(--line); border-radius: var(--rp-progress-radius, 0); }
|
||||
.bo-meter>i { display: block; height: 100%; background: var(--accent); border-radius: var(--rp-progress-radius, 0); }
|
||||
.bo-meter>i.is-high { background: var(--red); }
|
||||
.bo-latency { min-width: 130px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
|
||||
.bo-latency>span { display: inline-block; min-width: 62px; }
|
||||
.bo-spark { width: 56px; height: 18px; margin-left: 6px; vertical-align: middle; }
|
||||
.bo-spark polyline { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bo-row.is-down .bo-spark polyline { stroke: var(--red); }
|
||||
.bo-row.is-warn .bo-spark polyline { stroke: var(--accent); }
|
||||
.bo-event small { display: block; margin-top: 1px; color: var(--text-subtle); font-size: .9em; }
|
||||
.bo-event .is-failed, .bo-detail-item .is-failed { color: var(--red); }
|
||||
.bo-event .is-recovered, .bo-detail-item .is-recovered { color: var(--green); }
|
||||
.bo-detail-row>td { padding: 0 10px 10px 40px; border-top: 0; white-space: normal; }
|
||||
.bo-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 10px 12px; border: 1px solid var(--row-line); border-radius: var(--rp-radius-surface, 0); background: var(--bg); }
|
||||
.bo-detail-item span { display: block; margin-bottom: 3px; color: var(--text-subtle); font-size: 11px; }
|
||||
.bo-detail-item b { font: 500 12px var(--mono); overflow-wrap: anywhere; }
|
||||
html[data-table-density=normal] .bo-table td { padding-top: 10px; padding-bottom: 10px; }
|
||||
html[data-table-density=ultra] .bo-table th { padding: 4px 8px; }
|
||||
html[data-table-density=ultra] .bo-table td { padding-left: 8px; padding-right: 8px; }
|
||||
html[data-table-density=ultra] .bo-sub { display: none; }
|
||||
html[data-table-density=ultra] .bo-spark { width: 40px; height: 12px; }
|
||||
html[data-table-density=ultra] .bo-meter { margin-top: 2px; }
|
||||
html[data-table-density=ultra] .bo-event small { display: inline; margin-left: 6px; }
|
||||
html[data-table-density=ultra] .bo-badge { padding: 0 6px; }
|
||||
html[data-table-density=ultra] .bo-chip { padding: 4px 8px; font-size: 11px; }
|
||||
html[data-table-density=compact] .bo-spark { width: 48px; height: 15px; }
|
||||
html[data-table-density=compact] .bo-chip { padding: 5px 9px; }
|
||||
html[data-table-density=compact] .bo-meter { margin-top: 3px; }
|
||||
|
||||
/* Process overview card (process_diagnostics) */
|
||||
[data-dashboard-widget="process_diagnostics"] { display: flex; flex-direction: column; min-height: 560px; }
|
||||
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
|
||||
.pr-chip { display: inline-flex; align-items: baseline; gap: 7px; margin: 0; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--rp-radius-control, 0); font: 11px var(--mono); }
|
||||
.pr-chip dt { color: var(--text-subtle); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
|
||||
.pr-chip dd { margin: 0; font-weight: 500; }
|
||||
.pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 6px; }
|
||||
.pr-title { margin: 10px 0 4px; color: var(--muted); font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
|
||||
.pr-list { margin: 0; }
|
||||
.pr-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 7px 2px; border-top: 1px solid var(--row-line); }
|
||||
.pr-row dt { color: var(--muted); font-size: 11px; }
|
||||
.pr-row dd { margin: 0 0 0 auto; font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
|
||||
.pr-meter { flex: 0 0 100%; height: 2px; margin-top: 3px; overflow: hidden; background: var(--line); border-radius: var(--rp-progress-radius, 0); }
|
||||
.pr-meter b { display: block; width: 0; height: 100%; background: var(--accent); border-radius: var(--rp-progress-radius, 0); }
|
||||
.pr-meter b.is-high { background: var(--red); }
|
||||
.pr-split { display: flex; height: 6px; margin: 2px 0 4px; overflow: hidden; background: var(--line); border-radius: var(--rp-progress-radius, 0); }
|
||||
.pr-split .a { display: block; background: var(--accent); }
|
||||
.pr-split .f { display: block; background: var(--blue); }
|
||||
.pr-charts { flex: 1 1 auto; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
|
||||
.pr-charts .mini-live-chart { display: flex; flex-direction: column; margin-top: 0; }
|
||||
.pr-charts .mini-live-chart svg:not(.ui-icon) { flex: 1 1 0; height: 0; min-height: 56px; }
|
||||
.diagnostic-line.pr-line-blue { stroke: var(--blue); }
|
||||
.diagnostic-line.pr-line-muted { stroke: var(--muted); }
|
||||
html[data-table-density=compact] .pr-row { padding-top: 6px; padding-bottom: 6px; }
|
||||
html[data-table-density=ultra] .pr-row { padding-top: 3px; padding-bottom: 3px; }
|
||||
html[data-table-density=ultra] .pr-chip { padding: 1px 7px; }
|
||||
@media (max-width: 720px) {
|
||||
[data-dashboard-widget="process_diagnostics"] { min-height: 0; }
|
||||
.pr-cols, .pr-charts { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* initial width of the cache outcome segments (set from JS via CSSOM; inline style attributes are blocked by the CSP) */
|
||||
.cache-mix-hit, .cache-mix-miss, .cache-mix-bypass, .cache-mix-other { width: 0; }
|
||||
@@ -1202,3 +1202,21 @@ html[data-table-density=ultra] .file-log-inline-detail pre {
|
||||
.cache-target-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.cache-target-wrap .cache-transform-badge { flex: 0 0 auto; margin-left: 0; }
|
||||
|
||||
|
||||
/* Cache pager (0.36.7): never wraps inside its frame; the heading wraps instead */
|
||||
#panel-cache .card-heading:has(.cache-pager) { flex-wrap: wrap; row-gap: 8px; }
|
||||
.cache-pager { flex-wrap: nowrap; flex: 0 0 auto; max-width: 100%; margin-left: auto; }
|
||||
.cache-pager button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
|
||||
.cache-pager #cache-page { flex: 1 1 auto; white-space: nowrap; }
|
||||
|
||||
/* Cache pager follows the interface rounding setting: frame and the two outer buttons share the control radius */
|
||||
.cache-pager { overflow: visible; border-radius: var(--rp-radius-control, 0px); }
|
||||
.cache-pager button { border-radius: 0; }
|
||||
.cache-pager>button:first-child { border-radius: max(0px, calc(var(--rp-radius-control, 0px) - 1px)) 0 0 max(0px, calc(var(--rp-radius-control, 0px) - 1px)); }
|
||||
.cache-pager>button:last-child { border-radius: 0 max(0px, calc(var(--rp-radius-control, 0px) - 1px)) max(0px, calc(var(--rp-radius-control, 0px) - 1px)) 0; }
|
||||
.cache-pager button:focus-visible { outline-offset: -2px; }
|
||||
|
||||
/* The global corner-style rule forces the full control radius on every button with !important; the pager is a segmented control, so only its outer corners are rounded */
|
||||
#panel-cache .cache-pager>button { border-radius: 0 !important; }
|
||||
#panel-cache .cache-pager>button:first-child { border-radius: max(0px, calc(var(--rp-radius-control, 0px) - 1px)) 0 0 max(0px, calc(var(--rp-radius-control, 0px) - 1px)) !important; }
|
||||
#panel-cache .cache-pager>button:last-child { border-radius: 0 max(0px, calc(var(--rp-radius-control, 0px) - 1px)) max(0px, calc(var(--rp-radius-control, 0px) - 1px)) 0 !important; }
|
||||
@@ -819,7 +819,8 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#pool-search {
|
||||
#pool-search,
|
||||
#bo-search {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
Reference in new issue
Block a user