_/empede
1
0
Fork 0
Code Issues Releases 18 Activity

Make settings buttons slightly smaller

Browse source
This commit is contained in:
Sijmen 2023-12-23 09:58:28 +01:00
parent 9c7871ed87
commit 31549b5b49
Signed by: vijfhoek
GPG key ID: DAF7821E067D9C48
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
static/style.css
View file

@ -265,15 +265,19 @@ ul.dir li .material-symbols-outlined {
bottom: 0;
}
.player .controls {
.player .controls,
.player .settings {
display: flex;
justify-content: space-around;
padding: 0 0.5rem 1.0rem;
}
.player .control {
.player .controls button {
font-size: 40px;
}
.player .settings button {
font-size: 25px;
}
.player .current {
display: flex;

20
templates/player.html
View file

@ -52,21 +52,31 @@
>skip_next</button>
</div>
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<div class="settings" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/consume"
class="control material-symbols-outlined {% if consume %}active{% endif %}" role="button" title="Consume"
class="control material-symbols-outlined {% if consume %}active{% endif %}"
role="button" title="Consume"
style="font-size: 32px"
>delete_sweep</button>
<button
hx-post="/shuffle"
class="control material-symbols-outlined {% if shuffle %}active{% endif %}" role="button" title="Shuffle"
hx-post="/random"
class="control material-symbols-outlined {% if random %}active{% endif %}"
role="button" title="Shuffle"
>shuffle</button>
<button
hx-post="/repeat"
class="control material-symbols-outlined {% if repeat %}active{% endif %}" role="button" title="Repeat"
class="control material-symbols-outlined {% if repeat %}active{% endif %}"
role="button" title="Repeat"
>repeat</button>
<button
hx-post="/single"
class="control material-symbols-outlined {% if single %}active{% endif %}"
role="button" title="Single"
>filter_1</button>
</div>
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>