X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/94f464cd14a8f2a54a8fada9cb777c0e6f28fa93..refs/pull/5685/head:/resources/sass/_codemirror.scss diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index de82d4989..a516b4426 100644 --- a/resources/sass/_codemirror.scss +++ b/resources/sass/_codemirror.scss @@ -1,3 +1,6 @@ +@use "mixins"; +@use "vars"; + /** * Custom CodeMirror BookStack overrides */ @@ -5,11 +8,23 @@ .cm-editor { font-size: 12px; border: 1px solid #ddd; - margin-bottom: $-l; line-height: 1.4; + margin-bottom: vars.$l; +} + +.page-content .cm-editor, +.CodeMirrorContainer .cm-editor { 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. @@ -26,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; @@ -46,7 +61,7 @@ fill: currentColor; } &.success { - background: $positive; + background: var(--color-positive); color: #FFF; } &:focus {