Add filtering
All checks were successful
Build / build (push) Successful in 5m32s

This commit is contained in:
2024-02-08 13:31:46 +01:00
parent 9da3c406dd
commit e35f3f5494
3 changed files with 60 additions and 7 deletions

View File

@ -22,13 +22,15 @@ main.songs {
}
.filters {
// `display: grid` is set via JS to prevent displaying the inputs
// on browsers wih JavaScript disabled.
display: none;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1em;
margin: 1em 0;
// This is removed via JS to prevent displaying the inputs
// on browsers wih JavaScript disabled.
&.hidden { display: none }
&>* {
border: 1px solid #aaa;
border-radius: .5em;
@ -38,6 +40,12 @@ main.songs {
&>.button {
text-align: center;
cursor: pointer;
&.selected {
border-color: #333;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
}
}
}
@ -55,6 +63,8 @@ main.songs {
box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
border-left: .7em solid #000;
&.hidden { display: none }
&.mixtape { border-color: #654575 }
&.classic { border-color: #a55d05 }