* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
font-family: "Outfit", sans-serif;
color: #f4f7f8;
background:
radial-gradient(
circle at 15% 10%,
rgba(39, 132, 137, 0.24),
transparent 35%
),
radial-gradient(
circle at 90% 90%,
rgba(27, 94, 107, 0.22),
transparent 38%
),
#080d10;
}
/* =========================
PAGE
========================= */
.page {
width: min(1450px, 94vw);
min-height: 100vh;
margin: auto;
display: grid;
/*
SIDEBAR ON THE OTHER SIDE
*/
grid-template-columns:
270px
minmax(0, 1fr);
gap: 42px;
padding: 42px 0;
}
/* =========================
SIDEBAR
========================= */
.sidebar {
grid-column: 1;
grid-row: 1;
padding-top: 10px;
}
.sidebar-section {
padding: 17px;
margin-bottom: 17px;
border-radius: 16px;
background:
rgba(255,255,255,0.032);
border: 1px solid
rgba(255,255,255,0.065);
}
.sidebar-section h3 {
margin: 0 0 12px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: #76bfc0;
font-weight: 700;
}
/* =========================
MAIN
========================= */
.main-content {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* =========================
HEADER
========================= */
.header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 35px;
margin-bottom: 30px;
}
.title-area {
flex: 1;
}
.title-area h1 {
margin: 0;
font-size: clamp(
36px,
4vw,
49px
);
line-height: 1;
letter-spacing: -1.5px;
font-weight: 800;
}
.title-area p {
margin: 11px 0 0;
color: #899497;
font-size: 15px;
}
/* =========================
SEARCH
========================= */
.group-search {
width: 410px;
display: flex;
gap: 8px;
}
.group-search input {
width: 100%;
height: 48px;
padding: 0 17px;
border-radius: 12px;
border: 1px solid
rgba(255,255,255,0.09);
outline: none;
background:
rgba(255,255,255,0.045);
color: white;
font-family: inherit;
font-size: 14px;
}
.group-search input:focus {
border-color:
rgba(75,177,178,0.7);
}
.group-search input::placeholder {
color: #6f7a7d;
}
.group-search button {
height: 48px;
padding: 0 20px;
border: 0;
border-radius: 12px;
background: #2d999b;
color: white;
font-family: inherit;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
}
.group-search button:hover {
background: #39abad;
transform: translateY(-1px);
}
/* =========================
GROUP INFO
========================= */
.group-info {
display: flex;
align-items: center;
gap: 17px;
padding: 15px 19px;
margin-bottom: 17px;
border-radius: 16px;
background:
rgba(255,255,255,0.035);
border: 1px solid
rgba(255,255,255,0.065);
}
.group-cover-wrapper {
width: 55px;
height: 55px;
flex: 0 0 55px;
overflow: hidden;
border-radius: 10px;
background: #172024;
}
.group-cover-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.group-details h2 {
margin: 0;
font-size: 22px;
font-weight: 700;
}
.group-details p {
margin: 4px 0 0;
color: #788386;
font-size: 13px;
}
/* =========================
RANKING
========================= */
.ranking-section {
padding: 23px 24px 19px;
border-radius: 18px;
background:
rgba(255,255,255,0.032);
border: 1px solid
rgba(255,255,255,0.065);
}
.ranking-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
margin-bottom: 16px;
}
.ranking-header h2 {
margin: 0;
font-size: 21px;
}
#rankingHint {
display: block;
margin-top: 3px;
color: #747e81;
font-size: 12px;
}
.progress-container {
width: 190px;
}
#progressText {
display: block;
margin-bottom: 6px;
text-align: right;
color: #818c8f;
font-size: 12px;
}
.progress-bar {
height: 5px;
overflow: hidden;
border-radius: 99px;
background:
rgba(255,255,255,0.075);
}
#progressFill {
width: 0%;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#247e82,
#51b9b5
);
transition: width .25s;
}
/* =========================
SONG LIST
========================= */
.song-list {
display: flex;
flex-direction: column;
gap: 7px;
max-height: 62vh;
overflow-y: auto;
padding-right: 5px;
}
.song-list::-webkit-scrollbar {
width: 5px;
}
.song-list::-webkit-scrollbar-track {
background: transparent;
}
.song-list::-webkit-scrollbar-thumb {
background:
rgba(255,255,255,0.12);
border-radius: 10px;
}
/* =========================
SONG ROW
========================= */
.song-row {
display: grid;
grid-template-columns:
42px
minmax(180px, 1fr)
65px
minmax(190px, 330px);
align-items: center;
gap: 13px;
min-height: 65px;
padding: 8px 13px;
border-radius: 12px;
background:
rgba(255,255,255,0.028);
border: 1px solid transparent;
transition: .18s;
}
.song-row:hover {
background:
rgba(255,255,255,0.052);
border-color:
rgba(255,255,255,0.06);
}
.song-cover {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 8px;
background: #172024;
}
.song-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #e5eaeb;
font-size: 14px;
font-weight: 600;
}
.song-date {
text-align: center;
color: #6f797c;
font-size: 11px;
}
/* =========================
RATING
========================= */
.rating-wrapper {
display: flex;
align-items: center;
gap: 11px;
}
.rating-slider {
appearance: none;
width: 100%;
height: 6px;
border-radius: 99px;
outline: none;
cursor: pointer;
background:
linear-gradient(
90deg,
#2c9698 0%,
#2c9698 var(--value),
rgba(255,255,255,0.10) var(--value),
rgba(255,255,255,0.10) 100%
);
}
.rating-slider::-webkit-slider-thumb {
appearance: none;
width: 17px;
height: 17px;
border-radius: 50%;
background: #edfafa;
border: 3px solid #35a5a6;
box-shadow:
0 0 0 3px
rgba(53,165,166,0.12);
}
.rating-slider::-moz-range-thumb {
width: 17px;
height: 17px;
border-radius: 50%;
background: #edfafa;
border: 3px solid #35a5a6;
}
.score {
width: 30px;
text-align: center;
color: #65c3c0;
font-size: 16px;
font-weight: 800;
}
/* =========================
BOTTOM BUTTONS
========================= */
.bottom-controls {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 16px;
}
.secondary-button,
.export-button {
height: 42px;
padding: 0 17px;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.secondary-button {
background:
rgba(255,255,255,0.045);
border: 1px solid
rgba(255,255,255,0.09);
color: #bdc5c7;
}
.secondary-button:hover {
background:
rgba(255,255,255,0.08);
}
.export-button {
background: #278e90;
border: 0;
color: white;
}
.export-button:hover {
background: #32a5a5;
}
/* =========================
TOOLS
========================= */
.tool-buttons {
display: flex;
flex-direction: column;
gap: 5px;
}
.tool-button {
width: 100%;
min-height: 39px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: #b8c1c3;
font-family: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.tool-button:hover {
background:
rgba(45,153,155,0.10);
color: #edf7f7;
}
.tool-icon {
width: 21px;
text-align: center;
color: #4eb6b6;
font-size: 16px;
}
/* =========================
HELP
========================= */
.language-tabs {
display: flex;
gap: 5px;
margin-bottom: 13px;
}
.language-button {
padding: 5px 9px;
border: 0;
border-radius: 7px;
background:
rgba(255,255,255,0.05);
color: #707a7d;
font-family: inherit;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.language-button.active {
background:
rgba(45,153,155,0.18);
color: #6cc4c1;
}
.help-text {
color: #818b8e;
font-size: 11.5px;
line-height: 1.55;
}
.help-text p {
margin: 0 0 14px;
}
.help-text p:last-child {
margin-bottom: 0;
}
.help-text strong {
color: #c7d0d1;
}
/* =========================
EMPTY
========================= */
.empty-state {
min-height: 470px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 50px;
border-radius: 19px;
border: 1px dashed
rgba(255,255,255,0.09);
background:
rgba(255,255,255,0.015);
}
.empty-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border-radius: 17px;
background:
rgba(45,153,155,0.12);
color: #58b9b7;
font-size: 27px;
}
.empty-state h2 {
margin: 0;
font-size: 22px;
}
.empty-state p {
max-width: 410px;
margin: 9px 0 0;
color: #747e81;
line-height: 1.5;
font-size: 14px;
}
/* =========================
MODALS
========================= */
.modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
background:
rgba(3,7,8,0.75);
backdrop-filter: blur(8px);
}
.modal-box {
position: relative;
width: min(600px, 94vw);
max-height: 85vh;
overflow-y: auto;
padding: 30px;
border-radius: 20px;
background: #12191c;
border: 1px solid
rgba(255,255,255,0.09);
box-shadow:
0 30px 80px
rgba(0,0,0,0.5);
}
.large-modal {
width: min(720px, 94vw);
}
.modal-box h2 {
margin: 0 0 22px;
font-size: 25px;
}
.close-modal {
position: absolute;
top: 14px;
right: 15px;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background:
rgba(255,255,255,0.06);
color: #a7b0b2;
font-size: 20px;
cursor: pointer;
}
/* =========================
STATS
========================= */
.stats-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 11px;
}
.stat-card {
padding: 18px;
border-radius: 13px;
background:
rgba(255,255,255,0.04);
}
.stat-card span {
display: block;
margin-bottom: 8px;
color: #7e898c;
font-size: 12px;
}
.stat-card strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #e3e9ea;
font-size: 20px;
}
/* =========================
FINAL RANKING
========================= */
.final-ranking-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.final-song {
display: grid;
grid-template-columns:
35px 1fr 60px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background:
rgba(255,255,255,0.035);
}
.final-position {
text-align: center;
color: #718084;
font-size: 12px;
}
.final-name {
color: #dce3e4;
font-size: 13px;
}
.final-score {
text-align: right;
color: #65c3c0;
font-weight: 800;
}
/* =========================
UTILITIES
========================= */
.hidden {
display: none !important;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 1050px) {
.page {
grid-template-columns: 1fr;
gap: 22px;
}
.main-content {
grid-column: 1;
grid-row: 1;
}
.sidebar {
grid-column: 1;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 15px;
}
}
@media (max-width: 750px) {
.page {
width: 94vw;
padding-top: 28px;
}
.header {
flex-direction: column;
align-items: stretch;
}
.group-search {
width: 100%;
}
.sidebar {
display: block;
}
.song-row {
grid-template-columns:
38px
minmax(100px, 1fr)
50px
minmax(100px, 1fr);
gap: 8px;
}
.song-date {
display: none;
}
.ranking-header {
align-items: flex-start;
flex-direction: column;
}
.progress-container {
width: 100%;
}
#progressText {
text-align: left;
}
.bottom-controls {
justify-content: stretch;
}
.secondary-button,
.export-button {
flex: 1;
}
}