Reorganised toast ui css overrides

diff --git a/flatnotes/src/components/NoteViewerEditor.vue b/flatnotes/src/components/NoteViewerEditor.vue
index a840964bab799ad3b1d6f024abf924ea7913baaf..cc30b23e2548ec6f84ffd3ca99b71bf151fb1031 100644 (file)
--- a/flatnotes/src/components/NoteViewerEditor.vue
+++ b/flatnotes/src/components/NoteViewerEditor.vue
@@ -98,7 +98,12 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import "@toast-ui/editor/dist/toastui-editor.css";
+@import "prismjs/themes/prism.css";
+@import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
+
+@import "../toastui-editor-overrides.scss";
 @import "../colours";
 @import "../mixins";
 
@@ -124,53 +129,10 @@
     outline: none;
   }
 }
-</style>
-
-<style lang="scss">
-// Toast UI Markdown Editor
-@import "@toast-ui/editor/dist/toastui-editor.css";
-@import "prismjs/themes/prism.css";
-@import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
-
-@import "../colours";
-@import "../mixins";
-@import "../toastui-editor-theme.scss";
-
-.ProseMirror {
-  font-family: "Inter", sans-serif;
-}
-
-.toastui-editor-contents {
-  font-family: "Inter", sans-serif;
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    border-bottom: none;
-  }
-  @include note-padding;
-}
-
-.toastui-editor-defaultUI .ProseMirror {
-  @include note-padding;
-}
 
-// Override the default font-family for code blocks as some of the fallbacks are not monospace
-.toastui-editor-contents code,
-.toastui-editor-contents pre,
-.toastui-editor-md-code,
-.toastui-editor-md-code-block {
-  font-family: Consolas, "Lucida Console", Monaco, "Andale Mono", monospace;
-}
-
-// Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087.
-.note-viewer li.task-list-item {
-  pointer-events: none;
-  a {
-    pointer-events: auto;
-  }
+.note {
+  background-color: var(--colour-background-elevated);
+  box-shadow: 0 0 10px var(--colour-shadow);
 }
 </style>
 

diff --git a/flatnotes/src/toastui-editor-theme.scss b/flatnotes/src/toastui-editor-overrides.scss
similarity index 82%
rename from flatnotes/src/toastui-editor-theme.scss
rename to flatnotes/src/toastui-editor-overrides.scss
index 48abf134860c3a4f0d2fa47a32181b92c44ba51c..fc340129e7bd8c3396b461d34593a45543f0cb67 100644 (file)
--- a/flatnotes/src/toastui-editor-theme.scss
+++ b/flatnotes/src/toastui-editor-overrides.scss
@@ -1,10 +1,44 @@
 @import "../colours";
+@import "../mixins";
 
-.note {
-  background-color: var(--colour-background-elevated);
-  box-shadow: 0 0 10px var(--colour-shadow);
+.ProseMirror {
+  font-family: "Inter", sans-serif;
+}
+
+.toastui-editor-contents {
+  font-family: "Inter", sans-serif;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    border-bottom: none;
+  }
+  @include note-padding;
+}
+
+.toastui-editor-defaultUI .ProseMirror {
+  @include note-padding;
+}
+
+// Override the default font-family for code blocks as some of the fallbacks are not monospace
+.toastui-editor-contents code,
+.toastui-editor-contents pre,
+.toastui-editor-md-code,
+.toastui-editor-md-code-block {
+  font-family: Consolas, "Lucida Console", Monaco, "Andale Mono", monospace;
+}
+
+// Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087.
+.note-viewer li.task-list-item {
+  pointer-events: none;
+  a {
+    pointer-events: auto;
+  }
 }
 
+// Colours
 .toastui-editor-defaultUI {
   border: none;
 }
@@ -115,6 +149,7 @@
 }
 
 .dark-theme .toastui-editor-toolbar-icons {
+  // Standard dark theme buttons are dark grey, this position change makes them white
   background-position-y: -49px;
 }