set styling for jodit editor and settings

scripts/user-notes-settings.js

@@ -121,6 +121,11 @@ export function userNotesApplySettingsToOpenWindow() {
 export function userNotesApplyWindowSettings(win) {
   const appearance = userNotesLoadValidatedAppearance();
 
+  win.style.setProperty(
+    "--user-notes-window-background-solid",
+    appearance.windowBackgroundColor
+  );
+
   win.style.setProperty(
     "--user-notes-window-background",
     userNotesHexToRgba(

scripts/user-notes-window.js

@@ -171,6 +171,12 @@ export function userNotesResetPositionAndSize() {
     );
 
     userNotesSavePosition(win);
+
+    const editor = win.__userNotesEditor;
+
+    if (editor?.events) {
+      editor.events.fire("resize");
+    }
   }
 }
 
@@ -234,6 +240,12 @@ export function userNotesMakeDraggable(win) {
 
     drag = null;
     userNotesSavePosition(win);
+
+    const editor = win.__userNotesEditor;
+
+    if (editor?.events) {
+      editor.events.fire("resize");
+    }
   });
 
   handle.addEventListener("pointercancel", event => {
@@ -243,6 +255,12 @@ export function userNotesMakeDraggable(win) {
 
     drag = null;
     userNotesSavePosition(win);
+
+    const editor = win.__userNotesEditor;
+
+    if (editor?.events) {
+      editor.events.fire("resize");
+    }
   });
 }
 
@@ -397,6 +415,10 @@ export function userNotesOpenNotes() {
 
     if (editor) {
       editor.focus();
+
+      if (editor.events) {
+        editor.events.fire("resize");
+      }
     } else {
       win.querySelector(".user-notes-editor")?.focus();
     }
@@ -451,6 +473,12 @@ export function userNotesOpenNotes() {
     userNotesSaveNotes(userNotesGetEditorValue(win));
     userNotesSetStatus("Gespeichert");
     userNotesSavePosition(win);
+
+    const editor = win.__userNotesEditor;
+
+    if (editor?.events) {
+      editor.events.fire("resize");
+    }
   });
 
   win.querySelector(".user-notes-close")?.addEventListener("click", () => {
@@ -475,6 +503,12 @@ export function userNotesOpenNotes() {
     }
 
     userNotesSavePosition(win);
+
+    const editor = win.__userNotesEditor;
+
+    if (editor?.events) {
+      editor.events.fire("resize");
+    }
   });
 
   resizeObserver.observe(win);
@@ -484,6 +518,10 @@ export function userNotesOpenNotes() {
 
   if (win.__userNotesEditor) {
     win.__userNotesEditor.focus();
+
+    if (win.__userNotesEditor.events) {
+      win.__userNotesEditor.events.fire("resize");
+    }
   } else {
     editorElement.focus();
   }

styles/user-notes-settings.css

@@ -1,12 +1,21 @@
-.user-notes-appearance-settings {
+.user-notes-appearance-settings,
+.user-notes-backup-settings {
   padding: 0.75rem;
 }
 
-.user-notes-appearance-settings .notes {
+.user-notes-appearance-settings .notes,
+.user-notes-backup-settings .notes {
   margin-top: 0;
   margin-bottom: 0.75rem;
 }
 
+.user-notes-backup-settings .warning {
+  padding: 0.5rem;
+  border: 1px solid var(--color-border-highlight, #ff6400);
+  border-radius: 4px;
+  background: rgba(255, 100, 0, 0.12);
+}
+
 .user-notes-appearance-settings fieldset {
   margin: 0 0 0.75rem 0;
   padding: 0.75rem;
@@ -20,11 +29,13 @@
   font-weight: bold;
 }
 
-.user-notes-appearance-settings .form-group {
+.user-notes-appearance-settings .form-group,
+.user-notes-backup-settings .form-group {
   align-items: center;
 }
 
-.user-notes-appearance-settings .form-fields {
+.user-notes-appearance-settings .form-fields,
+.user-notes-backup-settings .form-fields {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -64,21 +75,41 @@
   white-space: nowrap;
 }
 
+/*
+ * Dialog footer:
+ * Row 1: Apply + Save side-by-side.
+ * Row 2: Reset colors full width.
+ */
 .user-notes-appearance-settings .sheet-footer,
 .user-notes-appearance-footer {
   margin-top: 0.75rem;
 
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: stretch;
   gap: 0.5rem;
 }
 
 .user-notes-primary-actions {
-  flex: 1 1 auto;
-
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  align-items: stretch;
   gap: 0.5rem;
+
+  width: 100%;
+}
+
+.user-notes-primary-actions button,
+.user-notes-appearance-footer > .user-notes-reset-appearance {
+  height: 2rem;
+  min-height: 2rem;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+
+  box-sizing: border-box;
 }
 
 .user-notes-primary-actions button {
@@ -87,4 +118,17 @@
 
 .user-notes-appearance-footer > .user-notes-reset-appearance {
   flex: 0 0 auto;
+  width: 100%;
+}
+
+.user-notes-backup-settings .sheet-footer {
+  margin-top: 0.75rem;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.user-notes-backup-settings .sheet-footer button {
+  flex: 1 1 auto;
 }

styles/user-notes-window.css

@@ -92,44 +92,27 @@
   background: rgba(255, 255, 255, 0.16);
 }
 
+/*
+ * Fixed inner padding:
+ * The editor is pinned to the window content area and grows/shrinks with it.
+ */
 .user-notes-content {
   flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;
 
   display: flex;
+
   padding: 0.5rem;
-
   box-sizing: border-box;
+
+  overflow: hidden;
 }
 
-.user-notes-content .jodit-container {
+/*
-  flex: 1 1 auto;
+ * Original textarea fallback.
-  width: 100% !important;
+ * Jodit replaces/wraps this element when available.
-  height: 100% !important;
+ */
-  min-width: 0;
-  min-height: 0;
-
-  box-sizing: border-box;
-}
-
-.user-notes-content .jodit-workplace {
-  min-height: 0 !important;
-}
-
-.user-notes-content .jodit-wysiwyg {
-  min-height: 0 !important;
-  background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92));
-  color: var(--user-notes-textarea-color, #111111);
-}
-
-.user-notes-content .jodit-toolbar__box {
-  flex: 0 0 auto;
-}
-
-.user-notes-content .jodit-status-bar {
-  display: none;
-}
-
 .user-notes-editor {
   flex: 1 1 auto;
 
@@ -160,6 +143,153 @@
   outline-offset: 0;
 }
 
+/*
+ * Jodit layout.
+ * These rules force Jodit to fill the padded content area and inherit
+ * the configured User Notes colors.
+ */
+.user-notes-content .jodit-container,
+.user-notes-content .jodit {
+  flex: 1 1 auto;
+
+  width: 100% !important;
+  height: 100% !important;
+
+  min-width: 0 !important;
+  min-height: 0 !important;
+
+  display: flex !important;
+  flex-direction: column !important;
+
+  box-sizing: border-box;
+  overflow: hidden;
+
+  background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important;
+  color: var(--user-notes-textarea-color, #111111) !important;
+}
+
+/*
+ * Toolbar remains at the top and uses the window colors.
+ */
+.user-notes-content .jodit-toolbar__box,
+.user-notes-content .jodit-toolbar__box:not(:empty) {
+  flex: 0 0 auto;
+
+  opacity: 1 !important;
+
+  background: var(--user-notes-window-background-solid, #191813) !important;
+  color: var(--user-notes-window-text-color, #f0f0e0) !important;
+
+  border-color: var(--color-border-light-primary, #7a695a) !important;
+}
+
+.user-notes-content .jodit-toolbar-button,
+.user-notes-content .jodit-toolbar-button__button,
+.user-notes-content .jodit-toolbar-button__trigger,
+.user-notes-content .jodit-toolbar-button__text,
+.user-notes-content .jodit-icon {
+  opacity: 1 !important;
+  color: var(--user-notes-window-text-color, #f0f0e0) !important;
+  fill: var(--user-notes-window-text-color, #f0f0e0) !important;
+}
+
+.user-notes-content .jodit-toolbar-button__button,
+.user-notes-content .jodit-toolbar-button__trigger {
+  background: transparent !important;
+}
+
+.user-notes-content .jodit-toolbar-button__button:hover,
+.user-notes-content .jodit-toolbar-button__trigger:hover {
+  background: rgba(255, 255, 255, 0.16) !important;
+}
+/*
+ * Toolbar buttons.
+ */
+.user-notes-content .jodit-toolbar-button,
+.user-notes-content .jodit-toolbar-button__button,
+.user-notes-content .jodit-toolbar-button__trigger {
+  color: var(--user-notes-window-text-color, #f0f0e0) !important;
+}
+
+.user-notes-content .jodit-toolbar-button__button:hover,
+.user-notes-content .jodit-toolbar-button__trigger:hover {
+  background: rgba(255, 255, 255, 0.16) !important;
+}
+
+/*
+ * Dropdown / popup content should remain readable.
+ */
+.user-notes-content .jodit-popup,
+.user-notes-content .jodit-dialog,
+.user-notes-content .jodit-ui-group,
+.user-notes-content .jodit-toolbar-editor-collection {
+  color: #111111;
+}
+
+/*
+ * Main editor workplace fills all remaining height below the toolbar.
+ */
+.user-notes-content .jodit-workplace {
+  flex: 1 1 auto !important;
+
+  width: 100% !important;
+  height: auto !important;
+
+  min-width: 0 !important;
+  min-height: 0 !important;
+
+  display: flex !important;
+  flex-direction: column !important;
+
+  overflow: hidden !important;
+
+  background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important;
+  color: var(--user-notes-textarea-color, #111111) !important;
+}
+
+/*
+ * Actual editable area.
+ */
+.user-notes-content .jodit-wysiwyg {
+  flex: 1 1 auto !important;
+
+  width: 100% !important;
+  height: 100% !important;
+
+  min-width: 0 !important;
+  min-height: 0 !important;
+
+  box-sizing: border-box;
+
+  overflow: auto !important;
+
+  background: var(--user-notes-textarea-background, rgba(255, 255, 255, 0.92)) !important;
+  color: var(--user-notes-textarea-color, #111111) !important;
+
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.35;
+}
+
+/*
+ * Do not let Jodit reset child text colors away from the configured editor color.
+ * Inline styles generated by the editor may still override this when users
+ * explicitly choose colors inside the editor.
+ */
+.user-notes-content .jodit-wysiwyg * {
+  color: inherit;
+}
+
+/*
+ * Hide Jodit's status bar to preserve vertical space.
+ */
+.user-notes-content .jodit-status-bar {
+  display: none !important;
+}
+
+/*
+ * Tables inside notes.
+ */
 .user-notes-window table {
   border-collapse: collapse;
   width: auto;