refactor: theme styles
This commit is contained in:
pany
parent
281a7bebbf
commit
28ad1e0a1d
@ -2,7 +2,7 @@
|
|||||||
@import "variables.css";
|
@import "variables.css";
|
||||||
// Transition
|
// Transition
|
||||||
@import "./transition.scss";
|
@import "./transition.scss";
|
||||||
// 注册主题
|
// 注册多主题
|
||||||
@import "./theme/register.scss";
|
@import "./theme/register.scss";
|
||||||
|
|
||||||
// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
|
// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
|
||||||
|
|||||||
20
src/styles/theme/core/element-plus.scss
Normal file
20
src/styles/theme/core/element-plus.scss
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
/** Element-Plus 相关 */
|
||||||
|
|
||||||
|
// 侧边栏的 item 的 popper
|
||||||
|
.el-popper {
|
||||||
|
border: none !important;
|
||||||
|
.el-menu {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
.el-menu-item {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
&.is-active,
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($theme-bg-color, 8%) !important;
|
||||||
|
color: $active-font-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-sub-menu__title {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/styles/theme/core/error-page.scss
Normal file
5
src/styles/theme/core/error-page.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/** Error-Page 页面相关 */
|
||||||
|
|
||||||
|
.error-page {
|
||||||
|
background-color: $theme-bg-color;
|
||||||
|
}
|
||||||
7
src/styles/theme/core/index.scss
Normal file
7
src/styles/theme/core/index.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.#{$theme-name} {
|
||||||
|
@import "./layout.scss";
|
||||||
|
@import "./login.scss";
|
||||||
|
@import "./error-page.scss";
|
||||||
|
@import "./element-plus.scss";
|
||||||
|
@import "./other.scss";
|
||||||
|
}
|
||||||
67
src/styles/theme/core/layout.scss
Normal file
67
src/styles/theme/core/layout.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
/** Layout 相关 */
|
||||||
|
|
||||||
|
.app-wrapper {
|
||||||
|
background-color: $theme-bg-color;
|
||||||
|
color: $font-color;
|
||||||
|
|
||||||
|
// 侧边栏
|
||||||
|
.sidebar-container {
|
||||||
|
.sidebar-logo-container {
|
||||||
|
background-color: lighten($theme-bg-color, 2%) !important;
|
||||||
|
}
|
||||||
|
.el-menu {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
.el-menu-item {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
&.is-active,
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($theme-bg-color, 8%) !important;
|
||||||
|
color: $active-font-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-sub-menu__title {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 顶部导航栏
|
||||||
|
.navigation-bar {
|
||||||
|
background-color: $theme-bg-color;
|
||||||
|
.right-menu {
|
||||||
|
.svg-icon {
|
||||||
|
color: $font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TagsView
|
||||||
|
.tags-view-container {
|
||||||
|
background-color: $theme-bg-color !important;
|
||||||
|
border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
|
||||||
|
.tags-view-item {
|
||||||
|
background-color: $theme-bg-color !important;
|
||||||
|
color: $font-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
&.active {
|
||||||
|
background-color: $active-theme-bg-color !important;
|
||||||
|
color: $active-font-color !important;
|
||||||
|
border-color: $border-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 右键菜单
|
||||||
|
.contextmenu {
|
||||||
|
background-color: lighten($theme-bg-color, 8%);
|
||||||
|
color: $font-color;
|
||||||
|
li:hover {
|
||||||
|
background-color: lighten($theme-bg-color, 16%);
|
||||||
|
color: $active-font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧设置面板
|
||||||
|
.handle-button {
|
||||||
|
background-color: lighten($theme-bg-color, 20%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/styles/theme/core/login.scss
Normal file
9
src/styles/theme/core/login.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/** Login 页面相关 */
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background-color: $theme-bg-color;
|
||||||
|
color: $font-color;
|
||||||
|
.login-card {
|
||||||
|
background-color: lighten($theme-bg-color, 4%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
src/styles/theme/core/other.scss
Normal file
8
src/styles/theme/core/other.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/** 这里可以写业务页面的黑暗样式 */
|
||||||
|
|
||||||
|
.app-main {
|
||||||
|
// 指令权限页面 @/views/permission/directive.vue
|
||||||
|
.permission-alert {
|
||||||
|
background-color: lighten($theme-bg-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,2 +1,2 @@
|
|||||||
@import "./setting.scss";
|
@import "./variables.scss";
|
||||||
@import "../theme.scss";
|
@import "../core/index.scss";
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
/** dark 主题下的变量 */
|
||||||
|
|
||||||
// 主题名称
|
// 主题名称
|
||||||
$theme-name: "dark";
|
$theme-name: "dark";
|
||||||
// 主题背景颜色
|
// 主题背景颜色
|
||||||
@ -1,2 +1,2 @@
|
|||||||
// 注册的主题
|
// 注册多主题
|
||||||
@import "@/styles/theme/dark/index.scss";
|
@import "@/styles/theme/dark/index.scss";
|
||||||
|
|||||||
@ -1,115 +0,0 @@
|
|||||||
.#{$theme-name} {
|
|
||||||
/** Layout */
|
|
||||||
|
|
||||||
.app-wrapper {
|
|
||||||
background-color: $theme-bg-color;
|
|
||||||
color: $font-color;
|
|
||||||
|
|
||||||
// 侧边栏
|
|
||||||
.sidebar-container {
|
|
||||||
.sidebar-logo-container {
|
|
||||||
background-color: lighten($theme-bg-color, 2%) !important;
|
|
||||||
}
|
|
||||||
.el-menu {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
.el-menu-item {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
&.is-active,
|
|
||||||
&:hover {
|
|
||||||
background-color: lighten($theme-bg-color, 8%) !important;
|
|
||||||
color: $active-font-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-sub-menu__title {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 顶部导航栏
|
|
||||||
.navigation-bar {
|
|
||||||
background-color: $theme-bg-color;
|
|
||||||
.right-menu {
|
|
||||||
.svg-icon {
|
|
||||||
color: $font-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TagsView
|
|
||||||
.tags-view-container {
|
|
||||||
background-color: $theme-bg-color !important;
|
|
||||||
border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
|
|
||||||
.tags-view-item {
|
|
||||||
background-color: $theme-bg-color !important;
|
|
||||||
color: $font-color !important;
|
|
||||||
border: 1px solid $border-color !important;
|
|
||||||
&.active {
|
|
||||||
background-color: $active-theme-bg-color !important;
|
|
||||||
color: $active-font-color !important;
|
|
||||||
border-color: $border-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 右键菜单
|
|
||||||
.contextmenu {
|
|
||||||
background-color: lighten($theme-bg-color, 8%);
|
|
||||||
color: $font-color;
|
|
||||||
li:hover {
|
|
||||||
background-color: lighten($theme-bg-color, 16%);
|
|
||||||
color: $active-font-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 右侧设置面板
|
|
||||||
.handle-button {
|
|
||||||
background-color: lighten($theme-bg-color, 20%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** AppMain 主要写 View 页面的黑暗样式 */
|
|
||||||
|
|
||||||
.app-main {
|
|
||||||
// 指令权限页面 /permission/directive
|
|
||||||
.permission-alert {
|
|
||||||
background-color: lighten($theme-bg-color, 8%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Login 页面 */
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
background-color: $theme-bg-color;
|
|
||||||
color: $font-color;
|
|
||||||
.login-card {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Error-Page 页面 */
|
|
||||||
|
|
||||||
.error-page {
|
|
||||||
background-color: $theme-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Element-Plus */
|
|
||||||
|
|
||||||
// 侧边栏的 item 的 popper
|
|
||||||
.el-popper {
|
|
||||||
border: none !important;
|
|
||||||
.el-menu {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
.el-menu-item {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
&.is-active,
|
|
||||||
&:hover {
|
|
||||||
background-color: lighten($theme-bg-color, 8%) !important;
|
|
||||||
color: $active-font-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-sub-menu__title {
|
|
||||||
background-color: lighten($theme-bg-color, 4%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user