<commit_before>/* Switches - Plurk CSS
   ---------------------

   Main controls on the river are at the left-bottom corner of the timeline.

    - Filters: Filters out plurks of specific interest. It was designed as
               tabs before the theme change of Plurk.
    - Buttons: Some handy buttons that appears when new plurks or responses
               received. Shortcuts are available for these functionalities.

   Structure:

    div.timeline_control
      div#timeline_control_holder
        ul#filter_tab
          li > a#favorite_plurks_tab_btn   > (i.pif-... span)
          li > a#replurked_plurks_tab_btn  > (i.pif-... span)
          li > a#responded_plurks_tab_btn  > (i.pif-... span)
          li > a#private_plurks_tab_btn    > (i.pif-... span)
          li > a#own_plurks_tab_btn        > (i.pif-... span)
          li > a#all_plurks.bottom_line_bg > (i.pif-... span)
            // only this is shown and other is collapsed
    div#updater
      div#noti_np.item
        a
          i.pif-messeng-new
          span#noti_np_text
          span#noti_np_count.unread_generic
      div#noti_re.item
        div#noti_re_view.item
        div#noti_re_actions.item
          a#mark_all_link.updater_link > (i.pif-check span)
          a.updater_link > (i.pif-cancel span)

*/

// Timeline -- Icon width Unifying
#filter_tab {
  .pif-like,
  .pif-replurk,
  .pif-messages,
  .pif-message-my,
  .pif-message-private {
    @include icon-font-unify-width;
  }
}

// Timeline -- Loading
#unread_loader {
  color: white;
  text-shadow: 1px 1px rgba(black, .5);
  line-height: $timeline-button-height;
  height: $timeline-button-height;
  padding-left: 8px;
}

// Timeline -- Unread counter
.unread_generic {
  font-weight: 700;
}

#noti_np_count, #noti_re_count {
  &.unread_generic {
    @extend %use-decimal-fonts;

    display: inline-block;
    font-size: 1.2em;
    line-height: $timeline-button-height;
    color: white !important;
    padding: 0 8px;
    margin-right: -8px;
    border-radius: 0 $timeline-button-border-radius $timeline-button-border-radius 0;

    transition: background 250ms $material-ease-std;
    background: rgba(material-color('pink', 400), .8);
  }
}

#noti_np, #noti_re {
  a:hover .unread_generic {
    background: rgba(material-color('pink', 600), .8);
  }
}

// Timeline -- Switches (common)
#updater,
#updater .item a,
#filter_tab a.has_unread,
#filter_tab li a.filter_selected,
#filter_tab:hover li a {
  // hopefully, 8px is default!
  // padding-left: 8px;
  // padding-right: 8px;
  height: $timeline-button-height !important;
}

#filter_tab li,
#noti_np,
#noti_re_actions,
#noti_re_view {
  a {
    @include material-shadow-polymer-4dp;

    transition: box-shadow 250ms $material-ease-in,
                opacity    100ms $material-ease-std,
                color      100ms $material-ease-std,
                height     250ms $material-ease-std,
                margin     250ms $material-ease-std;

    text-align: left;
    border-radius: $timeline-button-border-radius;
    line-height: $timeline-button-height;

    &:hover {
      @include material-shadow-polymer-6dp;
    }
  }
}

// Timeline -- View state switches
#noti_np,
#noti_re_view {
  a {
    margin-left: 8px;

    // "update new messages" button; having different colors on hover
    &:hover {
      background: material-color('yellow', 50);
      color:      material-color('yellow', 900);
    }
  }
}

#noti_re #mark_all_link.updater_link {
  // "mark all as read" button
  background: material-color('green', 50);
  &:hover {
    background: material-color('green', 500);
  }
}

// Timeline -- Shortcuts
@if (enable-timeline-switch-shortcut) {
  // selectors are left intentially since they are awesome!
  #noti_np_text:after {
    // [U]pdate all
    content: ' [U]';
  }

  #noti_re #mark_all_link.updater_link span:after {
    // [M]ark all as read
    content: ' [M]';
  }

  #noti_re_text:after {
    // [V]iew all
    content: ' [V]';
  }

  #noti_re .updater_link .pif-cancel + span:after {
    content: ' [V]';
  }
}

