<commit_before>$c-white: #fff;
$c-black: #000;
$c-red: #f94e34;

$c-mbody: #fffff7;
$c-count-bgc: #f2f2f2;
$c-mobile-bgc: #f0f0f0;
$c-footer: #352839;
$c-svg: #d1d7d7;

$h-footer: 4em;
$avatar-limit: 4;
$avatar-size: 2.5em;
$avatar-overlay-ratio: 2 / 3;

.m-body {
  height: 100%;
  overflow: auto;
  margin-left: .75em;
  margin-right: .75em;
  padding-left: .75em;
  padding-right: .75em;
  padding-bottom: $h-footer;
  border-left: 1px solid rgba($c-black, .15);
  border-right: 1px solid rgba($c-black, .15);
  background-color: $c-mbody;

  img {
    width: 100%;
  }

  .section {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid rgba($c-black, .1);
  }

  .icon {
    width: 1.5em;
    height: 1.5em;
    margin-right: .25em;
    fill: $c-svg;
  }

  .icon-comment {
    transform: rotateY(180deg);
  }
}

.content {
  margin-bottom: .5em;
}

.reaction-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #999;
}

.heart-count,
.comment-count {
  display: inline-flex;
  align-items: center;
  background-color: $c-count-bgc;
  padding: .5em 1em;
  border-radius: 10em;
  cursor: pointer;
  transition: background-color .3s;
  -webkit-tap-highlight-color: rgba($c-white, 0);

  &:active {
    background-color: rgba($c-count-bgc, .5);
  }
}

.heart-count {
  &::after {
    content: counter(heart-counter);
  }

  .ip-heart:checked ~ & {
    counter-increment: heart-counter 1;
  }
}

