vuetify/lib/components/VColorPicker/VColorPicker.css

Vue Material Component Framework

@layer vuetify-components {
  .v-color-picker {
    align-self: flex-start;
    contain: content;
    width: 300px;
  }
  .v-color-picker.v-sheet.v-picker {
    box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
    --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
  }
  .v-color-picker.v-sheet.v-picker {
    border-radius: 4px;
  }
  .v-color-picker__controls {
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 100%;
  }
  .v-color-picker--flat {
    box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
    --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
  }
  .v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb {
    box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
    --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
  }
}