signal-desktop/stylesheets/components/GradientDial.scss

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

.GradientDial {
  &__container {
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  &__bar {
    &--container {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    &--node {
      background: $color-white;
      border: 1px solid $color-black-alpha-20;
      height: 100%;
      height: 1000px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform-origin: center;
      width: 4px;
      z-index: 1;
    }
  }

  &__knob {
    @include color-bubble(30px);
    box-shadow: 0 0 4px $color-black-alpha-20;
    cursor: move;
    margin-left: -20px;
    margin-top: -20px;
    padding: 2px;
    position: absolute;
    z-index: 10;

    &--selected {
      border-color: $color-gray-75;

      @include dark-theme {
        border-color: $color-white;
      }
    }

    &:focus {
      outline: none;
    }

    @include keyboard-mode {
      &:focus {
        border-color: $color-ultramarine;
        outline: none;
      }
    }
  }
}