feat(theme): 支持日夜模式切换 add dark mode support and enhance theme switching functionality
- Add dark mode support to the admin panel - Implement smooth theme switching animation - Update theme settings to use local storage - Refactor theme initialization and rendering logic-Improve styling for dark mode
This commit is contained in:
wolfcode
@@ -26,15 +26,6 @@
|
||||
</ul>
|
||||
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<!-- <li class="layui-nav-item" lay-unselect>-->
|
||||
<!-- <div class="layui-form ws-header-theme" lay-filter="header-theme">-->
|
||||
<!-- <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">-->
|
||||
<!-- <div lay-checkbox>-->
|
||||
<!-- <i class="layui-icon layui-icon-moon"></i> |-->
|
||||
<!-- <i class="layui-icon layui-icon-light"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </li>-->
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="http://easyadmin8.top" target="_blank"><i class="fa fa-home"></i></a>
|
||||
</li>
|
||||
@@ -47,6 +38,15 @@
|
||||
<li class="layui-nav-item mobile layui-hide-xs" lay-unselect>
|
||||
<a href="javascript:;" data-check-screen="full"><i class="fa fa-arrows-alt"></i></a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<div class="layui-form ws-header-theme" lay-filter="header-theme">
|
||||
<input type="checkbox" name="theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
|
||||
<div lay-checkbox>
|
||||
<i class="layui-icon layui-icon-moon"></i> |
|
||||
<i class="layui-icon layui-icon-light"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-nav-item layuimini-setting">
|
||||
<a href="javascript:;">
|
||||
<img src="{:session('admin.head_img')}" class="layui-nav-img" width="50" height="50">
|
||||
|
||||
@@ -180,7 +180,7 @@
|
||||
<td>Github</td>
|
||||
<td>
|
||||
<a href="https://github.com/wolf-leo/easyAdmin8" target="_blank">
|
||||
<i class="layui-icon layui-icon-github layui-font-20 layui-font-cyan layui-text"></i>
|
||||
<i class="layui-icon layui-icon-github layui-font-20 layui-font-gray layui-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -192,7 +192,7 @@
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
|
||||
<div class="layui-card-body layui-text">
|
||||
<p class="layui-font-cyan">
|
||||
<p>
|
||||
本模板基于layui2.9.x以及font-awesome-4.7.0进行实现。
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" style="vertical-align: baseline;" target="_blank" href="http://layui.dev/docs">layui文档</a>
|
||||
</p>
|
||||
|
||||
59
public/static/admin/css/color.css
Normal file
59
public/static/admin/css/color.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.green {
|
||||
color: #11c26d !important;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #ff4c52 !important;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
color: #0bb2d4 !important;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #9463f7 !important;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #3e8ef7 !important;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #eb6709 !important;
|
||||
}
|
||||
|
||||
.indigo {
|
||||
color: #6610f2 !important;
|
||||
}
|
||||
|
||||
.pink {
|
||||
color: #e83e8c !important;
|
||||
}
|
||||
|
||||
.teal {
|
||||
color: #20c997 !important;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.gray-dark {
|
||||
color: #343a40 !important;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: rgb(255, 214, 102) !important;
|
||||
}
|
||||
|
||||
.magenta {
|
||||
color: #eb2f96 !important;
|
||||
}
|
||||
@@ -1,21 +1,23 @@
|
||||
@import url("../../plugs/layui-v2.x/css/layui.css");
|
||||
@import url("../../plugs/font-awesome-4.7.0/css/font-awesome.min.css");
|
||||
@import url("../css/color.css");
|
||||
@import url("../css/themes/index.css");
|
||||
@import url("../css/iconfont.css");
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
html.dark, body {
|
||||
height: 100%;
|
||||
background: var(--lay-color-bg-1);
|
||||
}
|
||||
|
||||
.ws-header-theme .layui-form-switch {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.ws-header-theme .layui-form-onswitch {
|
||||
background: #333333;
|
||||
border: 1px solid rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.layuimini-container {
|
||||
min-height: 250px;
|
||||
padding: 15px;
|
||||
@@ -58,10 +60,8 @@ html.dark, body {
|
||||
}
|
||||
|
||||
.hr-line {
|
||||
color: #fff;
|
||||
height: 1px;
|
||||
margin: 30px 0;
|
||||
background-color: #fff;
|
||||
border-top: 1px dashed #e7eaec;
|
||||
}
|
||||
|
||||
@@ -84,7 +84,6 @@ html.dark, body {
|
||||
margin: 0;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 10px 20px 5px 20px;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
/**数据表格-搜索表单样式*/
|
||||
@@ -265,7 +264,6 @@ table样式
|
||||
|
||||
.layuimini-container .layui-table-box .layui-table-header th {
|
||||
font-weight: bold !important;
|
||||
color: #565656 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -340,7 +338,7 @@ table样式
|
||||
弹出层样式
|
||||
*/
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background: #2c3e50 !important;
|
||||
background: var(--lay-color-bg-5);
|
||||
color: #fff !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -363,7 +361,6 @@ table样式
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
text-align: center !important;
|
||||
padding: 10px !important;
|
||||
background: #ecf0f1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
802
public/static/admin/css/themes/_dark.scss
Normal file
802
public/static/admin/css/themes/_dark.scss
Normal file
@@ -0,0 +1,802 @@
|
||||
// 通常用于背景色
|
||||
$black-color :rgb(2, 17, 20);
|
||||
// 通常用于字体颜色
|
||||
$main-color :rgb(126, 252, 246);
|
||||
// 通常用于边框
|
||||
$less-main-color:rgb(6, 216, 215);
|
||||
|
||||
$plus-main-color:rgb(0, 125, 124);
|
||||
|
||||
// 通常用于激活状态,通常跟背景色搭配
|
||||
$cover-color :rgba(62, 251, 251, 0.05);
|
||||
// 更强的激活状态,适合做选项操作时使用
|
||||
$active-color :rgba(62, 251, 251, 0.5);
|
||||
|
||||
|
||||
$red-color :rgb(255, 0, 0);
|
||||
$yellow-color:rgb(255, 255, 153);
|
||||
$green-color :rgb(0, 255, 0);
|
||||
|
||||
& {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-tool {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
|
||||
|
||||
.layui-btn {
|
||||
|
||||
&.layui-btn-lg {
|
||||
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
clip-path : $box-shape;
|
||||
padding-right : 10px;
|
||||
position : relative;
|
||||
background-color: transparent;
|
||||
border : 1px solid;
|
||||
color : rgb(126, 252, 246);
|
||||
text-shadow : rgb(126, 252, 246) 0px 0px 1px;
|
||||
background-color: rgb(126, 252, 246);
|
||||
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
clip-path: $box-shape;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -0.5px;
|
||||
top: -0.5px;
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
clip-path: $box-shape;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -0.5px;
|
||||
top: -0.5px;
|
||||
background-color: rgba(126, 252, 246, 0.2);
|
||||
}
|
||||
|
||||
&.layui-btn-disabled {
|
||||
&::after {
|
||||
// todo:实现按钮禁用样式
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-success {
|
||||
text-shadow: rgb(0, 255, 0) 0px 0px 1px;
|
||||
color: rgb(0, 255, 0);
|
||||
background-color: rgba(0, 255, 0);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-danger {
|
||||
text-shadow: rgb(255, 0, 0) 0px 0px 1px;
|
||||
color: rgb(255, 0, 0);
|
||||
background-color: rgb(255, 0, 0);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.layuimini-btn-primary {
|
||||
text-shadow: rgb(255, 255, 153) 0px 0px 1px;
|
||||
color: rgb(255, 255, 153);
|
||||
background-color: rgb(255, 255, 153);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(255, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.layui-btn-primary {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
&.layui-btn-normal {
|
||||
color: $black-color;
|
||||
background-color: $main-color;
|
||||
border: unset;
|
||||
|
||||
&::before {
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
background: $black-color;
|
||||
color: $main-color;
|
||||
|
||||
|
||||
tr {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-table-header {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box .layui-table-header th {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event] {
|
||||
color: $main-color;
|
||||
border: none;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-color: $main-color;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
clip-path: $box-shape;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover {
|
||||
background-color: rgba(126, 252, 246, 0.1);
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-table-header {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.color-content>ul>li>a>div>span:nth-child(2) {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li {
|
||||
clip-path: $box-shape;
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li.layui-this {
|
||||
background-color: $main-color;
|
||||
color: $black-color !important;
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item {
|
||||
color: $main-color;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(62, 251, 251, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: $cover-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title {
|
||||
background-color: $cover-color !important;
|
||||
border-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title span {
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
|
||||
.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
|
||||
background-color: $active-color;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
|
||||
.layuimini-tool i:hover {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
background-color: $black-color;
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title li {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-flow-more a *,
|
||||
.layui-laypage input,
|
||||
.layui-table-view select[lay-ignore] {
|
||||
border-color: $less-main-color;
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-laypage button,
|
||||
.layui-laypage input {
|
||||
border-color: $less-main-color;
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch {
|
||||
border-color: $less-main-color !important;
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-onswitch {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch.layui-form-onswitch i {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr em {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
background-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color: $main-color;
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-table-init {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.box-border-line {
|
||||
position: relative;
|
||||
border: 1px solid $less-main-color;
|
||||
border-width: 1px;
|
||||
$border-offset: 3px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid $less-main-color;
|
||||
top: -$border-offset;
|
||||
left: -$border-offset;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid $less-main-color;
|
||||
bottom: -$border-offset;
|
||||
right: -$border-offset;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
width: calc(100% + $border-offset);
|
||||
height: calc(100% + $border-offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-fieldset {
|
||||
.layui-input-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-form-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
@extend .box-border-line;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-form-pane .layui-form-label {
|
||||
background-color: $cover-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layuimini-container .table-search-fieldset {
|
||||
color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layui-form-select,
|
||||
.layui-form-autocomplete {
|
||||
dl {
|
||||
|
||||
color: $main-color;
|
||||
background-color: $black-color;
|
||||
border-color: $less-main-color;
|
||||
|
||||
dd {
|
||||
&.layui-this {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $less-main-color !important;
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-iconpicker-item,
|
||||
.layui-iconpicker-item:hover {
|
||||
border-color: $less-main-color !important;
|
||||
color: $black-color;
|
||||
|
||||
.layui-iconpicker-icon:hover {
|
||||
border-color: $less-main-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-nav-child {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-badge,
|
||||
.layui-badge-dot,
|
||||
.layui-badge-rim {
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-child a:hover {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"] span {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li:hover {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black,
|
||||
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
|
||||
.layuimini-menu-left-zoom>ul {
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-side {
|
||||
border-right: 1px solid $main-color;
|
||||
}
|
||||
|
||||
.layui-bg-blue {
|
||||
background-color: #0000ff !important;
|
||||
}
|
||||
|
||||
.layui-bg-orange {
|
||||
background-color: $yellow-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-bg-green {
|
||||
background-color: $green-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-table-hover {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-table-grid-down {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
.layui-table-tips-main {
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layuimini-tool i {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: $red-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this span {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
|
||||
background-color: $cover-color;
|
||||
border-radius: 0;
|
||||
|
||||
@extend .box-border-line;
|
||||
|
||||
.layui-card-header {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-text {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-qiuck-module {
|
||||
cursor: pointer;
|
||||
|
||||
a i {
|
||||
background-color: $cover-color;
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
a cite {
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
a i {
|
||||
background-color: $active-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
a cite {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layui-bg-number {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea,
|
||||
.city-picker-span,
|
||||
.main-input {
|
||||
background-color: $cover-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.city-picker-span>.title>span {
|
||||
color: $main-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-form-radio:hover *,
|
||||
.layui-form-radioed,
|
||||
.layui-form-radioed>i {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color: $main-color !important;
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-input:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-input:hover,
|
||||
.layui-textarea:hover {
|
||||
border-color: $main-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-badge-rim,
|
||||
.layui-border,
|
||||
.layui-colla-content,
|
||||
.layui-colla-item,
|
||||
.layui-collapse,
|
||||
.layui-elem-field,
|
||||
.layui-form-pane .layui-form-item[pane],
|
||||
.layui-form-pane .layui-form-label,
|
||||
.layui-input,
|
||||
.layui-layedit,
|
||||
.layui-layedit-tool,
|
||||
.layui-panel,
|
||||
.layui-quote-nm,
|
||||
.layui-select,
|
||||
.layui-tab-bar,
|
||||
.layui-tab-card,
|
||||
.layui-tab-title,
|
||||
.layui-tab-title .layui-this::after,
|
||||
.layui-textarea {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
.form-search .layui-input-inline input,
|
||||
.form-search .layui-input-inline select {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-child {
|
||||
border-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-child a {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layuimini-upload .layuimini-upload-btn {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layer {
|
||||
border: 1px solid $main-color;
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background-color: $plus-main-color !important;
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th,
|
||||
.layui-table-col-set,
|
||||
.layui-table-fixed-r,
|
||||
.layui-table-grid-down,
|
||||
.layui-table-header,
|
||||
.layui-table-page,
|
||||
.layui-table-tips-main,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-view,
|
||||
.layui-table[lay-skin="line"],
|
||||
.layui-table[lay-skin="row"] {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table thead tr,
|
||||
.layui-table-click,
|
||||
.layui-table-header,
|
||||
.layui-table-hover,
|
||||
.layui-table-mend,
|
||||
.layui-table-patch,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-total tr {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.hr-line {
|
||||
color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
background-color: $black-color;
|
||||
border-top: 1px solid $less-main-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
|
||||
background-color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
color: $main-color !important;
|
||||
clip-path: $box-shape;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn a {
|
||||
@extend .layui-btn
|
||||
}
|
||||
|
||||
.layui-layer-shade {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left {
|
||||
.layui-nav-tree .layui-nav-item {
|
||||
|
||||
margin: 5px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item {
|
||||
clip-path: $box-shape;
|
||||
color: $main-color;
|
||||
background-color: $active-color;
|
||||
|
||||
&.layui-this a {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
&.layui-this {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
span {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a:hover {
|
||||
background-color: $active-color !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-item a span {
|
||||
color: $main-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-item:hover a span {
|
||||
color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
.layui-left-nav {
|
||||
color: $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-iconpicker-icon {
|
||||
border-color: $less-main-color !important;
|
||||
background-color: $less-main-color !important;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-anim {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-iconpicker-list {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a,
|
||||
.layui-header .layui-nav-child dd.layui-this,
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: $active-color !important;
|
||||
}
|
||||
81
public/static/admin/css/themes/_demo.scss
Normal file
81
public/static/admin/css/themes/_demo.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
.layui-btn {
|
||||
color : #808185 !important;
|
||||
background-color: #cde7ff !important;
|
||||
border : 1px solid #d3dde6 !important;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background-color: rgb(215, 215, 215) !important;
|
||||
color : #6C6E71 !important;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>a::after {
|
||||
color: #6C6E71 !important;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
|
||||
color : #808185 !important;
|
||||
background-color: #cde7ff !important;
|
||||
border : 1px solid #d3dde6 !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layuimini-tab-active {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title li {
|
||||
padding : 0 5px !important;
|
||||
font-size : 12px;
|
||||
border-width: 1px 1px 1px 0 !important;
|
||||
border-style: solid !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title li.layui-this {
|
||||
color : #fff !important;
|
||||
border-color: rgba(0, 0, 255, 1) !important;
|
||||
background : rgba(90, 173, 255, 1) !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this span {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layuimini-tab>.layui-tab-title li,
|
||||
.layuimini-tab>.close-box li {
|
||||
line-height: 27px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab>.layui-tab-title,
|
||||
.layuimini-tab>.close-box {
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
height : 28px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #6C6E71 !important;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-onswitch {
|
||||
background-color: #cde7ff !important;
|
||||
border-color : #cde7ff !important;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch {
|
||||
|
||||
background-color: #6C6E71;
|
||||
border-color : #6C6E71;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event] {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color : #cde7ff !important;
|
||||
background-color: #cde7ff !important;
|
||||
}
|
||||
708
public/static/admin/css/themes/_gtk.scss
Normal file
708
public/static/admin/css/themes/_gtk.scss
Normal file
@@ -0,0 +1,708 @@
|
||||
& {
|
||||
background-color: #f6f5f4;
|
||||
color : #2e3436;
|
||||
}
|
||||
|
||||
.layuimini-container {}
|
||||
|
||||
.layuimini-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box .layui-table-header th {
|
||||
color : #979a9b !important;
|
||||
font-weight : 700 !important;
|
||||
font-weight : bold;
|
||||
text-shadow : none;
|
||||
border-color : #d7d2ce;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
||||
border-right: 1px solid #d7d2ce;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table td {
|
||||
|
||||
border-bottom: unset;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #d7d2ce;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
color : #2e3436;
|
||||
background: #f6f5f4;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table thead tr,
|
||||
.layui-table-click,
|
||||
.layui-table-header,
|
||||
.layui-table-hover,
|
||||
.layui-table-mend,
|
||||
.layui-table-patch,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-total tr {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.layui-table-cell {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.layui-table img {
|
||||
height: 25px !important;
|
||||
width : auto !important;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
position : relative;
|
||||
outline : none;
|
||||
overflow : visible;
|
||||
line-height : 28px;
|
||||
border-radius : 5px;
|
||||
transition : all .15s cubic-bezier(.25, .46, .45, .94);
|
||||
padding : 4px 9px;
|
||||
user-select : none;
|
||||
color : #2e3436;
|
||||
outline-color : rgba(53, 132, 228, .5);
|
||||
border : 1px solid #cdc7c2;
|
||||
border-bottom-color: rgb(205, 199, 194);
|
||||
border-bottom-color: #bfb8b1;
|
||||
background-color : #f6f5f4;
|
||||
box-shadow : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
|
||||
&::before {
|
||||
content : ' ';
|
||||
position : absolute;
|
||||
pointer-events: none;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
background : linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
|
||||
transition : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content : '';
|
||||
position : absolute;
|
||||
pointer-events: none;
|
||||
z-index : 2;
|
||||
display : inline-block;
|
||||
border : 2px solid transparent;
|
||||
border-radius : inherit;
|
||||
transition : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
top : -4px;
|
||||
left : -4px;
|
||||
width : calc(100% - -4px);
|
||||
height : calc(100% - -4px);
|
||||
}
|
||||
|
||||
&.layui-btn-normal {
|
||||
color : #fff;
|
||||
border-color : #1b6acb #1b6acb #15539e;
|
||||
background-color: #3c88e5;
|
||||
box-shadow : inset 0 1px #3181e3, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
}
|
||||
|
||||
&.layui-btn-danger {
|
||||
color : #fff;
|
||||
border-color : #b2161d #b2161d #851015;
|
||||
background-color: #e41f28;
|
||||
box-shadow : inset 0 1px #db1a23, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
}
|
||||
|
||||
&.layui-btn-sm {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.layui-btn-xs {
|
||||
line-height: 12px
|
||||
}
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-tool .layui-inline[lay-event] {
|
||||
@extend .layui-btn;
|
||||
|
||||
line-height : 32px;
|
||||
min-width : 32px;
|
||||
min-height : 32px;
|
||||
padding : 0;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.layui-laydate .layui-this {
|
||||
background-color: #3584e4 !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-laydate-content td,
|
||||
.layui-laydate-content th {
|
||||
|
||||
width : 36px;
|
||||
height : 36px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.laydate-footer-btns span {
|
||||
@extend .layui-btn;
|
||||
|
||||
line-height: 16px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right-style : none;
|
||||
border-top-right-radius : 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius : 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-laydate-footer span {
|
||||
@extend .layui-btn;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.layui-laydate-footer span.layui-laydate-preview {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color : #185fb4 !important;
|
||||
background-color: #5094e8;
|
||||
background-image: linear-gradient(0deg, #3987e5, #5094e8);
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover i {
|
||||
border-color : #185fb4;
|
||||
background-image: linear-gradient(0deg, #5094e8, #6ba5eb);
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox i {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.layui-layer-title {
|
||||
padding : 0 6px;
|
||||
min-height : 46px;
|
||||
border : 1px solid #bfb8b1;
|
||||
border-top-left-radius : 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background : #f1f0ee linear-gradient(0deg, #dfdcd8, #f4f2f1) !important;
|
||||
color : #2e3436 !important;
|
||||
padding-left : 12px;
|
||||
padding-right : 12px;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
.layui-layer {
|
||||
background-color: #f6f5f4;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title~.layui-layer-setwin>a {
|
||||
position : relative;
|
||||
outline : none;
|
||||
overflow : visible;
|
||||
border-radius: 5px;
|
||||
transition : all .15s cubic-bezier(.25, .46, .45, .94);
|
||||
user-select : none;
|
||||
|
||||
outline-color : rgba(53, 132, 228, .5);
|
||||
border : 1px solid #cdc7c2;
|
||||
border-bottom-color: rgb(205, 199, 194);
|
||||
border-bottom-color: #bfb8b1;
|
||||
background-color : #f6f5f4;
|
||||
box-shadow : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
height : 20px;
|
||||
line-height : 20px;
|
||||
width : 20px;
|
||||
text-align : center;
|
||||
display : inline-flex;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
|
||||
&::after {
|
||||
color: #2e3436 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layer-setwin {
|
||||
display : flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch.layui-form-onswitch {
|
||||
color : #ffffff;
|
||||
border-color : #185fb4;
|
||||
background-color: #3584e4;
|
||||
text-shadow : 0 1px rgba(53, 132, 228, 0.5), 0 0 2px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch {
|
||||
|
||||
border : 1px solid #cdc7c2;
|
||||
border-radius : 20px;
|
||||
color : rgba(46, 52, 54, 0.2);
|
||||
background-color: #e1dedb;
|
||||
text-shadow : 0 1px rgba(0, 0, 0, 0.1);
|
||||
transition : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.layui-form-switch {
|
||||
height: 20px;
|
||||
width : 40px;
|
||||
}
|
||||
|
||||
.layui-form-switch {
|
||||
|
||||
padding : 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.layui-form-switch.layui-form-onswitch i {
|
||||
top : 0;
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
margin-left: -20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.layui-form-switch i {
|
||||
top : 0;
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
margin-left : -5px;
|
||||
border-radius : 50%;
|
||||
transition : all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
color : #2e3436;
|
||||
outline-color : rgba(53, 132, 228, 0.5);
|
||||
border-color : #cdc7c2;
|
||||
border-bottom-color: #bfb8b1;
|
||||
background-color : #f6f5f4;
|
||||
box-shadow : inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.layui-tab-title li {
|
||||
transition : none;
|
||||
padding : 3px 12px;
|
||||
min-height : 30px;
|
||||
min-width : 65px;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
white-space : nowrap;
|
||||
color : #2e3436;
|
||||
font-weight : normal;
|
||||
user-select : none;
|
||||
border : 0;
|
||||
border-top-style : none;
|
||||
border-right-style : none;
|
||||
border-bottom-style: none;
|
||||
border-left-style : none;
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow : inset 0 -3px #c8c2bc;
|
||||
background-color: #edebe9;
|
||||
}
|
||||
|
||||
&.layui-this {
|
||||
box-shadow : inset 0 -3px #3584e4;
|
||||
background-color: #f1f0ee;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-tab-title {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
flex-direction: row;
|
||||
padding-left : 4px;
|
||||
padding-right : 4px;
|
||||
}
|
||||
|
||||
.layuimini-tab>.layui-tab-title li,
|
||||
.layuimini-tab>.close-box li {
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this span {
|
||||
color: #2e3436 !important
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title span {
|
||||
color: #2e3436 !important
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layuimini-tab-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title {
|
||||
background-color: #e1dedb;
|
||||
border-color : #cdc7c2;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
background-color: #f2f2f2;
|
||||
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn a {
|
||||
position : relative;
|
||||
outline : none;
|
||||
overflow : visible;
|
||||
line-height : 22px;
|
||||
height : 22px;
|
||||
border-radius : 5px;
|
||||
transition : all .15s cubic-bezier(.25, .46, .45, .94);
|
||||
padding : 4px 9px;
|
||||
user-select : none;
|
||||
color : #2e3436 !important;
|
||||
outline-color : rgba(53, 132, 228, .5);
|
||||
border : 1px solid #cdc7c2;
|
||||
border-bottom-color: rgb(205, 199, 194);
|
||||
border-bottom-color: #bfb8b1;
|
||||
background-color : #f6f5f4;
|
||||
box-shadow : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
|
||||
&::before {
|
||||
content : ' ';
|
||||
position : absolute;
|
||||
pointer-events: none;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
background : linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
|
||||
transition : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content : '';
|
||||
position : absolute;
|
||||
pointer-events: none;
|
||||
z-index : 2;
|
||||
display : inline-block;
|
||||
border : 2px solid transparent;
|
||||
border-radius : inherit;
|
||||
transition : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
top : -4px;
|
||||
left : -4px;
|
||||
width : calc(100% - -4px);
|
||||
height : calc(100% - -4px);
|
||||
}
|
||||
|
||||
|
||||
&.layui-layer-btn0 {
|
||||
color : #fff !important;
|
||||
border-color : #1b6acb #1b6acb #15539e;
|
||||
background-color: #3c88e5;
|
||||
box-shadow : inset 0 1px #3181e3, 0 1px 2px rgba(0, 0, 0, .07);
|
||||
}
|
||||
}
|
||||
|
||||
.layui-tab-brief {
|
||||
|
||||
&>.layui-tab-title {
|
||||
|
||||
li {
|
||||
@extend .layui-btn;
|
||||
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right-style : none;
|
||||
border-top-right-radius : 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius : 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.layui-this {
|
||||
color : unset;
|
||||
color : #2e3436;
|
||||
border-color : #cdc7c2;
|
||||
background-color: #d6d1cd;
|
||||
box-shadow : inset 0 1px rgba(255, 255, 255, 0);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow : unset;
|
||||
background-color: #edebe9;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-form-radio:hover *,
|
||||
.layui-form-radioed,
|
||||
.layui-form-radioed>i {
|
||||
color: #5094e8;
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
.layui-card-header {
|
||||
padding : 0 6px;
|
||||
min-height : 46px;
|
||||
border-width : 1px;
|
||||
border-style : solid;
|
||||
border-color : #bfb8b1;
|
||||
border-top-left-radius : 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background : #f1f0ee linear-gradient(to top, #dfdcd8, #f4f2f1);
|
||||
box-shadow : inset 0 1px rgba(255, 255, 255, 0.8), inset 0 -2px 2px rgba(0, 0, 0, 0.02);
|
||||
|
||||
.icon {
|
||||
color: #979a9b !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-card-body {
|
||||
background-color: #f6f5f4;
|
||||
border : 1px solid #cdc7c2;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-btn,
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea,
|
||||
.layui-upload-button,
|
||||
.city-picker-span {
|
||||
border-radius: 5px;
|
||||
border : 1px solid #cdc7c2;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black,
|
||||
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
|
||||
.layuimini-menu-left-zoom>ul {
|
||||
background-color: #f6f5f4 !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left {
|
||||
background-color: #fbfafa;
|
||||
border-right : 1px solid #cdc7c2;
|
||||
|
||||
.layui-nav {
|
||||
|
||||
li {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #cdc7c2;
|
||||
}
|
||||
|
||||
|
||||
&.layui-this {
|
||||
a {
|
||||
background-color: #347cd3 !important;
|
||||
color : #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-this a,
|
||||
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-this a {
|
||||
color: #2e3436 !important;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item.layui-this a:hover,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item.layui-this a:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: #2e3436 !important;
|
||||
|
||||
&:hover {
|
||||
color: #2e3436 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a {
|
||||
height : 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
|
||||
background-color: rgba(46, 52, 54, 0.05) !important;
|
||||
border-top : 1px solid #d7d2ce;
|
||||
|
||||
dd {
|
||||
border-bottom: 1px solid #d7d2ce;
|
||||
}
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #347cd3 !important;
|
||||
color : #fff !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-header-menu>li.layui-nav-item {
|
||||
@extend .layui-btn;
|
||||
margin-top : 10px;
|
||||
height : 30px !important;
|
||||
line-height: 30px !important;
|
||||
|
||||
|
||||
&::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right-style : none;
|
||||
border-top-right-radius : 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius : 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
border-right-style : solid;
|
||||
border-radius : 5px;
|
||||
border-top-left-radius : 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #f6f5f4 !important;
|
||||
}
|
||||
|
||||
.layui-layer-dialog {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.layui-layer-iframe {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
background-color: #e1dedb;
|
||||
border-style : solid;
|
||||
border-color : #cdc7c2;
|
||||
}
|
||||
|
||||
.form-search .layui-btn {
|
||||
height : 32px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.form-search .layui-form-select dl {
|
||||
transition : all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
background-color : #ffffff;
|
||||
background-clip : padding-box;
|
||||
border : 1px solid rgba(0, 0, 0, 0.23);
|
||||
border-top-left-radius : 0;
|
||||
border-top-right-radius: 0;
|
||||
border-radius : 9px;
|
||||
border-top-left-radius : 0px;
|
||||
border-top-right-radius: 0px;
|
||||
box-shadow : 0 1px 3px 2px rgba(0, 0, 0, 0.08);
|
||||
top : 28px;
|
||||
}
|
||||
|
||||
.layui-form-select dl dd,
|
||||
.layui-form-select dl dt {
|
||||
height : 30px;
|
||||
line-height: 30px;
|
||||
padding : 0 10px;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-select dl dd.layui-this {
|
||||
background-color: #3c88e5 !important;
|
||||
}
|
||||
|
||||
.layui-table-header .layui-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a,
|
||||
.layui-header .layui-nav-child dd.layui-this,
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: #3c88e5 !important;
|
||||
}
|
||||
|
||||
.layuimini-mobile-show {
|
||||
.layui-nav-more {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>span {
|
||||
color: #2e3436;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>span:after {
|
||||
|
||||
color: #2e3436;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::after,
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::before {
|
||||
border-color: #2e3436;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
|
||||
background-color: #2e3436;
|
||||
}
|
||||
284
public/static/admin/css/themes/_neomorphic.scss
Normal file
284
public/static/admin/css/themes/_neomorphic.scss
Normal file
@@ -0,0 +1,284 @@
|
||||
$main-color:#61677C;
|
||||
|
||||
& {
|
||||
background-color: #EBECF0;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #EBECF0 !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-container .layui-btn-success {
|
||||
|
||||
color: #4bb368;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-btn-danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.layuimini-container .layuimini-btn-primary {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-btn-primary {
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-btn-normal {
|
||||
color: #1e9fff;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #EBECF0;
|
||||
text-shadow: 1px 1px 0 #FFF;
|
||||
color: $main-color;
|
||||
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event] {
|
||||
@extend .layui-btn;
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
@extend .layui-btn;
|
||||
text-shadow: 0.5px 0.5px 0 #fff;
|
||||
}
|
||||
|
||||
.layui-layer {
|
||||
@extend .layui-btn;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background-color: transparent !important;
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>span {
|
||||
color: $main-color !important;
|
||||
|
||||
&::before {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
@extend .layui-btn;
|
||||
text-shadow: 0.5px 0.5px 0 #fff;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-tool {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
background-color: #EBECF0;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@extend .layui-btn;
|
||||
text-shadow: 0.5px 0.5px 0 #fff;
|
||||
}
|
||||
|
||||
.layuimini-qiuck-module {
|
||||
@extend .layui-btn;
|
||||
|
||||
i {
|
||||
background-color: transparent
|
||||
}
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black,
|
||||
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
|
||||
.layuimini-menu-left-zoom>ul {
|
||||
@extend .layui-btn;
|
||||
background-color: #EBECF0 !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
@extend .layui-btn;
|
||||
|
||||
&:hover {
|
||||
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-child dd {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover,
|
||||
.layuimini-menu-left .layui-nav .layui-this a,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-this a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layui-header {
|
||||
.layuimini-header-menu>.layui-nav-item {
|
||||
@extend .layui-btn;
|
||||
margin: 10px;
|
||||
line-height: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item {
|
||||
@extend .layui-btn;
|
||||
margin: 10px;
|
||||
line-height: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-btn-xs {
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-textarea {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 16px;
|
||||
border-radius: 320px;
|
||||
padding: 16px;
|
||||
background-color: #EBECF0;
|
||||
text-shadow: 1px 1px 0 #FFF;
|
||||
margin-right: 8px;
|
||||
box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease-in-out;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.layuimini-upload .layuimini-upload-btn {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layui-form-pane .layui-form-label {
|
||||
background-color: transparent;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-select dl dd.layui-this {
|
||||
background-color: transparent !important;
|
||||
color: #2c3e50
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li.layui-this {
|
||||
text-shadow: 0.5px 0.5px 0 #FFF;
|
||||
}
|
||||
|
||||
.layui-form-select dl {
|
||||
@extend .layui-btn;
|
||||
}
|
||||
|
||||
.layui-form-checkbox {
|
||||
|
||||
@extend .layui-btn;
|
||||
padding: 10px 10px 10px 24px;
|
||||
}
|
||||
|
||||
.layui-form-checkbox>i {
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
text-shadow: 0.5px 0.5px 0 #fff;
|
||||
}
|
||||
|
||||
.layui-form-checked:hover>div,
|
||||
.layui-form-checked>div {
|
||||
|
||||
color: #16b777;
|
||||
}
|
||||
|
||||
.layui-tree,
|
||||
.laytable-cell-checkbox {
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"] {
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"]>i {
|
||||
left: 5px;
|
||||
top: 5px
|
||||
}
|
||||
}
|
||||
|
||||
.layui-tree-txt {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.layui-form-radio {
|
||||
@extend .layui-btn;
|
||||
|
||||
}
|
||||
|
||||
.layui-form-radio:hover>*,
|
||||
.layui-form-radioed,
|
||||
.layui-form-radioed>i {
|
||||
color: #16b777;
|
||||
}
|
||||
|
||||
.layui-table-tips-c {
|
||||
text-shadow: 0.5px 0.5px 0 #fff;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title {
|
||||
background-color: #EBECF0;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
background-color: #EBECF0;
|
||||
}
|
||||
344
public/static/admin/css/themes/_nes.scss
Normal file
344
public/static/admin/css/themes/_nes.scss
Normal file
@@ -0,0 +1,344 @@
|
||||
a,
|
||||
button {
|
||||
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer
|
||||
}
|
||||
|
||||
& {
|
||||
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto;
|
||||
font-family: "ark-pixel";
|
||||
}
|
||||
|
||||
$border-line-width:3px;
|
||||
|
||||
.public-border {
|
||||
border-style: solid;
|
||||
border-width: $border-line-width;
|
||||
border-image-slice: 2;
|
||||
border-image-width: 2;
|
||||
border-image-repeat: stretch;
|
||||
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
|
||||
border-image-outset: 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-btn {
|
||||
|
||||
@extend .public-border;
|
||||
line-height: 32px;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
border-image-repeat: stretch;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -$border-line-width;
|
||||
right: -$border-line-width;
|
||||
bottom: -$border-line-width;
|
||||
left: -$border-line-width;
|
||||
content: "";
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #adafbc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
&.layui-btn-sm {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
&.layui-btn-xs {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&.layui-btn-normal {
|
||||
color: #fff;
|
||||
background-color: #209cee;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #006bb3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #108de0;
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-success {
|
||||
color: #fff;
|
||||
background-color: #92cc41;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #4aa52e;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #92cc41;
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-danger {
|
||||
color: #fff;
|
||||
background-color: #e76e55;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #8c2022;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ce372b;
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-warm {
|
||||
color: #212529;
|
||||
background-color: #f7d51d;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #e59400;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #212529;
|
||||
background-color: #f2c409;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-search .layui-btn {
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-container .layui-table-tool .layui-inline[lay-event] {
|
||||
@extend .layui-btn;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.layui-table img {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"] i {
|
||||
@extend .public-border;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
background-color: unset;
|
||||
color: #212529;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.layui-btn-sm {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.layui-btn-xs {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-nav * {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.layui-tab-title li {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item {
|
||||
border-bottom: 3px solid #212529;
|
||||
}
|
||||
|
||||
.layuimini-header-menu>.layui-nav-item {
|
||||
|
||||
@extend .public-border;
|
||||
|
||||
border-image-outset: 0;
|
||||
}
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th {
|
||||
font-size: 16px;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #212529
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea {
|
||||
@extend .public-border;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
text-align: right;
|
||||
color: #212529;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.layuimini-form>.layui-form-item>.layui-input-block tip,
|
||||
.layuimini-form>.layui-form-item>.layui-inline tip {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background: unset !important;
|
||||
color: #212529 !important;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn a {
|
||||
@extend .layui-btn;
|
||||
color: #212529 !important;
|
||||
|
||||
&.layui-layer-btn0 {
|
||||
color: #fff !important;
|
||||
background-color: #209cee;
|
||||
|
||||
&::after {
|
||||
box-shadow: inset (-$border-line-width) (-$border-line-width) #006bb3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #108de0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>span {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin>span:after {
|
||||
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::after,
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-max::before {
|
||||
border-color: #212529;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
|
||||
.layui-layer {
|
||||
@extend .public-border;
|
||||
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
@extend .public-border;
|
||||
|
||||
.layui-card-header {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
@extend .public-border;
|
||||
}
|
||||
|
||||
.layui-table-box {
|
||||
@extend .public-border;
|
||||
border-image-outset: 1;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box .layui-table-header th {
|
||||
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table thead tr,
|
||||
.layui-table-click,
|
||||
.layui-table-header,
|
||||
.layui-table-hover,
|
||||
.layui-table-mend,
|
||||
.layui-table-patch,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-total tr {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.layui-table-header .layui-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.layui-badge,
|
||||
.layui-badge-rim {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
|
||||
}
|
||||
|
||||
&.layui-bg-blue {
|
||||
background-color: #209cee;
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-bg-gray {
|
||||
background-color: #92cc41;
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 4px #92cc41, 0 -4px #92cc41, 4px 0 #92cc41, -4px 0 #92cc41;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li {
|
||||
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
|
||||
}
|
||||
0
public/static/admin/css/themes/_normal.scss
Normal file
0
public/static/admin/css/themes/_normal.scss
Normal file
802
public/static/admin/css/themes/_sicfi.scss
Normal file
802
public/static/admin/css/themes/_sicfi.scss
Normal file
@@ -0,0 +1,802 @@
|
||||
// 通常用于背景色
|
||||
$black-color :rgb(2, 17, 20);
|
||||
// 通常用于字体颜色
|
||||
$main-color :rgb(126, 252, 246);
|
||||
// 通常用于边框
|
||||
$less-main-color:rgb(6, 216, 215);
|
||||
|
||||
$plus-main-color:rgb(0, 125, 124);
|
||||
|
||||
// 通常用于激活状态,通常跟背景色搭配
|
||||
$cover-color :rgba(62, 251, 251, 0.05);
|
||||
// 更强的激活状态,适合做选项操作时使用
|
||||
$active-color :rgba(62, 251, 251, 0.5);
|
||||
|
||||
|
||||
$red-color :rgb(255, 0, 0);
|
||||
$yellow-color:rgb(255, 255, 153);
|
||||
$green-color :rgb(0, 255, 0);
|
||||
|
||||
& {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-tool {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
|
||||
|
||||
.layui-btn {
|
||||
|
||||
&.layui-btn-lg {
|
||||
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
clip-path : $box-shape;
|
||||
padding-right : 10px;
|
||||
position : relative;
|
||||
background-color: transparent;
|
||||
border : 1px solid;
|
||||
color : rgb(126, 252, 246);
|
||||
text-shadow : rgb(126, 252, 246) 0px 0px 1px;
|
||||
background-color: rgb(126, 252, 246);
|
||||
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
clip-path: $box-shape;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -0.5px;
|
||||
top: -0.5px;
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
clip-path: $box-shape;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -0.5px;
|
||||
top: -0.5px;
|
||||
background-color: rgba(126, 252, 246, 0.2);
|
||||
}
|
||||
|
||||
&.layui-btn-disabled {
|
||||
&::after {
|
||||
// todo:实现按钮禁用样式
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-success {
|
||||
text-shadow: rgb(0, 255, 0) 0px 0px 1px;
|
||||
color: rgb(0, 255, 0);
|
||||
background-color: rgba(0, 255, 0);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.layui-btn-danger {
|
||||
text-shadow: rgb(255, 0, 0) 0px 0px 1px;
|
||||
color: rgb(255, 0, 0);
|
||||
background-color: rgb(255, 0, 0);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.layuimini-btn-primary {
|
||||
text-shadow: rgb(255, 255, 153) 0px 0px 1px;
|
||||
color: rgb(255, 255, 153);
|
||||
background-color: rgb(255, 255, 153);
|
||||
border: unset;
|
||||
|
||||
&:hover::after {
|
||||
background-color: rgba(255, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.layui-btn-primary {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
&.layui-btn-normal {
|
||||
color: $black-color;
|
||||
background-color: $main-color;
|
||||
border: unset;
|
||||
|
||||
&::before {
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
background: $black-color;
|
||||
color: $main-color;
|
||||
|
||||
|
||||
tr {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-table-header {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-table-box .layui-table-header th {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event] {
|
||||
color: $main-color;
|
||||
border: none;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-color: $main-color;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
clip-path: $box-shape;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover {
|
||||
background-color: rgba(126, 252, 246, 0.1);
|
||||
}
|
||||
|
||||
.layuimini-main {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-table-header {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.color-content>ul>li>a>div>span:nth-child(2) {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li {
|
||||
clip-path: $box-shape;
|
||||
}
|
||||
|
||||
.layuimini-color .elem-content li.layui-this {
|
||||
background-color: $main-color;
|
||||
color: $black-color !important;
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item {
|
||||
color: $main-color;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(62, 251, 251, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: $cover-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title {
|
||||
background-color: $cover-color !important;
|
||||
border-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title span {
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
|
||||
.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
|
||||
background-color: $active-color;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
|
||||
.layuimini-tool i:hover {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
background-color: $black-color;
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title li {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-flow-more a *,
|
||||
.layui-laypage input,
|
||||
.layui-table-view select[lay-ignore] {
|
||||
border-color: $less-main-color;
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-laypage button,
|
||||
.layui-laypage input {
|
||||
border-color: $less-main-color;
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch {
|
||||
border-color: $less-main-color !important;
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-onswitch {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-container .layui-form-switch.layui-form-onswitch i {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr em {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
background-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color: $main-color;
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-table-init {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.box-border-line {
|
||||
position: relative;
|
||||
border: 1px solid $less-main-color;
|
||||
border-width: 1px;
|
||||
$border-offset: 3px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid $less-main-color;
|
||||
top: -$border-offset;
|
||||
left: -$border-offset;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid $less-main-color;
|
||||
bottom: -$border-offset;
|
||||
right: -$border-offset;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
width: calc(100% + $border-offset);
|
||||
height: calc(100% + $border-offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-search-fieldset {
|
||||
.layui-input-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-form-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
@extend .box-border-line;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-form-pane .layui-form-label {
|
||||
background-color: $cover-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layuimini-container .table-search-fieldset {
|
||||
color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
|
||||
}
|
||||
|
||||
.layui-form-select,
|
||||
.layui-form-autocomplete {
|
||||
dl {
|
||||
|
||||
color: $main-color;
|
||||
background-color: $black-color;
|
||||
border-color: $less-main-color;
|
||||
|
||||
dd {
|
||||
&.layui-this {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $less-main-color !important;
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-iconpicker-item,
|
||||
.layui-iconpicker-item:hover {
|
||||
border-color: $less-main-color !important;
|
||||
color: $black-color;
|
||||
|
||||
.layui-iconpicker-icon:hover {
|
||||
border-color: $less-main-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-nav-child {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-badge,
|
||||
.layui-badge-dot,
|
||||
.layui-badge-rim {
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-child a:hover {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"] span {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li:hover {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black,
|
||||
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
|
||||
.layuimini-menu-left-zoom>ul {
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-side {
|
||||
border-right: 1px solid $main-color;
|
||||
}
|
||||
|
||||
.layui-bg-blue {
|
||||
background-color: #0000ff !important;
|
||||
}
|
||||
|
||||
.layui-bg-orange {
|
||||
background-color: $yellow-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-bg-green {
|
||||
background-color: $green-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.layui-table-hover {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-table-grid-down {
|
||||
background-color: $black-color;
|
||||
color: $main-color;
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
.layui-table-tips-main {
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-header .layuimini-tool i {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: $red-color !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-title .layui-this span {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
|
||||
background-color: $cover-color;
|
||||
border-radius: 0;
|
||||
|
||||
@extend .box-border-line;
|
||||
|
||||
.layui-card-header {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-text {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-qiuck-module {
|
||||
cursor: pointer;
|
||||
|
||||
a i {
|
||||
background-color: $cover-color;
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
a cite {
|
||||
color: $active-color;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
a i {
|
||||
background-color: $active-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
a cite {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layui-bg-number {
|
||||
background-color: $cover-color;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea,
|
||||
.city-picker-span,
|
||||
.main-input {
|
||||
background-color: $cover-color;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.city-picker-span>.title>span {
|
||||
color: $main-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-form-radio:hover *,
|
||||
.layui-form-radioed,
|
||||
.layui-form-radioed>i {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
border-color: $main-color !important;
|
||||
background-color: $main-color;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.layui-input:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
.layui-input:hover,
|
||||
.layui-textarea:hover {
|
||||
border-color: $main-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-badge-rim,
|
||||
.layui-border,
|
||||
.layui-colla-content,
|
||||
.layui-colla-item,
|
||||
.layui-collapse,
|
||||
.layui-elem-field,
|
||||
.layui-form-pane .layui-form-item[pane],
|
||||
.layui-form-pane .layui-form-label,
|
||||
.layui-input,
|
||||
.layui-layedit,
|
||||
.layui-layedit-tool,
|
||||
.layui-panel,
|
||||
.layui-quote-nm,
|
||||
.layui-select,
|
||||
.layui-tab-bar,
|
||||
.layui-tab-card,
|
||||
.layui-tab-title,
|
||||
.layui-tab-title .layui-this::after,
|
||||
.layui-textarea {
|
||||
border-color: $main-color !important;
|
||||
}
|
||||
|
||||
.form-search .layui-input-inline input,
|
||||
.form-search .layui-input-inline select {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-child {
|
||||
border-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-child a {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.layui-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layuimini-upload .layuimini-upload-btn {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layer {
|
||||
border: 1px solid $main-color;
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title {
|
||||
background-color: $plus-main-color !important;
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-table td,
|
||||
.layui-table th,
|
||||
.layui-table-col-set,
|
||||
.layui-table-fixed-r,
|
||||
.layui-table-grid-down,
|
||||
.layui-table-header,
|
||||
.layui-table-page,
|
||||
.layui-table-tips-main,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-view,
|
||||
.layui-table[lay-skin="line"],
|
||||
.layui-table[lay-skin="row"] {
|
||||
border-color: $less-main-color;
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table thead tr,
|
||||
.layui-table-click,
|
||||
.layui-table-header,
|
||||
.layui-table-hover,
|
||||
.layui-table-mend,
|
||||
.layui-table-patch,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-total tr {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.hr-line {
|
||||
color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
background-color: $black-color;
|
||||
border-top: 1px solid $less-main-color;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
|
||||
background-color: $main-color;
|
||||
border-color: $less-main-color;
|
||||
color: $main-color !important;
|
||||
clip-path: $box-shape;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn a {
|
||||
@extend .layui-btn
|
||||
}
|
||||
|
||||
.layui-layer-shade {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left {
|
||||
.layui-nav-tree .layui-nav-item {
|
||||
|
||||
margin: 5px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item {
|
||||
clip-path: $box-shape;
|
||||
color: $main-color;
|
||||
background-color: $active-color;
|
||||
|
||||
&.layui-this a {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
&.layui-this {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
span {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a:hover {
|
||||
background-color: $active-color !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a,
|
||||
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: $main-color !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-item a span {
|
||||
color: $main-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-item:hover a span {
|
||||
color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: $black-color !important;
|
||||
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
|
||||
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: $main-color !important;
|
||||
color: $black-color !important;
|
||||
|
||||
.layui-left-nav {
|
||||
color: $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.layui-iconpicker-icon {
|
||||
border-color: $less-main-color !important;
|
||||
background-color: $less-main-color !important;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-anim {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-iconpicker-list {
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a,
|
||||
.layui-header .layui-nav-child dd.layui-this,
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: $active-color !important;
|
||||
}
|
||||
288
public/static/admin/css/themes/_win7.scss
Normal file
288
public/static/admin/css/themes/_win7.scss
Normal file
@@ -0,0 +1,288 @@
|
||||
& {
|
||||
color: #222;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
|
||||
border: 1.5px solid #888;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, .8), inset 0 1px 1px #fff;
|
||||
box-sizing: border-box;
|
||||
color: #222;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, #e5f4fd 45%, #b3e0f9 0);
|
||||
border-color: #72a2c5;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn a {
|
||||
@extend .layui-btn;
|
||||
color: #222 !important;
|
||||
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-layer-title {
|
||||
background: linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4 !important;
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
border-radius: 6px 6px 0 0;
|
||||
// box-shadow : inset 0 0 .5px .5px #fff;
|
||||
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
|
||||
color: #000 !important;
|
||||
letter-spacing: 0;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
|
||||
|
||||
padding: 0 80px 0 8px;
|
||||
|
||||
border: 0;
|
||||
box-shadow: inset 0 .5px #fff;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title~.layui-layer-setwin {
|
||||
height: 27px !important;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-title~.layui-layer-setwin>span {
|
||||
height: 20px !important;
|
||||
line-height: 20px !important;
|
||||
|
||||
background: linear-gradient(hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, hsla(0, 0%, 100%, .5)) !important;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-right: 1px solid rgba(0, 0, 0, .6);
|
||||
box-shadow: inset 0 0 0 .5px #eee;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
margin-left: 0;
|
||||
|
||||
min-width: 26px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(circle at 50% 100%, #2aceda, transparent 60%), linear-gradient(#a9d2e8 50%, #196c9b 0) !important;
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
border: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
&.layui-layer-close1 {
|
||||
background-color: #d04a37 !important;
|
||||
min-width: 45px !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
filter: contrast(1.3);
|
||||
background-image: linear-gradient(hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, hsla(0, 0%, 100%, .5)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-layer-dialog {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.layui-layer-iframe {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.layui-layer:not(.layui-layer-loading) {
|
||||
|
||||
.layui-layer-content {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 -1px 1px .5px #fff;
|
||||
margin: 0 6px 0 6px;
|
||||
padding: 6px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(transparent 20%, hsla(0, 0%, 100%, .7) 40%, transparent 41%), linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
|
||||
border-radius: 6px;
|
||||
content: "";
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
&.layui-layer-iframe {
|
||||
|
||||
&::before {
|
||||
height: calc(100% + 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-layer-easy .layui-layer-btn {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 0 1px .5px #fff;
|
||||
margin: 0 6px 6px;
|
||||
padding: 6px;
|
||||
border-top: 0;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.layui-card {
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 5px 1px rgba(0, 0, 0, .6);
|
||||
font: 9pt Segoe UI, sans-serif;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(transparent 20%, hsla(0, 0%, 100%, .7) 40%, transparent 41%), linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
|
||||
border-radius: 6px;
|
||||
content: "";
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.layui-card-header {
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
|
||||
border-radius: 6px 6px 0 0;
|
||||
font: 9pt Segoe UI, sans-serif;
|
||||
justify-content: space-between;
|
||||
padding: 6px;
|
||||
border: 0;
|
||||
box-shadow: inset 0 .5px #fff;
|
||||
height: 15px;
|
||||
|
||||
color: #000;
|
||||
letter-spacing: 0;
|
||||
line-height: 15px;
|
||||
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
|
||||
|
||||
}
|
||||
|
||||
.layui-card-body {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 0 1px .5px #fff;
|
||||
margin: 0 6px 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-tab-brief>.layui-tab-title .layui-this {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control>li {
|
||||
height: 27px !important;
|
||||
line-height: 27px !important;
|
||||
}
|
||||
|
||||
.layui-form-checkbox[lay-skin="primary"] i {
|
||||
background: #ddd;
|
||||
border: 1px solid #888;
|
||||
box-shadow: inset 0 0 0 1.5px #eee, inset 0 2px 4px #888, inset -2px -3px 4px #fff;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 13px;
|
||||
margin-right: 6px;
|
||||
width: 13px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin="primary"] i {
|
||||
color: #16638f;
|
||||
border-color: #888;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
|
||||
&::before {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layui-form-radio:hover *,
|
||||
.layui-form-radioed,
|
||||
.layui-form-radioed>i {
|
||||
color: #16638f;
|
||||
}
|
||||
|
||||
.layui-input {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top-color: rgb(204, 204, 204);
|
||||
border-radius: 2px;
|
||||
border-top-color: #888;
|
||||
box-sizing: border-box;
|
||||
font: 9pt Segoe UI, sans-serif;
|
||||
padding: 3px 4px 5px;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea {
|
||||
height: unset
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
padding: 3px 15px;
|
||||
font: 9pt Segoe UI, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-form>.layui-form-item .required::after {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.form-search .layui-input-inline input,
|
||||
.form-search .layui-input-inline select {
|
||||
height: unset;
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.form-search .layui-form-label {
|
||||
height: unset;
|
||||
background: unset;
|
||||
text-align: right;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.layuimini-upload-btn {
|
||||
.layui-btn {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
95
public/static/admin/css/themes/default.css
Normal file
95
public/static/admin/css/themes/default.css
Normal file
@@ -0,0 +1,95 @@
|
||||
/*头部右侧背景色 headerRightBg */
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部右侧选中背景色 headerRightBgThis */
|
||||
.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #e4e4e4 !important;
|
||||
}
|
||||
|
||||
/*头部右侧字体颜色 headerRightColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
|
||||
color: rgba(107, 107, 107, 0.7);
|
||||
}
|
||||
|
||||
/**头部右侧下拉字体颜色 headerRightChildColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
|
||||
color: rgba(107, 107, 107, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧鼠标选中 headerRightColorThis */
|
||||
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
|
||||
color: #565656 !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-more {
|
||||
border-top-color: rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: #1E9FFF !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部缩放按钮样式 headerRightToolColor */
|
||||
.layui-layout-admin .layui-header .layuimini-tool i {
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
/*logo背景颜色 headerLogoBg */
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: #192027 !important;
|
||||
}
|
||||
|
||||
/*logo字体颜色 headerLogoColor */
|
||||
.layui-layout-admin .layuimini-logo h1 {
|
||||
color: rgb(191, 187, 187);
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
|
||||
border-top-color: rgb(191, 187, 187);
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单背景 leftMenuBg */
|
||||
.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {
|
||||
background-color: #28333E !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中背景 leftMenuBgThis */
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #1E9FFF !important
|
||||
}
|
||||
|
||||
/*左侧菜单子菜单背景 leftMenuChildBg */
|
||||
.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
|
||||
background-color: #0c0f13 !important;
|
||||
}
|
||||
|
||||
/*左侧菜单字体颜色 leftMenuColor */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中字体颜色 leftMenuColorThis */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/**tab选项卡选中颜色 tabActiveColor */
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
background-color: #1e9fff;
|
||||
}
|
||||
3050
public/static/admin/css/themes/index.css
Normal file
3050
public/static/admin/css/themes/index.css
Normal file
File diff suppressed because it is too large
Load Diff
41
public/static/admin/css/themes/index.scss
Normal file
41
public/static/admin/css/themes/index.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.elem-style-normal {
|
||||
@import 'normal';
|
||||
}
|
||||
|
||||
.elem-style-demo {
|
||||
@import 'demo';
|
||||
}
|
||||
|
||||
.elem-style-sicfi {
|
||||
@import 'sicfi';
|
||||
}
|
||||
|
||||
.elem-style-gtk {
|
||||
@import 'gtk';
|
||||
}
|
||||
|
||||
.elem-style-nes {
|
||||
@import 'nes';
|
||||
|
||||
}
|
||||
|
||||
.elem-style-win7 {
|
||||
@import 'win7';
|
||||
}
|
||||
.elem-style-neomorphic {
|
||||
@import 'neomorphic';
|
||||
}
|
||||
.elem-style-dark {
|
||||
@import 'dark';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ark-pixel";
|
||||
src : url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_cn.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_hk.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_tr.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_tw.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-ja.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-ko.ttf') format('truetype'),
|
||||
url('./nes/ark-pixel-font-12px/ark-pixel-12px-latin.ttf') format('truetype');
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
Copyright (c) 2021, TakWolf (https://ark-pixel-font.takwolf.com),
|
||||
with Reserved Font Name 'Ark Pixel'.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -48,7 +48,6 @@
|
||||
position: relative;
|
||||
top: 2px;
|
||||
display: block;
|
||||
color: #666;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTab", "swiper"], function ($, ea, echarts, undefined, miniAdmin, miniTab) {
|
||||
define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTheme", "miniTab", "swiper"], function ($, ea, echarts, undefined, miniAdmin, miniTheme, miniTab) {
|
||||
|
||||
return {
|
||||
index: function () {
|
||||
@@ -25,28 +25,6 @@ define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTa
|
||||
})
|
||||
});
|
||||
});
|
||||
layui.form.on('switch(header-theme-mode)', function (data) {
|
||||
let dark_mode = this.checked
|
||||
let that = $('iframe').contents()
|
||||
if (dark_mode) {
|
||||
$('#layuicss-theme-dark').attr({
|
||||
rel: "stylesheet",
|
||||
type: "text/css",
|
||||
href: "/static/admin/css/layui-theme-dark.css"
|
||||
})
|
||||
.appendTo("head");
|
||||
that.find("html").addClass('dark')
|
||||
$('html').addClass('dark')
|
||||
} else {
|
||||
$('#layuicss-theme-dark').attr({
|
||||
rel: "stylesheet",
|
||||
type: "text/css",
|
||||
href: ""
|
||||
})
|
||||
that.find("html").removeClass('dark')
|
||||
$('html').removeClass('dark')
|
||||
}
|
||||
});
|
||||
},
|
||||
welcome: function () {
|
||||
miniTab.listen();
|
||||
|
||||
@@ -22,6 +22,7 @@ require.config({
|
||||
"autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
|
||||
"vue": ["plugs/vue-2.6.10/vue.min"],
|
||||
"swiper": ["plugs/swiper/swiper-bundle.min"],
|
||||
"colorMode":["plugs/colorMode/colorMode"],
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
186
public/static/plugs/colorMode/colorMode.js
Normal file
186
public/static/plugs/colorMode/colorMode.js
Normal file
@@ -0,0 +1,186 @@
|
||||
// @ts-ignore
|
||||
define(['jquery'], function (colorMode) {
|
||||
// 'use strict';
|
||||
|
||||
/** @type {jQuery}*/
|
||||
var $ = layui.jquery;
|
||||
|
||||
var MOD_NAME = 'colorMode';
|
||||
var defaultWindow = window;
|
||||
var document = defaultWindow.document;
|
||||
|
||||
var colorMode = {
|
||||
/**
|
||||
* @typedef {object} initOptions
|
||||
* @prop {string} [selector="html"] - 应用于目标元素的 CSS 选择器
|
||||
* @prop {string} [attribute="class"] - 应用于目标元素的 HTML 属性
|
||||
* @prop {string} [initialValue='auto'] - 初始颜色模式
|
||||
* @prop {Object.<string, string>} [modes]- 颜色模式。value 为添加到 HTML 属性上的值
|
||||
* @prop {(mode: string, defaultHandler: (window?: Window) => void) => void} [onChanged] - 用于处理更新的自定义处理程序，指定时，默认行为将被覆盖。
|
||||
* @prop {Storage} [storage=localStorage] - 将数据持久化到 localStorage/sessionStorage 的键。传递 `null` 以禁用持久性
|
||||
* @prop {string | null} [storageKey='color-scheme'] - 持久化使用的 key
|
||||
* @prop {boolean} [disableTransition=true] - 禁用切换时的过渡 {@link https://paco.me/writing/disable-theme-transitions}
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {initOptions} options
|
||||
* @returns {{mode: () => string; setMode: (mode: string, window?: Window) => void; }}
|
||||
*/
|
||||
init: function (options) {
|
||||
var defaults = {
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
initialValue: 'auto',
|
||||
modes: {
|
||||
auto: '',
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
},
|
||||
storage: localStorage,
|
||||
storageKey: 'color-scheme',
|
||||
disableTransition: true,
|
||||
};
|
||||
|
||||
var opts = $.extend(true, {}, defaults, options);
|
||||
|
||||
// 当前颜色模式
|
||||
var state;
|
||||
// 系统颜色模式
|
||||
var system;
|
||||
// 初始化 storage
|
||||
var store =
|
||||
opts.storageKey == null
|
||||
? opts.initialValue
|
||||
: (function () {
|
||||
var v = opts.storage.getItem(opts.storageKey);
|
||||
if (!v) {
|
||||
opts.storage.setItem(opts.storageKey, opts.initialValue);
|
||||
return opts.initialValue;
|
||||
}
|
||||
return v;
|
||||
})();
|
||||
|
||||
/**
|
||||
* 更新 HTML 属性值
|
||||
* @param {String} selector
|
||||
* @param {String} attribute
|
||||
* @param {String} value
|
||||
* @param {Window} win
|
||||
*/
|
||||
var updateHTMLAttrs = function (selector, attribute, value, win) {
|
||||
win = win || defaultWindow;
|
||||
var document = win.document;
|
||||
var el = typeof selector === 'string' ? document.querySelector(selector) : undefined;
|
||||
if (!el) return;
|
||||
|
||||
/**@type HTMLStyleElement */
|
||||
var style;
|
||||
|
||||
if (opts.disableTransition) {
|
||||
style = document.createElement('style');
|
||||
style.appendChild(
|
||||
document.createTextNode(
|
||||
'*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
|
||||
)
|
||||
);
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
if (attribute === 'class') {
|
||||
var current = value.split(/\s/g);
|
||||
$.each(opts.modes, function (_, modeval) {
|
||||
$.each((modeval || '').split(/\s/g), function (_, v) {
|
||||
if (!v) return;
|
||||
if (current.indexOf(v) !== -1) {
|
||||
el.classList.add(v);
|
||||
} else {
|
||||
el.classList.remove(v);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
el.setAttribute(attribute, value);
|
||||
}
|
||||
|
||||
if (opts.disableTransition) {
|
||||
// 调用 getComputedStyle 强制浏览器重绘
|
||||
// @ts-expect-error 未使用的变量
|
||||
var _ = window.getComputedStyle(style).opacity;
|
||||
document.head.removeChild(style);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新状态
|
||||
* @param {String} mode - 颜色模式
|
||||
*/
|
||||
var updateState = function (mode) {
|
||||
store = opts.storageKey == null ? mode : opts.storage.getItem(opts.storageKey);
|
||||
state = store === 'auto' ? system : store;
|
||||
};
|
||||
|
||||
var prefersColorScheme = function () {
|
||||
var isSupported = window && 'matchMedia' in window && typeof window.matchMedia === 'function';
|
||||
if (!isSupported) {
|
||||
system = 'light';
|
||||
onChanged(system);
|
||||
return;
|
||||
}
|
||||
var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
var update = function () {
|
||||
var preferredDark = darkThemeMediaQuery.matches;
|
||||
system = preferredDark ? 'dark' : 'light';
|
||||
onChanged(system);
|
||||
};
|
||||
update();
|
||||
if ('addEventListener' in darkThemeMediaQuery) {
|
||||
darkThemeMediaQuery.addEventListener('change', update);
|
||||
} else {
|
||||
// @ts-ignore 已弃用
|
||||
darkThemeMediaQuery.addListener(update);
|
||||
}
|
||||
};
|
||||
|
||||
prefersColorScheme();
|
||||
|
||||
function defaultOnChanged(win) {
|
||||
updateHTMLAttrs(opts.selector, opts.attribute, opts.modes[state], win);
|
||||
}
|
||||
|
||||
function onChanged(mode, win) {
|
||||
updateState(mode);
|
||||
if (opts.onChanged) {
|
||||
opts.onChanged(state, defaultOnChanged);
|
||||
} else {
|
||||
defaultOnChanged(win);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
status:system,
|
||||
setMode: function (mode, win) {
|
||||
if (opts.storageKey) {
|
||||
opts.storage.setItem(opts.storageKey, mode);
|
||||
}
|
||||
onChanged(mode, win);
|
||||
},
|
||||
mode: function () {
|
||||
return state;
|
||||
},
|
||||
};
|
||||
},
|
||||
addStyle: function (id, cssStr) {
|
||||
var el = /** @type {HTMLStyleElement} */ (document.getElementById(id) || document.createElement('style'));
|
||||
if (!el.isConnected) {
|
||||
el.type = 'text/css';
|
||||
el.id = id;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent = cssStr;
|
||||
},
|
||||
};
|
||||
|
||||
return colorMode;
|
||||
});
|
||||
@@ -1,4 +1,15 @@
|
||||
define(["jquery", "tableSelect"], function ($, tableSelect) {
|
||||
define(["jquery", "tableSelect", "miniTheme"], function ($, tableSelect, miniTheme) {
|
||||
|
||||
//切换日夜模式
|
||||
window.onInitElemStyle = function () {
|
||||
miniTheme.renderElemStyle();
|
||||
$('iframe').each(function (index, iframe) {
|
||||
if (typeof iframe.contentWindow.onInitElemStyle == "function") {
|
||||
iframe.contentWindow.onInitElemStyle();
|
||||
}
|
||||
});
|
||||
};
|
||||
window.onInitElemStyle();
|
||||
|
||||
var form = layui.form,
|
||||
layer = layui.layer,
|
||||
|
||||
@@ -607,7 +607,6 @@
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item {
|
||||
color: #595959;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
@@ -617,10 +616,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item:after {
|
||||
color: #8c8c8c;
|
||||
right: 16px;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
|
||||
define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, miniTheme, miniTab) {
|
||||
define(["jquery", "miniMenu", "miniTheme", "miniTab", "colorMode"], function ($, miniMenu, miniTheme, miniTab, colorMode) {
|
||||
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
@@ -104,7 +104,7 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
|
||||
* @param clearUrl
|
||||
*/
|
||||
renderClear: function (clearUrl) {
|
||||
$('.layuimini-clear').attr('data-href',clearUrl);
|
||||
$('.layuimini-clear').attr('data-href', clearUrl);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -171,7 +171,7 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
|
||||
el.msExitFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oCancelFullScreen();
|
||||
}else if (el.mozCancelFullScreen) {
|
||||
} else if (el.mozCancelFullScreen) {
|
||||
el.mozCancelFullScreen();
|
||||
} else if (el.webkitCancelFullScreen) {
|
||||
el.webkitCancelFullScreen();
|
||||
@@ -243,6 +243,92 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
layui.form.on('switch(header-theme-mode)', function (data) {
|
||||
let checked = data.elem.checked;
|
||||
let mode = checked ? 'dark' : 'light';
|
||||
changeTheme(mode);
|
||||
});
|
||||
|
||||
/**
|
||||
* 浅色和暗色主题切换
|
||||
*/
|
||||
const theme = colorMode.init({
|
||||
onChanged(mode, defaultHandler) {
|
||||
const isAppearanceTransition =
|
||||
document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
|
||||
const isDark = mode === 'dark';
|
||||
//跟随windows系统主题色的变化而变化，但没法保存选择的元素风格
|
||||
// var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
// var preferredDark = darkThemeMediaQuery.matches;
|
||||
// var currMode = preferredDark ? 'dark' : 'light';
|
||||
// changeTheme(currMode);
|
||||
$('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
|
||||
|
||||
if (!isAppearanceTransition) {
|
||||
defaultHandler();
|
||||
} else {
|
||||
rippleViewTransition(isDark, function () {
|
||||
// 动画需要
|
||||
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
|
||||
defaultHandler();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//切换特效
|
||||
function rippleViewTransition(isDark, callback) {
|
||||
// 移植自 https://github.com/vuejs/vitepress/pull/2347
|
||||
// 支持 Chrome 111+
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const transition = document.startViewTransition(function () {
|
||||
callback && callback();
|
||||
});
|
||||
transition.ready.then(function () {
|
||||
var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? clipPath : [...clipPath].reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//改变主题
|
||||
function changeTheme(mode) {
|
||||
switch (mode) {
|
||||
case 'dark':
|
||||
localStorage.setItem('layuiminiBgColorId', '1');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'dark');
|
||||
changeBgColor(1);
|
||||
break;
|
||||
case 'light':
|
||||
localStorage.setItem('layuiminiBgColorId', '0');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'normal');
|
||||
changeBgColor(0);
|
||||
break
|
||||
}
|
||||
window.onInitElemStyle()
|
||||
}
|
||||
|
||||
//改变配色
|
||||
function changeBgColor(id) {
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', id);
|
||||
miniTheme.render({
|
||||
bgColorDefault: id,
|
||||
listen: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理
|
||||
*/
|
||||
@@ -289,14 +375,14 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin:"popup-tips",
|
||||
success:function (el) {
|
||||
var left = $(el).position().left - 10 ;
|
||||
$(el).css({ left:left });
|
||||
skin: "popup-tips",
|
||||
success: function (el) {
|
||||
var left = $(el).position().left - 10;
|
||||
$(el).css({left: left});
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
@@ -345,6 +431,5 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
|
||||
};
|
||||
|
||||
|
||||
|
||||
return miniAdmin;
|
||||
});
|
||||
@@ -41,7 +41,7 @@ define(["jquery"], function ($) {
|
||||
headerRightBg: '#23262e', //头部右侧背景色
|
||||
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightChildColor: '#ffffff', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
@@ -51,9 +51,9 @@ define(["jquery"], function ($) {
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuBgThis: '#484849', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#23262e', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgba(255,255,255,.9)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#23262e', //tab选项卡选中颜色,
|
||||
},
|
||||
@@ -272,7 +272,7 @@ define(["jquery"], function ($) {
|
||||
render: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || false;
|
||||
options.listen = options.listen || false;
|
||||
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
|
||||
var bgcolorId = localStorage.getItem('layuiminiBgColorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
|
||||
bgcolorId = options.bgColorDefault;
|
||||
}
|
||||
@@ -280,6 +280,21 @@ define(["jquery"], function ($) {
|
||||
if (options.listen) miniTheme.listen(options);
|
||||
},
|
||||
|
||||
renderElemStyle(elemStyleDefault) {
|
||||
elemStyleDefault = elemStyleDefault || 'light';
|
||||
let elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = elemStyleDefault;
|
||||
let themeModeEle = $('input[name=theme-mode]')
|
||||
if (themeModeEle.length > 0) {
|
||||
if (elemStyleName == 'dark') {
|
||||
themeModeEle.prop('checked', true);
|
||||
} else {
|
||||
themeModeEle.prop('checked', false);
|
||||
}
|
||||
layui.form.render('checkbox', 'header-theme-mode');
|
||||
}
|
||||
miniTheme.buildBodyElemStyle(elemStyleName);
|
||||
},
|
||||
/**
|
||||
* 构建主题样式
|
||||
* @param bgcolorId
|
||||
@@ -386,7 +401,85 @@ define(["jquery"], function ($) {
|
||||
'}\n';
|
||||
$('#layuimini-bg-color').html(styleHtml);
|
||||
},
|
||||
configElemStyle() {
|
||||
var listElemStyle = [
|
||||
{
|
||||
title: '标准',
|
||||
className: 'normal'
|
||||
},
|
||||
{
|
||||
title: '原型',
|
||||
className: 'demo',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '科幻',
|
||||
className: 'sicfi'
|
||||
},
|
||||
{
|
||||
title: 'GTK',
|
||||
className: 'gtk'
|
||||
},
|
||||
{
|
||||
title: '像素',
|
||||
className: 'nes',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: 'WIN7',
|
||||
className: 'win7',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '拟物',
|
||||
className: 'neomorphic',
|
||||
|
||||
},
|
||||
{
|
||||
title: '暗黑',
|
||||
className: 'dark',
|
||||
defaultColorConfig: '1'
|
||||
|
||||
},
|
||||
]
|
||||
return listElemStyle;
|
||||
},
|
||||
buildBodyElemStyle(className) {
|
||||
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
|
||||
$.each(listElemStyle, function (index, item) {
|
||||
var classNameReal = 'elem-style-' + item.className;
|
||||
if ($('body').hasClass(classNameReal)) {
|
||||
$('body').removeClass(classNameReal);
|
||||
}
|
||||
})
|
||||
|
||||
$('body').addClass('elem-style-' + className)
|
||||
},
|
||||
buildElemStyleHtml(options) {
|
||||
var elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = options.elemStyleDefault;
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
var html = '';
|
||||
$.each(listElemStyle, function (key, val) {
|
||||
|
||||
if (typeof val.defaultColorConfig == 'undefined') {
|
||||
val.defaultColorConfig = '0'
|
||||
}
|
||||
|
||||
if (val.className === elemStyleName) {
|
||||
html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
} else {
|
||||
html += '<li id="' + val.className + '" class="style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
}
|
||||
html +=
|
||||
val.title +
|
||||
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
/**
|
||||
* 构建主题选择html
|
||||
* @param options
|
||||
@@ -394,7 +487,7 @@ define(["jquery"], function ($) {
|
||||
*/
|
||||
buildBgColorHtml: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
|
||||
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgColorId'));
|
||||
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
|
||||
var bgColorConfig = miniTheme.config();
|
||||
var html = '';
|
||||
@@ -457,12 +550,29 @@ define(["jquery"], function ($) {
|
||||
var bgcolorId = $(this).attr('data-select-bgcolor');
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
|
||||
sessionStorage.setItem('layuiminiBgColorId', bgcolorId);
|
||||
miniTheme.render({
|
||||
bgColorDefault: bgcolorId,
|
||||
listen: false,
|
||||
});
|
||||
});
|
||||
$('body').on('click', '[data-select-style]', function () {
|
||||
var elemStyleName = $(this).attr('data-select-style');
|
||||
|
||||
$(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
|
||||
|
||||
var defaultColorConfig = $(this).attr('data-default-color-config');
|
||||
|
||||
if (defaultColorConfig && defaultColorConfig.length > 0) {
|
||||
localStorage.setItem('layuiminiBgColorId', defaultColorConfig);
|
||||
|
||||
}
|
||||
|
||||
localStorage.setItem('layuiminiElemStyleName', elemStyleName);
|
||||
miniTheme.render({
|
||||
listen: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user