You've already forked rollingDraw
567 lines
13 KiB
CSS
567 lines
13 KiB
CSS
/* Element Plus 组件样式覆盖 - 基于参考项目设计 */
|
|
|
|
/* ===== 按钮组件 ===== */
|
|
.el-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--border-radius-md);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-family-primary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: var(--transition-color), var(--transition-background), var(--transition-border), var(--transition-box-shadow), var(--transition-transform);
|
|
background: none;
|
|
color: var(--color-text-primary);
|
|
padding: var(--spacing-lg) var(--spacing-xl);
|
|
}
|
|
|
|
.el-button:focus {
|
|
outline: 2px solid var(--color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.el-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-text-white);
|
|
box-shadow: var(--shadow-button);
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
|
|
}
|
|
|
|
.el-button--primary:active {
|
|
transform: translateY(0);
|
|
box-shadow: var(--shadow-button);
|
|
}
|
|
|
|
.el-button--success {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: var(--color-text-white);
|
|
box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--success:hover {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-success-rgb), 0.4);
|
|
}
|
|
|
|
.el-button--success:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--danger {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-text-white);
|
|
box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--danger:hover {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-danger-rgb), 0.4);
|
|
}
|
|
|
|
.el-button--danger:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--warning {
|
|
background: var(--color-warning);
|
|
border-color: var(--color-warning);
|
|
color: var(--color-text-white);
|
|
box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--warning:hover {
|
|
background: var(--color-warning);
|
|
border-color: var(--color-warning);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-warning-rgb), 0.4);
|
|
}
|
|
|
|
.el-button--warning:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--info {
|
|
background: var(--color-info);
|
|
border-color: var(--color-info);
|
|
color: var(--color-text-white);
|
|
box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--info:hover {
|
|
background: var(--color-info);
|
|
border-color: var(--color-info);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-info-rgb), 0.4);
|
|
}
|
|
|
|
.el-button--info:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
|
|
}
|
|
|
|
.el-button--default {
|
|
background: var(--color-background);
|
|
border-color: var(--color-border);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.el-button--default:hover {
|
|
background: rgba(var(--color-primary-rgb), 0.1);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.el-button--default:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.el-button--small {
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
font-size: var(--font-size-sm);
|
|
height: var(--button-height-sm);
|
|
}
|
|
|
|
.el-button--small.el-button--primary:hover,
|
|
.el-button--small.el-button--success:hover,
|
|
.el-button--small.el-button--info:hover,
|
|
.el-button--small.el-button--warning:hover,
|
|
.el-button--small.el-button--danger:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.el-button--small.el-button--primary:active,
|
|
.el-button--small.el-button--success:active,
|
|
.el-button--small.el-button--info:active,
|
|
.el-button--small.el-button--warning:active,
|
|
.el-button--small.el-button--danger:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.el-button.is-circle {
|
|
border-radius: var(--border-radius-full);
|
|
}
|
|
|
|
.el-button.is-link {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.el-button.is-link:hover {
|
|
background: transparent;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-button--text {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.el-button--text:hover {
|
|
background: rgba(var(--color-primary-rgb), 0.1);
|
|
color: var(--color-primary);
|
|
transform: none;
|
|
}
|
|
|
|
/* ===== 卡片组件 ===== */
|
|
.el-card {
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-small);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.el-card__header {
|
|
font-family: var(--font-family-secondary);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-text-primary);
|
|
padding: var(--spacing-xl);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: var(--spacing-xl);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
/* ===== 表格组件 ===== */
|
|
.el-table {
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-small);
|
|
font-family: var(--font-family-primary);
|
|
}
|
|
|
|
.el-table .el-table__header-wrapper {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
.el-table th {
|
|
background: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-family-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.el-table td {
|
|
color: var(--color-text-primary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.el-table .el-table__row:hover > td {
|
|
background: rgba(var(--color-primary-rgb), 0.05);
|
|
}
|
|
|
|
.el-table .el-table__row {
|
|
transition: var(--transition-background);
|
|
}
|
|
|
|
/* ===== 对话框组件 ===== */
|
|
.el-dialog {
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-large);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-white);
|
|
padding: var(--spacing-2xl);
|
|
border-bottom: none;
|
|
}
|
|
|
|
.el-dialog__title {
|
|
color: var(--color-text-white);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-family-secondary);
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: var(--spacing-lg);
|
|
transform: translateY(-50%);
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--border-radius-full);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
transition: var(--transition-background), var(--transition-transform);
|
|
}
|
|
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
color: var(--color-text-white);
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.el-dialog__headerbtn:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-50%) scale(1.1);
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: var(--spacing-2xl);
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
|
|
border-top: 1px solid var(--color-border);
|
|
text-align: right;
|
|
}
|
|
|
|
/* ===== 表单组件 ===== */
|
|
.el-form-item__label {
|
|
color: var(--color-text-primary);
|
|
font-weight: var(--font-weight-medium);
|
|
font-family: var(--font-family-primary);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.el-input__wrapper {
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
transition: var(--transition-border), var(--transition-box-shadow);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-input__wrapper:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-input__wrapper.is-focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
.el-input__inner::placeholder {
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.el-textarea__inner {
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
transition: var(--transition-border), var(--transition-box-shadow);
|
|
font-family: var(--font-family-primary);
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text-primary);
|
|
line-height: var(--line-height-relaxed);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-textarea__inner:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-textarea__inner:focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
.el-textarea__inner::placeholder {
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
/* ===== 选择器组件 ===== */
|
|
.el-select .el-input__wrapper {
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-select-dropdown {
|
|
border-radius: var(--border-radius-lg);
|
|
border: none;
|
|
box-shadow: var(--shadow-large);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.el-select-dropdown__item {
|
|
border-radius: var(--border-radius-md);
|
|
padding: var(--spacing-lg) var(--spacing-xl);
|
|
transition: var(--transition-color), var(--transition-background);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.el-select-dropdown__item:hover {
|
|
background: rgba(var(--color-primary-rgb), 0.1);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.el-select-dropdown__item.is-selected {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
/* ===== 数字输入框 ===== */
|
|
.el-input-number {
|
|
width: 100px;
|
|
}
|
|
|
|
.el-input-number .el-input__wrapper {
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
transition: var(--transition-border), var(--transition-box-shadow);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-input-number .el-input__wrapper:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.el-input-number .el-input__wrapper.is-focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
/* ===== 上传组件 ===== */
|
|
.el-upload-dragger {
|
|
border-radius: var(--border-radius-lg);
|
|
border: 2px dashed var(--color-border);
|
|
transition: var(--transition-border), var(--transition-background);
|
|
}
|
|
|
|
.el-upload-dragger:hover {
|
|
border-color: var(--color-primary);
|
|
background: rgba(var(--color-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* ===== 标签组件 ===== */
|
|
.el-tag {
|
|
border-radius: var(--border-radius-full);
|
|
font-weight: var(--font-weight-medium);
|
|
font-family: var(--font-family-primary);
|
|
}
|
|
|
|
.el-tag--success {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.el-tag--info {
|
|
background: var(--color-info);
|
|
border-color: var(--color-info);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.el-tag--warning {
|
|
background: var(--color-warning);
|
|
border-color: var(--color-warning);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.el-tag--danger {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
/* ===== 消息提示 ===== */
|
|
.el-message {
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-large);
|
|
font-family: var(--font-family-primary);
|
|
}
|
|
|
|
.el-message--success {
|
|
background: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
|
|
.el-message--warning {
|
|
background: var(--color-warning);
|
|
border-color: var(--color-warning);
|
|
}
|
|
|
|
.el-message--error {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
}
|
|
|
|
.el-message--info {
|
|
background: var(--color-info);
|
|
border-color: var(--color-info);
|
|
}
|
|
|
|
/* ===== 复选框 ===== */
|
|
.el-checkbox {
|
|
font-family: var(--font-family-primary);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background-color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.el-checkbox__inner:hover {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* ===== 分页 ===== */
|
|
.el-pagination {
|
|
font-family: var(--font-family-primary);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.el-pagination .el-pager li {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
margin: 0 2px;
|
|
transition: var(--transition-color), var(--transition-background);
|
|
}
|
|
|
|
.el-pagination .el-pager li.active {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-white);
|
|
}
|
|
|
|
.el-pagination .el-pager li:hover {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.el-pagination button {
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* ===== 开关 ===== */
|
|
.el-switch {
|
|
--el-switch-on-color: var(--color-success);
|
|
}
|
|
|
|
.el-switch__core {
|
|
border-radius: var(--border-radius-full);
|
|
}
|
|
|
|
/* ===== 下拉菜单 ===== */
|
|
.el-dropdown-menu {
|
|
border-radius: var(--border-radius-lg);
|
|
border: none;
|
|
box-shadow: var(--shadow-large);
|
|
padding: var(--spacing-md);
|
|
background: var(--color-background);
|
|
overflow: hidden;
|
|
font-family: var(--font-family-primary);
|
|
}
|
|
|
|
.el-dropdown-menu__item {
|
|
border-radius: var(--border-radius-md);
|
|
padding: var(--spacing-lg) var(--spacing-xl);
|
|
transition: var(--transition-color), var(--transition-background);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.el-dropdown-menu__item:hover {
|
|
background: rgba(var(--color-primary-rgb), 0.1);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.el-dropdown-menu__item.is-divided {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
margin-top: 8px;
|
|
padding-top: 16px;
|
|
} |