audrey/resources/style.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;
}