.heart-icon {
  position: relative;

  .icon + .icon {
    position: absolute;
    top: 0;
    left: 0;
    fill: $c-red;
    transition: .2s;
    opacity: 0;
  }

  .icon:nth-of-type(2) {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes heart-path {
  0%    { transform: translate3d(0,0,0) rotate(0deg) scale(.33); opacity: 1;}
  30%   { transform: translate3d(-20%,-10%,0) rotate(20deg) scale(.33);}
  50%   { opacity: 1;}
  100%  { transform: translate3d(-50%,-50%,0) rotate(40deg) scale(.33); opacity: 0;}
}

@keyframes heart-path-2 {
  0%    { transform: translate3d(0,0,0) rotate(0deg) scale(.33); opacity: 1;}
  30%   { transform: translate3d(20%,-10%,0) rotate(-20deg) scale(.33);}
  50%   { opacity: 1;}
  100%  { transform: translate3d(50%,-50%,0) rotate(-40deg) scale(.33); opacity: 0;}
}

.ip-heart:checked ~ .heart-count {
  .icon:nth-of-type(2) {
    transform: none;
    opacity: 1;
  }

  .icon:nth-of-type(3) {
    animation: heart-path .48s;
  }

  .icon:nth-of-type(4) {
    animation: heart-path-2 .48s;
  }
}

.comment-count .icon {
  transform: rotateY(180deg);
}


.avatars {
  position: relative;
  min-height: $avatar-size;
  margin-left: .25em;
  margin-right: auto;
  padding: 0;
  list-style-type: none;
}

.avatar {
  position: absolute;
  top: 0;
  left: $avatar-size * ($avatar-limit - 1) * $avatar-overlay-ratio;
  width: $avatar-size;
  height: $avatar-size;
  border: ($avatar-size / 12) solid $c-mbody;
  border-radius: 50%;
  background: no-repeat 50% / cover;
  transform-origin: 100% 50%;
  transition: .3s;
  opacity: 1;
  transform: scale(.3);

  @for $i from 2 through ($avatar-limit + 1) {
    &:nth-of-type(#{$i}) {
      left: $avatar-size * ($i - 2) * $avatar-overlay-ratio;
      z-index: $avatar-limit*2 - $i;
      transform: none;
    }
  }

  &:nth-of-type(1) {
    left: 0;
    z-index: $avatar-limit*2;
    transform: scale(.1);
    transform-origin: 0% 50%;
    opacity: .5;
    visibility: hidden;<commit_msg>調整 opacity，僅讓前幾個項目可見<commit_after>$c-white: #fff;
$c-black: #000;
$c-red: #f94e34;

$c-mbody: #fffff7;
$c-count-bgc: #f2f2f2;
$c-mobile-bgc: #f0f0f0;
$c-footer: #352839;
$c-svg: #d1d7d7;

$h-footer: 4em;
$avatar-limit: 4;
$avatar-size: 2.5em;
$avatar-overlay-ratio: 2 / 3;

.m-body {
  height: 100%;
  overflow: auto;
  margin-left: .75em;
  margin-right: .75em;
  padding-left: .75em;
  padding-right: .75em;
  padding-bottom: $h-footer;
  border-left: 1px solid rgba($c-black, .15);
  border-right: 1px solid rgba($c-black, .15);
  background-color: $c-mbody;

  img {
    width: 100%;
  }

  .section {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid rgba($c-black, .1);
  }

  .icon {
    width: 1.5em;
    height: 1.5em;
    margin-right: .25em;
    fill: $c-svg;
  }

  .icon-comment {
    transform: rotateY(180deg);
  }
}

.content {
  margin-bottom: .5em;
}

.reaction-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #999;
}

.heart-count,
.comment-count {
  display: inline-flex;
  align-items: center;
  background-color: $c-count-bgc;
  padding: .5em 1em;
  border-radius: 10em;
  cursor: pointer;
  transition: background-color .3s;
  -webkit-tap-highlight-color: rgba($c-white, 0);

  &:active {
    background-color: rgba($c-count-bgc, .5);
  }
}

.heart-count {
  &::after {
    content: counter(heart-counter);
  }

  .ip-heart:checked ~ & {
    counter-increment: heart-counter 1;
  }
}

.heart-icon {
  position: relative;

  .icon + .icon {
    position: absolute;
    top: 0;
    left: 0;
    fill: $c-red;
    transition: .2s;
    opacity: 0;
  }

  .icon:nth-of-type(2) {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes heart-path {
  0%    { transform: translate3d(0,0,0) rotate(0deg) scale(.33); opacity: 1;}
  30%   { transform: translate3d(-20%,-10%,0) rotate(20deg) scale(.33);}
  50%   { opacity: 1;}
  100%  { transform: translate3d(-50%,-50%,0) rotate(40deg) scale(.33); opacity: 0;}
}

@keyframes heart-path-2 {
  0%    { transform: translate3d(0,0,0) rotate(0deg) scale(.33); opacity: 1;}
  30%   { transform: translate3d(20%,-10%,0) rotate(-20deg) scale(.33);}
  50%   { opacity: 1;}
  100%  { transform: translate3d(50%,-50%,0) rotate(-40deg) scale(.33); opacity: 0;}
}

.ip-heart:checked ~ .heart-count {
  .icon:nth-of-type(2) {
    transform: none;
    opacity: 1;
  }

  .icon:nth-of-type(3) {
    animation: heart-path .48s;
  }

  .icon:nth-of-type(4) {
    animation: heart-path-2 .48s;
  }
}

.comment-count .icon {
  transform: rotateY(180deg);
}


.avatars {
  position: relative;
  min-height: $avatar-size;
  margin-left: .25em;
  margin-right: auto;
  padding: 0;
  list-style-type: none;
}

.avatar {
  position: absolute;
  top: 0;
  left: $avatar-size * ($avatar-limit - 1) * $avatar-overlay-ratio;
  width: $avatar-size;
  height: $avatar-size;
  border: ($avatar-size / 12) solid $c-mbody;
  border-radius: 50%;
  background: no-repeat 50% / cover;
  transform-origin: 100% 50%;
  transition: .3s;
  opacity: 0;
  transform: scale(.3);

  @for $i from 2 through ($avatar-limit + 1) {
    &:nth-of-type(#{$i}) {
      left: $avatar-size * ($i - 2) * $avatar-overlay-ratio;
      z-index: $avatar-limit*2 - $i;
      transform: none;
      opacity: 1;
    }
  }

  &:nth-of-type(1) {
    left: 0;
    z-index: $avatar-limit*2;
    transform: scale(.1);
    transform-origin: 0% 50%;
    opacity: .5;
    visibility: hidden;
{'fraction_non_alphanumeric': 0.18859458677087856, 'fraction_numerical': 0.05832971486466927, 'mean_word_length': 2.8603351955307263, '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': '3453113', 'n_tokens_mistral': 3206, 'n_tokens_neox': 2903, 'n_words': 586}