| | |
| | | .mk-white { |
| | | > .flex-container { |
| | | > .header-container { |
| | | background: #ffffff; |
| | | color: #000000; |
| | | box-shadow: 0 2px 8px #f0f1f2; |
| | | // 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: #000000; |
| | | color: $font1; |
| | | } |
| | | > .header-menu { |
| | | li { |
| | | span { |
| | | color: #000000; |
| | | color: $font1; |
| | | } |
| | | |
| | | &:hover { |
| | | span { |
| | | color: #1890ff; |
| | | border-bottom: 4px solid #1890ff; |
| | | color: $color6; |
| | | border-bottom: 4px solid $color6; |
| | | } |
| | | } |
| | | &.active { |
| | | span { |
| | | color: #1890ff; |
| | | border-bottom: 4px solid #1890ff; |
| | | color: $color6; |
| | | border-bottom: 4px solid $color6; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | > .header-setting span { |
| | | color: #000000; |
| | | } |
| | | > .header-edit-box .dragdashboard { |
| | | background: #ffffff; |
| | | } |
| | | } |
| | | > .side-menu { |
| | | border-right: 1px solid #d9d9d9; |
| | | background: #ffffff; |
| | | background: $bg1; |
| | | > .ant-menu { |
| | | background: #ffffff; |
| | | background: $bg1; |
| | | > .ant-menu-submenu { |
| | | color: #000000; |
| | | background: #ffffff; |
| | | color: $font1; |
| | | background: transparent; |
| | | > .ant-menu-submenu-title { |
| | | background: #ffffff; |
| | | &:hover { |
| | | color: #1890ff; |
| | | color: $font1; |
| | | } |
| | | > .ant-menu-submenu-arrow:before { |
| | | background: #000000; |
| | | background: $font1; |
| | | } |
| | | > .ant-menu-submenu-arrow:after { |
| | | background: #000000; |
| | | background: $font1; |
| | | } |
| | | } |
| | | > .ant-menu-sub { |
| | | background: #ffffff; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset; |
| | | background: transparent; |
| | | box-shadow: none; |
| | | .ant-menu-item { |
| | | border-bottom: 1px solid #d9d9d9; |
| | | // background-color: #c4ebfd; |
| | | a { |
| | | color: #000000; |
| | | color: $font2; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | > .ant-menu-submenu.ant-menu-submenu-open { |
| | | color: #1890ff; |
| | | > .ant-menu-submenu-title { |
| | | background: $bg2; |
| | | } |
| | | } |
| | | } |
| | | // .ant-menu-inline.ant-menu-sub { |
| | | // background: #ffffff; |
| | | // color: #000000; |
| | | // } |
| | | } |
| | | > .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); |
| | | } |