Created
March 21, 2020 02:13
-
-
Save montycheese/3da6cb77b4f84901588e1b72225a903e to your computer and use it in GitHub Desktop.
Leaderboard CSS page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#root { | |
height: 100%; | |
width: 100%; | |
} | |
.leaderboard-container { | |
height: 100%; | |
overflow: hidden; | |
font-weight: bold; | |
font-family: Roboto; | |
background: url("https://hypevision.sengage.io/static/cdn/red-lines.png"); | |
background-color: #18222e; | |
background-position: center bottom; | |
background-repeat: no-repeat; | |
background-size: cover; | |
color: white; | |
.leaderboard-title-container { | |
text-align: center; | |
height: 20%; | |
background-color: #df0707; | |
border-bottom: 3px solid #df0707; | |
.leaderboard-title-wrapper { | |
font-size: 200%; | |
width: 100%; | |
height: 60%; | |
a { | |
text-decoration: none; | |
} | |
.leaderboard-title-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/WarzoneW.png") no-repeat center center; | |
height: 15vh; | |
width: 15vh; | |
background-size: cover; | |
cursor: pointer; | |
-webkit-filter: brightness(100%); | |
} | |
.leaderboard-title-icon:hover { | |
-webkit-filter: brightness(70%); | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.2s ease; | |
-o-transition: all 0.2s ease; | |
-ms-transition: all 0.2s ease; | |
transition: all 0.2s ease; | |
} | |
.leaderboard-title { | |
cursor: pointer; | |
-webkit-filter: brightness(100%); | |
color: white; | |
text-decoration: none; | |
} | |
.leaderboard-title:hover { | |
-webkit-filter: brightness(70%); | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.2s ease; | |
-o-transition: all 0.2s ease; | |
-ms-transition: all 0.2s ease; | |
transition: all 0.2s ease; | |
text-decoration: none; | |
} | |
} | |
.leaderboard-subtitle { | |
display: block; | |
font-size: 120%; | |
height: 40%; | |
width: 100%; | |
background-color: #990000; | |
font-size: 120%; | |
letter-spacing: 0.165em; | |
line-height: 16px; | |
font-style: normal; | |
font-weight: bold; | |
} | |
} | |
.total-info-container { | |
height: 25%; | |
width: 100%; | |
background: linear-gradient(180deg, #6f0b10 0%, rgba(111, 11, 16, 0) 100%); | |
flex-flow: row wrap; | |
padding-left: 10%; | |
padding-right: 10%; | |
.total-info-headers { | |
height: 35%; | |
font-size: 3vh; | |
font-style: normal; | |
font-weight: bold; | |
line-height: 16px; | |
letter-spacing: 0.085em; | |
.current-info-header { | |
text-align: center; | |
height: 80%; | |
width: 50%; | |
background-color: white; | |
color: #18222e; | |
cursor: pointer; | |
} | |
.current-info-header-unselected { | |
text-align: center; | |
height: 80%; | |
width: 50%; | |
border: 1px solid #9d9d9d; | |
color: #9d9d9d; | |
cursor: pointer; | |
} | |
.current-info-header:hover { | |
background-color: #b2b2b7; | |
} | |
.current-info-header-unselected:hover { | |
background-color: rgba(0, 0, 0, 0.2); | |
} | |
} | |
.total-info { | |
height: 70%; | |
justify-content: space-evenly; | |
flex: 1 1 0; | |
width: 0; | |
.info-stat { | |
font-size: 200%; | |
} | |
.info-stat-kills { | |
height: 10vh; | |
width: 10vh; | |
border-top: 4px solid #d03b3b; | |
border-bottom: 4px solid #d03b3b; | |
} | |
.info-stat-players { | |
height: 10vh; | |
width: 10vh; | |
.CircularProgressbar-path, | |
.CircularProgressbar-text { | |
stroke: #ba2a2a; | |
fill: white; | |
font-size: 110%; | |
} | |
.CircularProgressbar-trail { | |
stroke: white; | |
} | |
} | |
.info-label { | |
color: #d8d8d9; | |
font-size: 3vh; | |
font-weight: normal; | |
text-align: center; | |
font-style: normal; | |
font-weight: bold; | |
} | |
} | |
} | |
.rankings-container { | |
height: 43%; | |
background-image: url("/src/images/red-lines.png"); | |
.rankings-header-container { | |
height: 20%; | |
font-size: 2.5vh; | |
text-align: center; | |
} | |
.rankings-header { | |
cursor: pointer; | |
letter-spacing: 0.085em; | |
} | |
.rankings-header:hover { | |
background-color: rgba(0, 0, 0, 0.2); | |
color: #b2b2b7; | |
} | |
.rankings-header-text-wrapper { | |
height: auto; | |
width: 80%; | |
border-bottom: 2px solid white; | |
} | |
.rankings-header-text-wrapper-unselected { | |
height: auto; | |
width: 80%; | |
color: grey; | |
} | |
.places-container { | |
height: 75%; | |
.team-places-container { | |
height: 100%; | |
overflow-y: auto; | |
.team-content-wrapper { | |
width: 100%; | |
max-height: 10vh; | |
height: 10vh; | |
.team-placing { | |
flex-grow: 0.5; | |
} | |
} | |
.view--players { | |
width: 100%; | |
max-height: 38vh; | |
height: 38vh; | |
.team-placing { | |
flex-grow: 0.2 !important; | |
} | |
} | |
.team-content-wrapper:nth-child(1) { | |
.team-placing { | |
flex-grow: 0.9; | |
background-color: rgba(50, 65, 81, 0.9); | |
} | |
.team-icon-wrapper { | |
height: 120%; | |
.team-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-1.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
} | |
.team-rank { | |
display: none; | |
} | |
} | |
} | |
.team-content-wrapper:nth-child(2) { | |
.team-placing { | |
flex-grow: 0.9; | |
background-color: rgba(50, 65, 81, 0.9); | |
} | |
.team-icon-wrapper { | |
height: 120%; | |
.team-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-2.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
} | |
.team-rank { | |
display: none; | |
} | |
} | |
} | |
.team-content-wrapper:nth-child(3) { | |
.team-placing { | |
flex-grow: 0.9; | |
background-color: rgba(50, 65, 81, 0.9); | |
} | |
.team-icon-wrapper { | |
height: 120%; | |
.team-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-3.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
} | |
.team-rank { | |
display: none; | |
} | |
} | |
} | |
.team-placing { | |
flex-grow: 0.9; | |
background-color: rgba(34, 46, 61, 0.9); | |
border-radius: 5px; | |
cursor: pointer; | |
.team-icon-wrapper { | |
height: 100%; | |
width: 15%; | |
.team-icon { | |
height: 5vh; | |
width: 5vh; | |
margin-top: 3%; | |
margin-bottom: 3%; | |
background-color: white; | |
border-radius: 50px; | |
border: 1px solid white; | |
.team-rank { | |
text-align: center; | |
flex: 1; | |
color: black; | |
font-size: 150%; | |
} | |
} | |
} | |
.team-name { | |
flex: 3.5; | |
font-size: 2vw; | |
} | |
.team-points { | |
flex: 1; | |
} | |
} | |
.team-placing:hover { | |
background-color: rgba(40, 52, 65, 0.9); | |
} | |
} | |
.player-places-container { | |
height: 32vh; | |
overflow-y: auto; | |
color: white; | |
.player-placing { | |
flex-grow: 1; | |
flex-basis: 0; | |
border-radius: 5px; | |
cursor: pointer; | |
background-color: rgba(34, 46, 61, 0.9); | |
height: 6.8vh; | |
height: 6.8vh; | |
.player-icon-wrapper { | |
height: 100%; | |
width: 15%; | |
.player-icon { | |
height: 5vh; | |
width: 5vh; | |
background-color: white; | |
border-radius: 50px; | |
border: 1px solid white; | |
margin-top: 3%; | |
margin-bottom: 3%; | |
.player-rank { | |
flex: 1; | |
color: black; | |
font-size: 150%; | |
text-align: center; | |
} | |
} | |
} | |
.player-name { | |
flex: 3.5; | |
font-size: 2vw; | |
} | |
.player-points { | |
flex: 1; | |
} | |
} | |
.player-placing:nth-child(1) { | |
max-height: 9vh; | |
height: 9vh; | |
background-color: rgba(50, 65, 81, 0.9); | |
.player-icon-wrapper { | |
height: 120%; | |
.player-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-1.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
z-index: 1000; | |
} | |
.player-rank { | |
display: none; | |
} | |
} | |
} | |
.player-placing:nth-child(2) { | |
max-height: 9vh; | |
height: 9vh; | |
background-color: rgba(50, 65, 81, 0.9); | |
.player-icon-wrapper { | |
height: 120%; | |
.player-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-2.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
} | |
.player-rank { | |
display: none; | |
} | |
} | |
} | |
.player-placing:nth-child(3) { | |
max-height: 9vh; | |
height: 9vh; | |
background-color: rgba(50, 65, 81, 0.9); | |
.player-icon-wrapper { | |
height: 120%; | |
.player-icon { | |
background: url("https://hypevision.sengage.io/static/cdn/trophy-3.svg") no-repeat center center; | |
background-size: contain; | |
position: absolute; | |
border: 0px none rgba(0, 0, 0, 0); | |
height: 30%; | |
width: 30%; | |
transform: translate(-10%, -25%); | |
} | |
.player-rank { | |
display: none; | |
} | |
} | |
} | |
.player-placing:hover { | |
background-color: rgba(40, 52, 65, 0.9); | |
} | |
} | |
.player-for-team-container { | |
max-height: 50%; | |
overflow-y: auto; | |
color: white; | |
.player-placing { | |
flex: 1; | |
background-color: rgba(50, 65, 81, 0.9); | |
border-radius: 5px; | |
cursor: pointer; | |
.player-icon-wrapper { | |
height: 100%; | |
width: 15%; | |
.player-icon { | |
height: 3vh; | |
width: 3vh; | |
background-color: white; | |
border-radius: 50px; | |
border: 1px solid white; | |
margin-top: 3%; | |
margin-bottom: 3%; | |
.player-rank { | |
flex: 1; | |
color: black; | |
font-size: 100%; | |
text-align: center; | |
} | |
} | |
} | |
.player-name { | |
flex: 3.5; | |
font-size: 1.7vw; | |
} | |
.points-wrapper { | |
font-size: 1.4rem; | |
.points-label { | |
font-size: 0.8rem; | |
} | |
} | |
} | |
.player-placing:hover { | |
background-color: rgba(40, 52, 65, 0.9); | |
} | |
} | |
.points-wrapper { | |
font-size: 1.8rem; | |
.points-label { | |
font-size: 1.2rem; | |
} | |
} | |
} | |
} | |
.footer-container { | |
height: 10%; | |
width: 100%; | |
position: relative; | |
.footer-header { | |
position: absolute; | |
font-size: 100%; | |
font-weight: normal; | |
width: fit-content; | |
padding: 0.25vw; | |
top: 0.7vw; | |
left: 50vw; | |
transform: translate(-50%, -50%); | |
background: linear-gradient(180deg, transparent 50%, #18222e 50%); | |
} | |
.footer-sponsor { | |
height: 80%; | |
width: 30%; | |
border: 1px solid #990000; | |
background-color: rgba(24, 34, 46, 0.9); | |
a { | |
text-decoration: none; | |
cursor: pointer; | |
-webkit-filter: brightness(100%); | |
} | |
a:hover { | |
-webkit-filter: brightness(70%); | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.2s ease; | |
-o-transition: all 0.2s ease; | |
-ms-transition: all 0.2s ease; | |
transition: all 0.2s ease; | |
} | |
.efuse-sponsor { | |
background: url("https://hypevision.sengage.io/static/cdn/efuse.png") no-repeat center center; | |
background-size: contain; | |
height: 100%; | |
width: 9vh; | |
} | |
.hypevision-sponsor { | |
background: url("https://hypevision.sengage.io/static/cdn/hypevision-sponsor-logo.png") no-repeat center center; | |
background-size: contain; | |
height: 100%; | |
width: 9vh; | |
} | |
} | |
} | |
::-webkit-scrollbar-track { | |
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
border-radius: 10px; | |
opacity: 0; | |
} | |
::-webkit-scrollbar { | |
width: 12px; | |
opacity: 0; | |
} | |
::-webkit-scrollbar-thumb { | |
border-radius: 10px; | |
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
background-color: #555; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.leaderboard-container { | |
height: 100%; | |
.leaderboard-title-container { | |
.leaderboard-subtitle { | |
font-size: 100%; | |
} | |
} | |
.total-info-container { | |
height: 20%; | |
padding-left: 10%; | |
padding-right: 10%; | |
.total-info-headers { | |
font-size: 100%; | |
.current-info-header, | |
.current-info-header-unselected { | |
height: 80%; | |
width: 80%; | |
} | |
} | |
.total-info { | |
.info-stat { | |
} | |
.info-stat-players { | |
.CircularProgressbar-path, | |
.CircularProgressbar-text { | |
font-size: 5vh !important; | |
} | |
} | |
.info-label { | |
font-size: 2vh; | |
padding-left: 25%; | |
padding-right: 25%; | |
} | |
} | |
} | |
.rankings-container { | |
height: 40%; | |
margin-top: 15%; | |
display: flex!important; | |
flex-direction: column!important; | |
.rankings-header-container { | |
height: 20%; | |
font-size: 2.5vh; | |
text-align: center; | |
} | |
.places-container { | |
.team-places-container { | |
.team-placing { | |
.team-rank { | |
} | |
.team-name { | |
flex: 3.5; | |
font-size: 3.5vw; | |
} | |
} | |
} | |
.player-places-container { | |
.player-placing { | |
.player-rank { | |
} | |
.player-name { | |
flex: 3.5; | |
font-size: 3.5vw; | |
} | |
} | |
} | |
.player-for-team-container { | |
.player-placing { | |
.player-icon-wrapper { | |
.player-icon { | |
.player-rank { | |
font-size: 100%; | |
} | |
} | |
} | |
.player-name { | |
flex: 3.5; | |
font-size: 3.5vw; | |
} | |
.points-wrapper { | |
flex: 1; | |
font-size: 1.3rem; | |
.points-label { | |
font-size: 0.8rem; | |
} | |
} | |
} | |
} | |
} | |
} | |
.footer-container { | |
.footer-header { | |
top: 2vw; | |
} | |
.footer-sponsor { | |
width: 70%; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment