diff --git a/index.html b/index.html index ac1a051..62f48f3 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,15 @@ -
+ + + + + +
diff --git a/src/editor/block/note-block.js b/src/editor/block/note-block.js index 527aa82..a2d33b6 100644 --- a/src/editor/block/note-block.js +++ b/src/editor/block/note-block.js @@ -193,7 +193,7 @@ const blockLayer = layer({ let extraHeight = view.viewState.editorHeight - ( view.defaultLineHeight + // when scrolling furthest down, one line is still shown at the top view.documentPadding.top + - 7 + 8 ) toCoordsBottom += extraHeight } @@ -202,9 +202,9 @@ const blockLayer = layer({ 0, // Change "- 0 - 6" to "+ 1 - 6" on the following line, and "+ 1 + 13" to "+2 + 13" on the line below, // in order to make the block backgrounds to have no gap between them - fromCoordsTop - (view.documentTop - view.documentPadding.top) - 0 - 6, + fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1 - 6, null, // width is set to 100% in CSS - (toCoordsBottom - fromCoordsTop) + 1 + 13, + (toCoordsBottom - fromCoordsTop) + 15, )) }) return markers diff --git a/src/editor/styles.css b/src/editor/styles.css index 9f4e275..66a0878 100644 --- a/src/editor/styles.css +++ b/src/editor/styles.css @@ -22,27 +22,34 @@ body { overflow-y: auto; } -.blocks-layer .block-even { - width: 100%; - background: #252B37; -} +.blocks-layer .block-even, .blocks-layer .block-odd { width: 100%; - background: #222f38; + 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; - /*background: rgb(0, 0, 0); - height: 2px*/ } .block-start.first { - height: 4px; + height: 0px; } diff --git a/src/editor/theme/base.js b/src/editor/theme/base.js index fd5b144..1826387 100644 --- a/src/editor/theme/base.js +++ b/src/editor/theme/base.js @@ -2,6 +2,9 @@ import { EditorView } from '@codemirror/view'; export const heynoteBase = EditorView.theme({ + ".cm-content": { + paddingTop: 4, + }, '.cm-scroller': { fontFamily: "Menlo, Monaco, 'Courier New', monospace", }, diff --git a/src/editor/theme/dark.js b/src/editor/theme/dark.js index ffed896..9f75f24 100644 --- a/src/editor/theme/dark.js +++ b/src/editor/theme/dark.js @@ -38,7 +38,6 @@ const darkTheme = EditorView.theme({ }, '.cm-content': { caretColor: cursor, - paddingTop: 0, }, '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor }, '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection }, diff --git a/src/editor/theme/light.js b/src/editor/theme/light.js index 08c789e..83b6004 100644 --- a/src/editor/theme/light.js +++ b/src/editor/theme/light.js @@ -5,10 +5,6 @@ export const heynoteLight = EditorView.theme({ //color: base04, backgroundColor: "#dfdfdf", }, - ".cm-content": { - //caretColor: cursor, - paddingTop: 0, - }, ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000", },