1706 lines
32 KiB
CSS
1706 lines
32 KiB
CSS
/* Responsive rules */
|
|
|
|
@media (min-width:1201px) {
|
|
#panel-overview .stats-grid {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width:1320px) {
|
|
.docker-runtime {
|
|
grid-column: 2;
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.docker-health-grid {
|
|
grid-template-columns: repeat(3, minmax(130px, 1fr));
|
|
}
|
|
|
|
.docker-passive-health-editor .docker-health-grid {
|
|
grid-template-columns: repeat(2, minmax(180px, 1fr));
|
|
}
|
|
|
|
.docker-service-head {
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
.docker-service-head-actions {
|
|
grid-column: 2;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.docker-route-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.docker-alias-field {
|
|
grid-column: 1/-1;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1200px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.header-rule {
|
|
grid-template-columns: 80px 1fr auto;
|
|
}
|
|
|
|
.header-rule .header-value {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.header-rule button {
|
|
grid-column: 3;
|
|
grid-row: 1/3;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.card:not(.pool-card),
|
|
#panel-overview .dashboard-overview-grid>.stat {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1150px) {
|
|
.vhost-layout {
|
|
grid-template-columns: minmax(190px, .6fr) minmax(0, 1.6fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width:1100px) {
|
|
.traffic-wide-chart {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.traffic-chart-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width:1000px) {
|
|
.shell {
|
|
grid-template-columns: 166px minmax(0, 1fr);
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 18px 10px;
|
|
}
|
|
|
|
.vh-grid,
|
|
.acme-card .vh-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.docker-acl-grid,
|
|
.docker-timeout-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width:980px) {
|
|
.logging-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.vhost-live-grid,
|
|
.stream-live-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width:900px) {
|
|
.logging-builder-layout,
|
|
.logging-format-actions,
|
|
.acl-policy-custom-controls,
|
|
.acl-policy-modes,
|
|
.acl-profile-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.logging-builder-action .small-label {
|
|
text-align: left;
|
|
}
|
|
|
|
#panel-settings:not([hidden]) {
|
|
display: block;
|
|
}
|
|
|
|
#panel-settings .settings-shortcuts {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#panel-settings .settings-filter-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#panel-settings .settings-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: static;
|
|
overflow-x: auto;
|
|
overscroll-behavior-inline: contain;
|
|
scrollbar-width: thin;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#panel-settings .settings-tabs button {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: 120px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.acl-policy-mode-custom {
|
|
grid-column: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width:860px) {
|
|
.config-history-layout {
|
|
display: block;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.config-history-browser {
|
|
max-height: calc(min(300px, 38dvh));
|
|
overflow-y: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.config-history-detail {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.config-history-revisions {
|
|
max-height: none;
|
|
}
|
|
|
|
.config-history-diff {
|
|
overflow: visible;
|
|
}
|
|
|
|
.config-history-change-values {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.config-history-detail-head {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.config-history-detail-actions {
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@media (max-width:850px) {
|
|
.sidebar {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
height: auto;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 60;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 10px 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.brand-mark span {
|
|
font-size: 15px;
|
|
left: 18px;
|
|
top: 12px;
|
|
}
|
|
|
|
nav {
|
|
flex-direction: row;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav {
|
|
gap: 7px;
|
|
font-size: 11px;
|
|
border-left: 0;
|
|
border-bottom: 2px solid transparent;
|
|
padding: 7px;
|
|
}
|
|
|
|
.nav.active {
|
|
border-bottom-color: var(--rp-nav-active-color);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 34px;
|
|
height: 34px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.diagnostics-grid,
|
|
#panel-overview .dashboard-overview-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.diagnostics-grid>.card:last-child,
|
|
#panel-overview .dashboard-overview-grid>.card:not(.pool-card) {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.shell {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar nav {
|
|
margin-top: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
}
|
|
|
|
.edition,
|
|
.sidebar-bottom {
|
|
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;
|
|
}
|
|
|
|
.vhost-dialog {
|
|
max-width: calc(100vw - 12px);
|
|
}
|
|
|
|
body[data-density=compact] .sidebar nav {
|
|
margin-top: 0;
|
|
}
|
|
|
|
body[data-density=compact] .sidebar {
|
|
padding: 8px 9px;
|
|
}
|
|
|
|
body[data-density=compact] .topbar {
|
|
height: 42px;
|
|
}
|
|
|
|
.sidebar .brand {
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
min-height: 36px;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--line);
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font: 600 11px var(--mono);
|
|
}
|
|
|
|
.mobile-menu-toggle:hover,
|
|
.mobile-menu-toggle[aria-expanded=true] {
|
|
color: var(--rp-nav-active-color);
|
|
border-color: var(--rp-nav-active-color);
|
|
background: var(--rp-nav-active-bg);
|
|
}
|
|
|
|
.mobile-menu-icon {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
width: 15px;
|
|
height: 1px;
|
|
background: currentColor;
|
|
box-shadow: 0 -5px currentColor, 0 5px currentColor;
|
|
}
|
|
|
|
.sidebar .main-navigation {
|
|
grid-column: 1/-1;
|
|
display: none;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--line);
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 4px;
|
|
}
|
|
|
|
.sidebar.mobile-nav-open .main-navigation {
|
|
display: grid;
|
|
}
|
|
|
|
.sidebar .main-navigation .nav {
|
|
width: 100%;
|
|
min-width: 0;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
padding: 9px 10px;
|
|
border: 1px solid transparent;
|
|
border-left-width: 2px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sidebar .main-navigation .nav.active {
|
|
border-color: var(--line);
|
|
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);
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.stat {
|
|
grid-column: span 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width:800px) {
|
|
.vhost-layout {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.pool-table {
|
|
min-width: 620px;
|
|
}
|
|
|
|
.file-log-aggregate-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width:720px) {
|
|
.traffic-chart-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.traffic-donut-layout {
|
|
grid-template-columns: 120px minmax(0, 1fr);
|
|
}
|
|
|
|
.traffic-donut {
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:700px) {
|
|
#panel-tls .certificate-operation-heading,
|
|
#panel-tls .certificate-subheading,
|
|
#panel-tls .certificate-workspace-heading,
|
|
#panel-tls .renewal-entry-head,
|
|
.file-logs-launcher {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#panel-tls .certificate-subheading>button,
|
|
#panel-tls .certificate-workspace-heading>button {
|
|
width: 100%;
|
|
}
|
|
|
|
#panel-tls .certificate-tabs,
|
|
#panel-tls .renewal-meta,
|
|
.file-log-column-picker .log-column-options,
|
|
.file-log-field,
|
|
.file-logs-filter {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#panel-tls .renewal-actions {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
#panel-tls .renewal-actions button {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.file-logs-heading-actions,
|
|
.file-logs-table-toolbar {
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.file-log-limit {
|
|
max-width: 160px;
|
|
}
|
|
|
|
.page-intro-title-row {
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-logs-heading-actions .file-log-consolidate {
|
|
margin-inline-end: auto;
|
|
}
|
|
|
|
.file-log-tab {
|
|
padding: .6rem .7rem;
|
|
}
|
|
|
|
#file-log-view-counts,
|
|
#file-log-view-entries,
|
|
#panel-filelogs {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
#panel-filelogs .file-log-field-grid {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table {
|
|
width: 100%;
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table-toolbar {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-workspace {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#panel-filelogs .card-heading {
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-heading-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-heading-actions .file-log-consolidate {
|
|
margin-inline-end: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
#panel-filelogs .file-log-search-help-popover {
|
|
width: calc(min(320px, 100vw - 54px));
|
|
}
|
|
|
|
#panel-filelogs .file-log-aggregate-form,
|
|
#panel-filelogs .file-logs-filter,
|
|
#panel-filelogs .file-log-field {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
#panel-filelogs .file-log-limit {
|
|
max-width: none;
|
|
}
|
|
|
|
#panel-filelogs .file-log-aggregate-form input,
|
|
#panel-filelogs .file-log-aggregate-form label,
|
|
#panel-filelogs .file-log-aggregate-form select,
|
|
#panel-filelogs .file-logs-filter input,
|
|
#panel-filelogs .file-logs-filter label,
|
|
#panel-filelogs .file-logs-filter select {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#panel-filelogs .file-log-tabs {
|
|
min-width: 0;
|
|
}
|
|
|
|
#panel-filelogs .file-log-tab {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
#panel-filelogs .file-log-column-picker {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table table,
|
|
#panel-filelogs .file-logs-table tbody {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table thead {
|
|
display: none;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:not(.file-log-detail-row) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 5px 10px;
|
|
position: relative;
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr.selected {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:not(.file-log-detail-row)>td {
|
|
display: block;
|
|
min-width: 0;
|
|
max-width: none;
|
|
padding: 0;
|
|
border: 0;
|
|
overflow: hidden;
|
|
text-overflow: unset;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table td[data-mobile-column=record] {
|
|
grid-column: 1/-1;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
padding-inline-end: 16px;
|
|
max-height: 4.4em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table td[data-mobile-column=event],
|
|
#panel-filelogs .file-logs-table td[data-mobile-column=status] {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table td[data-mobile-column=time],
|
|
#panel-filelogs .file-logs-table td[data-mobile-column=vhost] {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:not(.file-log-detail-row)>td:before {
|
|
content: attr(data-mobile-label) ": ";
|
|
color: var(--text-subtle);
|
|
font-weight: 400;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:not(.file-log-detail-row)>td[data-mobile-column=record]:before {
|
|
content: "";
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr:not(.file-log-detail-row):after {
|
|
content: "+";
|
|
position: absolute;
|
|
inset-block-end: 4px;
|
|
inset-inline-end: 8px;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tbody tr.selected:after {
|
|
content: "-";
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table .file-log-detail-row {
|
|
display: block;
|
|
margin: -8px 0 8px;
|
|
border: 1px solid var(--accent);
|
|
border-top: 0;
|
|
background: var(--panel2);
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table .file-log-detail-row td {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
#panel-filelogs .file-log-inline-detail {
|
|
min-width: 0;
|
|
padding: 8px;
|
|
}
|
|
|
|
#panel-filelogs .file-log-inline-detail pre {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#panel-filelogs .file-log-aggregate-table table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
#panel-filelogs .file-log-aggregate-table td:first-child {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-pager {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#panel-filelogs .file-logs-table tr.selected td[data-mobile-column=record] {
|
|
max-height: none;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.dashboard-widget-list {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.dashboard-widget-setting {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-intro .overview-samples-toolbar {
|
|
margin-left: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width:680px) {
|
|
.settings-tabs button {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.settings-page>.card {
|
|
padding: var(--ui-card);
|
|
}
|
|
}
|
|
|
|
@media (max-width:650px) {
|
|
.location-header-editor .vh-header-row {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.location-actions,
|
|
.location-toolbar {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.location-actions>button,
|
|
.location-toolbar>button {
|
|
flex: 1 1 150px;
|
|
}
|
|
|
|
.auth-top {
|
|
padding: 14px;
|
|
}
|
|
|
|
.auth-main {
|
|
padding: 22px 14px;
|
|
}
|
|
|
|
.location-header-direction-head {
|
|
display: block;
|
|
}
|
|
|
|
.location-header-direction-head p {
|
|
text-align: left;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.location-preview-grid,
|
|
.vh-header-row.is-remove .vh-header-rule-fields,
|
|
.vh-header-rule-fields,
|
|
.cache-via-setting {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.traffic-bar-row {
|
|
grid-template-columns: minmax(88px, 1.2fr) minmax(90px, 2fr) minmax(60px, auto);
|
|
gap: 7px;
|
|
}
|
|
|
|
.vh-www-pair-directions {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width:640px) {
|
|
.acl-rule,
|
|
.basic-user {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.renewal-entry,
|
|
.acl-profile-rule {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.renewal-entry .fine {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.settings-tabs,
|
|
.vhost-live-grid,
|
|
.stream-live-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.vhost-card-head {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#panel-notfound .card-heading,
|
|
#panel-redirects .card-heading,
|
|
#panel-vhosts .card-heading,
|
|
.backend-card-heading,
|
|
#panel-streams .card-heading,
|
|
.acl-policy-preview-head,
|
|
.acl-policy-step-head {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vhost-list-tools,
|
|
#panel-streams .vhost-list-tools {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#notfound-search,
|
|
#redirect-search,
|
|
#vhost-search,
|
|
#stream-search {
|
|
flex: 1 1 auto;
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.backend-table-tools {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#pool-search {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.backend-column-options {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
.vhost-card-head .entity-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.acl-policy-step-head>button,
|
|
.acl-policy-switch {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width:620px) {
|
|
.nav {
|
|
min-width: 0;
|
|
}
|
|
|
|
.breadcrumb b,
|
|
.nav span {
|
|
display: none;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-size: 9px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.breadcrumb span {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.language-select {
|
|
max-width: 110px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.page-intro,
|
|
.settings-shortcuts {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.page-intro .eyebrow {
|
|
letter-spacing: .5px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.notice {
|
|
font-size: 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.stats-grid,
|
|
.vh-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.logs-card>.card-heading {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.log-tools button {
|
|
white-space: normal;
|
|
max-width: 85px;
|
|
}
|
|
|
|
.page-footer {
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
}
|
|
|
|
.field-grid:where(:not(.docker-health-grid, .docker-acl-grid, .docker-timeout-grid)) {
|
|
gap: 0 9px;
|
|
}
|
|
|
|
.header-rule {
|
|
grid-template-columns: 76px minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.header-rule button {
|
|
max-width: 65px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.switch-grid,
|
|
.diagnostics-grid,
|
|
.acme-card .vh-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.form-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.outline:where(:not(.docker-open-app, .docker-open-logs)),
|
|
.primary:where(:not(.docker-open-app, .docker-open-logs)) {
|
|
white-space: normal;
|
|
}
|
|
|
|
.mini-metrics {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.memory-line,
|
|
.nav b {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.login-section {
|
|
padding-top: 25px;
|
|
}
|
|
|
|
.login-card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.topbar {
|
|
gap: 7px;
|
|
height: auto;
|
|
min-height: 46px;
|
|
padding: 7px 0;
|
|
}
|
|
|
|
main {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.top-actions {
|
|
gap: 4px;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.topbar .breadcrumb {
|
|
font-size: 8px;
|
|
display: none;
|
|
}
|
|
|
|
.top-actions .quiet {
|
|
padding: 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.page-intro h1 {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.diagnostics-grid>.card:last-child {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.sidebar nav {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.vh-header-row {
|
|
grid-template-columns: 85px 1fr;
|
|
}
|
|
|
|
.page-label,
|
|
.page-source,
|
|
.vh-header-row>:nth-child(3) {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.vhost-dialog .vh-form {
|
|
padding: 9px;
|
|
}
|
|
|
|
.vh-form>.card-heading {
|
|
top: -9px;
|
|
}
|
|
|
|
.vh-tabs {
|
|
top: 29px;
|
|
}
|
|
|
|
.window-heading {
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.window-heading h2 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.window-tools {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.logs-dialog .table-scroll {
|
|
max-height: 50dvh;
|
|
}
|
|
|
|
.log-tools select {
|
|
max-width: 140px;
|
|
flex: 1;
|
|
}
|
|
|
|
.logs-dialog.docked {
|
|
max-height: 55dvh;
|
|
}
|
|
|
|
.logs-dialog.docked .table-scroll {
|
|
max-height: calc(55dvh - 230px);
|
|
}
|
|
|
|
.page-editor,
|
|
.h3-editor .vh-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.named-listener-row .vh-grid,
|
|
.about-meta,
|
|
.about-links {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cache-toolbar select,
|
|
.cache-toolbar>* {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.cache-toolbar label {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cache-stats strong {
|
|
font-size: 19px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:760px) {
|
|
.redirect-card .vhost-detail-strip,
|
|
.redirect-rule .vh-grid,
|
|
.listener-choices,
|
|
.docker-health-grid,
|
|
.docker-passive-health-editor .docker-health-grid,
|
|
.docker-acl-grid,
|
|
.docker-timeout-grid,
|
|
.docker-route-grid,
|
|
.transform-diagnostics,
|
|
.appearance-settings-grid,
|
|
.config-history-json-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.protocol-toggle-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.protocol-toggle-row .check,
|
|
.protocol-toggle-row .vh-check,
|
|
.stat-chart .stat-chart-legend span {
|
|
min-width: 0;
|
|
}
|
|
|
|
.vh-backend-head,
|
|
.function-live-chart-summary,
|
|
.acl-picker-option-heading {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.docker-runtime {
|
|
grid-column: auto;
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
}
|
|
|
|
.docker-passive-health-editor .docker-passive-5xx-warning,
|
|
.docker-passive-health-editor .docker-passive-slow-warning,
|
|
.docker-alias-field,
|
|
.docker-acl-grid .docker-profile-field,
|
|
.docker-agent-grid .docker-profile-field {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.docker-agent-security,
|
|
.docker-toolbar,
|
|
.docker-service-editor>summary,
|
|
.security-editor>summary,
|
|
.function-live-chart-footer,
|
|
.certificate-api-credential-row {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.docker-toolbar input[type=search],
|
|
.docker-service-actions button,
|
|
.security-page-heading>button,
|
|
.docker-agent-summary>span,
|
|
.docker-fingerprint {
|
|
width: 100%;
|
|
}
|
|
|
|
.cache-toolbar-status {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.docker-service-actions {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.security-page-heading {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.docker-service-editor .docker-config-hint {
|
|
text-align: left;
|
|
}
|
|
|
|
.docker-agent-heading-actions {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#docker-agents-form>.form-actions,
|
|
.function-live-chart-legend {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.network-interface-row-head {
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.network-interface-row-head .fine {
|
|
white-space: normal;
|
|
text-align: left;
|
|
}
|
|
|
|
.function-live-chart-heading small {
|
|
white-space: normal;
|
|
}
|
|
|
|
.chart-style-palette {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.config-history-json-columns pre {
|
|
max-height: 38dvh;
|
|
}
|
|
|
|
.appearance-settings-grid.dashboard-appearance-grid>.dashboard-density-setting {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 7px;
|
|
}
|
|
|
|
.dashboard-widget-settings-head {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.dashboard-widget-settings-controls {
|
|
margin-left: 0;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list>.dashboard-widget-setting {
|
|
flex-basis: 210px;
|
|
width: 210px;
|
|
min-width: 210px;
|
|
max-width: 210px;
|
|
}
|
|
|
|
.dashboard-appearance-grid .dashboard-widget-list.is-expanded>.dashboard-widget-setting {
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.docker-route-grid .docker-alias-field {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.docker-service-row {
|
|
position: relative;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.docker-service-head {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.docker-publish-field {
|
|
min-height: 24px;
|
|
padding-right: 90px;
|
|
}
|
|
|
|
.docker-service-meta {
|
|
gap: 3px;
|
|
}
|
|
|
|
.docker-service-meta b,
|
|
.docker-service-meta span {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.docker-service-head-actions {
|
|
grid-column: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.docker-service-head-actions .docker-runtime {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.docker-service-head-actions .docker-runtime .pill {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
max-width: 86px;
|
|
text-align: center;
|
|
}
|
|
|
|
.docker-service-head-actions .docker-runtime .fine {
|
|
display: block;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.docker-service-quick-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.docker-service-quick-actions>* {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.docker-service-head-actions .docker-view-toggle {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
body[data-density=compact] .docker-service-row {
|
|
padding: 8px;
|
|
gap: 5px;
|
|
}
|
|
|
|
body[data-density=compact] .docker-service-head-actions .docker-runtime .pill {
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
.backend-column-options {
|
|
width: min(330px, calc(100vw - 32px));
|
|
min-width: 0;
|
|
max-width: calc(100vw - 32px);
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.stat-chart .stat-chart-legend {
|
|
flex-wrap: wrap;
|
|
white-space: normal;
|
|
}
|
|
|
|
.system-info-heading-actions {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
}
|
|
|
|
.system-info-heading-actions .pill {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-filelogs .file-log-tabs {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
#panel-filelogs .file-log-tab {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width:600px) {
|
|
.sidebar .main-navigation .nav span {
|
|
display: none;
|
|
}
|
|
|
|
.brand-mark span {
|
|
left: 15px;
|
|
top: 11px;
|
|
}
|
|
|
|
.login-footer span {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.page-intro {
|
|
display: block;
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: 9px;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 34px;
|
|
letter-spacing: -1.4px;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.meta {
|
|
font-size: 9px;
|
|
max-width: 106px;
|
|
text-align: right;
|
|
}
|
|
|
|
.section-heading h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.chart-footer,
|
|
.login-footer {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.page-footer {
|
|
font-size: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.login-section h1 {
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.login-section h1:where(:not(.auth-main h1)) {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.toast {
|
|
right: 17px;
|
|
bottom: 17px;
|
|
}
|
|
|
|
#config-editor {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sidebar nav {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav {
|
|
font-size: 11px;
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.login-card .primary {
|
|
white-space: normal;
|
|
}
|
|
|
|
.security-note {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.sidebar nav .nav {
|
|
min-width: 0;
|
|
justify-content: center;
|
|
padding: 9px 5px;
|
|
}
|
|
|
|
.overview-inline-hidden-item {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.vh-setting-section>.vh-grid,
|
|
.stream-backend-section>.vh-grid,
|
|
.stream-health-probe-fields,
|
|
.web-service-setting-section>.vh-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.vh-certificate-select-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vh-certificate-select-row>.vh-field,
|
|
.vh-certificate-select-row>button {
|
|
flex: 0 1 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.stream-backend-section,
|
|
.web-service-setting-section {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:550px) {
|
|
.stats-grid.cache-stats>.stat {
|
|
flex-basis: 140px;
|
|
}
|
|
|
|
.overview-layout-footer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.overview-layout-footer p {
|
|
width: 100%;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid>.stat {
|
|
grid-column: auto/span 1;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-unlocked>[data-dashboard-widget] {
|
|
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;
|
|
}
|
|
}
|
|
|
|
@media (max-width:480px) {
|
|
.page-intro-title-row h1 {
|
|
font-size: calc(clamp(18px, 5vw, 24px));
|
|
letter-spacing: -.6px;
|
|
}
|
|
|
|
.overview-presets-create-controls>button {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.overview-presets-row {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overview-presets-actions {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width:420px) {
|
|
.vh-form .form-actions {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.vh-field input,
|
|
.vh-field select:where(:not(.edit-form select)),
|
|
.vh-field textarea:where(:not(.edit-form textarea)) {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.vh-setting-section {
|
|
padding: 10px;
|
|
}
|
|
|
|
.backend-column-options {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width:380px) {
|
|
.vh-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.sidebar nav {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.topbar {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.vh-tabs button {
|
|
font-size: 10px;
|
|
padding: 5px 7px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:360px) {
|
|
.nav {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-height:620px) {
|
|
.log-column-options {
|
|
top: auto;
|
|
bottom: calc(100% + 4px);
|
|
width: calc(min(360px, 100vw - 24px));
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion:reduce) {
|
|
.docker-publish-field .docker-publish,
|
|
.docker-publish-field .docker-publish::before,
|
|
#panel-overview .overview-meter-fill,
|
|
#panel-overview .www-segmented span {
|
|
transition: none;
|
|
}
|
|
|
|
.app-startup-spinner {
|
|
animation: none;
|
|
}
|
|
|
|
* {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
@container overview-canvas (max-width:1080px) {
|
|
#panel-overview .dashboard-overview-grid.is-aligned {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget].stat:where(:not([data-dashboard-span])) {
|
|
grid-column-end: span 2;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.card:not(.pool-card):where(:not([data-dashboard-span])) {
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.card.overview-wide-chart:where(:not([data-dashboard-span])),
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.pool-card:where(:not([data-dashboard-span])) {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"] {
|
|
--overview-widget-placement: auto/span 2;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="3"] {
|
|
--overview-widget-placement: auto/span 3;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="4"] {
|
|
--overview-widget-placement: 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"] {
|
|
--overview-widget-placement: 1/-1;
|
|
}
|
|
}
|
|
|
|
@container overview-canvas (max-width:700px) {
|
|
#panel-overview .dashboard-overview-grid.is-aligned {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget].stat {
|
|
touch-action: pan-y pinch-zoom;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget].stat:where(:not([data-dashboard-span])) {
|
|
grid-column-end: span 1;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.stat.stat-with-action {
|
|
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;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
margin: 6px 0 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
html[data-dashboard-density=normal] #panel-overview .dashboard-overview-grid.is-aligned>.stat strong {
|
|
font-size: calc(clamp(20px, 5.8vw, 26px));
|
|
}
|
|
|
|
html[data-dashboard-density=compact] #panel-overview .dashboard-overview-grid.is-aligned>.stat strong {
|
|
font-size: calc(clamp(19px, 5vw, 22px));
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>.card:not(.pool-card):where(:not([data-dashboard-span])) {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
#panel-overview .network-interface-charts {
|
|
max-height: none;
|
|
overflow: visible;
|
|
overscroll-behavior: auto;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-row {
|
|
gap: 6px;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
flex-basis: 48px;
|
|
}
|
|
|
|
#panel-overview .stat-donut .overview-donut-legend {
|
|
gap: 3px;
|
|
}
|
|
|
|
#panel-overview .dashboard-overview-grid.is-aligned>[data-dashboard-widget][data-dashboard-span="2"].stat {
|
|
--overview-widget-placement: 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"] {
|
|
--overview-widget-placement: 1/-1;
|
|
}
|
|
}
|