Style Next: Restyle CKEditor

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

@@ -1,5 +1,97 @@
 /*
- * 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;
+}
+
+/* 
+ * Dropdowns
+ */
+
+/* Dropdown body */
+:root .ck.ck-dropdown__panel,
+: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(--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);    
+}
+
+:root ul.ck.ck-list,
+:root div.ck.ck-balloon-panel:not(.ck-tooltip) {
+    border: none;
+    background: transparent;
+}
+
+/* Dropdown list item */
+:root ul.ck.ck-list button.ck-button {
+    padding: 2px 16px;
+    background: transparent;
+    border-radius: 6px !important;
+    box-shadow: unset;
+}
+
+/* Checked list item */
+:root ul.ck.ck-list button.ck-button.ck-on:not(:hover) {
+    background: transparent !important;
+}
+
+:root ul.ck.ck-list button.ck-button:hover,
+:root ul.ck.ck-list button.ck-button.ck-on:hover {
+    background: var(--hover-item-background-color);
+    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
  */
 
 /*