dev/scss/main/tutorial.scss

@charset "utf-8";
@use "../util";
@use "../base/choose";
@use "../base/colors";
@use "../base/lengths";
@use "../base/paths";

/**
 * Rules for the embedded documentation.
 */

#tutorial {
  position:         fixed;
  z-index:          9999;
  top:              5%;
  bottom:           5%;
  // Anchor the panel to the right and cap its width, so it reads as a
  // right-hand documentation drawer and leaves the main workspace on the left
  // uncovered. On narrow viewports it still uses (almost) the full width (see
  // the media query, which resets left/right/width for a full-screen panel).
  left:             auto;
  right:            2%;
  width:            min(96%, 72em);
  padding-right:    lengths.$right-view-distance;
  background-color: colors.$nearly-white;
  box-shadow:       choose.$choose-box-shadow;

  border: {
    width:  2 * lengths.$border-size;
    color:  colors.$dark-grey;
    style:  solid;
    radius: lengths.$standard-border-radius;
  }

  .button-group.button-view {
    background-color: colors.$middle-grey;
    display:          block;
    height:           100%;
  }

  iframe {
    border-width: 0;
    width: 100%;

    // Hack for a Firefox bug
    min-height: 100.1%;
    background: {
      image:    url('#{paths.$img-path}/korap-bg.svg');
      repeat:   no-repeat;
      position: center center;
      size:     15%;
    }
  }
}

p.bibentry {
  font-size: 80%;
  margin-left: 3em;
  margin-bottom: 3em;
  text-indent: -1.5em;
  cite {
    font-weight: bold;
  }
}

body.embedded {
  background-color: colors.$nearly-white;
  aside {
    @include choose.choose-item;
    padding-top: 0;
    background-color: colors.$middle-grey;

    > div {
      position:         relative;
      top:               50%;
      -webkit-transform: translateY(-50%);
      -ms-transform:     translateY(-50%);
      transform:         translateY(-50%);
    }
  }
}