v0.33.3
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
5a36bb0c4b
commit
78ad28ef4d
27 files changed
+1448
-234
No files matched your search
+246
-44
@@ -72,6 +72,9 @@
|
||||
--rp-progress-fill: var(--chart-accent);
|
||||
--rp-progress-track: var(--line);
|
||||
--rp-progress-radius: 3px;
|
||||
--rp-nav-active-color: var(--brand-secondary);
|
||||
--rp-nav-active-bg: var(--nav-active-bg);
|
||||
--rp-nav-hover-bg: var(--nav-hover-bg);
|
||||
--traffic-h1: var(--chart-accent);
|
||||
--traffic-h2: var(--chart-secondary);
|
||||
--traffic-h3: var(--chart-tertiary);
|
||||
@@ -135,6 +138,10 @@ html[data-theme=light] {
|
||||
--scrollbar-thumb-hover: #879684
|
||||
}
|
||||
|
||||
html:is([data-theme=light], [data-theme=cream]) {
|
||||
--rp-nav-active-color: color-mix(in srgb, var(--brand-secondary) 45%, var(--text) 55%);
|
||||
}
|
||||
|
||||
html[data-theme=ultra_dark] {
|
||||
color-scheme: dark;
|
||||
--bg: #030404;
|
||||
@@ -389,16 +396,6 @@ html.app-startup-failed .app-startup-recovery {
|
||||
}
|
||||
}
|
||||
|
||||
@media(prefers-reduced-motion:reduce) {
|
||||
.app-startup-spinner {
|
||||
animation: none
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: auto !important
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
@@ -533,7 +530,8 @@ nav {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border-left: 2px solid transparent
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: var(--rp-radius-control, 0)
|
||||
}
|
||||
|
||||
.nav span {
|
||||
@@ -546,13 +544,18 @@ nav {
|
||||
}
|
||||
|
||||
.nav.active {
|
||||
background: var(--nav-active-bg);
|
||||
color: var(--green);
|
||||
border-left-color: var(--green)
|
||||
background: var(--rp-nav-active-bg);
|
||||
color: var(--rp-nav-active-color);
|
||||
border-left-color: var(--rp-nav-active-color)
|
||||
}
|
||||
|
||||
.nav:hover {
|
||||
background: var(--nav-hover-bg)
|
||||
.nav:not(.active):hover {
|
||||
background: var(--rp-nav-hover-bg)
|
||||
}
|
||||
|
||||
.sidebar .main-navigation .nav:focus-visible {
|
||||
outline: 2px solid var(--rp-nav-active-color);
|
||||
outline-offset: 2px
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
@@ -1213,7 +1216,7 @@ button.is-saving {
|
||||
}
|
||||
|
||||
.nav.active {
|
||||
border-bottom-color: var(--green)
|
||||
border-bottom-color: var(--rp-nav-active-color)
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -1270,7 +1273,8 @@ button.is-saving {
|
||||
letter-spacing: .4px
|
||||
}
|
||||
|
||||
.breadcrumb span {
|
||||
.breadcrumb span,
|
||||
.login-footer span {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
@@ -1360,10 +1364,6 @@ button.is-saving {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.login-footer span {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.toast {
|
||||
right: 17px;
|
||||
bottom: 17px
|
||||
@@ -2077,7 +2077,7 @@ td {
|
||||
}
|
||||
|
||||
[dir=rtl] .nav.active {
|
||||
border-right-color: var(--green)
|
||||
border-right-color: var(--rp-nav-active-color)
|
||||
}
|
||||
|
||||
[dir=rtl] table {
|
||||
@@ -7879,9 +7879,9 @@ button.config-history-day.is-selected {
|
||||
|
||||
.mobile-menu-toggle:hover,
|
||||
.mobile-menu-toggle[aria-expanded=true] {
|
||||
color: var(--text);
|
||||
border-color: var(--border-hover);
|
||||
background: var(--nav-active-bg);
|
||||
color: var(--rp-nav-active-color);
|
||||
border-color: var(--rp-nav-active-color);
|
||||
background: var(--rp-nav-active-bg);
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
@@ -7921,8 +7921,13 @@ button.config-history-day.is-selected {
|
||||
|
||||
.sidebar .main-navigation .nav.active {
|
||||
border-color: var(--line);
|
||||
border-left-color: var(--green);
|
||||
background: var(--nav-active-bg);
|
||||
border-left-color: var(--rp-nav-active-color);
|
||||
background: var(--rp-nav-active-bg);
|
||||
}
|
||||
|
||||
[dir=rtl] .sidebar .main-navigation .nav.active {
|
||||
border-left-color: var(--line);
|
||||
border-right-color: var(--rp-nav-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8789,7 +8794,7 @@ html[data-dashboard-density=ultra] #panel-overview .stats-grid {
|
||||
}
|
||||
|
||||
html[data-dashboard-density=normal] #panel-overview .stat {
|
||||
padding: 14px 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
html[data-dashboard-density=normal] #panel-overview .stat>span {
|
||||
@@ -8854,8 +8859,6 @@ html[data-dashboard-density=ultra] #panel-overview .stat-chart svg {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Dashboard density applies to charts and panels as well as number tiles.
|
||||
Keep the Overview grid gutters independent of dashboard density. */
|
||||
html[data-dashboard-density=normal] #panel-overview .stat-chart svg {
|
||||
height: 34px;
|
||||
}
|
||||
@@ -10220,12 +10223,10 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
|
||||
.overview-layout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--ui-gap, 10px);
|
||||
}
|
||||
|
||||
.overview-layout-tile {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
cursor: grab;
|
||||
@@ -10246,7 +10247,6 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
|
||||
.overview-layout-tile-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
@@ -10817,11 +10817,11 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
|
||||
}
|
||||
|
||||
html[data-dashboard-density=normal] #panel-overview .dashboard-overview-grid.is-aligned>.stat strong {
|
||||
font-size: clamp(20px, 5.8vw, 26px);
|
||||
font-size: calc(clamp(20px, 5.8vw, 26px));
|
||||
}
|
||||
|
||||
html[data-dashboard-density=compact] #panel-overview .dashboard-overview-grid.is-aligned>.stat strong {
|
||||
font-size: clamp(19px, 5vw, 22px);
|
||||
font-size: calc(clamp(19px, 5vw, 22px));
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>.card:not(.pool-card) {
|
||||
@@ -10883,6 +10883,7 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
|
||||
}
|
||||
|
||||
#panel-overview .overview-wide-svg .chart-grid {
|
||||
vector-effect: non-scaling-stroke;
|
||||
stroke: var(--line);
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
@@ -10891,6 +10892,7 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
|
||||
|
||||
#panel-overview .overview-wide-series {
|
||||
fill: none;
|
||||
vector-effect: non-scaling-stroke;
|
||||
stroke-width: 2;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
@@ -10964,7 +10966,6 @@ html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.car
|
||||
|
||||
.overview-layout-tile-toolbar .overview-layout-controls {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
margin-left: auto;
|
||||
}
|
||||
@@ -11260,11 +11261,9 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--rp-progress-fill);
|
||||
transition: width 180ms ease;
|
||||
transition: width .18s;
|
||||
}
|
||||
|
||||
/* System Load uses the same track/fill component as other Overview meters,
|
||||
while retaining its compact 5px height and existing vertical spacing. */
|
||||
#panel-overview .system-card .system-memory-meter {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -11374,7 +11373,15 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@media(prefers-reduced-motion:reduce) {
|
||||
.app-startup-spinner {
|
||||
animation: none
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: auto !important
|
||||
}
|
||||
|
||||
#panel-overview .overview-meter-fill {
|
||||
transition: none;
|
||||
}
|
||||
@@ -11423,7 +11430,7 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@media(max-width:700px) {
|
||||
.page-intro .overview-samples-toolbar {
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
@@ -11514,7 +11521,7 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
#panel-overview .www-segmented span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
transition: width 180ms ease;
|
||||
transition: width .18s;
|
||||
}
|
||||
|
||||
#panel-overview .www-segment-0 {
|
||||
@@ -11639,8 +11646,203 @@ html:is([data-corner-style=square], [data-corner-style=subtle], [data-corner-sty
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@media(prefers-reduced-motion:reduce) {
|
||||
#panel-overview .www-segmented span {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom] {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="6"] {
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="12"] {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned[data-overview-layout-mode=custom]>[data-dashboard-widget].overview-row-start {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
#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 .overview-inline-width,
|
||||
.overview-layout-width-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
font: 11px var(--mono);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-width {
|
||||
gap: 3px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-width-value {
|
||||
min-width: 31px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget] {
|
||||
padding-top: 101px;
|
||||
}
|
||||
|
||||
#panel-overview .overview-inline-toolbar .overview-widget-type {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.overview-layout-tile-toolbar .overview-layout-width-value {
|
||||
flex: 0 0 auto;
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overview-layout-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
.overview-layout-grid>.overview-layout-tile.is-panel {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.overview-layout-tile {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-layout-tile-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: 5px 6px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-layout-tile-toolbar .overview-widget-type {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.overview-layout-tile-toolbar .overview-layout-controls {
|
||||
grid-column: 1/-1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.overview-layout-order-actions,
|
||||
.overview-layout-size-actions {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-layout-tile-toolbar .overview-layout-hide {
|
||||
margin-inline-start: 0;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.overview-layout-grid .overview-layout-card-preview,
|
||||
.overview-layout-grid .overview-layout-panel-preview {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.overview-layout-dialog .overview-layout-footer,
|
||||
.overview-layout-dialog .overview-layout-hidden-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.overview-layout-dialog .overview-layout-hidden-item>span:first-child {
|
||||
flex: 1 1 125px;
|
||||
}
|
||||
|
||||
.overview-layout-dialog .overview-layout-hidden-item>button {
|
||||
flex: 0 1 auto;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@container overview-canvas (max-width: 1080px) {
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="12"],
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="6"] {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
@container overview-canvas (max-width: 700px) {
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"].stat {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="12"],
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"]:not(.stat),
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="3"],
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"],
|
||||
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="6"] {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:900px) {
|
||||
.overview-layout-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:620px) {
|
||||
.overview-layout-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:550px) {
|
||||
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget] {
|
||||
padding-top: 135px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user