Files
NetSpeaker/html/main.css

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 60px;
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 }