<commit_before>@import './variables';
@import './functions_mixins';

* {
  transition: all 0.3s;
};

.layout-row {
  display: flex;
  justify-content: space-between;
  background-color: $colorBackground;
};

.matrix-container {
  width: $matrixLength;
  height: $matrixLength;
  margin: auto;
};

.blank-matrix {
  width: $matrixLength;
  height: $matrixLength;
  margin: auto;
  background: $colorLightest;
};

.matrix-table {
  width: 100%;
  height: 100%;
  background-color: $colorLighter;
};

.tone {
  width: 27px;
  height: 27px;
  background-color: $colorLightest;
  cursor: pointer;
  transition: all 0.3s;

  &.active {
    background-color: $colorLighter;
  }

  &:hover {
    background-color: $colorDark;
  };

  &.column-active {
    background-color: $colorLighter;

    &.active {
      background-color: $colorDark;
    }
  }
};

.tracks-container {
  display: flex;
};

.mini-tone {
  width: 3px;
  height: 3px;
  background-color: $colorLightest;
  border-left: 1px solid $colorDark;
  border-bottom: 1px solid $colorDark;
  box-sizing: border-box;

  &.column-active {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorDark;
  }
};

.mini-matrix-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
};

.add-track-button-container {
  @include flex_centered();
  width: $miniMatrixLength;
  height: $miniMatrixLength;
  background: $colorLight;
  cursor: pointer;
  border: 1px solid $colorDark;
  font-size: 30px;
  cursor: pointer;
};

.track-container {
  border: 1px solid $colorDark;
  opacity: 0.8;

  &.active {
    opacity: 1;
  }
};

.mini-matrix-container {
  width: $miniMatrixLength;
  height: $miniMatrixLength;
  background-color: $colorLightest;
  cursor: pointer;
};

.instrument-selector-container {
  position: relative;
}

.instrument-icon-container {
  @include flex_centered();
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  cursor: pointer;

  &:hover {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorLightest;
  }
}

.instrument-switch-icon-container { // TODO this and above are real similar
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  @include flex_centered();

  &:hover {
    transform: rotate(360deg);
  }
}

.instrument-selector-dropdown {
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  position: absolute;
  overflow: hidden;
  background-color: $colorLight;
  font-size: 30px;

  &:hover {
    // magic num = num instruments + num tunings + 1 + room for the <hr>
    height: $miniMatrixLength * 7 + 20px;
  }
}

.instrument-selector-place-holder { // adds doc flow space holder
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  z-index: -1;
}

.tuning-icon-container {
  @include flex_centered();
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  cursor: pointer;

  &:hover {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorLightest;
  }
}

.track-body-container {
  width: $trackBodyWidth;
  height: $trackBodyHeight;
  background-color: $colorLightest;
};

.track-remove-button-container {
  @include flex_centered();
  width: $trackRemoveButtonLength;
  height: $trackRemoveButtonLength;
  background-color: $colorLight;
  cursor: pointer;
  font-size: 30px;
};

.slot {
  height: $trackBodyHeight / 8; // TODO un-hardcode
  border-bottom: 1px solid $colorBackground;
  cursor: pointer;
  background-color: $colorLightest;

  &:hover {
    background: $colorDark;
  }

  &.active {
    background: $colorLighter;
  }

  &.playing {
    box-shadow: inset 0 0 50px $colorLightest;
  }
};

.play-button-container {
  @include flex_centered();
  width: 100px;
  background: $colorLight;
  height: $mainMenuHeight;
  line-height: 50px;
  font-size: 30px;
  margin-left: auto;
  cursor: pointer;
  border-radius: 4px;
};
<commit_msg>Switch background to whole shebang<commit_after>@import './variables';
@import './functions_mixins';

* {
  transition: all 0.3s;
};

body {
  background-color: $colorBackground;
}

.layout-row {
  display: flex;
  justify-content: space-between;
};

.matrix-container {
  width: $matrixLength;
  height: $matrixLength;
  margin: auto;
};

.blank-matrix {
  width: $matrixLength;
  height: $matrixLength;
  margin: auto;
  background: $colorLightest;
};

.matrix-table {
  width: 100%;
  height: 100%;
  background-color: $colorLighter;
};

.tone {
  width: 27px;
  height: 27px;
  background-color: $colorLightest;
  cursor: pointer;
  transition: all 0.3s;

  &.active {
    background-color: $colorLighter;
  }

  &:hover {
    background-color: $colorDark;
  };

  &.column-active {
    background-color: $colorLighter;

    &.active {
      background-color: $colorDark;
    }
  }
};

.tracks-container {
  display: flex;
};

.mini-tone {
  width: 3px;
  height: 3px;
  background-color: $colorLightest;
  border-left: 1px solid $colorDark;
  border-bottom: 1px solid $colorDark;
  box-sizing: border-box;

  &.column-active {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorDark;
  }
};

.mini-matrix-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
};

.add-track-button-container {
  @include flex_centered();
  width: $miniMatrixLength;
  height: $miniMatrixLength;
  background: $colorLight;
  cursor: pointer;
  border: 1px solid $colorDark;
  font-size: 30px;
  cursor: pointer;
};

.track-container {
  border: 1px solid $colorDark;
  opacity: 0.8;

  &.active {
    opacity: 1;
  }
};

.mini-matrix-container {
  width: $miniMatrixLength;
  height: $miniMatrixLength;
  background-color: $colorLightest;
  cursor: pointer;
};

.instrument-selector-container {
  position: relative;
}

.instrument-icon-container {
  @include flex_centered();
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  cursor: pointer;

  &:hover {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorLightest;
  }
}

.instrument-switch-icon-container { // TODO this and above are real similar
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  @include flex_centered();

  &:hover {
    transform: rotate(360deg);
  }
}

.instrument-selector-dropdown {
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  position: absolute;
  overflow: hidden;
  background-color: $colorLight;
  font-size: 30px;

  &:hover {
    // magic num = num instruments + num tunings + 1 + room for the <hr>
    height: $miniMatrixLength * 7 + 20px;
  }
}

.instrument-selector-place-holder { // adds doc flow space holder
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  z-index: -1;
}

.tuning-icon-container {
  @include flex_centered();
  height: $miniMatrixLength;
  width: $miniMatrixLength;
  cursor: pointer;

  &:hover {
    background-color: $colorLighter;
  }

  &.active {
    background-color: $colorLightest;
  }
}

.track-body-container {
  width: $trackBodyWidth;
  height: $trackBodyHeight;
  background-color: $colorLightest;
};

.track-remove-button-container {
  @include flex_centered();
  width: $trackRemoveButtonLength;
  height: $trackRemoveButtonLength;
  background-color: $colorLight;
  cursor: pointer;
  font-size: 30px;
};

.slot {
  height: $trackBodyHeight / 8; // TODO un-hardcode
  border-bottom: 1px solid $colorBackground;
  cursor: pointer;
  background-color: $colorLightest;

  &:hover {
    background: $colorDark;
  }

  &.active {
    background: $colorLighter;
  }

  &.playing {
    box-shadow: inset 0 0 50px $colorLightest;
  }
};

.play-button-container {
  @include flex_centered();
  width: 100px;
  background: $colorLight;
  height: $mainMenuHeight;
  line-height: 50px;
  font-size: 30px;
  margin-left: auto;
  cursor: pointer;
  border-radius: 4px;
};

{'fraction_non_alphanumeric': 0.13775312782148846, 'fraction_numerical': 0.013156197600928673, 'mean_word_length': 3.547800586510264, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3555754', 'n_tokens_mistral': 2877, 'n_tokens_neox': 2696, 'n_words': 583}