blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

增加白色主题

Browse Source
This commit is contained in:
Anyon 2022-01-19 16:23:47 +08:00
parent 121ee038e9
commit 5f97275dfd
6 changed files with 110 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/admin/view/index/layout.html
View File

@ -22,7 +22,7 @@
<body class="layui-layout-body"> <body class="layui-layout-body">
{block name='body'} {block name='body'}
<div class="layui-layout layui-layout-admin layui-layout-theme layui-layout-left-hide"> <div class="layui-layout layui-layout-admin layui-layout-left-hide layui-layout-theme-white">
<!-- 顶部菜单 开始 --> <!-- 顶部菜单 开始 -->
{include file='index/layout-top'} {include file='index/layout-top'}

10
public/static/theme/css/_config.less
View File

@ -67,7 +67,7 @@
@LayoutDefaLeftSzie: 200px; @LayoutDefaLeftSzie: 200px;
// 最小滚动条样式 // 最小滚动条样式
#MinScrollbar() { #defaScrollbar() {
height: 100%; height: 100%;
display: block; display: block;
overflow: auto; overflow: auto;
@ -83,4 +83,12 @@
background-color: #999 !important background-color: #999 !important
} }
} }
}
// 通用延时动态
#defaTransition() {
transition: all .2s linear;
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
} }

5
public/static/theme/css/_custom.less
View File

