empede/static/style.css

333 lines
4.7 KiB
CSS

* {
box-sizing: border-box;
}
[role=button] {
cursor: pointer;
}
html {
height: 100%;
}
body {
font-family: sans-serif;
background-color: #112;
color: #fff;
display: flex;
margin: 0;
height: 100%;
}
@media (prefers-contrast: more) {
body {
background-color: black;
}
}
button {
background-color: transparent;
border: none;
color: inherit;
padding: 0;
font-weight: bold;
display: flex;
line-height: 24px;
cursor: pointer;
}
button .material-symbols-outlined {
margin-right: 0.25rem;
}
.active {
color: #99f;
}
.browser {
flex: 1;
display: flex;
flex-flow: column;
height: 100%;
padding: 0;
}
a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
@media (prefers-contrast: more) {
a,
[role=button],
[role=link] {
color: #99f;
text-decoration: underline;
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.player > .queue {
flex: 1;
display: flex;
flex-flow: column;
}
.queue-header {
margin-top: 1.0rem;
display: flex;
align-items: center;
}
.queue-header button {
margin-left: 0.75rem;
}
.queue-next {
font-weight: bold;
flex: 1;
}
.queue {
margin-top: 0.5rem;
overflow: auto;
}
.queue ul li {
padding: 0 0.5rem;
border-radius: .25rem;
display: flex;
align-items: center;
}
.queue ul li.playing {
background-color: #334;
}
@media (prefers-contrast: more) {
.queue ul li.playing {
background-color: black;
border: 2px solid white;
}
}
.queue ul .metadata {
flex: 1;
}
.queue ul .metadata * {
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.queue ul .song__name {
overflow: hidden;
display: -webkit-box;
}
.queue ul li:not(:hover) .remove {
display: none;
}
.browser .header {
display: flex;
flex-flow: column;
background-color: #334;
border-radius: 0.25rem;
padding: 0.75rem 1rem;
margin: 16px 16px 0;
}
.browser .buttons {
display: flex;
flex-flow: row;
margin-top: 0.75rem;
}
.browser .buttons button {
margin-right: 1.0rem;
}
ul.breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
@media (prefers-contrast: more) {
ul.breadcrumb {
background-color: black;
border: 2px solid white;
}
}
ul.breadcrumb li:not(:first-child)::before {
display: inline-block;
padding-left: .5rem;
padding-right: .1rem;
color: #6c757d;
content: "/";
}
ul.dir {
overflow: auto;
flex: 1;
padding: 16px;
}
ul.dir li {
cursor: pointer;
padding: 0.5rem 0.5rem;
border-radius: 0.25rem;
min-height: 3rem;
display: flex;
align-items: center;
}
ul.dir li:hover {
background-color: #334;
}
ul.dir li .material-symbols-outlined {
margin-right: 0.75rem;
width: 24px;
}
.song__name {
font-weight: bold;
}
.albumart {
border-radius: 0.25rem;
width: 48px;
height: 48px;
background: #445 url(/static/placeholder.webp);
background-size: contain;
}
.albumart a {
display: block;
}
.albumart img {
visibility: hidden;
}
.queue .albumart {
margin: 0.75rem;
margin-left: 0;
}
.browser .albumart {
margin-right: 0.75rem;
}
.albumart img {
border-radius: 0.25rem;
width: 100%;
height: 100%;
object-fit: cover;
}
.track {
margin-right: 0.75rem;
}
.player {
width: 25rem;
padding: 1rem 1rem 0;
display: flex;
flex-flow: column;
}
.player .nowplaying {
display: flex;
position: relative;
flex-flow: column;
background-color: #334;
border-radius: 0.25rem;
height: 13.0rem;
}
@media (prefers-contrast: more) {
.player .nowplaying {
background-color: black;
border: 2px solid white;
}
}
.player .progress {
background-color: #99f;
height: 0.5rem;
border-radius: 0.25rem;
position: absolute;
left: 0;
bottom: 0;
}
.player .controls,
.player .settings {
display: flex;
justify-content: space-around;
padding: 0 0.5rem 1.0rem;
}
.player .controls button {
font-size: 40px;
}
.player .settings button {
font-size: 25px;
}
.player .current {
display: flex;
flex-flow: row;
align-items: center;
padding: 0.5rem;
flex: 1;
}
.nowplaying .albumart {
margin-right: 1.0rem;
width: 80px;
height: 80px;
transition: transform 200ms ease-in-out;
}
.nowplaying .albumart:hover {
transform: scale(1.05);
}
.nowplaying .metadata {
flex: 1;
}
.nowplaying .idle {
font-weight: bold;
text-align: center;
}
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url(/static/vendor/material-symbols-outlined.woff2) format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}