thing_web/public/cdn/theme/mobile.less

//========================= base.less 开始 ==============================//
//定义基础色

//主色

body {
  --color-primary: #409eff;
  --color-primary-light: rgb(64 158 255 / 8%);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


@--color-primary: ~ 'var(--color-primary)';
@--color-primary-light: ~ 'var(--color-primary-light)';

@text: #595959;
@text-2: #8c8c8c;

//导航菜单
@dark-text: rgb(255 255 255 / 66%);
@dark-text-active: #eee;
@dark-bg: #162E5A;
@dark-bg-active: @--color-primary;

@light-text: @text;
@light-text-active: @--color-primary;
@light-bg: @text-regular-color;
@light-bg-active: @--color-primary-light;

@primary-text: rgb(255 255 255 / 66%);
@primary-text-2: rgb(255 255 255 / 65%);
@primary-text-active: @text-regular-color;
@primary-bg: @--color-primary;
@primary-bg-light: @--color-primary-light;
@primary-bg-active: @--color-primary-light;

//
.el-button--primary {
  color: #ffffff;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

@text-regular-color: #FFF;
@input-bg-color: #0C2852;
@border-color: #274778;
@tr-bg-color: rgb(23, 37, 70);
@tr-hover-bg-color: rgba(64, 66, 71, 0.5);
@text-color: #D7D7D7;
@selected-bg-color: rgba(0, 39, 137, 0.5);
@check-box-background-color: #274778;
@check-box-checked-background-color: #274778;
//@check-box-border-color: #0B6CA3;
@check-box-border-color: #0594d9;
@block-bg-color: #172546;
@block-active-bg-color: "#162E5A";
@view-ctx-bg-color: #121d3d;
@rr-view-tab-bg: #193567;
@el-tabs-item-color: rgba(255, 255, 255, 0.9);
@el-tabs-item-isActive-color: rgba(255, 255, 255, 0.9);
@el-tabs-item-isActive-bg: #182652;
@select-dropdown-hover-bg: rgb(23, 37, 70);
@el-date-table-td-disabled: #232e3f;
@el-radio-button__inner: transparent;
@monitor-usage-chart-border-color: "#274778";
@iot-relation-view-bg: #293e6b;
@list-item-detail-table-td: #182246;
@list-item-detail-table-td-odd: #242e50;
@device-board-setting-bg: #112043;
@el-tree-node-hover-bg-color: #172546;


.rr-view-ctx {
  background: @view-ctx-bg-color;
  height: calc(100% - 39px);

  .rr-view-ctx-card {
    position: relative;
    height: 100%;
    background: @block-bg-color;
    overflow: auto;
  }
  ::v-deep .el-card__body {
    position: relative;
    height: 100%;
  }
}


.rr-view-tab .el-tabs__nav .el-tabs__item {
  color: @el-tabs-item-color;

  &:hover {
    color: @text-regular-color;
  }

  &.is-active {
    color: @el-tabs-item-isActive-color;
    background: @el-tabs-item-isActive-bg !important;
  }
}


.el-input {
  input.el-input__inner {
    background: @input-bg-color !important;
    //border: 1px solid #DCDFE6;
    color: @text-color !important;

    &::placeholder {
      color: @text-2;
    }
  }

  .el-input__wrapper {
    padding: 0 !important;
  }

  --el-disabled-text-color: @text-2 !important;
  --el-input-border-color: @border-color !important;
  --el-disabled-border-color: @border-color !important;
}



.el-input-number {
  --el-bg-color: @input-bg-color !important;
  --el-border-base: var(--el-border-width-base) var(--el-border-style-base) @border-color !important;
  --el-text-color-regular: @text-regular-color !important;

}

.el-select-v2__wrapper {
  background: @input-bg-color !important;
  border-color: @border-color !important;

  --el-text-color-placeholder: @text-2 !important;
}

.el-select-dropdown__option-item {
  color: @text-color !important;
  --el-bg-color: @tr-bg-color !important;
  font-size: var(--el-font-size-base) !important;
}

.el-date-editor {
  input.el-range-input {
    background: @input-bg-color !important;
    //border: 1px solid #DCDFE6;
    color: @text-color !important;

    &::placeholder {
      color: @text-2;
    }
  }

  .el-range-separator {
    color: @text-2 !important;
  }

  --el-input-bg-color: @input-bg-color !important;
  --el-disabled-text-color: @text-2 !important;
  --el-input-border-color: @border-color !important;
  --el-disabled-border-color: @border-color !important;
}

.el-date-table td.disabled .el-date-table-cell {
  background: @el-date-table-td-disabled !important;
}

div.el-date-picker {
  --el-datepicker-text-color: @text-color !important;
  --el-datepicker-hover-text-color: var(--el-color-primary) !important;
}

.el-date-picker__header-label {
  color: @text-color !important;
}

textarea.el-textarea__inner {
  --el-input-bg-color: @input-bg-color !important;
  color: @text-regular-color !important;

  &::placeholder {
    color: @text-2;
  }

  --el-input-border-color: @border-color !important;
  --el-disabled-bg-color: @input-bg-color !important;

}


.el-select__popper .el-popper__arrow::before {
  background: @input-bg-color !important;
  border-color: @border-color !important;
}

.el-popper.is-light .el-popper__arrow::before {
  background: @input-bg-color !important;
}

.el-select-dropdown__item {
  color: @text-color !important;

  &:hover {
    background: @select-dropdown-hover-bg !important;
  }

  --el-bg-color: @tr-bg-color !important;

  &.selected {
    background: @tr-bg-color !important;

  }
}

.el-steps {
  --el-bg-color: @tr-bg-color !important;

  .el-step__title.is-process, .el-step__head.is-process {
    --el-text-color-primary: var(--el-color-primary);
  }

}

@el-table-thead-th-bg: #1F3059;
@el-table-cell-hover-bg: #24355e;
@el-table-row-striped-cell-bg: #1E2C4F;
@fixColumn-hover-bg: rgba(0, 39, 137, 1);
//.el-table {
//  border-radius: 6px;
//
//  thead th {
//    background: @el-table-thead-th-bg!important;
//    color: @text-color !important;
//    font-size: 16px;
//  }
//
//  .td.el-table__cell{
//    &:hover {
//      background: @el-table-cell-hover-bg !important;
//      //background: rgba(30, 44, 79, 1) !important;
//    }
//  }
//
//  tr.el-table__row--striped td.el-table__cell {
//    background: @el-table-row-striped-cell-bg !important;
//
//  }
//
//  tr td.el-table-fixed-column--right {
//    background: @tr-bg-color !important;
//
//    &:hover {
//      background: @fixColumn-hover-bg !important;
//    }
//  }
//
//  .el-table__expand-icon {
//    color: var(--el-text-color-placeholder) !important;
//  }
//
//  .el-table-column--selection {
//    label.el-checkbox {
//      .el-checkbox__inner {
//        background: @check-box-background-color !important;
//        border-color: @check-box-border-color !important;
//      }
//    }
//    label.el-checkbox.is-checked {
//      .el-checkbox__inner {
//        background: @check-box-checked-background-color !important;
//        border-color: @check-box-border-color !important;
//      }
//    }
//  }
//
//
//  --el-table-text-color: @text-color !important;
//  --el-table-border-color: @border-color !important;
//  --el-table-border: 1px solid @border-color !important;
//  --el-table-tr-bg-color: @tr-bg-color !important;
//  --el-table-bg-color: @tr-bg-color !important;
//  --el-table-row-hover-bg-color: @selected-bg-color !important;
//  --el-table-current-row-bg-color: @selected-bg-color !important;
//  --el-table-expanded-cell-bg-color: @tr-bg-color !important;
//}

@pager-active-color: #3B99F0;

//.el-pagination {
//  color: @text-color !important;
//
//  .btn-prev, .btn-next {
//    border: 1px solid @border-color;
//    border-radius: 4px;
//  }
//
//  .btn-prev {
//    margin-right: 5px;
//  }
//
//  ul.el-pager {
//    li {
//      border: 1px solid @border-color;
//      border-radius: 4px;
//
//      &:not(last-child) {
//        margin-right: 5px;
//      }
//
//      &:first-child {
//        margin-left: 5px;
//      }
//
//      &.active {
//        border-color: @pager-active-color;
//        color: @pager-active-color;
//      }
//    }
//
//    li.active + li {
//      border: 1px solid @border-color;
//    }
//  }
//
//  --el-pagination-bg-color: @tr-bg-color !important;
//  --el-text-color-regular: @text-color !important;
//  --el-pagination-button-color: @border-color !important;
//  --el-pagination-button-disabled-bg-color: @tr-bg-color !important;
//}

.el-loading-mask {
  background: @tr-bg-color !important;
}

@dialog-bg-color: #162E5A;
@dialog-header-bg: #234DAF;
@dialog-footer-border-top: 1px solid #1D3D77;
@dialog-el-input-border: 1px solid rgba(#1D3D77,0.1);
.el-dialog {
  --el-dialog-bg-color: @dialog-bg-color !important;

  .el-dialog__header {
    text-align: center;
    background: @dialog-header-bg;
    margin: 0 !important;
    padding: 16px 0 !important;
  }

  .el-dialog__title {
    color: @text-color;
  }

  .el-dialog__footer{
    border-top: @dialog-footer-border-top;
  }
  .el-dialog__headerbtn {
    top: 0;

    .el-dialog__close {
      color: @text-regular-color !important;
      &:hover{
        color: @check-box-border-color !important;
      }
    }
  }


  .el-input{

    border: @dialog-el-input-border !important;
  }
}

.el-form-item__label {
  color: @text-color !important;
}

.el-radio {
  --el-radio-text-color: @text-color !important;
}

.el-input-group__append {
  --el-bg-color: @tr-bg-color !important;
}

.el-upload--picture-card, .el-upload-list__item {
  background: @input-bg-color !important;
  border-color: @border-color !important;
}

.el-tabs--border-card {
  background: @tr-bg-color !important;
  --el-border-color-base: @border-color !important;

  .el-tabs__item {
    background: @tr-bg-color !important;
    border-color: @border-color !important;
  }
}

.el-tabs__nav {
  //border-color: @border-color !important;
}

.el-tabs__header {
  border-color: @border-color !important;
}

.el-tabs__item {
  border-left-color: @border-color !important;

  &.is-active {
    border-color: @border-color !important;
  }

  --el-text-color-primary: @text-color !important;
}

.el-button--text {
  --el-color-primary: @text-color;
}

.el-button{
  &.is-text{
    color: @text-color !important;
    &:hover{
      color: @--color-primary !important;
    }
  }
}

.el-tree {
  background: transparent !important;
  --el-tree-node-hover-bg-color: @el-tree-node-hover-bg-color !important;
  --el-tree-text-color: @text-color !important;

  .el-tree-node.is-current > .el-tree-node__content {
    background: @el-tree-node-hover-bg-color !important;
  }
}

hr {
  border-color: @border-color !important;
}

//.el-date-range-picker{
//  input.el-input__inner {
//    background: @text-regular-color !important;
//    color: var(--color-primary)!important;
//  }
//}

.el-popper.is-light {
  background: @input-bg-color !important;
  border-color: @border-color !important;
}

.el-dropdown__popper.el-popper[role=tooltip] {
  .el-dropdown-menu {
    background: @input-bg-color !important;

    .el-dropdown-menu__item {
      --el-text-color-regular: @text-color !important;

      :not(.is-disabled):focus {
        // background: @tr-bg-color !important;
      }
    }
  }
}

@as-same-bg-color-as-right: #213361;
@content-bg-color: #172647;
.el-collapse {
  --el-collapse-border-color: @as-same-bg-color-as-right !important;
  background: @as-same-bg-color-as-right !important;
  --el-collapse-header-bg-color: @as-same-bg-color-as-right !important;
  --el-collapse-content-bg-color: @content-bg-color !important;
  --el-collapse-header-text-color: @text-color !important;
  --el-collapse-content-text-color: @text-color !important;
  border-color: @as-same-bg-color-as-right !important;
}

@el-datepicker-inrange-bg-color: #1f3a63;
@el-datepicker-inrange-hover-bg-color: #4e71c4;
.el-picker-panel {
  background: @tr-bg-color !important;
  color: @text-color !important;

  .el-picker-panel__footer {
    background: @tr-bg-color !important;
  }

  //.el-date-range-picker__content,.el-date-range-picker__time-header,.el-picker-panel__footer{
  //  border-color: @border-color !important;
  //}
  --el-datepicker-inner-border-color: @border-color !important;
  --el-datepicker-border-color: @border-color !important;
  --el-datepicker-off-text-color: @text-2 !important;
  --el-datepicker-header-text-color: @text-color !important;
  --el-datepicker-icon-color: @text-color !important;
  --el-datepicker-inrange-bg-color: @el-datepicker-inrange-bg-color !important;
  --el-datepicker-inrange-hover-bg-color: @el-datepicker-inrange-hover-bg-color!important;
  --el-datepicker-hover-text-color: @text-regular-color !important;
}

.el-drawer {
  --el-drawer-bg-color: @dialog-bg-color !important;

  .el-drawer__header {
    color: @text-color !important;
    border-color: @border-color;
  }
}

.el-checkbox {
  --el-checkbox-text-color: @text-color !important;
}

.el-color-picker__trigger {
  border-color: @border-color !important;
}

.el-color-picker__mask {
  background: transparent !important;
}

.el-radio-group {
  .el-radio-button {
    .el-radio-button__inner {
      background: @el-radio-button__inner !important;
      border-color: @border-color !important;
      color: @text-color !important;
    }
    &.is-active {
      .el-radio-button__inner {
        color: #ffffff !important
      }
    }

    .el-radio-button__original-radio:checked + .el-radio-button__inner {
      background: var(--el-color-primary) !important;
    }
  }
}

.el-button--text {
  background: transparent !important;
  border: none !important;
}

@drawer-header-bg: #2f5ecc;
@drawer-body-bg: #132e60;
@drawer-footer-bg: #132e60;
@drawer-body-border-bottom: 1px solid #234685;
.drawerOuter {
  inset: 50px 0 0 48% !important;

  .el-drawer__body {
    display: flex;
    flex-direction: column;
    background-color: @drawer-body-bg;
    border-bottom: @drawer-body-border-bottom;
  }

  .el-drawer__header {
    background-color: @drawer-header-bg;
    margin-bottom: 0px;
    padding-bottom: 20px;
  }

  .el-drawer__footer {
    background-color: @drawer-footer-bg;
  }
}
.drawerOuter.noInset {
  inset: 50px 0 0 0 !important;
}

.el-select-v2__placeholder{
  color: @text-regular-color !important;
}
.el-select-v2__placeholder.is-transparent {
  color: var(--el-text-color-placeholder) !important;
}
.el-select-v2__wrapper .el-select-v2__input-wrapper input {
  color: @text-color;
}
.el-select-dropdown__option-item {
  &.is-selected{
    background-color: var(--el-bg-color)!important;
  }
}
//============================== base.less 结束 ==========================//

@media only screen and (max-width: 768px) {
  .rr-header-action {
    display: flex !important;
  }
  .show-xs-only {
    display: block !important;
  }
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
}
@media only screen and (max-width: 992px) {
  .drawerOuter {
    inset: 50px 0 0 5% !important
  }
}
@media only screen and (min-width: 992px) {
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 1200px) and (max-width: 1920px) {
}
@media only screen and (max-width: 1920px) {
}
@media only screen and (min-width: 1920px) {
}

//
.ui-mobile {
  .rr-view-tab-wrap {
    left: 0 !important;
    transition: left 0s !important;
  }
  .rr-header-ctx-logo-img-wrap {
    display: none !important;
  }
}

.rr-sidebar-mobile {
  z-index: 9999 !important;
  &-inner {
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
.ui-sidebar-light .rr-sidebar-mobile {
  .el-drawer__body,
  .rr-header-ctx-logo-mobile {
    background: @light-bg !important;
  }
  .rr-header-ctx-logo-mobile {
    color: @light-text !important;
  }
}
.ui-sidebar-dark .rr-sidebar-mobile {
  .el-drawer__body,
  .rr-header-ctx-logo-mobile {
    background: @dark-bg !important;
  }
  .rr-header-ctx-logo-mobile {
    color: @dark-text !important;
  }
}
.ui-sidebarCollapse-true,
.ui-sidebarCollapse-false {
  .rr-sidebar-mobile {
    width: initial !important;
    .el-menu.rr-sidebar-menu {
      width: 230px !important;
      .el-menu-item,
      .el-sub-menu__title {
        a {
          display: inline-block !important;
        }
      }
    }
    .rr-header-ctx-logo.rr-header-ctx-logo-mobile {
      width: auto !important;
      .rr-header-ctx-logo-text {
        display: inline-block !important;
      }
    }

    .el-drawer,
    .el-drawer__body {
      box-shadow: none !important;
    }
  }
}