802 lines
15 KiB
SCSS
802 lines
15 KiB
SCSS
// 通常用于背景色
|
|
$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;
|
|
} |