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