@adobe/spectrum-css/dist/components/slider/multiStops/dark.css

The Spectrum CSS top-level backwards compatible package

.spectrum--dark .spectrum-Slider-track::before {
    background: rgb(74, 74, 74);
  }
.spectrum--dark .spectrum-Slider-labelContainer,
.spectrum--dark .spectrum-Dial-labelContainer {
  color: rgb(185, 185, 185);
}
.spectrum--dark .spectrum-Slider--filled .spectrum-Slider-track:first-child::before {
      background: rgb(185, 185, 185);
    }
.spectrum--dark .spectrum-Slider-fill::before {
    background: rgb(185, 185, 185);
  }
.spectrum--dark .spectrum-Slider-buffer::before,
.spectrum--dark .spectrum-Slider-buffer::after {
    background: rgb(110, 110, 110);
  }
.spectrum--dark .spectrum-Slider-ramp path {
    fill: rgb(74, 74, 74);
  }
.spectrum--dark .spectrum-Slider-handle {
  border-color: rgb(185, 185, 185);
  background: rgb(50, 50, 50);
}
.spectrum--dark .spectrum-Slider-handle:hover {
    border-color: rgb(227, 227, 227);
  }
.spectrum--dark .spectrum-Slider-handle.is-focused {
    border-color: rgb(38, 128, 235);
  }
.spectrum--dark .spectrum-Slider-handle:active,
.spectrum--dark .spectrum-Slider-handle.is-dragged {
    border-color: rgb(227, 227, 227);
  }
.spectrum--dark .spectrum-Slider--ramp .spectrum-Slider-handle {
    box-shadow: 0 0 0 4px rgb(50, 50, 50);
  }
.spectrum--dark .spectrum-Slider-input {
  background: transparent;
}
.spectrum--dark .spectrum-Slider-tick:after {
    background-color: rgb(74, 74, 74);
  }
.spectrum--dark .spectrum-Slider-handle.is-focused {
    border-color: rgb(38, 128, 235);
    background: rgb(38, 128, 235);
  }
.spectrum--dark .spectrum-Slider-handle.is-dragged {
    border-color: rgb(227, 227, 227);
    background: transparent;
  }
.spectrum--dark .spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
        background: rgb(185, 185, 185);
      }
.spectrum--dark .spectrum-Slider--color .spectrum-Slider-controls::before {
    background-color: rgb(255, 255, 255);
    background-image:
      linear-gradient(-45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
      linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
      linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%),
      linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%);
    background-size:
      16px
      16px;
    background-position:
      0 0,
      0 8px,
      8px -8px,
      -8px 0;
    z-index: 0;
  }
.spectrum--dark .spectrum-Slider--color .spectrum-Slider-track {
    background-color: transparent;
    background-image: linear-gradient(to right, rgb(38, 128, 235), rgb(90, 169, 250));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  }
.spectrum--dark .spectrum-Slider--color .spectrum-Slider-track::before {
      display: none;
    }
.spectrum--dark .spectrum-Slider--color .spectrum-Slider-handle {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.05);
    border-color: rgb(37, 37, 37);
    background: transparent;
  }
.spectrum--dark .spectrum-Slider--color .spectrum-Slider-handle.is-focused {
      box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    }
.spectrum--dark .spectrum-Dial-handle {
  box-shadow: none;
}
.spectrum--dark .spectrum-Dial-handle::after {
    background-color: rgb(185, 185, 185);
  }
.spectrum--dark .spectrum-Dial-handle:hover::after {
      background-color: rgb(227, 227, 227);
    }
.spectrum--dark .spectrum-Dial-handle.is-focused {
    background-color: rgb(38, 128, 235);

    border-color: rgb(38, 128, 235);
  }
.spectrum--dark .spectrum-Dial-handle.is-focused::after {
      background-color: rgb(37, 37, 37);
    }
.spectrum--dark .spectrum-Dial-handle:active,
.spectrum--dark .spectrum-Dial-handle.is-dragged {
    background-color: rgb(227, 227, 227);

    border-color: rgb(227, 227, 227);
  }
.spectrum--dark .spectrum-Dial-handle:active::after,
.spectrum--dark .spectrum-Dial-handle.is-dragged::after {
      background-color: rgb(37, 37, 37);
    }
.spectrum--dark .spectrum-Dial-controls::before,
.spectrum--dark .spectrum-Dial-controls::after {
    background-color: rgb(144, 144, 144);
  }
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-labelContainer {
      color: rgb(110, 110, 110);
    }
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-controls::after,
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-controls::before {
        background-color: rgb(90, 90, 90);
      }
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-handle {
      border-color: rgb(90, 90, 90);
      background: rgb(50, 50, 50);
    }
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-handle:hover,
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-handle:active {
        border-color: rgb(90, 90, 90);
        background: transparent;
      }
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-handle::after,
.spectrum--dark .spectrum-Dial.is-disabled .spectrum-Dial-handle::before {
        background-color: rgb(74, 74, 74);
      }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-labelContainer,
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Dial-labelContainer {
      color: rgb(110, 110, 110);
    }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-handle {
      border-color: rgb(90, 90, 90);
      background: rgb(50, 50, 50);
    }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-handle:hover,
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-handle:active {
        border-color: rgb(90, 90, 90);
        background: transparent;
      }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-track::before {
        background: rgb(74, 74, 74);
      }
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child::before {
          background: rgb(74, 74, 74);
        }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-fill::before {
        background: rgb(74, 74, 74);
      }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-buffer::before {
        background: rgb(74, 74, 74);
      }
.spectrum--dark .spectrum-Slider.is-disabled .spectrum-Slider-ramp path {
        fill: rgb(62, 62, 62);
      }
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-track {
        background: rgb(62, 62, 62) !important;
        box-shadow: none;
      }
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle {
        background: transparent;
        box-shadow: none;
        border-color: rgb(90, 90, 90);
      }
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle:hover,
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle:active {
          background: transparent;
          box-shadow: none;
          border-color: rgb(90, 90, 90);
        }
.spectrum--dark .spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
            background: rgb(74, 74, 74);
          }