orchestra-app/src/styles/index.less

@import url('./iconfont/iconfont.css');

:root {
  // Color Palette
  // --van-black: #000;
  // --van-white: #fff;
  // --van-gray-1: #f7f8fa;
  // --van-gray-2: #f2f3f5;
  // --van-gray-3: #ebedf0;
  // --van-gray-4: #dcdee0;
  // --van-gray-5: #c8c9cc;
  // --van-gray-6: #969799;
  // --van-gray-7: #646566;
  --van-gray-8: #333;
  // --van-red: #ee0a24;
  // --van-blue: #1989fa;
  --van-primary: #ff8057 !important;
  --van-picker-confirm-action-color: #ff8057 !important;
  --van-primary-text: #f67146 !important;
  // --van-popover-light-text-color: var(--van-primary) !important;
  // --van-orange: #ff976a;
  // --van-orange-dark: #ed6a0c;
  // --van-orange-light: #fffbe8;
  // --van-green: #07c160;

  // // Gradient Colors
  // --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  // --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

  // // Component Colors
  --van-primary-color: var(--van-primary) !important;
  // --van-success-color: var(--van-green);
  // --van-danger-color: var(--van-red);
  // --van-warning-color: var(--van-orange);
  // --van-text-color: var(--van-gray-8);
  // --van-text-color-2: var(--van-gray-6);
  // --van-text-color-3: var(--van-gray-5);
  // --van-text-link-color: #576b95;
  // --van-active-color: var(--van-gray-2);
  // --van-active-opacity: 0.6;
  // --van-disabled-opacity: 0.5;
  // --van-background-color: var(--van-gray-1);
  // --van-background-color-light: var(--van-white);

  // // Padding
  // --van-padding-base: 4px;
  // --van-padding-xs: 8px;
  // --van-padding-sm: 12px;
  // --van-padding-md: 16px;
  // --van-padding-lg: 24px;
  // --van-padding-xl: 32px;

  // // Font
  // --van-font-size-xs: 10px;
  // --van-font-size-sm: 12px;
  // --van-font-size-md: 14px;
  // --van-font-size-lg: 16px;
  // --van-font-weight-bold: 500;
  // --van-line-height-xs: 14px;
  // --van-line-height-sm: 18px;
  // --van-line-height-md: 20px;
  // --van-line-height-lg: 22px;
  // --van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  //   Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  //   'Microsoft Yahei', sans-serif;
  // --van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
  //   Arial, sans-serif;

  // // Animation
  // --van-animation-duration-base: 0.3s;
  // --van-animation-duration-fast: 0.2s;
  // --van-animation-timing-function-enter: ease-out;
  // --van-animation-timing-function-leave: ease-in;

  // // Border
  // --van-border-color: var(--van-gray-3);
  // --van-border-width-base: 1px;
  // --van-border-radius-sm: 2px;
  // --van-border-radius-md: 4px;
  // --van-border-radius-lg: 8px;
  // --van-border-radius-max: 999px;
  --van-cell-group-inset-padding: 0 13px;

  --van-tag-default-color: #f8f8f8 !important;
  --van-tag-text-default-color: #c0c0c0;
  --van-tabs-bottom-bar-width: 20px;
  --col-background-color: #f6f8f9;

  --white: #fff;

  --tips-color: #999;
  --strong--color: #ff4e19;
  --box-shadow-color: rgba(0, 0, 0, 0.05);

  --tag-border-color: #2dc7aa;
  --tag-bg-color: #e9fff8;
  --tag-color: #2dc7aa;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  font-family: PingFangSC-Medium, PingFang SC;
}

body {
  background-color: #f6f8f9;
  user-select: none;
  margin-top: 0 !important;
}

.mb12 {
  margin-bottom: 12px !important;
}

.btnGroup {
  padding: 0 25px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  .van-button {
    font-size: 16px !important;
    font-weight: 500;
  }
}
.btnMore {
  padding-left: 13px;
  padding-right: 13px;
  display: flex !important;
  justify-content: center !important;
  // :global {
  .van-button {
    width: 100% !important;
  }
  .van-button + .van-button {
    margin-left: 15px;
  }
  // }
}

// .van-sticky {
//   transform: translateZ(0);
//   -webkit-transform: translateZ(0);
// }
// .van-sticky--fixed {
//   .btnGroup {
//     background-color: #fff;
//     padding-top: 15px;
//   }
// }

.sticky {
  position: relative;
  .van-sticky {
    height: inherit !important;
    top: var(--van-sticky-z-index) !important;
    position: fixed;
    width: 100%;
  }
  :global(.van-sticky--fixed) {
    box-shadow: 10px 10px 10px var(--box-shadow-color);
  }
}

.van-toast {
  z-index: 9999 !important;
}
.van-sticky--fixed {
  position: fixed;
  z-index: 1999;
}

:root {
  --music-list-item-background-color: #fff;
  --music-list-item-title-color: #333;
  --music-list-item-desc-color: #333;
  --music-list-item-mate-color: #6a6a6a;
  --music-list-item-border-color: #f1f1f1;
  --music-list-item-vip-bg: #fff1cd;
  --music-list-item-vip-color: #ff6c00;
  --music-list-item-free-bg: #fff1e7;
  --music-list-item-free-color: #ff4700;
  --music-list-item-charge-bg: #e1f0ff;
  --music-list-item-charge-color: #0086ff;
  --van-overlay-background: rgba(0, 0, 0, 0.4);
}

