board-game/css/less/client.less

an online board game engine

@import 'theme';

* { padding: 0; margin: 0; box-sizing: border-box; }
[v-cloak] {
  .hidden;
}
* {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
input[type=text], input[type=number] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
a { cursor: pointer; }

@media screen and (min-width: 160px) { html { font-size: 10px; } }
@media screen and (min-width: 320px) { html { font-size: 12px; } }
@media screen and (min-width: 360px) { html { font-size: 14px; } }
@media screen and (min-width: 640px) { html { font-size: 16px; } }
@media screen and (min-width: 768px) { html { font-size: 18px; } }
@media screen and (min-width: 996px) { html { font-size: 20px; } }
@media screen and (min-width: 1200px) { html { font-size: 22px; } }
@media screen and (min-width: 1800px) { html { font-size: 24px; } }

html, body {
  overflow: hidden;
  touch-action: none;
  .min-width;
  .text-center;
  .full;
}
.web-console {
  .text-left;
}

input {
  font-size: 1rem;
  padding: 0.5em;
}
.seo { width: 0; height: 0; overflow: hidden; }

#app, .main {
  .full;
}

@keyframes lazy_loading {
  0% { opacity: 0 }
  75% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes flash_tip {
  0% { opacity: 0.8 }
  10% { opacity: 0.5 }
  20% { opacity: 0.8 }
  30% { opacity: 0.5 }
  40% { opacity: 0.8 }
  50% { opacity: 0.5 }
  60% { opacity: 0.8 }
  70% { opacity: 0.5 }
  80% { opacity: 0.8 }
  90% { opacity: 0.5 }
  100% { opacity: 0.8 }
}

body {
  .loading {
    .absolute(99999);
    .full;
    .alpha;
    animation: lazy_loading 1.6s;
    > .icon {
      .full;
      .flex-center;
    }
  }

  .modal {
    overflow: auto;
    .absolute(20);
    .full;
    p {
      padding: 0.2em 0.5em;
      text-indent: 2em;
      .text-left;
    }
    &.alert {
      z-index: 999999;
    }
  }

  .dialog {
    .absolute(20);
    .full;
    .alpha;
    .flex-center;
    &.alert {
      z-index: 21;
    }
    > .body {
      padding: 1em;
      border-radius: 1em;
      box-shadow: black 0 0 2em;
      max-width: 30em;
      border-width: 5px;
      border-style: solid;
      .min-width;
      > .content {
        padding: 2em 0;
        &.settings, &.login {
          .flex-row;
          .wrap;
          > p {
            padding: 0.5em 1em;
            min-width: 50%;
            .text-left;
            > .description {
              font-size: 0.75em;
            }
          }
        }
        input, select{
          line-height: 1.5em;
          padding: 0.5em;
          vertical-align: middle;
          min-width: 5em;
          background-color: #808080;
          color: #ffffff;
          border-width: 2px;
          border-style: solid;
        }
        input[type=text], select {
          min-width: 5em;
        }
        a.addon {
          border-width: 2px;
          border-style: solid;
          border-right-width: 0;
          border-radius: 0.5em 0 0 0.5em;
          line-height: 1.5em;
          padding: 0.5em;
          word-break: keep-all;
          display: inline-block;
          vertical-align: middle;
        }
        input + a.addon {
          border-radius: 0 0.5em 0.5em 0;
          border-right-width: 2px;
          border-left-width: 0;
        }
      }
    }
  }

  .blur {
    filter: blur(3px);
  }

  @media screen and (max-width: 767px) {
    .dialog > .body {
      width: 100% !important;
    }
  }

  .btn-group {
    .flex;
    .flex-none;
    > .btn {
      margin: 0.5em;
      border-radius: 0.5em;
      line-height: 1.5em;
      padding: 0.5em 1.5em;
      word-break: keep-all;
      border-width: 2px;
      border-style: solid;
      .flex-1;
      .flex-center;
      > * {
        .flex-1;
      }
      > i {
        .flex-none;
      }
    }
  }

  input[type=checkbox] {
    opacity: 0;
    width: 2.5em;
    height: 1.5em;
    .absolute(1);
    + label {
      width: 2.5em;
      height: 1.5em;
      line-height: 1em;
      border-radius: 0.75em;
      vertical-align: middle;
      position: relative;
      display: inline-block;
      &:before {
        content: " ";
        width: 1.5em;
        height: 1.5em;
        border-radius: 0.75em;
        box-sizing: border-box;
        top: 0;
        left: 0;
        transition: left 0.5s;
        border-width: 1px;
        border-style: solid;
        pointer-events: none;
        .absolute(2);
      }
    }
    &:checked + label:before {
      left: 1em;
    }
  }

  .panel {
    .full;
    .flex-column;
    > div {
      .flex-1;
    }
    > .top, > .btn-group {
      .flex-none;
    }
  }

  .top {
    font-size: 1.5em;
    line-height: 2em;
    height: 2em;
    box-shadow: gray 1px 1px;
    .width;
    .flex-none;
    > .btn {
      width: 2em;
      padding: 0.25em 0.25em 0;
      line-height: 0.5em;
      > span {
        font-size: 0.5rem;
      }
    }
  }

  .more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 2.5em;
    right: 1em;
    font-size: 1.5em;
    border-width: 0.125em;
    border-style: solid;
    min-width: 5em;
    border-radius: 0.5em;
    .absolute(20);
    &:before {
      content: '';
      border-style: solid;
      border-width: 0.5em;
      border-top-width: 0;
      border-color: transparent;
      overflow: hidden;
      top: -0.5em;
      right: 1.5em;
      .absolute(21);
    }
    > .btn {
      align-items: center;
      padding: 0.25em;
      .width;
      .flex-row;
      > i {
        .flex-none;
      }
      > span {
        .text-left;
        .flex-1;
      }
    }
  }

  .hall {
    .flex;
    overflow: hidden;
    > * {
      .flex-1;
    }
    > .controls {
      .flex-none;
      &.btn-group > .btn {
        border-radius: 0.5em;
        border: 0;
      }
    }
    .rooms {
      display: grid;
    }
    .room {
      border-radius: 0.5em;
      margin: 0.5em 0;
      height: 6em;
      .flex;
      .justify(space-between);
      > .title {
        font-size: 4em;
        line-height: 1.5em;
        padding-left: 0.5em;
        min-width: 1.5em;
      }
      > .message {
        min-width: 10em;
        text-align: right;
        padding: 1em;
        .flex-1;
      }
    }
  }

  .teams {
    padding: 0.25em;
    > .team {
      padding: 0.25em;
      > .head {
        border-radius: 5px;
        .flex-center;
      }
      > .roles {
        > .role {
          border-radius: 5px;
          .flex-center;
          > div {
            .flex-center;
            .full;
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {

    .hall {
      .column;
      > .controls {
        .width;
      }
      .btn-group > .btn {
        height: 3em;
        .justify(space-around);
        > i {
          font-size: 1em;
        }
        &.btn-simple {
          .flex-none;
          width: 3em;
          padding: 0.5em;
          > span {
            .hidden;
          }
          > i {
            margin-left: 0;
            margin-right: 0;
          }
        }
      }
      .rooms {
        grid-auto-rows: 11em;
      }
      .room {
        height: 10em;
        margin: 0.5em;
        .wrap;
        > .btn-group {
          .width;
          .justify(flex-end);
          > .btn {
            .flex-none;
          }
        }
      }
    }

    .teams {
      .flex;
      .align(flex-start);
      .nowrap;
      > .team {
        .flex-1;
        .flex-column;
        .nowrap;
        > .head {
          margin: 0.25em 0;
          height: 1.5em;
        }
        > .roles {
          .align(center);
          .flex-1;
          .flex-column;
          .nowrap;
          > .role {
            .flex-1;
            margin: 0.25em 0;
            min-width: 10em;
            max-width: 25em;
            min-height: 3em;
            max-height: 5em;
            .full;
          }
        }
      }
    }
  }

  @media screen and (min-width: 768px) {
    .modal {
      .btn-group {
        .row;
        .justify(center);
        > .btn {
          .flex-none;
        }
      }
    }

    .hall {
      .row;
      > .controls {
        .column;
        width: 7em;
      }
      .btn-group > .btn {
        padding: 0.5em 1em;
        word-break: normal;
        .column;
        .flex-none;
        > i {
          font-size: 2.5em;
          padding: 0.2em 0;
        }
      }
      .rooms {
        grid-auto-rows: 7em;
      }
      .room {
        margin: 0.5em;
        > .btn-group {
          float: right;
          height: 6em;
          width: 6em;
          line-height: 6em;
          > .btn > i {
            font-size: 1.5em;
          }
        }
      }
    }

    .teams {
      > .team {
        .flex-row;
        > .head {
          margin: 0.25em;
          width: 3em;
          writing-mode: vertical-lr;
          > i {
            width: 1em;
          }
        }
        > .roles {
          .flex-1;
          .flex-row;
          .wrap;
          > .role {
            margin: 0.25em;
            min-width: 12em;
            min-height: 3em;
            max-height: 5em;
          }
        }
      }
    }
  }

  @media screen and (min-width: 1200px) {
    .hall {
      .rooms {
        grid-template-columns: 50% 50%;
        grid-auto-rows: 7em;
      }
    }
  }

  .game {
    background: white;
    .full;
    > div {
      .full;
    }
  }

  .unsupported {
    color: red;
    .hidden;
    .center;
    .absolute(9999);
    .full;
    &:before {
      font-size: 5em;
    }
  }

  .result {
    .align(center);
    .absolute(20);
    .full;
    .flex-column;
    > .title {
      font-size: 3em;
    }
    > .btn-group {
      .width;
    }
  }

  .control-container {
    width: 0 !important;
    height: 0 !important;
    > .close {
      font-size: 0.8em;
      background-color: #aaaaaa;
      opacity: 0.8;
      width: 2em;
      height: 2em;
      .absolute(600);
      &.flash_tip {
        animation: flash_tip 0.5s;
      }
      &.top {
        top: 0;
      }
      &.bottom {
        bottom: 0;
      }
      &.left {
        left: 0;
      }
      &.right {
        right: 0;
      }
    }
    > .control {
      opacity: 0.75;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      .absolute(500);
      .flex;

      &.half {
        width: 50%;
      }

      > .direction {
        .flex-1;
        .height;

        > div {
          .full;
        }

        .area {
          width: 40vmin;
          height: 40vmin;
          left: 0;
          bottom: 0;
          border-radius: 50%;
          background: @control_area_bg;
          .absolute(501);

          > .bg {
            width: 40vmin;
            height: 40vmin;
            border-radius: 50%;
            overflow: hidden;
            .absolute(502);

            > div {
              text-shadow: 0 0 0.25em white;
              .absolute(503);
              .flex-center;

              &.active {
                color: orange;
              }
            }

            > .up {
              width: 10vmin;
              height: 8vmin;
              left: 15vmin;
              top: 7vmin;
            }

            > .right {
              width: 8vmin;
              height: 10vmin;
              left: 25vmin;
              top: 15vmin;
            }

            > .down {
              width: 10vmin;
              height: 8vmin;
              left: 15vmin;
              top: 25vmin;
            }

            > .left {
              width: 8vmin;
              height: 10vmin;
              left: 7vmin;
              top: 15vmin;
            }

            > .upright {
              width: 8vmin;
              height: 8vmin;
              left: 23vmin;
              top: 9vmin;
            }

            > .downright {
              width: 8vmin;
              height: 8vmin;
              left: 23vmin;
              top: 23vmin;
            }

            > .downleft {
              width: 8vmin;
              height: 8vmin;
              left: 9vmin;
              top: 23vmin;
            }

            > .upleft {
              width: 8vmin;
              height: 8vmin;
              left: 9vmin;
              top: 9vmin;
            }

            @direction-border: 1px solid white;

            &.four {
              font-size: 4vmin;

              > div {
                border: @direction-border
              }

              > .up, > .down {
                border-top: 0;
                border-bottom: 0;
              }

              > .right, > .left {
                border-right: 0;
                border-left: 0;
              }
            }

            &.eight {
              font-size: 3vmin;

              > .upright, > .downright, > .downleft, > .upleft {
                font-size: 1.2em;
              }
            }
          }

          .handle {
            top: 15vmin;
            left: 15vmin;
            right: 15vmin;
            bottom: 15vmin;
          }
        }

        .handle {
          cursor: pointer;
          width: 10vmin;
          height: 10vmin;
          border-radius: 50%;
          background: @control_button_bg;
          .absolute(505);
          .flex-center;
        }
      }

      > .buttons {
        .flex-1;
        .height;

        > .button {
          cursor: pointer;
          font-size: 8vmin;
          width: 20vmin;
          height: 20vmin;
          border-radius: 50%;
          background: @control_button_bg;
          .absolute(501);
          .flex-center;
        }

        &.square {
          > .a {
            right: 20vmin;
            bottom: 20vmin;
          }

          > .b {
            right: 0;
            bottom: 20vmin;
          }

          > .x {
            right: 20vmin;
            bottom: 0;
          }

          > .y {
            right: 0;
            bottom: 0;
          }

          > .row {
            right: 10vmin;
          }

          > .column {
            bottom: 10vmin;
          }
        }
      }
    }
  }
}