app/assets/stylesheets/modules/stats.css
.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(30px);
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; } }