113 lines
2.5 KiB
CSS
113 lines
2.5 KiB
CSS
toolbarview#main {
|
|
/* from amberol */
|
|
background:
|
|
linear-gradient(
|
|
127deg,
|
|
color-mix(in srgb, var(--background-color-0) 55%, transparent),
|
|
color-mix(in srgb, var(--background-color-0) 0%, transparent) 70.71%),
|
|
linear-gradient(
|
|
217deg,
|
|
color-mix(in srgb, var(--background-color-1) 55%, transparent),
|
|
color-mix(in srgb, var(--background-color-1) 0%, transparent) 70.71%),
|
|
linear-gradient(
|
|
336deg,
|
|
color-mix(in srgb, var(--background-color-2) 55%, transparent),
|
|
color-mix(in srgb, var(--background-color-2) 0%, transparent) 70.71%);
|
|
transition-property: background;
|
|
transition-duration: 250ms;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
#seek-scale slider {
|
|
margin: 0px;
|
|
opacity: 0%;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
#seek-scale trough {
|
|
background:
|
|
linear-gradient(
|
|
150deg,
|
|
color-mix(in srgb, var(--background-color-1) 16%, transparent),
|
|
color-mix(in srgb, var(--background-color-2) 16%, transparent) 70%);
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
|
|
}
|
|
|
|
#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: rgba(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 srgb, var(--accent-bg-color) 40%, transparent);
|
|
}
|
|
|
|
#play-queue .playing label.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
gridview.albums {
|
|
background-color: rgba(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: rgba(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: rgba(0,0,0,0);
|
|
}
|
|
|
|
.album-carousel listview row {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.album-carousel listview row image {
|
|
border-radius: 3px;
|
|
background-color: #000;
|
|
}
|
|
|
|
.album-carousel .labels {
|
|
border-radius: 3px;
|
|
background:
|
|
linear-gradient(
|
|
150deg,
|
|
color-mix(in srgb, var(--background-color-1) 16%, transparent),
|
|
color-mix(in srgb, var(--background-color-2) 16%, transparent) 50%);
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
|
|
}
|