diff --git a/static/app.css b/static/app.css index 6fdf4a5..8c6b4ad 100644 --- a/static/app.css +++ b/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));