Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mini-player: finished implementation, now need to keep trakc of state

Browse source
This commit is contained in:
Agahnim 2026-03-20 14:18:12 +01:00
parent b4f861e79b
commit 823308d6eb
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
9 changed files with 320 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

175
static/style.css
View file

@ -84,8 +84,7 @@ navbar {
label {
cursor: pointer;
padding: 4px 8px;
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
border: 2px solid black;
background: var(--win-bg-grey);
&:has(input:checked) {
@ -150,44 +149,180 @@ katcenkat {
/* Mini player */
miniplayer {
mini-player {
position: fixed;
top: 3.5rem;
left: 0;
z-index: 100;
width: min(240px, 100svw);
background-color: var(--win-bg-grey);
border: 2px solid var(--grey-500);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
box-shadow: 2px 2px 0 #000;
transition: opacity 0.3s,
translate 0.3s;
ominous-message {
display: block;
padding: 0.5rem;
font-style: italic;
font-size: 0.75rem;
}
controls {
title-bar {
display: flex;
flex-direction: row;
gap: 5rem;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid;
border-color: #808080 #ffffff #ffffff #808080;
padding: 0.25rem 0.5rem;
state {
track-info {
display: flex;
align-items: center;
gap: 5px;
flex-direction: column;
gap: 0.125rem;
max-width: 60%;
overflow: hidden;
track-title {
font-weight: bold;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
track-artist {
font-size: 0.625rem;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
volume {
display: flex;
align-items: center;
gap: 5px;
time-display {
font-size: 0.625rem;
color: #333;
}
}
progress-bar-container {
padding: 0.25rem 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
.progress-input {
display: block;
width: 90%;
height: 0.2rem;
appearance: none;
background: #fff;
border: 1px solid #808080;
outline: none;
cursor: pointer;
input {
height: 4px;
width: 5rem;
&::-webkit-slider-thumb {
appearance: none;
background-color: white;
border: 1px solid var(--grey-500);
width: 10px;
height: 10px;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
cursor: pointer;
}
&::-moz-range-thumb {
width: 10px;
height: 10px;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
cursor: pointer;
}
}
}
controls-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0.5rem;
transport-controls {
display: flex;
gap: 1px;
button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
cursor: pointer;
&:hover {
background: #0002;
}
&:active {
border-color: #808080 #ffffff #ffffff #808080;
}
&:focus-visible {
outline: 1px solid #000;
}
img {
pointer-events: none;
}
}
}
volume-controls {
display: flex;
align-items: center;
gap: 0.25rem;
.volume-input {
width: 4rem;
height: 4px;
appearance: none;
background: #fff;
border: 1px solid #808080;
outline: none;
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none;
width: 8px;
height: 8px;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
cursor: pointer;
}
&::-moz-range-thumb {
width: 8px;
height: 8px;
background: var(--win-bg-grey);
border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
cursor: pointer;
}
}
}
}
audio {
display: none;
}
}