wxlitian/miniprogram/app.less

@import './style/iconfont.less';
@import './style/hn.less';

/**app.wxss**/
// .container {
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: space-between;
//   padding: 200rpx 0;
//   box-sizing: border-box;
// }

// BEGIN GLOBAL

page {
  box-sizing: border-box;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 96rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);

  --td-error-color: #da3276;

  .t-button--danger {
    background-color: var(--td-error-color);
    border: 1px solid var(--td-error-color);
  }
}

.page-wrap {
  display: flex;
  height: 100vh;
  flex-direction: column;

  .page-content {
    flex: 1;
    overflow: auto;
  }

  .page-footer {
    flex-shrink: 0;
  }
}

.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

// END GLOBAL

// BEGIN TDESIGN

.t-button--primary {
  background: #333 !important;
  color: #fff;
}

.btn-gray-plain {
  &.t-button--text {
    color: #999;
  }
}

// END TDESIGN

// BEGIN BOOTSTRAP

.text-black {
  color: #333 !important;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.round {
  border-radius: 50%;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-light {
  font-weight: lighter;
}

.text-bold {
  font-weight: bold;
}

.text-single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gray-1 {
  color: #333 !important;
}

.gray-2 {
  color: #555 !important;
}

.gray-3 {
  color: #777 !important;
}

.gray-4 {
  color: #999 !important;
}

@fontsizes: 24rpx, 28rpx, 32rpx, 36rpx, 40rpx, 44rpx;
@fontsizeNames: xs, sm, md, lg, xl, xxl;

.FontSize(1,6);

.FontSize(@index, @maxIndex) when (@maxIndex >= @index) {
  @fontname: extract(@fontsizeNames, @index);
  .text-@{fontname} {
    font-size: extract(@fontsizes, @index) !important;
  }
  .FontSize(@index + 1, @maxIndex);
}

.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}

button.clear {
  padding: 0;
  line-height: 1;
  background: transparent;

  &::after {
    border: 0;
  }
}

image.clear {
  image-rendering: -moz-crisp-edges; /* Firefox        */
  image-rendering: -o-crisp-edges; /* Opera          */
  image-rendering: -webkit-optimize-contrast; /* Safari         */
  image-rendering: optimize-contrast; /* CSS3 Proposed  */
  image-rendering: crisp-edges; /* CSS4 Proposed  */
  // image-rendering: pixelated; /* CSS4 Proposed  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+           */
}

.imagewrap {
  clear: both;

  image {
    float: left;
  }
}

.image {
  width: 100%;
}

.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-center {
  align-items: center;
}
.align-items-stretch {
  align-items: stretch;
}
.align-items-start {
  align-items: flex-start;
}
.align-items-end {
  align-items: flex-end;
}

.align-self-stretch {
  align-self: stretch;
}

