133 lines
2.5 KiB
CSS
Executable File
133 lines
2.5 KiB
CSS
Executable File
body {
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
font-family: Courier New;
|
|
}
|
|
|
|
hr {
|
|
color: #f00;
|
|
margin: 10pt 0pt 2pt 6pt !important;
|
|
}
|
|
|
|
.w60 { width: 60px }
|
|
.h50 { height: 50px }
|
|
.center { text-align: center; margin-left: auto; margin-right: auto; }
|
|
.left { text-align: left; margin-left: 0; }
|
|
.right { text-align: right; margin-right: 0; }
|
|
.icon-32 { width: 32px; height: 32px; }
|
|
|
|
|
|
@media (min-width: 310px) {
|
|
.card { width: 300px }
|
|
.song-cover { max-width: 280px }
|
|
}
|
|
@media (min-width: 420px) {
|
|
.card { width: 380px }
|
|
.song-cover { max-width: 360px }
|
|
}
|
|
@media (min-width: 601px) {
|
|
.card { width: 550px }
|
|
.song-cover { max-width: 450px }
|
|
}
|
|
@media (min-width: 1000px) and (min-height: 1000px) {
|
|
.card { width: 800px }
|
|
.song-cover { max-width: 760px }
|
|
}
|
|
|
|
.navbar-top {
|
|
position: fixed;
|
|
top: 0;
|
|
background-color: #5b5b5b;
|
|
color: #fff;
|
|
width: 100%;
|
|
opacity: 90%;
|
|
padding: 8pt 0pt;
|
|
}
|
|
.navbar-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #5b5b5b;
|
|
color: #fff;
|
|
width: 100%;
|
|
opacity: 90%;
|
|
padding: 4pt 0pt;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-red {
|
|
padding: 2pt 8pt;
|
|
margin: 2pt 0pt 2pt 4pt;
|
|
border-radius: 20pt;
|
|
color: #fff;
|
|
background-color: #f00;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition-duration: 0.2s;
|
|
}
|
|
.btn-red:hover {
|
|
color: #f00;
|
|
background-color: #fff;
|
|
text-decoration: underline;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.bg-rounded {
|
|
cursor: pointer;
|
|
background-color: #ff0000;
|
|
margin: 0 2pt;
|
|
padding: 6px;
|
|
border-radius: 10pt;
|
|
transition-duration: 100ms;
|
|
}
|
|
.bg-rounded:hover {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.pager-link {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
margin: 4pt 0pt 2pt 6pt !important;
|
|
cursor: pointer;
|
|
}
|
|
.pager-link::after {
|
|
content: " >";
|
|
}
|
|
|
|
.container {
|
|
margin: 80pt auto 60px;
|
|
}
|
|
|
|
.card {
|
|
background-color: #373737;
|
|
padding: 10pt;
|
|
margin: 0 auto 40px;
|
|
border-radius: 8pt;
|
|
border: 2px solid #f00;
|
|
}
|
|
|
|
.song-cover {
|
|
border-radius: 8pt;
|
|
}
|
|
|
|
table.playlist {
|
|
text-align: left;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
.playlist td, .playlist th {
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #2d2d2d;
|
|
}
|
|
.playlist thead { border-bottom: 2px solid #f00; }
|
|
|
|
.playlist-song { width: 60%; overflow: scroll }
|
|
.playlist-album { width: 30%; overflow: scroll }
|
|
.playlist-length { width: 10%; overflow: scroll }
|