update 重构 将scss文件拆解 按具体功能细分文件 便于后续维护
This commit is contained in:
疯狂的狮子Li
@@ -0,0 +1,65 @@
|
||||
/* Baseline Element Plus tweaks reused by the rest of the overrides. */
|
||||
|
||||
.el-collapse {
|
||||
.collapse__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type='file'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
.el-button--mini {
|
||||
padding: 7px 10px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-col {
|
||||
.cell {
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* Dialog and upload-related overlays. */
|
||||
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
background: var(--app-overlay-mask);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box,
|
||||
var(--app-surface-bg);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 18px 20px 14px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
margin-right: 0;
|
||||
background: var(--app-elevated-soft-bg);
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: var(--app-text-title);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
.el-dialog__close {
|
||||
color: var(--app-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.el-dialog__close {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 18px 20px 12px !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 14px 20px 20px;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__footer .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer .dialog-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Dropdown and inline menu helpers. */
|
||||
|
||||
.el-dropdown-menu {
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
min-height: 36px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--app-accent-soft);
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided {
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
|
||||
&::before {
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
top: -6px;
|
||||
width: auto;
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.el-range-editor.el-input__inner {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.el-range-separator {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dropdown .el-dropdown-link {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
/* Toast, alert, and message-box feedback components. */
|
||||
|
||||
.el-message-box .el-message-box__message {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--app-shadow-md);
|
||||
|
||||
.el-message-box__header {
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-message-box__headerbtn {
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
.el-message-box__close {
|
||||
color: var(--app-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.el-message-box__close {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
padding: 16px 20px 18px;
|
||||
}
|
||||
|
||||
.el-message-box__container {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.el-message-box__status {
|
||||
position: static;
|
||||
margin-top: 1px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px !important;
|
||||
background: var(--app-elevated-soft-bg);
|
||||
}
|
||||
|
||||
.el-message-box__message {
|
||||
color: var(--app-text-title);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px 20px;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-message-box__btns .el-button {
|
||||
margin-left: 0;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.el-message-box__input {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-message,
|
||||
.el-notification,
|
||||
.el-alert {
|
||||
border-radius: var(--app-radius-md);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-message {
|
||||
min-width: 320px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
.el-message__icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-message__content {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-message__closeBtn {
|
||||
color: var(--app-text-muted);
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
border-color: var(--el-color-success-light-7);
|
||||
background: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
border-color: var(--el-color-warning-light-7);
|
||||
background: var(--el-color-warning-light-9);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
border-color: var(--el-color-danger-light-7);
|
||||
background: var(--el-color-danger-light-9);
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.el-notification {
|
||||
width: 340px;
|
||||
padding: 16px 18px 16px 16px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
|
||||
.el-notification__group {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.el-notification__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-notification__closeBtn {
|
||||
top: 18px;
|
||||
color: var(--app-text-muted);
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-notification.right,
|
||||
.el-notification.left {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.el-notification--success {
|
||||
border-color: var(--el-color-success-light-7);
|
||||
}
|
||||
|
||||
.el-notification--warning {
|
||||
border-color: var(--el-color-warning-light-7);
|
||||
}
|
||||
|
||||
.el-notification--error {
|
||||
border-color: var(--el-color-danger-light-7);
|
||||
}
|
||||
|
||||
.el-notification--info {
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.el-message--success {
|
||||
background: rgba(31, 138, 90, 0.18);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: rgba(184, 121, 34, 0.18);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: rgba(178, 74, 74, 0.18);
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
background: rgba(43, 107, 211, 0.18);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Form controls and generic rounded inputs. */
|
||||
|
||||
.el-form--inline .el-form-item__label {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-select {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-date-editor {
|
||||
width: 308px;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper,
|
||||
.el-date-editor,
|
||||
.el-range-editor,
|
||||
.el-input-number,
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
border-radius: var(--app-radius-md);
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-textarea__inner:focus,
|
||||
.el-select__wrapper.is-focus,
|
||||
.el-date-editor.is-focus,
|
||||
.el-range-editor.is-focus {
|
||||
box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: var(--app-radius-md);
|
||||
transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-button:not(.is-text):not(.is-link):hover {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: var(--app-radius-md);
|
||||
}
|
||||
|
||||
.el-radio-button__inner,
|
||||
.el-checkbox-button__inner {
|
||||
border-radius: 10px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.el-radio-button:first-child .el-radio-button__inner,
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner,
|
||||
.el-radio-button:last-child .el-radio-button__inner,
|
||||
.el-checkbox-button:last-child .el-checkbox-button__inner {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */
|
||||
|
||||
.el-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li {
|
||||
border-radius: var(--app-radius-sm);
|
||||
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__total,
|
||||
.el-pagination .el-pagination__jump {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li,
|
||||
.el-pagination .el-pagination__sizes .el-input__wrapper {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.is-active {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */
|
||||
|
||||
.el-select__popper.el-popper,
|
||||
.el-picker__popper.el-popper,
|
||||
.el-autocomplete__popper.el-popper,
|
||||
.el-cascader__dropdown,
|
||||
.el-dropdown__popper.el-popper,
|
||||
.el-popover.el-popper {
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
.el-select__popper.el-popper,
|
||||
.el-autocomplete__popper.el-popper,
|
||||
.el-cascader__dropdown,
|
||||
.el-dropdown__popper.el-popper,
|
||||
.el-popover.el-popper {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__list,
|
||||
.el-autocomplete-suggestion__list,
|
||||
.el-cascader-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item,
|
||||
.el-autocomplete-suggestion li,
|
||||
.el-cascader-node {
|
||||
min-height: 38px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
line-height: 38px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-autocomplete-suggestion li:hover,
|
||||
.el-cascader-node:not(.is-disabled):hover,
|
||||
.el-cascader-node.in-active-path {
|
||||
background: var(--app-accent-soft);
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected,
|
||||
.el-autocomplete-suggestion li.highlighted {
|
||||
background: rgba(64, 158, 255, 0.12);
|
||||
color: var(--app-accent-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-disabled,
|
||||
.el-cascader-node.is-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-tree-node__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-select-dropdown__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-tree-node__expand-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.el-autocomplete-suggestion li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.el-autocomplete-suggestion li div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-cascader-menu {
|
||||
min-width: 180px;
|
||||
border-right-color: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.el-cascader-node__prefix,
|
||||
.el-cascader-node__postfix {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-popper.is-dark {
|
||||
border-color: rgba(15, 23, 42, 0.72);
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-popper.is-dark .el-popper__arrow::before {
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
border-color: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.el-popper.is-light {
|
||||
border-color: var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-popper.is-light .el-popper__arrow::before {
|
||||
background: var(--app-surface-bg);
|
||||
border-color: var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-picker__popper.el-popper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.el-date-picker,
|
||||
.el-date-range-picker,
|
||||
.el-time-panel,
|
||||
.el-time-range-picker,
|
||||
.el-picker-panel {
|
||||
background: transparent;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-picker-panel__body-wrapper,
|
||||
.el-date-range-picker__content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-picker-panel__icon-btn,
|
||||
.el-date-picker__header-label,
|
||||
.el-date-range-picker__header-label {
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-date-table td,
|
||||
.el-month-table td .cell,
|
||||
.el-year-table td .cell {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-date-table td.today .el-date-table-cell__text,
|
||||
.el-month-table td.today .cell,
|
||||
.el-year-table td.today .cell {
|
||||
color: var(--app-accent-strong);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-date-table td.available:hover,
|
||||
.el-month-table td .cell:hover,
|
||||
.el-year-table td .cell:hover {
|
||||
color: var(--app-accent-strong);
|
||||
background: var(--app-accent-soft);
|
||||
}
|
||||
|
||||
.el-date-table td.current:not(.disabled) .el-date-table-cell__text,
|
||||
.el-month-table td.current:not(.disabled) .cell,
|
||||
.el-year-table td.current:not(.disabled) .cell {
|
||||
background: var(--app-accent-strong);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-date-editor .el-range-separator {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-time-panel__content::before,
|
||||
.el-time-panel__content::after {
|
||||
border-color: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb {
|
||||
background: rgba(148, 163, 184, 0.42);
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb:hover {
|
||||
background: rgba(100, 116, 139, 0.56);
|
||||
}
|
||||
|
||||
.el-popover,
|
||||
.el-tooltip__popper,
|
||||
.el-popper {
|
||||
border-radius: var(--app-radius-md);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
max-width: 320px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.el-popconfirm {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.el-popconfirm__main {
|
||||
gap: 10px;
|
||||
line-height: 1.6;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-popconfirm__action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.el-popconfirm__action .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.el-popper.is-dark {
|
||||
border-color: rgba(30, 41, 59, 0.92);
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
}
|
||||
|
||||
.el-popper.is-dark .el-popper__arrow::before {
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
border-color: rgba(30, 41, 59, 0.92);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* Shared Element Plus primitives used across multiple component overrides. */
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
.el-popover.el-popper,
|
||||
.el-dropdown__popper .el-dropdown-menu,
|
||||
.el-picker__popper,
|
||||
.el-select__popper.el-popper {
|
||||
border-radius: var(--app-radius-lg);
|
||||
border-color: var(--app-surface-border);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer {
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: var(--app-accent-strong);
|
||||
--el-button-border-color: var(--app-accent-strong);
|
||||
--el-button-hover-bg-color: #4a7cff;
|
||||
--el-button-hover-border-color: #4a7cff;
|
||||
--el-button-active-bg-color: #2e5ce0;
|
||||
--el-button-active-border-color: #2e5ce0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: var(--app-surface-border);
|
||||
--el-table-header-bg-color: var(--tableHeaderBg);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset;
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
/* Drawers, loading masks, descriptions, trees, and empty states. */
|
||||
|
||||
.el-drawer {
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
margin-bottom: 0;
|
||||
padding: 18px 20px 16px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: var(--app-elevated-soft-bg);
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-drawer__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
color: var(--app-text-muted);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
color: var(--app-accent-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background: rgba(248, 250, 252, 0.76);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--app-accent-strong);
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
--el-descriptions-table-border: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-descriptions__body .el-descriptions__table {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-descriptions__label.el-descriptions__cell {
|
||||
background: var(--app-elevated-soft-bg) !important;
|
||||
color: var(--app-text-title);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-descriptions__content.el-descriptions__cell {
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
color: var(--app-text-title);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
min-height: 34px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node.is-current > .el-tree-node__content {
|
||||
background: var(--app-accent-soft);
|
||||
}
|
||||
|
||||
.el-empty__image {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.el-empty__description p {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-color-dropdown {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.el-loading-mask {
|
||||
background: rgba(6, 11, 22, 0.7);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user