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

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

.n-input:not(.n-input--disabled).n-input--focus {
  .icon-search-input {
    background: url('../common/images/icon_searchActive.svg') 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: 15px;
}

@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: 18px;
}

.resetBtn {
  width: 90px;
  height: 43px;
  border-radius: 8px;
  line-height: 41px;
  font-weight: 600 !important;
  font-size: 18px;
}

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

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

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

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