2022-07-01 16:25:51 +08:00
|
|
|
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
|
2024-03-29 17:00:29 +08:00
|
|
|
|
2022-05-25 21:53:38 +08:00
|
|
|
:root {
|
2024-03-28 21:34:24 +08:00
|
|
|
/** Body */
|
|
|
|
|
--v3-body-text-color: var(--el-text-color-primary);
|
|
|
|
|
--v3-body-bg-color: var(--el-bg-color-page);
|
2022-05-25 21:53:38 +08:00
|
|
|
/** Header 区域 = NavigationBar 组件 + TagsView 组件 */
|
|
|
|
|
--v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-header-bg-color: var(--el-bg-color);
|
|
|
|
|
--v3-header-box-shadow: var(--el-box-shadow-lighter);
|
|
|
|
|
--v3-header-border-bottom: 1px solid var(--el-fill-color);
|
2022-05-25 21:53:38 +08:00
|
|
|
/** NavigationBar 组件 */
|
|
|
|
|
--v3-navigationbar-height: 50px;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-navigationbar-text-color: var(--el-text-color-regular);
|
2023-07-19 13:11:52 +08:00
|
|
|
/** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
|
2022-05-25 21:53:38 +08:00
|
|
|
--v3-sidebar-width: 220px;
|
2022-10-08 15:19:36 +08:00
|
|
|
--v3-sidebar-hide-width: 58px;
|
2024-03-29 21:14:11 +08:00
|
|
|
--v3-sidebar-border-right: 1px solid var(--el-fill-color);
|
2022-05-25 21:53:38 +08:00
|
|
|
--v3-sidebar-menu-item-height: 60px;
|
2022-10-24 16:11:17 +08:00
|
|
|
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
|
2022-09-30 16:58:37 +08:00
|
|
|
--v3-sidebar-menu-bg-color: #001428;
|
2023-07-07 12:21:28 +08:00
|
|
|
--v3-sidebar-menu-hover-bg-color: #409eff10;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-sidebar-menu-text-color: #cfd3dc;
|
2022-05-25 21:53:38 +08:00
|
|
|
--v3-sidebar-menu-active-text-color: #ffffff;
|
|
|
|
|
/** TagsView 组件 */
|
|
|
|
|
--v3-tagsview-height: 34px;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-tagsview-text-color: var(--el-text-color-regular);
|
2022-05-25 21:53:38 +08:00
|
|
|
--v3-tagsview-tag-active-text-color: #ffffff;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-tagsview-tag-bg-color: var(--el-bg-color);
|
2022-10-24 16:11:17 +08:00
|
|
|
--v3-tagsview-tag-active-bg-color: var(--el-color-primary);
|
2022-10-09 23:04:46 +08:00
|
|
|
--v3-tagsview-tag-border-radius: 2px;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-tagsview-tag-border-color: var(--el-border-color-lighter);
|
2022-10-24 16:11:17 +08:00
|
|
|
--v3-tagsview-tag-active-border-color: var(--el-color-primary);
|
2022-05-25 21:53:38 +08:00
|
|
|
--v3-tagsview-tag-icon-hover-bg-color: #00000030;
|
|
|
|
|
--v3-tagsview-tag-icon-hover-color: #ffffff;
|
2024-03-28 21:34:24 +08:00
|
|
|
--v3-tagsview-contextmenu-text-color: var(--el-text-color-regular);
|
|
|
|
|
--v3-tagsview-contextmenu-hover-text-color: var(--el-text-color-primary);
|
|
|
|
|
--v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
|
|
|
|
|
--v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
|
|
|
|
|
--v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
|
|
|
|
|
/** Hamburger 组件 */
|
|
|
|
|
--v3-hamburger-text-color: var(--el-text-color-primary);
|
2022-05-25 21:53:38 +08:00
|
|
|
/** RightPanel 组件 */
|
2022-09-30 16:58:37 +08:00
|
|
|
--v3-rightpanel-button-bg-color: #001428;
|
2022-05-25 21:53:38 +08:00
|
|
|
}
|
2023-06-29 12:43:01 +08:00
|
|
|
|
|
|
|
|
/** 内容区放大时，将不需要的组件隐藏 */
|
|
|
|
|
body.content-large {
|
|
|
|
|
/** Header 区域 = TagsView 组件 */
|
|
|
|
|
--v3-header-height: var(--v3-tagsview-height);
|
|
|
|
|
/** NavigationBar 组件 */
|
|
|
|
|
--v3-navigationbar-height: 0px;
|
|
|
|
|
/** Sidebar 组件 */
|
|
|
|
|
--v3-sidebar-width: 0px;
|
|
|
|
|
--v3-sidebar-hide-width: 0px;
|
|
|
|
|
}
|
2024-03-22 18:58:56 +08:00
|
|
|
|
|
|
|
|
/** 内容区全屏时，将不需要的组件隐藏 */
|
|
|
|
|
body.content-full {
|
|
|
|
|
/** Header 区域 */
|
|
|
|
|
--v3-header-height: 0px;
|
|
|
|
|
/** NavigationBar 组件 */
|
|
|
|
|
--v3-navigationbar-height: 0px;
|
|
|
|
|
/** Sidebar 组件 */
|
|
|
|
|
--v3-sidebar-width: 0px;
|
|
|
|
|
--v3-sidebar-hide-width: 0px;
|
|
|
|
|
/** TagsView 组件 */
|
|
|
|
|
--v3-tagsview-height: 0px;
|
|
|
|
|
}
|
