BookStack Code Mirror - bookstack/blob - resources/sass/_codemirror.scss

   1 /**
   2  * Custom CodeMirror BookStack overrides
   3  */
   4
   5 .cm-editor {
   6   font-size: 12px;
   7   border: 1px solid #ddd;
   8   line-height: 1.4;
   9   margin-bottom: $-l;
  10 }
  11
  12 .page-content .cm-editor,
  13 .CodeMirrorContainer .cm-editor {
  14   border-radius: 4px;
  15 }
  16
  17 .cm-editor .cm-line {
  18   line-height: 1.6;
  19 }
  20
  21 .cm-editor .cm-line, .cm-editor .cm-gutter {
  22   font-family: var(--font-code);
  23 }
  24
  25 // Manual dark-mode definition so that it applies to code blocks within the shadow
  26 // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
  27 // <html> node are not applies so instead we have the class on the parent element.
  28 .dark-mode .cm-editor {
  29   border-color: #444;
  30 }
  31
  32 /**
  33  * Custom Copy Button
  34  */
  35 .cm-copy-button {
  36   position: absolute;
  37   display: flex;
  38   align-items: center;
  39   justify-content: center;
  40   top: -1px;
  41   inset-inline-end: -1px;
  42   background-color: #EEE;
  43   border: 1px solid #DDD;
  44   border-start-end-radius: 4px;
  45   @include lightDark(background-color, #eee, #333);
  46   @include lightDark(border-color, #ddd, #444);
  47   @include lightDark(color, #444, #888);
  48   line-height: 0;
  49   cursor: pointer;
  50   z-index: 5;
  51   user-select: none;
  52   opacity: 0;
  53   pointer-events: none;
  54   width: 32px;
  55   height: 32px;
  56   transition: background-color linear 60ms, color linear 60ms;
  57   svg {
  58     fill: currentColor;
  59   }
  60   &.success {
  61     background: var(--color-positive);
  62     color: #FFF;
  63   }
  64   &:focus {
  65     outline: 0 !important;
  66   }
  67 }
  68 .cm-editor:hover .cm-copy-button  {
  69   user-select: all;
  70   opacity: .6;
  71   pointer-events: all;
  72 }