classroom-instruments/src/styles/index.less

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

/* 移除默认的 focus-visible 样式 */
:focus-visible {
  outline: none;
}

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

body {
  user-select: none;
  background-color: #f1f5ff;
  overflow: hidden;
  --layoutTopHeight: 64px;
  .n-form-item .n-form-item-feedback-wrapper {
    --n-feedback-font-size: 12Px !important;
  }
}

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

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

  --n-padding: 0 28px !important;
  background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
  border-radius: 8px;
  // line-height: 41px;
  font-weight: 600 !important;

  .n-button__state-border,
  .n-button__border {
    border: none !important;
  }
}

.searchDateDefault {
  background: #f1f2f6;
  color: #1e2022;
}

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

.modalTitleNew {
  border-radius: 12Px;
  .n-card-header {
    border-radius: 12Px 12Px 0 0;
    position: relative;
    padding: 24Px 30Px;
    text-align: center;
    background: #fff;
    font-weight: 600;
    font-size: 16Px;
    color: #131415;
    line-height: 22Px;
    .n-card-header__main {
      text-align: left;
    }
  }

  .n-card-header__close {
    position: absolute;
    right: 30Px;
    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 0.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-modal-mask {
  background-color: rgba(0, 0, 0, 0.6);
}

// 设置图片弹窗工具预览
.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;
    }
  }
}

.only-child-select {
  all: revert;
}
.html-to-dom {
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  hr {
    all: revert;
  }
  hr {
    border-top: 1px solid #d2d2d2;
  }
}

.cardPreviewGuide {
  width: 920px;
  overflow: hidden;

  :global {
    .n-card__content {
      height: 517px;
      overflow: hidden;
    }

    .n-card-header__main {
      max-width: 60%;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.popoverClassF1 {
  border-radius: 12Px !important;
  width: 320Px !important;
  max-width: 320Px !important;
  .driver-popover-close-btn {
    font-size: 22Px;
    height: auto;
    margin-right: 5Px;
    font-size: 400 !important;
  }

  .driver-popover-arrow {
    left: 50%;
    margin-left: -5px;
    right: revert !important;
  }

  .driver-popover-title {
    font-size: 16Px;
  }

  .driver-popover-description {
    padding-top: 8Px;
    font-size: 14Px;
    color: #777777;
  }

  .driver-popover-next-btn {
    background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
    border-radius: 6Px;
    font-weight: 600;
    font-size: 14Px;
    color: #FFFFFF;
    padding: 6Px 12Px;
    text-shadow: none !important;
    border: 0 !important;
  }
}