html{
--upload-bg:var(--clr-bg-nav);
--upload-text:var(--clr-text-primary);
--upload-button-bg:var(--clr-button);
--upload-button-border:var(--clr-sublist-arrow);
--upload-button-text:var(--clr-sublist-arrow);
--upload-button-hover-bg:var(--clr-sublist-arrow);
--upload-button-hover-text:var(--clr-bg-primary);
--upload-border:#d3d3d3;
--progress-bg:var(--clr-bg-nav-hover);
--progress-fill:var(--clr-sublist-arrow);
--progress-text:var(--clr-text-primary);
--controls-bg:#1c1c1c;
--control-label-clr:#b5b5b5;
--control-input-bg:#252525;
--control-input-border:#444444;
--control-input-text:#d3d3d3;
--stat-bg:#1c1c1c;
--stat-border-left:#4caf50;
--stat-header-clr:#4caf50;
--stat-header-border-bottom:#333333;
--stat-border-bottom:#292929;
--stat-label-clr:#b5b5b5;
--stat-value-clr:#4caf50;
--toplist-bg:#1c1c1c;
--toplist-border-left:#ff9800;
--toplist-header-clr:#ff9800;
--toplist-header-border-bottom:#333333;
--toplist-border-bottom:#292929;
--toplist-label-clr:#b5b5b5;
--toplist-value-clr:#ff9800;
--toplist-rank-bg:#ff9800;
--toplist-rank-text:#1c1c1c;
--error-bg:#b94444;
--error-text:#ffbfbf;
--chart-bg:#1c1c1c;
--chart-border-left:#2196f3;
--chart-header-clr:#2196f3;
--chart-header-border-bottom:#333333;
--chart-label-clr:#b5b5b5;
--chart-bar-bg:#252525;
--chart-fill-gradient-start:#2196f3;
--chart-fill-gradient-end:#64b5f6;
--chart-value-clr:#2196f3;
}
html.light{
--upload-bg:#f5f3f0;
--upload-text:#2b2520;
--upload-button-bg:#e5ddd0;
--upload-button-border:#a89080;
--upload-button-text:#5a4f45;
--upload-button-hover-bg:#a89080;
--upload-button-hover-text:#f5f3f0;
--upload-border:#b8a890;
--progress-bg:#d9d7ce;
--progress-fill:#a89080;
--progress-text:#2b2520;
--controls-bg:#e8e3d8;
--control-label-clr:#595245;
--control-input-bg:#fbf9f4;
--control-input-border:#9d927f;
--control-input-text:#2b2520;
--stat-bg:#e8e3d8;
--stat-border-left:#58802d;
--stat-header-clr:#58802d;
--stat-header-border-bottom:#bab59a;
--stat-border-bottom:#c1c0af;
--stat-label-clr:#625d4e;
--stat-value-clr:#58802d;
--toplist-bg:#e8e3d8;
--toplist-border-left:#b68400;
--toplist-header-clr:#b68400;
--toplist-header-border-bottom:#bab59a;
--toplist-border-bottom:#c1c0af;
--toplist-label-clr:#625d4e;
--toplist-value-clr:#b68400;
--toplist-rank-bg:#b68400;
--toplist-rank-text:#2b280a;
--error-bg:#f2c0bb;
--error-text:#7a1916;
--chart-bg:#e8e3d8;
--chart-border-left:#2a63a4;
--chart-header-clr:#2a63a4;
--chart-header-border-bottom:#bab59a;
--chart-label-clr:#625d4e;
--chart-bar-bg:#dddbcc;
--chart-fill-gradient-start:#2a63a4;
--chart-fill-gradient-end:#6c9dce;
--chart-value-clr:#2a63a4;
}
#content{
max-width:1500px;
width:100%;
margin:auto;
}
.upload-section{
max-width:1200px;
width:100%;
margin:auto;
background-color:var(--upload-bg);
padding:1.5em 2em;
text-align:center;
border:1px solid var(--upload-border);
}
.upload-section>h2{
margin:0 0 0.5em 0;
font-weight:bold;
font-size:1.8rem;
}
.upload-section>p{
margin:0 0 1.5em 0;
font-size:1rem;
color:var(--upload-text);
opacity:0.8;
}
.upload-section>.upload-button{
margin-bottom:1.5em;
}
.upload-section>.upload-button>label{
padding:0.5rem 1.25rem;
background-color:var(--upload-button-bg);
border:1px solid var(--upload-button-border);
color:var(--upload-button-text);
font-family:var(--fonts);
font-size:var(--global-fs);
cursor:pointer;
-webkit-transition:
background-color 0.3s ease,
color 0.3s ease;
-o-transition:
background-color 0.3s ease,
color 0.3s ease;
transition:
background-color 0.3s ease,
color 0.3s ease;
width:100%;
}
.upload-section>.upload-button>label:hover,
.upload-section>.upload-button>label:focus{
background-color:var(--upload-button-hover-bg);
color:var(--upload-button-hover-text);
}
.upload-section>.upload-button>input[type="file"]{
display:none;
}
.progress-container{
width:100%;
height:16px;
background-color:var(--progress-bg);
border-radius:6px;
overflow:hidden;
margin-bottom:0.5em;
}
.progress-bar{
height:100%;
background-color:var(--progress-fill);
width:0%;
-webkit-transition:width 0.4s ease;
-o-transition:width 0.4s ease;
transition:width 0.4s ease;
}
.progress-text{
font-size:0.875rem;
color:var(--progress-text);
text-align:center;
min-height:1.2em;
font-family:var(--fonts-mono);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.controls{
margin-top:20px;
background:var(--controls-bg);
padding:20px;
margin-bottom:30px;
display:none;
}
.control-group{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
gap:15px;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.control-group label{
color:var(--control-label-clr);
font-weight:500;
}
.control-group input{
background:var(--control-input-bg);
border:1px solid var(--control-input-border);
color:var(--control-input-text);
padding:8px 12px;
border-radius:5px;
width:80px;
}
.stat-card{
background:var(--stat-bg);
padding:20px;
border-left:4px solid var(--stat-border-left);
}
.stat-card h3{
color:var(--stat-header-clr);
margin-bottom:15px;
font-size:1.3rem;
border-bottom:1px solid var(--stat-header-border-bottom);
padding-bottom:10px;
}
.stat-item{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
margin:8px 0;
padding:5px 0;
border-bottom:1px solid var(--stat-border-bottom);
}
.stat-item:last-child{
border-bottom:none;
}
.stat-label{
font-weight:500;
color:var(--stat-label-clr);
}
.stat-value{
color:var(--stat-value-clr);
font-weight:bold;
}
.top-list{
background:var(--toplist-bg);
padding:20px;
margin:20px 0;
border-left:4px solid var(--toplist-border-left);
}
.top-list h3{
color:var(--toplist-header-clr);
margin-bottom:15px;
font-size:1.3rem;
border-bottom:1px solid var(--toplist-header-border-bottom);
padding-bottom:10px;
}
.top-item{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
padding:8px 0;
border-bottom:1px solid var(--toplist-border-bottom);
word-break:break-all;
}
.top-item:last-child{
border-bottom:none;
}
.top-rank{
background:var(--toplist-rank-bg);
color:var(--toplist-rank-text);
padding:2px 8px;
font-size:0.8rem;
font-weight:bold;
margin-right:10px;
min-width:25px;
text-align:center;
}
.top-label{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
margin-right:10px;
font-size:0.9rem;
color:var(--toplist-label-clr);
}
.top-value{
color:var(--toplist-value-clr);
font-weight:bold;
white-space:nowrap;
}
.error{
background:var(--error-bg);
color:var(--error-text);
padding:15px;
margin:20px 0;
text-align:center;
}
.chart-container{
background:var(--chart-bg);
padding:20px;
margin:20px 0;
border-left:4px solid var(--chart-border-left);
}
.chart-container h3{
color:var(--chart-header-clr);
margin-bottom:15px;
font-size:1.3rem;
border-bottom:1px solid var(--chart-header-border-bottom);
padding-bottom:10px;
}
.chart-bar{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
margin:8px 0;
padding:5px 0;
}
.chart-label{
min-width:150px;
font-size:0.9rem;
color:var(--chart-label-clr);
text-align:right;
margin-right:10px;
}
.chart-visual{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
background:var(--chart-bar-bg);
height:20px;
border-radius:10px;
overflow:hidden;
position:relative;
}
.chart-fill{
height:100%;
background:-webkit-gradient(
linear,
left top,
right top,
from(var(--chart-fill-gradient-start)),
to(var(--chart-fill-gradient-end))
);
background:-o-linear-gradient(
left,
var(--chart-fill-gradient-start),
var(--chart-fill-gradient-end)
);
background:linear-gradient(
90deg,
var(--chart-fill-gradient-start),
var(--chart-fill-gradient-end)
);
border-radius:10px;
-webkit-transition:width 0.5s ease;
-o-transition:width 0.5s ease;
transition:width 0.5s ease;
}
.chart-value{
margin-left:10px;
color:var(--chart-value-clr);
font-weight:bold;
font-size:0.9rem;
min-width:150px;
}
@media (max-width:900px){
.control-group{
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-align:stretch;
-ms-flex-align:stretch;
align-items:stretch;
}
.stats-container{
-ms-grid-columns:1fr;
grid-template-columns:1fr;
}
.top-item{
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start;
gap:5px;
}
.top-rank{
-ms-flex-item-align:start;
align-self:flex-start;
}
.chart-label,
.chart-value{
min-width:-moz-min-content;
min-width:-webkit-min-content;
min-width:min-content;
}
}