fix: toolbar wrap and border colors

zesty-io · Jan 4, 2024 · 3d3b09d · 3d3b09d
1 parent 9f207b4
commit 3d3b09d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/public/vendors/tinymce/skins/ui/Zesty/skin.css b/public/vendors/tinymce/skins/ui/Zesty/skin.css
@@ -62,7 +62,7 @@
   text-align: right;
 }
 .tox-tinymce {
-  border: 1px solid #ccc;
+  border: 1px solid #f2f4f7;
   border-radius: 8px;
   box-shadow: none;
   box-sizing: border-box;
@@ -682,7 +682,7 @@ button::-moz-focus-inner {
 }
 .tox .tox-collection__item-checkmark svg,
 .tox .tox-collection__item-icon svg {
-  fill: currentColor;
+  fill: rgba(16, 24, 40, 0.56);
 }
 .tox .tox-collection--toolbar-lg .tox-collection__item-icon {
   height: 48px;
@@ -1671,6 +1671,7 @@ body.tox-dialog__disable-scroll {
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;
+  border-bottom: 1px solid #f2f4f7;
 }
 .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
 .tox.tox-tinymce-inline .tox-editor-header {
@@ -3027,15 +3028,15 @@ body.tox-dialog__disable-scroll {
 .tox .tox-toolbar,
 .tox .tox-toolbar__overflow,
 .tox .tox-toolbar__primary {
-  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23ccc'/%3E%3C/svg%3E")
-    left 0 top 0 #fff;
+  /* background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23ccc'/%3E%3C/svg%3E")
+    left 0 top 0 #fff; */
+  background: linear-gradient(#f2f4f7, #f2f4f7) center/100% 1px no-repeat !important;
   background-color: #fff;
   display: flex;
   flex: 0 0 auto;
   flex-shrink: 0;
   flex-wrap: wrap;
   padding: 0 0;
-  border-bottom: 1px solid #ccc;
 }
 .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
   height: 0;
@@ -3096,7 +3097,7 @@ body.tox-dialog__disable-scroll {
   flex-wrap: nowrap;
 }
 .tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
-  border-right: 1px solid #ccc;
+  border-right: 1px solid #f2f4f7;
 }
 .tox[dir="rtl"] .tox-toolbar__group:not(:last-of-type) {
   border-left: 1px solid #ccc;

diff --git a/public/vendors/tinymce/skins/ui/Zesty/skin.min.css b/public/vendors/tinymce/skins/ui/Zesty/skin.min.css
@@ -1671,6 +1671,7 @@ body.tox-dialog__disable-scroll {
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;
+  border-bottom: 1px solid #f2f4f7;
 }
 .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
 .tox.tox-tinymce-inline .tox-editor-header {
@@ -3027,15 +3028,15 @@ body.tox-dialog__disable-scroll {
 .tox .tox-toolbar,
 .tox .tox-toolbar__overflow,
 .tox .tox-toolbar__primary {
-  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23ccc'/%3E%3C/svg%3E")
-    left 0 top 0 #fff;
+  /* background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23ccc'/%3E%3C/svg%3E")
+    left 0 top 0 #fff; */
+  background: linear-gradient(#f2f4f7, #f2f4f7) center/100% 1px no-repeat !important;
   background-color: #fff;
   display: flex;
   flex: 0 0 auto;
   flex-shrink: 0;
   flex-wrap: wrap;
   padding: 0 0;
-  border-bottom: 1px solid #ccc;
 }
 .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
   height: 0;
@@ -3096,7 +3097,7 @@ body.tox-dialog__disable-scroll {
   flex-wrap: nowrap;
 }
 .tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
-  border-right: 1px solid #ccc;
+  border-right: 1px solid #f2f4f7;
 }
 .tox[dir="rtl"] .tox-toolbar__group:not(:last-of-type) {
   border-left: 1px solid #ccc;

diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx
@@ -12,7 +12,6 @@ import "tinymce/themes/silver";
 // Toolbar icons
 import "tinymce/icons/default";
 // Editor styles
-// import "tinymce/skins/ui/oxide/skin.min.css";
 import "tinymce/skins/ui/tinymce-5/skin.min.css";
 
 // importing the plugin js.
@@ -195,7 +194,7 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({
               searchreplace code help | \
               fullscreen",
           contextmenu: "bold italic link | copy paste",
-          toolbar_mode: "sliding",
+          toolbar_mode: "wrap",
           relative_urls: false,
           branding: false,
           menubar: false,