html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
464b72cff90a3340a151ca7b5c846d7313b81ca9
admin-web/src/styles/adminDensity.css
T

285 lines
28 KiB
CSS
Raw Normal View History

优化
2026-09-14 17:54:21 +08:00
@import './adminDensityTokens.css';
优化
2026-09-30 14:01:58 +08:00
@import './adminTextActions.css';
优化
2026-09-14 17:54:21 +08:00
优化
2026-09-14 15:33:35 +08:00
/* Explicit opt-in for approved dense business workspaces and teleported dialogs. */
优化
2026-09-14 17:54:21 +08:00
.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);
优化
2026-09-14 15:33:35 +08:00
}
.admin-density .surface-panel, .admin-density .query-toolbar {
优化
2026-09-14 17:54:21 +08:00
border-radius: var(--admin-radius, 4px); box-shadow: none;
优化
2026-09-14 15:33:35 +08:00
}
.admin-density .el-table, .admin-density-dialog .el-table {
优化
2026-09-14 17:54:21 +08:00
--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);
优化
2026-09-14 15:33:35 +08:00
}
优化
2026-09-14 18:34:34 +08:00
.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; }
优化
2026-09-14 15:33:35 +08:00
.admin-density .el-table .cell, .admin-density-dialog .el-table .cell { line-height: 22px; }
优化
2026-09-14 17:54:21 +08:00
.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); }
优化
2026-09-14 18:34:34 +08:00
.admin-density .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--admin-row-stripe); }
优化
2026-09-14 17:54:21 +08:00
.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; }
优化
2026-09-14 15:33:35 +08:00
.admin-density .el-empty__image { display: none; }
.admin-density .el-empty__description { margin-top: 0; }
优化
2026-09-14 17:54:21 +08:00
.admin-density .el-empty__description p { font-size: var(--admin-font-body, 13px); }
优化
2026-09-14 15:33:35 +08:00
.admin-density-dialog .el-form-item__label { line-height: 22px; }
优化
2026-09-14 18:34:34 +08:00
.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: var(--admin-label-bg); }
优化
2026-09-14 17:54:21 +08:00
.admin-density-dialog .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
优化
2026-09-14 15:33:35 +08:00
.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; }
优化
2026-09-14 17:54:21 +08:00
.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); }
优化
2026-09-14 15:33:35 +08:00
/* Dialogs are teleported; opt in explicitly instead of styling all AppDialog instances. */
.admin-density-dialog.el-dialog {
优化
2026-09-14 17:54:21 +08:00
--el-font-size-base: var(--admin-font-body);
--el-component-size: var(--admin-control-height);
优化
2026-09-14 15:33:35 +08:00
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
优化
2026-09-14 17:54:21 +08:00
border-radius: var(--admin-radius, 4px);
优化
2026-09-14 15:33:35 +08:00
}
.admin-density-dialog.el-dialog:not(.is-fullscreen) { margin-top: 6vh; max-height: 88vh; }
优化
2026-09-14 17:54:21 +08:00
.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); }
优化
2026-10-16 18:25:49 +08:00
/* Compact confirmations keep one message and right-aligned actions without section dividers. */
.admin-density-dialog.density-confirm-dialog.el-dialog:not(.is-fullscreen) { margin: auto; }
.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__header { border-bottom: 0; }
.admin-density-dialog.density-confirm-dialog.el-dialog .el-dialog__footer { border-top: 0; padding-bottom: var(--admin-space-5, 12px); }
优化
2026-09-14 17:54:21 +08:00
.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; }
优化
2026-09-14 15:33:35 +08:00
.admin-density-dialog.el-dialog .el-table .cell { line-height: 22px; }
.admin-density-dialog.el-dialog .el-form-item { margin-bottom: 14px; }
优化
2026-09-14 17:54:21 +08:00
.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; }
优化
2026-09-14 15:33:35 +08:00
.admin-density-dialog.el-dialog .el-empty__image { display: none; }
.admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }
优化
2026-09-14 15:52:00 +08:00
优化
2026-10-20 17:59:13 +08:00
/* Opt-in comfortable editor frame for short forms that need room to breathe. */
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog { --el-component-size: 40px; border-radius: 12px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog:not(.is-fullscreen) { margin-top: 10vh; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__header { padding: 18px 48px 18px 24px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__headerbtn { top: 6px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__body { padding: 24px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-dialog__footer { padding: 16px 24px; background: var(--admin-label-bg); }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item { margin-bottom: 20px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-form-item__label { margin-bottom: 8px; font-weight: 500; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .el-select__wrapper { min-height: 40px; }
.admin-density-dialog.admin-density-dialog--comfortable.el-dialog .app-dialog__footer .el-button { min-width: 88px; height: 38px; }
style(admin): unify dialog layouts and dense readonly presentation
2026-10-20 10:11:31 +08:00
/* Opted-in detail and editor content reuse the existing compact drawer frame. */
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-code-block { margin:0; padding:var(--admin-space-3); border:1px solid var(--admin-table-border); border-radius:var(--admin-radius); background:var(--admin-surface); color:var(--cc-text); font:var(--admin-font-caption)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Explicit section opt-in; existing dialogs retain their approved body layout. */
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section {
min-width: 0;
margin: 0 0 var(--admin-space-5);
padding: var(--admin-space-4) var(--admin-space-5);
border: 1px solid var(--admin-table-border);
border-radius: var(--admin-dialog-section-radius);
background: var(--admin-surface);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section:last-child { margin-bottom: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-sections { display: grid; gap: var(--admin-space-5); }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-sections > .density-dialog-section { margin: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="summary"] {
border-color: var(--admin-dialog-summary-border);
background: var(--admin-dialog-summary-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="source"] {
border-color: var(--admin-dialog-source-border);
background: var(--admin-dialog-source-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section[data-tone="work"] {
border-color: var(--admin-dialog-work-border);
background: var(--admin-dialog-work-bg);
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section > .density-dialog-section__title {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--admin-space-3);
margin: 0 0 var(--admin-space-4); color: var(--cc-text); font-size: var(--admin-font-section); font-weight: 600;
}
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section__title small { color: var(--cc-muted); font-size: var(--admin-font-caption); font-weight: 400; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-note { margin: 0 0 var(--admin-space-3); color: var(--cc-muted); font-size: var(--admin-font-caption); }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section > .el-form > .el-form-item:last-child { margin-bottom: 0; }
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-dialog-section .el-table { --el-table-tr-bg-color: var(--admin-surface); }
优化
2026-09-14 15:52:00 +08:00
/* 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; }
优化
2026-09-14 17:54:21 +08:00
/* 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);
优化
2026-09-14 18:34:34 +08:00
--action-hover-bg: var(--admin-label-bg);
优化
2026-09-14 17:54:21 +08:00
--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);
优化
2026-09-14 18:34:34 +08:00
--el-button-hover-bg-color: var(--action-hover-bg);
优化
2026-09-14 17:54:21 +08:00
--el-button-active-text-color: var(--action-color);
--el-button-active-border-color: var(--action-color);
优化
2026-09-14 18:34:34 +08:00
--el-button-active-bg-color: var(--action-hover-bg);
优化
2026-09-14 17:54:21 +08:00
--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;
}
优化
2026-09-14 18:34:34 +08:00
: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; }
优化
2026-09-14 17:54:21 +08:00
: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; }
优化
2026-09-14 20:21:02 +08:00
/* Detail headings and summaries shared by domestic and overseas pages. */
优化
2026-09-15 09:58:15 +08:00
.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); }
优化
2026-09-14 20:21:02 +08:00
.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; }
优化
2026-09-15 09:58:15 +08:00
: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); }
优化
2026-09-14 20:21:02 +08:00
优化
2026-09-14 18:34:34 +08:00
/* 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; }
优化
2026-09-14 17:54:21 +08:00
/* 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; }
优化
2026-09-14 20:21:02 +08:00
.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; }
优化
2026-09-14 17:54:21 +08:00
.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); }
优化
2026-09-15 09:58:15 +08:00
.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
优化
2026-09-14 17:54:21 +08:00
/* Reusable row action group; no business action names in the shared layer. */
优化
2026-10-19 17:56:31 +08:00
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); }
优化
2026-09-14 17:54:21 +08:00
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
优化
2026-09-14 18:34:34 +08:00
/* The same action spacing also applies to native tables and teleported content. */
优化
2026-10-19 17:56:31 +08:00
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); }
优化
2026-09-14 18:34:34 +08:00
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
style(admin): unify dialog layouts and dense readonly presentation
2026-10-20 10:11:31 +08:00
:is(.admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--editor)) .density-actions--footer { justify-content: flex-end; flex-wrap: wrap; gap: var(--admin-space-3); }
优化
2026-09-14 18:34:34 +08:00
优化
2026-09-14 20:21:02 +08:00
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
优化
2026-09-14 18:34:34 +08:00
/* 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; }
优化
2026-09-14 20:21:02 +08:00
.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; }
优化
2026-09-14 20:03:27 +08:00
.admin-density .density-element-tabs:not(.density-contained-tabs) > .el-tabs__content { display: none; }
feat(fleet): integrate trip management and fee coverage workflows
2026-10-03 04:35:55 +08:00
/* List status tabs share the approved domestic order appearance. */
.admin-density .density-status-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid var(--admin-table-border, #e5e7eb); background: #f9fafb; scrollbar-width: thin; }
.admin-density .density-status-tabs > button,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item { position: relative; display: inline-flex; align-items: center; gap: var(--admin-space-2); flex: 0 0 auto; min-height: var(--admin-tab-height, 38px); padding: 0 var(--admin-space-6, 16px); border: 0; background: transparent; color: var(--cc-muted); font: inherit; font-size: var(--admin-font-body, 13px); cursor: pointer; white-space: nowrap; }
.admin-density .density-status-tabs > button::after,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item::after { position: absolute; right: var(--admin-space-5, 12px); bottom: 0; left: var(--admin-space-5, 12px); height: 3px; background: transparent; content: ''; }
.admin-density .density-status-tabs > button:hover,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:hover { color: var(--cc-primary); background: #f6f9fd; }
.admin-density .density-status-tabs > button:focus-visible,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
.admin-density .density-status-tabs > button.is-active,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active { background: transparent; color: var(--cc-primary); font-weight: 600; }
.admin-density .density-status-tabs > button.is-active::after,
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after { background: var(--cc-primary); }
.admin-density .density-element-tabs.density-status-tabs > .el-tabs__header .el-tabs__nav-wrap::after { height: 0; }
@media (max-width: 720px) { .admin-density .density-status-tabs > button { min-height: 46px; padding: 0 14px; } }
@media (max-width: 360px) { .admin-density .density-status-tabs > button { padding: 0 10px; } }
优化
2026-09-14 20:03:27 +08:00
.admin-density .density-contained-tabs > .el-tabs__content { padding: var(--admin-space-5); }
/* Explicit page descriptions share the teleported detail table scale. */
优化
2026-09-15 09:58:15 +08:00
: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); }
优化
2026-09-14 18:34:34 +08:00
/* 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); }
style(admin): unify dialog layouts and dense readonly presentation
2026-10-20 10:11:31 +08:00
.admin-density-dialog .density-form--flush-end > .el-form-item:last-child { margin-bottom: 0; }
优化
2026-09-14 18:34:34 +08:00
优化
2026-09-15 09:58:15 +08:00
/* 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%; }
优化
2026-09-14 18:34:34 +08:00
/* Existing native data tables keep their business column widths and sticky cells. */
style(admin): unify dialog layouts and dense readonly presentation
2026-10-20 10:11:31 +08:00
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-body); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .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, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table th { background: var(--admin-label-bg); color: var(--cc-muted); font-weight: 600; }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table td { background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table tbody tr:nth-child(even) td { background: var(--admin-row-stripe); }
:is(.admin-density, .admin-density-dialog, .admin-density-drawer:where(.admin-density-drawer--detail, .admin-density-drawer--editor)) .density-table tbody tr:hover td { background: var(--admin-row-hover); }
/* Explicit cell editors keep one continuous table; focus retains Element's primary border. */
:is(.admin-density, .admin-density-dialog) .density-table--editable :is(.el-input, .el-textarea) {
--el-input-border-color: transparent;
--el-input-hover-border-color: var(--admin-table-border);
--el-input-bg-color: transparent;
}
优化
2026-10-20 16:45:09 +08:00
:is(.admin-density, .admin-density-dialog) .density-table--editable .density-table-editor--outlined .el-input {
--el-input-border-color: var(--el-color-primary-light-5);
--el-input-hover-border-color: var(--el-color-primary);
--el-input-bg-color: var(--admin-surface);
}
style(admin): unify dialog layouts and dense readonly presentation
2026-10-20 10:11:31 +08:00
:is(.admin-density, .admin-density-dialog) .density-table-editor { display: flex; align-items: center; gap: var(--admin-space-3); min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table-editor .el-input-number { flex: 1; width: 100%; min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-input__inner { text-align: left; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item { margin-bottom: 0; }
:is(.admin-density, .admin-density-dialog) .density-table--editable .el-form-item.is-error { margin-bottom: var(--admin-space-5); }
:is(.admin-density, .admin-density-dialog) .density-table--editable :is(.el-input-number, .el-segmented, .el-date-editor) { width: 100%; min-width: 0; }
:is(.admin-density, .admin-density-dialog) .density-table-editor > span { flex: 0 0 auto; color: var(--cc-muted); white-space: nowrap; }
优化
2026-09-14 18:34:34 +08:00
优化
2026-09-14 17:54:21 +08:00
/* 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; }
Reference in New Issue Copy Permalink