@BrandColor: #409eff; @lightHover: #344658; @SuccessColor: #67c23a; @WarningColor: #e6a23c; @DangerColor: #f56c6c; @InfoColor: #909399; @MainText1: #303133; @MainText64: #30313364; @MainText2: #606266; @MainText3: #909399; @MainText4: #c0c4cc; @MainBorder1: #dcdfe6; @MainBorder2: #e4e7ed; @MainBorder3: #ebeef5; @MainBorder4: #f2f6fc; // 总是生效样式 * { user-select: none; -moz-user-select: none; } .el-checkbox__inner { border-color: @MainText2; background-color: transparent; } .el-table, .control-table { box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; } .el-dropdown:hover { cursor: pointer; color: @BrandColor; } .iframeTargetBlank { height: 100%; display: flex; justify-content: center; align-items: center; } .playerClose { position: absolute; right: 0.3rem; top: 0.3rem; font-size: 0.85rem; padding: 0.3rem 0.5rem; background-color: @MainText2; color: @MainText4; border-radius: 1rem; opacity: 0.8; z-index: 999; } .playerClose:hover { opacity: 1; cursor: pointer; font-weight: bold; color: @DangerColor; } .liveMainBox { width: 100%; height: calc(100vh - 20rem); display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: space-around; } .el-submenu__title { text-align: left; padding-right: 2.5rem; font-weight: 600; } .el-menu { .el-link { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } } .loginMain { display: flex; justify-content: center; align-items: center; // overflow: hidden; box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); &_left { width: 600px; height: 691px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background-color: #fff; } } .login-logo { width: 300px; height: 225px; border-radius: 50%; filter: url(#change) invert(100%); user-select: none; } img { -webkit-user-drag: none; } .wrap-login-box { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; align-content: center; margin-bottom: 1rem; } .buttons-box, .playerClose { display: none; transition: all 0.5s; } .play-box:hover { .buttons-box, .playerClose { display: -webkit-box; display: -ms-flexbox; display: flex; } } #loginSvg { display: none; } /* -----------------------------------------------------------暗黑模式 */ .light, .light ~ *:not(.el-message-box__wrapper, .el-tooltip__popper) { animation: all 0.5s; .wrap-login-box { color: @MainText3; } .login-logo { filter: url(#change); } // 进度条 // #nprogress .bar { // background: red !important; //自定义颜色 // } .record-list { background-color: @MainText1; .el-tag { background-color: @MainText1; } .el-tag--danger { color: @BrandColor; border-color: @BrandColor; box-shadow: 0 2px 12px 0 @lightHover; } } .task-list { background-color: @MainText1; .task-list-item-box { color: @MainText4; } } .el-page-header { .el-page-header__content { color: @MainText4; } } .record-list-box-box { background-color: transparent; .record-list-box { background-color: @MainText1; color: @MainText4; } } .el-time-spinner, .el-time-panel__footer, .has-seconds { background-color: @MainText1; color: @MainText4; .cancel { color: @MainText4; } .active { color: @BrandColor; } } .el-result { .el-result__title p { color: @MainText4; } .el-result__subtitle p { color: @MainText3; } } .pageLoading { margin-top: 1rem; width: 100%; height: calc(100% - 2rem); background-color: @MainText1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; &_text { color: @MainText4; font-size: 24px; font-weight: bold; padding-bottom: 20px; } } .el-loading-mask { background-color: @MainText64; } .notFound { margin-top: 1rem; width: 100%; height: calc(100% - 2rem); background-color: @MainText1; display: flex; flex-direction: column; justify-content: center; align-items: center; &_title { color: @DangerColor; font-size: 120px; font-weight: bold; text-shadow: 3px 3px 5px @InfoColor; } .el-divider__text { background-color: @MainText1 !important; } &_icon { color: @InfoColor; font-size: 20px; font-weight: bold; } &_content { color: @MainText4; font-size: 24px; font-weight: bold; padding-bottom: 20px; } } .wrap-login100 { background-color: #00000033; box-shadow: 0 5px 10px 0px rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 5px 10px 0px rgba(255, 255, 255, 0.1); -webkit-box-shadow: 0 5px 10px 0px rgba(255, 255, 255, 0.1); -o-box-shadow: 0 5px 10px 0px rgba(255, 255, 255, 0.1); -ms-box-shadow: 0 5px 10px 0px rgba(255, 255, 255, 0.1); > span { color: @MainBorder4; } } *::not(.wrap-login100) input { background-color: @MainText2; color: @MainBorder4; &:disabled { background-color: @MainText1 !important; border-color: @MainText2 !important; color: @MainText2 !important; } } .main_top { background-color: @MainText1; color: @MainText4; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .container-login100 { transition: all 0.5s; background-image: url("../images/mainLightBack.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } #UiHeader { background-color: @MainText1; color: @MainText4; box-shadow: inset @MainText4 0px -1px 0px 0px; } .el-dropdown { color: @MainText4; } .el-main { background: @MainText2; } .el-col > div { background: @MainText1; } .el-table, .el-table tr { background: @MainText3; border-color: @MainText1; th { background-color: @MainText1; } } .el-table th, .el-table td { border-color: @MainText2; } .el-table td { color: @MainBorder4; } .el-tabs, .el-tabs__nav-wrap { ::after { background-color: @MainText2; } background-color: @MainText1; border-color: @MainText3; color: @MainText4; .el-tabs__nav { border-color: @MainText3; color: @MainText4; } .el-tabs__item { color: @MainText4; border-color: @MainText3; :hover { color: @BrandColor; } } .is-active { color: @BrandColor; background-color: @MainText2 !important; } } textarea { background-color: @MainText2; color: @MainBorder4; } .el-textarea.is-disabled .el-textarea__inner { background-color: @MainText3; color: @MainBorder4; } table tr:hover td, .hover-row tr, .hover-row td { background-color: @MainText2 !important; } .el-dialog__wrapper > div { background-color: @MainText1; color: @MainText4; border-color: @MainText3; .el-dialog__title { color: @MainText4; } } // 夜间-节点列表卡片样式 .server-card { background-color: @MainText1 !important; border-color: @MainText3; color: @MainText4; } .chooseChannelMain, .el-tree { background-color: @MainText1; color: @MainText4; .el-tree-node { :hover { background-color: @lightHover; color: @MainText3; } :active { background-color: @lightHover; color: @MainText3; } } .el-tree-node:focus > .el-tree-node__content { background-color: @MainText1 !important; } &_tabs { background-color: @MainText1; color: @MainText4; } } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: @MainText2; color: @MainText4; } .el-submenu__title, .el-icon-location-outline { background-color: @MainText1; color: @MainText4; &:active { background-color: @MainText1; } &:hover { background-color: @lightHover; .el-icon-location-outline { background-color: @lightHover; } } } #devicePosition { color: @MainText4; .el-menu { background-color: @MainText1; color: @MainText4; } .el-header, .el-footer { color: @MainText4; } } & ~ .el-select-dropdown, & ~ ul, & ~ .el-notification, & ~ .el-popover, & ~ div .el-message-box, & ~ .el-popper { background-color: @MainText1; border-color: @MainText3; color: @MainText4; } & ~ .el-select-dropdown { // 内部下拉框样式 .is-disabled { color: @MainText3; } &__item { background-color: @MainText2; color: @MainText4; } .hover { background-color: @MainText2; color: @MainText4; } } .el-input-number { .el-input-number__decrease, .el-input-number__increase { background-color: @MainText1; i { color: @MainText3; } :hover i { color: @MainText4; } } } .in-range { div { background-color: @MainText2 !important; color: @MainText4; } } .el-picker-panel__footer, .el-scrollbar__view .el-time-spinner__list, .el-picker-panel__sidebar { background-color: @MainText1 !important; color: @MainText4 !important; } .el-range-separator { color: @MainText4 !important; } .el-range-input { background-color: @MainText1 !important; color: @MainText4 !important; } .el-drawer, .el-date-editor, .el-picker-panel .el-input, .el-input::-webkit-scrollbar-track, .el-input__inner { background-color: @MainText1 !important; color: @MainText4 !important; } // 夜间-连级、下拉框样式 & ~ .el-popper ul, & ~ ul { li { color: @MainText4; } li:hover, .el-dropdown-menu__item:hover, .in-active-path { background-color: @MainText2; color: @BrandColor; } .popper__arrow::after { border-bottom-color: @MainText1 !important; } } // 夜间-通知样式 & ~ .el-notification, & ~ .el-popover { .el-descriptions__title { color: @MainText4; } .is-bordered-label { background-color: @MainText2; color: @MainText3; } .el-descriptions__body { background-color: @MainText3; color: @MainText4; } .el-notification__ { &title { color: @MainText4; } &content { color: @MainText3; } } } // 夜间-消息提示样式 & ~ div { .el-message-box { .el-message-box__header .el-message-box__title { color: @MainText4; } } li:hover, .el-dropdown-menu__item:hover { background-color: @MainText2 !important; } .popper__arrow::after { border-bottom-color: @MainText1 !important; } } // 夜间-分页样式 .el-pagination { &__total { color: @MainText4; } li { background-color: @MainText1; } button { background-color: @MainText2; } } } /* -----------------------------------------------------------明亮模式 */ .dark { .notFound { user-select: none; margin-top: 1rem; width: 100%; height: calc(100% - 2rem); background-color: @MainBorder4; display: flex; flex-direction: column; justify-content: center; align-items: center; &_title { color: @DangerColor; font-size: 120px; font-weight: bold; text-shadow: 3px 3px 5px @InfoColor; } .el-divider__text { background-color: @MainBorder4 !important; } &_icon { color: @InfoColor; font-size: 20px; font-weight: bold; } &_content { color: @MainText1; font-size: 24px; font-weight: bold; padding-bottom: 20px; } } .main_top { background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .container-login100 { transition: all 0.5s; background-image: url("../images/mainBack.jpg"); background-repeat: no-repeat; background-size: 100% 100%; position: relative; } #UiHeader { background-color: #ffffff; box-shadow: inset @MainText2 0px -1px 0px 0px; color: @MainText1; .el-dropdown { color: @MainText1; } } .el-main { background: rgb(240, 243, 249); } .chooseChannelMain, .el-tree { background-color: #ffffff; &_tabs { background-color: #ffffff; } } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: #ffffff; } #devicePosition { .el-menu { background-color: #ffffff; } } }