<commit_before>@import "mixins";
@import "ui";

body {
  background: #FFF url(../img/bg-stripe.png) repeat;
}

.ui-row {
  margin-bottom: 0.5em;
}

.ui-wrapper {
  margin: 0 auto;
  padding: 2em 0;
}

/*********************************************************
* Left column
*/

.remixed-from {
  font-size: 0.9em;
}
.remix-info {
  background: #E3EAED;
  padding: 0.5em;
  border-radius: 3px;
  margin-bottom: 1em;
}

.make-thumbnail {
  position: relative;
  height: 150px;
  &.thumbnail {
    // Has a thumbnail image
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.remixed-by-list {
  list-style: none;
  display: inline;
  padding: 0;

  li {
    display: inline;
  }
  li a {
    text-decoration: underline;
  }
  li:not(:last-child):after {
    content: ', ';
  }
}

/*********************************************************
* Right column
*/
.make-title {
  font-size: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-family: "Open Sans Light", sans-serif;
  font-weight: normal;
}
.make-url {
  font-family: "Open Sans Light", sans-serif;
  font-weight: normal;
  font-size: 1.2em;
  word-wrap: break-word;
}
.make-user-gravatar {
  vertical-align: middle;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  margin-right: 0.5em;
}
.make-relative-date {
  margin-left: 0.5em;
  font-size: 0.8em;
  vertical-align: baseline;
  color: #999;
}

.social-media {
  margin-left: 1em;
  height: 1em;
  vertical-align: middle;
  display: inline-block;
  > span {
    vertical-align: middle;
  }
}

span.built-with {
  font-size: 0.9em;
  padding: 0.2em 0.5em;
  background: #EEE;
  border-radius: 3px;
  color: #999;
}

.tool-name {
  text-transform: capitalize;
}

.make-desc {
  font-size: 0.9em;
  line-height: 1.8;
}

/*********************************************************
* Links, per-app colours
*/
a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.hidden {
  display: none;
}
.ui-btn {
  font-size: 0.9em;
  padding: 0.4em 0.5em 0.3em 0.5em;
  cursor: pointer;
}
.details-thimble {
  a {
    color: @blue;
    &:hover {
      color: lighten( @blue, 10% );
    }
  }
  .ui-btn {
    background: @blue;
    color: #FFF;
    &:hover {
      color: #FFF;
      background: lighten( @blue, 10% );
    }
  }
}
.details-popcorn {
  a {
    color: @green;
    &:hover {
      color: lighten( @green, 10% );
    }
  }
  .ui-btn {
    background: @green;
    color: #FFF;
    &:hover {
      color: #FFF;
      background: lighten( @green, 10% );
    }
  }
}

/*********************************************************
* Mobile
*/

#mobile-warning {
  display: none;
  background: @blue;
  color: #FFF;
  h1 {
    font-size: 1.4em;
    margin: 0;
    padding: 1em;
  }
}
#url {
  display: none;
}

@media (max-width: 640px) {
  .ui-row > div {
    float: none;
    width: 100%;
    display: block;
  }
  .make-relative-date {
    display: none;
  }
  #mobile-warning {
    display: block;
  }
  #url {
    display: block;
  }
  .ui-wrapper {
    padding: 1em;
  }
  .make-thumbnail {
    height: 0;
    padding-bottom: 100%;
  }
  .social-media {
    display: none;
  }
}
<commit_msg>Fix Bug 883320 - Fix css pollution causing padding issue in make-details<commit_after>@import "mixins";
@import "ui";

body {
  background: #FFF url(../img/bg-stripe.png) repeat;
}

.ui-row {
  margin-bottom: 0.5em;
  padding: 0;
}

.ui-wrapper {
  margin: 0 auto;
  padding: 2em 0;
}

/*********************************************************
* Left column
*/

.remixed-from {
  font-size: 0.9em;
}
.remix-info {
  background: #E3EAED;
  padding: 0.5em;
  border-radius: 3px;
  margin-bottom: 1em;
}

.make-thumbnail {
  position: relative;
  height: 150px;
  &.thumbnail {
    // Has a thumbnail image
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.remixed-by-list {
  list-style: none;
  display: inline;
  padding: 0;

  li {
    display: inline;
  }
  li a {
    text-decoration: underline;
  }
  li:not(:last-child):after {
    content: ', ';
  }
}

/*********************************************************
* Right column
*/
.make-title {
  font-size: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-family: "Open Sans Light", sans-serif;
  font-weight: normal;
}
.make-url {
  font-family: "Open Sans Light", sans-serif;
  font-weight: normal;
  font-size: 1.2em;
  word-wrap: break-word;
}
.make-user-gravatar {
  vertical-align: middle;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  margin-right: 0.5em;
}
.make-relative-date {
  margin-left: 0.5em;
  font-size: 0.8em;
  vertical-align: baseline;
  color: #999;
}

.social-media {
  margin-left: 1em;
  height: 1em;
  vertical-align: middle;
  display: inline-block;
  > span {
    vertical-align: middle;
  }
}

span.built-with {
  font-size: 0.9em;
  padding: 0.2em 0.5em;
  background: #EEE;
  border-radius: 3px;
  color: #999;
}

.tool-name {
  text-transform: capitalize;
}

.make-desc {
  font-size: 0.9em;
  line-height: 1.8;
}

/*********************************************************
* Links, per-app colours
*/
a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.hidden {
  display: none;
}
.ui-btn {
  font-size: 0.9em;
  padding: 0.4em 0.5em 0.3em 0.5em;
  cursor: pointer;
}
.details-thimble {
  a {
    color: @blue;
    &:hover {
      color: lighten( @blue, 10% );
    }
  }
  .ui-btn {
    background: @blue;
    color: #FFF;
    &:hover {
      color: #FFF;
      background: lighten( @blue, 10% );
    }
  }
}
.details-popcorn {
  a {
    color: @green;
    &:hover {
      color: lighten( @green, 10% );
    }
  }
  .ui-btn {
    background: @green;
    color: #FFF;
    &:hover {
      color: #FFF;
      background: lighten( @green, 10% );
    }
  }
}

/*********************************************************
* Mobile
*/

#mobile-warning {
  display: none;
  background: @blue;
  color: #FFF;
  h1 {
    font-size: 1.4em;
    margin: 0;
    padding: 1em;
  }
}
#url {
  display: none;
}

@media (max-width: 640px) {
  .ui-row > div {
    float: none;
    width: 100%;
    display: block;
  }
  .make-relative-date {
    display: none;
  }
  #mobile-warning {
    display: block;
  }
  #url {
    display: block;
  }
  .ui-wrapper {
    padding: 1em;
  }
  .make-thumbnail {
    height: 0;
    padding-bottom: 100%;
  }
  .social-media {
    display: none;
  }
}

{'fraction_non_alphanumeric': 0.22273354809019788, 'fraction_numerical': 0.02745819911029299, 'mean_word_length': 2.6343366778149386, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '4983963', 'n_tokens_mistral': 2713, 'n_tokens_neox': 2535, 'n_words': 536}