black_phone/sass/main.scss

@import "mixins";
@import "variables";
// Bootstrap v4 stripped core
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/normalize";
@import "bootstrap/scss/print";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/responsive-embed";
@import "bootstrap/scss/utilities";

body {
  overflow-y: scroll;
  overflow-x: hidden;
  background: $body-bg;
}
// The title block
.title {
  margin-top: 2em;
  @include col(10,12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  cursor: pointer; // Until we click to start.
  .label {
    overflow: hidden;
    margin: auto;
    max-width: 18em;
    position: relative;
    text-align: center;
  }
  .subtitle {
    font-size: smaller;
    color: #aaa;
  }
  h1,
  h2,
  h3 {
    //color: rgba(33,17,0,0.9);
    text-shadow: rgba(255,255,255,0.5) 2px 2px 2px,
    rgba(0,0,0,0.1) -1px -1px 2px;
  }
  .warnings {
    font-size: small;
    font-style: italic;
    p {
      margin-bottom: 1em;
    }
  }
  .click_message {
    display: none;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    color: #987;
  }
  .noscript_message {
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    color: #943;
  }
}
#tools_wrapper {
  display: none; // Shown by Javascript
  /*
  .tools {
    background: $secondary-bg;
    border-radius: 5px;
    padding: 0.5em;
    @include col(4, 5);
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-offset(1);
    }
  }
  */
  .ways {
    h2 {
      display: none; // Shown by Javascript
    }
    padding: 0.5em;
  //  @include col(4, 5);
    @include col(9, 10);
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-offset(1);
    }
  }
  .buttons {
    @include col(1, 2);
    button {
      @extend .btn;
      @include button-variant($btn-color, $btn-bg, $btn-color);
      margin-bottom: 1em;
    }
  }
}
#content_wrapper {
  display: none; // Shown by Javascript
  background: $text_background;
  border-radius: 5px;
}
#content {
  @include col(10, 12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  p {
    hyphens: auto;
  }
  padding: 1em;
  ul {
    margin: 0;
    padding: 0 0 0 1em;
  }
  ul.options {
    padding: 0;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    list-style-type: none;
    border-radius: 4px;
    li {
      padding: 0.5em;
    }
    li:hover {
      cursor: pointer;
    }
    li:last-child {
      border-bottom: none;
    }
  }
  section {
    border-top: 1px dashed #bbb;
  }
  .situation-start {
    border-top: none;
  }
  img.right {
    float: right;
    margin: 1.1em 0 1.1em 1.1em;
  }
  img.left {
    float: left;
    margin: 1.1em 1.1em 1.1em 0;
  }
  h3 {
    text-align: center;
  }
}
#legal {
  @include col(10,12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  margin-top: 1em;
  color: darken($body-color, 10%);
  font-size: smaller;
  display: none; // Shown by Javascript
  #footleft {
    @include make-col();
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-span(10);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col-span(12);
    }
  }
  #footright {
    text-align: right;
    @include make-col();
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-span(2);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col-span(12);
      margin-bottom: 1em;
    }
  }
}

#content_library,
#ui_library,
#menu {
  display: none;
}

.controls {
  display: none;
  @include make-col();
  @include make-col-span(12);
  @media (max-width: breakpoint-max(xs)) {
    margin-bottom: 1em;
  }
  #clip {
    @include halfcolumn();
    text-align: center;
    img {
      max-height: 50px;
    }
  }
  .volume {
    @include halfcolumn();
  }
}
.way {
  color: $waycolor;
  margin-right: 1em;
}
.cycle {
  color: darkgreen;
  border-bottom: darkgreen dashed 1px;
}
ul.options {
  border: 1px solid #876;
  li {
    border-bottom: 1px solid #876;
  }
  li:hover {
    background-color: rgba(153,136,119,0.2);
  }
}
#legal {
  .muted {
    color: grey;
  }
}
hr {
  width: 50%;
  border-color: $body-color;
}