chess-io/src/css/main.scss

@import "base";
@import "layout";
@import "index";
@import "game";

.alpha { font-size: 1.125rem; }
.center { text-align: center !important; }
.margin-fifty { margin: 50px 0; }
.last-origin { background: lighten($blue, 25%) !important; }
.last-target { background: lighten($blue, 20%) !important; }

@media only screen and (min-width: 760px) and (max-width: 900px) {
  header, #board-moves-wrapper {
    max-width: 760px;
  }
  #sounds-label {
    max-width: 530px;
  }
  #container-wrapper {
    max-width: 900px;
    padding: 1em 10px;
  }
  table#moves {
    margin-left: 0;
    float: right;
    height: 516px;
  }
  table#moves, #moves thead, #moves tbody tr {
    width: 200px;
  }
  #moves tbody tr td {
    width: 90px;
    margin: 0 5px;
  }
}

@media only screen and (min-width: 1400px) {
  #chat-wrapper {
    display: block;
  }
}

@media only screen and (max-width: 999px) {
  #captured-pieces {
    display: none;
  }
}

@media only screen and (min-width: 530px) and (max-width: 759px) {
  header, #board-moves-wrapper, #sounds-label {
    max-width: 530px;
  }
}

@media only screen and (max-width: 759px){
  html {
    font-size: 14px;
  }
  #form {
    fieldset {
      width: 100%;
      text-align: center;
    
      label {
        display: block;
        line-height: 45px;
        padding-left: 0;

        &::before {
          margin-left: -7em;
          margin-top: 0;
          right: auto;
        }
      }
    }
  }
  span#game-type{
    display: none;
  }
  #container-wrapper {
    max-width: 759px;
    padding: 1em 5px;
  }
  span.feedback {
    float: right;
    clear: none;
  }
  table#moves {
    margin-left: 0;
    margin-top: 0.5em;
    height: 258px;
  }
}

@media only screen and (max-width: 529px) {
  header, #board-moves-wrapper, #sounds-label {
    max-width: 470px;
  }
  #game-link {
    font-size: 1rem;
  }
  ul#clock {
    width: 118px;

    li {
      width: 55px;
    }
  }
  #container-wrapper {
    max-width: 529px;
    padding: 1em 5px;
  }
  .chessboard {
    border: 4px solid lighten($dark-purple, 10%);
    width: 456px;
    height: 456px;
    
    tr {
      width: 456px;
      height: 57px;

      td {
        width: 57px;
        height: 57px;
        line-height: 57px;

        a {
          width: 57px;
          height: 57px;
          font-size: 3.5rem;
        }
      }
    }
  }
}