<commit_before>@import "bootstrap/variables";
@import "bootstrap/mixins";

.tour-interesting-users {
  position: relative;
  padding-top: 30px;

  .tour-interesting-users-scrolling-outer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 430px;

    .tour-interesting-users-scrolling-inner {
      position: absolute;
      top: 0px;
      .transition(left 0.6s);
      min-width: 100%;
    }
  }

  .tour-interesting-users-footer {
    margin: 20px 0 150px;
    padding: 0 20px;
    text-align: center;
    min-height: 30px;
  }

  .tour-interesting-users-finish {
    margin-top: -6px;
  }

  .tour-interesting-users-arrow-left,
  .tour-interesting-users-arrow-right {
    width: 16px;
    height: 23px;
    .opacity(0.2);

    &.enabled {
      cursor: pointer;
      .opacity(0.6);

      &:hover {
        .opacity(1);
      }
    }
  }

  .tour-interesting-users-arrow-left {
    background: asset-data-url("pagination/arrow_left.png");
    float: left;
  }

  .tour-interesting-users-arrow-right {
    background: asset-data-url("pagination/arrow_right.png");
    float: right;
  }
}

.tour-interesting-users-list {
  position: relative;
}

.tour-interesting-users-list-empty {
  width: 100%;
  text-align: center;
  margin-top: 200px;
}

@user-width: 200px;
@user-height: 170px;
@user-block-padding-horizontal: 15px;
@user-block-padding-vertical: 20px;

.tour-interesting-user {
  margin: 20px;
  width: @user-width;
  height: @user-height;
  display: inline-block;
  &.loaded{
    cursor: pointer;
  }

  position: relative;


  ul {
    margin: 0;
  }

  li {
    margin: 6px 0;
  }
}

.tour-follow-user-heading {
  //the user's avatar+name should be raised slightly above + overlapping
  //the overall user-info block.
  position: absolute;
  top: -21px;
}

.tour-follow-user-avatar {
  position: relative;
  display: inline-block;
  margin-right: 6px; //avatar is inline with text, wants space after it.
  vertical-align: top;
  padding:2px;
  background-color: white;
  top: -2px; //raise avatar a little out of the text line.
  border-radius: 3px;

  > img {
    border-radius: 2px;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1; //stacking is necessary due to fake border construct explained below.
  }

  //The following css generates a surrounding rounded box around the image.
  //this is equivalent to a fake border, with the advantage
  //that the "padding" overlays the wrapping boxes border, whereas the
  //"border" is underneath it.  This causes the visual border to appear
  //continuously to wrap the jutting out avatar image.
  &:after {
    display: block;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background: @tableBorder;
    border-radius: 4px;
    content: '';
    position: absolute;
    z-index: -1;
  }
}

.tour-follow-user-block {
  border: 1px solid @tableBorder;
  border-radius: 4px;
  background: white;
  position: absolute;
  //the user's info box should leave some extra space on the top of
  //its container to make room for the jutting-out avatar.<commit_msg>Compensate for padding in new style jutting-out avatars.<commit_after>@import "bootstrap/variables";
@import "bootstrap/mixins";

.tour-interesting-users {
  position: relative;
  padding-top: 30px;

  .tour-interesting-users-scrolling-outer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 430px;

    .tour-interesting-users-scrolling-inner {
      position: absolute;
      top: 0px;
      .transition(left 0.6s);
      min-width: 100%;
    }
  }

  .tour-interesting-users-footer {
    margin: 20px 0 150px;
    padding: 0 20px;
    text-align: center;
    min-height: 30px;
  }

  .tour-interesting-users-finish {
    margin-top: -6px;
  }

  .tour-interesting-users-arrow-left,
  .tour-interesting-users-arrow-right {
    width: 16px;
    height: 23px;
    .opacity(0.2);

    &.enabled {
      cursor: pointer;
      .opacity(0.6);

      &:hover {
        .opacity(1);
      }
    }
  }

  .tour-interesting-users-arrow-left {
    background: asset-data-url("pagination/arrow_left.png");
    float: left;
  }

  .tour-interesting-users-arrow-right {
    background: asset-data-url("pagination/arrow_right.png");
    float: right;
  }
}

.tour-interesting-users-list {
  position: relative;
}

.tour-interesting-users-list-empty {
  width: 100%;
  text-align: center;
  margin-top: 200px;
}

@user-width: 200px;
@user-height: 170px;
@user-block-padding-horizontal: 15px;
@user-block-padding-vertical: 20px;

.tour-interesting-user {
  margin: 20px;
  width: @user-width;
  height: @user-height;
  display: inline-block;
  &.loaded{
    cursor: pointer;
  }

  position: relative;


  ul {
    margin: 0;
  }

  li {
    margin: 6px 0;
  }
}

.tour-follow-user-heading {
  //the user's avatar+name should be raised slightly above + overlapping
  //the overall user-info block.
  position: absolute;
  top: -21px;
}
@avatarWhiteBorderWidth: 2px;
.tour-follow-user-avatar {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: @avatarWhiteBorderWidth;
  margin: -@avatarWhiteBorderWidth; //compensate for padding.
  margin-right: 4px; //avatar is inline with text, wants space after it.
  background-color: white;
  top: -2px; //raise avatar a little out of the text line.
  border-radius: @avatarWhiteBorderWidth + 1;

  > img {
    border-radius: @avatarWhiteBorderWidth;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1; //stacking is necessary due to fake border construct explained below.
  }

  //The following css generates a surrounding rounded box around the image.
  //this is equivalent to a fake border, with the advantage
  //that the "padding" overlays the wrapping boxes border, whereas the
  //"border" is underneath it.  This causes the visual border to appear
  //continuously to wrap the jutting out avatar image.
  &:after {
    display: block;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background: @tableBorder;
    border-radius: @avatarWhiteBorderWidth + 2;
    content: '';
    position: absolute;
    z-index: -1;
  }
}

.tour-follow-user-block {
  border: 1px solid @tableBorder;
  border-radius: 4px;
  background: white;
  position: absolute;
  //the user's info box should leave some extra space on the top of
  //its container to make room for the jutting-out avatar.
{'fraction_non_alphanumeric': 0.1252157539620273, 'fraction_numerical': 0.023693707829907422, 'mean_word_length': 2.870066788099575, 'pattern_counts': {'":': 0, '<': 3, '<?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': '2269148', 'n_tokens_mistral': 2344, 'n_tokens_neox': 2116, 'n_words': 576}