Move CSS related to blocks from styles.css into theme(s)

src/editor/block/note-block.js

@@ -84,7 +84,7 @@ class NoteBlockStart extends WidgetType {
     }
     toDOM() {
         let wrap = document.createElement("div")
-        wrap.className = "block-start" + (this.isFirst ? " first" : "")
+        wrap.className = "heynote-block-start" + (this.isFirst ? " first" : "")
         //wrap.innerHTML = "<br>"
         return wrap
     }
@@ -215,7 +215,7 @@ const blockLayer = layer({
         return update.docChanged || update.viewportChanged
     },
 
-    class: "blocks-layer"
+    class: "heynote-blocks-layer"
 })
 
 

src/editor/styles.css

@@ -22,40 +22,7 @@ body {
     height: 100%;
 }
 
-
 #syntaxTree {
     height: 20%;
     overflow-y: auto;
 }
-
-.blocks-layer .block-even,
-.blocks-layer .block-odd {
-    width: 100%;
-    box-sizing: content-box;
-}
-.blocks-layer .block-even:first-child {
-    border-top: none;
-}
-.blocks-layer .block-even {
-    background: #252B37;
-    border-top: 1px solid #1e222a;
-}
-.blocks-layer .block-odd {
-    background: #222f38;
-    border-top: 1px solid #1e222a;
-}
-.light-theme .blocks-layer .block-even {
-    background: #ffffff;
-    border-top: 1px solid #dfdfdf;
-}
-.light-theme .blocks-layer .block-odd {
-    background: #f4f8f4;
-    border-top: 1px solid #dfdfdf;
-}
-
-.block-start {
-    height: 12px;
-}
-.block-start.first {
-    height: 0px;
-}

src/editor/theme/base.js

@@ -29,4 +29,17 @@ export const heynoteBase = EditorView.theme({
         height:'19px !important', 
         marginTop:'-2px !important'
     },
+    '.heynote-blocks-layer .block-even, .heynote-blocks-layer .block-odd': {
+        width: '100%',
+        boxSizing: 'content-box',
+    },
+    '.heynote-blocks-layer .block-even:first-child': {
+        borderTop: 'none',
+    },
+    '.heynote-block-start': {
+        height: '12px',
+    },
+    '.heynote-block-start.first': {
+        height: '0px',
+    },
 })

src/editor/theme/dark.js

@@ -100,7 +100,15 @@ const darkTheme = EditorView.theme({
             backgroundColor: highlightBackground,
             color: base03
         }
-    }
+    },
+    ".heynote-blocks-layer .block-even": {
+        background: "#252B37",
+        borderTop: "1px solid #1e222a",
+    },
+    ".heynote-blocks-layer .block-odd": {
+        background: "#222f38",
+        borderTop: "1px solid #1e222a",
+    },
 }, { dark: true });
 
 /**

src/editor/theme/light.js

@@ -26,6 +26,15 @@ export const heynoteLight = EditorView.theme({
     "&.cm-focused .cm-selectionBackground": {
         background: "#77baff8c",
     },
+
+    ".heynote-blocks-layer .block-even": {
+        background: "#ffffff",
+        borderTop: "1px solid #dfdfdf",
+    },
+    ".heynote-blocks-layer .block-odd": {
+        background: "#f4f8f4",
+        borderTop: "1px solid #dfdfdf",
+    },
 })