lolosia-web/src/styles/index.scss

//scss 语法糖包含常用的布局方式 flex column
@import './scss-suger.scss';
//重置 element-plus 样式
@import './reset-elemenet-plus-style.scss';
//动画文件
@import './transition.scss';

//reset style
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a:focus,
a:active {
  outline: none;
}
a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
span,
output {
  display: inline-block;
  line-height: 1;
}

//scroll
@mixin main-show-wh() {
  /* css 声明 */
  //height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight} - #{$appMainPadding * 2});
  height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)} - #{calc(var(--app-main-padding) * 2)});
  width: 100%;
}
.scroll-y {
  @include main-show-wh();
  overflow-y: auto;
}
.scroll-x {
  @include main-show-wh();
  overflow-x: auto;
}
.scroll-xy {
  @include main-show-wh();
  overflow: auto;
}

* {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#app{
  height: 100%;
  width: 100%;
  overflow: auto;
}