0.35.4
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
c038ad44b3
commit
cd3c28d390
33 files changed
+807
-221
No files matched your search
@@ -175,6 +175,37 @@ nav {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-health-button {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 6px 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-health-button i {
|
||||
flex: 0 0 auto;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.app-health-button.is-checking,
|
||||
.app-health-summary.is-checking { color: var(--muted); }
|
||||
.app-health-button.is-ok,
|
||||
.app-health-summary.is-ok,
|
||||
.app-health-check.is-ok { color: var(--green); }
|
||||
.app-health-button.is-warning,
|
||||
.app-health-summary.is-warning,
|
||||
.app-health-check.is-warning { color: var(--notice-text); }
|
||||
.app-health-button.is-error,
|
||||
.app-health-summary.is-error,
|
||||
.app-health-check.is-error { color: var(--red); }
|
||||
|
||||
.app-health-button:hover { opacity: .82; }
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -216,11 +247,71 @@ nav {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.sidebar-bottom p {
|
||||
font-size: 11px;
|
||||
line-height: 1.9;
|
||||
color: var(--text-subtle);
|
||||
margin: 13px 0 26px;
|
||||
.app-health-dialog {
|
||||
width: min(620px, calc(100vw - 24px));
|
||||
}
|
||||
|
||||
.app-health-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.app-health-summary {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-health-summary>i {
|
||||
flex: 0 0 auto;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-top: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.app-health-summary strong {
|
||||
color: currentColor;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.app-health-summary .fine {
|
||||
margin: 3px 0 0;
|
||||
}
|
||||
|
||||
.app-health-checks {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.app-health-check {
|
||||
display: grid;
|
||||
grid-template-columns: 9px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--neutral-soft);
|
||||
}
|
||||
|
||||
.app-health-check>i {
|
||||
flex: 0 0 auto;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-top: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.app-health-check strong {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-health-check .fine {
|
||||
margin: 2px 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
@@ -15,6 +15,18 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
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);
|
||||
@@ -549,6 +561,25 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
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;
|
||||
}
|
||||
@@ -1154,44 +1185,83 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
position: relative;
|
||||
outline: 1px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
padding-top: 101px;
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked>.is-overview-dragging {
|
||||
opacity: .45;
|
||||
#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;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked>.is-overview-drop-before {
|
||||
box-shadow: inset 4px 0 var(--accent);
|
||||
/* 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.is-unlocked>.is-overview-drop-after {
|
||||
box-shadow: inset -4px 0 var(--accent);
|
||||
#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: 3px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
gap: 3px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-toolbar button {
|
||||
min-width: 28px;
|
||||
min-height: 27px;
|
||||
padding: 2px 7px;
|
||||
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 {
|
||||
@@ -1690,26 +1760,13 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
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;
|
||||
}
|
||||
|
||||
.page-intro .overview-samples-toolbar button {
|
||||
width: auto;
|
||||
flex: none;
|
||||
min-height: 28px;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-intro .overview-samples-toolbar .fine {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#panel-overview .stat-donut .overview-donut-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1821,8 +1878,10 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
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 dense;
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {
|
||||
|
||||
@@ -286,6 +286,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.mobile-nav-open .sidebar-bottom {
|
||||
grid-column: 1/-1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 46px;
|
||||
}
|
||||
@@ -702,8 +710,8 @@
|
||||
}
|
||||
|
||||
.page-intro .overview-samples-toolbar {
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
margin-left: auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1457,6 +1465,10 @@
|
||||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.stats-grid.cache-stats>.stat {
|
||||
flex-basis: 140px;
|
||||
}
|
||||
|
||||
.overview-layout-footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1474,7 +1486,19 @@
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget] {
|
||||
padding-top: 135px;
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked .overview-inline-toolbar :is(.overview-widget-type, .overview-inline-up, .overview-inline-down) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder:is([data-dashboard-span="2"], [data-dashboard-span="3"]) {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid>.overview-drop-placeholder:is([data-dashboard-span="4"], [data-dashboard-span="6"], [data-dashboard-span="12"]) {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1623,6 +1647,10 @@
|
||||
padding-right: 11px;
|
||||
}
|
||||
|
||||
#panel-overview .stat-with-action>span:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned .stat-with-action .stat-corner-action {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
Reference in new issue
Block a user