empede/static/style.css

272 lines
3.9 KiB
CSS
Raw Normal View History

2023-04-27 12:25:49 +00:00
* {
box-sizing: border-box;
}
2023-04-27 13:41:28 +00:00
[role=button] {
cursor: pointer;
}
2023-04-27 12:07:35 +00:00
html {
height: 100%;
}
body {
2023-04-27 16:44:36 +00:00
font-family: sans-serif;
2023-04-27 12:07:35 +00:00
background-color: #112;
color: #fff;
display: flex;
margin: 0;
height: 100%;
}
2023-04-27 17:36:21 +00:00
@media (prefers-contrast: more) {
body {
background-color: black;
}
}
2023-04-27 12:07:35 +00:00
body > div {
padding: 1rem;
}
2023-04-27 19:17:26 +00:00
button {
background-color: transparent;
border: none;
color: inherit;
}
2023-04-27 12:07:35 +00:00
.browser {
flex: 1;
display: flex;
flex-flow: column;
height: 100%;
2023-04-27 19:17:26 +00:00
padding: 0;
2023-04-27 12:07:35 +00:00
}
a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
2023-04-27 17:36:21 +00:00
@media (prefers-contrast: more) {
a,
[role=button],
[role=link] {
color: #99f;
text-decoration: underline;
}
}
2023-04-27 12:07:35 +00:00
ul {
list-style: none;
padding: 0;
margin: 0;
}
2023-04-27 13:41:28 +00:00
.queue-header {
2023-04-27 12:07:35 +00:00
margin-top: 1.0rem;
2023-04-27 13:41:28 +00:00
display: flex;
align-items: center;
}
.queue-next {
font-weight: bold;
flex: 1;
}
.queue-clear {
font-weight: bold;
display: flex;
line-height: 24px;
}
.queue-clear .material-symbols-outlined {
margin-right: 0.25rem;
2023-04-27 12:07:35 +00:00
}
2023-04-27 13:41:28 +00:00
.queue {
margin-top: 0.5rem;
}
.queue li {
2023-04-27 12:07:35 +00:00
padding: 0 0.5rem;
border-radius: .25rem;
display: flex;
align-items: center;
}
2023-04-27 17:36:21 +00:00
2023-04-27 13:41:28 +00:00
.queue li.playing {
2023-04-27 12:07:35 +00:00
background-color: #334;
}
2023-04-27 17:36:21 +00:00
@media (prefers-contrast: more) {
.queue li.playing {
background-color: black;
border: 2px solid white;
}
}
2023-04-27 12:07:35 +00:00
2023-04-27 13:40:40 +00:00
.queue .metadata {
flex: 1;
}
.queue .song__name {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
2023-04-27 12:07:35 +00:00
ul.breadcrumb {
display: flex;
margin-bottom: 1rem;
flex-wrap: wrap;
list-style: none;
background-color: #334;
border-radius: .25rem;
padding: .75rem 1rem;
2023-04-27 19:17:26 +00:00
margin: 16px 16px 0;
2023-04-27 12:07:35 +00:00
}
2023-04-27 17:36:21 +00:00
@media (prefers-contrast: more) {
ul.breadcrumb {
background-color: black;
border: 2px solid white;
}
}
2023-04-27 12:07:35 +00:00
ul.breadcrumb li:not(:first-child)::before {
display: inline-block;
2023-04-27 19:17:26 +00:00
2023-04-27 12:07:35 +00:00
padding-left: .5rem;
padding-right: .1rem;
2023-04-27 19:17:26 +00:00
2023-04-27 12:07:35 +00:00
color: #6c757d;
content: "/";
}
ul.dir {
overflow: auto;
flex: 1;
2023-04-27 19:17:26 +00:00
padding: 16px;
2023-04-27 12:07:35 +00:00
}
ul.dir li {
cursor: pointer;
2023-04-27 19:17:26 +00:00
padding: 0.5rem 0.5rem;
border-radius: 0.25rem;
min-height: 4rem;
2023-04-27 12:07:35 +00:00
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;
2023-04-27 13:41:12 +00:00
background-color: #445;
width: 48px;
height: 48px;
2023-04-27 12:07:35 +00:00
}
2023-04-27 19:17:26 +00:00
.albumart a {
display: block;
}
2023-04-27 12:07:35 +00:00
.queue .albumart {
margin: 0.75rem;
margin-left: 0;
2023-04-27 13:41:12 +00:00
}
.browser .albumart {
margin-right: 0.75rem;
2023-04-27 12:07:35 +00:00
}
.albumart img {
border-radius: 0.25rem;
width: 100%;
height: 100%;
object-fit: cover;
}
.player {
width: 25rem;
}
.player .nowplaying {
display: flex;
flex-flow: column;
background-color: #334;
border-radius: 0.25rem;
height: 9.5rem;
}
2023-04-27 17:36:21 +00:00
@media (prefers-contrast: more) {
.player .nowplaying {
background-color: black;
border: 2px solid white;
}
}
2023-04-27 12:07:35 +00:00
.player .controls {
display: flex;
justify-content: space-around;
padding: 0.5rem;
}
.player .control {
font-size: 40px;
}
.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;
}
2023-04-27 12:21:43 +00:00
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
2023-04-27 12:22:56 +00:00
src: url(/static/vendor/material-symbols-outlined.woff2) format('woff2');
2023-04-27 12:21:43 +00:00
}
.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;
}