@ -99,10 +99,7 @@
} }
.transition { .transition {
transition: all .2s linear; #defaTransition();
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
} }
.overhide { .overhide {

121
public/static/theme/css/_layout.less
View File

@ -30,6 +30,10 @@
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
.layui-logo {
display: block;
}
.layui-logo-hide { .layui-logo-hide {
width: 50px !important; width: 50px !important;
padding: 0 !important; padding: 0 !important;
@ -194,7 +198,7 @@
content: ''; content: '';
} }
#MinScrollbar(); #defaScrollbar();
.layui-nav-item { .layui-nav-item {
> a { > a {
@ -315,90 +319,32 @@
} }
} }
.layui-layout-theme { .layui-layout-theme-white {
&.layui-layout-left-hide,
&.layui-layout-left-mini { &.layui-layout-left-mini {
> .layui-side { > .layui-side .layui-side-target:before {
width: 60px !important; transform: rotate(0deg);
display: block !important;
background-color: unset !important;
z-index: 77;
> .layui-logo {
display: none !important;
&-mini {
width: 60px;
display: inline-block;
}
}
.layui-side-scroll {
.layui-side-icon {
display: inline-block;
}
.layui-side-tree {
display: block;
}
}
} }
> .layui-body {
z-index: 88;
left: 60px !important;
> .think-page-body > .layui-card > .layui-card-header {
left: 60px !important;
}
}
}
> .layui-side {
width: 260px;
} }
> .layui-header { > .layui-header {
left: 260px; background: none !important;
background: #925cc3 !important;
display: none !important;
.layui-nav-item > a { .layui-nav-item > a {
color: #fff !important; color: #666 !important;
&:hover { &:hover {
color: #fff !important; color: #333 !important;
}
}
.layui-layout-left {
.layui-nav-item {
display: none;
}
.layui-nav-item:first-child {
display: inline-block;
}
.layui-nav-item:last-child {
display: inline-block;
} }
} }
} }
> .layui-body { > .layui-body {
top: 0;
left: 260px;
> .think-page-body > .layui-card > .layui-card-header { > .think-page-body > .layui-card > .layui-card-header {
top: 0;
left: 260px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
box-sizing: border-box;
+ .layui-card-body { box-shadow: none !important;
top: 50px; border-bottom: @TopHeaderBottomLine;
}
} }
} }
@ -407,13 +353,19 @@
.layui-side-target { .layui-side-target {
&:before { &:before {
content: '≪'; content: "\e65b";
color: #FFF; color: #FFF;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
font-family: layui-icon !important;
font-size: 10px;
font-style: normal;
transform: rotate(180deg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
top: 50%; top: 50%;
@ -426,27 +378,31 @@
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
border-top-left-radius: 80%; border-top-left-radius: 100%;
border-bottom-left-radius: 80%; border-bottom-left-radius: 100%;
} }
.layui-logo, .layui-logo-mini { .layui-logo,
background: #925cc3 !important; .layui-logo-mini {
border-bottom: none !important; color: #333;
box-shadow: none;
font-weight: bold;
.headimg { .headimg {
margin: 0 margin: 0 !important;
} }
} }
.layui-side-scroll { .layui-side-scroll {
top: 50px;
display: flex !important; display: flex !important;
box-sizing: border-box;
border-right: @TopHeaderBottomLine;
.layui-side-icon { .layui-side-icon {
width: 60px; width: 60px;
background: #563d7c; display: none;
#MinScrollbar(); background: #fff;
#defaScrollbar();
a { a {
height: 60px; height: 60px;
@ -456,21 +412,20 @@
} }
.layui-icon { .layui-icon {
color: #fff; color: #999;
} }
> .layui-this { > .layui-this {
background: #fff; background: #fff;
.layui-icon { .layui-icon {
color: #333; color: #098 !important;
} }
} }
} }
.layui-side-tree { .layui-side-tree {
flex: 1; flex: 1;
#MinScrollbar();
.layui-nav-item { .layui-nav-item {
background: none !important; background: none !important;
@ -562,7 +517,9 @@
} }
} }
&, .layui-nav-tree, .layui-side-scroll, .layui-side-scroll .layui-nav-tree { &, .layui-nav-tree,
.layui-side-scroll,
.layui-side-scroll .layui-nav-tree {
width: @LayoutMiniLeftSize; width: @LayoutMiniLeftSize;
text-align: center; text-align: center;
} }

169
public/static/theme/css/console.css
View File

@ -1426,6 +1426,9 @@ label.think-checkbox {
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
} }
.layui-layout > .layui-header > ul.layui-nav .layui-logo {
display: block;
}
.layui-layout > .layui-header > ul.layui-nav .layui-logo-hide { .layui-layout > .layui-header > ul.layui-nav .layui-logo-hide {
width: 50px !important; width: 50px !important;
padding: 0 !important; padding: 0 !important;
@ -1665,79 +1668,29 @@ label.think-checkbox {
.layui-layout > .layui-body > .think-page-body > .layui-card > .layui-card-header + .layui-card-body { .layui-layout > .layui-body > .think-page-body > .layui-card > .layui-card-header + .layui-card-body {
top: 45px; top: 45px;
} }
.layui-layout-theme.layui-layout-left-hide > .layui-side, .layui-layout-theme-white.layui-layout-left-mini > .layui-side .layui-side-target:before {
.layui-layout-theme.layui-layout-left-mini > .layui-side { transform: rotate(0deg);
width: 60px !important;
display: block !important;
background-color: unset !important;
z-index: 77;
} }
.layui-layout-theme.layui-layout-left-hide > .layui-side > .layui-logo, .layui-layout-theme-white > .layui-header {
.layui-layout-theme.layui-layout-left-mini > .layui-side > .layui-logo { background: none !important;
display: none !important;
} }
.layui-layout-theme.layui-layout-left-hide > .layui-side > .layui-logo-mini, .layui-layout-theme-white > .layui-header .layui-nav-item > a {
.layui-layout-theme.layui-layout-left-mini > .layui-side > .layui-logo-mini { color: #666 !important;
width: 60px;
display: inline-block;
} }
.layui-layout-theme.layui-layout-left-hide > .layui-side .layui-side-scroll .layui-side-icon, .layui-layout-theme-white > .layui-header .layui-nav-item > a:hover {
.layui-layout-theme.layui-layout-left-mini > .layui-side .layui-side-scroll .layui-side-icon { color: #333 !important;
display: inline-block;
} }
.layui-layout-theme.layui-layout-left-hide > .layui-side .layui-side-scroll .layui-side-tree, .layui-layout-theme-white > .layui-body > .think-page-body > .layui-card > .layui-card-header {
.layui-layout-theme.layui-layout-left-mini > .layui-side .layui-side-scroll .layui-side-tree {
display: block;
}
.layui-layout-theme.layui-layout-left-hide > .layui-body,
.layui-layout-theme.layui-layout-left-mini > .layui-body {
z-index: 88;
left: 60px !important;
}
.layui-layout-theme.layui-layout-left-hide > .layui-body > .think-page-body > .layui-card > .layui-card-header,
.layui-layout-theme.layui-layout-left-mini > .layui-body > .think-page-body > .layui-card > .layui-card-header {
left: 60px !important;
}
.layui-layout-theme > .layui-side {
width: 260px;
}
.layui-layout-theme > .layui-header {
left: 260px;
background: #925cc3 !important;
display: none !important;
}
.layui-layout-theme > .layui-header .layui-nav-item > a {
color: #fff !important;
}
.layui-layout-theme > .layui-header .layui-nav-item > a:hover {
color: #fff !important;
}
.layui-layout-theme > .layui-header .layui-layout-left .layui-nav-item {
display: none;
}
.layui-layout-theme > .layui-header .layui-layout-left .layui-nav-item:first-child {
display: inline-block;
}
.layui-layout-theme > .layui-header .layui-layout-left .layui-nav-item:last-child {
display: inline-block;
}
.layui-layout-theme > .layui-body {
top: 0;
left: 260px;
}
.layui-layout-theme > .layui-body > .think-page-body > .layui-card > .layui-card-header {
top: 0;
left: 260px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
box-sizing: border-box;
box-shadow: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
} }
.layui-layout-theme > .layui-body > .think-page-body > .layui-card > .layui-card-header + .layui-card-body { .layui-layout-theme-white .layui-side {
top: 50px;
}
.layui-layout-theme .layui-side {
background-color: #fff !important; background-color: #fff !important;
} }
.layui-layout-theme .layui-side .layui-side-target { .layui-layout-theme-white .layui-side .layui-side-target {
top: 50%; top: 50%;
right: 0; right: 0;
color: #fff; color: #fff;
@ -1748,101 +1701,97 @@ label.think-checkbox {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
border-top-left-radius: 80%; border-top-left-radius: 100%;
border-bottom-left-radius: 80%; border-bottom-left-radius: 100%;
} }
.layui-layout-theme .layui-side .layui-side-target:before { .layui-layout-theme-white .layui-side .layui-side-target:before {
content: '≪'; content: "\e65b";
color: #FFF; color: #FFF;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
font-family: layui-icon !important;
font-size: 10px;
font-style: normal;
transform: rotate(180deg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.layui-layout-theme .layui-side .layui-logo, .layui-layout-theme-white .layui-side .layui-logo,
.layui-layout-theme .layui-side .layui-logo-mini { .layui-layout-theme-white .layui-side .layui-logo-mini {
background: #925cc3 !important; color: #333;
border-bottom: none !important; box-shadow: none;
font-weight: bold;
} }
.layui-layout-theme .layui-side .layui-logo .headimg, .layui-layout-theme-white .layui-side .layui-logo .headimg,
.layui-layout-theme .layui-side .layui-logo-mini .headimg { .layui-layout-theme-white .layui-side .layui-logo-mini .headimg {
margin: 0; margin: 0 !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll { .layui-layout-theme-white .layui-side .layui-side-scroll {
top: 50px;
display: flex !important; display: flex !important;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.16);
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon {
width: 60px; width: 60px;
background: #563d7c; display: none;
background: #fff;
height: 100%; height: 100%;
display: block; display: block;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar {
width: 3px !important; width: 3px !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar-track { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar-track {
background: #666 !important; background: #666 !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar-thumb { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon::-webkit-scrollbar-thumb {
background-color: #999 !important; background-color: #999 !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon a { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon a {
height: 60px; height: 60px;
display: block; display: block;
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon .layui-icon { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon .layui-icon {
color: #fff; color: #999;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon > .layui-this { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon > .layui-this {
background: #fff; background: #fff;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-icon > .layui-this .layui-icon { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-icon > .layui-this .layui-icon {
color: #333; color: #098 !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree {
flex: 1; flex: 1;
height: 100%;
display: block;
overflow: auto;
overflow-x: hidden;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree::-webkit-scrollbar { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item {
width: 3px !important;
}
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree::-webkit-scrollbar-track {
background: #666 !important;
}
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree::-webkit-scrollbar-thumb {
background-color: #999 !important;
}
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item {
background: none !important; background: none !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a {
color: #333 !important; color: #333 !important;
background: none !important; background: none !important;
border-bottom: none !important; border-bottom: none !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a:hover { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item a:hover {
color: #098 !important; color: #098 !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item .layui-this > a, .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item .layui-this > a,
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item.layui-this > a { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item.layui-this > a {
color: #098 !important; color: #098 !important;
background: none !important; background: none !important;
font-weight: bold !important; font-weight: bold !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item .layui-this > a:hover, .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item .layui-this > a:hover,
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item.layui-this > a:hover { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-item.layui-this > a:hover {
background: none !important; background: none !important;
} }
.layui-layout-theme .layui-side .layui-side-scroll .layui-side-tree .layui-nav-itemed > a { .layui-layout-theme-white .layui-side .layui-side-scroll .layui-side-tree .layui-nav-itemed > a {
color: #999 !important; color: #999 !important;
} }
.layui-layout-left-mini .layui-header { .layui-layout-left-mini .layui-header {

2
public/static/theme/css/console.css.map
View File

File diff suppressed because one or more lines are too long