douyin/src/assets/less/custom.less

@import "color";
@import "variables";

.op0 {
  opacity: 0;
}

.global-notice {
  position: fixed;
  z-index: 9999;
  color: white;
  background: black;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10rem 18rem;
  border-radius: 3rem;
  font-size: 12rem;
  white-space: nowrap;
}

.row {
  padding: 0 @padding-page;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50rem;
  font-size: 14rem;

  &.no-active {
    &:active {
      background: @main-bg;
    }
  }

  &.active {
    &:active {
      background: @active-main-bg;
    }
  }

  &.no-padding {
    padding: 0;
  }

  &.border {
    border-bottom: 1px solid @line-color;
  }


  .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;

    img {
      margin-right: 10rem;
      width: 15rem;
    }
  }

  .right {
    max-width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: @second-text-color;

    img {
      margin-left: 5rem;
      width: 20rem;
    }
  }
}

.not-read {
  @width: 7rem;
  width: @width;
  height: @width;
  border-radius: 50%;
  background: @primary-btn-color;
}

.badge {
  font-size: 12rem;
  display: block;
  color: white;
  padding: 1rem 6rem;
  border-radius: 10rem;
  background: @primary-btn-color;
}

.badge2 {
  transform: scale(.9);
  font-size: 12rem;
  color: black;
  @width: 18rem;
  width: @width;
  height: @width;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: yellow;
}

p {
  padding: 0;
  margin: 0;
}

.line {
  height: 1rem;
  background: @line-color2;
  width: 100%;
}

.link {
  color: rgb(18, 100, 149);
}

.slide {
  height: 100%;
  width: 100%;
  transition: height .3s;
  position: relative;
  overflow: hidden;

  .slide-infinite {
    z-index: 1;
    margin-top: 0;
    transition: all .3s;
  }

  .slide-list {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
  }
}

.love-dbclick {
  position: absolute;
  @width: 90rem;
  width: @width;
  height: @width;

  &.left {
    animation: loveLeft 1.1s linear;
  }

  &.right {
    animation: loveRight 1.1s linear;
  }

  @scale: scale(1.2);
  @start-scale: scale(2.2);
  @rotate: 10deg;

  @keyframes loveLeft {
    0% {
      opacity: 0;
      transform: @start-scale rotate(0-@rotate);
    }
    10% {
      opacity: 1;
      transform: scale(1) rotate(0-@rotate);
    }
    15% {
      opacity: 1;
      transform: @scale rotate(0-@rotate);
    }
    40% {
      opacity: 1;
      transform: @scale rotate(0-@rotate);
    }
    100% {
      transform: translateY(-12rem) scale(2) rotate(0-@rotate);
      opacity: 0;
    }
  }
  @keyframes loveRight {
    0% {
      opacity: 0;
      transform: @start-scale rotate(0+@rotate);
    }
    10% {
      opacity: 1;
      transform: scale(1) rotate(0+@rotate);
    }
    15% {
      opacity: 1;
      transform: @scale rotate(0+@rotate);
    }
    40% {
      opacity: 1;
      transform: @scale rotate(0+@rotate);
    }
    100% {
      transform: translateY(-12rem) scale(2) rotate(0+@rotate);
      opacity: 0;
    }
  }
}

.pause-icon {
  width: 60rem;
  height: 60rem;
  opacity: 0.3;
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  color: white;
  animation: pause-animation 1.1s linear;

  @scale: scale(1.2);

  @keyframes pause-animation {
    0% {
      opacity: 0;
      transform: scale(2);
    }
    10% {
      opacity: 0.3;
      transform: @scale;
    }
    100% {
      transform: @scale;
      opacity: 0.3;
    }
  }
}

.base-page {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: auto;
  color: white;
  font-size: 14rem;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.space-between {
  justify-content: space-between;
}