// Timeline -- Filter switches
#filter_tab {
  li a {
    // flex is here to help line up unreading counts
    display: flex;
    span {
      // unreading counts
      flex: 1 1 auto;
      font-size: 1.1em;
      text-align: right;
      padding: 0;
      margin-left: 8px;
      background: transparent;
      text-shadow: 0 2px 4px rgba(black,.9);
    }

    &.off_tab.has_unread {
      background: material-color('red', 100);
      color:      material-color('red', 600);
    }

    &.filter_selected {
      @include material-shadow-polymer-8dp;
    }
  }

  &:hover li a {
    margin-top: 8px !important;

  }
}<commit_msg>fix small glitch of switches<commit_after>/* Switches - Plurk CSS
   ---------------------

   Main controls on the river are at the left-bottom corner of the timeline.

    - Filters: Filters out plurks of specific interest. It was designed as
               tabs before the theme change of Plurk.
    - Buttons: Some handy buttons that appears when new plurks or responses
               received. Shortcuts are available for these functionalities.

   Structure:

    div.timeline_control
      div#timeline_control_holder
        ul#filter_tab
          li > a#favorite_plurks_tab_btn   > (i.pif-... span)
          li > a#replurked_plurks_tab_btn  > (i.pif-... span)
          li > a#responded_plurks_tab_btn  > (i.pif-... span)
          li > a#private_plurks_tab_btn    > (i.pif-... span)
          li > a#own_plurks_tab_btn        > (i.pif-... span)
          li > a#all_plurks.bottom_line_bg > (i.pif-... span)
            // only this is shown and other is collapsed
    div#updater
      div#noti_np.item
        a
          i.pif-messeng-new
          span#noti_np_text
          span#noti_np_count.unread_generic
      div#noti_re.item
        div#noti_re_view.item
        div#noti_re_actions.item
          a#mark_all_link.updater_link > (i.pif-check span)
          a.updater_link > (i.pif-cancel span)

*/

// Timeline -- Icon width Unifying
#filter_tab {
  .pif-like,
  .pif-replurk,
  .pif-messages,
  .pif-message-my,
  .pif-message-private {
    @include icon-font-unify-width;
  }
}

// Timeline -- Loading
#unread_loader {
  color: white;
  text-shadow: 1px 1px rgba(black, .5);
  line-height: $timeline-button-height;
  height: $timeline-button-height;
  padding-left: 8px;
}

// Timeline -- Unread counter
.unread_generic {
  font-weight: 700;
}

#noti_np_count, #noti_re_count {
  &.unread_generic {
    @extend %use-decimal-fonts;

    display: inline-block;
    font-size: 1.2em;
    line-height: $timeline-button-height;
    color: white !important;
    padding: 0 8px;
    margin-right: -8px;
    border-radius: 0 $timeline-button-border-radius $timeline-button-border-radius 0;

    transition: background 250ms $material-ease-std;
    background: rgba(material-color('pink', 400), .8);
  }
}

#noti_np, #noti_re {
  a:hover .unread_generic {
    background: rgba(material-color('pink', 600), .8);
  }
}

// Timeline -- Switches (common)
#updater,
#updater .item a,
#filter_tab a.has_unread,
#filter_tab li a.filter_selected,
#filter_tab:hover li a {
  // hopefully, 8px is default!
  // padding-left: 8px;
  // padding-right: 8px;
  height: $timeline-button-height !important;
}

#filter_tab li,
#noti_np,
#noti_re_actions,
#noti_re_view {
  a {
    @include material-shadow-polymer-4dp;

    transition: box-shadow 250ms $material-ease-in,
                opacity    100ms $material-ease-std,
                color      100ms $material-ease-std,
                height     250ms $material-ease-std,
                margin     250ms $material-ease-std;

    text-align: left;
    border-radius: $timeline-button-border-radius;
    line-height: $timeline-button-height;

    &:hover {
      @include material-shadow-polymer-6dp;
    }
  }
}

// Timeline -- View state switches
#noti_np,
#noti_re_view {
  a {
    margin-left: 8px;

    // "update new messages" button; having different colors on hover
    &:hover {
      background: material-color('yellow', 50);
      color:      material-color('yellow', 900);
    }
  }
}

#noti_re #mark_all_link.updater_link {
  // "mark all as read" button
  background: material-color('green', 50);
  &:hover {
    background: material-color('green', 500);
  }
}

// Timeline -- Shortcuts
@if (enable-timeline-switch-shortcut) {
  // selectors are left intentially since they are awesome!
  #noti_np_text:after {
    // [U]pdate all
    content: ' [U]';
  }

  #noti_re #mark_all_link.updater_link span:after {
    // [M]ark all as read
    content: ' [M]';
  }

  #noti_re_text:after {
    // [V]iew all
    content: ' [V]';
  }

  #noti_re .updater_link .pif-cancel + span:after {
    content: ' [V]';
  }
}

// Timeline -- Filter switches
#filter_tab {
  li a {
    // flex is here to help line up unreading counts
    display: flex;

    span {
      // unreading counts
      flex: 1 1 auto;
      font-size: 1.1em;
      text-align: right;
      padding: 0;
      margin-left: 8px;
      background: transparent;
      text-shadow: 0 2px 4px rgba(black,.9);
    }

    &.has_unread {
      margin-top: 8px !important;
      &.off_tab {
        background: material-color('red', 100);
        color:      material-color('red', 600);
      }
    }

    &.filter_selected {
      @include material-shadow-polymer-8dp;
    }
  }

  &:hover li a {
    margin-top: 8px !important;
  }
}
{'fraction_non_alphanumeric': 0.13036111405273748, 'fraction_numerical': 0.01577888382929154, 'mean_word_length': 2.3347457627118646, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 31, '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': '1956163', 'n_tokens_mistral': 3570, 'n_tokens_neox': 3362, 'n_words': 744}