优化
This commit is contained in:
@@ -0,0 +1,775 @@
|
||||
@import './adminWorkbenchTokens.css';
|
||||
|
||||
.admin-workbench {
|
||||
--el-color-primary: var(--workbench-primary);
|
||||
--el-color-primary-light-3: var(--workbench-primary-hover);
|
||||
--el-color-primary-light-5: var(--workbench-primary-disabled);
|
||||
--el-color-primary-light-7: var(--workbench-accent-border);
|
||||
--el-color-primary-light-8: var(--workbench-accent-border);
|
||||
--el-color-primary-light-9: var(--workbench-accent-soft);
|
||||
--el-color-primary-dark-2: var(--workbench-primary-active);
|
||||
}
|
||||
|
||||
/* Keep business grids in the page; these primitives only provide appearance. */
|
||||
.admin-workbench.admin-page {
|
||||
min-width: 0;
|
||||
padding: var(--workbench-page-padding);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-workbench.admin-page.is-embedded {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Override AdminPage's scoped normal spacing only for this explicit opt-in. */
|
||||
.admin-workbench.admin-page.admin-density.is-spacing-normal {
|
||||
gap: var(--workbench-page-space);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-heading {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-title {
|
||||
margin: 0;
|
||||
color: var(--workbench-text);
|
||||
font-size: var(--workbench-title-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-meta {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-meta > i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--workbench-accent);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-section {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: var(--workbench-section-gap);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-section-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-section-title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin: 0;
|
||||
color: var(--workbench-text);
|
||||
font-size: var(--workbench-section-title-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-section-title::before {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--workbench-accent);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-badge {
|
||||
max-width: 100%;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-badge.is-toned {
|
||||
border: 1px solid var(--workbench-accent-border);
|
||||
background: var(--workbench-accent-soft);
|
||||
color: var(--workbench-accent);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric,
|
||||
.admin-workbench .workbench-panel {
|
||||
min-width: 0;
|
||||
padding: var(--workbench-card-space);
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: var(--workbench-radius);
|
||||
background: var(--workbench-surface);
|
||||
box-shadow: var(--workbench-shadow);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric {
|
||||
min-height: var(--workbench-metric-min-height);
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(145deg, var(--workbench-surface) 58%, var(--workbench-surface-tint));
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-panel.is-flush {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-panel.is-compact {
|
||||
padding: var(--workbench-compact-card-space);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric.is-compact {
|
||||
min-height: 0;
|
||||
padding: var(--workbench-compact-card-space);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric.is-compact .workbench-metric-heading {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric.is-compact .workbench-metric-label {
|
||||
font-size: var(--workbench-note-size);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric.is-compact .workbench-metric-value {
|
||||
margin: 10px 0 6px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric.is-compact .workbench-metric-value > strong {
|
||||
font-size: var(--workbench-compact-number-size);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-icon.is-compact {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--workbench-tab-radius);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-icon.is-compact > svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-icon {
|
||||
display: inline-flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-accent-soft);
|
||||
color: var(--workbench-accent);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-icon > svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-primary);
|
||||
color: var(--workbench-surface);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric-label {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
color: var(--workbench-text);
|
||||
font-size: var(--workbench-label-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric-value {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 4px 6px;
|
||||
margin: 20px 0 12px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric-value > strong {
|
||||
min-width: 0;
|
||||
color: var(--workbench-number);
|
||||
font-size: var(--workbench-number-size);
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-metric-value > span {
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-note,
|
||||
.admin-workbench .workbench-status {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-panel.workbench-tone {
|
||||
border-color: var(--workbench-accent-border);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
color: var(--workbench-text);
|
||||
font-size: var(--workbench-label-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-title::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--workbench-accent);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-actions {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-actions .el-button {
|
||||
--el-button-text-color: var(--workbench-primary);
|
||||
--el-button-hover-text-color: var(--workbench-primary-active);
|
||||
--el-button-disabled-text-color: var(--workbench-primary-disabled);
|
||||
font-size: var(--workbench-note-size);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-actions .el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-canvas {
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-empty {
|
||||
display: flex;
|
||||
min-height: 240px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: var(--workbench-card-space);
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-empty.is-compact {
|
||||
min-height: 0;
|
||||
padding: var(--workbench-compact-card-space);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-empty-icon {
|
||||
display: grid;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-muted);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-chart-empty p {
|
||||
max-width: 28em;
|
||||
margin: 0;
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.7;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* DataTable retains ownership of toolbar size, controls and query layout. */
|
||||
.admin-workbench .query-toolbar.workbench-query {
|
||||
border-color: var(--workbench-border);
|
||||
border-radius: var(--workbench-radius);
|
||||
background: var(--workbench-surface);
|
||||
box-shadow: var(--workbench-shadow);
|
||||
}
|
||||
|
||||
/* Integrated filters share the table surface; never nest another query card. */
|
||||
.admin-workbench .data-table--integrated > .data-table__filters .query-toolbar.workbench-query {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-toolbar,
|
||||
.admin-workbench .workbench-table {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* DataTable forwards attrs to its inner table, so opt in through this wrapper. */
|
||||
.admin-workbench .workbench-toolbar > .data-table,
|
||||
.admin-workbench .workbench-table > .data-table {
|
||||
--list-card-accent: var(--workbench-primary);
|
||||
--list-card-border: var(--workbench-border);
|
||||
--list-card-muted-bg: var(--workbench-surface-soft);
|
||||
--list-card-radius: var(--workbench-radius);
|
||||
min-width: 0;
|
||||
border-color: var(--workbench-border);
|
||||
border-radius: var(--workbench-radius);
|
||||
background: var(--workbench-surface);
|
||||
box-shadow: var(--workbench-shadow);
|
||||
}
|
||||
|
||||
/* Integrated DataTable already owns its border; default tables need a frame. */
|
||||
.admin-workbench .workbench-toolbar > .data-table:not(.data-table--integrated),
|
||||
.admin-workbench .workbench-table > .data-table:not(.data-table--integrated) {
|
||||
border: 1px solid var(--workbench-border);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-toolbar > .data-table > .data-table__toolbar,
|
||||
.admin-workbench .workbench-table > .data-table > .data-table__toolbar {
|
||||
border-color: var(--workbench-border);
|
||||
background: var(--workbench-surface);
|
||||
}
|
||||
|
||||
/* The main page is one continuous surface; only inner cards retain their frame. */
|
||||
.admin-workbench.workbench-panel.is-page-surface,
|
||||
.admin-workbench .workbench-panel.is-page-surface,
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Main lists share one compact header. Nested tables and dialog density stay local. */
|
||||
@media (min-width: 721px) {
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__toolbar {
|
||||
--el-component-size: var(--admin-control-height, 32px);
|
||||
min-height: var(--workbench-list-toolbar-height);
|
||||
box-sizing: border-box;
|
||||
padding: var(--workbench-list-toolbar-padding) var(--workbench-list-inset);
|
||||
gap: 8px 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start {
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions {
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar .el-button,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__toolbar .el-button {
|
||||
min-height: var(--admin-control-height, 32px);
|
||||
height: var(--admin-control-height, 32px);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__filters .query-toolbar,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__filters .query-toolbar {
|
||||
--el-component-size: var(--admin-control-height, 32px);
|
||||
padding: var(--workbench-list-query-padding) var(--workbench-list-inset);
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__filters .query-toolbar__filters,
|
||||
.admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__filters .query-toolbar__filters {
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
/* The toolbar supplies the inset; moved tabs must not add a second frame. */
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button,
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.workbench-tabs > button,
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item {
|
||||
min-height: var(--admin-control-height, 32px);
|
||||
height: var(--admin-control-height, 32px);
|
||||
}
|
||||
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header,
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav-wrap {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button:is(:hover, .is-active),
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:is(:hover, .is-active) {
|
||||
color: var(--workbench-primary);
|
||||
}
|
||||
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button.is-active::after,
|
||||
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after {
|
||||
background: var(--workbench-primary);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table > .data-table > .el-table,
|
||||
.admin-workbench .workbench-table > .el-table {
|
||||
--el-table-border-color: var(--workbench-border);
|
||||
--el-table-header-bg-color: var(--workbench-surface-soft);
|
||||
--el-table-header-text-color: var(--workbench-muted);
|
||||
--el-table-row-hover-bg-color: var(--workbench-accent-soft);
|
||||
--el-table-current-row-bg-color: var(--workbench-accent-soft);
|
||||
--el-table-text-color: var(--workbench-text);
|
||||
color: var(--workbench-text);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table .el-table th.el-table__cell {
|
||||
color: var(--workbench-muted);
|
||||
}
|
||||
|
||||
.admin-workbench .el-button.density-action:not([data-tone]),
|
||||
.admin-workbench .el-button.density-action[data-tone='primary'] {
|
||||
--action-color: var(--workbench-primary);
|
||||
--action-border: var(--workbench-accent-border);
|
||||
--action-hover-bg: var(--workbench-accent-soft);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-table .data-table .data-table__page-button[aria-current='page']:not(:disabled),
|
||||
.admin-workbench .workbench-table .data-table__business-actions .el-button--primary:not(:disabled) {
|
||||
box-shadow: var(--workbench-shadow);
|
||||
}
|
||||
|
||||
/* Keep selection, focus and disabled states consistent for existing native tabs. */
|
||||
.admin-workbench .workbench-tabs {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-tabs > button {
|
||||
display: inline-flex;
|
||||
min-height: var(--admin-tab-height);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--workbench-tab-radius);
|
||||
background: transparent;
|
||||
color: var(--workbench-muted);
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-tabs > button:hover:not(:disabled):not([aria-pressed='true']):not(.is-active) {
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-primary);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-tabs > button[aria-pressed='true'],
|
||||
.admin-workbench .workbench-tabs > button.is-active {
|
||||
border-color: var(--workbench-accent-border);
|
||||
background: var(--workbench-accent-soft);
|
||||
color: var(--workbench-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-tabs > button:focus-visible,
|
||||
.admin-workbench .workbench-input:focus-visible {
|
||||
outline: 2px solid var(--workbench-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-tabs > button:disabled {
|
||||
color: var(--workbench-primary-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-input {
|
||||
min-height: var(--admin-control-height);
|
||||
box-sizing: border-box;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: var(--workbench-tab-radius);
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-text);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-input:disabled {
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Teleported dialogs opt in on their own root; retain the density frame geometry. */
|
||||
.admin-workbench.is-dialog.el-dialog:not(.is-fullscreen) {
|
||||
border-radius: var(--workbench-radius);
|
||||
}
|
||||
|
||||
.admin-workbench.is-dialog.el-dialog .el-dialog__header,
|
||||
.admin-workbench.is-dialog.el-dialog .el-dialog__footer {
|
||||
border-color: var(--workbench-border);
|
||||
background: var(--workbench-surface);
|
||||
}
|
||||
|
||||
.admin-workbench.is-dialog.el-dialog .el-dialog__title {
|
||||
color: var(--workbench-text);
|
||||
}
|
||||
|
||||
/* A teleported drawer carries its own opt-in. Density owns its frame geometry. */
|
||||
.admin-workbench.is-drawer.el-drawer {
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-text);
|
||||
}
|
||||
|
||||
.admin-workbench.is-drawer.el-drawer .el-drawer__header,
|
||||
.admin-workbench.is-drawer.el-drawer .el-drawer__footer {
|
||||
border-color: var(--workbench-border);
|
||||
background: var(--workbench-surface);
|
||||
}
|
||||
|
||||
.admin-workbench.is-drawer.el-drawer .el-drawer__title {
|
||||
color: var(--workbench-text);
|
||||
}
|
||||
|
||||
/* Existing density classes retain layout and typography; adapt neutral paint only. */
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-layout,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-header,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields > div,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-dialog-section:not([data-tone]) {
|
||||
background: var(--workbench-surface);
|
||||
}
|
||||
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-layout > .detail-page-layout__header,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields > div,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__cell,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .form-section.density-form-section,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-dialog-section:not([data-tone]) {
|
||||
border-color: var(--workbench-border);
|
||||
}
|
||||
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-title,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview dd,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields dd,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__content.el-descriptions__cell,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form-section .form-section__heading h2 {
|
||||
color: var(--workbench-text);
|
||||
}
|
||||
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview dt,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview small,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form-section .form-section__heading p,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form .el-form-item__label {
|
||||
color: var(--workbench-muted);
|
||||
}
|
||||
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields dt,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__label.el-descriptions__cell {
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
}
|
||||
|
||||
/* Neutral form tokens leave required marks, validation, disabled and semantic colors intact. */
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer).density-form,
|
||||
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form {
|
||||
--el-border-color: var(--workbench-border);
|
||||
--el-fill-color-blank: var(--workbench-surface);
|
||||
--el-text-color-regular: var(--workbench-text);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-evidence table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--admin-font-body);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-evidence th,
|
||||
.admin-workbench .workbench-evidence td {
|
||||
border: 1px solid var(--workbench-border);
|
||||
text-align: left;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-evidence table:not(.density-table) :is(th, td) {
|
||||
padding: var(--admin-space-1) var(--admin-space-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-evidence th {
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-notice {
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--workbench-accent-border);
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-accent-soft);
|
||||
color: var(--workbench-text);
|
||||
font-size: var(--workbench-note-size);
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* State labels remain the source of meaning; color only reinforces them. */
|
||||
.admin-workbench .workbench-step {
|
||||
min-width: 0;
|
||||
padding: var(--workbench-compact-card-space);
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: var(--workbench-icon-radius);
|
||||
background: var(--workbench-surface-soft);
|
||||
color: var(--workbench-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-step-index {
|
||||
display: grid;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: 50%;
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-muted);
|
||||
font-size: var(--workbench-note-size);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-step[data-state='active'],
|
||||
.admin-workbench .workbench-step[data-state='done'] {
|
||||
border-color: var(--workbench-accent-border);
|
||||
background: var(--workbench-accent-soft);
|
||||
color: var(--workbench-accent);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-step[data-state='active'] .workbench-step-index,
|
||||
.admin-workbench .workbench-step[data-state='done'] .workbench-step-index {
|
||||
border-color: var(--workbench-accent);
|
||||
background: var(--workbench-accent);
|
||||
color: var(--workbench-surface);
|
||||
}
|
||||
|
||||
.admin-workbench .el-button--primary:not(.is-plain):not(.is-link):not(.is-text) {
|
||||
--el-button-bg-color: var(--workbench-primary);
|
||||
--el-button-border-color: var(--workbench-primary);
|
||||
--el-button-hover-bg-color: var(--workbench-primary-hover);
|
||||
--el-button-hover-border-color: var(--workbench-primary-hover);
|
||||
--el-button-active-bg-color: var(--workbench-primary-active);
|
||||
--el-button-active-border-color: var(--workbench-primary-active);
|
||||
--el-button-disabled-bg-color: var(--workbench-primary-disabled);
|
||||
--el-button-disabled-border-color: var(--workbench-primary-disabled);
|
||||
}
|
||||
|
||||
.admin-workbench .workbench-skeleton {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
height: var(--workbench-metric-min-height);
|
||||
border: 1px solid var(--workbench-border);
|
||||
border-radius: var(--workbench-radius);
|
||||
background: var(--workbench-surface-soft);
|
||||
animation: admin-workbench-loading 1.6s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes admin-workbench-loading {
|
||||
from { opacity: 0.55; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.admin-workbench .workbench-skeleton {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user