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;
  }
  .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;
  }
  .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;
  }
}