v0.36.1
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
672c84bc13
commit
6f52ac3d00
38 files changed
+1183
-221
No files matched your search
@@ -87,6 +87,53 @@ button:disabled {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-inline-end: 6px;
|
||||
vertical-align: -2px;
|
||||
flex: 0 0 auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html[data-interface-icons="true"] svg.ui-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.nav>.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
html[data-interface-icons="true"] .nav>svg.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.backend-sort-direction>.ui-icon,
|
||||
.dashboard-widget-scroll-button>.ui-icon,
|
||||
.host-chip button>.ui-icon,
|
||||
.acl-picker-remove>.ui-icon,
|
||||
.draft-dock-remove>.ui-icon,
|
||||
.vhost-backend-popup-close>.ui-icon,
|
||||
.dashboard-widget-toggle>.ui-icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
button.is-saving>.ui-icon[data-ui-icon="loader"] {
|
||||
animation: ui-icon-spin .8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ui-icon-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-interface-icons="true"] .nav>span:first-of-type,
|
||||
[hidden],
|
||||
#file-log-view-counts[hidden],
|
||||
#file-log-view-entries[hidden],
|
||||
|
||||
@@ -15,8 +15,6 @@ 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;
|
||||
@@ -86,7 +84,6 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
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;
|
||||
@@ -94,7 +91,10 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rp-chart-axis-host>svg { display: block; vertical-align: top; }
|
||||
.rp-chart-axis-host>svg {
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.rp-chart-axis-y {
|
||||
position: absolute;
|
||||
@@ -115,9 +115,20 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
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-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;
|
||||
@@ -133,12 +144,29 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
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-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[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;
|
||||
@@ -150,8 +178,13 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.rp-chart-axis-y .rp-chart-axis-middle { display: none; }
|
||||
.rp-chart-axis-x { font-size: 8px; }
|
||||
.rp-chart-axis-y .rp-chart-axis-middle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rp-chart-axis-x {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-footer {
|
||||
@@ -291,13 +324,19 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
.pool-table td:nth-child(n/**/+4) {
|
||||
.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),
|
||||
.pool-table th:nth-child(n
|
||||
|
||||
/**/
|
||||
+4),
|
||||
.logging-builder-action .small-label {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -561,7 +600,6 @@ 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;
|
||||
@@ -576,6 +614,20 @@ body[data-density=compact] .pool-card .table-scroll {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#panel-overview .stat-with-action .stat-corner-badge {
|
||||
min-height: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#panel-overview .stat-with-action .stat-corner-badge:hover,
|
||||
#panel-overview .stat-with-action .stat-corner-badge:focus-visible {
|
||||
border-color: var(--accent);
|
||||
background: var(--notice-bg);
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked .stat-with-action .stat-corner-action {
|
||||
top: 44px;
|
||||
}
|
||||
@@ -1201,7 +1253,6 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
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;
|
||||
@@ -1216,10 +1267,21 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
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>.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 * {
|
||||
@@ -1256,7 +1318,6 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
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;
|
||||
@@ -1886,8 +1947,6 @@ 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;
|
||||
}
|
||||
@@ -2224,7 +2283,6 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
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;
|
||||
@@ -2236,4 +2294,4 @@ html[data-dashboard-density] #panel-overview .stat :is(.stat-chart-legend, .over
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -81,11 +81,13 @@
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.appearance-interface-icons-setting,
|
||||
.appearance-chart-axes-setting {
|
||||
align-self: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.appearance-interface-icons-setting>span,
|
||||
.appearance-chart-axes-setting>span {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -1203,6 +1205,7 @@ html[data-dashboard-density=normal] #panel-overview .stat>span,
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Global security policy forms */
|
||||
.global-policy-form .global-policy-section {
|
||||
display: grid;
|
||||
@@ -1212,18 +1215,81 @@ html[data-dashboard-density=normal] #panel-overview .stat>span,
|
||||
padding-top: 17px;
|
||||
min-width: 0;
|
||||
}
|
||||
.global-policy-form .global-policy-section h3 { margin: 0; font-size: 14px; }
|
||||
.global-policy-heading { display: grid; gap: 5px; }
|
||||
.global-policy-heading p { margin: 0; max-width: 85ch; }
|
||||
.global-policy-fields { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr); gap: 14px; align-items: start; }
|
||||
.global-rate-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
|
||||
.global-policy-fields label, .global-rate-fields label, .global-policy-section > label:not(.check) { display: grid; gap: 6px; min-width: 0; }
|
||||
.global-policy-section textarea { width: 100%; box-sizing: border-box; }
|
||||
.global-policy-form .form-actions { margin-top: 20px; }
|
||||
.cache-static-guidance { margin: 9px 0 0; max-width: 88ch; }
|
||||
.cache-header-settings-heading { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; margin-bottom: 13px; }
|
||||
.transform-operations-title { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; margin-bottom: 14px; }
|
||||
.transform-operations-grid { margin-top: 3px; row-gap: 12px; }
|
||||
@media (max-width: 760px) {
|
||||
.global-policy-fields, .global-rate-fields { grid-template-columns: 1fr; }
|
||||
|
||||
.global-policy-form .global-policy-section h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.global-policy-heading {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.global-policy-heading p {
|
||||
margin: 0;
|
||||
max-width: 85ch;
|
||||
}
|
||||
|
||||
.global-policy-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr);
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.global-rate-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.global-policy-fields label,
|
||||
.global-rate-fields label,
|
||||
.global-policy-section>label:not(.check) {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.global-policy-section textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.global-policy-form .form-actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cache-static-guidance {
|
||||
margin: 9px 0 0;
|
||||
max-width: 88ch;
|
||||
}
|
||||
|
||||
.cache-header-settings-heading {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 18px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.transform-operations-title {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 18px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.transform-operations-grid {
|
||||
margin-top: 3px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
|
||||
.global-policy-fields,
|
||||
.global-rate-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user