ui/artalk/src/style/sidebar-layer.scss
$header-height: 60px;
$nav-height: 40px;

.atk-sidebar-layer {
  $width: 430px;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  width: $width;
  height: 100%;
  background: var(--at-color-bg);
  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform: translate($width, 0px);

  @media only screen and (max-width: $width) {
    & {
      width: 100%;
    }
  }

  .atk-sidebar-inner {
    position: relative;
    height: 100%;
  }

  // Header
  .atk-sidebar-header {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 99999;

    .atk-sidebar-close {
      display: flex;
      flex-direction: column;
      width: $header-height;
      height: $header-height;
      align-items: center;
      place-content: center;
      cursor: pointer;
      user-select: none;
      margin-left: 10px;
      font-size: 22px;

      &:hover ::after {
        background-color: rgba(232, 17, 35, 0.9);
      }
    }
  }

  .atk-sidebar-iframe-wrap {
    height: 100%;
    position: relative;

    iframe {
      border: 0;
      width: 100%;
      height: 100%;
    }

    .atk-err-alert {
      z-index: 9999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      background: var(--at-color-bg);
      padding: 40px 30px;
      width: 80%;
      text-align: center;
      border-radius: 4px;

      .atk-title {
        font-size: 1.4em;
        margin-bottom: 20px;
        color: var(--at-color-font);
      }

      .atk-text {
        color: var(--at-color-font);

        span {
          cursor: pointer;
          color: var(--at-color-main);
        }
      }
    }
  }
}
