@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/dist/css/color-picker.min.css

@@ -0,0 +1,2 @@
+/* ColorPicker v0.0.1 | thednp © 2022 | MIT-License */
+color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}

package/dist/css/color-picker.rtl.css

@@ -0,0 +1,529 @@
+/*!
+* ColorPicker v0.0.1 (http://thednp.github.io/color-picker)
+* Copyright 2022 © thednp
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+*/
+/* :host */
+color-picker,
+.color-picker {
+  position: relative;
+  display: flex;
+}
+
+color-picker:focus,
+.color-picker:focus {
+  outline: none;
+}
+
+/* color-dropdown */
+.color-dropdown {
+  position: absolute;
+  z-index: 50;
+  display: none;
+  flex-direction: column;
+  width: min-content;
+  padding: 0.5rem;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 0.5rem;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: transform 0.33s ease, opacity 0.33s ease;
+}
+
+.color-dropdown.picker {
+  left: 0;
+}
+
+.color-dropdown.menu {
+  right: 0;
+}
+
+.open .color-dropdown.top {
+  top: auto;
+  bottom: 100%;
+}
+
+.color-dropdown.bottom {
+  top: 100%;
+}
+
+.open .color-dropdown.top,
+.open .color-dropdown.bottom {
+  display: flex;
+}
+
+.color-dropdown.show {
+  opacity: 1;
+}
+
+.color-dropdown.show.top {
+  transform: translate(0, -5px);
+}
+
+.color-dropdown.show.bottom {
+  transform: translate(0, 5px);
+}
+
+/* color-controls */
+.color-controls {
+  display: none;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: max-content;
+}
+
+/* btn-appearance */
+.btn-appearance {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 0;
+  border-radius: 0.25rem;
+  outline: none;
+  appearance: none;
+  transition-duration: 0.33s;
+  transition-property: box-shadow, border;
+}
+
+.btn-appearance:focus,
+.btn-appearance:hover {
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+/* color-preview */
+.color-preview {
+  box-shadow: 0 0 0 1px rgba(120, 120, 120, 0.33) inset;
+  direction: ltr;
+  /* color value can never be rtl */
+}
+
+.txt-dark .color-preview {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.txt-dark .color-preview:focus {
+  box-shadow: 0 0 0 1px white inset, 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.txt-dark .color-preview::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.txt-light .color-preview {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.txt-light .color-preview:focus {
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.txt-light .color-preview::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+/* picker-toggle */
+.picker-toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: 0;
+}
+
+.open .picker-toggle {
+  z-index: -1;
+}
+
+/* menu-toggle */
+.menu-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  width: 3rem;
+  height: 100%;
+  padding: 0 0.25rem;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.txt-light .menu-toggle {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.txt-light .menu-toggle:focus,
+.txt-light .menu-toggle:focus {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.txt-dark .menu-toggle {
+  background: rgba(255, 255, 255, 0.33);
+}
+
+.txt-dark .menu-toggle:focus,
+.txt-dark .menu-toggle:focus {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.menu-toggle svg {
+  width: auto;
+  height: 100%;
+}
+
+/* scrollable */
+.scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.scrollable::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.scrollable::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  width: 0.5rem;
+  background-color: transparent;
+  background-clip: content-box;
+  border: 0;
+}
+
+.scrollable:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.33);
+}
+
+.scrollable::-webkit-scrollbar-thumb:hover {
+  background-color: #fff;
+}
+
+/* color-defaults */
+.color-defaults {
+  display: none;
+  flex-wrap: wrap;
+  flex-flow: column;
+  margin: 0;
+  list-style: none;
+  padding-inline: 0;
+}
+
+.color-dropdown.menu .color-defaults,
+.color-dropdown.picker .color-controls {
+  display: flex;
+}
+
+.color-dropdown.menu {
+  max-height: 230px;
+}
+
+.color-defaults .color-option {
+  padding: 0.25rem 0.5rem;
+  color: inherit;
+}
+
+.color-option {
+  cursor: pointer;
+}
+
+.color-defaults .color-option:focus,
+.color-defaults .color-option:hover {
+  background: rgba(255, 255, 255, 0.3);
+  outline: none;
+}
+
+.color-defaults .color-option:active,
+.color-defaults .color-option.active {
+  color: #000;
+  background: #fff;
+}
+
+/* color-options grid */
+.color-options {
+  display: grid;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  --grid-item-size: 2rem;
+  --grid-fit: 5;
+  --grid-gap: .25rem;
+  --grid-height: auto;
+  --grid-hover-height: auto;
+  grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
+  grid-template-rows: repeat(auto-fill, var(--grid-item-size));
+  gap: var(--grid-gap);
+}
+
+.color-options.scrollable {
+  height: var(--grid-height);
+  margin: 0 -0.5rem 0 0;
+  overflow-y: scroll;
+  transition: height 0.33s ease;
+}
+
+.color-options.scrollable:hover {
+  height: var(--grid-hover-height);
+}
+
+.color-options + .color-defaults {
+  margin-top: 0.25rem;
+}
+
+.multiline + .color-defaults {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.multiline + .color-defaults .color-option {
+  padding: 0.25rem 0.33rem;
+  font-size: 12px;
+}
+
+.color-options .color-option {
+  position: relative;
+  width: var(--grid-item-size);
+  height: var(--grid-item-size);
+  overflow: hidden;
+  text-indent: 2.1rem;
+}
+
+.color-options .color-option:active,
+.color-options .color-option:focus {
+  outline: none;
+}
+
+.color-options .color-option::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.color-options .color-option:hover::before,
+.color-options .color-option:active::before,
+.color-options .color-option:focus::before {
+  content: "";
+  border: 3px solid rgba(255, 255, 255, 0.75);
+  mix-blend-mode: difference;
+}
+
+.color-options .color-option:active,
+.color-options .color-option:focus {
+  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
+}
+
+.color-options .color-option.active:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  margin: -2px 0 0 -2px;
+  content: "";
+  border-radius: 4px;
+}
+
+.txt-dark .color-options .color-option.active:after {
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
+}
+
+.txt-light .color-options .color-option.active:after {
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.9);
+}
+
+/* color-form */
+.color-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0.25rem 0 0;
+  font: 12px sans-serif;
+}
+
+.color-form.hex {
+  max-width: initial;
+}
+
+.color-form > * {
+  flex: 1 0 0%;
+  width: 17.5%;
+  max-width: 17.5%;
+}
+
+.color-form label {
+  width: 7.5%;
+  max-width: 7.5%;
+  text-align: center;
+}
+
+.color-input {
+  color: inherit;
+  text-align: right;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  outline: none;
+}
+
+.color-input.hex {
+  width: 92.5%;
+  max-width: 92.5%;
+  /* width: calc(100% - 4% - 1rem); */
+}
+
+.color-input:active,
+.color-input:focus {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.33);
+}
+
+/* visual control */
+.visual-control {
+  height: 150px;
+}
+
+.visual-control1 {
+  width: 150px;
+}
+
+.visual-control2,
+.visual-control3 {
+  width: 21px;
+  cursor: ns-resize;
+}
+
+@media (min-width: 578px) {
+  .visual-control {
+    height: 230px;
+  }
+
+  .visual-control1 {
+    width: 230px;
+  }
+}
+@media (min-width: 1200px) {
+  .visual-control {
+    height: 300px;
+  }
+
+  .visual-control1 {
+    width: 300px;
+  }
+}
+.color-control {
+  position: relative;
+  display: inline-block;
+}
+
+.color-slider {
+  left: 0;
+  width: calc(100% - 2px);
+  cursor: ns-resize;
+}
+
+.color-control + .color-control {
+  margin-left: 0.5rem;
+}
+
+/* knob */
+.knob {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 7px;
+  user-select: none;
+  background-color: #000;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  outline: none;
+  will-change: transform;
+}
+
+.knob:hover {
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
+}
+
+.knob:focus,
+.knob:active {
+  z-index: 1;
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
+}
+
+/* color-pointer */
+.color-pointer {
+  width: 7px;
+  background-color: transparent;
+  border: 0;
+}
+
+.txt-dark .color-pointer {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
+}
+
+.txt-light .color-pointer {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.txt-dark .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.75);
+}
+
+.txt-light .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.75);
+}
+
+.txt-dark .color-pointer:focus,
+.txt-dark .color-pointer:active {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
+}
+
+.txt-light .color-pointer:focus,
+.txt-light .color-pointer:active {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.9);
+}
+
+/* utility */
+.v-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+[dir=rtl] .color-preview {
+  text-align: right;
+}
+[dir=rtl] .menu-toggle {
+  right: auto;
+  left: 0;
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+[dir=rtl] .color-dropdown.picker {
+  right: 0;
+  left: auto;
+}
+[dir=rtl] .color-dropdown.menu {
+  right: auto;
+  left: 0;
+}
+[dir=rtl] .color-control + .color-control {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+[dir=rtl] .color-options.scrollable {
+  margin: 0 0 0 -0.5rem;
+}

package/dist/css/color-picker.rtl.min.css

@@ -0,0 +1,2 @@
+/* ColorPicker RTL v0.0.1 | thednp © 2022 | MIT-License */
+color-picker,.color-picker{position:relative;display:flex}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.75);border-radius:.5rem;box-shadow:0 6px 12px rgba(0,0,0,.4);opacity:0;transition:transform .33s ease,opacity .33s ease}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition-duration:.33s;transition-property:box-shadow,border}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px rgba(0,0,0,.15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:rgba(255,255,255,.8)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px rgba(0,0,0,.15)}.txt-dark .color-preview::placeholder{color:rgba(255,255,255,.6)}.txt-light .color-preview{color:rgba(0,0,0,.8)}.txt-light .color-preview:focus{color:rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 0 3px rgba(0,0,0,.15)}.txt-light .color-preview::placeholder{color:rgba(0,0,0,.6)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:rgba(0,0,0,.5)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:rgba(0,0,0,.7)}.txt-dark .menu-toggle{background:rgba(255,255,255,.33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:rgba(255,255,255,.5)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:transparent}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:transparent;background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.33)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:#fff}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{background:rgba(255,255,255,.3);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:#000;background:#fff}.color-options{display:grid;padding:0;margin:0;list-style:none;--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:height .33s ease}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid rgba(255,255,255,.75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(255,255,255,.9)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px rgba(0,0,0,.9)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.15);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.33)}.visual-control{height:150px}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;user-select:none;background-color:#000;border:1px solid #fff;border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:0 0 0 6px rgba(255,255,255,.5)}.knob:focus,.knob:active{z-index:1;box-shadow:0 0 0 6px rgba(255,255,255,.9)}.color-pointer{width:7px;background-color:transparent;border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px rgba(255,255,255,.5)}.txt-light .color-pointer{box-shadow:0 0 0 5px rgba(0,0,0,.5)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px rgba(255,255,255,.75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px rgba(0,0,0,.75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px rgba(255,255,255,.9)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px rgba(0,0,0,.9)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}[dir=rtl] .color-preview{text-align:right}[dir=rtl] .menu-toggle{right:auto;left:0;border-radius:.25rem 0 0 .25rem}[dir=rtl] .color-dropdown.picker{right:0;left:auto}[dir=rtl] .color-dropdown.menu{right:auto;left:0}[dir=rtl] .color-control+.color-control{margin-right:.5rem;margin-left:0}[dir=rtl] .color-options.scrollable{margin:0 0 0 -0.5rem}