@fileverse-dev/fortune-react 1.0.2-mod-48-patch-3 → 1.0.2-mod-52

package/dist/index.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 {
@@ -2620,7 +2654,39 @@ input[type="number"].condition-rules-project-input {
   /* position: absolute;
     padding: 30px 42px;
     z-index: 1002; */
-  min-width: 500px;
+  /* 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;
@@ -2631,12 +2697,15 @@ input[type="number"].condition-rules-project-input {
   font-size: 16px;
 }
 #fortune-split-column .splitDelimiters {
-  margin-top: 10px;
+  margin-top: 20px;
+}
+.splitSymbols {
+  width: 464px
 }
 #fortune-split-column .splitSymbols {
   position: relative;
-  border: 1px solid #dfdfdf;
-  padding: 5px;
+  /* border: 1px solid #dfdfdf; */
+  padding: 5px 5px 5px 0;
   margin: 5px 0px;
 }
 #fortune-split-column .splitSymbol {
@@ -2654,10 +2723,13 @@ input[type="number"].condition-rules-project-input {
 }
 #fortune-split-column .splitDataPreview {
   font-size: 14px;
-  margin-top: 26px;
+  /* margin-top: 26px; */
+  margin-bottom: 12px;
 }
 #fortune-split-column .splitColumnData {
   border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  background-color: #F8F9FA;
   padding: 5px;
   margin: 5px 0px;
   height: 100px;

package/dist/index.esm.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 {
@@ -2620,7 +2654,39 @@ input[type="number"].condition-rules-project-input {
   /* position: absolute;
     padding: 30px 42px;
     z-index: 1002; */
-  min-width: 500px;
+  /* 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;
@@ -2631,12 +2697,15 @@ input[type="number"].condition-rules-project-input {
   font-size: 16px;
 }
 #fortune-split-column .splitDelimiters {
-  margin-top: 10px;
+  margin-top: 20px;
+}
+.splitSymbols {
+  width: 464px
 }
 #fortune-split-column .splitSymbols {
   position: relative;
-  border: 1px solid #dfdfdf;
-  padding: 5px;
+  /* border: 1px solid #dfdfdf; */
+  padding: 5px 5px 5px 0;
   margin: 5px 0px;
 }
 #fortune-split-column .splitSymbol {
@@ -2654,10 +2723,13 @@ input[type="number"].condition-rules-project-input {
 }
 #fortune-split-column .splitDataPreview {
   font-size: 14px;
-  margin-top: 26px;
+  /* margin-top: 26px; */
+  margin-bottom: 12px;
 }
 #fortune-split-column .splitColumnData {
   border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  background-color: #F8F9FA;
   padding: 5px;
   margin: 5px 0px;
   height: 100px;