.hf-ui-header{
  @include getBgColorAlpha($clr-main04-color, 0.3);
  text-align: center;
  position: relative;
  line-height: $nav-height;
  color: $clr-bg-content-color;
  .logo {
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    @include getBgColorAlpha($clr-main04-color, 0.4);
    color: $clr-bg-content-color;
    position: absolute;
    top: 10px;
    left: 100px;
  }

  span {
    display: inline-block;
    line-height: $nav-height;
    vertical-align: middle;
  }
}
.hf-ui-footer {
  color: $clr-bg-content-color;
  text-align: center;
  line-height: $footer-height;
  @include getBgColorAlpha($clr-main04-color, 0.2);
}
.hf-ui-main {
  color: $clr-bg-content-color;
  line-height: 150px;
  @include getBgColorAlpha($clr-main04-color, 0.3);
  text-align: center;
}

.hf-ui-aside {
  color: $clr-bg-content-color;
  @include getBgColorAlpha($clr-main04-color, 0.3);
  text-align: center;
  line-height: 150px;
}
.hf-ui-layout {
  color: $clr-bg-content-color;
  @include getBgColorAlpha($clr-main04-color, 0.3);
  .aside-right {
    width: calc(100% - 200px);
    overflow: auto;
    padding: 0 $gap $gap $gap;
  }
}

.tabs {
  @include getBgColorAlpha($clr-main04-color, 0.3);
  color: $clr-bg-content-color;
  ul {
    display: flex;
    flex: 1;
    list-style: none;
  }
  li {
    line-height: $tab-height;
    min-width: 100px;
    text-align: center;
    color: $clr-bg-content-color;
  }
}
.fullscreen-class {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.source {
  position: relative;
}
.preview-btn {
  position: absolute;
  top: 0;
  right: 15px;
  background: transparent;
  border: none;
  color: #409eff;
  cursor: pointer;
  padding: 5px 10px;
  display: none;
  outline: none;
  z-index: 1000;
}
.source:hover .preview-btn, .fullscreen-class:hover .preview-btn{
  display: block;
}
.hf-ui-layout-sidebar {
  .hf-ui-layout {
    background-color: transparent;
    .hf-ui-aside {
      @include getBgColorAlpha($clr-main04-color, 0.4);
    }
    .hf-ui-breadcrumb {
      @include getBgColorAlpha($clr-main04-color, 0.1);
      color: $clr-main04-color;
    }
    .hf-ui-main {
      @include getBgColorAlpha($clr-main04-color, 0.4);
    }
  }
}