X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/58cadce052f5cc3c9ce2bc12f88a93cac310699a..refs/pull/5689/head:/resources/sass/_codemirror.scss diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index 0fd347cf8..a516b4426 100644 --- a/resources/sass/_codemirror.scss +++ b/resources/sass/_codemirror.scss @@ -1,3 +1,6 @@ +@use "mixins"; +@use "vars"; + /** * Custom CodeMirror BookStack overrides */ @@ -6,7 +9,7 @@ font-size: 12px; border: 1px solid #ddd; line-height: 1.4; - margin-bottom: $-l; + margin-bottom: vars.$l; } .page-content .cm-editor, @@ -14,6 +17,14 @@ border-radius: 4px; } +.cm-editor .cm-line { + line-height: 1.6; +} + +.cm-editor .cm-line, .cm-editor .cm-gutter { + font-family: var(--font-code); +} + // Manual dark-mode definition so that it applies to code blocks within the shadow // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent // node are not applies so instead we have the class on the parent element. @@ -30,13 +41,13 @@ align-items: center; justify-content: center; top: -1px; - right: -1px; + inset-inline-end: -1px; background-color: #EEE; border: 1px solid #DDD; - border-radius: 0 4px 0 0; - @include lightDark(background-color, #eee, #333); - @include lightDark(border-color, #ddd, #444); - @include lightDark(color, #444, #888); + border-start-end-radius: 4px; + @include mixins.lightDark(background-color, #eee, #333); + @include mixins.lightDark(border-color, #ddd, #444); + @include mixins.lightDark(color, #444, #888); line-height: 0; cursor: pointer; z-index: 5; @@ -50,7 +61,7 @@ fill: currentColor; } &.success { - background: $positive; + background: var(--color-positive); color: #FFF; } &:focus {