rooster.io/resources/less/style.less

//style.less
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');

.notice {
  background-color: #BB4848;
  border: solid 1px #A22F2F;
  box-shadow: 0px 0px 5px #A53838;
  width: 600px;
  padding: 15px;
  text-align: center;
  margin: 30px auto;
  border-radius: 3px;
  color: #FFF;
}

.night {
  background-color: black;
  color: #C1C1C1;

  #title {
    color: #C1C1C1;
  }

  input[type="text"], input[type="password"] {
    background-color: black;
    color: #C1C1C1;
  }

  .bar {
    background-color: #333;
    color: #C1C1C1;
  }

  .hour {
    border-color: #515151 !important;
  }

  .found li {
    border-color: #515151 !important;

    &:hover {
      background-color: #333;
    }
  }

  .schedule ul > li a {
    color: #C1C1C1 !important;
  }
}

span.duringschool {
  color: #C41824 !important;
}

div.duringschool {
  background-color: #C41824 !important;
}

.big {
  margin-top: 10%;
}

.center {
  text-align: center;
}

.motd {
  border: solid 1px red;
  display: block;
  font-size: 13px;
  width: 300px;
  border: solid 1px #000;
  border-radius: 5px;
  padding: 0;
  position: absolute;
  top: 15px;
  left: 15px;


  p {
    padding: 10px 10px;
    margin: 0px;
  }
}

.notfound {
  margin: 20px auto;
}

ul.found {
  list-style: none;
  text-align: center;
  margin-top: 20px;

  li {
    border-bottom: solid 1px #AAA;
    border-top: solid 1px #DDD;
    padding: 0;
    margin: 0 auto;
    font-size: 25px;
    width: 50%;

    a {
      text-decoration: none;
      color: inherit;
    }

    &:last-child {
      border-bottom: none;
    }

    &:first-child {
      border-top: none;
    }

    &:hover {
      background-color: #E1E1E1;
    }
  }
}

input.search {
  text-align: center;
  margin: 12px auto;
  width: 50%;
  display: block;
  font-family: Open Sans;
}

.bar {
  height: 20px;
  width: 100%;
  background-color: #0C5489;
  margin-bottom: 50px;

  ul {
    list-style: none;
    display: inline;

    &.right li {
      float: right;
    }

    li {
      display: inline-block;
      margin: 0 7px;
      font-size: 13px;
      color: #FFF;

      a {
        text-decoration: none;
        color: inherit;

        &:hover {
          color: #DDD;
        }

        &:active {
          color: #CCC;
        }
      }
    }
  }

}

h1#title {
  font-size: 8rem;
  font-family: Oswald;
  letter-spacing: 0px;
  text-align: center;
  text-transform: uppercase;

  span {
    font-size: 3rem;
    letter-spacing: -2px;
    position: relative;
    display: inline-block;

     > span {
       color: #0C5489;
       position: relative;
       display: inline-block;
    }
  }
}


div.schedule {
  display: table;
  margin: 10px auto;
  font-family: Open Sans;

  &.rip {
    text-align: center;
    border: none;

    sup {
      font-size: 10px;
      position: relative;
      top: -25px;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;

    li {
      width: 25px;
      height: 25px;
      color: #FFF;
      font-family: Oswald;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      -webkit-transition: 1s ease;

      &:hover {
        -webkit-transition: 1s ease;
        width: 200px !important;
      }

      &:first-child span {
        background-color: #0C5489;
      }

      &:last-child span {
        background-color: #C41824;
      }

      span {
        width: 25px;
        height: 25px;
        display: inline-block;
        background-color: #96AA48;
      }

      a {
        text-decoration: none;
        color: #000;
      }
    }
  }

  div.day {
    float: left;

    &:nth-child(2) {
      .hour {
        border-left: none !important;
      }
    }

    div.hour {
      width: 220px;
      height: 45px;
      line-height: 45px;
      padding: 12px 0px;
      position: relative;
      border-bottom: solid 1px #000;
      border-left: solid 1px #000;


      &:last-child {
        border-bottom: none;
      }

      a {
         text-decoration: none;
         color: inherit;
      }

      span {
        display: inline-block;
        width: 33%;

        &.sub_2 {
           position: relative;
           top: -15px;
        }
      }

      .teacher {
        text-align: left;
        position: relative;
        left: 15px;
      }

      .chamber {
        text-align: center;
      }

      .course {
        text-align: right;
        position: relative;
        right: 15px;
      }

      &.changed {
        color: red !important;
      }

      &.current {
        background-color: #0C5489;
        color: #FFF;
        text-shadow: 0px -1px 0px #020000;
      }

      &.title {
        text-align: center;
        background-color: #000;
        color: #FFF;
        text-transform: uppercase;
        font-family: Oswald;

        span {
          text-align: center;
          width: 100%;
        }
      }

      .time {
          font-size: 10px;
          color: #665;
          width: 100%;
          position: absolute;
          top: 2px;
          left: 5px;
      }

      .free {
        .changed;
        text-align: center;
        width: 100%;
      }
    }
  }
}

.linkbar {
    width: 100%;
    position: fixed;
    bottom: -80px;
    transition: ease .5s;

    &:hover {
        bottom: 0px;
        transition: ease .5s;
    }

    div {
        height: 100px;
        width: calc(100% / 3);
        float: left;


        a {
            text-decoration: none;
            height: 100%;
            width: 100%;
            display: inline-block;
            color: #FFF;
            text-align: center;
            font-size: 60px;
        }
    }
}

.login {
  margin: 0 auto;
  width: 200px;
  text-align: center;
}

@import "mobile";