// 加载动画
.appRootToast {
  .van-overlay {
    // background: rgba(0, 0, 0, 0.4);
    background: #fff;
    // transition: all 0 ease;
    z-index: 2999 !important;
  }
  .van-fade-enter-from,
  .van-fade-enter-active {
    animation: none;
  }
  .van-toast__text {
    width: 100px;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .van-toast--text {
    // background-color: rgba(255, 255, 255, 1);
    // background-color: rgba(0, 0, 0, 0.9);
    background-color: transparent;
    // box-shadow: 0px 8px 20px 2px #f0f0f0;
    z-index: 2999 !important;
  }
  .toastAnimate {
    width: 70px;
    height: 70px;
  }
}

// 加载动画
.appRootToastCenter {
  .van-overlay {
    background: rgba(0, 0, 0, 0.4);
    // background: #fff;
    // transition: all 0 ease;
    z-index: 2999 !important;
  }
  .van-fade-enter-from,
  .van-fade-enter-active {
    animation: none;
  }
  .van-toast__text {
    width: 100px;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .van-toast--text {
    background-color: rgba(255, 255, 255, 1);
    // background-color: rgba(0, 0, 0, 0.9);
    // background-color: transparent;
    // box-shadow: 0px 8px 20px 2px #f0f0f0;
    z-index: 2999 !important;
  }
  .toastAnimate {
    width: 70px;
    height: 70px;
  }
}

.cell-section {
  width: auto;
  border-radius: 6px;
  margin: 0 13px;
  padding: 15px 12px;
}

.van-cell__right-icon {
  font-size: 13px;
  font-weight: bold;
  color: #d8d8d8;
}

.van-field__control {
  font-size: 16px;
}

@font-face {
  font-family: 'DINA';
  src: url('./font/DIN_Alternate_Bold.ttf');
}
// 数据为空时，空样式居中显示
.emptyRootContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
  .o-result-container {
    flex: 1 auto;
    display: flex;
    align-items: center;
  }
}

input {
  caret-color: #ff8057;
}
.emptyFixedHeightContainer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  .van-empty {
    transform: translateY(-15%);
  }
}

// grid item 右边的一根线
.gridBorderRight::after {
  content: ' ';
  position: absolute;
  box-sizing: border-box;
  height: 40px;
  pointer-events: none;
  top: 50%;
  margin-top: -20px;
  right: 0;
  border: 1px solid var(--van-border-color);
  transform: scale(0.5);
}

// 搜索公用样式
.popupBottomSearch {
  --van-picker-toolbar-height: 44px !important;
  .van-picker__toolbar {
    position: relative;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: var(--van-padding-md);
      bottom: 0;
      left: var(--van-padding-md);
      border-bottom: 1px solid var(--van-cell-border-color);
      transform: scaleY(0.5);
    }
  }
  .van-picker-column {
    position: relative;
    z-index: 1;
  }
  .van-picker__frame {
    z-index: 0;
    &::after {
      background: #f2f2f2;
      border-radius: 8px;
    }
  }
}

.searchGroupInput {
  .van-search {
    padding-bottom: 0 !important;
  }
}
.searchGroup {
  padding: 0 13px !important;
  line-height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .searchItem {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    // display: flex;
    // align-items: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    &.searchItem-active {
      color: var(--van-primary);
      .arrow {
        transform: rotateX(180deg);
        margin-top: -1px;
        background: url('../common/svg/arrow-active.svg') no-repeat center center;
        background-size: 100%;
      }
    }
    span {
      max-width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &.searchItem-large {
      span {
        max-width: 120px;
      }
    }
    &.searchItem-normal {
      span {
        max-width: 100px;
      }
    }
  }

  .arrow {
    display: inline-block;
    background-size: 100%;
    background: url('../common/svg/arrow.svg') no-repeat center center;
    width: 9px;
    height: 5px;
    margin-left: 4px;
  }
}

.searchGroup-single {
  padding: 12px 13px !important;
  .searchItem {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 24px 0 13px;
    background-color: #fff;
    border-radius: 16px;

    font-size: 14px;
    color: #333333;
    line-height: 32px;
    display: inline-flex;
    align-items: center;
    &::after {
      position: absolute;
      top: 50%;
      right: 13px;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent #aaaaaa #aaaaaa;
      transform: rotate(-45deg);
      // transition: all 0.2s ease-in-out;
      opacity: 0.8;
      content: '';
    }

    &.searchItem-active {
      color: var(--van-primary-color);

      &::after {
        margin-top: -1px;
        transform: rotate(135deg);
        border-color: transparent transparent currentColor currentColor;
      }
    }
    span {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.searchItem-left {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-right: 21px;
  &::after {
    position: absolute;
    top: 50%;
    right: -13px;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent #aaaaaa #aaaaaa;
    transform: rotate(-45deg);
    // transition: all 0.2s ease-in-out;
    opacity: 0.8;
    content: '';
  }

  span {
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.searchItem-active {
    color: var(--van-primary-color);

    &::after {
      margin-top: -1px;
      transform: rotate(135deg);
      border-color: transparent transparent currentColor currentColor;
    }
  }
}

// 下拉搜索
.van-sheet_content {
  margin: 0 13px;
  padding-top: 10px;
  .van-sheet-item {
    line-height: 52px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
  .van-sheet-item-active {
    background: #f2f2f2;
    border-radius: 8px;
  }
}
.van-action-sheet_bottom__cancel {
  margin: 0 13px;
  width: calc(100vw - 26px);
  line-height: 52px;
  padding: 0;
  color: #aaaaaa;
}