192 lines
19 KiB
CSS
192 lines
19 KiB
CSS
@import './adminDensityTokens.css';
|
|
@import './adminTextActions.css';
|
|
|
|
/* Explicit opt-in for approved dense business workspaces and teleported dialogs. */
|
|
.admin-density, .admin-density-dialog, .admin-density-drawer {
|
|
--el-font-size-base: var(--admin-font-body);
|
|
--el-component-size: var(--admin-control-height);
|
|
--cc-list-table-font-size: var(--admin-font-body);
|
|
--cc-list-action-font-size: var(--admin-font-body);
|
|
--cc-list-query-font-size: var(--admin-font-body);
|
|
font-size: var(--admin-font-body, 13px);
|
|
}
|
|
.admin-density .surface-panel, .admin-density .query-toolbar {
|
|
border-radius: var(--admin-radius, 4px); box-shadow: none;
|
|
}
|
|
.admin-density .el-table, .admin-density-dialog .el-table {
|
|
--el-table-header-bg-color: var(--admin-label-bg);
|
|
--el-table-border-color: var(--admin-table-border);
|
|
--el-table-row-hover-bg-color: var(--admin-row-hover);
|
|
font-size: var(--admin-font-body, 13px);
|
|
}
|
|
.admin-density .el-table .el-table__cell, .admin-density .data-table .el-table .el-table__cell, .admin-density-dialog .el-table .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
|
|
.admin-density .el-table .cell, .admin-density-dialog .el-table .cell { line-height: 22px; }
|
|
.admin-density .el-table .el-button--small, .admin-density-dialog .el-table .el-button--small { height: var(--admin-action-height, 28px); padding: var(--admin-space-1, 4px) var(--admin-space-3, 8px); }
|
|
.admin-density .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--admin-row-stripe); }
|
|
.admin-density .data-table .data-table__pagination { min-height: 48px; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
|
|
.admin-density .el-empty { padding: var(--admin-space-5, 12px) 0; }
|
|
.admin-density .el-empty__image { display: none; }
|
|
.admin-density .el-empty__description { margin-top: 0; }
|
|
.admin-density .el-empty__description p { font-size: var(--admin-font-body, 13px); }
|
|
.admin-density-dialog .el-form-item__label { line-height: 22px; }
|
|
.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: var(--admin-label-bg); }
|
|
.admin-density-dialog .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
|
|
.admin-density-dialog.el-dialog.is-fullscreen { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
|
|
.admin-density-dialog.el-dialog.admin-density-workspace:not(.is-fullscreen) { height: 92vh; max-height: 92vh; margin-top: 4vh; }
|
|
.admin-density-dialog .el-dialog__headerbtn { top: 0; }
|
|
.admin-density-dialog .app-dialog__native-fullscreen-control { top: 6px; }
|
|
.admin-density-confirm.el-message-box { --el-font-size-base: var(--admin-font-body); border-radius: var(--admin-radius, 4px); padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
|
|
.admin-density-confirm .el-message-box__title { font-size: var(--admin-font-title, 16px); }
|
|
|
|
/* Dialogs are teleported; opt in explicitly instead of styling all AppDialog instances. */
|
|
.admin-density-dialog.el-dialog {
|
|
--el-font-size-base: var(--admin-font-body);
|
|
--el-component-size: var(--admin-control-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-radius: var(--admin-radius, 4px);
|
|
}
|
|
.admin-density-dialog.el-dialog:not(.is-fullscreen) { margin-top: 6vh; max-height: 88vh; }
|
|
.admin-density-dialog.el-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
|
|
.admin-density-dialog.el-dialog .el-dialog__title { font-size: var(--admin-font-title, 16px); line-height: 24px; font-weight: 600; }
|
|
.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
|
|
.admin-density-dialog.el-dialog .el-dialog__footer { flex: 0 0 auto; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-top: 1px solid var(--cc-border); }
|
|
.admin-density-dialog.el-dialog .el-table { font-size: var(--admin-font-body, 13px); }
|
|
.admin-density-dialog.el-dialog .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
|
|
.admin-density-dialog.el-dialog .el-table .cell { line-height: 22px; }
|
|
.admin-density-dialog.el-dialog .el-form-item { margin-bottom: 14px; }
|
|
.admin-density-dialog.el-dialog .el-form-item__label { font-size: var(--admin-font-body, 13px); }
|
|
.admin-density-dialog.el-dialog .el-alert { padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); border-radius: 3px; }
|
|
.admin-density-dialog.el-dialog .el-empty { padding: var(--admin-space-5, 12px) 0; }
|
|
.admin-density-dialog.el-dialog .el-empty__image { display: none; }
|
|
.admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }
|
|
|
|
/* Headers must keep units visible even when a saved column width is narrow. */
|
|
.admin-density .el-table th.el-table__cell .cell,
|
|
.admin-density-dialog .el-table th.el-table__cell .cell { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 18px; }
|
|
|
|
/* Shared outlined business actions. Pages choose tone, never redefine paint/size. */
|
|
:is(.admin-density, .admin-density-dialog) .el-button.density-action {
|
|
--action-color: var(--admin-action-neutral);
|
|
--action-border: var(--admin-action-neutral-border);
|
|
--action-hover-bg: var(--admin-label-bg);
|
|
--el-button-text-color: var(--action-color);
|
|
--el-button-border-color: var(--action-border);
|
|
--el-button-bg-color: var(--admin-surface);
|
|
--el-button-hover-text-color: var(--action-color);
|
|
--el-button-hover-border-color: var(--action-color);
|
|
--el-button-hover-bg-color: var(--action-hover-bg);
|
|
--el-button-active-text-color: var(--action-color);
|
|
--el-button-active-border-color: var(--action-color);
|
|
--el-button-active-bg-color: var(--action-hover-bg);
|
|
--el-button-disabled-text-color: #a1a1aa;
|
|
--el-button-disabled-border-color: var(--admin-table-border);
|
|
--el-button-disabled-bg-color: var(--admin-surface);
|
|
height: var(--admin-action-height); min-height: var(--admin-action-height);
|
|
padding: var(--admin-space-1) var(--admin-space-4); margin: 0;
|
|
border: 1px solid var(--action-border); border-radius: var(--admin-action-radius);
|
|
color: var(--action-color); background: var(--admin-surface);
|
|
font-size: var(--admin-font-body); font-weight: 600; box-shadow: none;
|
|
}
|
|
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="warning"] { --action-color: var(--admin-action-warning); --action-border: var(--admin-action-warning-border); --action-hover-bg: var(--admin-action-warning-hover); }
|
|
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="purple"] { --action-color: var(--admin-action-purple); --action-border: var(--admin-action-purple-border); --action-hover-bg: var(--admin-action-purple-hover); }
|
|
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="primary"] { --action-color: var(--admin-action-primary); --action-border: var(--admin-action-primary-border); --action-hover-bg: var(--admin-action-primary-hover); }
|
|
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="success"] { --action-color: var(--admin-action-success); --action-border: var(--admin-action-success-border); --action-hover-bg: var(--admin-action-success-hover); }
|
|
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="danger"] { --action-color: var(--admin-action-danger); --action-border: var(--admin-action-danger-border); --action-hover-bg: var(--admin-action-danger-hover); }
|
|
:is(.admin-density, .admin-density-dialog) .el-button.density-action:hover:not(:disabled) { color: var(--action-color); border-color: var(--action-color); background: var(--action-hover-bg); box-shadow: none; }
|
|
:is(.admin-density, .admin-density-dialog) .el-button.density-action:disabled { color: var(--el-button-disabled-text-color); border-color: var(--el-button-disabled-border-color); background: var(--admin-surface); }
|
|
:is(.admin-density, .admin-density-dialog) .el-button.density-action:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }
|
|
|
|
/* Detail headings and summaries shared by domestic and overseas pages. */
|
|
.admin-density .detail-page-layout.density-detail-layout { gap: 0; background: var(--admin-surface); }
|
|
.admin-density .density-detail-layout > .detail-page-layout__header { border-bottom: 1px solid var(--cc-border); }
|
|
.admin-density .density-detail-layout > .detail-page-layout__content { padding: var(--admin-space-5); }
|
|
.admin-density .density-detail-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); margin-bottom: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
|
|
.admin-density .density-detail-heading { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
|
|
.admin-density .density-detail-title { min-width: 0; margin: 0; color: #172033; font-size: var(--admin-font-title, 16px); line-height: 1.5; overflow-wrap: anywhere; }
|
|
:is(.admin-density, .admin-density-dialog) .density-detail-overview { border-bottom: 1px solid var(--cc-border); display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
|
|
:is(.admin-density, .admin-density-dialog) .density-detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
|
|
:is(.admin-density, .admin-density-dialog) .density-detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
|
:is(.admin-density, .admin-density-dialog) .density-detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
|
:is(.admin-density, .admin-density-dialog) .density-detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
|
|
|
|
/* Back navigation stays in the detail heading, beside its business identifier. */
|
|
.admin-density .el-button.density-back { height: var(--admin-control-height); padding: 0; border: 0; background: transparent; color: var(--cc-muted); font-size: var(--admin-font-body); font-weight: 400; box-shadow: none; }
|
|
.admin-density .el-button.density-back:hover { color: var(--cc-primary); background: transparent; }
|
|
.admin-density .el-button.density-back:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }
|
|
|
|
/* Navigation tabs shared by customer/order details. Layout-specific borders stay local. */
|
|
.admin-density .density-tabs { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; background: var(--admin-surface); scrollbar-width: thin; }
|
|
.admin-density .density-tabs > button,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
|
|
.admin-density .density-tabs > button::after,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
|
|
.admin-density .density-tabs > button:hover,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:hover { background: #fafbff; color: #344054; }
|
|
.admin-density .density-tabs > button.active,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
|
|
.admin-density .density-tabs > button.active::after,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after { background: var(--cc-primary); }
|
|
.admin-density .density-tabs > button:focus-visible,
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
|
|
.admin-density .density-tab-icon { display: inline-flex; width: var(--admin-tab-icon-slot); height: var(--admin-tab-icon-slot); flex: 0 0 var(--admin-tab-icon-slot); align-items: center; justify-content: center; font: var(--admin-tab-icon-size)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
|
|
|
|
.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
|
|
.admin-density-drawer .el-drawer__title { font-size: var(--admin-font-title); }
|
|
.admin-density-drawer .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }
|
|
.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
|
|
|
|
/* Reusable row action group; no business action names in the shared layer. */
|
|
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--admin-space-2); }
|
|
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
|
|
|
/* The same action spacing also applies to native tables and teleported content. */
|
|
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
|
|
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
|
|
|
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
|
|
|
|
/* Element tabs retain their keyboard handling and use the shared detail-tab scale. */
|
|
.admin-density .density-element-tabs { min-width: 0; background: var(--admin-surface); border-bottom: 1px solid var(--admin-table-border); }
|
|
.admin-density .density-element-tabs > .el-tabs__header { margin: 0; }
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav-wrap::after { height: 1px; background: var(--cc-border); }
|
|
.admin-density .density-element-tabs > .el-tabs__header .el-tabs__active-bar { display: none; }
|
|
.admin-density .density-element-tabs:not(.density-contained-tabs) > .el-tabs__content { display: none; }
|
|
.admin-density .density-contained-tabs > .el-tabs__content { padding: var(--admin-space-5); }
|
|
|
|
/* Explicit page descriptions share the teleported detail table scale. */
|
|
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__label.el-descriptions__cell { width: var(--admin-label-width); font-size: var(--admin-font-caption); background: var(--admin-label-bg); }
|
|
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body); overflow-wrap: anywhere; }
|
|
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__cell { height: var(--admin-row-height); padding: var(--admin-space-2) var(--admin-space-3); }
|
|
|
|
/* Opted-in grouped forms use the same labels and spacing on pages and in dialogs. */
|
|
:is(.admin-density, .admin-density-dialog) .density-form,
|
|
.admin-density.density-form { --el-form-label-font-size: var(--admin-font-body); }
|
|
:is(.admin-density, .admin-density-dialog) .density-form .el-form-item,
|
|
.admin-density.density-form .el-form-item { margin-bottom: var(--admin-space-5); }
|
|
|
|
/* Opted-in FormSection consumers share form headings without page-level paint. */
|
|
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section { padding: var(--admin-space-5) 0; }
|
|
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section:first-child { padding-top: 0; }
|
|
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section:last-child { padding-bottom: 0; }
|
|
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading { margin-bottom: var(--admin-space-3); }
|
|
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading h2 { font-size: var(--admin-font-section); }
|
|
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading p { margin-top: var(--admin-space-1); font-size: var(--admin-font-caption); }
|
|
:is(.admin-density, .admin-density-dialog) .density-form :is(.el-select, .el-input-number, .el-date-editor) { width: 100%; }
|
|
|
|
/* Existing native data tables keep their business column widths and sticky cells. */
|
|
:is(.admin-density, .admin-density-dialog) .density-table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-body); }
|
|
:is(.admin-density, .admin-density-dialog) .density-table :is(th, td) { height: var(--admin-row-height); padding: var(--admin-space-1) var(--admin-space-3); border: 1px solid var(--admin-table-border); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
|
|
:is(.admin-density, .admin-density-dialog) .density-table th { background: var(--admin-label-bg); color: var(--cc-muted); font-weight: 600; }
|
|
:is(.admin-density, .admin-density-dialog) .density-table td { background: var(--admin-surface); }
|
|
:is(.admin-density, .admin-density-dialog) .density-table tbody tr:nth-child(even) td { background: var(--admin-row-stripe); }
|
|
:is(.admin-density, .admin-density-dialog) .density-table tbody tr:hover td { background: var(--admin-row-hover); }
|
|
|
|
/* Continuous description grid. Page owns column count and wide-field spans only. */
|
|
:is(.admin-density, .admin-density-dialog) .density-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); background: var(--admin-surface); }
|
|
:is(.admin-density, .admin-density-dialog) .density-fields > div { display: grid; grid-template-columns: var(--admin-field-label-width, var(--admin-label-width)) minmax(0, 1fr); min-width: 0; min-height: var(--admin-row-height); gap: 0; padding: 0; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); border-radius: 0; background: var(--admin-surface); }
|
|
:is(.admin-density, .admin-density-dialog) .density-fields dt { display: flex; align-items: center; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: var(--cc-muted); background: var(--admin-label-bg); font-size: var(--admin-font-caption); line-height: 20px; }
|
|
:is(.admin-density, .admin-density-dialog) .density-fields dd { align-self: center; min-width: 0; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: #25324a; font-size: var(--admin-font-body); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; white-space: normal; }
|