ulthon/ulthon_admin
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_admin.git synced 2026-07-08 11:02:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

升级最新layui2.7；完善科幻风样式；

Browse Source
This commit is contained in:
augushong
2022-07-01 23:11:32 +08:00
parent 8bbce5e2ba
commit ec7f8a7479
27 changed files with 619 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
public/static/common/css/theme/_sicfi.scss
View File

@@ -1,8 +1,3 @@
& {
background-color: rgb(2, 17, 20);
color : rgb(126, 252, 246);
}
// 通常用于背景色
$black-color :rgb(2, 17, 20);
// 通常用于字体颜色
@@ -11,13 +6,28 @@ $main-color :rgb(126, 252, 246);
$less-main-color:rgb(6, 216, 215);
// 通常用于激活状态,通常跟背景色搭配
$cover-color :rgba(62, 251, 251, 0.05);
$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;
}
@@ -29,10 +39,11 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
padding-right : 10px;
position : relative;
background-color: transparent;
border : unset;
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 : '';
@@ -70,6 +81,7 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
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);
@@ -80,6 +92,7 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
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);
@@ -90,21 +103,39 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
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: rgba(126, 252, 246, 0.05);
background: $black-color;
color : $main-color;
thead tr {
background-color: rgba(126, 252, 246, 0.15);
tr {
background-color: $cover-color;
}
td {
@@ -126,9 +157,23 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
}
.layui-table-tool .layui-inline[lay-event] {
color : $main-color;
border-color: $main-color;
clip-path : $box-shape;
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 {
@@ -229,6 +274,295 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
background-color: $main-color !important;
}
.layui-laypage .layui-laypage-curr em{
.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 .layui-form-select dl dd.layui-this {
background-color: $main-color !important;
color : $black-color;
}
.layuimini-container .table-search-fieldset {
color : $main-color;
border-color: $less-main-color;
}
.layui-form-select dl {
color: $black-color;
}
.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-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-notice:hover {
background-color: $active-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 {
background-color: $cover-color;
color : $main-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;
}
.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;
}