@fileverse-dev/fortune-react 1.0.2-mod-51 → 1.0.2-mod-52

package/dist/index.umd.css

@@ -2346,8 +2346,7 @@ input[type="number"].condition-rules-project-input {
   display: none;
 }
 
-.fortune-toolbar-select,
-.fortune-toolbar-color-picker {
+.fortune-toolbar-select {
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   padding: 0.5rem;
   border: 1px solid hsl(var(--color-border-default));
@@ -2356,6 +2355,19 @@ input[type="number"].condition-rules-project-input {
   min-width: 240px;
 }
 
+.fortune-toolbar-color-picker {
+  z-index: 50;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  background: rgb(255, 255, 255);
+  transition: all 0.2s ease;
+  border-radius: 0px 0px 4px 4px;
+}
+
 .fortune-toolbar-select {
   overflow: auto;
   max-height: 75vh;
@@ -2398,9 +2410,19 @@ input[type="number"].condition-rules-project-input {
 }
 
 .fortune-toolbar-color-picker-item {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease-in;
   margin: 1px;
+}
+
+.fortune-toolbar-color-picker-item:hover {
+  transform: scale(1.05);
   cursor: pointer;
 }
 
@@ -2477,11 +2499,18 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: rgb(240, 240, 240);
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  background: #fff;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 12px;
+  padding: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  max-height: 400px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-custom-color .color-reset {
@@ -2489,16 +2518,21 @@ input[type="number"].condition-rules-project-input {
   color: #333;
   cursor: pointer;
   list-style: none;
-  padding: 10px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
-  padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
   background: white;
+  padding: 4px 8px;
+  height: 30px;
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-custom-color .color-reset:hover {
@@ -2622,6 +2656,37 @@ input[type="number"].condition-rules-project-input {
     z-index: 1002; */
   /* min-width: 500px; */
   width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
 }
 #fortune-split-column label {
   -webkit-user-select: none;
@@ -2634,39 +2699,6 @@ input[type="number"].condition-rules-project-input {
 #fortune-split-column .splitDelimiters {
   margin-top: 20px;
 }
-
-
-
-input[type="checkbox"] {
-  accent-color: black;
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 1.5px solid black;
-  border-radius: 3px;
-  position: relative;
-  cursor: pointer;
-}
-
-input[type="checkbox"]:checked {
-  background-color: black;
-  border-color: black;
-}
-
-/* Smaller tick mark */
-input[type="checkbox"]:checked::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 4px;
-  width: 4px;      /* Reduced from default */
-  height: 7px;     /* Reduced from default */
-  border: solid white;
-  border-width: 0 1px 1px 0;
-  transform: rotate(45deg);
-}
 .splitSymbols {
   width: 464px
 }