// bg1 主背景色
|
// bg2 次背景色
|
// font1 主字体颜色
|
// color1 1阶色 - 底色
|
// color2 2阶色
|
// color3 3阶色
|
// color4 4阶色
|
// color5 5阶色
|
// color6 6阶色 - 主色系
|
// color7 7阶色
|
// color8 8阶色
|
// color9 9阶色
|
// color10 10阶色
|
@mixin viewstyle($bg1, $bg2, $font1, $font2, $color1, $color2, $color3, $color4, $color5, $color6, $color7, $color8, $color9, $color10) {
|
.login-container {
|
background-color: $bg1;
|
.logo {
|
border-color: transparent;
|
.plat-name {
|
color: $font1;
|
}
|
}
|
.login-middle {
|
border-color: transparent;
|
.login-form-button {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
.login-form-button[disabled] {
|
background-color: $color5;
|
border-color: $color5;
|
}
|
button.vercode {
|
color: $color6;
|
}
|
.ant-tabs {
|
.ant-tabs-tab.ant-tabs-tab-active {
|
color: $color6;
|
}
|
.ant-tabs-tab:hover {
|
color: $color6;
|
}
|
}
|
}
|
.login-bottom {
|
color: $font1;
|
a {
|
color: $font1;
|
}
|
}
|
}
|
|
#root > .main-view {
|
> .header-container {
|
background: $bg1;
|
color: $font1;
|
box-shadow: 0 1px 1px #d9d9d9;
|
|
.header-setting span {
|
color: $font1;
|
}
|
> .header-collapse i {
|
color: $font1;
|
}
|
> .header-menu {
|
li {
|
span {
|
color: $font1;
|
}
|
|
&:hover {
|
span {
|
color: $color6;
|
border-bottom: 4px solid $color6;
|
}
|
}
|
&.active {
|
span {
|
color: $color6;
|
border-bottom: 4px solid $color6;
|
}
|
}
|
}
|
}
|
}
|
> .side-menu {
|
border-right: 1px solid #d9d9d9;
|
background: $bg1;
|
> .ant-menu {
|
background: $bg1;
|
> .ant-menu-submenu {
|
color: $font1;
|
background: transparent;
|
> .ant-menu-submenu-title {
|
&:hover {
|
color: $font1;
|
}
|
> .ant-menu-submenu-arrow:before {
|
background: $font1;
|
}
|
> .ant-menu-submenu-arrow:after {
|
background: $font1;
|
}
|
}
|
> .ant-menu-sub {
|
background: transparent;
|
box-shadow: none;
|
.ant-menu-item {
|
a {
|
color: $font2;
|
}
|
}
|
}
|
}
|
> .ant-menu-submenu.ant-menu-submenu-open {
|
> .ant-menu-submenu-title {
|
background: $bg2;
|
}
|
}
|
}
|
}
|
> .side-menu:not(.edit) {
|
> .ant-menu {
|
> .ant-menu-submenu {
|
> .ant-menu-sub {
|
.ant-menu-item.ant-menu-item-active, .ant-menu-item.ant-menu-item-selected {
|
background: $color5;
|
color: #ffffff;
|
a {
|
color: #ffffff;
|
}
|
}
|
}
|
}
|
}
|
}
|
>.content-box {
|
>.content-header {
|
>.ant-tabs {
|
>.ant-tabs-bar {
|
.ant-tabs-tab:hover {
|
color: $color5;
|
}
|
.ant-tabs-tab.ant-tabs-tab-active {
|
color: $color6;
|
}
|
.ant-tabs-ink-bar {
|
background-color: $color6;
|
}
|
}
|
}
|
}
|
.normal-data-table, .normal-custom-table {
|
table {
|
.ant-table-tbody {
|
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
background-color: $color1;
|
}
|
> tr.ant-table-row-selected:not(.background) td {
|
background-color: $color1;
|
}
|
> tr.ant-table-row-selected:not(.background):hover .ant-table-column-sort {
|
background-color: $color1;
|
}
|
> tr.mk-row-active:not(.background) td {
|
background-color: $color3;
|
}
|
> tr.ant-table-row-selected.mk-row-active:not(.background):hover .ant-table-column-sort {
|
background-color: $color3;
|
}
|
}
|
}
|
}
|
.top-search {
|
>.ant-row {
|
.ant-col.search-button {
|
.ant-btn:not(.ant-btn-primary):active, .ant-btn:not(.ant-btn-primary).active, .ant-btn:not(.ant-btn-primary):hover, .ant-btn:not(.ant-btn-primary):focus {
|
color: $color7;
|
border-color: $color7;
|
}
|
.ant-btn-primary {
|
background-color: $color6;
|
border-color: $color6;
|
}
|
}
|
}
|
}
|
.ant-tabs-nav .ant-tabs-tab-active {
|
color: $color6;
|
}
|
.ant-tabs-nav .ant-tabs-ink-bar {
|
background-color: $color6;
|
}
|
.ant-tabs-nav .ant-tabs-tab:active {
|
color: $color7;
|
}
|
.ant-tabs-nav .ant-tabs-tab:hover {
|
color: $color5;
|
}
|
.ant-pagination {
|
.ant-pagination-item-active {
|
border-color: $color6;
|
a {
|
color: $color6;
|
}
|
}
|
.ant-pagination-item:hover a {
|
color: $color6;
|
}
|
.ant-pagination-prev:hover .ant-pagination-item-link {
|
color: $color6;
|
}
|
.ant-pagination-next:hover .ant-pagination-item-link {
|
color: $color6;
|
}
|
}
|
}
|
}
|
|
// 系统样式修改
|
// .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
|
// background-color: $color1;
|
// }
|
// .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
|
// background-color: $color1;
|
// }
|
// // 复选框
|
// .ant-checkbox-checked .ant-checkbox-inner {
|
// background-color: $color6;
|
// border-color: $color6;
|
// }
|
// .ant-checkbox-checked::after {
|
// border: 1px solid $color6;
|
// }
|
// .ant-checkbox-indeterminate .ant-checkbox-inner::after {
|
// background-color: $color6;
|
// }
|
// .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
|
// border-color: $color6;
|
// }
|
// // 下拉框
|
// .ant-select-selection:hover {
|
// border-color: $color5;
|
// }
|
// .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
|
// border-color: $color5;
|
// box-shadow: 0 0 0 2px $color2;
|
// }
|
// // 切换
|
// .ant-switch-checked {
|
// background-color: $color6;
|
// }
|
// // 输入框
|
// .ant-input:hover {
|
// border-color: $color5;
|
// }
|
// .ant-input:focus, .ant-input:active {
|
// border-color: $color5;
|
// box-shadow: 0 0 0 2px $color2;
|
// }
|
// .ant-input-number-focused {
|
// border-color: $color5;
|
// box-shadow: 0 0 0 2px $color2;
|
// }
|
// .ant-input-number:hover, .ant-input-number:focus, .ant-input-number:active, .ant-input-number-input:hover, .ant-input-number-input:focus, .ant-input-number-input:active, .ant-input-number-focused:hover, .ant-input-number-focused:focus, .ant-input-number-focused:active {
|
// border-color: $color5;
|
// }
|
// .ant-input-number:focus, .ant-input-number:active {
|
// box-shadow: 0 0 0 2px $color2;
|
// }
|
// // 日历
|
// .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
|
// border-color: $color5;
|
// }
|
}
|
|
@mixin bgblack() {
|
#root > .main-view {
|
> .header-container {
|
box-shadow: none;
|
> .header-menu {
|
li {
|
&:hover, &.active {
|
span {
|
color: #ffffff;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
body.mk-blue-black {
|
--antd-wave-shadow-color: #1890ff;
|
@include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9, #0050b3, #003a8c, #002766);
|
@include bgblack();
|
}
|
body.mk-blue-white {
|
--antd-wave-shadow-color: #1890ff;
|
@include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9, #0050b3, #003a8c, #002766);
|
}
|
body.mk-red-black {
|
--antd-wave-shadow-color: #f5222d;
|
@include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322, #a8071a, #820014, #5c0011);
|
@include bgblack();
|
}
|
body.mk-red-white {
|
--antd-wave-shadow-color: #f5222d;
|
@include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322, #a8071a, #820014, #5c0011);
|
}
|
body.mk-orange-black {
|
--antd-wave-shadow-color: #fa8c16;
|
@include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08, #ad4e00, #873800, #612500);
|
@include bgblack();
|
}
|
body.mk-orange-white {
|
--antd-wave-shadow-color: #fa8c16;
|
@include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08, #ad4e00, #873800, #612500);
|
}
|
