Started work on playlist management UI

This commit is contained in:
rainbow napkin 2025-03-30 14:11:49 -04:00
parent 65b5ae9371
commit 1723e8ebd0
9 changed files with 586 additions and 104 deletions

View file

@ -25,7 +25,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
left: 0;
right: 0;
z-index: 4;
padding: 0.15em 0.3em;
}
#queue-control-offset{
@ -38,6 +37,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0.15em 0.3em;
}
@ -133,6 +133,82 @@ div.dragging-queue-entry{
}
/* queue controls */
/* media prompts */
#queue-media-prompts{
margin: 0.15em 0.3em;
}
/* playlist manager */
.queue-playlist-label-span{
display: flex;
flex-direction: row;
width: fit-content;
margin-left: 0.15em;
}
.queue-playlist-label-span p{
margin: 0;
}
.queue-playlists-div{
margin: 0;
}
.queue-playlist-span, .queue-playlist-labels-span{
display: flex;
flex-direction: row;
align-items: baseline;
text-wrap: nowrap;
}
.queue-playlist-span{
justify-content: space-between;
}
.queue-playlist-div{
padding: 0 0.15em;
margin: 0 0.15em;
}
.queue-playlist-control{
border-radius: 0;
padding: 0.2em 0.1em;
font-size: 0.8em;
}
.queue-playlist-span p{
margin: 0 0.15em;
user-select: none;
}
.queue-playlist-count{
font-size: 0.8em;
}
#queue-create-playlist-popup-div{
display: flex;
flex-direction: column;
}
#queue-create-playlist-popup-div span{
display: flex;
justify-content: space-around;
text-wrap: nowrap;
}
#queue-create-playlist-popup-div span select{
width: 100%;
}
#queue-create-playlist-popup-div *{
margin: 0.1em;
}
#queue-create-playlist-popup-default-titles{
resize: vertical;
}
/* date */
#queue-control-date{
display: flex;

View file

@ -539,6 +539,25 @@ div.archived p{
color: var(--bg2-alt1);
}
.queue-playlists-div{
background-color: var(--bg1);
color: var(--accent1);
border-block: var(--accent1) solid 1px;
}
.not-first-queue-playlist-div{
border-top: var(--bg1-alt0) solid 1px;
}
.queue-playlist-count{
color: var(--accent1-alt0);
}
.queue-playlist-control:not(.danger-button):not(:hover){
background-color: var(--bg1-alt0);
color: var(--accent1);
}
/* altcha theming*/
div.altcha{
box-shadow: 4px 4px 1px var(--bg1-alt0) inset;