.justify-content-center {
  justify-content: center;
}
.justify-content-space-between {
  justify-content: space-between;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-end {
  justify-content: flex-end;
}

@sizes: 0px, 5px, 8px, 12px, 16px, 25px, 30px, 50px;

.MarginPadding(0, 8);
.MarginPadding(@index, @maxIndex) when (@maxIndex > @index) {
  .m-@{index} {
    margin: extract(@sizes, @index + 1) !important;
  }

  .mx-@{index} {
    margin-left: extract(@sizes, @index + 1) !important;
    margin-right: extract(@sizes, @index + 1) !important;
  }

  .my-@{index} {
    margin-top: extract(@sizes, @index + 1) !important;
    margin-bottom: extract(@sizes, @index + 1) !important;
  }

  .ml-@{index} {
    margin-left: extract(@sizes, @index + 1) !important;
  }

  .mr-@{index} {
    margin-right: extract(@sizes, @index + 1) !important;
  }

  .mt-@{index} {
    margin-top: extract(@sizes, @index + 1) !important;
  }

  .mb-@{index} {
    margin-bottom: extract(@sizes, @index + 1) !important;
  }

  .p-@{index} {
    padding: extract(@sizes, @index + 1) !important;
  }

  .px-@{index} {
    padding-left: extract(@sizes, @index + 1) !important;
    padding-right: extract(@sizes, @index + 1) !important;
  }

  .py-@{index} {
    padding-top: extract(@sizes, @index + 1) !important;
    padding-bottom: extract(@sizes, @index + 1) !important;
  }

  .pl-@{index} {
    padding-left: extract(@sizes, @index + 1) !important;
  }

  .pr-@{index} {
    padding-right: extract(@sizes, @index + 1) !important;
  }

  .pt-@{index} {
    padding-top: extract(@sizes, @index + 1) !important;
  }

  .pb-@{index} {
    padding-bottom: extract(@sizes, @index + 1) !important;
  }

  .MarginPadding(@index + 1, @maxIndex);
}

.van-row {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

.van-col {
  float: left;
  box-sizing: border-box;
}

.generate(24);
.generate(@n, @i: 1) when (@i =< @n) {
  .van-col--@{i} {
    width: @i * (100% / 24);
  }
  .van-col--offset-@{i} {
    margin-left: @i * (100% / 24);
  }
  .generate(@n, (@i + 1));
}

.gendelay(24);
.gendelay(@n, @i: 1) when (@i =< @n) {
  .delay-@{i} {
    animation-delay: @i * 0.1s !important;
  }
  .gendelay(@n, (@i + 1));
}

.defimage {
  width: 100%;
  height: 100%;
}

// END BOOTSTRAP

.emptyblock {
  background-size: 128rpx 128rpx;
  background-position: center center;
  position: relative;
  display: block;

  &.wait {
    background-color: #efefef;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjgwNTc0NTI3MDY2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxMDY3IiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04MTkuMiA0MTQuNzJjMC0xMC4yNC05LjIxNi0xOS40NTYtMTkuNDU2LTE5LjQ1Nkg1MzEuNDU2Yy0xMC4yNCAwLTE5LjQ1NiA5LjIxNi0xOS40NTYgMTkuNDU2djM3Ljg4OGMwIDEwLjI0IDkuMjE2IDE5LjQ1NiAxOS40NTYgMTkuNDU2aDE4Mi4yNzJMNTE2LjA5NiA3MTQuNzUyczAgMS4wMjQtMS4wMjQgMS4wMjRjLTIuMDQ4IDMuMDcyLTQuMDk2IDcuMTY4LTQuMDk2IDExLjI2NHYzNy44ODhjMCAxMC4yNCA5LjIxNiAxOS40NTYgMTkuNDU2IDE5LjQ1NmgyNjkuMzEyYzEwLjI0IDAgMTkuNDU2LTkuMjE2IDE5LjQ1Ni0xOS40NTZWNzI3LjA0YzAtMTAuMjQtOS4yMTYtMTkuNDU2LTE5LjQ1Ni0xOS40NTZINjIwLjU0NGwxOTQuNTYtMjM4LjU5MmMzLjA3Mi00LjA5NiA0LjA5Ni04LjE5MiAzLjA3Mi0xMy4zMTJ2LTQwLjk2ek01MTIgMjU5LjA3MmMwLTEwLjI0LTkuMjE2LTE5LjQ1Ni0xOS40NTYtMTkuNDU2SDIyNC4yNTZjLTEwLjI0IDAtMTkuNDU2IDkuMjE2LTE5LjQ1NiAxOS40NTZWMjk2Ljk2YzAgMTAuMjQgOS4yMTYgMTkuNDU2IDE5LjQ1NiAxOS40NTZoMTgyLjI3MkwyMDguODk2IDU1OS4xMDRzMCAxLjAyNC0xLjAyNCAxLjAyNGMtMi4wNDggMy4wNzItMy4wNzIgNi4xNDQtMy4wNzIgMTAuMjR2MzcuODg4YzAgMTAuMjQgOS4yMTYgMTkuNDU2IDE5LjQ1NiAxOS40NTZoMjY5LjMxMmMxMC4yNCAwIDE5LjQ1Ni05LjIxNiAxOS40NTYtMTkuNDU2di0zNy44ODhjMC0xMC4yNC05LjIxNi0xOS40NTYtMTkuNDU2LTE5LjQ1NkgzMTMuMzQ0bDE5NC41Ni0yMzguNTkyYzMuMDcyLTQuMDk2IDQuMDk2LTguMTkyIDMuMDcyLTEzLjMxMnYtMzkuOTM2eiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iMjEwNjgiPjwvcGF0aD48L3N2Zz4=)
      no-repeat;
    animation: fadeInOut 1s infinite;
  }

  &.nocontent {
    background-color: #efefef;
    background-image: #efefef
      url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjgwNTc2MjEwNDE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3Mzg3IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGQ9Ik05MTIuNjcyIDMwNi42MjRMNTEzLjY5NiA2NC45NmwtMTYwLjM1MiA5NmExNiAxNiAwIDAgMCAxMy44MjQgMjguNzA0bDIuNTkyLTEuMjggMTQzLjg0LTg2LjA4IDM2Ny4xMDQgMjIyLjMzNnYzNjIuMzA0bC0zNjcuMDQgMjIyLjMzNkwxNDQuOTYgNjg2LjkxMnYtNzguMzM2YTE2IDE2IDAgMCAwLTEzLjEyLTE1Ljc0NGwtMi44OC0wLjI1NmExNiAxNiAwIDAgMC0xNS43NDQgMTMuMTJsLTAuMjU2IDIuODh2OTYuNDQ4bDQwMC43MDQgMjQxLjY2NCAzOTkuMDQtMjQxLjY2NFYzMDYuNjI0eiIgZmlsbD0iIzVENkQ3RSIgb3BhY2l0eT0iLjMiIHAtaWQ9IjM3Mzg4Ij48L3BhdGg+PHBhdGggZD0iTTgyOS42IDg3MC4yMDhhMTYgMTYgMCAwIDEtMTkuNTIgNi4xNDRsLTIuNTYtMS4zNDQtMTM1LjA0LTg2Ljk0NCAwLjAzMi0yMTMuNjY0LTIyMy42OC0xNDUuOTJWMTU2LjY3MmwtNjUuOTg0LTQ0LjQxNmExNiAxNiAwIDAgMS01LjcyOC0xOS42OGwxLjQwOC0yLjU2YTE2IDE2IDAgMCAxIDE5LjY4LTUuNjk2bDIuNTI4IDEuMzc2IDgwLjA5NiA1My45MnYyNzEuNjE2bDIyMy42OCAxNDUuODU2djIxMy41NjhsMTIwLjMyIDc3LjQ0YTE2IDE2IDAgMCAxIDYuMTEyIDE5LjU4NGwtMS4zNDQgMi41NnoiIGZpbGw9IiNDNDlGNzQiIHAtaWQ9IjM3Mzg5Ij48L3BhdGg+PC9zdmc+);
    background-size: 88rpx 88rpx;
  }
  @keyframes fadeInOut {
    0% {
      opacity: 0.5;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }
}

.reloadblock {
  width: 100vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.randombtn {
  width: 174rpx;
  height: 46rpx;
  display: inline-block;
  transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);

  image {
    width: 100%;
    height: 100%;
    float: left;
  }

  &-hover {
    opacity: 0.5;
    transform: scale3d(1, -1, 1);
  }
}