styles.less

// out: styles.css

@move-highlight: #2a7bde;
@path-highlight: #8bc34a;
@drop-highlight: #ffeb3b;
@threaten-highlight: #f44336;
@highlight-alpha: 35%;

@light-space: #caab7c;
@dark-space: darken(@light-space, 22.5%);

@quantum-label: #f44336;

@square-size: 100vmin / 9;

.flex-horiz {
  display: flex;
  flex-direction: row;
}

.flex-vert {
  display: flex;
  flex-direction: column;
}

.flex-spacer {
  flex-grow: 1;
}

.no-select {
  user-select: none;
}

.board {
  .no-select;
  cursor: default;
  table-layout: fixed;
  border-width: 0px;
  border-collapse: collapse;

  td, th {
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }

  .board-space {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    .mixin--board-space(@base-color) {
      background-color: @base-color;
      .mixin--highlight(@highlight) {
        background-color: mix(@highlight, @base-color, @highlight-alpha);
      }
      &.legal-move {
        .mixin--highlight(@move-highlight);
      }
      &.threatened {
        .mixin--highlight(@threaten-highlight);
      }
      &.drop {
        .mixin--highlight(@drop-highlight) !important;
      }
      &.path {
        .mixin--highlight(@path-highlight) !important;
      }
    }
    &.light {
      .mixin--board-space(@light-space);
    }
    &.dark {
      .mixin--board-space(@dark-space);
    }
  }

  .square {
    width: @square-size;
    height: @square-size;
  }

  .board-header {
    font-size: @square-size * 0.3;
    font-family: sans-serif;
    text-align: center;

    &.file {
      width: @square-size;
      height: @square-size * 0.4;
    }

    &.rank {
      height: @square-size;
      width: @square-size * 0.4;
    }
  }
}

.piece {
  position: relative;
  width: @square-size;
  height: @square-size;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;

  &:hover:not(.captured) {
    filter: url("assets/filters.svg#blue-glow");
  }

  &.threatened, &.in-check {
    filter: url("assets/filters.svg#red-glow");
  }

  &.protected {
    filter: url("assets/filters.svg#yellow-glow");
  }

  @piece-types: king, queen, bishop, knight, rook, pawn;
  .loop(@t) when (@t > 0) {
    .loop((@t - 1));
    @type: extract(@piece-types, @t);

    &.@{type}{
      &.white {
        background-image: url("assets/pieces.svg#white-@{type}");
      }
      &.black {
        background-image: url("assets/pieces.svg#black-@{type}");
      }
    }
  }
  .loop(length(@piece-types));

  &.quantum {
    @size: @square-size / 2;
    width: @size;
    height: @size;
    margin: 0px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: flex-end;
  }
}

.quantum.label {
  @size: @square-size / 4;
  width: @size;
  height: @size;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: @size * 0.65;

  .mixin--label-color(@pair-idx; @color) {
    &.pair-@{pair-idx} {
      &.alpha {
        background-color: @color;
        color: contrast(@color);
      }
      &.beta {
        @dark-color: darken(@color, 10%);
        background-color: @dark-color;
        color: contrast(@dark-color);
      }
    }
  }

  .mixin--label-color(0, #f44336);
  .mixin--label-color(1, #1148bf);
  .mixin--label-color(2, #ffeb3b);
  .mixin--label-color(3, #4caf50);
  .mixin--label-color(4, #ff7300);
  .mixin--label-color(5, #9c27b0);
  .mixin--label-color(6, #00bcd4);
  .mixin--label-color(7, #795548);
  .mixin--label-color(8, #bdbdbd);
  .mixin--label-color(9, #e91e63);
}

.graveyard {
  border: 1px solid black;
  width: @square-size * 2.5;
  height: @square-size * 1.5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  .piece {
    @size: @square-size / 2;
    width: @size;
    height: @size;
    margin: 0;
  }
}

@check-alert-fg: #263238;
@check-alert-bg: #b0bec5;

@keyframes check-alert {
  0% {
    color: fade(@check-alert-fg, 0%);
    background-color: fade(@check-alert-bg, 0%);
    top: @square-size / 10;
  }
  10%, 40% {
    color: @check-alert-fg;
    background-color: @check-alert-bg;
    top: 0px;
  }
  100% {
    color: fade(@check-alert-fg, 0%);
    background-color: fade(@check-alert-bg, 0%);
    top: -@square-size / 3;
  }
}

.alert-container {
  position: absolute;
  display: none;
}

.alert {
  position: relative;
  display: inline;
  margin: auto;
  font-family: sans-serif;
  font-size: @square-size / 3;
  // border: 1px solid @check-alert-fg;
  border-radius: @square-size / 10;

  animation-name: check-alert;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

#turn-indicator-container {
  height: @square-size;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: @square-size / 5;
}

#turn-indicator {
  @size: @square-size * 0.7;
  width: @size;
  height: @size;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;

  &.white {
    background-image: url("assets/pieces.svg#white-king");
    filter: url("assets/filters.svg#drop-shadow");
    // This is on both as a workaround for some weird chrome bug
  }
  &.black {
    background-image: url("assets/pieces.svg#black-king");
    filter: url("assets/filters.svg#drop-shadow");
  }
}

#right-panel {
  @side-margin: @square-size / 10;
  padding-left: @side-margin;
  padding-right: @side-margin;
}

.scrollable {
  overflow-y: scroll;
}

.invisible * {
  display: none !important;
}