@innovastudio/contentbuilder 1.5.57 → 1.5.58

package/public/contentbuilder/contentbuilder.css

@@ -1160,6 +1160,8 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-color-picker,
 .is-ui .is-rte-pop.rte-color-picker {
+  width: 240px;
+  /* new colorpicker */
   flex-direction: column;
 }
 #_cbhtml .is-rte-pop.rte-color-picker > div,
@@ -1194,14 +1196,18 @@ button:focus-visible {
 #_cbhtml .is-rte-pop.rte-color-picker.active,
 .is-ui .is-rte-pop.rte-color-picker.active {
   animation-name: colorpicker-slide-out;
+  animation-duration: 200ms;
+  /* new colorpicker */
 }
 @keyframes colorpicker-slide-out {
   from {
     height: 0;
   }
   to {
-    height: 445px;
+    height: 390px;
   }
+  /* 445px */
+  /* new colorpicker */
 }
 #_cbhtml .is-rte-pop.rte-color-picker.deactive,
 .is-ui .is-rte-pop.rte-color-picker.deactive {
@@ -1209,8 +1215,9 @@ button:focus-visible {
 }
 @keyframes colorpicker-slide-in {
   from {
-    height: 445px;
+    height: 390px;
   }
+  /* new colorpicker */
   to {
     height: 0;
   }
@@ -2421,85 +2428,6 @@ button:focus-visible {
   display: flex;
   padding: 1px;
 }
-#_cbhtml .is-modal.pickgradientcolor div.is-modal-content,
-.is-ui .is-modal.pickgradientcolor div.is-modal-content {
-  max-width: 201px;
-  padding: 0;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-modal-bar,
-.is-ui .is-modal.pickgradientcolor .is-modal-bar {
-  height: 10px;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings,
-.is-ui .is-modal.pickgradientcolor .is-settings {
-  margin-bottom: 15px;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings > div,
-.is-ui .is-modal.pickgradientcolor .is-settings > div {
-  display: flex;
-  align-items: center;
-  height: 50px;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings > div.is-label,
-.is-ui .is-modal.pickgradientcolor .is-settings > div.is-label {
-  height: auto;
-  font-family: sans-serif;
-  font-size: 13px;
-  font-weight: 300;
-  letter-spacing: 1px;
-  margin: 10px 0 3px;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings button,
-.is-ui .is-modal.pickgradientcolor .is-settings button {
-  width: auto;
-  height: 37px;
-  font-size: 10px;
-  line-height: 1;
-  text-transform: uppercase;
-  padding: 1px 20px;
-  box-sizing: border-box;
-  border: none;
-  outline-offset: -2px;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings button.is-btn-color,
-.is-ui .is-modal.pickgradientcolor .is-settings button.is-btn-color {
-  width: 35px;
-  height: 35px;
-  padding: 0;
-  background: rgba(255, 255, 255, 0.2);
-  border: rgba(0, 0, 0, 0.09) 1px solid;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings button .is-elmgrad-remove,
-.is-ui .is-modal.pickgradientcolor .is-settings button .is-elmgrad-remove {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 20px;
-  height: 20px;
-  background: rgba(95, 94, 94, 0.26);
-  color: #fff;
-  line-height: 20px;
-  text-align: center;
-  font-size: 12px;
-  cursor: pointer;
-  display: none;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove,
-.is-ui .is-modal.pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove {
-  display: block;
-}
-#_cbhtml .is-modal.pickgradientcolor .is-settings label,
-.is-ui .is-modal.pickgradientcolor .is-settings label {
-  font-size: 13px;
-  color: inherit;
-}
-#_cbhtml .is-modal.pickgradientcolor button.input-gradient-clear,
-#_cbhtml .is-modal.pickgradientcolor button.input-gradient-clear:hover,
-.is-ui .is-modal.pickgradientcolor button.input-gradient-clear,
-.is-ui .is-modal.pickgradientcolor button.input-gradient-clear:hover {
-  border: transparent 1px solid;
-  background-color: transparent;
-}
 #_cbhtml .is-modal.pagesize .is-modal-content,
 .is-ui .is-modal.pagesize .is-modal-content {
   max-width: 980px;
@@ -4615,6 +4543,125 @@ button:focus-visible {
   width: 100%;
   z-index: 1;
 }
+#_cbhtml .is-pop-overlay,
+.is-ui .is-pop-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0);
+}
+#_cbhtml .is-pop-overlay.pop1,
+.is-ui .is-pop-overlay.pop1 {
+  z-index: 10005 !important;
+}
+#_cbhtml .is-pop-overlay.pop2,
+.is-ui .is-pop-overlay.pop2 {
+  z-index: 10006 !important;
+}
+#_cbhtml .is-pop-overlay.pop3,
+.is-ui .is-pop-overlay.pop3 {
+  z-index: 10007 !important;
+}
+#_cbhtml .is-pop-overlay.pop4,
+.is-ui .is-pop-overlay.pop4 {
+  z-index: 10008 !important;
+}
+#_cbhtml .is-pop.pop1,
+.is-ui .is-pop.pop1 {
+  z-index: 10006 !important;
+}
+#_cbhtml .is-pop.pop2,
+.is-ui .is-pop.pop2 {
+  z-index: 10007 !important;
+}
+#_cbhtml .is-pop.pop2,
+.is-ui .is-pop.pop2 {
+  z-index: 10008 !important;
+}
+#_cbhtml .is-pop.pop2,
+.is-ui .is-pop.pop2 {
+  z-index: 10009 !important;
+}
+#_cbhtml .pickgradientcolor,
+.is-ui .pickgradientcolor {
+  flex-direction: column;
+  width: 207px;
+  padding: 15px;
+  box-sizing: border-box;
+}
+#_cbhtml .pickgradientcolor .is-settings,
+.is-ui .pickgradientcolor .is-settings {
+  margin-bottom: 15px;
+}
+#_cbhtml .pickgradientcolor .is-settings > div,
+.is-ui .pickgradientcolor .is-settings > div {
+  display: flex;
+  align-items: center;
+  height: 50px;
+}
+#_cbhtml .pickgradientcolor .is-settings > div.is-label,
+.is-ui .pickgradientcolor .is-settings > div.is-label {
+  height: auto;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  letter-spacing: 1px;
+  margin: 10px 0 3px;
+}
+#_cbhtml .pickgradientcolor .is-settings button,
+.is-ui .pickgradientcolor .is-settings button {
+  width: auto;
+  height: 37px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  padding: 1px 20px;
+  box-sizing: border-box;
+  border: none;
+  outline-offset: -2px;
+}
+#_cbhtml .pickgradientcolor .is-settings button.is-btn-color,
+.is-ui .pickgradientcolor .is-settings button.is-btn-color {
+  width: 35px;
+  height: 35px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border: rgba(0, 0, 0, 0.09) 1px solid;
+}
+#_cbhtml .pickgradientcolor .is-settings button .is-elmgrad-remove,
+.is-ui .pickgradientcolor .is-settings button .is-elmgrad-remove {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 20px;
+  height: 20px;
+  background: rgba(95, 94, 94, 0.26);
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+  display: none;
+}
+#_cbhtml .pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove,
+.is-ui .pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove {
+  display: block;
+}
+#_cbhtml .pickgradientcolor .is-settings label,
+.is-ui .pickgradientcolor .is-settings label {
+  font-size: 13px;
+  color: inherit;
+}
+#_cbhtml .pickgradientcolor button.input-gradient-clear,
+#_cbhtml .pickgradientcolor button.input-gradient-clear:hover,
+.is-ui .pickgradientcolor button.input-gradient-clear,
+.is-ui .pickgradientcolor button.input-gradient-clear:hover {
+  border: transparent 1px solid;
+  background-color: transparent;
+}
 #_cbhtml .pickgradientcolor .div-gradients button,
 .is-ui .pickgradientcolor .div-gradients button {
   width: 35px;
@@ -7485,3 +7532,506 @@ iframe.wait-autoplay {
 .gclose.disabled, .gnext.disabled, .gprev.disabled {
   opacity: 0;
 }
+
+/* new colorpicker */
+.pickr {
+  position: relative;
+  overflow: visible;
+  transform: translateY(0);
+}
+.pickr * {
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  -webkit-appearance: none;
+}
+
+.pickr .pcr-button {
+  position: relative;
+  height: 2em;
+  width: 2em;
+  padding: 0.5em;
+  cursor: pointer;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  border-radius: 0.15em;
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;
+  background-size: 0;
+  transition: all 0.3s;
+}
+.pickr .pcr-button::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+  background-size: 0.5em;
+  border-radius: 0.15em;
+  z-index: -1;
+}
+.pickr .pcr-button::before {
+  z-index: initial;
+}
+.pickr .pcr-button::after {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  transition: background 0.3s;
+  background: var(--pcr-color);
+  border-radius: 0.15em;
+}
+.pickr .pcr-button.clear {
+  background-size: 70%;
+}
+.pickr .pcr-button.clear::before {
+  opacity: 0;
+}
+.pickr .pcr-button.clear:focus {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color);
+}
+.pickr .pcr-button.disabled {
+  cursor: not-allowed;
+}
+
+.pickr *,
+.pcr-app * {
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  -webkit-appearance: none;
+}
+.pickr input:focus, .pickr input.pcr-active,
+.pickr button:focus,
+.pickr button.pcr-active,
+.pcr-app input:focus,
+.pcr-app input.pcr-active,
+.pcr-app button:focus,
+.pcr-app button.pcr-active {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color);
+}
+.pickr .pcr-palette,
+.pickr .pcr-slider,
+.pcr-app .pcr-palette,
+.pcr-app .pcr-slider {
+  transition: box-shadow 0.3s;
+}
+.pickr .pcr-palette:focus,
+.pickr .pcr-slider:focus,
+.pcr-app .pcr-palette:focus,
+.pcr-app .pcr-slider:focus {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
+}
+
+.pcr-app {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 10000;
+  border-radius: 0.1em;
+  background: #fff;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0s 0.3s;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
+  left: 0;
+  top: 0;
+}
+.pcr-app.visible {
+  transition: opacity 0.3s;
+  visibility: visible;
+  opacity: 1;
+}
+.pcr-app .pcr-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0.75em;
+}
+.pcr-app .pcr-swatches.pcr-last {
+  margin: 0;
+}
+@supports (display: grid) {
+  .pcr-app .pcr-swatches {
+    display: grid;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, 1.75em);
+  }
+}
+.pcr-app .pcr-swatches > button {
+  font-size: 1em;
+  position: relative;
+  width: calc(1.75em - 5px);
+  height: calc(1.75em - 5px);
+  border-radius: 0.15em;
+  cursor: pointer;
+  margin: 2.5px;
+  flex-shrink: 0;
+  justify-self: center;
+  transition: all 0.15s;
+  overflow: hidden;
+  background: transparent;
+  z-index: 1;
+}
+.pcr-app .pcr-swatches > button::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+  background-size: 6px;
+  border-radius: 0.15em;
+  z-index: -1;
+}
+.pcr-app .pcr-swatches > button::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--pcr-color);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.15em;
+  box-sizing: border-box;
+}
+.pcr-app .pcr-swatches > button:hover {
+  filter: brightness(1.05);
+}
+.pcr-app .pcr-swatches > button:not(.pcr-active) {
+  box-shadow: none;
+}
+.pcr-app .pcr-interaction {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0 -0.2em 0 -0.2em;
+}
+.pcr-app .pcr-interaction > * {
+  margin: 0 0.2em;
+}
+.pcr-app .pcr-interaction input {
+  letter-spacing: 0.07em;
+  font-size: 0.75em;
+  text-align: center;
+  cursor: pointer;
+  color: #75797e;
+  background: #f1f3f4;
+  border-radius: 0.15em;
+  transition: all 0.15s;
+  padding: 0.45em 0.5em;
+  margin-top: 0.75em;
+}
+.pcr-app .pcr-interaction input:hover {
+  filter: brightness(0.975);
+}
+.pcr-app .pcr-interaction input:focus {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
+}
+.pcr-app .pcr-interaction .pcr-result {
+  color: #75797e;
+  text-align: left;
+  flex: 1 1 8em;
+  min-width: 8em;
+  transition: all 0.2s;
+  border-radius: 0.15em;
+  background: #f1f3f4;
+  cursor: text;
+}
+.pcr-app .pcr-interaction .pcr-result::selection {
+  background: #4285f4;
+  color: #fff;
+}
+.pcr-app .pcr-interaction .pcr-type.active {
+  color: #fff;
+  background: #4285f4;
+}
+.pcr-app .pcr-interaction .pcr-save,
+.pcr-app .pcr-interaction .pcr-cancel,
+.pcr-app .pcr-interaction .pcr-clear {
+  color: #fff;
+  width: auto;
+}
+.pcr-app .pcr-interaction .pcr-save,
+.pcr-app .pcr-interaction .pcr-cancel,
+.pcr-app .pcr-interaction .pcr-clear {
+  color: #fff;
+}
+.pcr-app .pcr-interaction .pcr-save:hover,
+.pcr-app .pcr-interaction .pcr-cancel:hover,
+.pcr-app .pcr-interaction .pcr-clear:hover {
+  filter: brightness(0.925);
+}
+.pcr-app .pcr-interaction .pcr-save {
+  background: #4285f4;
+}
+.pcr-app .pcr-interaction .pcr-clear,
+.pcr-app .pcr-interaction .pcr-cancel {
+  background: #f44250;
+}
+.pcr-app .pcr-interaction .pcr-clear:focus,
+.pcr-app .pcr-interaction .pcr-cancel:focus {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
+}
+.pcr-app .pcr-selection .pcr-picker {
+  position: absolute;
+  height: 18px;
+  width: 18px;
+  border: 2px solid #fff;
+  border-radius: 100%;
+  user-select: none;
+}
+.pcr-app .pcr-selection .pcr-color-palette,
+.pcr-app .pcr-selection .pcr-color-chooser,
+.pcr-app .pcr-selection .pcr-color-opacity {
+  position: relative;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+.pcr-app .pcr-selection .pcr-color-palette:active,
+.pcr-app .pcr-selection .pcr-color-chooser:active,
+.pcr-app .pcr-selection .pcr-color-opacity:active {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+
+.pcr-app[data-theme=nano] {
+  width: 14.25em;
+  max-width: 95vw;
+}
+.pcr-app[data-theme=nano] .pcr-swatches {
+  margin-top: 0.6em;
+  padding: 0 0.6em;
+}
+.pcr-app[data-theme=nano] .pcr-interaction {
+  padding: 0 0.6em 0.6em 0.6em;
+}
+.pcr-app[data-theme=nano] .pcr-selection {
+  display: grid;
+  grid-gap: 0.6em;
+  grid-template-columns: 1fr 4fr;
+  grid-template-rows: 5fr auto auto;
+  align-items: center;
+  height: 10.5em;
+  width: 100%;
+  align-self: flex-start;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview {
+  grid-area: 2/1/4/1;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-left: 0.6em;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color {
+  display: none;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color {
+  position: relative;
+  background: var(--pcr-color);
+  width: 2em;
+  height: 2em;
+  border-radius: 50em;
+  overflow: hidden;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+  background-size: 0.5em;
+  border-radius: 0.15em;
+  z-index: -1;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette {
+  grid-area: 1/1/2/3;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette {
+  border-radius: 0.15em;
+  width: 100%;
+  height: 100%;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+  background-size: 0.5em;
+  border-radius: 0.15em;
+  z-index: -1;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser {
+  grid-area: 2/2/2/2;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
+  grid-area: 3/2/3/2;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
+  height: 0.5em;
+  margin: 0 0.6em;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
+  flex-grow: 1;
+  border-radius: 50em;
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider {
+  background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red);
+}
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
+  background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
+  background-size: 100%, 0.25em;
+}
+
+._rte-colpick_container {
+  position: relative;
+}
+
+._rte-colpick {
+  display: none !important;
+}
+
+.pop-picker {
+  z-index: 10050 !important;
+  width: 240px;
+  height: 362px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+._pop-colpick_container {
+  position: relative;
+  width: 100%;
+}
+
+._pop-colpick {
+  display: none !important;
+}
+
+.pcr-app {
+  box-shadow: none;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  background: transparent !important;
+}
+
+.pcr-app[data-theme=nano] .pcr-interaction {
+  padding: 0;
+}
+
+.pcr-app[data-theme=nano] .pcr-swatches {
+  display: flex;
+  padding: 0;
+  margin-top: 12px !important;
+}
+
+.pcr-app .pcr-interaction .pcr-result {
+  width: 100%;
+  flex: none;
+  height: 36px !important;
+  margin-top: 8px !important;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+  font-weight: 300 !important;
+  transition: none !important;
+}
+
+.pcr-app .pcr-swatches > button {
+  font-size: 1em !important;
+  position: relative !important;
+  width: 30.7px !important;
+  height: 30px !important;
+  border-radius: 0px !important;
+  cursor: pointer;
+  margin: 0 !important;
+  flex-shrink: 0;
+  justify-self: center;
+  transition: all 0.15s;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0) !important;
+  z-index: 1;
+}
+
+.pcr-app .pcr-swatches > button::before,
+.pcr-app .pcr-swatches > button::after {
+  border-radius: 0px !important;
+}
+
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color {
+  display: none !important;
+}
+
+.pcr-app[data-theme=nano] .pcr-selection {
+  grid-gap: 1em !important;
+  height: 160px !important;
+}
+
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
+  height: 0.8em;
+  margin: 0 0.6em;
+}
+
+.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color {
+  width: 2.5em;
+  height: 2.5em;
+}
+
+.pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-cancel {
+  line-height: 1;
+  width: 74px;
+  height: 24px;
+  font-size: 0.9em;
+  background: #cfcfcf66;
+  color: #111;
+  outline: none;
+}
+
+.pcr-app .pcr-interaction input {
+  margin: 0.75em 0 0 0;
+}
+
+.pcr-app .pcr-interaction {
+  justify-content: flex-end;
+}
+
+.pcr-app .pcr-interaction .pcr-clear:focus,
+.pcr-app .pcr-interaction .pcr-cancel:focus {
+  box-shadow: none !important;
+}
+
+.dark .pcr-app .pcr-interaction .pcr-clear,
+.dark .pcr-app .pcr-interaction .pcr-cancel {
+  color: white !important;
+}
+
+.hide-drag-class {
+  opacity: 0;
+}