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

The Spectrum CSS top-level backwards compatible package

.spectrum--light .spectrum-Slider-track::before {
    background: rgb(225, 225, 225);
  }
.spectrum--light .spectrum-Slider-labelContainer,
.spectrum--light .spectrum-Dial-labelContainer {
  color: rgb(110, 110, 110);
}
.spectrum--light .spectrum-Slider--filled .spectrum-Slider-track:first-child::before {
      background: rgb(110, 110, 110);
    }
.spectrum--light .spectrum-Slider-fill::before {
    background: rgb(110, 110, 110);
  }
.spectrum--light .spectrum-Slider-buffer::before,
.spectrum--light .spectrum-Slider-buffer::after {
    background: rgb(179, 179, 179);
  }
.spectrum--light .spectrum-Slider-ramp path {
    fill: rgb(225, 225, 225);
  }
.spectrum--light .spectrum-Slider-handle {
  border-color: rgb(110, 110, 110);
  background: rgb(245, 245, 245);
}
.spectrum--light .spectrum-Slider-handle:hover {
    border-color: rgb(75, 75, 75);
  }
.spectrum--light .spectrum-Slider-handle.is-focused {
    border-color: rgb(38, 128, 235);
  }
.spectrum--light .spectrum-Slider-handle:active,
.spectrum--light .spectrum-Slider-handle.is-dragged {
    border-color: rgb(75, 75, 75);
  }
.spectrum--light .spectrum-Slider--ramp .spectrum-Slider-handle {
    box-shadow: 0 0 0 4px rgb(245, 245, 245);
  }
.spectrum--light .spectrum-Slider-input {
  background: transparent;
}
.spectrum--light .spectrum-Slider-tick:after {
    background-color: rgb(225, 225, 225);
  }
.spectrum--light .spectrum-Slider-handle.is-focused {
    border-color: rgb(38, 128, 235);
    background: rgb(38, 128, 235);
  }
.spectrum--light .spectrum-Slider-handle.is-dragged {
    border-color: rgb(75, 75, 75);
    background: transparent;
  }
.spectrum--light .spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
        background: rgb(110, 110, 110);
      }
.spectrum--light .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--light .spectrum-Slider--color .spectrum-Slider-track {
    background-color: transparent;
    background-image: linear-gradient(to right, rgb(38, 128, 235), rgb(9, 90, 186));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  }
.spectrum--light .spectrum-Slider--color .spectrum-Slider-track::before {
      display: none;
    }
.spectrum--light .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(255, 255, 255);
    background: transparent;
  }
.spectrum--light .spectrum-Slider--color .spectrum-Slider-handle.is-focused {
      box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    }
.spectrum--light .spectrum-Dial-handle {
  box-shadow: none;
}
.spectrum--light .spectrum-Dial-handle::after {
    background-color: rgb(110, 110, 110);
  }
.spectrum--light .spectrum-Dial-handle:hover::after {
      background-color: rgb(75, 75, 75);
    }
.spectrum--light .spectrum-Dial-handle.is-focused {
    background-color: rgb(38, 128, 235);

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

    border-color: rgb(75, 75, 75);
  }
.spectrum--light .spectrum-Dial-handle:active::after,
.spectrum--light .spectrum-Dial-handle.is-dragged::after {
      background-color: rgb(255, 255, 255);
    }
.spectrum--light .spectrum-Dial-controls::before,
.spectrum--light .spectrum-Dial-controls::after {
    background-color: rgb(142, 142, 142);
  }
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-labelContainer {
      color: rgb(179, 179, 179);
    }
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-controls::after,
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-controls::before {
        background-color: rgb(202, 202, 202);
      }
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-handle {
      border-color: rgb(202, 202, 202);
      background: rgb(245, 245, 245);
    }
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-handle:hover,
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-handle:active {
        border-color: rgb(202, 202, 202);
        background: transparent;
      }
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-handle::after,
.spectrum--light .spectrum-Dial.is-disabled .spectrum-Dial-handle::before {
        background-color: rgb(225, 225, 225);
      }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-labelContainer,
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Dial-labelContainer {
      color: rgb(179, 179, 179);
    }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-handle {
      border-color: rgb(202, 202, 202);
      background: rgb(245, 245, 245);
    }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-handle:hover,
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-handle:active {
        border-color: rgb(202, 202, 202);
        background: transparent;
      }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-track::before {
        background: rgb(225, 225, 225);
      }
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child::before {
          background: rgb(225, 225, 225);
        }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-fill::before {
        background: rgb(225, 225, 225);
      }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-buffer::before {
        background: rgb(225, 225, 225);
      }
.spectrum--light .spectrum-Slider.is-disabled .spectrum-Slider-ramp path {
        fill: rgb(234, 234, 234);
      }
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-track {
        background: rgb(234, 234, 234) !important;
        box-shadow: none;
      }
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle {
        background: transparent;
        box-shadow: none;
        border-color: rgb(202, 202, 202);
      }
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle:hover,
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Slider-handle:active {
          background: transparent;
          box-shadow: none;
          border-color: rgb(202, 202, 202);
        }
.spectrum--light .spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
            background: rgb(225, 225, 225);
          }