flatten nested UI card surfaces
This commit is contained in:
170-carry
parent
370fcd6ba5
commit
9c8faf2896
267
static/app.css
267
static/app.css
@ -197,10 +197,11 @@ body::before {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-height: 240px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 96%, var(--accent-soft)) 0%, var(--panel) 100%);
|
||||
padding: 12px 0 0;
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in oklab, var(--line) 92%, var(--panel-strong));
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.loading-card-wide {
|
||||
@ -4801,6 +4802,264 @@ body.auth-page {
|
||||
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
|
||||
}
|
||||
|
||||
/* Nested surfaces inside a page panel must read as rows/sections, not cards inside cards. */
|
||||
.summary-strip {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-strip::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.panel .panel {
|
||||
padding: 12px 0 0;
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in oklab, var(--line) 92%, var(--panel-strong));
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.panel .panel::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.summary-card,
|
||||
.overview-calm-card,
|
||||
.overview-side-card,
|
||||
.overview-side-hosts,
|
||||
.overview-side-host-chip,
|
||||
.alert-item,
|
||||
.detail-alert-panel,
|
||||
.detail-instance,
|
||||
.detail-log-panel,
|
||||
.matrix-stack,
|
||||
.quiet-host-card,
|
||||
.host-strip,
|
||||
.host-alert-summary,
|
||||
.host-detail-line,
|
||||
.host-service-pill,
|
||||
.infra-focus-card,
|
||||
.infra-mini-card,
|
||||
.nacos-service-card,
|
||||
.mongo-stat-group,
|
||||
.metadata-strip,
|
||||
.compact-workbench-head,
|
||||
.editor-toolbar,
|
||||
.diff-panel,
|
||||
.config-sidebar,
|
||||
.config-group-toggle,
|
||||
.config-item,
|
||||
.config-item-ide,
|
||||
.mysql-sidebar-section,
|
||||
.mongo-sidebar-section,
|
||||
.mysql-overview-card,
|
||||
.mongo-admin-overview-card,
|
||||
.mongo-admin-subpanel,
|
||||
.mongo-action-panel,
|
||||
.mysql-action-panel,
|
||||
.release-service-card,
|
||||
.release-log-entry,
|
||||
.bridge-item,
|
||||
.activity-item,
|
||||
.config-history-list,
|
||||
.table-wrap,
|
||||
.empty-panel,
|
||||
.config-empty,
|
||||
.mysql-query-stack,
|
||||
.mysql-filter-row,
|
||||
.mysql-filter-static,
|
||||
.mysql-checkbox,
|
||||
.mongo-mini-empty
|
||||
) {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.summary-card,
|
||||
.overview-calm-card,
|
||||
.overview-side-card,
|
||||
.overview-side-hosts,
|
||||
.overview-side-host-chip,
|
||||
.alert-item,
|
||||
.detail-alert-panel,
|
||||
.detail-instance,
|
||||
.detail-log-panel,
|
||||
.matrix-stack,
|
||||
.quiet-host-card,
|
||||
.host-strip,
|
||||
.host-alert-summary,
|
||||
.host-detail-line,
|
||||
.host-service-pill,
|
||||
.infra-focus-card,
|
||||
.infra-mini-card,
|
||||
.nacos-service-card,
|
||||
.mongo-stat-group,
|
||||
.compact-workbench-head,
|
||||
.editor-toolbar,
|
||||
.diff-panel,
|
||||
.config-sidebar,
|
||||
.config-group-toggle,
|
||||
.config-item,
|
||||
.config-item-ide,
|
||||
.mysql-sidebar-section,
|
||||
.mongo-sidebar-section,
|
||||
.mysql-overview-card,
|
||||
.mongo-admin-overview-card,
|
||||
.mongo-admin-subpanel,
|
||||
.mongo-action-panel,
|
||||
.mysql-action-panel,
|
||||
.release-service-card,
|
||||
.release-log-entry,
|
||||
.bridge-item,
|
||||
.activity-item,
|
||||
.config-history-list,
|
||||
.table-wrap,
|
||||
.empty-panel,
|
||||
.config-empty,
|
||||
.mysql-query-stack,
|
||||
.mysql-filter-row,
|
||||
.mysql-filter-static,
|
||||
.mysql-checkbox,
|
||||
.mongo-mini-empty
|
||||
) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.summary-card,
|
||||
.overview-calm-card,
|
||||
.overview-side-card,
|
||||
.alert-item,
|
||||
.detail-instance,
|
||||
.overview-side-host-chip,
|
||||
.quiet-host-card,
|
||||
.host-strip,
|
||||
.host-alert-summary,
|
||||
.host-detail-line,
|
||||
.host-service-pill,
|
||||
.infra-focus-card,
|
||||
.infra-mini-card,
|
||||
.nacos-service-card,
|
||||
.mongo-stat-group,
|
||||
.mysql-overview-card,
|
||||
.mongo-admin-overview-card,
|
||||
.mongo-action-panel,
|
||||
.mysql-action-panel,
|
||||
.release-service-card,
|
||||
.release-log-entry,
|
||||
.bridge-item,
|
||||
.activity-item,
|
||||
.config-group-toggle,
|
||||
.config-item,
|
||||
.config-item-ide,
|
||||
.mysql-filter-row,
|
||||
.mysql-checkbox
|
||||
) {
|
||||
border: 0;
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--line) 92%, var(--panel-strong));
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.metadata-strip,
|
||||
.compact-workbench-head,
|
||||
.editor-toolbar,
|
||||
.diff-panel,
|
||||
.config-sidebar,
|
||||
.config-group-toggle,
|
||||
.config-item,
|
||||
.config-item-ide,
|
||||
.mysql-sidebar-section,
|
||||
.mongo-sidebar-section,
|
||||
.config-history-list,
|
||||
.table-wrap,
|
||||
.empty-panel,
|
||||
.config-empty,
|
||||
.mysql-query-stack,
|
||||
.mysql-filter-static,
|
||||
.mongo-mini-empty
|
||||
) {
|
||||
border: 0;
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--line) 92%, var(--panel-strong));
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.overview-calm-card,
|
||||
.overview-side-card,
|
||||
.detail-alert-panel,
|
||||
.detail-instance,
|
||||
.matrix-stack,
|
||||
.quiet-host-card,
|
||||
.host-strip,
|
||||
.infra-focus-card,
|
||||
.infra-mini-card,
|
||||
.nacos-service-card,
|
||||
.mongo-action-panel,
|
||||
.mysql-action-panel,
|
||||
.release-service-card,
|
||||
.bridge-item
|
||||
)::before {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.panel :is(
|
||||
.release-service-card,
|
||||
.host-strip,
|
||||
.infra-focus-card,
|
||||
.nacos-service-card,
|
||||
.mongo-action-panel,
|
||||
.mysql-action-panel
|
||||
) {
|
||||
border-left: 3px solid color-mix(in oklab, currentColor 36%, var(--line));
|
||||
}
|
||||
|
||||
.panel .release-service-card {
|
||||
border-left-color: var(--release-kind-color);
|
||||
}
|
||||
|
||||
.panel .release-service-card.selected {
|
||||
background: color-mix(in oklab, var(--accent-soft) 18%, transparent);
|
||||
box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 42%, transparent);
|
||||
}
|
||||
|
||||
.panel .mongo-danger-panel {
|
||||
border-left-color: color-mix(in oklab, var(--bad) 70%, var(--warn));
|
||||
background: color-mix(in oklab, var(--bad-soft) 18%, transparent);
|
||||
}
|
||||
|
||||
.panel .table-wrap {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.panel .config-only-layout > .config-sidebar,
|
||||
.panel .database-admin-layout > .config-sidebar {
|
||||
border-right: 1px solid color-mix(in oklab, var(--line) 92%, var(--panel-strong));
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.panel .config-group-toggle:hover,
|
||||
.panel .config-list-ide .config-item-ide:hover,
|
||||
.panel .config-item:hover {
|
||||
background: color-mix(in oklab, var(--accent-soft) 12%, transparent);
|
||||
}
|
||||
|
||||
.panel .config-list-ide .config-item-ide.active,
|
||||
.panel .config-item.active {
|
||||
background: color-mix(in oklab, var(--accent-soft) 34%, transparent);
|
||||
box-shadow: inset 2px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.panel .matrix-stack .matrix-scroll {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.loading-band-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user