signal-desktop/stylesheets/components/MiniPlayer.scss

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@mixin audio-icon($name, $icon, $color) {
  &--#{$name}::before {
    @include color-svg('../images/icons/v2/#{$icon}.svg', $color, false);
    -webkit-mask-size: 100%;
  }
}

@mixin all-audio-icons($color) {
  @include audio-icon(play, play-solid-20, $color);
  @include audio-icon(pause, pause-solid-20, $color);
  @include audio-icon(pending, audio-spinner-arc-22, $color);
}

.MiniPlayer {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: calc($z-index-above-above-base + 1);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 8px;
  padding-inline: 16px;
  margin-top: calc(52px + var(--title-bar-drag-area-height));
  text-align: start;

  @include light-theme {
    background-color: $color-gray-02;
  }
  @include dark-theme {
    background-color: $color-gray-75;
  }

  &--flow {
    margin-top: 0;
    position: relative;
  }

  &__playback-button {
    @include button-reset;

    &::before {
      display: block;
      width: 14px;
      height: 14px;
      content: '';
    }

    @include light-theme {
      @include all-audio-icons($color-gray-60);
    }

    @include dark-theme {
      @include all-audio-icons($color-gray-15);
    }

    &--pending::before {
      animation: rotate 1000ms linear infinite;
    }
  }

  &__state {
    flex: 1;
  }

  &__middot {
    padding-block: 0;
    padding-inline: 5px;
  }

  &__close-button {
    @include button-reset;

    border-radius: 4px;
    height: 10px;
    width: 10px;

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;

      @include light-theme {
        @include color-svg('../images/icons/v2/x-8.svg', $color-gray-75);
      }

      @include dark-theme {
        @include color-svg('../images/icons/v2/x-8.svg', $color-gray-15);
      }
    }

    @include light-theme {
      &:hover,
      &:focus {
        background: $color-gray-02;
      }
      &:active {
        background: $color-gray-05;
      }
    }
    @include dark-theme {
      &:hover,
      &:focus {
        background: $color-gray-80;
      }
      &:active {
        background: $color-gray-75;
      }
    }
  }
}