rubygems/rubygems.org

.stats {
  margin-top: -15px;
  overflow: auto;
  border-bottom: 1px solid #c1c4ca; }
  @media (max-width: 709px) {
    .stats {
      margin-bottom: 24px;
      padding-bottom: 12px; } }
  @media (min-width: 710px) {
    .stats {
      margin-bottom: 60px;
      padding-bottom: 10px; } }

.stat {
  width: 33.33%;
  float: left;
  font-weight: 500;
  text-transform: uppercase; }
  @media (max-width: 709px) {
    .stat {
      font-size: 9px; } }
  @media (min-width: 710px) {
    .stat {
      font-size: 12px; } }
  @media (max-width: 399px) {
    .stat:before {
      display: none; } }
  @media (min-width: 400px) {
    .stat:before {
      float: left; } }
  @media (min-width: 400px) and (max-width: 719px) {
    .stat:before {
      margin-right: 6px;
      font-size: 20px; } }
  @media (min-width: 710px) {
    .stat:before {
      margin-right: 18px;
      font-size: 34px; } }

.stat__count {
  display: block;
  font-weight: 600; }
  @media (max-width: 719px) {
    .stat__count {
      font-size: 12px; } }
  @media (min-width: 710px) {
    .stat__count {
      font-size: 24px; } }

.stats__graph__heading {
  margin-bottom: 42px;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase; }

.stats__graph__gem {
  margin-bottom: 15px;
  display: table;
  height: 30px;
  width: 100%;
  position: relative; }

.stats__graph__gem__name {
  display: table-cell;
  font-weight: 400;
  text-align: right;
  vertical-align: middle; }
  @media (max-width: 709px) {
    .stats__graph__gem__name {
      width: 15%;
      width: calc(86px);
      font-size: 13px; } }
  @media (min-width: 710px) {
    .stats__graph__gem__name {
      width: 15%;
      width: calc(140px);
      font-size: 15px; } }

.stats__graph__gem__name a { color: black; }

.stats__graph__gem__meter-wrap {
  height: 30px;
  box-shadow: inset 0 1px 1px -1px #c1c4ca;
  background-image: none;
  background-color: #f8f8f9; }
  @media (max-width: 420px) {
    .stats__graph__gem__meter-wrap {
      margin-left: 3%;
      margin-left: calc(10px);
      width: 97%;
      width: calc(100% - 10px); } }
  @media (min-width: 421px) and (max-width: 709px) {
    .stats__graph__gem__meter-wrap {
      margin-left: 3%;
      margin-left: calc(16px);
      width: 97%;
      width: calc(100% - 16px); } }
  @media (min-width: 710px) {
    .stats__graph__gem__meter-wrap {
      margin-left: 3%;
      margin-left: calc(28px);
      width: 97%;
      width: calc(100% - 30px); } }

.stats__graph__gem__meter {
  position: relative;
  height: 100%; }

.stats__graph__gem:nth-of-type(2) .stats__graph__gem__meter {
  border-right: 1px solid #eba000;
  background-color: #ffae00;
  background: linear-gradient(to left, #ffae00 0%, #ffd67f 100%); }

.stats__graph__gem:nth-of-type(3) .stats__graph__gem__meter {
  border-right: 1px solid #92cb16;
  background-color: #9fdd18;
  background: linear-gradient(to left, #9fdd18 0%, #cbed83 100%); }

.stats__graph__gem:nth-of-type(4) .stats__graph__gem__meter {
  border-right: 1px solid #bd49ff;
  background-color: #c45dff;
  background: linear-gradient(to left, #c45dff 0%, #dda1ff 100%); }

.stats__graph__gem:nth-of-type(5) .stats__graph__gem__meter {
  border-right: 1px solid #4892d7;
  background-color: #599cdb;
  background: linear-gradient(to left, #599cdb 0%, #8abae8 100%); }

.stats__graph__gem:nth-of-type(6) .stats__graph__gem__meter {
  border-right: 1px solid #a7f2ff;
  background-color: #bbf5ff;
  background: linear-gradient(to left, #bbf5ff 0%, #cff8ff 100%); }

.stats__graph__gem:nth-of-type(7) .stats__graph__gem__meter {
  border-right: 1px solid #a7a7ff;
  background-color: #bbbbff;
  background: linear-gradient(to left, #bbbbff 0%, #cfcfff 100%); }

.stats__graph__gem:nth-of-type(8) .stats__graph__gem__meter {
  border-right: 1px solid #ff7cd8;
  background-color: #ff90de;
  background: linear-gradient(to left, #ff90de 0%, #ffb1e8 100%); }

.stats__graph__gem:nth-of-type(9) .stats__graph__gem__meter {
  border-right: 1px solid #fc6551;
  background-color: #fc7765;
  background: linear-gradient(to left, #fc7765 0%, #fda093 100%); }

.stats__graph__gem:nth-of-type(10) .stats__graph__gem__meter {
  border-right: 1px solid #92f3a0;
  background-color: #a4f5b0;
  background: linear-gradient(to left, #a4f5b0 0%, #bff8c8 100%); }

.stats__graph__gem:nth-of-type(11) .stats__graph__gem__meter {
  border-right: 1px solid #fce551;
  background-color: #fce865;
  background: linear-gradient(to left, #fce865 0%, #fdef92 100%); }

.stats__graph__gem:nth-of-type(2) .stats__graph__gem__count {
  color: #b8820a; }

.stats__graph__gem:nth-of-type(3) .stats__graph__gem__count {
  color: #75a31b; }

.stats__graph__gem:nth-of-type(4) .stats__graph__gem__count {
  color: #8f49bc; }

.stats__graph__gem:nth-of-type(5) .stats__graph__gem__count {
  color: #4475a3; }

.stats__graph__gem:nth-of-type(6) .stats__graph__gem__count {
  color: #82aab2; }

.stats__graph__gem:nth-of-type(7) .stats__graph__gem__count {
  color: #7779a3; }

.stats__graph__gem:nth-of-type(8) .stats__graph__gem__count {
  color: #b86da5; }

.stats__graph__gem:nth-of-type(9) .stats__graph__gem__count {
  color: #b65c51; }

.stats__graph__gem:nth-of-type(10) .stats__graph__gem__count {
  color: #689972; }

.stats__graph__gem:nth-of-type(11) .stats__graph__gem__count {
  color: #b6aa51; }

.stats__graph__gem__count {
  position: absolute;
  right: 12px; }
  @media (max-width: 419px) {
    .stats__graph__gem__count {
      font-size: 12px; } }
  @media (min-width: 420px) and (max-width: 709px) {
    .stats__graph__gem__count {
      font-size: 13px; } }
  @media (max-width: 709px) {
    .stats__graph__gem__count {
      top: 7px; } }
  @media (min-width: 710px) {
    .stats__graph__gem__count {
      top: 5px;
      font-size: 15px; } }
  @-moz-document url-prefix() {
    .stats__graph__gem__count {
      top: 8px; } }