.loader-frame {
top: 0px;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
left: 0px;
width: 100%;
z-index: 999999999999;
}
.loader {
border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
left: calc(50% - 30px);
top: calc(50% - 30px);
position: absolute;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.title-area {
min-width: 300px;
max-width: 450px;
margin: 0px auto;
}
.leaderboard-wrapper {
min-width: 300px;
max-width: 450px;
text-align: center;
margin: 0px auto;
background: linear-gradient(135deg,#0db8ec,#2b98d4);
border-radius: 6px;
border: 1px solid #2b98d4;
color: white;
}
.leaderboard-header {
height: 50px;
text-align: left;
padding-left: 20px;
font-size: 20px;
padding-top: 10px;
border-bottom: 1px solid #7acbf5;
}
.inline-block {
display: inline-block;
}
.first-ranking-avatar-wrapper {
width: 120px;
height: 120px;
border: 1px solid #7acbf5;
margin-left: 30px;
margin-top: 10px;
float: left;
}
.first-ranking-row {
height: 140px;
}
.first-ranking-avatar {
width: 90px;
height: 90px;
margin-top: 15px;
border: 4px solid white;
}
.first-ranking-icon {
background: url(//pocarr.com/wp-content/uploads/leaderboard-data/images/ranking-first-icon.png) top left no-repeat;
height: 58px;
width: 58px;
color: #FFF;
font-weight: bold;
display: block;
font-size: 240%;
line-height: 58px;
text-align: center;
position: absolute;
margin-top: 20px;
margin-left: -25px;
}
.first-ranking-desc-wrapper {
width: calc(100% - 180px);
text-align: left;
padding-top: 20px;
float: right;
}
.first-ranking-desc-wrapper div {
font-size: 18px;
font-weight: bold;
} .other-ranking-row {
height: 70px;
}
.other-ranking-avatar-wrapper {
width: 200px;
height: 100%;
border-right: 1px solid #7acbf5;
float: left;
}
.avatar-wrapper {
width: 60px;
height: 60px;
margin-left: 20px;
margin-top: 5px;
}
.other-ranking-avatar {
width: 40px;
height: 40px;
margin-top: 10px;
border: 2px solid white;
}
.first-ranking-icon-image {
background: url(//pocarr.com/wp-content/uploads/leaderboard-data/images/small-ranking-first-icon.png) top left no-repeat;
}
.second-ranking-icon-image {
background: url(//pocarr.com/wp-content/uploads/leaderboard-data/images/ranking-second-icon.png) top left no-repeat;
}
.third-ranking-icon-image {
background: url(//pocarr.com/wp-content/uploads/leaderboard-data/images/ranking-third-icon.png) top left no-repeat;
}
.common-ranking-icon-image {
background: url(//pocarr.com/wp-content/uploads/leaderboard-data/images/ranking-common-icon.png) top left no-repeat;
}
.other-ranking-icon {
height: 26px;
width: 26px;
color: #FFF;
font-weight: bold;
display: block;
font-size: 12px;
line-height: 26px;
text-align: center;
position: absolute;
margin-left: -10px;
}
.other-ranking-desc-wrapper {
width: calc(100% - 210px);
text-align: left;
padding-top: 10px;
float: right;
}
.other-ranking-user-name {
position: absolute;
margin-left: 60px;
margin-top: 18px;
font-size: 13px;
font-weight: bold;
}
.other-ranking-score {
font-size: 14px;
margin-top: 13px;
text-align: center;
font-weight: bold;
}
.user-avatar {
width: 48px;
height: 48px;
} .ranking-sub-header {
height: 40px;
border-bottom: 1px solid #7acbf5;
background: #0b94c7; }
.sub-header-ranking {
width: 200px;
float: left;
font-size: 15px;
height: 100%;
border-right: 1px solid #7acbf5;
display: table;
}
.sub-header-ranking span {
display: table-cell;
vertical-align: middle;
font-weight: bold;
}
.sub-header-score {
width: calc(100% - 210px);
float: right;
font-size: 15px;
height: 100%;
display: table;
}
.sub-header-score span {
display: table-cell;
vertical-align: middle;
font-weight: bold;
}
.odd-background {
background: #0b94c7;
}
.loadmore-button {
clear: both;
max-width: 450px;
text-align: center;
margin: 0px auto;
width: 100%;
margin-top: 20px;
background: #0b94c7;
color: white !important;
font-size: 15px;
height: 40px;
font-weight: bold;
margin-bottom: 50px;
}
.current-user-row {
border: 2px solid red;
}
.current-user-row .other-ranking-avatar-wrapper {
width: 198px !important;
}
.my-ranking-title {
position: absolute;
left: calc(50% + 280px);
top: 285px;
font-size: 20px;
font-weight: bold;
}
.my-ranking-row {
background: linear-gradient(135deg,#0db8ec,#2b98d4);
width: 300px;
position: absolute;
left: calc(50% + 280px);
top: 320px;
}
.update-button {
float: right;
margin-right: 10px;
}
.no-badge {
margin-left: -15px !important;
}
.my-no-badge {
margin-left: -23px !important;
}