124 lines
2.9 KiB
CSS
124 lines
2.9 KiB
CSS
toolbarview#main {
|
|
/* from amberol */
|
|
background:
|
|
linear-gradient(
|
|
111deg,
|
|
oklch(from var(--background-color-0) l c h / 0.55),
|
|
oklch(from var(--background-color-0) l c h / 0) 65%
|
|
),
|
|
linear-gradient(
|
|
222deg,
|
|
oklch(from var(--background-color-1) l c h / 0.55),
|
|
oklch(from var(--background-color-1) l c h / 0) 65%
|
|
),
|
|
linear-gradient(
|
|
333deg,
|
|
oklch(from var(--background-color-2) l c h / 0.55),
|
|
oklch(from var(--background-color-2) l c h / 0) 65%
|
|
);
|
|
transition-property: background;
|
|
transition-duration: 450ms;
|
|
transition-timing-function: cubic-bezier(0.13, 0.6, 0.8, 0.5);
|
|
}
|
|
|
|
#seek-scale slider {
|
|
margin: 0px;
|
|
opacity: 0%;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
#seek-scale trough highlight {
|
|
background-color: var(--background-color-0);
|
|
}
|
|
|
|
#volume-scale slider {
|
|
margin: -5px;
|
|
min-width: 15px;
|
|
min-height: 15px;
|
|
}
|
|
|
|
.mute #volume-scale trough highlight {
|
|
background-color: oklch(from var(--accent-bg-color) l 0% h);
|
|
}
|
|
|
|
#play-queue listview {
|
|
background-color: oklch(0 0 0 / 0);
|
|
}
|
|
|
|
/* make drag and drop indicator take up entire perimeter */
|
|
#play-queue listview row {
|
|
padding: 0;
|
|
}
|
|
|
|
#play-queue .playing {
|
|
background-color: color-mix(in oklch, var(--accent-bg-color) 40%, transparent);
|
|
}
|
|
|
|
#play-queue .playing label.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
gridview.albums {
|
|
background-color: oklch(0 0 0 / 0);
|
|
}
|
|
|
|
gridview.albums child {
|
|
margin: 10px;
|
|
}
|
|
|
|
gridview.albums child image {
|
|
margin: 10px;
|
|
}
|
|
|
|
#play-queue-page picture.playing-cover-art {
|
|
border-radius: 10px;
|
|
box-shadow: oklch(0 0 0 / 0.6) 0px 0px 7px;
|
|
}
|
|
|
|
.loading-cover picture.playing-cover-art {
|
|
transition: 500ms;
|
|
filter: contrast(110%) grayscale(100%) sepia(50%);
|
|
}
|
|
|
|
/* album carousel */
|
|
.album-carousel listview {
|
|
background-color: oklch(0 0 0 / 0);
|
|
}
|
|
|
|
.album-carousel listview row {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.album-carousel listview row image {
|
|
border-radius: 3px;
|
|
background-color: oklch(0 0 0);
|
|
}
|
|
|
|
.album-carousel .labels {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#seek-scale trough, .album-carousel .labels {
|
|
/* sort of adjusted rotation of the toolbarview idk */
|
|
background:
|
|
linear-gradient(
|
|
220deg,
|
|
oklch(from var(--background-color-0) calc(l * 1.15) calc(c * 0.85) h / 0.15) 10%,
|
|
oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h + 30) / 0.06) 70%
|
|
),
|
|
linear-gradient(
|
|
40deg,
|
|
oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.15) 10%,
|
|
oklch(from var(--background-color-2) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.06) 70%
|
|
);
|
|
box-shadow: oklch(0 0 0 / 0.25) 0px 0px 3px;
|
|
}
|
|
|
|
.album-carousel .labels:hover {
|
|
/* fancy hover */
|
|
background-color: oklch(from var(--accent-bg-color) calc(l * 0.8) calc(c * 0.8) h / 0.3);
|
|
transition: 300ms;
|
|
}
|
|
/* TODO: hover effect for whole album, not just label */
|