2172 lines
76 KiB
CSS
2172 lines
76 KiB
CSS
@charset "UTF-8";
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-186056de]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-186056de] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-186056de] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout[data-v-186056de] {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.layout__overlay[data-v-186056de] {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
.layout .floating-settings-button[data-v-186056de] {
|
||
position: fixed;
|
||
top: 50%;
|
||
right: 0px;
|
||
z-index: 999;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-2dd794fa]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-2dd794fa] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-2dd794fa] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.logo[data-v-2dd794fa] {
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: var(--sidebar-logo-background);
|
||
}
|
||
.logo .title[data-v-2dd794fa] {
|
||
flex-shrink: 0;
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: var(--sidebar-logo-text-color);
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout-top .logo,
|
||
.layout-mix .logo {
|
||
background-color: transparent !important;
|
||
}
|
||
.layout-top .logo .title,
|
||
.layout-mix .logo .title {
|
||
color: var(--menu-text);
|
||
}
|
||
.openSidebar.layout-top .layout__header-left .logo, .openSidebar.layout-mix .layout__header-logo .logo {
|
||
width: 210px;
|
||
}
|
||
.hideSidebar.layout-top .layout__header-left .logo, .hideSidebar.layout-mix .layout__header-logo .logo {
|
||
width: 54px;
|
||
}
|
||
.hideSidebar .logo .title {
|
||
display: none;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-cc3b78cd]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-cc3b78cd] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-cc3b78cd] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.hamburger-wrapper[data-v-cc3b78cd] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 15px;
|
||
cursor: pointer;
|
||
}
|
||
.hamburger-wrapper .hamburger[data-v-cc3b78cd] {
|
||
vertical-align: middle;
|
||
transform: scaleX(-1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.hamburger-wrapper .hamburger--white[data-v-cc3b78cd] {
|
||
color: #fff;
|
||
}
|
||
.hamburger-wrapper .hamburger.is-active[data-v-cc3b78cd] {
|
||
transform: scaleX(1);
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-0cb4d0ec]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-0cb4d0ec] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-0cb4d0ec] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.el-breadcrumb__inner[data-v-0cb4d0ec],
|
||
.el-breadcrumb__inner a[data-v-0cb4d0ec] {
|
||
font-weight: 400 !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-6ec0f265]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-6ec0f265] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-6ec0f265] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
@media (width <= 767px) {
|
||
.v-lock-dialog[data-v-6ec0f265] {
|
||
max-width: calc(100vw - 16px);
|
||
}
|
||
}
|
||
.v-lock-dialog .lock-dialog-content[data-v-6ec0f265] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.v-lock-dialog .lock-dialog-avatar[data-v-6ec0f265] {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
}
|
||
.v-lock-dialog .lock-dialog-name[data-v-6ec0f265] {
|
||
margin: 10px 0;
|
||
font-size: 14px;
|
||
color: var(--top-header-text-color);
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-a6d00bd9]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-a6d00bd9] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-a6d00bd9] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.lockpage[data-v-a6d00bd9] {
|
||
position: fixed;
|
||
inset: 0;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: black;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.lockpage .unlock-container[data-v-a6d00bd9] {
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
left: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 4rem;
|
||
padding: 0.5rem 1rem;
|
||
padding-top: 1.25rem;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
border-radius: 12px;
|
||
transform: translateX(-50%);
|
||
}
|
||
@media (min-width: 640px) {
|
||
.lockpage .unlock-container[data-v-a6d00bd9] {
|
||
font-size: 0.875rem;
|
||
}
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.lockpage .unlock-container[data-v-a6d00bd9] {
|
||
font-size: 1.25rem;
|
||
}
|
||
}
|
||
.lockpage .time-container[data-v-a6d00bd9] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.lockpage .time-container .hour-container[data-v-a6d00bd9] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
margin-bottom: 2rem;
|
||
font-size: 220px;
|
||
font-weight: 700;
|
||
color: #bababa;
|
||
background-color: #141313;
|
||
border-radius: 16px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.lockpage .time-container .minute-container[data-v-a6d00bd9] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1rem;
|
||
margin-bottom: 2rem;
|
||
font-size: 220px;
|
||
font-weight: 700;
|
||
color: #bababa;
|
||
background-color: #141313;
|
||
border-radius: 16px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.lockpage .meridiem[data-v-a6d00bd9] {
|
||
position: absolute;
|
||
top: 1.25rem;
|
||
left: 1.25rem;
|
||
font-size: 1.25rem;
|
||
}
|
||
.lockpage .entry-wrapper[data-v-a6d00bd9] {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.lockpage .entry-content[data-v-a6d00bd9] {
|
||
width: 260px;
|
||
color: #bababa;
|
||
text-align: center;
|
||
}
|
||
.lockpage .avatar-container[data-v-a6d00bd9] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.lockpage .avatar[data-v-a6d00bd9] {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
}
|
||
.lockpage .username[data-v-a6d00bd9] {
|
||
margin: 0.625rem 0;
|
||
font-size: 0.875rem;
|
||
color: var(--logo-title-text-color);
|
||
}
|
||
.lockpage .password-input[data-v-a6d00bd9] {
|
||
margin-top: 1rem;
|
||
}
|
||
.lockpage .error-message[data-v-a6d00bd9] {
|
||
display: inline-block;
|
||
margin-top: 0.625rem;
|
||
font-size: 0.875rem;
|
||
color: #ed6f6f;
|
||
}
|
||
.lockpage .button-group[data-v-a6d00bd9] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 0.5rem;
|
||
}
|
||
.lockpage .button-group .back-button[data-v-a6d00bd9],
|
||
.lockpage .button-group .login-button[data-v-a6d00bd9],
|
||
.lockpage .button-group .entry-button[data-v-a6d00bd9] {
|
||
min-width: auto;
|
||
padding: 0;
|
||
}
|
||
.lockpage .button-group .login-button[data-v-a6d00bd9] {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
.lockpage .date-container[data-v-a6d00bd9] {
|
||
position: absolute;
|
||
bottom: 1.25rem;
|
||
width: 100%;
|
||
color: #d1d5db;
|
||
text-align: center;
|
||
}
|
||
@media (min-width: 1280px) {
|
||
.lockpage .date-container[data-v-a6d00bd9] {
|
||
font-size: 1.25rem;
|
||
}
|
||
}
|
||
@media (min-width: 1536px) {
|
||
.lockpage .date-container[data-v-a6d00bd9] {
|
||
font-size: 1.875rem;
|
||
}
|
||
}
|
||
.lockpage .time-display[data-v-a6d00bd9] {
|
||
margin-bottom: 1rem;
|
||
font-size: 3rem;
|
||
}
|
||
.lockpage .time-display .meridiem-display[data-v-a6d00bd9] {
|
||
font-size: 1.875rem;
|
||
}
|
||
.lockpage .full-date[data-v-a6d00bd9] {
|
||
font-size: 1.5rem;
|
||
}
|
||
/* 可根据需要添加自定义样式 */
|
||
.el-tour__content .el-tour-indicators[data-v-8efaa1c6] {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-c3106a3e]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-c3106a3e] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-c3106a3e] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.navbar-actions[data-v-c3106a3e] {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e] {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 44px; /* 增加最小点击区域到44px，符合人机交互标准 */
|
||
height: 100%;
|
||
min-height: 44px;
|
||
padding: 0 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e] > * {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e] .el-dropdown,
|
||
.navbar-actions__item[data-v-c3106a3e] .el-tooltip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e] [class^="i-svg:"] {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
color: var(--el-text-color-regular);
|
||
transition: color 0.3s;
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e]:hover {
|
||
background: rgba(0, 0, 0, 0.04);
|
||
}
|
||
.navbar-actions__item[data-v-c3106a3e]:hover [class^="i-svg:"] {
|
||
color: var(--el-color-primary);
|
||
}
|
||
.navbar-actions .user-profile[data-v-c3106a3e] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 8px;
|
||
}
|
||
.navbar-actions .user-profile__avatar[data-v-c3106a3e] {
|
||
border-radius: 50%;
|
||
}
|
||
.navbar-actions .user-profile__name[data-v-c3106a3e] {
|
||
margin-left: 8px;
|
||
color: var(--el-text-color-regular);
|
||
white-space: nowrap;
|
||
transition: color 0.3s;
|
||
}
|
||
.navbar-actions--white-text .navbar-actions__item[data-v-c3106a3e] [class^="i-svg:"] {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
.navbar-actions--white-text .navbar-actions__item[data-v-c3106a3e]:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
.navbar-actions--white-text .navbar-actions__item[data-v-c3106a3e]:hover [class^="i-svg:"] {
|
||
color: #fff;
|
||
}
|
||
.navbar-actions--white-text .user-profile__name[data-v-c3106a3e] {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
.navbar-actions--dark-text .navbar-actions__item[data-v-c3106a3e] [class^="i-svg:"] {
|
||
color: var(--el-text-color-regular) !important;
|
||
}
|
||
.navbar-actions--dark-text .navbar-actions__item[data-v-c3106a3e]:hover {
|
||
background: rgba(0, 0, 0, 0.04);
|
||
}
|
||
.navbar-actions--dark-text .navbar-actions__item[data-v-c3106a3e]:hover [class^="i-svg:"] {
|
||
color: var(--el-color-primary) !important;
|
||
}
|
||
.navbar-actions--dark-text .user-profile__name[data-v-c3106a3e] {
|
||
color: var(--el-text-color-regular) !important;
|
||
}
|
||
[data-v-c3106a3e] .el-dropdown-menu [class^="i-svg:"] {
|
||
color: var(--el-text-color-regular) !important;
|
||
}
|
||
[data-v-c3106a3e] .el-dropdown-menu [class^="i-svg:"]:hover {
|
||
color: var(--el-color-primary) !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-6a7570b2]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-6a7570b2] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-6a7570b2] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.navbar[data-v-6a7570b2] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 50px;
|
||
}
|
||
.navbar__actions[data-v-6a7570b2] {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-7ccd224d]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-7ccd224d] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-7ccd224d] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.tags-container[data-v-7ccd224d] {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 34px;
|
||
background-color: var(--el-bg-color);
|
||
border: 1px solid var(--el-border-color-light);
|
||
box-shadow: 0 1px 1px var(--el-box-shadow-light);
|
||
}
|
||
.tags-container .btn[data-v-7ccd224d] {
|
||
top: 1px;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
cursor: pointer;
|
||
border: 1px solid var(--el-border-color-light);
|
||
}
|
||
.tags-container .btn[data-v-7ccd224d]:hover {
|
||
color: var(--el-color-primary);
|
||
background-color: var(--el-fill-color-light);
|
||
}
|
||
.tags-container .btn:hover .el-icon[data-v-7ccd224d] {
|
||
transform: scale(1.1);
|
||
}
|
||
.tags-container .scroll-wrapper[data-v-7ccd224d] {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
.tags-container .scroll-container[data-v-7ccd224d] {
|
||
white-space: nowrap;
|
||
}
|
||
.tags-container .tags-item[data-v-7ccd224d] {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 26px;
|
||
padding: 0 8px;
|
||
margin-left: 5px;
|
||
font-size: 12px;
|
||
line-height: 26px;
|
||
color: var(--el-text-color-primary);
|
||
background: var(--el-bg-color);
|
||
border: 1px solid var(--el-border-color);
|
||
transition: all 0.2s ease;
|
||
}
|
||
.tags-container .tags-item[data-v-7ccd224d]:first-of-type {
|
||
margin-left: 5px;
|
||
}
|
||
.tags-container .tags-item[data-v-7ccd224d]:last-of-type {
|
||
margin-right: 5px;
|
||
}
|
||
.tags-container .tags-item[data-v-7ccd224d]:hover {
|
||
background-color: var(--el-fill-color);
|
||
}
|
||
.tags-container .tags-item .tag-text[data-v-7ccd224d] {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.tags-container .tags-item .tag-close-btn[data-v-7ccd224d] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 5px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: var(--el-text-color-secondary);
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.tags-container .tags-item .tag-close-btn[data-v-7ccd224d]:hover {
|
||
color: var(--el-color-white);
|
||
background-color: var(--el-text-color-placeholder);
|
||
}
|
||
.tags-container .tags-item.active[data-v-7ccd224d] {
|
||
color: var(--el-color-white);
|
||
background-color: var(--el-color-primary);
|
||
border-color: var(--el-color-primary);
|
||
}
|
||
.tags-container .tags-item.active[data-v-7ccd224d]::before {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-right: 2px;
|
||
content: "";
|
||
background: var(--el-color-white);
|
||
border-radius: 50%;
|
||
}
|
||
.tags-container .tags-item.active .tag-text[data-v-7ccd224d] {
|
||
color: var(--el-color-white);
|
||
}
|
||
.tags-container .tags-item.active .tag-close-btn[data-v-7ccd224d] {
|
||
color: var(--el-color-white);
|
||
}
|
||
.tags-container .tags-item.active .tag-close-btn[data-v-7ccd224d]:hover {
|
||
color: var(--el-color-white);
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html._sidebar-color-blue_1h0dk_16 {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html._dark_1h0dk_26 {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
|
||
/* stylelint-disable property-no-unknown */
|
||
|
||
/* stylelint-enable property-no-unknown */
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-c1f290f6]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-c1f290f6] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-c1f290f6] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.app-main[data-v-c1f290f6] {
|
||
position: relative;
|
||
overflow-y: auto;
|
||
background-color: var(--el-bg-color-page);
|
||
/* 布局切换动画优化 */
|
||
}
|
||
.app-main.animate__animated[data-v-c1f290f6] {
|
||
animation-duration: 0.4s;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
.app-main.animate__fadeOut[data-v-c1f290f6] {
|
||
animation-timing-function: ease-in;
|
||
}
|
||
.app-main.animate__fadeIn[data-v-c1f290f6] {
|
||
animation-timing-function: ease-out;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-d391d0fe]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-d391d0fe] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-d391d0fe] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.menu-icon[data-v-d391d0fe] {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
font-size: 18px;
|
||
color: currentcolor;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.hideSidebar .submenu-title-noDropdown {
|
||
position: relative;
|
||
}
|
||
.hideSidebar .submenu-title-noDropdown > span {
|
||
display: inline-block;
|
||
visibility: hidden;
|
||
width: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
.hideSidebar .el-sub-menu {
|
||
overflow: hidden;
|
||
}
|
||
.hideSidebar .el-sub-menu > .el-sub-menu__title .sub-el-icon {
|
||
margin-left: 19px;
|
||
}
|
||
.hideSidebar .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||
display: none;
|
||
}
|
||
.hideSidebar .el-menu--collapse {
|
||
width: 54px;
|
||
}
|
||
.hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title > span {
|
||
display: inline-block;
|
||
visibility: hidden;
|
||
width: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
html.dark .el-menu-item:hover {
|
||
background-color: var(--menu-hover);
|
||
}
|
||
html.sidebar-color-blue .el-menu-item:hover {
|
||
background-color: var(--menu-hover);
|
||
}
|
||
.el-sub-menu.has-active-child .el-sub-menu__title {
|
||
color: var(--el-color-primary) !important;
|
||
background-color: var(--el-color-primary-light-9) !important;
|
||
}
|
||
.el-sub-menu.has-active-child .el-sub-menu__title .menu-icon {
|
||
color: var(--el-color-primary) !important;
|
||
}
|
||
html.dark .el-sub-menu.has-active-child .el-sub-menu__title {
|
||
color: var(--el-color-primary-light-3) !important;
|
||
background-color: rgba(64, 128, 255, 0.15) !important;
|
||
}
|
||
html.dark .el-sub-menu.has-active-child .el-sub-menu__title .menu-icon {
|
||
color: var(--el-color-primary-light-3) !important;
|
||
}
|
||
html.sidebar-color-blue .el-sub-menu.has-active-child .el-sub-menu__title {
|
||
color: var(--el-color-primary-light-3) !important;
|
||
background-color: rgba(64, 128, 255, 0.2) !important;
|
||
}
|
||
html.sidebar-color-blue .el-sub-menu.has-active-child .el-sub-menu__title .menu-icon {
|
||
color: var(--el-color-primary-light-3) !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-d62c8d16]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-d62c8d16] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-d62c8d16] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout__sidebar[data-v-d62c8d16] {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 210px;
|
||
background-color: var(--menu-background);
|
||
transition: width 0.28s;
|
||
}
|
||
.layout__sidebar--collapsed[data-v-d62c8d16] {
|
||
width: 54px;
|
||
}
|
||
.layout__sidebar .layout-sidebar[data-v-d62c8d16] {
|
||
position: relative;
|
||
height: 100%;
|
||
background-color: var(--menu-background);
|
||
transition: width 0.28s;
|
||
}
|
||
.layout__sidebar .layout-sidebar.has-logo .el-scrollbar[data-v-d62c8d16] {
|
||
height: calc(100vh - 50px);
|
||
}
|
||
.layout__sidebar .layout-sidebar[data-v-d62c8d16] .el-menu {
|
||
border: none;
|
||
}
|
||
.layout__main[data-v-d62c8d16] {
|
||
position: relative;
|
||
height: 100%;
|
||
margin-left: 210px;
|
||
overflow-y: auto;
|
||
transition: margin-left 0.28s;
|
||
}
|
||
.layout__main--collapsed[data-v-d62c8d16] {
|
||
margin-left: 54px;
|
||
}
|
||
.layout__main .fixed-header[data-v-d62c8d16] {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 9;
|
||
transition: width 0.28s;
|
||
}
|
||
|
||
/* 移动端样式 */
|
||
.mobile .layout__sidebar[data-v-d62c8d16] {
|
||
width: 210px !important;
|
||
transition: transform 0.28s, width 0s;
|
||
}
|
||
.mobile.hideSidebar .layout__sidebar[data-v-d62c8d16] {
|
||
transform: translateX(-210px);
|
||
}
|
||
.mobile.openSidebar .layout__sidebar[data-v-d62c8d16] {
|
||
transform: translateX(0);
|
||
}
|
||
.mobile .layout__main[data-v-d62c8d16] {
|
||
margin-left: 0 !important;
|
||
}
|
||
.hasTagsView[data-v-d62c8d16] .app-main {
|
||
height: calc(100vh - 50px - 34px) !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-ad4d85f1]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-ad4d85f1] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-ad4d85f1] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout__header[data-v-ad4d85f1] {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: var(--menu-background);
|
||
}
|
||
.layout__header-left[data-v-ad4d85f1] {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
min-width: 0;
|
||
height: 100%;
|
||
}
|
||
.layout__header-left[data-v-ad4d85f1] .logo {
|
||
flex-shrink: 0;
|
||
height: 50px;
|
||
}
|
||
.layout__header-right[data-v-ad4d85f1] {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding-left: 12px;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 50px;
|
||
overflow: hidden;
|
||
line-height: 50px;
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal .el-menu-item {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal .el-sub-menu .el-sub-menu__title {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal .el-sub-menu.has-active-child .el-sub-menu__title {
|
||
color: var(--el-color-primary) !important;
|
||
border-bottom: 2px solid var(--el-color-primary) !important;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal .el-sub-menu.has-active-child .el-sub-menu__title .menu-icon {
|
||
color: var(--el-color-primary) !important;
|
||
}
|
||
.layout__header[data-v-ad4d85f1] .el-menu--horizontal .el-menu--popup {
|
||
min-width: 160px;
|
||
}
|
||
.layout__main[data-v-ad4d85f1] {
|
||
height: calc(100vh - 50px);
|
||
overflow-y: auto;
|
||
}
|
||
.hasTagsView[data-v-ad4d85f1] .app-main {
|
||
height: calc(100vh - 50px - 34px) !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-cf0d976a]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-cf0d976a] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-cf0d976a] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.el-menu[data-v-cf0d976a] {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.el-menu--horizontal[data-v-cf0d976a] {
|
||
height: 50px !important;
|
||
}
|
||
.el-menu--horizontal[data-v-cf0d976a] .el-menu-item {
|
||
height: 100%;
|
||
line-height: 50px;
|
||
}
|
||
.el-menu--horizontal[data-v-cf0d976a]:after {
|
||
display: none;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-7f187428]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-7f187428] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-7f187428] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout__header[data-v-7f187428] {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: var(--menu-background);
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
}
|
||
.layout__header-content[data-v-7f187428] {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 0;
|
||
}
|
||
.layout__header-logo[data-v-7f187428] {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
.layout__header-menu[data-v-7f187428] {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
min-width: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.layout__header-menu[data-v-7f187428] .el-menu {
|
||
height: 100%;
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
.layout__header-menu[data-v-7f187428] .el-menu--horizontal {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
.layout__header-menu[data-v-7f187428] .el-menu--horizontal .el-menu-item {
|
||
height: 100%;
|
||
line-height: 50px;
|
||
border-bottom: none;
|
||
}
|
||
.layout__header-menu[data-v-7f187428] .el-menu--horizontal .el-menu-item.is-active {
|
||
background-color: rgba(255, 255, 255, 0.12);
|
||
border-bottom: 2px solid var(--el-color-primary);
|
||
}
|
||
.layout__header-actions[data-v-7f187428] {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
.layout__container[data-v-7f187428] {
|
||
display: flex;
|
||
height: calc(100vh - 50px);
|
||
padding-top: 0;
|
||
}
|
||
.layout__container .layout__sidebar--left[data-v-7f187428] {
|
||
position: relative;
|
||
width: 210px;
|
||
height: 100%;
|
||
background-color: var(--menu-background);
|
||
transition: width 0.28s;
|
||
}
|
||
.layout__container .layout__sidebar--left.layout__sidebar--collapsed[data-v-7f187428] {
|
||
width: 54px !important;
|
||
}
|
||
.layout__container .layout__sidebar--left[data-v-7f187428] .el-scrollbar {
|
||
height: calc(100vh - 50px - 50px);
|
||
}
|
||
.layout__container .layout__sidebar--left[data-v-7f187428] .el-menu {
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
.layout__container .layout__sidebar--left .layout__sidebar-toggle[data-v-7f187428] {
|
||
position: absolute;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
background-color: var(--menu-background);
|
||
box-shadow: 0 0 6px -2px var(--el-color-primary);
|
||
}
|
||
.layout__container .layout__main[data-v-7f187428] {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 100%;
|
||
margin-left: 0;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 移动端样式 */
|
||
[data-v-7f187428] .mobile .layout__container .layout__sidebar--left {
|
||
position: fixed;
|
||
top: 50px;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
transition: transform 0.28s;
|
||
}
|
||
[data-v-7f187428] .mobile.hideSidebar .layout__sidebar--left {
|
||
width: 210px !important;
|
||
transform: translateX(-210px);
|
||
}
|
||
[data-v-7f187428] .hasTagsView .app-main {
|
||
height: calc(100vh - 50px - 34px) !important;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-2e322e92]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-2e322e92] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-2e322e92] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
|
||
/* 设置抽屉样式 */
|
||
.settings-drawer[data-v-2e322e92] .el-drawer__body {
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 设置内容区域 */
|
||
.settings-content[data-v-2e322e92] {
|
||
height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */
|
||
padding: 20px;
|
||
padding-bottom: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 底部操作区域样式 */
|
||
.action-footer[data-v-2e322e92] {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
padding: 0;
|
||
background: var(--el-bg-color);
|
||
border-top: 1px solid var(--el-border-color-light);
|
||
}
|
||
.action-footer .action-divider[data-v-2e322e92] {
|
||
display: none; /* 移除重复的分割线 */
|
||
}
|
||
.action-footer .action-card[data-v-2e322e92] {
|
||
padding: 16px 20px;
|
||
margin: 0;
|
||
background: var(--el-fill-color-extra-light);
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
.action-footer .action-card .action-buttons[data-v-2e322e92] {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.action-footer .action-card .action-buttons .action-btn[data-v-2e322e92] {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.action-footer .action-card .action-buttons .action-btn[data-v-2e322e92]:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 主题切换器优化 */
|
||
.theme-switch[data-v-2e322e92] {
|
||
transform: scale(1.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.theme-switch[data-v-2e322e92]:hover {
|
||
transform: scale(1.25);
|
||
}
|
||
.config-section[data-v-2e322e92] {
|
||
margin-bottom: 24px;
|
||
}
|
||
.config-section .config-item[data-v-2e322e92] {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--el-border-color-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.config-section .config-item[data-v-2e322e92]:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.config-section .config-item[data-v-2e322e92]:hover {
|
||
padding-right: 8px;
|
||
padding-left: 8px;
|
||
margin: 0 -8px;
|
||
background-color: var(--el-fill-color-light);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 布局选择器样式优化 */
|
||
.layout-select[data-v-2e322e92] {
|
||
padding: 16px 8px;
|
||
}
|
||
.layout-select .layout-grid[data-v-2e322e92] {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
justify-items: center;
|
||
}
|
||
.layout-item[data-v-2e322e92] {
|
||
position: relative;
|
||
width: 70px;
|
||
height: 80px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: var(--el-bg-color);
|
||
border: 2px solid var(--el-border-color-light);
|
||
border-radius: 12px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
transition: all 0.3s var(--el-transition-duration);
|
||
}
|
||
.layout-item[data-v-2e322e92]:hover {
|
||
background: var(--el-color-primary-light-9);
|
||
border-color: var(--el-color-primary-light-3);
|
||
transform: translateY(-4px) scale(1.05);
|
||
}
|
||
.layout-item[data-v-2e322e92]:active {
|
||
transform: translateY(-2px) scale(1.02);
|
||
}
|
||
.layout-item .layout-preview[data-v-2e322e92] {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 50px;
|
||
margin: 8px 0 4px 0;
|
||
}
|
||
.layout-item .layout-header[data-v-2e322e92] {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 4px;
|
||
left: 4px;
|
||
height: 8px;
|
||
background: var(--el-color-primary);
|
||
border-radius: 2px;
|
||
}
|
||
.layout-item .layout-sidebar[data-v-2e322e92] {
|
||
position: absolute;
|
||
left: 4px;
|
||
width: 12px;
|
||
background: var(--el-color-primary-light-3);
|
||
border-radius: 2px;
|
||
}
|
||
.layout-item .layout-main[data-v-2e322e92] {
|
||
position: absolute;
|
||
background: var(--el-fill-color-light);
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
border-radius: 2px;
|
||
}
|
||
.layout-item .layout-name[data-v-2e322e92] {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 6px;
|
||
left: 0;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: var(--el-text-color-regular);
|
||
text-align: center;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.layout-item .layout-check[data-v-2e322e92] {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
font-size: 10px;
|
||
color: var(--el-color-white);
|
||
background: var(--el-color-success);
|
||
border-radius: 50%;
|
||
}
|
||
.layout-item.left .layout-sidebar[data-v-2e322e92] {
|
||
top: 4px;
|
||
bottom: 4px;
|
||
}
|
||
.layout-item.left .layout-main[data-v-2e322e92] {
|
||
top: 4px;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
left: 20px;
|
||
}
|
||
.layout-item.top .layout-header[data-v-2e322e92] {
|
||
height: 12px;
|
||
}
|
||
.layout-item.top .layout-main[data-v-2e322e92] {
|
||
top: 16px;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
left: 4px;
|
||
}
|
||
.layout-item.mix .layout-header[data-v-2e322e92] {
|
||
height: 10px;
|
||
}
|
||
.layout-item.mix .layout-sidebar[data-v-2e322e92] {
|
||
top: 14px;
|
||
bottom: 4px;
|
||
}
|
||
.layout-item.mix .layout-main[data-v-2e322e92] {
|
||
top: 14px;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
left: 20px;
|
||
}
|
||
.layout-item.is-active[data-v-2e322e92] {
|
||
background: var(--el-color-primary-light-9);
|
||
border-color: var(--el-color-primary);
|
||
transform: translateY(-2px) scale(1.08);
|
||
}
|
||
.layout-item.is-active .layout-name[data-v-2e322e92] {
|
||
font-weight: 600;
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
/* 主题颜色选择器样式 */
|
||
.theme-color-selector[data-v-2e322e92] {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
.theme-color-selector .color-label[data-v-2e322e92] {
|
||
flex-shrink: 0;
|
||
min-width: 60px;
|
||
}
|
||
.theme-color-selector .color-options[data-v-2e322e92] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
.theme-color-selector .color-option[data-v-2e322e92] {
|
||
position: relative;
|
||
width: 22px;
|
||
height: 22px;
|
||
cursor: pointer;
|
||
border: 2px solid var(--el-border-color-light);
|
||
border-radius: 6px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
transition: all 0.3s var(--el-transition-duration);
|
||
}
|
||
.theme-color-selector .color-option[data-v-2e322e92]:hover {
|
||
border-color: var(--el-color-primary-light-3);
|
||
box-shadow: var(--el-box-shadow);
|
||
transform: translateY(-2px) scale(1.05);
|
||
}
|
||
.theme-color-selector .color-option.is-active[data-v-2e322e92] {
|
||
border-color: var(--el-color-primary);
|
||
box-shadow: var(--el-box-shadow-dark);
|
||
transform: translateY(-1px) scale(1.08);
|
||
}
|
||
.theme-color-selector .color-option .color-check[data-v-2e322e92] {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
font-size: 10px;
|
||
color: var(--el-color-white);
|
||
background: var(--el-overlay-color-lighter);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__trigger {
|
||
width: 22px;
|
||
height: 22px;
|
||
border: 2px solid var(--el-border-color-light);
|
||
border-radius: 6px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
transition: all 0.3s var(--el-transition-duration);
|
||
}
|
||
.theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__trigger:hover {
|
||
border-color: var(--el-color-primary-light-3);
|
||
box-shadow: var(--el-box-shadow);
|
||
transform: translateY(-2px) scale(1.05);
|
||
}
|
||
.theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__color {
|
||
border: none;
|
||
border-radius: 3px;
|
||
}
|
||
.theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__color-inner {
|
||
border-radius: 3px;
|
||
}
|
||
.theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__icon {
|
||
font-size: 10px;
|
||
}
|
||
.theme-color-selector[data-v-2e322e92] {
|
||
/* 深色模式适配 */
|
||
}
|
||
.dark .theme-color-selector .color-option[data-v-2e322e92] {
|
||
border-color: var(--el-border-color);
|
||
box-shadow: var(--el-box-shadow-light);
|
||
}
|
||
.dark .theme-color-selector .color-option[data-v-2e322e92]:hover {
|
||
border-color: var(--el-color-primary-light-3);
|
||
box-shadow: var(--el-box-shadow);
|
||
}
|
||
.dark .theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__trigger {
|
||
border-color: var(--el-border-color);
|
||
box-shadow: var(--el-box-shadow-light);
|
||
}
|
||
.dark .theme-color-selector .color-picker-wrapper .custom-color-picker[data-v-2e322e92] .el-color-picker__trigger:hover {
|
||
border-color: var(--el-color-primary-light-3);
|
||
box-shadow: var(--el-box-shadow);
|
||
}
|
||
|
||
/* 深色模式适配 */
|
||
.dark .action-footer[data-v-2e322e92] {
|
||
background: var(--el-bg-color);
|
||
border-top-color: var(--el-border-color);
|
||
}
|
||
.dark .action-card[data-v-2e322e92] {
|
||
background: var(--el-fill-color-extra-light);
|
||
}
|
||
.dark .layout-item[data-v-2e322e92] {
|
||
background: var(--el-bg-color);
|
||
border-color: var(--el-border-color);
|
||
}
|
||
.dark .layout-item[data-v-2e322e92]:hover {
|
||
background: var(--el-color-primary-light-9);
|
||
}
|
||
.dark .layout-item.is-active[data-v-2e322e92] {
|
||
background: var(--el-color-primary-light-9);
|
||
}
|
||
.dark .layout-item .layout-main[data-v-2e322e92] {
|
||
background: var(--el-fill-color);
|
||
}
|
||
|
||
/* 复制配置对话框样式 */
|
||
[data-v-2e322e92] .copy-config-dialog .el-message-box__content {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
/* Element Chalk Variables */
|
||
/** 全局SCSS变量 */
|
||
[data-v-9cb39833]:root {
|
||
--menu-background: #fff;
|
||
--menu-text: #212121;
|
||
--menu-active-text: var(
|
||
--el-menu-active-color
|
||
);
|
||
--menu-hover: #e6f4ff;
|
||
--sidebar-logo-background: #f5f5f5;
|
||
--sidebar-logo-text-color: #333;
|
||
}
|
||
|
||
/** 浅色主题-深蓝色侧边栏配色 */
|
||
html.sidebar-color-blue[data-v-9cb39833] {
|
||
--menu-background: #304156;
|
||
--menu-text: #bfcbd9;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: #263445;
|
||
--sidebar-logo-background: #2d3748;
|
||
--sidebar-logo-text-color: #fff;
|
||
}
|
||
|
||
/** 暗黑主题 */
|
||
html.dark[data-v-9cb39833] {
|
||
--menu-background: var(--el-bg-color-overlay);
|
||
--menu-text: #fff;
|
||
--menu-active-text: var(--el-menu-active-color);
|
||
--menu-hover: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-background: rgb(0 0 0 / 20%);
|
||
--sidebar-logo-text-color: #fff;
|
||
/** WangEditor Dark */
|
||
/* Textarea - css vars */
|
||
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
|
||
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
|
||
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
|
||
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
|
||
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
|
||
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
|
||
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
|
||
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
|
||
/* Toolbar - css vars */
|
||
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
|
||
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
|
||
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
|
||
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
|
||
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
|
||
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
|
||
/* Modal - css vars */
|
||
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
|
||
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
|
||
}
|
||
.layout-wrapper[data-v-9cb39833] {
|
||
width: 100%;
|
||
height: 100%;
|
||
} |