@import '../../../shared/styles/constants.scss';

$bg_primary: #141414;
$bg_secondary: #212121;
$grey600: #757575;
$grey800: #424242;
$red700: #D32F2F;
$lightGreen900: #33691E;
$brightShadow: #616161;
$red800: #C62828;
$previewPanelWidth: 560px;
$padBase: 16px;
$hBarThickness: 42px;
$videoSize: 700px;
$showcaseFeatureSize: 350px;
$mapSize: 400px;
$borderColor: #606060;
$border: 1px $borderColor solid;
$fontFamilyHeader: 'Cinzel', sans-serif;
$fontFamilyButton: Roboto, sans-serif !important;
$fontSizeBase: 20px;
$fontSizeImportant: 28px;
$fontSizeHeader: 45px;
$fontSizeSmall: 12px;
$bodyWidth: 1000px;
$splashParagraphSize: 16px;
$bgInteractive: rgb(20,20,20);
$bgHighlight: #333;
$textDisabled: #888;

$bg_papyrus_img: url('/images/papyrus-tiled.jpg');
$bg_encounter_img: url('/images/encounter-tiled.jpg');

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: local('Cinzel-Bold'), url('../../../shared/fonts/Cinzel-Bold.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local('Cinzel-Regular'), url('../../../shared/fonts/Cinzel-Regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'MinionPro';
  src: local('MinionPro'), url('../../../shared/fonts/MinionPro-Regular.woff') format('woff');
}

html, body, section#react-app, textarea {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Monaco', 'Melo', 'Ubuntu Mono', monospace;
  font-size: $fontSizeBase;
}

a {
  color: inherit !important;
}

body > :first-child:not(#react-app) { display: none; }

#react-app > .main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollBottom {
  height: 100%;
  overflow-y: auto;
}

.dialogTitle {
  background-color: $grey800;
  margin-bottom: $padBase/2 !important;
  padding-top: $padBase !important;
  padding-bottom: $padBase/2 !important;
  font-family: $fontFamilyHeader !important;
  font-weight: bold;
  font-size: 2em !important;

  &.dialogError {
    background-color: $red700 !important,
  }

  &.dialogGood {
    background-color: $lightGreen900 !important,
  }
}

.announcement_bar {
  padding: 0 !important;

  .announcement {
    background: $bg_red_primary !important;
    width: 100%;
    font-family: $fontFamilyBase !important;
    text-transform: none;
    border-radius: 0 !important;

    &:hover {
      background-color: $bg_red_titlebar !important;
    }

    .inline_icon {
      padding-left: 0.5em;
      height: 1em;
      margin-top: -0.5em;
    }
  }
}

.annotation_details {
  h3 {
    color: white;
  }

  .example {
    background-color: rgba(0,0,0,0.5);
    padding: $padBase;
    margin-bottom: $padBase;
  }

  .reminder {
    font-style: italic;
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: $padBase;
    margin-top: $padBase;
  }
}

label {
  color: $grey600 !important;
}

.loading {
  background: $bg_primary;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  padding: 2*$padBase;
  font-family: $fontFamilyHeader;
  font-weight: bold;

  .loadPrompt {
    opacity: 0;
    padding-top: 2*$padBase;
    font-family: $fontFamilyBase;
    font-weight: normal;
    max-width: 720px;
    margin: 0 auto;
    user-select: text;

    &.delayLoad {
      animation: fadein 1s;
      animation-delay: 5s;
      animation-fill-mode: forwards;
    }

    &.visible {
      opacity: 1.0;
    }
  }
}

.saveIndicator {
  &.error {
    span, svg {
      color: $red800 !important;
      fill: $red800 !important;
    }
  }
  &.success {
    span, svg {
      color: $lightGreen900;
      fill: $lightGreen900;
    }
  }
}

body #olark-wrapper button.olark-launch-button { /*must be more specifc than olark styles */
  margin-left: auto !important;
  margin-right: auto !important;
  position: fixed !important;
  top: 10px !important;
  right: 200px !important;
  height: 40px !important;
}

