@ldrender/gradient-picker/dist/gradient-picker.css

A gradient picker component

@charset "UTF-8";
.gradient-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem; }
  .gradient-picker__preview {
    width: 100%;
    height: var(--gradient-picker-preview-height, 120px);
    border-radius: var(--gradient-picker-border-radius, 8px); }
  .gradient-picker__slider {
    height: var(--gradient-picker-input-height, 36px);
    border-radius: var(--gradient-picker-border-radius, 8px);
    box-shadow: var(--gradient-picker-box-shadow, inset 0 0 0.5px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 21, 26, 0.075), 0 0.3px 0.4px rgba(20, 21, 26, 0.02), 0 0.9px 1.5px rgba(20, 21, 26, 0.045), 0 3.5px 6px rgba(20, 21, 26, 0.09));
    cursor: crosshair;
    position: relative; }
    .gradient-picker__slider-handler {
      height: calc(100% + 8px);
      position: absolute;
      left: var(--handler-position);
      width: 16px;
      transform: translate(-50%, -4px);
      border: var(--gradient-picker-handler-border, solid 3px #3d3d3d);
      border-radius: var(--gradient-picker-border-radius, 8px);
      background: var(--handler-color);
      cursor: ew-resize; }
  .gradient-picker__colors {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    .gradient-picker__colors-variation {
      order: var(--color-order);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%; }
    .gradient-picker__colors-picker {
      display: flex;
      gap: 8px;
      align-items: center;
      width: 100%;
      width: -moz-available;
      width: -webkit-fill-available; }
      .gradient-picker__colors-picker input {
        width: 100%; }
    .gradient-picker__colors-remover {
      font-size: 24px;
      font-weight: bold;
      cursor: pointer; }
      .gradient-picker__colors-remover:after {
        content: '✕';
        color: var(--gradient-picker-remover-color, #555); }
      .gradient-picker__colors-remover:hover:after {
        color: var(--gradient-picker-remover-color-hover, #e54040); }
    @media screen and (max-width: 768px) {
      .gradient-picker__colors-position {
        width: 30%; } }
    .gradient-picker__colors-position input {
      margin: 0;
      border: var(--gradient-picker-input-border, unset);
      box-shadow: var(--gradient-picker-box-shadow, inset 0 0 0.5px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 21, 26, 0.075), 0 0.3px 0.4px rgba(20, 21, 26, 0.02), 0 0.9px 1.5px rgba(20, 21, 26, 0.045), 0 3.5px 6px rgba(20, 21, 26, 0.09));
      text-transform: capitalize;
      background-color: white;
      width: clamp(30%, 100%, 100%);
      min-width: 80px; }
  .gradient-picker__options {
    display: flex;
    gap: 1rem; }
  .gradient-picker input[type='color'] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0;
    width: var(--gradient-picker-input-height, 36px);
    min-width: var(--gradient-picker-input-height, 36px);
    height: var(--gradient-picker-input-height, 36px);
    border: var(--gradient-picker-input-border, unset);
    border-radius: var(--gradient-picker-border-radius, 8px);
    box-shadow: var(--gradient-picker-box-shadow, inset 0 0 0.5px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 21, 26, 0.075), 0 0.3px 0.4px rgba(20, 21, 26, 0.02), 0 0.9px 1.5px rgba(20, 21, 26, 0.045), 0 3.5px 6px rgba(20, 21, 26, 0.09));
    cursor: pointer; }
    .gradient-picker input[type='color']::-webkit-color-swatch-wrapper {
      padding: 0; }
    .gradient-picker input[type='color']::-webkit-color-swatch {
      border: 0;
      border-radius: var(--gradient-picker-border-radius, 8px); }
    .gradient-picker input[type='color']::-moz-color-swatch, .gradient-picker input[type='color']::-moz-focus-inner {
      border: 0; }
    .gradient-picker input[type='color']::-moz-focus-inner {
      padding: 0; }
  .gradient-picker input[type='text'], .gradient-picker input[type='number'] {
    height: var(--gradient-picker-input-height, 36px);
    padding: var(--gradient-picker-input-padding, 0.5rem);
    border-radius: var(--gradient-picker-border-radius, 8px);
    font-size: var(--gradient-picker-font-size, 14px);
    border: var(--gradient-picker-input-border, unset);
    box-shadow: var(--gradient-picker-box-shadow, inset 0 0 0.5px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 21, 26, 0.075), 0 0.3px 0.4px rgba(20, 21, 26, 0.02), 0 0.9px 1.5px rgba(20, 21, 26, 0.045), 0 3.5px 6px rgba(20, 21, 26, 0.09));
    line-height: var(--gradient-picker-line-height, 36px);
    background-color: var(--gradient-picker-background-color, white);
    color: var(--gradient-picker-color, black); }
  .gradient-picker__select {
    margin: 0;
    border: var(--gradient-picker-input-border, unset);
    box-shadow: var(--gradient-picker-box-shadow, inset 0 0 0.5px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 21, 26, 0.075), 0 0.3px 0.4px rgba(20, 21, 26, 0.02), 0 0.9px 1.5px rgba(20, 21, 26, 0.045), 0 3.5px 6px rgba(20, 21, 26, 0.09));
    text-transform: capitalize;
    background-color: white;
    border-radius: var(--gradient-picker-border-radius, 8px);
    padding: var(--gradient-picker-input-padding, 0.5rem);
    width: 100%;
    height: var(--gradient-picker-input-height, 36px);
    line-height: var(--gradient-picker-line-height, 36px);
    font-size: var(--gradient-picker-font-size, 14px);
    background-color: var(--gradient-picker-background-color, white);
    color: var(--gradient-picker-color, black); }
  .gradient-picker input:focus,
  .gradient-picker select:focus {
    outline: var(--gradient-picker-focus-outline, none);
    box-shadow: var(--gradient-picker-focus-box-shadow, 0 0 0 2px #005fcc);
    border-color: var(--gradient-picker-focus-border-color, #005fcc); }