You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.5 KiB
91 lines
1.5 KiB
body { |
|
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); |
|
} |
|
|
|
.player-card { |
|
border-radius: 15px !important; |
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
|
position: sticky; |
|
top: 20px; |
|
} |
|
|
|
.playlist { |
|
max-height: calc(100vh - 40px); |
|
padding-bottom: 20px; |
|
} |
|
|
|
.btn-outline-light:hover { |
|
background-color: rgba(255,255,255,0.1); |
|
} |
|
|
|
.list-group-item { |
|
background-color: transparent !important; |
|
color: white !important; |
|
border-color: #333 !important; |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
} |
|
|
|
.list-group-item:hover { |
|
background-color: rgba(255,255,255,0.05) !important; |
|
} |
|
|
|
.list-group-item.active { |
|
background-color: rgba(255,255,255,0.1) !important; |
|
border-color: #666 !important; |
|
} |
|
|
|
.sticky-column { |
|
position: -webkit-sticky; |
|
position: sticky; |
|
top: 0; |
|
height: 100vh; |
|
overflow-y: auto; |
|
} |
|
|
|
.scrollable-column { |
|
height: 100vh; |
|
overflow-y: auto; |
|
} |
|
|
|
#progress-container { |
|
transition: all 0.2s; |
|
} |
|
|
|
#progress-container:hover { |
|
height: 10px !important; |
|
} |
|
|
|
#progress-bar { |
|
transition: width 0.1s linear; |
|
} |
|
|
|
/* Mobile responsiveness */ |
|
@media (max-width: 768px) { |
|
.sticky-column { |
|
height: auto; |
|
position: relative; |
|
} |
|
|
|
.scrollable-column { |
|
height: 50vh; |
|
} |
|
} |
|
|
|
/* Custom Scrollbar */ |
|
::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: #1a1a1a; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: #333; |
|
border-radius: 4px; |
|
} |
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
background: #444; |
|
}
|
|
|