.splash {
  background: $bg_primary;
  font-family: $fontFamilyBase;
  overflow-y: auto;
  font-size: $splashParagraphSize;

  .body {
    padding-top: $hBarThickness;

    &.announcing {
      padding-top: 2*$hBarThickness;
    }
  }

  .alert {
    background: white;
    padding: 5%;
    margin-bottom: 5%;
  }

  .worldMap {
    border-left: 0;
    border-right: 0;
    padding: $padBase 0;
    margin-bottom: $padBase / 2;
    background-color: rgba(255,255,255,0.4);
    border-top: $border;
    border-bottom: $border;
    img {
      max-height: $mapSize;
      border: 0 !important;
    }
  }

  img {
    max-width: 100%;
  }

  .buttonBox {
    // Override expedition-app button
    .base_button {
      display: inline-block;
      padding: $padBase;
      &> button {
        font-family: $fontFamilyBase !important;
        font-size: $fontSizeBase !important;
        padding-left: 2*$padBase !important;
        padding-right: 2*$padBase !important;
      }
    }
  }

  .body {
    width: 100%;
    max-width: $bodyWidth;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    flex: 10;

    .imageText {
      font-style: italic;
      color: rgba(0,0,0,0.5);
      margin-bottom: $padBase;
    }

    h1, h3, h4 {
      font-style: normal;
      font-weight: normal;
      letter-spacing: .05em;
      -webkit-font-smoothing: 'antialiased';
      line-height: 1.2em;

      span {
        display: inline-block;
      }
    }

    h1 {
      font-family: $fontFamilyHeader;
      font-size: $fontSizeHeader !important;
    }

    h3 {
      font-size: $fontSizeImportant;
      font-family: $fontFamilyBase !important;
    }

    h4 {
      font-family: $fontFamilyHeader;
    }

    &>* {
      padding-left: $padBase;
      padding-right: $padBase;
      padding-bottom: $padBase*3;
      padding-top: $padBase;

      img {
        border: $border;
      }

      &:first-child {
        padding-left: 0;
        padding-right: 0;
      }

      &:nth-child(odd) {
        background-image: $bg_papyrus_img;
        color: black;
      }
      &:nth-child(even) {
        background-image: $bg_encounter_img;
        color: white;
        .showcase {
          flex-direction: row-reverse;
        }
      }
      display:block;
      margin: 0;
    }
  }

  footer {
    color: $grey600;
    font-size: $fontSizeSmall;
    margin-top: $fontSizeHeader;
    margin-bottom: $fontSizeHeader;
  }

  .showcase {
    margin: $padBase;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &>div {
      flex-grow: 1;
      width: 30%;
      min-width: $showcaseFeatureSize;
      padding: $padBase;

      &>p:first-child {
        margin-top:0;
      }
    }
  }

  h1 {
    font-size: 2*$fontSizeBase;
    font-weight: normal;
  }

  .previewVideo {
    min-height: $showcaseFeatureSize;
    width: 100%;
    height: 100%;
    background: $bg_primary;
    border: $border;
    max-width: $showcaseFeatureSize*2;
    max-height: $showcaseFeatureSize*2;
    width: 90%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

.editor_snackbar {
  background: $grey600 !important;
  div, span {
    color: $bg_primary !important;
  }
  button span {
    color: $red800 !important;
  }
}

.splash_app_bar, .quest_app_bar {
  background-image: $bg_encounter_img;

  >div {
    background-color: transparent !important; // Override
    height: $hBarThickness !important;
    min-height: $hBarThickness !important;
  }

  h1 {
    font-family: $fontFamilyHeader;
    font-weight: 700 !important;
    font-size: 22px !important;
    height: $hBarThickness !important;
    line-height: $hBarThickness !important;
    margin-top: 1px !important;
    margin-left: -8px !important;
  }

  .email {
    opacity: 0.8;
    font-size: $fontSizeSmall;
  }

  .lootPoints {
    font-size: $fontSizeSmall;
    margin-right: $fontSizeBase;
    text-decoration: none;

    .inline_icon {
      height: 1.3 * $fontSizeSmall;
      width: 1.3 * $fontSizeSmall;
    }
  }
}

.quest_app_bar {
  .email, .lootPoints {
    vertical-align: super;
  }
  .loginState {
    margin-top: -8px; // Override
    margin-right: -8px;
    button {
      height: $hBarThickness;
      width: $hBarThickness;
    }
  }

  > div {
    padding-right: 0 !important;
  }

  .toolbar {
    height: $hBarThickness !important;
    padding: 0 0 !important;

    h2 {
      font-size: 1em;
    }

    button {
      font-family: $fontFamilyButton;
      margin: 4px 0 !important;
      min-width: 60px !important;
      span {
        font-size: $fontSizeSmall !important;
      }
    }

    .errorButton {
      button {
        color: $red800 !important;
      }
      svg {
        fill: $red800 !important;
      }
    }

    .rightButtons {
      flex: 2;

      & > * {
        float: right;
      }
    }
  }
}

.quest_ide {
  flex: 10;
  display: flex;

  .editor {
    flex: 1;
  }

  .preview {
    flex: 0 0 $previewPanelWidth;
    max-width: $previewPanelWidth;
    overflow: hidden;
    position: relative;

    .app_root, .editor_override {
      height: 100%;
    }

    .app, button {
      font-family: $fontFamilyBase !important;
    }

    .play-from-cursor-tutorial {
      font-family: $fontFamilyButton;
      z-index: 9;
      color: white;
      text-align: center;
      display: flex;
      align-items: center; /* Vertical center alignment */
      justify-content: center; /* Horizontal center alignment */
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.75);
    }
  }
}

.contents {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 2 * $hBarThickness;

  h1 {
    color: white;
    font-size: 2em;
    font-weight: bold;
  }
  .learnMore {
    margin: 0.8em auto 2.5em auto;
    a {
      color: white;
      opacity: 0.8;
      text-decoration: none;
    }
  }
  .previewVideo {
    background: $bg_primary;
    border: 0;
    box-shadow: 0 0 20px #616161;
    border-radius: 2px;
    width: 710px;
    height: 700px;
    margin: auto;
  }

  .Resizer {
    height: 5px;
    border-top: $border;
    cursor: ns-resize;
    margin-bottom: -3px;
  }

  .bottomPanel {
    background-color: #212121;

    .header {
      border-bottom: $border;
      height: $hBarThickness - 2; // Subtract to account for border size

      .bottomPanel--right {
        float: right;
      }

      button:hover {
        color: #FFF !important;
      }

      button {
        font-family: $fontFamilyButton;
        min-width: 60px !important;
        span {
          font-size: $fontSizeSmall !important;
        }

        &.inactive {
          color: $brightShadow;
        }
      }
    }

    #notesArea {
      width: 100%;
      height: 100%;
    }

    .console {
      width: 100%;
      height: calc(100% - #{$hBarThickness});
      display: flex;
      position: absolute;
      flex-direction: row;
      color: white;

      button {
        min-height: $padBase !important;
        padding: $padBase/2 !important;
        padding-left: 3*$padBase !important;
        border-bottom: $border !important;
        display: flex !important;
        width: 100%;
        height: auto !important;
        flex-direction: row;
        position: relative;
        transition: background-color 0.3s ease;
        text-align: left !important;

        svg {
          position: absolute;
          top: 50%;
          margin-top: -$fontSizeSmall;
          left: $padBase*0.75;
        }
      }

      .interactive {
        width: 100%;
        background: $bgInteractive;

        textarea {
          resize: none;
          color: white;
          padding: $padBase/2;
          padding-left: $padBase;
          box-sizing: border-box;
          border: 0;
          width: 100%;
          height: 100%;
          overflow-y: auto;
          background: rgba(0,0,0,0);
        }
      }

      .preview {
        width: $previewPanelWidth;
        background: $bgInteractive;

        button {
          min-height: 2.2em !important;
          line-height: 1.1em !important;
          font-family: $fontFamilyButton;
          justify-content: left;
        }
      }

      .noScope {
        color: $textDisabled;
        margin-top: $padBase;
        padding: $padBase/2;
      }
    }
  }
}

.messageDetailsDialog {
  & > :nth-child(2) {
    background-color: rgb(33, 33, 33) !important;
  }

  button {
    color: white;
  }
}

.publishForm {
  color: #FFFFFF;

  & > :nth-child(2) {
    background-color: rgb(33, 33, 33) !important;
  }

  div, input, label {
    font-family: Robot, sans-serif;
  }

  .halfWidth {
    width: 50% !important;

    & > * {
      margin-left: $padBase;
      margin-right: $padBase;
    }
  }
  .fullWidth {
    width: 100% !important;

    & > * {
      margin-left: $padBase;
      margin-right: $padBase;
    }
  }

  .contentRatingInputContainer {
    display: flex;
    .ratingSelect {
      width: 150px !important;
    }
  }

  .publishFormControl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
}

.creatorCheckbox {
  button {
    padding: $padBase $padBase 0 $padBase !important;
  }

  .icon {
    display: inline-block;
    float: left;
    padding-right: 5px;
    svg {
      height: 34px !important;
    }
    margin-top: -6px;
  }
}

/* Ace editor */
.ace_editor.noSpellcheck .misspelled {
  display: none;
}
.ace_marker-layer .misspelled {
  position: absolute;
  z-index: -2;
  border-bottom: 2px dashed red;
  margin-bottom: -2px;
  border-radius: 0;
}
.ace_gutter-cell.misspelled {
  background-color: rgba(255, 0, 0, 0.3);
}
.ace_error, .ace_warning, .ace_info {
  &:hover {
    cursor: pointer;
  }
}
.ace.noLineNumbers {
  .ace_gutter, .ace_gutter-layer {
    width: 34px !important;
    margin-right: 6px !important;
  }
  .ace_gutter-cell {
    font-size: 0 !important;
    width: 0 !important;
  }
  .ace_fold-widget {
    width: 14px !important;
  }
}

.mobileOnly {
  display: none;
}

/* Tablets and phones */
@media only screen and (max-device-width: 800px) {
  $fontSizeBase: 18px;
  $fontSizeImportant: 24px;
  $fontSizeHeader: 32px;
  html, body, section#react-app, textarea {
    font-size: $fontSizeBase;
  }
  .splash {
    .previewVideo {
      width: 100%;
    }
    .body {
      h1, h2, h3, h4, p {
        padding-left: $padBase;
        padding-right: $padBase;
        line-height: 1.16;
      }
      h1 {
        font-size: $fontSizeHeader !important;
        margin: $padBase;
      }
      h2, h3, h4 {
        font-size: $fontSizeImportant !important;
      }
    }
  }
  .mobileOnly {
    display: block;
  }
  .login {
    display: none;
  }
}

/* Phones */
@media only screen and (max-device-width: 600px) {
  $fontSizeBase: 18px;
  $fontSizeImportant: 18px;
  $fontSizeHeader: 24px;
  html, body, section#react-app, textarea {
    font-size: $fontSizeBase;
  }
  .splash {
    .body {
      h1 {
        font-size: $fontSizeHeader !important;
        margin: 0 0 $padBase 0;
      }
      h2, h3, h4 {
        font-size: $fontSizeImportant !important;
      }
    }
    .showcase {
      margin: 0;
      &> div {
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: auto;
      }
    }
  }
  h1, h2, h3, h4, p, ul {
    text-align: center !important;
  }
  ul {
    list-style:none;
    padding-left: 0;
  }
}

body div #olark-wrapper button.olark-launch-button { /*must be more specifc than olark styles */
  bottom: 6px !important;
  top: auto !important;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
