funkwhale/front/src/style/components/_queue.scss

.queue-controls {

  @include media("<desktop") {
    height: $bottom-player-height;
  }
}
.ui.clearing.segment {
  background-color: var(--site-background);
  box-shadow: var(--secondary-menu-box-shadow);
  margin: 0 !important;
}

.queue-enter-active,
.queue-leave-active {
  transition: all 0.2s ease;
  will-change: transform, opacity;
}

.queue-enter-from,
.queue-leave-to {
  opacity: 0;
  transform: translateY(5vh);
}

.component-queue {

  .queue-controls {
    @include media("<desktop") {
      background: var(--site-background);
    }
  }
  &.main {
    position: fixed;
    min-height: 100vh;
    width: 100vw;
    z-index: 1000;
  }
  &.main > .button {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 9999999;
    @include media("<desktop") {
      display: none;
    }
  }

  .queue.segment #player {
    padding: 0em;
    > * {
      padding: 0.5em;
    }
  }
  .queue-column {
    overflow-y: auto;
  }
  .queue-column .table {
    margin-top: 4em !important;
    margin-bottom: 4rem;
  }
  .ui.table > tbody > tr > td.controls {
    text-align: right;
  }
  .ui.table > tbody > tr > td {
    border: none;
  }
  td:first-child {
    padding-left: 1em !important;
  }
  td:last-child {
    padding-right: 1em !important;
  }
  .image-cell {
    width: 4em;
  }
  .queue.segment {
    @include media("<desktop") {
      padding: 0;
    }
    > .container {
      margin: 0 !important;
    }
  }
  .handle {
    @include media("<desktop") {
      display: none;
    }
  }
  .duration-cell {
    @include media("<tablet") {
      display: none;
    }
  }
  .fixed-header {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 9;
    @include media("<desktop") {
      padding: 1em;
    }
    @include media(">=desktop") {
      right: 1em;
      left: 38%;
    }
    .header .content {
      display: block;
    }
  }
  .current-track #player {
    font-size: 1.8em;
    padding: 1em;
    text-align: center;
    display: flex;
    position: fixed;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    bottom: 0;
    top: 0;
    width: 32%;
    > img {
      width: 100%;
      height: auto;
      max-height: 50vh;
      max-width: 50vh;
    }
    @include media("<desktop") {
      padding: 0.5em;
      font-size: 1.5em;
      width: 100%;
      width: 100vw;
      left: 0;
      right: 0;
      > .image {
        max-height: 50vh;
      }
    }
    > *:not(.image):not(img) {
      width: 100%;
    }
    h1 {
      margin: 0;
      min-height: auto;
    }
  }
  .progress-area {
    overflow: hidden;
  }
  .progress-area .progress {
    border-radius: 0.28571429rem;
    overflow: hidden;
  }
  .progress-wrapper, .warning.message {
    width: 25em;
  }
  .ui.progress .bar {
    transition: none;
    width: 100%;
    transform: translateX(-100%);
    transform-origin: top left;
    will-change: transform;
  }
  .ui.progress .buffer.bar {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .ui.progress:not(.indeterminate)
    .bar.position:not(.buffer) {
    background: var(--vibrant-color);
  }

  .indicating.progress .bar {
    left: -46px;
    width: 200% !important;
    color: grey;
    background: repeating-linear-gradient(
      -55deg,
      grey 1px,
      grey 10px,
      transparent 10px,
      transparent 20px
    ) !important;

    animation-name: MOVE-BG;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .ui.progress {
    margin: 0.5rem 0;
  }
  .timer {
    font-size: 0.7em;
  }
  .progress {
    cursor: pointer;
  }

  .player-controls {
    .control:not(:first-child) {
      margin-left: 1em;
    }
    .icon {
      font-size: 1.1em;
    }
  }

  .handle {
    cursor: grab;
  }
  .sortable-chosen {
    cursor: grabbing;
  }
  .queue-item.sortable-ghost {
    td {
      border-top: 3px dashed rgba(0, 0, 0, 0.15) !important;
      border-bottom: 3px dashed rgba(0, 0, 0, 0.15) !important;
      &:first-child {
        border-left: 3px dashed rgba(0, 0, 0, 0.15) !important;
      }
      &:last-child {
        border-right: 3px dashed rgba(0, 0, 0, 0.15) !important;
      }
    }
  }

}


// Wvffle's styles
.component-queue {
  #queue-grid {
    display: grid;
    grid-template-columns: 37.5% 62.5%;

    #queue {
      position: relative;
    }

    @include media("<desktop") {
      grid-template-columns: 1fr 0;
      &.show-player {
        #queue {
          display: none;
        }
      }

      &.show-queue {
        #player {
          display: none;
        }
      }
    }

    #player {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      .ui.header {
        width: 100%;
        max-width: 90%;
      }

      .cover-container {
        width: 50vh;
        max-width: 90%;

        .cover {
          height: 0;
          width: 100%;
          padding-bottom: 100%;
          position: relative;

          img {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }

      .progress-wrapper {
        font-size: 1.5rem;
        width: 54vh;
        max-width: 90%;
      }
    }

    > div {
      height: calc(100vh - 4rem);
      margin: 0 !important;

      &:nth-child(2) {
        display: grid;
        grid-template-rows: auto 1fr;

        > :nth-child(2) {
          overflow-y: hidden;
        }

        .virtual-list {
          height: 100%;
          overflow-y: scroll;
          padding-bottom: 2rem;
        }
      }
    }
  }

  .queue-item {
    height: 50px;
    display: grid;
    grid-template-columns: 10% auto 1fr 10% auto;
    cursor: pointer;
    padding: 0 0.875rem;

    .heart {
      &:not(.pink) {
        color: rgba(0, 0, 0, 0.2)
      }
    }

    .handle > .grip {
      pointer-events: none;
    }

    > div {
      display: flex;
      align-items: center;
    }

    // NOTE: Taken from semantic ui
    &.active {
      background: #E0E0E0;
      color: #000000de;
    }
  }
}

.drag-container:not(.dragging) .hover .queue-item {
  background: rgba(0,0,0,.05);
  color: #000000f2;
}