From db9ed4e1db3e63dc8723a2aa1646cfb6f85dd3a7 Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Sat, 14 Jan 2023 20:04:30 +0100
Subject: [PATCH] Move CSS related to blocks from styles.css into theme(s)

---
 src/editor/block/note-block.js |  4 ++--
 src/editor/styles.css          | 33 ---------------------------------
 src/editor/theme/base.js       | 13 +++++++++++++
 src/editor/theme/dark.js       | 10 +++++++++-
 src/editor/theme/light.js      |  9 +++++++++
 5 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/src/editor/block/note-block.js b/src/editor/block/note-block.js
index c7022af..be6f8e5 100644
--- a/src/editor/block/note-block.js
+++ b/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"
 })
 
 
diff --git a/src/editor/styles.css b/src/editor/styles.css
index 6a30297..2e1f9dd 100644
--- a/src/editor/styles.css
+++ b/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;
-}
diff --git a/src/editor/theme/base.js b/src/editor/theme/base.js
index d2b0664..07a6b06 100644
--- a/src/editor/theme/base.js
+++ b/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',
+    },
 })
diff --git a/src/editor/theme/dark.js b/src/editor/theme/dark.js
index 9f75f24..78384cf 100644
--- a/src/editor/theme/dark.js
+++ b/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 });
 
 /**
diff --git a/src/editor/theme/light.js b/src/editor/theme/light.js
index c22ded3..f620d67 100644
--- a/src/editor/theme/light.js
+++ b/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",
+    },
 })