]> BookStack Code Mirror - bookstack/blobdiff - resources/sass/_codemirror.scss
Opensearch: Fixed XML declaration when php short tags enabled
[bookstack] / resources / sass / _codemirror.scss
index 0fd347cf893a3bc37f1f5379e849aa6140f552a9..a516b4426a33e782e0fae1b53bd6cc4fce3a310a 100644 (file)
@@ -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,
   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
 // <html> node are not applies so instead we have the class on the parent element.
   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 {