gb28181_stream_media_web_ui/static/css/main.less

@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;
    }
  }
}