mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-21 03:19:19 +08:00
refactor: theme styles
This commit is contained in:
pany
parent
281a7bebbf
commit
28ad1e0a1d
@ -2,7 +2,7 @@
|
||||
@import "variables.css";
|
||||
// Transition
|
||||
@import "./transition.scss";
|
||||
// 注册主题
|
||||
// 注册多主题
|
||||
@import "./theme/register.scss";
|
||||
|
||||
// 业务页面几乎都应该在根元素上挂载 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 "../theme.scss";
|
||||
@import "./variables.scss";
|
||||
@import "../core/index.scss";
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
/** dark 主题下的变量 */
|
||||
|
||||
// 主题名称
|
||||
$theme-name: "dark";
|
||||
// 主题背景颜色
|
||||
@ -1,2 +1,2 @@
|
||||
// 注册的主题
|
||||
// 注册多主题
|
||||
@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