style(next)/restyle CKEditor: overhaul the appearance

Author: adoriandoran

src/public/stylesheets/theme-next/notes/text.css

@@ -1,20 +1,49 @@
 /*
- * TEXT NOTES
+ * CKEDITOR
  */
 
+/*
+ * Toolbar
+ */
+
+.ck.ck-toolbar {
+    --ck-color-toolbar-background: transparent;
+
+    --ck-color-button-default-background: transparent;
+    --ck-color-button-default-hover-background: var(--hover-item-background-color);
+    --ck-color-button-default-disabled-background: transparent;
+
+    --ck-color-button-on-background: transparent;
+    --ck-color-button-on-hover-background: var(--hover-item-background-color);
+    
+    --ck-focus-ring: 1px solid var(--input-focus-outline-color);
+    --ck-color-focus-border: var(--input-focus-outline-color);
+    --ck-focus-outer-shadow: none;
+
+    --ck-border-radius: 6px;
+}
+
+/* Disabled button */
+:root .classic-toolbar-widget .ck.ck-button.ck-disabled {
+    opacity: .75;
+}
+
 /* 
- * CKEditor's Dropdowns
+ * Dropdowns
  */
 
 /* Dropdown body */
 :root .ck.ck-dropdown__panel,
-:root .ck.ck-balloon-rotator {
+:root .ck-balloon-panel {
+    --ck-color-panel-background: var(--menu-background-color);
+    --ck-color-panel-border: var(--modal-border-color);
+
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
-    border: 1px solid var(--dropdown-border-color);
-    border-radius: var(--dropdown-border-radius);
-    background: var(--menu-background-color);
+    border: 1px solid var(--modal-border-color) !important;
+    border-radius: var(--dropdown-border-radius) !important;
+    background: var(--menu-background-color) !important;
     backdrop-filter: var(--dropdown-backdrop-filter);
-    padding: var(--menu-padding-size);
+    padding: var(--menu-padding-size);    
 }
 
 :root ul.ck.ck-list,
@@ -27,7 +56,6 @@
 :root ul.ck.ck-list button.ck-button {
     padding: 2px 16px;
     background: transparent;
-    border: unset;
     border-radius: 6px !important;
     box-shadow: unset;
 }
@@ -43,6 +71,29 @@
     color: var(--hover-item-color);
 }
 
+/* Color picker dropdown */
+
+/* Color picker button */
+:root .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
+    --ck-color-base-border: transparent; /* Remove the top border */
+
+    border-bottom-left-radius: var(--ck-border-radius);
+    border-bottom-right-radius: var(--ck-border-radius);
+}
+
+/* Table dropdown */
+
+.ck-insert-table-dropdown__grid {
+    --ck-color-base-border: var(--ck-color-panel-border); /* Cell box color */
+    --ck-color-focus-border: var(--hover-item-text-color); /* Selected cell box border color */
+    --ck-color-focus-outer-shadow: var(--hover-item-background-color); /* Selected cell box background color */
+    --ck-border-radius: 0;
+}
+
+/*
+ * EDITOR'S CONTENT
+ */
+
 /*
  * Code Blocks 
  */