mapgen/sass/main.scss

@import "variables";
@import "bootstrap";
@import "open-iconic";

@font-face {
  font-family: "EBGaramond12-Regular";
  src: url("#{$icon-font-path}/EBGaramond12-Regular.eot"); /* IE9 Compat Modes */
  src: url("#{$icon-font-path}/EBGaramond12-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("#{$icon-font-path}/EBGaramond12-Regular.otf") format("opentype"), /* Open Type Font */
    url("#{$icon-font-path}/EBGaramond12-Regular.svg") format("svg"), /* Legacy iOS */
    url("#{$icon-font-path}/EBGaramond12-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("#{$icon-font-path}/EBGaramond12-Regular.woff") format("woff"), /* Modern Browsers */
    url("#{$icon-font-path}/EBGaramond12-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: $body-bg;
  background-image: $body-background;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.container {
  @include make-container();
  @include make-container-max-widths();
}
#content_wrapper {
  @include make-row();
  background: $text_background;
  max-height: 70%;
}
.footer {
  @include make-row();
  #choices {
    @include make-col(12);
    text-align: center;
  }
}
.content {
  @include make-col(12);
  @include media-breakpoint-up(md) {
    padding-left: 3em;
    padding-right: 3em;
  }
  background: #ffe9c480;
  padding: 1em;
  h1, h2, h3, h4, h5 {
    text-align: center;
    text-shadow: 0 0 2px #fff;
  }
  font-size: $font-size-base * 1.2;
  blockquote {
    margin: 1em 2em;
    line-height: 1.45;
    color: #383838;
    font-size: $font-size-base* 1.4;
  }
  .room-start {
    border-top: none;
  }
}
ul.options {
  margin: 0;
  padding: 0 0 0 1em;
  padding: 0;
  margin-top: 0.5em;
  margin-bottom: 0.7em;
  list-style-type: none;
  li {
    @include make-col(9);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    &.active a > div,
    &.active span > div,{
      background-image: linear-gradient(45deg, #a0e0e0, #fff) !important;
    }
    .title {
      font-size: 16pt;
    }
    .subtitle {
      font-size: 12pt;
    }
  }
  li a,
  li span {
    display: block;
    margin-bottom: 0.5em;
    font-family: $headings-font-family;
    text-decoration: none;
    background-image: linear-gradient( 45deg, #ccc, #fff );
    > div {
      border-radius: 5px;
      border: 1px solid #000;
      padding: 1em;
      color: $ok-color;
      &:hover {
        background-color: rgba(153,136,119,0.2);
        background-image: none;
      }
    }
  }
  .warning {
    background-image: none;
    background-color: #fffeb6;
    &, a, span, div {
      color: $warning-color;
    }
  }
  .neutral {
    background-image: none;
    background-color: #b6ffd1;
    &, a, span, div {
      color: $neutral-color;
    }
  }
  &.narrowchoice {
    margin-right: 30% !important;
    margin-left: 30% !important;
  }
}
hr {
  width: 50%;
  border-color: $body-color;
}
.center {
  text-align: center;
}
.effect {
  color: #4c20dd;
}
.btn, .tab {
  font-family: $headings-font-family;
}
.map {
  float: right;
  margin-right: 2em;
  margin-top: 2em;
  font-family: $font-family-monospace;
  td {
    width: 1em;
    height: 1em;
    text-align: center;
  }
  td.current {
    background-color: $map-current;
  }
}
.medskip {
  margin-top: $font-size-base * 1.5;
  margin-bottom: $font-size-base * 1.5;
}
html body.night {
  background-image: radial-gradient(circle,rgba(0,0,0,.7),rgba(0,0,0,1)) !important;
  background-size: 100% 100%;
  color: $body-color-night !important;
  .nav-item {
    a {
      color: $body-color-night !important;
    }
  }
  a {
    color: $link-color-night;
  }
  .tab a {
    color: #fff;
  }
  .btn-outline-primary {
    color: #777;
  }
  .tab.active {
    background: #333 !important; 
  }
  .questline {
    background-color: $gray-600;
    color: $white;
  }
  .map td.current {
    background-color: invert($map-current);
  }
}
button.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.tab_wrapper {
  text-align: center;
  margin-bottom: 1em;
  margin-top: 1em;
  .content {
    h1, h2, h3, h4, h5 {
      text-shadow: 0 0 2px #fff;
    }
  }
  .tab {
    padding: 1em 1.5em;
    cursor: pointer;
    &.active {
      background-color: invert($body-bg);
      color: invert($body-color);
      a {
        color: invert($body-color);
      }
    }
    a {
      color: $body-color;
    }
  }
}
.questline {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  background-color: #f3cf95;
  text-align: center;
}
kbd {
  background-color: $black;
  color: $white;
  display: inline-block;
  border-radius: 5px;
  padding: $font-size-base * 0.2 $font-size-base * 0.5;
  margin: 2px;
  font-size: $font-size-base * 0.8;
}