gdp-color-picker 1.0.0 → 1.1.1

package/src/lib/index.css

@@ -1,14 +1,12 @@
-
 .color-picker-panel {
-  width: 200px;
-  padding: 8px;
+  width: 222px;
+  padding: 0 8px 8px 8px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   user-select: none;
 }
 
-/* ColorBoard */
 .color-board {
   position: relative;
   width: 100%;
@@ -47,7 +45,6 @@
   pointer-events: none;
 }
 
-/* Sliders */
 .color-slider {
   position: relative;
   width: 100%;
@@ -67,29 +64,32 @@
   transform: translate(-50%, -50%);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   pointer-events: none;
-  border: 1px solid rgba(0,0,0,0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .hue-slider {
-  background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, magenta 83%, red 100%);
+  background: linear-gradient(
+    to right,
+    red 0%,
+    #ff0 17%,
+    lime 33%,
+    cyan 50%,
+    blue 66%,
+    magenta 83%,
+    red 100%
+  );
 }
 
 .alpha-slider-bg {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCzekwMjDjZ1IxjJwApDkHN9Fi7xwAAAABJRU5ErkJggg==');
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCzekwMjDjZ1IxjJwApDkHN9Fi7xwAAAABJRU5ErkJggg==");
 }
 
-/* Inputs */
 .color-input-container {
-  margin-top: 8px;
+  margin-top: 12px;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.color-input-row {
-  display: flex;
-  justify-content: space-between;
+  flex-direction: row;
   align-items: center;
+  gap: 8px;
 }
 
 .mode-selector {
@@ -97,15 +97,22 @@
   cursor: pointer;
   font-size: 12px;
   color: #333;
-  padding: 2px 4px;
-  border-radius: 2px;
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
   user-select: none;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  min-width: 60px;
+  height: 24px;
+  box-sizing: border-box;
+  background-color: #fff;
+  transition: all 0.3s;
 }
 
 .mode-selector:hover {
-  background-color: #f5f5f5;
+  border-color: #4096ff;
 }
 
 .mode-dropdown {
@@ -114,58 +121,85 @@
   left: 0;
   background: #fff;
   border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 10;
-  min-width: 60px;
+  min-width: 100%;
+  margin-top: 4px;
 }
 
 .mode-option {
-  padding: 4px 8px;
+  padding: 5px 12px;
   cursor: pointer;
+  font-size: 12px;
+  color: #333;
 }
 
 .mode-option:hover {
-  background: #e6f7ff;
+  background: #f5f5f5;
 }
 
-.eyedropper-icon {
-  cursor: pointer;
-  padding: 2px;
-  border-radius: 2px;
-  color: #666;
+.color-input-fields {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+}
+
+.hex-input-wrapper {
   display: flex;
   align-items: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 0 8px;
+  flex: 1;
+  height: 24px;
+  box-sizing: border-box;
+  background: #fff;
+  transition: border-color 0.3s;
 }
 
-.eyedropper-icon:hover {
-  background-color: #f5f5f5;
-  color: #333;
+.hex-input-wrapper:hover,
+.hex-input-wrapper:focus-within {
+  border-color: #4096ff;
 }
 
-.color-input-fields {
-  display: flex;
-  gap: 4px;
+.hex-prefix {
+  color: #bfbfbf;
+  margin-right: 4px;
+  font-size: 12px;
 }
 
 .color-input {
   width: 100%;
-  padding: 4px;
+  padding: 2px 0;
   border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  border-radius: 4px;
   font-size: 12px;
   box-sizing: border-box;
+  text-align: center;
+  height: 24px;
+  color: #333;
+}
+
+.color-input.hex {
+  border: none;
+  text-align: left;
+  height: 20px;
+  outline: none;
+}
+
+.color-input:focus {
+  border-color: #4096ff;
+  outline: none;
 }
 
-/* Chrome, Safari, Edge, Opera - hide spin buttons */
 .color-input::-webkit-outer-spin-button,
 .color-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-/* Firefox */
-.color-input[type=number] {
+.color-input[type="number"] {
   -moz-appearance: textfield;
 }
 
@@ -180,19 +214,240 @@
   justify-content: center;
 }
 
-/* Trigger */
 .color-picker-trigger {
-  display: inline-block;
-  padding: 4px;
-  border: 1px solid #d9d9d9;
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
-  background: #fff;
+  transition: all 0.3s;
+  margin-left: 6px;
+}
+
+.color-picker-trigger:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 .color-block {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  box-shadow: 0 0 2px #c5c5c5;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.color-picker-container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 14px;
+  position: relative;
+}
+
+.color-picker-main-row {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.color-picker-inline-presets {
+  margin-top: 8px;
+  width: 100%;
+}
+
+.presets-grid.inline {
+  display: grid;
+  gap: 8px;
+  padding: 4px;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.color-picker-tooltip-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  background-color: #000;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px 8px;
+  position: absolute;
+  z-index: 1001;
+  bottom: 110%;
+  left: 77%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #000 transparent transparent transparent;
+}
+
+.color-picker-trigger:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+.color-picker-trigger.is-open .tooltip-text {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.color-picker-label {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.color-picker-arrow {
+  margin-left: 6px;
+  color: #8c8c8c;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s;
+}
+
+.color-picker-arrow img {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+.color-picker-arrow.open {
+  transform: rotate(180deg);
+}
+
+.color-picker-input-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.color-picker-input-wrapper input {
+  width: 140px;
+  padding: 4px 22px 4px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  outline: none;
+  font-size: 14px;
+  color: #fff;
+  background-color: transparent;
+  transition: border-color 0.3s;
+  font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
+  height: 24px;
+}
+
+.color-picker-input-wrapper input:focus {
+  border-color: #1677ff;
+}
+
+.input-clear-icon {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  filter: invert(1);
+}
+
+.input-clear-icon:hover {
+  opacity: 1;
+}
+
+.color-picker-presets {
+  padding-bottom: 4px;
+}
+.color-picker-icon-right {
+  float: right;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.color-picker-icon-right:hover {
+  transform: scale(1.1);
+}
+.palette-section-title {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.presets-grid {
+  display: grid;
+  gap: 8px;
+  padding: 4px;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.preset-item {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.preset-item-inner {
   width: 20px;
   height: 20px;
-  border-radius: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.preset-item:hover {
+  transform: scale(1.15);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+.presets-collapse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+  font-size: 12px;
+  gap: 4px;
+}
+
+.collapse-arrow {
+  display: inline-block;
+  font-size: 10px;
+  transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
+  opacity: 0.85;
+}
+
+.presets-collapse:hover .collapse-arrow {
+  color: #1677ff;
+  opacity: 1;
+  transform: translateY(1px);
+}
+
+.collapse-arrow.expanded {
+  transform: rotate(180deg);
 }