| | |
| | | // bg1 主背景色 |
| | | // bg2 次背景色 |
| | | // font1 主字体颜色 |
| | | // color1 1阶色 - 底色 |
| | | // color2 2阶色 |
| | | // color3 3阶色 |
| | |
| | | // 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: $color6; |
| | | .plat-name { |
| | | color: $font1; |
| | | } |
| | | } |
| | | .login-middle { |
| | | border-color: $color6; |
| | | .login-form-button { |
| | | background-color: $color6; |
| | | border-color: $color6; |
| | | } |
| | | .login-form-button[disabled] { |
| | | background-color: $color5; |
| | | border-color: $color5; |
| | | } |
| | | button.vercode { |
| | | color: $color6; |
| | | } |
| | | .login-way-wrap { |
| | | .login-way.active, .login-way:hover { |
| | | color: $color6; |
| | | } |
| | | } |
| | | .anticon-eye { |
| | | color: $color6; |
| | | } |
| | | } |
| | | .login-bottom { |
| | | color: $font1; |
| | | a { |
| | | color: $font1; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .menu-board { |
| | | .menu-wrap { |
| | | .title { |
| | | color: $color6; |
| | | } |
| | | .menu-detail { |
| | | div:hover { |
| | | color: $color5; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | @mixin viewstyle($color1, $color2, $color3, $color4, $color5, $color6, $color7) { |
| | | #root > .mk-main-view { |
| | | > .header-container { |
| | | background: $bg1; |
| | | color: $font1; |
| | | box-shadow: 0 1px 1px #d9d9d9; |
| | | |
| | | .header-setting span { |
| | | color: $font1; |
| | | } |
| | | > .header-collapse .anticon { |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | > .mk-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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | > .mk-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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | >.mk-tabview-wrap { |
| | | >.content-header { |
| | | >.ant-tabs { |
| | |
| | | .system-color { |
| | | color: $color6; |
| | | } |
| | | .system-background { |
| | | background: $color6; |
| | | border-color: $color6; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .ant-timeline.system { |
| | | .ant-timeline-item-tail { |
| | | border-color: $color2; |
| | |
| | | } |
| | | } |
| | | } |
| | | .ant-spin { |
| | | .ant-spin-dot-item { |
| | | background-color: $color6; |
| | | } |
| | | } |
| | | } |
| | | |
| | | body.hidden-split-line #root { // 去除登录页分割线 |
| | |
| | | } |
| | | } |
| | | |
| | | @mixin bgblack() { |
| | | #root > .mk-main-view { |
| | | > .header-container { |
| | | box-shadow: none; |
| | | > .header-menu { |
| | | li { |
| | | &:hover, &.active { |
| | | span { |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .header-menu::-webkit-scrollbar-track { |
| | | box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05); |
| | | border: 1px solid rgba(255, 255, 255, 0.07); |
| | | background: rgba(255, 255, 255, 255); |
| | | border-radius: 3px; |
| | | } |
| | | } |
| | | } |
| | | // 皮肤背景与字体颜色 |
| | | body[class*='-black'] { |
| | | --mk-sys-background: #000000; |
| | | --mk-sys-light-background: #434343; |
| | | --mk-sys-font-color: rgba(255, 255, 255, 0.85); |
| | | --mk-sys-light-font-color: rgba(255, 255, 255, 0.65); |
| | | } |
| | | body[class*='-white'] { |
| | | --mk-sys-background: #ffffff; |
| | | --mk-sys-light-background: #ffffff; |
| | | --mk-sys-font-color: rgba(0, 0, 0, 0.85); |
| | | --mk-sys-light-font-color: rgba(0, 0, 0, 0.65); |
| | | } |
| | | body[class*='mk-blue-'] { |
| | | --mk-sys-color: #1890ff; |
| | | --mk-sys-color5: #40a9ff; |
| | | @include viewstyle(#e6f7ff, #bae7ff, #91d5ff, #69c0ff, #40a9ff, #1890ff, #096dd9); |
| | | } |
| | | |
| | | body.mk-blue-black { |
| | | --mk-sys-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 { |
| | | --mk-sys-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 { |
| | | body[class*='mk-red-'] { |
| | | --mk-sys-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(); |
| | | --mk-sys-color5: #ff4d4f; |
| | | @include viewstyle(#fff1f0, #ffccc7, #ffa39e, #ff7875, #ff4d4f, #f5222d, #cf1322); |
| | | } |
| | | body.mk-red-white { |
| | | --mk-sys-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-red-black { |
| | | |
| | | body[class*='mk-orange-red-'] { |
| | | --mk-sys-color: #fa541c; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65), #fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d, #ad2102, #871400, #610b00); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #ff7a45; |
| | | @include viewstyle(#fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d); |
| | | } |
| | | body.mk-orange-red-white { |
| | | --mk-sys-color: #fa541c; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff2e8, #ffd8bf, #ffbb96, #ff9c6e, #ff7a45, #fa541c, #d4380d, #ad2102, #871400, #610b00); |
| | | } |
| | | body.mk-orange-black { |
| | | |
| | | body[class*='mk-orange-'] { |
| | | --mk-sys-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(); |
| | | --mk-sys-color5: #ffa940; |
| | | @include viewstyle(#fff7e6, #ffe7ba, #ffd591, #ffc069, #ffa940, #fa8c16, #d46b08); |
| | | } |
| | | body.mk-orange-white { |
| | | --mk-sys-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); |
| | | } |
| | | body.mk-orange-yellow-black { |
| | | |
| | | body[class*='mk-orange-yellow-'] { |
| | | --mk-sys-color: #faad14; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806, #ad6800, #874d00, #613400); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #ffc53d; |
| | | @include viewstyle(#fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806); |
| | | } |
| | | body.mk-orange-yellow-white { |
| | | --mk-sys-color: #faad14; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fffbe6, #fff1b8, #ffe58f, #ffd666, #ffc53d, #faad14, #d48806, #ad6800, #874d00, #613400); |
| | | } |
| | | body.mk-yellow-black { |
| | | |
| | | body[class*='mk-yellow-'] { |
| | | --mk-sys-color: #fadb14; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106, #ad8b00, #876800, #614700); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #ffec3d; |
| | | @include viewstyle(#feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106); |
| | | } |
| | | body.mk-yellow-white { |
| | | --mk-sys-color: #fadb14; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #feffe6, #ffffb8, #fffb8f, #fff566, #ffec3d, #fadb14, #d4b106, #ad8b00, #876800, #614700); |
| | | } |
| | | body.mk-yellow-green-black { |
| | | |
| | | body[class*='mk-yellow-green-'] { |
| | | --mk-sys-color: #a0d911; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305, #5b8c00, #3f6600, #254000); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #bae637; |
| | | @include viewstyle(#fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305); |
| | | } |
| | | body.mk-yellow-green-white { |
| | | --mk-sys-color: #a0d911; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fcffe6, #f4ffb8, #eaff8f, #d3f261, #bae637, #a0d911, #7cb305, #5b8c00, #3f6600, #254000); |
| | | } |
| | | body.mk-green-black { |
| | | |
| | | body[class*='mk-green-'] { |
| | | --mk-sys-color: #52c41a; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d, #237804, #135200, #092b00); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #73d13d; |
| | | @include viewstyle(#f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d); |
| | | } |
| | | body.mk-green-white { |
| | | --mk-sys-color: #52c41a; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #f6ffed, #d9f7be, #b7eb8f, #95de64, #73d13d, #52c41a, #389e0d, #237804, #135200, #092b00); |
| | | } |
| | | body.mk-cyan-black { |
| | | |
| | | body[class*='mk-cyan-'] { |
| | | --mk-sys-color: #13c2c2; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c, #006d75, #00474f, #002329); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #36cfc9; |
| | | @include viewstyle(#e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c); |
| | | } |
| | | body.mk-cyan-white { |
| | | --mk-sys-color: #13c2c2; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #e6fffb, #b5f5ec, #87e8de, #5cdbd3, #36cfc9, #13c2c2, #08979c, #006d75, #00474f, #002329); |
| | | } |
| | | body.mk-blue-purple-black { |
| | | |
| | | body[class*='mk-blue-purple-'] { |
| | | --mk-sys-color: #2f54eb; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4, #10239e, #061178, #030852); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #597ef7; |
| | | @include viewstyle(#f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4); |
| | | } |
| | | body.mk-blue-purple-white { |
| | | --mk-sys-color: #2f54eb; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #f0f5ff, #d6e4ff, #adc6ff, #85a5ff, #597ef7, #2f54eb, #1d39c4, #10239e, #061178, #030852); |
| | | } |
| | | body.mk-purple-black { |
| | | |
| | | body[class*='mk-purple-'] { |
| | | --mk-sys-color: #722ed1; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab, #391085, #22075e, #120338); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #9254de; |
| | | @include viewstyle(#f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab); |
| | | } |
| | | body.mk-purple-white { |
| | | --mk-sys-color: #722ed1; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #f9f0ff, #efdbff, #d3adf7, #b37feb, #9254de, #722ed1, #531dab, #391085, #22075e, #120338); |
| | | } |
| | | body.mk-magenta-black { |
| | | |
| | | body[class*='mk-magenta-'] { |
| | | --mk-sys-color: #eb2f96; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f, #9e1068, #780650, #520339); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #f759ab; |
| | | @include viewstyle(#fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f); |
| | | } |
| | | body.mk-magenta-white { |
| | | --mk-sys-color: #eb2f96; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff0f6, #ffd6e7, #ffadd2, #ff85c0, #f759ab, #eb2f96, #c41d7f, #9e1068, #780650, #520339); |
| | | } |
| | | body.mk-grass-green-black { |
| | | |
| | | body[class*='mk-grass-green-'] { |
| | | --mk-sys-color: #aeb303; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00, #5c6600, #374000, #151a00); |
| | | @include bgblack(); |
| | | --mk-sys-color5: #bfbf22; |
| | | @include viewstyle(#f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00); |
| | | } |
| | | body.mk-grass-green-white { |
| | | --mk-sys-color: #aeb303; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #f2efda, #e6de97, #d9d26c, #ccc845, #bfbf22, #aeb303, #838c00, #5c6600, #374000, #151a00); |
| | | } |
| | | body.mk-deep-red-black { |
| | | |
| | | body[class*='mk-deep-red-'] { |
| | | --mk-sys-color: #c32539; |
| | | @include viewstyle(#000000, #434343,rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65),#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c, #750b20, #4f0315, #29010c); |
| | | @include bgblack(); |
| | | } |
| | | body.mk-deep-red-white { |
| | | --mk-sys-color: #c32539; |
| | | @include viewstyle(#ffffff, #ffffff, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65), #fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c, #750b20, #4f0315, #29010c); |
| | | --mk-sys-color5: #cf4856; |
| | | @include viewstyle(#fff0f0, #f5cbcb, #e89b9e, #db7077, #cf4856, #c32539, #9c162c); |
| | | } |