html {
color:#ebebeb;
--main-bg-color:#191d21;
--secondary-bg-color:#232728;
--darkred1-color:#200606;
--darkred2-color:#3e2a2a;
}
.bg-nav {
background: var(--main-bg-color);
}
#sitelogo-container {
width:192px;
position:relative;
}
#sitelogo {
width: 100px;
height: 55px;
background-image:url("../assets/icons/logo.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#top-links, #left-links {
opacity: 0;
pointer-events: none;
}
#search {
background-color: var(--secondary-bg-color);
}
#results {
position: absolute;
background: #353939;
width: 100%;
top: 55px;
font-size: 19px;
border-radius: 5px;
}
#results {
opacity: 1;
transition: opacity 0.3s ease;
}
#results.hidden {
opacity: 0;
pointer-events: none;
}
#results li a {
display:inline-block;
color: #a0e5ff;
padding:10px;
width:100%;
}
#results li a:hover {
background-color: var(--secondary-bg-color);
}
#results li a mark {
background:unset;
background-color:unset;
color:inherit;
font-weight:600;
}
#main-container {
width: 100%;
min-height: calc(100vh - 3rem);
}
#main {
padding-bottom:0;
min-height: 100%;
background: var(--secondary-bg-color);
}
#main-content {
background: var(--secondary-bg-color);
}
#main-content a {
color: #00b0f4;
display:inline-block;
width:100%;
height:100%;
}
.main-title-container {
--tw-gradient-from: var(--darkred1-color);
--tw-gradient-to: var(--darkred2-color);
text-align:center;
}
.main-title-container h1 {
display:inline-block;
}
.user-contry-flag {
vertical-align: middle;
background-size: 100%;
border-radius: 3px;
}
/** charts **/
.charts-container .dow-chart {
margin-top:40px;
max-width: 100%;
width: 500px;
aspect-ratio:5/3;
}
.charts-container .dow-chart:first-child {
margin-top:20px;
}
.chart-container {
position: relative;
}
.chart-container .chart-title {
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
color:white;
font-weight:600;
font-size:17px;
text-align:center;
}
/** matches **/
.matches-container {
position: relative;
}
.matches tr.invalidData {
position:relative;
}
.matches tr.invalidData::after {
content:'';
pointer-events:none;
background-color:rgba(0,0,0,0.3);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
}
.matches tr.first-game-row.invalidData::after {
padding:5px;
content:'Inconsistent data from Relic API';
font-style:italic;
}
.matches {
color:#e3e3e3;
font-size: 20px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.matches tr.first-team-row {
border-top:1px solid #3b3b3b;
}
.matches tr.first-game-row {
border-top:3px solid #3b3b3b;
}
.matches th,
.matches td {
text-align: center;
}
.matches th,
.matches .date,
.matches .duration,
.matches .type,
.matches .map {
font-size:75%;
}
.matches th, .matches td {
padding:7px;
}
.matches .date {
width:75px;
}
.matches .type > span {
display:block;
}
.matches .map {
position: relative;
}
.matches .map-name {
position: relative;
}
.matches .map-icon {
position: relative;
display:inline-block;
width:100px;
height:100px;
background-size: contain;
background-position: center;
background-repeat: no-repeat
}
.matches .win-rate {
font-size:75%;
}
.matches .mmr .info-icon {
margin-right: 5px;
}
.bogus-MMR {
font-style: italic;
}
.matches .mmr-diff {
font-size:75%;
padding-left:0;
}
.matches .mmr-diff.winner {
color:#b0d6b0;
}
.matches .mmr-diff.loser {
color:#d6b0b0;
}
.matches .mmr-diff,
.matches .alias {
text-align: left;
}
.matches .alias.winner {
background-color: rgba(0, 255, 0, 0.06);
}
.matches .alias.loser {
background-color: rgba(255, 0, 0, 0.06);
}
.matches .race-icon {
display:inline-block;
background-position: center;
background-repeat: no-repeat;
width:15px;
aspect-ratio:1;
filter: invert(1);
margin:-5px;
margin-bottom:-5px;
margin-right:-5px;
padding:5px;
box-sizing: content-box;
}
.icon-CSM {
background-image: url("../assets/icons/races/CSM.svg");
background-size: 85%;
}
.icon-DE {
background-image: url("../assets/icons/races/DE.svg");
background-size: 75%;
}
.icon-ELD {
background-image: url("../assets/icons/races/ELD.svg");
background-size: 60%;
}
.icon-IG {
background-image: url("../assets/icons/races/IG.svg");
background-size: 65%;
}
.icon-NEC {
background-image: url("../assets/icons/races/NEC.svg");
background-size: 75%;
}
.icon-ORK {
background-image: url("../assets/icons/races/ORK.svg");
background-size: 60%;
}
.icon-SM {
background-image: url("../assets/icons/races/SM.svg");
background-size: 100%;
background-position: 50% 65%;
}
.icon-TAU {
background-image: url("../assets/icons/races/TAU.svg");
background-position: 50% 65%;
background-size: 60%;
}
.icon-SOB {
background-image: url("../assets/icons/races/SOB.svg");
background-size: 60%;
}
.icon-RDM {
background-image: url("../assets/icons/races/RDM.svg");
background-size: 60%;
}
.icon-summary {
width: 72px;
aspect-ratio: 1;
position:relative;
}
.icon-summary .icon-race,
.icon-summary .icon-sum {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-repeat: no-repeat;
display: inline-block;
width:90%;
aspect-ratio:1;
}
.icon-summary .icon-MMR {
background-image: url("../assets/icons/MMR.svg");
background-size: 80%;
filter: invert(1);
}
.icon-summary .icon-race {
filter: invert(1);
}
.icon-summary .icon-map {
width: 125%;
border-radius: 10%;
background-size: 100%;
}
.icon-summary .icon-sum {
background-position: center;
}
code {
position: relative;
z-index:9999;
}
.info-icon {
background-image:url("../assets/icons/info.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 13px;
display: inline-block;
aspect-ratio: 1;
vertical-align: baseline;
position: relative;
}
.info-hover-msg {
font-weight:400;
font-size:17px;
padding:10px;
text-align: left;
color:white;
display: none;
position: absolute;
z-index:1;
top:20px;
left: 50%;
transform: translateX(-50%);
backdrop-filter: blur(3px);
width:230px;
background:rgba(0,0,0,0.6);
border-radius:3px;
}
.info-hover:hover .info-hover-msg {
display: block;
}
.summary-box {
position:relative;
overflow:hidden;
}
.summary-box div {
position:relative;
}
.summary-box h2 {
color:white;
}
.summary-box p {
color:white;
}
.summary-box:before {
top:0;
left:0;
content:'';
border-radius: .5rem;
width:105%;
height:105%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
backdrop-filter: brightness(10%);
}