empede/static/style.css

333 lines
4.7 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
2023-04-27 19:17:26 +00:00
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;
2023-04-27 19:17:26 +00:00
}
2023-12-23 08:25:57 +00:00
.active {
color: #99f;
}
2023-04-27 19:17:26 +00:00
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-05-07 00:51:34 +00:00
.player > .queue {
flex: 1;
display: flex;
flex-flow: column;
}
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;
}
2023-05-07 00:51:34 +00:00
2023-12-23 08:58:41 +00:00
.queue-header button {
margin-left: 0.75rem;
}
2023-04-27 13:41:28 +00:00
.queue-next {
font-weight: bold;
flex: 1;
}
2023-04-27 12:07:35 +00:00
2023-04-27 13:41:28 +00:00
.queue {
margin-top: 0.5rem;
2023-05-07 00:51:34 +00:00
overflow: auto;
2023-04-27 13:41:28 +00:00
}
2023-05-07 00:51:34 +00:00
.queue ul 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-05-07 00:51:34 +00:00
.queue ul 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) {
2023-05-07 00:51:34 +00:00
.queue ul li.playing {
2023-04-27 17:36:21 +00:00
background-color: black;
border: 2px solid white;
}
}
2023-04-27 12:07:35 +00:00
2023-05-07 00:51:34 +00:00
.queue ul .metadata {
2023-04-27 13:40:40 +00:00
flex: 1;
}
2023-05-08 14:33:44 +00:00
.queue ul .metadata * {
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
2023-05-07 00:51:34 +00:00
.queue ul .song__name {
2023-04-27 13:40:40 +00:00
overflow: hidden;
display: -webkit-box;
2023-05-08 14:33:44 +00:00
}
.queue ul li:not(:hover) .remove {
display: none;
2023-04-27 13:40:40 +00:00
}
.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;
}
2023-05-08 15:01:22 +00:00
ul.breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
@media (prefers-contrast: more) {
2023-04-27 17:36:21 +00:00
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: 3rem;
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
width: 48px;
height: 48px;
2023-05-08 14:33:44 +00:00
background: #445 url(/static/placeholder.webp);
background-size: contain;
2023-04-27 12:07:35 +00:00
}
2023-05-08 14:33:44 +00:00
2023-04-27 19:17:26 +00:00
.albumart a {
display: block;
}
2023-04-27 12:07:35 +00:00
2023-05-08 14:33:44 +00:00
.albumart img {
visibility: hidden;
}
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;
}
2023-12-23 05:27:11 +00:00
.track {
margin-right: 0.75rem;
}
2023-04-27 12:07:35 +00:00
.player {
width: 25rem;
2023-05-07 00:51:34 +00:00
padding: 1rem 1rem 0;
display: flex;
flex-flow: column;
2023-04-27 12:07:35 +00:00
}
.player .nowplaying {
display: flex;
position: relative;
2023-04-27 12:07:35 +00:00
flex-flow: column;
background-color: #334;
border-radius: 0.25rem;
2023-12-23 08:25:57 +00:00
height: 13.0rem;
2023-04-27 12:07:35 +00:00
}
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 .progress {
background-color: #99f;
height: 0.5rem;
border-radius: 0.25rem;
position: absolute;
left: 0;
bottom: 0;
}
2023-12-23 08:58:28 +00:00
.player .controls,
.player .settings {
2023-04-27 12:07:35 +00:00
display: flex;
justify-content: space-around;
padding: 0 0.5rem 1.0rem;
2023-04-27 12:07:35 +00:00
}
2023-12-23 08:58:28 +00:00
.player .controls button {
2023-04-27 12:07:35 +00:00
font-size: 40px;
}
2023-12-23 08:58:28 +00:00
.player .settings button {
font-size: 25px;
}
2023-04-27 12:07:35 +00:00
.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;
}