shuangchuangzhou_2022/src/assets/theme/theme.less

.theme(@backcolor: #FF9700, @color: #FEA45F) {
  height: 100%;
  width: 100%;

  .primary {
    background-color: @backcolor;
  }

  .primarytxt {
    color: @backcolor;
  }

  .hoverTheme,
  .activeTheme {
    // border: 3px solid @backcolor!important;
  }

  .biankuang {
    position: relative;

    &.active,
    &:hover {

      &::before,
      &::after {
        background-image: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
      }

      &::after {
        content: "";
        top: 4px;
        height: 100%;
        width: 4px;
      }
    }


  }


  .fandb {
    background-color: rgba(@backcolor, 0.39);
  }


  .slidee {
    .active {
      position: relative;
      transition: .3s ease all;
      border-right: 4px solid @backcolor  !important;
      ;

      &::before,
      &::after {
        background-image: linear-gradient(186deg, @backcolor 0%, rgba(0, 144, 255, 0) 100%);
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
      }

      &::after {
        content: "";
        top: unset;
        bottom: 0;
      }
    }
  }


  .strmactive {
    position: relative;

    >div {
      position: relative;
      &::before,
      &::after {
        position: absolute;
        bottom: 0;
        content: '';
        width: 56px;
        left: -10px;
        height: 1px;
        background-color: @backcolor;
      }

      &::after {
        width: 2px;
        height: 18px;
        transform: rotate(40deg);
        left: unset;
        right: 4px;
        bottom: -2px;
      }
    }
  }

  .dakacir {
    background: linear-gradient(-44deg, @backcolor, @color);
    border-radius: 50%;
    position: relative;

    &::before {
      background: linear-gradient(-44deg, @backcolor, @color);
      opacity: 0.6;
      content: '';
      display: inline-block;
      width: 130%;
      height: 130%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      border-radius: 50%;
      z-index: -1;
    }
  }

  // @wh:90px;
  // .stoptour{
  //   width: @wh;
  //   height: @wh;
  //   border-radius: 16px;
  //   background: linear-gradient(47deg, @backcolor, @color);
  //   box-shadow: 10px 5px 10px rgba(0,0,0,0.16);
  // }

  .btmdashline {
    border-bottom: 2px dashed @backcolor;
  }

  .textActive {
    cursor: pointer;

    &:hover,
    &.active {
      color: @backcolor !important;
    }
  }

  .rmactive {
    position: relative;

    &::before,
    &::after {
      position: absolute;
      bottom: 3px;
      content: '';
      width: 52px;
      right: 0;
      height: 1px;
      background-color: @backcolor;
    }

    &::after {
      width: 2px;
      height: 20px;
      transform: rotate(-45deg);
      right: unset;
      left: 4px;
      bottom: 0;
    }
  }

  #drawer-container {
    height: 290px;

    #drawer {
      height: 130px;

      .frame-container {
        background-image: linear-gradient(90deg, rgba(@backcolor, 0.3) 0%, rgba(@backcolor, 0.56) 100%);

        &::before {
          content: "";
          top: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background-image: linear-gradient(211deg, @backcolor 0%, rgba(@backcolor, 0) 100%);
          position: absolute;
        }
      }
    }
  }

  .sign {
    >circle {
      fill: @backcolor  !important;
    }

    #orange_red1 {
      stop {
        stop-color: @backcolor  !important;
      }
    }
  }


  ::-webkit-scrollbar {
    width: 2px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    height: 20px;
    background-color: @backcolor;
    -webkit-border-radius: 4px;
    outline: 2px solid @color;
  }

  ::-webkit-scrollbar-thumb:hover {
    height: 20px;
    background-color: @backcolor;
    -webkit-border-radius: 4px;
  }

  @media screen and (max-width: 600px) {
    .slidee {
      .active {
        position: relative;
        transition: .3s ease all;
        border-right: none !important;

        &::after {
          background-image: linear-gradient(90deg, rgba(0, 144, 255, 0) 0%, @backcolor 50%, rgba(0, 144, 255, 0) 100%);
          content: "";
          width: 100%;
          height: 4px;
          position: absolute;
          bottom: 0;
          top: unset;
          left: 50%;
          transform: translateX(-50%);
          z-index: 99;
        }

        &::before {
          display: none;
        }
      }
    }
  }
}