<commit_before>@import "../../_variables.scss";

$patternHeight: 5rem;
$patternMargin: 1rem;
$patternRatio:  100/120;
// I really wanted to use width: auto.
// But not all browsers are ok with it

.history {
  height: $patternHeight + (2 * $patternMargin);
  overflow-x: scroll;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.history-container {
  display: table-cell;
  vertical-align: top;

  &:empty {
    display: block;
    &:after {
      content: attr(data-helper);
      display: block;
      line-height: 6;
      font-size: 1rem;
      text-align: center;
    }
  }
}

.history-start-helper {
  display: none;
}

.history svg {
  width: $patternHeight * $patternRatio;
  height: $patternHeight;
  display: inline-block;
  margin: $patternMargin 0;
  transform: translateZ(0);
  animation: fadein .5s;
  -webkit-transform: translateZ(0);
  -webkit-animation: fadein .5s;

  & + svg {
    margin-left: $patternMargin;
  }
}

@keyframes fadein {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadein {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@media (orientation: landscape), (min-width: $mq-xlarge-min) {
  .history {
    height: auto;
    border-bottom: none;<commit_msg>Add better face to history add<commit_after>@import "../../_variables.scss";

$patternHeight: 5rem;
$patternMargin: 1rem;
$patternRatio:  100/120;
// I really wanted to use width: auto.
// But not all browsers are ok with it

.history {
  height: $patternHeight + (2 * $patternMargin);
  overflow-x: scroll;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.history-container {
  display: table-cell;
  vertical-align: top;

  &:empty {
    display: block;
    &:after {
      content: attr(data-helper);
      display: block;
      line-height: 6;
      font-size: 1rem;
      text-align: center;
    }
  }
}

.history-start-helper {
  display: none;
}

.history svg {
  width: $patternHeight * $patternRatio;
  height: $patternHeight;
  display: inline-block;
  margin: $patternMargin 0;
  transform: translateZ(0);
  animation: expand .25s, fadein .5s linear;
  -webkit-transform: translateZ(0);
  -webkit-animation: expand .25s, fadein .5s linear;

  & + svg {
    margin-left: $patternMargin;
  }
}

@keyframes fadein {
    0%   {opacity: 0;}
    50%  {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadein {
    0%   {opacity: 0;}
    50%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes expand {
    0%   {width: 0;}
}

@-webkit-keyframes expand {
    0%   {width: 0;}
}

@media (orientation: landscape), (min-width: $mq-xlarge-min) {
  .history {
    height: auto;
    border-bottom: none;
{'fraction_non_alphanumeric': 0.15152603231597844, 'fraction_numerical': 0.02657091561938959, 'mean_word_length': 2.991404011461318, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '2999008', 'n_tokens_mistral': 1066, 'n_tokens_neox': 1009, 'n_words': 252}