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