style.scss

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import '_utilities';

// refactor progress bar into class or mixin for two progress bars to share

// !! Create mixin for basic card styles

// !! IMPORT LIGHTER FONT WEIGHTS. REGULAR FONT SEEMS BOLD

$primary-color: #ffffff;
$secondary-color: #7768e4;
$background-color: #e3e8ec;
$font-color: #0d0d24;
$secondary-font-color: #bfbfc4;
$border-radius: 40px;
$border-radius-small: 15px;
$small-column-height: 240px;
$heading-font-size: 20px;
$icon-showcase-color: #353688;

* {
  /* CSS reset */
  box-sizing: border-box;
  /* border-box makes padding not effect the width/height of elements*/
  margin: 0;
  padding: 0;
  font-size: 16px;

  /* font-size for rem */
}

img {
  border: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: $background-color;
}

@mixin container {
  overflow: auto;
}

@mixin city-card {
  box-shadow: 1px 1px 1px 1px $background-color; //put in mixin
  border: 1px solid $background-color;
  border-radius: $border-radius-small;
  max-height: 8rem;
  background: $primary-color;
  // transition for being deleted
  transition: all 1s ease;
}

.current-temp-side {
  height: 14rem;
  width: 7rem;
  position: absolute;
  top: 120px;
  display: flex;
  flex-direction: column;

  .current-icon {
    background: #353688;
    opacity: 0.9;
    height: 100%;
    z-index: 1;
    width: 100%;
    // Order: Top-left,Top-right, bottom-right,botttom-left
    border-radius: 0% 20% 20% 0%;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .current-conditions {
    color: $primary-color;
  }
  .showcase-icon {
    height: 70%;
    width: 70%;
    border-radius: 50px;
    padding: 0rem;
  }

  .current-temp {
    background: #7768e4;
    opacity: 0.9;
    color: $primary-color;
    height: 100%;
    width: 100%;
    border-radius: 0% 20% 20% 0%;

    display: flex;
    align-items: center;
    justify-content: center;

    p {
      font-size: 2rem;

      font-weight: bold;
    }
  }
}

.main-container {
  @include container;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  align-items: space-between;
  justify-content: space-between;
  gap: 2.5rem;
  background: $primary-color;
  height: 95%;
  padding: 50px;
  border-radius: $border-radius;
  margin: 5rem auto;
  justify-items: stretch;
  align-items: stretch;
  max-width: 90%;
}

.showcase-container {
  max-width: 80vw;
  max-height: 30vh;
  position: relative;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;

  /* overflow hidden so no scroll bar on extra content that overflows its container */
  overflow: hidden;
}

.showcase-container video {
  min-width: 100%;
  min-height: 100%;
  /* similar to background positioning */
  object-fit: cover;

  /* This block of code fixes effect where the video was not scaling with the size of the device */
  position: absolute;
  /* moves this down from the top 50% and left 50%
    The video element winds up in bottom right corner after this but 
    it is the CENTER of the video frame like we want because we want the frame to scale and always stay in the middle */
  top: 50%;
  left: 50%;
  /* This property translates along the x & y axis. Same concept of translating triangles in math.
    By using translate we are able to move the video back to normal position
    */
  transform: translate(-50%, -50%);
}

.video-container:after {
  /* content goes here if you want but CSS needs the content property whether you put some or not */
  content: '';
  /* absolute positioning to take out of document flow and position like video container */
  position: absolute;
  /* since we dont want element to move from top left corner we set the top and left properties to 0
  and then set the width and height to 100% so element takes up entire vh & vw */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;

  /* rgba = Red, green,blue, alpha 
      using rgba colors is a more elegant way of achieving the same transluscent effect opacity gives
      the last value, the a value is the value for OPACITY of the color  
  */
  background: rgba(4, 6, 13, 0.6);
}

.content {
  /* Sets the container wrapping the content to a high z index to be placed on top of the video container.
  This is possible because of the video containers absolute positioning. It is removed out of document flow and content container takes its place */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

header {
  width: 80vw;
  height: 30vh;
  margin: 0 auto;
  border-radius: $border-radius;
  grid-column: 1/5;
  grid-row: 1/3;
  // padding: 2rem;

  .current-temp-showcase-2 {
    font-size: 1.5rem;
  }

  .showcase-icon-2 {
    height: 3.5rem;
    width: 3.5rem;
    padding-bottom: 10px;
    border: none;
  }

  .temp {
    display: none;
  }

  .showcase-location {
    font-size: 2rem;
    text-shadow: 1px white;
    //color: white;
    font-weight: normal;
    padding-bottom: 0px;
  }

  .current-temp-showcase-2 {
    margin-top: 5px;
  }

  .location {
    display: flex;
    z-index: 11;

    .fas {
      padding: 10px;
      margin-top: 5px;
      color: $secondary-color;
    }
  }

  .fa-sync-alt {
    font-size: 1.5rem;
  }

  .fa-sync-alt:active {
    transform: translateY(4px);
    color: green;
  }
}

.temp {
  display: flex;
  z-index: 11;
  padding-left: 2rem;
}

.column-small {
  height: $small-column-height;
}

.fa-sun {
  color: #ff8838;
}

.fa-wind {
  color: #b8b9bd;
}

.fa-cloud-showers-heavy,
.fa-cloud,
.fa-cloud-sun {
  color: $secondary-color;
  //  #91AAB4;
}

.fa-arrow-alt-circle-down,
.fa-arrow-alt-circle-up {
  color: #ffde4c;
}

.weather-icon {
  // weather icon from open weather map

  width: 3.125rem;
  height: 3.124rem;
  border: none;
}

.fa-location-arrow {
  color: $secondary-color;
}

.fa-plus-square {
  color: $icon-showcase-color;
}

.showcase-icon {
  border: none;
  width: 3.5rem;
  height: 3.5rem;
}

.forecast {
  &-heading {
    margin: 0px 0px 1rem 1rem;
    font-size: $heading-font-size;

    &-bold {
      font-weight: bold;
      font-size: $heading-font-size;
    }
  }

  &-container {
    display: grid;
    flex-direction: column;
    grid-template-rows: 1fr;
    gap: 1.5rem;
    height: $small-column-height;
  }

  &-card {
    box-shadow: 1px 1px 1px 1px $background-color; //put in mixin
    border: 1px solid $background-color;
    border-radius: $border-radius-small;
    font-size: 20px;
    height: 4rem;

    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 0.5fr 1.5fr 1fr;

    i {
      padding-left: 1rem;
    }

    .conditions {
      font-size: 0.8rem;
      color: $secondary-font-color;
    }

    .day,
    .conditions {
      padding: 0 2px;
    }

    .cloud-blue {
      // background color for dark background for rainy/cloudy conditions. Used by JS to change color
      background: $secondary-color;
      border-color: $secondary-color;
      color: $primary-color;
    }
  }

  &-text {
    padding: 5px;
  }

  &-num {
    background: #dee7f4;
    border: 10px solid #dee7f4;
    height: 110%;
    width: 110%;
    color: #0d0d24;
    border-radius: $border-radius-small;

    display: flex;
    align-items: center; /* y */
    justify-content: center; /* x */

    p {
      font-size: 0.9rem;
    }
  }
}

.highlights {
  height: 100%;
  grid-column: 2/4;

  .humidity {
    &-text {
      align-self: center;

      span {
        font-size: 2rem;
        font-weight: bold;
      }
    }
  }

  .fas {
    padding: 0px;
  }

  .sunrise-sunset {
    &-text {
      align-self: center;
      display: flex;
      flex-direction: column;

      .sunrise-text,
      .sunset-text {
        padding: 0 0.2rem 0rem 2rem;
        font-weight: bold;
        font-size: 1.5rem;
      }

      p {
        padding: 0.3rem 0;
      }
    }
  }

  .wind {
    // add as mixin for .wind and humidity to share
    &-speed,
    &-direction {
      align-self: center;
    }

    &-speed {
      span {
        font-size: 2rem;
        font-weight: bold;
      }
    }
  }

  .uv-index {
    width: 90%;
    height: 2rem;
    border: 1px solid $background-color;
    border-radius: $border-radius;
    background: #f9f9f9;
    margin: 0 auto;

    display: flex;
    flex-direction: column;

    &-progress {
      color: $primary-color;
      border-radius: $border-radius-small;
      font-weight: bold;

      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &-heading {
    margin: 0px 0px 1rem 1rem;
    font-size: $heading-font-size;

    &-bold {
      font-weight: bold;
      font-size: $heading-font-size;
    }
  }

  &-container {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    padding: 0;
  }

  &-1,
  &-2 {
    display: flex;
    flex-direction: column;
  }

  &-1,
  &-2 {
    width: 100%;
    height: 100%;
    display: flex;

    padding: 0.5rem;
  }

  &-card {
    min-height: 6rem;
    box-shadow: 1px 1px 1px 1px $background-color;
    border: 1px solid $background-color;
    border-radius: $border-radius-small;
    padding: 1rem;
    margin: 0.5rem 0;

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    &-heading {
      color: $secondary-font-color;
      padding: 0 0 2% 5%;
    }
  }

  i {
    padding: 0 10px;
  }

  h2 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-left: 0 auto;
    color: #0d0d24 span {
      font-weight: normal;
      font-size: 2rem;
    }
  }
}

.cities {
  grid-row: 2/4;
  grid-column: 4/5;
  max-height: 31.25rem;
  // higher z-index to sit on top of header with background video
  z-index: 12;

  @include container;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1rem;

  .add {
    padding: 0.5rem;
    max-height: 4.5rem;
    display: flex;
    /* X */
    align-content: space-between;

    /* y */
    justify-content: center;

    input {
      max-width: 80%;
      min-height: 100%;
      min-width: 70%;
      border: none;
      background-color: $primary-color;
    }

    // css property for when text fields are in use, similar to active
    input:focus {
      outline: none;
    }

    .fa-plus-square {
      margin: 0 auto 0 3rem;
    }
  }

  &-selection {
    @include city-card;
    display: flex;
    flex-direction: column;

    .fa-times-circle {
      pointer-events: none;

      /* css property makes you not be be able to click on html element anymore 
                We use this so icon tag does not block button event listener 
            */

      color: #ff6259;
    }

    .location-button {
      background: none;
      border: none;
      margin-top: 0.3rem;
    }

    &-add-location {
      padding: 0.5rem;
      border: 1px solid $background-color;
      border-radius: 10px;
    }

    &-add-location:active {
      border: none;
    }

    .weather-icon-cities {
      width: 5rem;
      height: 5rem;
    }

    .cities-icon-container {
      background: #dee7f4;
      border: 1px solid #dee7f4;
      border-radius: $border-radius-small;
      justify-self: flex-start;
      margin-right: 1.5rem;
    }
  }

  .fall {
    // animation for deleting cities
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0;
  }

  &-main-data {
    padding-bottom: 1rem;
    justify-content: space-between;
    .cities-temp {
      border-right: 1px solid $secondary-font-color;
    }

    .cities-temp {
      font-size: 1.5rem;
    }

    .city {
      padding-left: 0.5rem;
      font-size: 1.1rem;
    }

    button {
      /* x*/

      //y
      align-self: center;

      position: relative;

      border: none;
      background: none;
      margin-right: 0.5rem;
      margin-top: 0.5rem;
      padding: 0.5rem;
    }
  }

  &-advanced-data {
    /* x axis */
    justify-content: space-between;
    padding: 0 1rem;
    .middle-data {
      border-right: 1px solid $secondary-font-color;
      border-left: 1px solid $secondary-font-color;
      padding: 0 1rem;
    }

    p {
      color: $secondary-font-color;
    }
  }

  &-main-data,
  &-advanced-data {
    display: flex;
    align-items: center;
  }
}

// you shouldnt have to add media query here
@media (prefers-color-scheme: light) {
  .showcase-location,
  .temp {
    color: white;
  }
}

@media (prefers-color-scheme: dark) {
  // find better bg image for darkmode
  $primary-color: #232733;
  $background-color: #2b2f3f;
  $font-color: #ffffff;
  $secondary-font-color: #7598bd;

  .showcase-location {
    color: #b9babd;
  }

  body {
    background: #6d7e8c;
  }

  .fa-moon {
    color: #7f7d94; // add better color
  }

  .fa-arrow-alt-circle-down,
  .fa-arrow-alt-circle-up {
    color: #adadc7;
  }

  * {
    color: #b9babd; // !! REFACTOR THIS SELECTOR STORE IN A VARIABLE
  }

  .fa-sync-alt {
    color: $secondary-font-color;
  }

  .cities {
    .add {
      input {
        background-color: $primary-color;
      }

      .fa-plus-square {
        color: $secondary-font-color;
      }
    }
  }

  .main-container {
    background: $primary-color;
  }

  .forecast-card,
  .highlights-card,
  .cities-selection {
    background: $background-color;
    box-shadow: none;
    border: none;
  }

  .day {
    font-weight: bold;
  }

  .highlights {
    .uv-index {
      border: none;
      color: $font-color; // ! REFACTOR THIS SELECTOR IT ISNT WORKING WITHOUT IMPORTANT
    }
  }

  .forecast-num {
    background: $secondary-font-color;
    border: 10px solid $secondary-font-color;
    height: 100%;
    width: 110%;

    border-radius: $border-radius-small;

    p {
      font-size: 0.9rem;
      color: #ffffff;
    }
  }
}

@import '_mobile';