Forgejo/web_src/css/features/colorpicker.css

/* This is a stripped-down version of coloris's CSS tailored to our needs. It does only include
   opaqua colors, and if more features like opacity are needed, the CSS needs to be extended
   based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */

.js-color-picker-input {
  display: flex;
  flex-wrap: wrap;
}

.js-color-picker-input input {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 32px !important;
}

.clr-picker {
  display: none;
  flex-wrap: wrap;
  position: absolute;
  width: 200px;
  z-index: 1002; /* above .ui.modal which has 1001 */
  border-radius: var(--border-radius);
  background-color: var(--color-menu);
  justify-content: flex-end;
  direction: ltr;
  box-shadow: 0 5px 20px var(--color-shadow);
  user-select: none;
}

.clr-picker.clr-open {
  display: flex;
}

.clr-gradient {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  cursor: pointer;
}

.clr-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background-color: currentcolor;
  cursor: pointer;
}

.clr-picker input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px;
}

.clr-picker input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
}

.clr-picker input[type="range"]::-moz-range-track {
  width: 100%;
  height: 16px;
  border: 0;
}

.clr-picker input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
}

.clr-hue {
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  position: relative;
  width: calc(100% - 40px);
  height: 10px;
  margin: 10px 20px;
  border-radius: 4px;
}

.clr-hue input[type="range"] {
  position: absolute;
  width: calc(100% + 32px);
  margin: 0;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.clr-hue div {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: currentcolor;
  box-shadow: 0 0 1px var(--color-shadow);
  pointer-events: none;
}

.clr-field {
  flex: 1;
  position: relative;
  color: transparent;
}

.clr-field button {
  position: absolute;
  aspect-ratio: 1;
  height: 16px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  pointer-events: none;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
}

.clr-field button::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background-color: currentcolor;
}

.clr-marker:focus {
  outline: none;
}

.clr-keyboard-nav .clr-marker:focus,
.clr-keyboard-nav .clr-hue input:focus + div,
.clr-keyboard-nav .clr-alpha input:focus + div {
  outline: none;
  box-shadow: 0 0 2px 2px var(--color-white);
}

.clr-picker .clr-preview,
.clr-picker .clr-clear,
.clr-picker .clr-swatches,
.clr-picker .clr-format,
.clr-picker .clr-alpha,
.clr-picker .clr-color {
  display: none;
}