From a054e3d941191805e9831f013622e332f50aa751 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 14 Jul 2026 19:39:24 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E9=99=90=E5=AE=9A=E9=9D=9E=20Workb?= =?UTF-8?q?ench=20=E6=8E=A7=E5=88=B6=E5=8F=B0=E8=A7=86=E8=A7=89=E8=A7=84?= =?UTF-8?q?=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/hwlab-cloud-web/src/styles/console-r2.css | 289 +++++++++--------- 1 file changed, 141 insertions(+), 148 deletions(-) diff --git a/web/hwlab-cloud-web/src/styles/console-r2.css b/web/hwlab-cloud-web/src/styles/console-r2.css index 3c4659b9..2e9f452c 100644 --- a/web/hwlab-cloud-web/src/styles/console-r2.css +++ b/web/hwlab-cloud-web/src/styles/console-r2.css @@ -15,14 +15,6 @@ --console-topbar-height: 46px; } -body { - background: - linear-gradient(rgb(17 25 28 / 3%) 1px, transparent 1px), - linear-gradient(90deg, rgb(17 25 28 / 3%) 1px, transparent 1px), - var(--console-canvas); - background-size: 24px 24px; -} - .platform-shell { grid-template-columns: var(--console-sidebar-width) minmax(0, 1fr); background: transparent; @@ -191,6 +183,11 @@ body { } .platform-content { + background: + linear-gradient(rgb(17 25 28 / 3%) 1px, transparent 1px), + linear-gradient(90deg, rgb(17 25 28 / 3%) 1px, transparent 1px), + var(--console-canvas); + background-size: 24px 24px; padding: 14px clamp(12px, 1.5vw, 24px) 24px; scrollbar-gutter: stable; } @@ -200,7 +197,7 @@ body { gap: 12px; } -.page-command-bar { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar { position: relative; min-height: 76px; align-items: center; @@ -213,7 +210,7 @@ body { box-shadow: var(--console-shadow-sm); } -.page-command-bar::before { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar::before { position: absolute; top: 0; bottom: 0; @@ -224,41 +221,41 @@ body { content: ""; } -.page-command-bar[data-sticky="true"] { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar[data-sticky="true"] { top: 8px; border-bottom: 1px solid var(--console-border); background: rgb(251 252 248 / 96%); } -.page-command-copy { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-copy { gap: 2px; } -.page-command-eyebrow { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-eyebrow { color: var(--console-cyan-700); font-size: 9px; letter-spacing: 0; } -.page-command-title { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-title { font-size: 24px; font-weight: 720; letter-spacing: 0; } -.page-command-description { +:where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-description { color: var(--console-graphite-600); font-size: 12px; } -.console-status-strip { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-strip { gap: 0; border-radius: 5px; background: var(--console-surface-raised); box-shadow: var(--console-shadow-sm); } -.console-status-item { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item { position: relative; min-width: 132px; min-height: 46px; @@ -267,11 +264,11 @@ body { padding: 7px 10px 7px 15px; } -.console-status-item:last-child { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item:last-child { border-right: 0; } -.console-status-item::before { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item::before { position: absolute; top: 10px; bottom: 10px; @@ -281,63 +278,63 @@ body { border-radius: 0; } -.console-status-item dt { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item dt { font-size: 9px; } -.console-status-item dd { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item dd { font-family: var(--console-font-mono); font-size: 12px; } -.data-panel, -.table-page-layout, -.console-section-frame, -.operations-workspace, -.bounded-workspace, -.entity-index, -.operations-inspector-panel, -.metric-card, -.empty-state { +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-panel, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-layout, +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-section-frame, +:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-workspace, +:where(.route-stack, .hwpod-console, .mdtodo-page) .bounded-workspace, +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-index, +:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-panel, +:where(.route-stack, .hwpod-console, .mdtodo-page) .metric-card, +:where(.route-stack, .hwpod-console, .mdtodo-page) .empty-state { border-color: var(--console-border); border-radius: 6px; background: var(--console-surface-raised); box-shadow: var(--console-shadow-sm); } -.data-panel, -.table-page-layout, -.admin-crud-panel { +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-panel, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-layout, +:where(.route-stack, .hwpod-console, .mdtodo-page) .admin-crud-panel { padding: 12px; } -.panel-header, -.table-page-header, -.operations-inspector-header, -.entity-index-toolbar { +:where(.route-stack, .hwpod-console, .mdtodo-page) .panel-header, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-header, +:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-header, +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-index-toolbar { border-bottom-color: var(--console-border); } -.panel-header h2, -.table-page-header h2, -.operations-inspector-header h2 { +:where(.route-stack, .hwpod-console, .mdtodo-page) .panel-header h2, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-header h2, +:where(.route-stack, .hwpod-console, .mdtodo-page) .operations-inspector-header h2 { color: var(--console-graphite-900); font-size: 13px; font-weight: 760; } -.segmented-control, -.view-mode-switch, -.console-tabs { +:where(.route-stack, .hwpod-console, .mdtodo-page) .segmented-control, +:where(.route-stack, .hwpod-console, .mdtodo-page) .view-mode-switch, +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-tabs { border-radius: 4px; } -.btn, -.icon-button, -.table-action, -.segmented-control button, -.view-mode-switch button, -.console-tabs button { +:where(.route-stack, .hwpod-console, .mdtodo-page) .btn, +:where(.route-stack, .hwpod-console, .mdtodo-page) .icon-button, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action, +:where(.route-stack, .hwpod-console, .mdtodo-page) .segmented-control button, +:where(.route-stack, .hwpod-console, .mdtodo-page) .view-mode-switch button, +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-tabs button { border: 1px solid var(--console-border-strong); border-radius: 4px; background: var(--console-surface-raised); @@ -347,55 +344,59 @@ body { letter-spacing: 0; } -.btn-primary, -.table-action.primary { +:where(.route-stack, .hwpod-console, .mdtodo-page) .btn-primary, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action.primary { border-color: #006b70; background: #007b80; color: #fff; } -.btn-primary:hover, -.table-action.primary:hover:not(:disabled) { +:where(.route-stack, .hwpod-console, .mdtodo-page) .btn-primary:hover, +:where(.route-stack, .hwpod-console, .mdtodo-page) .table-action.primary:hover:not(:disabled) { background: #00666b; } -.input, -input:not([type="checkbox"]):not([type="radio"]), -select, -textarea { +:where(.route-stack, .hwpod-console, .mdtodo-page) :is( + .input, + input:not([type="checkbox"]):not([type="radio"]), + select, + textarea +) { border-color: var(--console-border-strong); border-radius: 4px; background: #fff; } -.input:focus, -input:focus, -select:focus, -textarea:focus, -button:focus-visible, -[tabindex]:focus-visible { +:where(.route-stack, .hwpod-console, .mdtodo-page) :is( + .input:focus, + input:focus, + select:focus, + textarea:focus, + button:focus-visible, + [tabindex]:focus-visible +) { outline: 2px solid color-mix(in srgb, var(--console-focus) 55%, transparent); outline-offset: 2px; } -.console-data-grid-wrap, -.data-table-wrap { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid-wrap, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table-wrap { border-color: var(--console-border); border-radius: 4px; } -.console-data-grid, -.data-table { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table { font-size: 11px; } -.console-data-grid thead, -.data-table thead { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid thead, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table thead { background: #e5eae7; } -.console-data-grid th, -.data-table th { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid th, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table th { color: var(--console-graphite-700); font-family: var(--console-font-mono); font-size: 9px; @@ -404,35 +405,35 @@ button:focus-visible, text-transform: uppercase; } -.console-data-grid td, -.console-data-grid th, -.data-table td, -.data-table th { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid td, +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid th, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table td, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table th { border-color: #d5dcda; } -.console-data-grid tbody tr:nth-child(even), -.data-table tbody tr:nth-child(even) { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid tbody tr:nth-child(even), +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table tbody tr:nth-child(even) { background: #f5f7f4; } -.console-data-grid tbody tr:hover, -.data-table tbody tr:hover { +:where(.route-stack, .hwpod-console, .mdtodo-page) .console-data-grid tbody tr:hover, +:where(.route-stack, .hwpod-console, .mdtodo-page) .data-table tbody tr:hover { background: var(--console-cyan-100); } -.resource-collection-items[data-view="cards"] { +:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-items[data-view="cards"] { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } -.entity-card-heading { +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-heading { display: flex; min-width: 0; align-items: flex-start; gap: 9px; } -.entity-card-icon { +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-icon { display: inline-grid; width: 32px; height: 32px; @@ -444,7 +445,7 @@ button:focus-visible, color: #146866; } -.entity-card-meta { +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card-meta { display: flex; min-width: 0; flex-wrap: wrap; @@ -454,52 +455,52 @@ button:focus-visible, font-size: 9px; } -.industrial-fact-row { +:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; } -.industrial-fact-row div { +:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row div { min-width: 0; border-top: 1px solid #dce3e1; padding-top: 7px; } -.industrial-fact-row dt { +:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row dt { color: var(--console-graphite-600); font-family: var(--console-font-mono); font-size: 9px; text-transform: uppercase; } -.industrial-fact-row dd { +:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-fact-row dd { overflow: hidden; margin: 3px 0 0; text-overflow: ellipsis; } -.industrial-card-link { +:where(.route-stack, .hwpod-console, .mdtodo-page) .industrial-card-link { display: block; height: 100%; color: inherit; text-decoration: none; } -.resource-collection-virtual { +:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-virtual { border: 1px solid var(--console-border); border-radius: 4px; background: var(--console-surface-raised); } -.resource-collection-item--virtual { +:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-item--virtual { height: 100%; border-bottom: 1px solid #d8dfdd; padding: 4px; } -.resource-collection-item--virtual .entity-card { +:where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-item--virtual .entity-card { height: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; @@ -509,9 +510,9 @@ button:focus-visible, padding: 6px 9px; } -.entity-card, -.pcb-card, -.node-card { +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card, +:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-card, +:where(.route-stack, .hwpod-console, .mdtodo-page) .node-card { border-color: var(--console-border); border-radius: 5px; background: @@ -520,13 +521,13 @@ button:focus-visible, box-shadow: var(--console-shadow-sm); } -.entity-card[data-interactive="true"]:hover { +:where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card[data-interactive="true"]:hover { border-color: var(--console-cyan-600); box-shadow: 0 8px 22px rgb(11 31 33 / 11%); transform: translateY(-1px); } -.empty-state-mark { +:where(.route-stack, .hwpod-console, .mdtodo-page) .empty-state-mark { display: inline-grid; width: 36px; height: 36px; @@ -538,48 +539,40 @@ button:focus-visible, font-size: 0; } -.status-pill, -.status-badge, -.pm-status, -.task-state, -.stage-status { +:where(.route-stack, .hwpod-console, .mdtodo-page) .status-pill, +:where(.route-stack, .hwpod-console, .mdtodo-page) .status-badge, +:where(.route-stack, .hwpod-console, .mdtodo-page) .pm-status, +:where(.route-stack, .hwpod-console, .mdtodo-page) .task-state, +:where(.route-stack, .hwpod-console, .mdtodo-page) .stage-status { border-radius: 3px; font-family: var(--console-font-mono); font-size: 9px; letter-spacing: 0; } -.mini-log, -.json-panel, -.content-viewer pre, -.source-output, -.report-markdown { - border-color: #334649; +:where(.route-stack, .hwpod-console, .mdtodo-page) :is( + .mini-log, + .json-panel, + .content-viewer pre, + .source-output, + .report-markdown +) { + min-width: 0; + max-width: 100%; + overflow: auto; + border-color: #c4cfcc; border-radius: 4px; - background: #111b1e; - color: #d9e7e4; + background: #f7f9f8; + color: #243532; font-family: var(--console-font-mono); } -.hwpod-workspace { +:where(.route-stack, .hwpod-console, .mdtodo-page) .hwpod-workspace { min-height: min(72vh, 760px); } -.pcb-card::after { - position: absolute; - right: -30px; - bottom: -34px; - width: 130px; - height: 100px; - border: 1px solid rgb(0 131 138 / 18%); - border-radius: 50%; - box-shadow: 0 0 0 16px rgb(0 131 138 / 4%), 0 0 0 32px rgb(0 131 138 / 3%); - content: ""; - pointer-events: none; -} - -.pcb-trace, -.pcb-grid-line { +:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-trace, +:where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-grid-line { color: var(--console-cyan-600); } @@ -592,15 +585,15 @@ button:focus-visible, padding: 10px; } - .page-command-bar { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar { grid-template-columns: minmax(0, 1fr); } - .page-command-actions { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions { justify-content: flex-start; } - .overview-grid { + :where(.route-stack, .hwpod-console, .mdtodo-page) .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @@ -624,34 +617,34 @@ button:focus-visible, padding: 8px; } - .page-command-bar { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-bar { min-height: 0; padding: 10px 10px 10px 15px; } - .page-command-title { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-title { font-size: 19px; } - .page-command-description { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-description { font-size: 11px; } - .console-status-item { + :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item { min-width: 118px; } - .overview-grid, - .field-grid, - .form-grid { + :where(.route-stack, .hwpod-console, .mdtodo-page) .overview-grid, + :where(.route-stack, .hwpod-console, .mdtodo-page) .field-grid, + :where(.route-stack, .hwpod-console, .mdtodo-page) .form-grid { grid-template-columns: minmax(0, 1fr); } - .resource-collection-items[data-view="cards"] { + :where(.route-stack, .hwpod-console, .mdtodo-page) .resource-collection-items[data-view="cards"] { grid-template-columns: minmax(0, 1fr); } - .hwpod-workspace { + :where(.route-stack, .hwpod-console, .mdtodo-page) .hwpod-workspace { min-height: 0; } } @@ -666,32 +659,32 @@ button:focus-visible, padding: 0 8px; } - .page-command-actions, - .page-command-filters, - .table-page-actions, - .table-actions-inline { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions, + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-filters, + :where(.route-stack, .hwpod-console, .mdtodo-page) .table-page-actions, + :where(.route-stack, .hwpod-console, .mdtodo-page) .table-actions-inline { align-items: stretch; } - .page-command-actions > *, - .page-command-filters > * { + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-actions > *, + :where(.route-stack, .hwpod-console, .mdtodo-page) .page-command-filters > * { max-width: 100%; } - .console-status-strip { + :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-strip { scroll-snap-type: x proximity; } - .console-status-item { + :where(.route-stack, .hwpod-console, .mdtodo-page) .console-status-item { flex-basis: 136px; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { - .entity-card, - .pcb-card, - .node-card { + :where(.route-stack, .hwpod-console, .mdtodo-page) .entity-card, + :where(.route-stack, .hwpod-console, .mdtodo-page) .pcb-card, + :where(.route-stack, .hwpod-console, .mdtodo-page) .node-card { transform: none !important; } }