v0.36.8
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
0cbe0566f5
commit
992a1795af
34 files changed
+1409
-604
No files matched your search
@@ -1977,6 +1977,72 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
/* Row units (custom layout): heights snap to the compact stat card height so tall
|
||||
panels sit beside several rows of small cards with aligned edges.
|
||||
overview-rows.js sets --overview-row-unit and each card's --overview-rows. */
|
||||
#panel-overview .dashboard-overview-grid.is-aligned.has-row-units {
|
||||
grid-auto-rows: var(--overview-row-unit, 84px);
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned.has-row-units>:is([data-dashboard-widget], .overview-drop-placeholder) {
|
||||
grid-row: auto/span var(--overview-rows, 1);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned.has-row-units>.overview-drop-placeholder {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-measuring-rows>[data-dashboard-widget] {
|
||||
align-self: start !important;
|
||||
}
|
||||
|
||||
/* A card taller than its content gives the extra height to its charts instead of
|
||||
leaving an empty band at the bottom. */
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget]:not([hidden]) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget]>svg:not(.ui-icon),
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget]>.mini-live-chart-stack,
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget]>.table-scroll {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget] .mini-live-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget] .mini-live-chart>svg:not(.ui-icon) {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/* With chart scales enabled the SVG sits in an axis host: grow the host and its SVG. */
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget] :is(.rp-chart-axis-host, .mini-live-chart>.rp-chart-axis-host) {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.has-row-units>.card[data-dashboard-widget] .rp-chart-axis-host>svg:not(.ui-icon) {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked.has-row-units {
|
||||
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 7%, transparent) 0 var(--overview-row-unit, 84px), transparent var(--overview-row-unit, 84px));
|
||||
background-size: 100% calc(var(--overview-row-unit, 84px) + var(--overview-gap, 8px));
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-height-value {
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-height[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-width {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -2462,6 +2528,38 @@ html[data-table-density=ultra] .pr-chip { padding: 1px 7px; }
|
||||
.pr-cols, .pr-charts { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Memory breakdown card (memory_breakdown) */
|
||||
.mb-card { display: flex; flex-direction: column; }
|
||||
.mb-card .mb-chips { margin-bottom: 12px; }
|
||||
.mb-bar { display: flex; height: 22px; overflow: hidden; background: var(--line); border-radius: var(--rp-progress-radius, 0); gap: 1px; }
|
||||
.mb-bar i { display: block; width: 0; min-width: 0; transition: width .4s ease; }
|
||||
.mb-cache-data { background: var(--chart-accent); }
|
||||
.mb-cache-meta { background: color-mix(in srgb, var(--chart-accent) 50%, var(--panel)); }
|
||||
.mb-transient { background: var(--chart-tertiary); }
|
||||
.mb-alloc-free { background: repeating-linear-gradient(135deg, var(--chart-quinary) 0 4px, color-mix(in srgb, var(--chart-quinary) 35%, var(--panel)) 4px 8px); }
|
||||
.mb-files { background: var(--chart-secondary); }
|
||||
.mb-rest { background: color-mix(in srgb, var(--muted) 55%, var(--panel)); }
|
||||
.mb-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 22px; margin: 10px 0 0; padding: 0; list-style: none; }
|
||||
.mb-item { display: grid; grid-template-columns: 10px 1fr auto 46px; align-items: baseline; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--row-line); }
|
||||
.mb-item[hidden] { display: none; }
|
||||
.mb-swatch { width: 10px; height: 10px; align-self: center; border-radius: var(--rp-progress-radius, 0); }
|
||||
.mb-name { min-width: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
|
||||
.mb-item b { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; text-align: end; }
|
||||
.mb-item em { color: var(--text-subtle); font: normal 11px var(--mono); font-variant-numeric: tabular-nums; text-align: end; }
|
||||
.mb-cols { flex: 1 0 auto; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 4px; }
|
||||
.mb-trend { display: flex; flex-direction: column; margin-top: 10px; }
|
||||
.mb-trend svg:not(.ui-icon) { flex: 1 1 0; height: 0; min-height: 56px; }
|
||||
.diagnostic-line.mb-outside-line { stroke: var(--chart-quinary); }
|
||||
.mb-trend-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
|
||||
.mb-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--rp-radius-control, 0); color: var(--muted); font: 9px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
|
||||
.mb-badge[data-state="stable"] { border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); }
|
||||
.mb-badge[data-state="falling"] { border-color: color-mix(in srgb, var(--blue) 55%, transparent); color: var(--blue); }
|
||||
.mb-badge[data-state="rising"] { border-color: color-mix(in srgb, var(--red) 60%, transparent); color: var(--red); }
|
||||
.mb-unavailable { margin: 6px 0 0; }
|
||||
html[data-table-density=compact] .mb-item { padding-top: 5px; padding-bottom: 5px; }
|
||||
html[data-table-density=ultra] .mb-item { padding-top: 3px; padding-bottom: 3px; }
|
||||
html[data-table-density=ultra] .mb-bar { height: 16px; }
|
||||
|
||||
/* 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; }
|
||||
|
||||
|
||||
@@ -1597,8 +1597,10 @@
|
||||
--overview-widget-placement: auto/span 3;
|
||||
}
|
||||
|
||||
/* A third of the wide grid becomes half of the 6-column grid, so two panels or
|
||||
charts sit side by side instead of leaving a two-column hole. */
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"] {
|
||||
--overview-widget-placement: auto/span 4;
|
||||
--overview-widget-placement: auto/span 3;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="12"],
|
||||
@@ -1608,6 +1610,10 @@
|
||||
}
|
||||
|
||||
@container overview-canvas (max-width:700px) {
|
||||
#panel-overview .dashboard-overview-grid {
|
||||
--overview-row-units: off;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user