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 !important;
  will-change: transform, opacity !important;
}

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

.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(calc(var(--fw-track-progress) - 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;
    }

    button {
      padding: 0;
      border: none;
      background-color: transparent;
      color: inherit;
    }
  }

  .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;
      }
    }
  }

  .radio-populating {
    margin-top: 1em;
    color: #333;
    text-align: center;
  }

  .radio-message {
    margin-top: 1em !important;
    margin-right: 1em;
  }
}


// Wvffle's styles
.theme-light .cover-container.fullscreen {
  background: #fff;
}

.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%;
        display: flex;

        &.idle {
          cursor: none;
        }

        &.fullscreen canvas {
          transform: translateY(calc(50vh - 50vw));
        }

        .cover {
          width: 100%;
          position: relative;

          canvas,
          img {
            width: 100%;
            height: 100%;
          }

          canvas {
            aspect-ratio: 1;
          }

          img {
            object-fit: contain;
            object-position: center;
          }

          &:hover .cover-buttons {
            opacity: 1;
            transform: translateY(0);
          }

          .cover-shadow {
            transform: scale(1.2);
            filter: blur(15vh);
            border-radius: 22vh;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
          }

          .cover-buttons {
            position: absolute;
            bottom: 1em;
            right: 1em;
            z-index: 3;
            display: flex;
            flex-direction: row-reverse;
            pointer-events: none;

            @include media(">tablet") {
              transition: all 0.2s ease-in-out;
              opacity: 0;
              transform: translateY(0.5em);
            }
            
            .tooltip {
              z-index: 2;
              pointer-events: all;
            }

            button {
              z-index: 2;
              padding: 0.78571429em;
              pointer-events: all;

              &:first-child {
                margin-right: 0 !important;
              }

              i.icon {
                display: inline-block;
                margin-right: 0 !important;
                display: contents;

                &::before {
                  display: flex;
                  justify-content: center;
                  width: 1em;
                  height: 1em;
                }
              }
            }
          }
        }

        .track-info {
          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 0;
          width: 100%;
          background: linear-gradient(to bottom, #0000, #000);
          color: #fff;
          text-align: left;
          padding: 3em 1em 1em;

          h1, h2 {
            margin: 0;
          }
        }

        &:not(.fullscreen) .track-info {
          transition: none !important;
        }
      }

      .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: var(--text-color);
}