459 lines
12 KiB
SCSS
459 lines
12 KiB
SCSS
/* 深色模式基础变量
|
|
------------------------------- */
|
|
[data-theme='dark'] {
|
|
// 基础变量 - Twitter深色主题配色
|
|
--next-bg-main: #17202a; // Twitter标准深色背景
|
|
--next-color-white: #f7f9f9; // 主要文字颜色
|
|
--next-text-color: #f7f9f9; // 主要文字颜色
|
|
--next-color-disabled: #202e3a; // 禁用状态背景
|
|
--next-color-bar: #e7e9ea; // 顶部栏文字
|
|
--next-color-primary: #2c3640; // 主要前景色
|
|
--next-border-color: #38444d; // 边框颜色
|
|
--next-border-black: #2f3336; // 深色边框
|
|
--next-border-columns: #38444d; // 列分隔符
|
|
--next-color-seting: #273340; // 设置面板背景
|
|
--next-text-color-regular: #8b98a5; // 常规文字
|
|
--next-text-color-placeholder: #536471; // 占位符文字
|
|
--next-color-hover: #1e2732; // 悬停背景
|
|
--next-color-hover-rgba: rgba(239, 243, 244, 0.1); // 半透明悬停效果
|
|
|
|
// root 变量映射
|
|
--next-bg-main-color: var(--next-bg-main) !important;
|
|
--next-bg-topBar: var(--next-color-disabled) !important;
|
|
--next-bg-topBarColor: var(--next-color-bar) !important;
|
|
--next-bg-menuBar: var(--next-color-disabled) !important;
|
|
--next-bg-menuBarColor: var(--next-color-bar) !important;
|
|
--next-bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
|
|
--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
|
|
--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
|
|
--next-border-color-light: var(--next-border-black) !important;
|
|
--next-color-primary-lighter: var(--next-color-primary) !important;
|
|
--next-color-success-lighter: var(--next-color-primary) !important;
|
|
--next-color-warning-lighter: var(--next-color-primary) !important;
|
|
--next-color-danger-lighter: var(--next-color-primary) !important;
|
|
--next-bg-color: var(--next-color-primary) !important;
|
|
--next-color-dark-hover: var(--next-color-hover) !important;
|
|
--next-color-menu-hover: var(--next-color-hover-rgba) !important;
|
|
--next-color-user-hover: var(--next-color-hover-rgba) !important;
|
|
--next-color-seting-main: var(--next-color-seting) !important;
|
|
--next-color-seting-aside: var(--next-color-hover) !important;
|
|
--next-color-seting-header: var(--next-color-primary) !important;
|
|
|
|
// Element Plus 变量覆盖
|
|
--el-color-white: var(--next-color-disabled) !important;
|
|
--el-text-color-primary: var(--next-color-bar) !important;
|
|
--el-border-color: var(--next-border-black) !important;
|
|
--el-border-color-light: var(--next-border-black) !important;
|
|
--el-border-color-lighter: var(--next-border-black) !important;
|
|
--el-border-color-extra-light: var(--el-color-primary-light-8) !important;
|
|
--el-text-color-regular: var(--next-text-color-regular) !important;
|
|
--el-bg-color: var(--next-color-disabled) !important;
|
|
--el-color-primary-light-9: var(--next-color-hover) !important;
|
|
--el-text-color-disabled: var(--next-text-color-placeholder) !important;
|
|
--el-text-color-disabled-base: var(--el-color-primary) !important;
|
|
--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
|
|
--el-disabled-bg-color: var(--next-color-disabled) !important;
|
|
--el-fill-base: var(--next-color-white) !important;
|
|
--el-fill-color: var(--next-color-hover-rgba) !important;
|
|
--el-fill-color-blank: var(--next-color-disabled) !important;
|
|
--el-fill-color-light: var(--next-color-hover-rgba) !important;
|
|
--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
|
|
--el-mask-color: rgb(42 42 42 / 80%);
|
|
--el-fill-color-lighter: var(--next-color-hover-rgba) !important;
|
|
|
|
/* Element Plus 组件深色模式样式
|
|
------------------------------- */
|
|
// Table 表格
|
|
.el-table {
|
|
--el-table-border-color: var(--next-border-color);
|
|
--el-table-header-bg-color: var(--next-color-primary);
|
|
--el-table-row-hover-bg-color: var(--next-color-hover);
|
|
color: var(--next-color-white);
|
|
th.el-table__cell {
|
|
background-color: #1c2732; // 表头背景色调整
|
|
}
|
|
.el-button.is-text {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// Button 按钮
|
|
.el-button {
|
|
transition: opacity 0.3s, border-color 0.3s;
|
|
|
|
&:not(.is-disabled):hover {
|
|
border-color: var(--next-border-color) !important;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
.el-button--primary,
|
|
.el-button--info,
|
|
.el-button--danger,
|
|
.el-button--success,
|
|
.el-button--warning {
|
|
--el-button-text-color: var(--next-color-white) !important;
|
|
--el-button-hover-text-color: var(--next-color-white) !important;
|
|
--el-button-disabled-text-color: var(--next-color-white) !important;
|
|
&:hover {
|
|
border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
|
|
}
|
|
}
|
|
|
|
// Drawer 抽屉
|
|
.el-divider__text {
|
|
background-color: var(--el-color-white) !important;
|
|
}
|
|
.el-drawer {
|
|
border-left: 1px solid var(--next-border-color-light) !important;
|
|
}
|
|
|
|
// Tabs 标签页
|
|
.el-tabs--border-card {
|
|
background-color: var(--el-color-white) !important;
|
|
> .el-tabs__header .el-tabs__item.is-active {
|
|
background: var(--next-color-primary-lighter);
|
|
}
|
|
}
|
|
|
|
// Alert 警告
|
|
.el-alert,
|
|
.notice-bar {
|
|
border: 1px solid var(--next-border-color) !important;
|
|
background-color: var(--next-color-disabled) !important;
|
|
}
|
|
|
|
// Card 卡片
|
|
.el-card {
|
|
--el-card-bg-color: var(--next-color-disabled);
|
|
border-color: var(--next-border-color);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
// Tag 标签
|
|
.el-tag {
|
|
background-color: var(--next-bg-color) !important;
|
|
|
|
// 各种类型的标签样式
|
|
&.el-tag--info {
|
|
--el-tag-bg-color: rgba(239, 243, 244, 0.1);
|
|
--el-tag-text-color: #8b98a5;
|
|
}
|
|
|
|
&.el-tag--primary {
|
|
--el-tag-bg-color: rgba(29, 155, 240, 0.1);
|
|
--el-tag-text-color: #1d9bf0;
|
|
}
|
|
|
|
&.el-tag--success {
|
|
--el-tag-bg-color: rgba(0, 186, 124, 0.1);
|
|
--el-tag-text-color: #00ba7c;
|
|
}
|
|
|
|
&.el-tag--warning {
|
|
--el-tag-bg-color: rgba(255, 212, 0, 0.1);
|
|
--el-tag-text-color: #ffd400;
|
|
}
|
|
|
|
&.el-tag--danger {
|
|
--el-tag-bg-color: rgba(244, 33, 46, 0.1);
|
|
--el-tag-text-color: #f4212e;
|
|
}
|
|
}
|
|
|
|
// Dialog 对话框
|
|
.el-dialog {
|
|
--el-dialog-bg-color: #17202a;
|
|
border: 1px solid var(--next-border-color);
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
|
|
border-radius: 8px;
|
|
|
|
.el-dialog__header {
|
|
border-bottom: 1px solid var(--next-border-color);
|
|
padding: 16px 20px;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
border-top: 1px solid var(--next-border-color);
|
|
padding: 12px 20px;
|
|
}
|
|
}
|
|
|
|
// Form 表单
|
|
.el-form {
|
|
.el-form-item__label {
|
|
color: var(--next-color-bar);
|
|
}
|
|
|
|
.el-input,
|
|
.el-textarea {
|
|
--el-input-bg-color: #273340;
|
|
--el-input-border-color: #38444d;
|
|
--el-input-hover-border-color: #8b98a5;
|
|
--el-input-focus-border-color: #293540;
|
|
|
|
&.is-focus {
|
|
box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 滚动条样式
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #38444d;
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
background: #536471;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #17202a;
|
|
}
|
|
|
|
// Tree 树形控件
|
|
.el-tree {
|
|
--el-tree-node-hover-bg-color: var(--next-color-hover);
|
|
--el-tree-node-content-height: 32px;
|
|
background-color: transparent;
|
|
color: var(--next-color-white);
|
|
|
|
.el-tree-node {
|
|
&:focus > .el-tree-node__content {
|
|
background-color: var(--next-color-hover);
|
|
}
|
|
|
|
&.is-current > .el-tree-node__content {
|
|
background-color: rgba(29, 155, 240, 0.1);
|
|
color: #1d9bf0;
|
|
}
|
|
|
|
.el-tree-node__content {
|
|
&:hover {
|
|
background-color: var(--next-color-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 展开/折叠图标
|
|
.el-tree-node__expand-icon {
|
|
color: var(--next-text-color-regular);
|
|
|
|
&.is-leaf {
|
|
color: var(--next-text-color-placeholder);
|
|
}
|
|
}
|
|
|
|
// 自定义图标
|
|
.custom-tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.icon {
|
|
margin-right: 8px;
|
|
color: var(--next-text-color-regular);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Switch 开关
|
|
.el-switch {
|
|
--el-switch-off-color: rgba(239, 243, 244, 0.1); // Twitter深色模式下的关闭背景色
|
|
--el-switch-on-color: #1d9bf0; // Twitter蓝色
|
|
|
|
.el-switch__core {
|
|
.el-switch__action {
|
|
background-color: var(--next-color-white);
|
|
|
|
.is-icon,
|
|
.is-text {
|
|
color: var(--next-color-white);
|
|
}
|
|
}
|
|
|
|
// 开关关闭时的圆点样式
|
|
&:not(.is-checked) .el-switch__action {
|
|
background-color: var(--next-text-color-regular);
|
|
}
|
|
}
|
|
|
|
&.is-checked {
|
|
.el-switch__core {
|
|
.el-switch__action {
|
|
background-color: var(--next-color-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 禁用状态
|
|
&.is-disabled {
|
|
opacity: 0.5;
|
|
|
|
.el-switch__core {
|
|
cursor: not-allowed;
|
|
|
|
.el-switch__action {
|
|
background-color: var(--next-text-color-placeholder);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pagination 分页
|
|
.el-pagination {
|
|
--el-pagination-bg-color: transparent;
|
|
--el-pagination-hover-color: #1d9bf0;
|
|
color: var(--next-color-white);
|
|
|
|
// 总条数和跳转文字
|
|
.el-pagination__total,
|
|
.el-pagination__jump {
|
|
color: var(--next-text-color-regular);
|
|
}
|
|
|
|
// 每页条数选择器
|
|
.el-pagination__sizes {
|
|
.el-select {
|
|
.el-input {
|
|
--el-select-input-focus-border-color: #1d9bf0;
|
|
|
|
.el-input__wrapper {
|
|
background-color: #202e3a;
|
|
box-shadow: none;
|
|
border: 1px solid var(--next-border-color);
|
|
|
|
&:hover {
|
|
border-color: #1d9bf0;
|
|
}
|
|
|
|
.el-input__inner {
|
|
color: var(--next-color-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页码
|
|
.el-pager {
|
|
background-color: transparent;
|
|
|
|
li {
|
|
background-color: transparent;
|
|
color: var(--next-color-white);
|
|
min-width: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border-radius: 16px;
|
|
font-weight: normal;
|
|
border: none;
|
|
|
|
&:hover:not(.is-active) {
|
|
color: #1d9bf0;
|
|
background-color: rgba(29, 155, 240, 0.1);
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: #1d9bf0;
|
|
color: var(--next-color-white);
|
|
}
|
|
|
|
// 省略号
|
|
&.more::before {
|
|
color: var(--next-text-color-regular);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 前进后退按钮
|
|
.btn-prev,
|
|
.btn-next {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0 8px;
|
|
min-width: 32px;
|
|
height: 32px;
|
|
border-radius: 16px;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: rgba(29, 155, 240, 0.1);
|
|
|
|
.el-icon {
|
|
color: #1d9bf0;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: transparent;
|
|
|
|
.el-icon {
|
|
color: var(--next-text-color-placeholder);
|
|
}
|
|
}
|
|
|
|
.el-icon {
|
|
color: var(--next-color-white);
|
|
}
|
|
}
|
|
|
|
// 跳转输入框
|
|
.el-pagination__editor.el-input {
|
|
.el-input__wrapper {
|
|
background-color: #202e3a;
|
|
box-shadow: none;
|
|
border: 1px solid var(--next-border-color);
|
|
|
|
&:hover {
|
|
border-color: #1d9bf0;
|
|
}
|
|
|
|
.el-input__inner {
|
|
color: var(--next-color-white);
|
|
height: 32px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&.is-focus .el-input__wrapper {
|
|
border-color: #1d9bf0;
|
|
box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add TagsView dark mode styles
|
|
.layout-navbars-tagsview {
|
|
.layout-navbars-tagsview-ul {
|
|
.tags-style-five-svg {
|
|
// Update mask color for dark mode
|
|
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMjAyZTNhIi8+CiAgPC9nPgo8L3N2Zz4=');
|
|
background-color: var(--next-color-hover);
|
|
}
|
|
|
|
.layout-navbars-tagsview-ul-li {
|
|
&:hover {
|
|
background-color: var(--next-color-hover) !important;
|
|
color: var(--next-color-white) !important;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: var(--next-color-hover) !important;
|
|
color: #1d9bf0 !important; // Twitter blue
|
|
border-color: transparent !important;
|
|
|
|
&:hover {
|
|
background-color: var(--next-color-hover) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|