signal-desktop/stylesheets/components/HueSlider.scss

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

.HueSlider {
  &.Slider {
    background-image: linear-gradient(
      90deg,
      hsl(0, 0%, 0%),
      hsl(0, 100%, 50%),
      hsl(45, 100%, 50%),
      hsl(90, 100%, 50%),
      hsl(135, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(225, 100%, 50%),
      hsl(270, 100%, 50%),
      hsl(315, 100%, 50%),
      hsl(0, 0%, 100%)
    );
    border-radius: 4px;
    height: 8px;
    margin-left: 7px;
    width: 280px;
  }

  &__handle {
    &.Slider__handle {
      border: 7px solid $color-white;
      margin-top: -7px;
      margin-left: -11px;
      height: 22px;
      width: 22px;
    }
  }
}