classroom-instruments/src/styles/index.less

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}


#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  min-height: 100vh;

}

body {
  user-select: none;
  background-color: #f1f5ff;
  overflow: hidden;
}

body>.n-drawer-container-relative {
  position: relative !important;
}

// 搜索框前面放大镜样式重置
.icon-search-input {
  display: inline-block;
  width: max(16px, 14Px);
  height: max(16px, 14Px);
  background: url('../common/images/icon_search.png') no-repeat center;
  background-size: contain;
}

.n-input:not(.n-input--disabled).n-input--focus {
  .icon-search-input {
    background: url('../common/images/icon_searchActive.png') no-repeat center;
    background-size: contain;
  }
}

// 初始化弹窗关闭的默认状态
// .n-base-close:not(.n-base-close--disabled):focus::before {
//   background-color: transparent;
// }

.n-base-select-menu .n-base-select-option {
  font-size: max(15px, 12Px);
}

.n-popselect-menu {
  --n-option-height: 38Px !important;
}

@font-face {
  font-family: 'dotfont';
  /* Project id  */
  src: url('../common/text-security-disc.woff') format('woff');
}

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 12px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(217, 217, 217);
}

::-webkit-scrollbar-thumb:hover {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(159, 159, 159);
}

.searchBtn {
  // width: 90px;
  // height: 43px;
  background: #198cfe;
  border-radius: 8px;
  // line-height: 41px;
  font-weight: 600 !important;
  // font-size: max(18px, 13Px);
}

.resetBtn {
  // width: 90px;
  border-radius: 8px;
  font-weight: 600 !important;
  // font-size: max(18px, 13Px);
}

.resetBtn,
.searchBtn {
  --n-padding: 0 28px !important;
}

// .n-data-table {
//   border-radius: 10px 10px 0 0;
//   overflow: hidden;
// }

// .n-data-table-thead {
//   height: 54px;
//   line-height: 54px;
// }

// .n-data-table-th {
//   padding: 0 20px !important;
//   background-color: #f7f7f8 !important;
//   color: rgba(0, 0, 0, 0.88) !important;

//   .n-data-table-th__title {
//     font-weight: 600;
//   }
// }

// .n-data-table-tr {
//   .n-data-table-td {
//     padding-left: 20px;

//     color: #333333;
//     font-size: 14px;

//     .n-button__content {
//       font-size: 14px;
//       color: #1677ff;
//     }
//   }
// }

:global {
  .n-form-item .n-form-item-label {
    color: #777;
  }

  .n-button {
    border-radius: 8px;
  }


}

.n-cascader-submenu-wrapper {

  .n-scrollbar>.n-scrollbar-rail.n-scrollbar-rail--vertical,
  .n-scrollbar+.n-scrollbar-rail.n-scrollbar-rail--vertical {
    right: 2Px;
  }

  .n-cascader-option__suffix {
    padding-right: 12Px !important;
  }
}

.n-data-table-th__title-wrapper {
  &::after {
    content: '';
    width: 1px;
    height: 22px;
    background: #ebebeb;

    &:nth-last-child(1) {
      display: none;
    }
  }
}

.n-data-table-th--last {
  .n-data-table-th__title-wrapper {
    &::after {
      content: '';
      width: 0px;
      height: 22px;
      background: #ebebeb;
    }
  }
}

// 给弹窗设置标题的基础样式
.modalTitle {
  border-radius: 16px;

  // overflow: hidden;

  &.background {
    .n-card-header {
      background: #f5f6fa;
      font-weight: 600 !important;
      overflow: hidden;
    }
  }

  .n-card-header {
    border-radius: 16px 16px 0 0;
    position: relative;
    padding: 20px 18px;
    text-align: center;
    background: #fff;
    font-size: 22px;
    font-weight: 600;
    color: #131415;
    line-height: 30px;
  }

  .n-card-header__close {
    position: absolute;
    right: 18px;
    z-index: 99;
  }

  .n-card__content {
    padding: 0;
  }
}

.favitor-enter-active,
.favitor-leave-active {
  // transition: all 0.5s cubic-bezier(0.18, 0.89, 0, 1.29);
  transition: all .3s ease-in-out;
}

.favitor-enter-from,
.favitor-leave-to {
  transform: scale(1.4);
  opacity: 0.1;
}

@font-face {
  font-family: 'DINA';
  src: url('../common/DIN_Alternate_Bold.ttf');
}

:root {
  --product-color: #3044ca;
}

// .n-button--primary-type {
//   color: #1677ff !important;
// }
::-webkit-input-placeholder {
  /* WebKit browsers */

  color: rgba(0, 0, 0, 0.4);
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */

  color: rgba(0, 0, 0, 0.4);
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */

  color: rgba(0, 0, 0, 0.4);
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */

  color: rgba(0, 0, 0, 0.4);
}

@keyframes TadaNum {
  0% {
    transform: rotate(0);
    transform: rotate(0);
  }

  10%,
  20% {
    transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: rotate(6deg);
    transform: rotate(6deg);
  }

  40%,
  60%,
  80% {
    transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0);
    transform: rotate(0);
  }
}

/* 列表动画 start */
.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 拖动时
.sortable-ghost {
  opacity: 0.7;
}

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}


.n-data-table .n-data-table-th {

  background: #F7F7F8;
  color: rgba(113, 113, 114, 1) !important;
  border: none;
  min-height: 54px;
  font-size: max(15px, 12Px);
}

.n-data-table.n-data-table--bordered .n-data-table-wrapper {
  border: none;
}

.n-data-table-tr .n-data-table-td .n-button__content,
.n-data-table .n-data-table-td {
  font-weight: bold;
  font-size: max(15px, 12Px);
}

.n-tooltip {
  --n-padding: 6px 12px !important;
  --n-border-radius: 6px !important;

  .n-popover__content {
    font-size: max(14px, 12Px);
  }
}


.n-base-close:not(.n-base-close--disabled):active::before,
.n-base-close:not(.n-base-close--disabled):focus::before {
  background-color: transparent !important;
}


.body .n-modal-mask {
  background-color: transparent !important;
}

// 设置图片弹窗工具预览
.n-image-preview-toolbar .n-base-icon {
  margin: 0 8px;
  padding: 0;
}

.n-breadcrumb .n-breadcrumb-item {
  font-size: max(16px, 12Px) !important;
}

.n-base-selection,
.n-input,
.n-input-group-label {
  --n-height: max(40px, 36Px) !important;
  --n-border-radius: 8px !important;
  font-size: max(15px, 13Px) !important;
}

.n-button {
  font-size: max(18px, 13Px);
  --n-height: max(40px, 36Px) !important;
}

.n-base-selection-input,
.n-input .n-input__input-el,
.n-input .n-input__textarea-el {
  font-size: max(15px, 13Px) !important;
}

.n-base-selection .n-base-selection-label .n-base-selection-label__render-label {
  font-size: max(15px, 13Px) !important;
}

.n-select-menu .n-button {
  --n-height: 28px !important;
}

.n-form-item-label__text {
  font-size: max(15px, 13Px);
}

.n-date-panel {

  .n-date-panel-actions__suffix,
  .n-time-picker-panel {
    .n-button {
      font-size: 12Px;
      height: 32px !important;
      line-height: 32px;
      padding: 0 13px !important;
      border-radius: 6px;
    }
  }
}