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

   1 /* BASICS */
   2
   3 .CodeMirror {
   4   /* Set height, width, borders, and global font properties here */
   5   font-family: monospace;
   6   height: 300px;
   7   color: black;
   8   direction: ltr;
   9 }
  10
  11 /* PADDING */
  12
  13 .CodeMirror-lines {
  14   padding: 4px 0; /* Vertical padding around content */
  15 }
  16 .CodeMirror pre.CodeMirror-line,
  17 .CodeMirror pre.CodeMirror-line-like {
  18   padding: 0 4px; /* Horizontal padding of content */
  19 }
  20
  21 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  22   background-color: white; /* The little square between H and V scrollbars */
  23 }
  24
  25 /* GUTTER */
  26
  27 .CodeMirror-gutters {
  28   border-right: 1px solid #ddd;
  29   background-color: #f7f7f7;
  30   white-space: nowrap;
  31 }
  32 .CodeMirror-linenumbers {}
  33 .CodeMirror-linenumber {
  34   padding: 0 3px 0 5px;
  35   min-width: 20px;
  36   text-align: right;
  37   color: #999;
  38   white-space: nowrap;
  39 }
  40
  41 .CodeMirror-guttermarker { color: black; }
  42 .CodeMirror-guttermarker-subtle { color: #999; }
  43
  44 /* CURSOR */
  45
  46 .CodeMirror-cursor {
  47   border-left: 1px solid black;
  48   border-right: none;
  49   width: 0;
  50 }
  51 /* Shown when moving in bi-directional text */
  52 .CodeMirror div.CodeMirror-secondarycursor {
  53   border-left: 1px solid silver;
  54 }
  55 .cm-fat-cursor .CodeMirror-cursor {
  56   width: auto;
  57   border: 0 !important;
  58   background: #7e7;
  59 }
  60 .cm-fat-cursor div.CodeMirror-cursors {
  61   z-index: 1;
  62 }
  63 .cm-fat-cursor-mark {
  64   background-color: rgba(20, 255, 20, 0.5);
  65   -webkit-animation: blink 1.06s steps(1) infinite;
  66   -moz-animation: blink 1.06s steps(1) infinite;
  67   animation: blink 1.06s steps(1) infinite;
  68 }
  69 .cm-animate-fat-cursor {
  70   width: auto;
  71   border: 0;
  72   -webkit-animation: blink 1.06s steps(1) infinite;
  73   -moz-animation: blink 1.06s steps(1) infinite;
  74   animation: blink 1.06s steps(1) infinite;
  75   background-color: #7e7;
  76 }
  77 @-moz-keyframes blink {
  78   0% {}
  79   50% { background-color: transparent; }
  80   100% {}
  81 }
  82 @-webkit-keyframes blink {
  83   0% {}
  84   50% { background-color: transparent; }
  85   100% {}
  86 }
  87 @keyframes blink {
  88   0% {}
  89   50% { background-color: transparent; }
  90   100% {}
  91 }
  92
  93 /* Can style cursor different in overwrite (non-insert) mode */
  94 .CodeMirror-overwrite .CodeMirror-cursor {}
  95
  96 .cm-tab { display: inline-block; text-decoration: inherit; }
  97
  98 .CodeMirror-rulers {
  99   position: absolute;
 100   left: 0; right: 0; top: -50px; bottom: 0;
 101   overflow: hidden;
 102 }
 103 .CodeMirror-ruler {
 104   border-left: 1px solid #ccc;
 105   top: 0; bottom: 0;
 106   position: absolute;
 107 }
 108
 109 /* DEFAULT THEME */
 110
 111 .cm-s-default .cm-header {color: blue;}
 112 .cm-s-default .cm-quote {color: #090;}
 113 .cm-negative {color: #d44;}
 114 .cm-positive {color: #292;}
 115 .cm-header, .cm-strong {font-weight: bold;}
 116 .cm-em {font-style: italic;}
 117 .cm-link {text-decoration: underline;}
 118 .cm-strikethrough {text-decoration: line-through;}
 119
 120 .cm-s-default .cm-keyword {color: #708;}
 121 .cm-s-default .cm-atom {color: #219;}
 122 .cm-s-default .cm-number {color: #164;}
 123 .cm-s-default .cm-def {color: #00f;}
 124 .cm-s-default .cm-variable,
 125 .cm-s-default .cm-punctuation,
 126 .cm-s-default .cm-property,
 127 .cm-s-default .cm-operator {}
 128 .cm-s-default .cm-variable-2 {color: #05a;}
 129 .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
 130 .cm-s-default .cm-comment {color: #a50;}
 131 .cm-s-default .cm-string {color: #a11;}
 132 .cm-s-default .cm-string-2 {color: #f50;}
 133 .cm-s-default .cm-meta {color: #555;}
 134 .cm-s-default .cm-qualifier {color: #555;}
 135 .cm-s-default .cm-builtin {color: #30a;}
 136 .cm-s-default .cm-bracket {color: #997;}
 137 .cm-s-default .cm-tag {color: #170;}
 138 .cm-s-default .cm-attribute {color: #00c;}
 139 .cm-s-default .cm-hr {color: #999;}
 140 .cm-s-default .cm-link {color: #00c;}
 141
 142 .cm-s-default .cm-error {color: #f00;}
 143 .cm-invalidchar {color: #f00;}
 144
 145 .CodeMirror-composing { border-bottom: 2px solid; }
 146
 147 /* Default styles for common addons */
 148
 149 div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
 150 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 151 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
 152 .CodeMirror-activeline-background {background: #e8f2ff;}
 153
 154 /* STOP */
 155
 156 /* The rest of this file contains styles related to the mechanics of
 157    the editor. You probably shouldn't touch them. */
 158
 159 .CodeMirror {
 160   position: relative;
 161   overflow: hidden;
 162   background: white;
 163 }
 164
 165 .CodeMirror-scroll {
 166   overflow: scroll !important; /* Things will break if this is overridden */
 167   /* 50px is the magic margin used to hide the element's real scrollbars */
 168   /* See overflow: hidden in .CodeMirror */
 169   margin-bottom: -50px; margin-right: -50px;
 170   padding-bottom: 50px;
 171   height: 100%;
 172   outline: none; /* Prevent dragging from highlighting the element */
 173   position: relative;
 174 }
 175 .CodeMirror-sizer {
 176   position: relative;
 177   border-right: 50px solid transparent;
 178 }
 179
 180 /* The fake, visible scrollbars. Used to force redraw during scrolling
 181    before actual scrolling happens, thus preventing shaking and
 182    flickering artifacts. */
 183 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
 184   position: absolute;
 185   z-index: 6;
 186   display: none;
 187   outline: none;
 188 }
 189 .CodeMirror-vscrollbar {
 190   right: 0; top: 0;
 191   overflow-x: hidden;
 192   overflow-y: scroll;
 193 }
 194 .CodeMirror-hscrollbar {
 195   bottom: 0; left: 0;
 196   overflow-y: hidden;
 197   overflow-x: scroll;
 198 }
 199 .CodeMirror-scrollbar-filler {
 200   right: 0; bottom: 0;
 201 }
 202 .CodeMirror-gutter-filler {
 203   left: 0; bottom: 0;
 204 }
 205
 206 .CodeMirror-gutters {
 207   position: absolute; left: 0; top: 0;
 208   min-height: 100%;
 209   z-index: 3;
 210 }
 211 .CodeMirror-gutter {
 212   white-space: normal;
 213   height: 100%;
 214   display: inline-block;
 215   vertical-align: top;
 216   margin-bottom: -50px;
 217 }
 218 .CodeMirror-gutter-wrapper {
 219   position: absolute;
 220   z-index: 4;
 221   background: none !important;
 222   border: none !important;
 223 }
 224 .CodeMirror-gutter-background {
 225   position: absolute;
 226   top: 0; bottom: 0;
 227   z-index: 4;
 228 }
 229 .CodeMirror-gutter-elt {
 230   position: absolute;
 231   cursor: default;
 232   z-index: 4;
 233 }
 234 .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
 235 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
 236
 237 .CodeMirror-lines {
 238   cursor: text;
 239   min-height: 1px; /* prevents collapsing before first draw */
 240 }
 241 .CodeMirror pre.CodeMirror-line,
 242 .CodeMirror pre.CodeMirror-line-like {
 243   /* Reset some styles that the rest of the page might have set */
 244   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
 245   border-width: 0;
 246   background: transparent;
 247   font-family: inherit;
 248   font-size: inherit;
 249   margin: 0;
 250   white-space: pre;
 251   word-wrap: normal;
 252   line-height: inherit;
 253   color: inherit;
 254   z-index: 2;
 255   position: relative;
 256   overflow: visible;
 257   -webkit-tap-highlight-color: transparent;
 258   -webkit-font-variant-ligatures: contextual;
 259   font-variant-ligatures: contextual;
 260 }
 261 .CodeMirror-wrap pre.CodeMirror-line,
 262 .CodeMirror-wrap pre.CodeMirror-line-like {
 263   word-wrap: break-word;
 264   white-space: pre-wrap;
 265   word-break: normal;
 266 }
 267
 268 .CodeMirror-linebackground {
 269   position: absolute;
 270   left: 0; right: 0; top: 0; bottom: 0;
 271   z-index: 0;
 272 }
 273
 274 .CodeMirror-linewidget {
 275   position: relative;
 276   z-index: 2;
 277   padding: 0.1px; /* Force widget margins to stay inside of the container */
 278 }
 279
 280 .CodeMirror-widget {}
 281
 282 .CodeMirror-rtl pre { direction: rtl; }
 283
 284 .CodeMirror-code {
 285   outline: none;
 286 }
 287
 288 /* Force content-box sizing for the elements where we expect it */
 289 .CodeMirror-scroll,
 290 .CodeMirror-sizer,
 291 .CodeMirror-gutter,
 292 .CodeMirror-gutters,
 293 .CodeMirror-linenumber {
 294   -moz-box-sizing: content-box;
 295   box-sizing: content-box;
 296 }
 297
 298 .CodeMirror-measure {
 299   position: absolute;
 300   width: 100%;
 301   height: 0;
 302   overflow: hidden;
 303   visibility: hidden;
 304 }
 305
 306 .CodeMirror-cursor {
 307   position: absolute;
 308   pointer-events: none;
 309 }
 310 .CodeMirror-measure pre { position: static; }
 311
 312 div.CodeMirror-cursors {
 313   visibility: hidden;
 314   position: relative;
 315   z-index: 3;
 316 }
 317 div.CodeMirror-dragcursors {
 318   visibility: visible;
 319 }
 320
 321 .CodeMirror-focused div.CodeMirror-cursors {
 322   visibility: visible;
 323 }
 324
 325 .CodeMirror-selected { background: #d9d9d9; }
 326 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 327 .CodeMirror-crosshair { cursor: crosshair; }
 328 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
 329 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 330
 331 .cm-searching {
 332   background-color: #ffa;
 333   background-color: rgba(255, 255, 0, .4);
 334 }
 335
 336 /* Used to force a border model for a node */
 337 .cm-force-border { padding-right: .1px; }
 338
 339 @media print {
 340   /* Hide the cursor when printing */
 341   .CodeMirror div.CodeMirror-cursors {
 342     visibility: hidden;
 343   }
 344 }
 345
 346 /* See issue #2901 */
 347 .cm-tab-wrap-hack:after { content: ''; }
 348
 349 /* Help users use markselection to safely style text background */
 350 span.CodeMirror-selectedtext { background: none; }
 351
 352 /* STOP */
 353
 354 /**
 355  * Codemirror Darcula theme
 356  */
 357
 358 /**
 359     Name: IntelliJ IDEA darcula theme
 360     From IntelliJ IDEA by JetBrains
 361  */
 362
 363 .cm-s-darcula  { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;}
 364 .cm-s-darcula.CodeMirror { background: #2B2B2B; color: #A9B7C6; }
 365
 366 .cm-s-darcula span.cm-meta { color: #BBB529; }
 367 .cm-s-darcula span.cm-number { color: #6897BB; }
 368 .cm-s-darcula span.cm-keyword { color: #CC7832; line-height: 1em; font-weight: bold; }
 369 .cm-s-darcula span.cm-def { color: #A9B7C6; font-style: italic; }
 370 .cm-s-darcula span.cm-variable { color: #A9B7C6; }
 371 .cm-s-darcula span.cm-variable-2 { color: #A9B7C6; }
 372 .cm-s-darcula span.cm-variable-3 { color: #9876AA; }
 373 .cm-s-darcula span.cm-type { color: #AABBCC; font-weight: bold; }
 374 .cm-s-darcula span.cm-property { color: #FFC66D; }
 375 .cm-s-darcula span.cm-operator { color: #A9B7C6; }
 376 .cm-s-darcula span.cm-string { color: #6A8759; }
 377 .cm-s-darcula span.cm-string-2 { color: #6A8759; }
 378 .cm-s-darcula span.cm-comment { color: #61A151; font-style: italic; }
 379 .cm-s-darcula span.cm-link { color: #CC7832; }
 380 .cm-s-darcula span.cm-atom { color: #CC7832; }
 381 .cm-s-darcula span.cm-error { color: #BC3F3C; }
 382 .cm-s-darcula span.cm-tag { color: #629755; font-weight: bold; font-style: italic; text-decoration: underline; }
 383 .cm-s-darcula span.cm-attribute { color: #6897bb; }
 384 .cm-s-darcula span.cm-qualifier { color: #6A8759; }
 385 .cm-s-darcula span.cm-bracket { color: #A9B7C6; }
 386 .cm-s-darcula span.cm-builtin { color: #FF9E59; }
 387 .cm-s-darcula span.cm-special { color: #FF9E59; }
 388 .cm-s-darcula span.cm-matchhighlight { color: #FFFFFF; background-color: rgba(50, 89, 48, .7); font-weight: normal;}
 389 .cm-s-darcula span.cm-searching { color: #FFFFFF; background-color: rgba(61, 115, 59, .7); font-weight: normal;}
 390
 391 .cm-s-darcula .CodeMirror-cursor { border-left: 1px solid #A9B7C6; }
 392 .cm-s-darcula .CodeMirror-activeline-background { background: #323232; }
 393 .cm-s-darcula .CodeMirror-gutters { background: #313335; border-right: 1px solid #313335; }
 394 .cm-s-darcula .CodeMirror-guttermarker { color: #FFEE80; }
 395 .cm-s-darcula .CodeMirror-guttermarker-subtle { color: #D0D0D0; }
 396 .cm-s-darcula .CodeMirrir-linenumber { color: #606366; }
 397 .cm-s-darcula .CodeMirror-matchingbracket { background-color: #3B514D; color: #FFEF28 !important; font-weight: bold; }
 398
 399 .cm-s-darcula div.CodeMirror-selected { background: #214283; }
 400
 401 .CodeMirror-hints.darcula {
 402   font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
 403   color: #9C9E9E;
 404   background-color: #3B3E3F !important;
 405 }
 406
 407 .CodeMirror-hints.darcula .CodeMirror-hint-active {
 408   background-color: #494D4E !important;
 409   color: #9C9E9E !important;
 410 }
 411
 412 /**
 413  * Custom BookStack overrides
 414  */
 415 .CodeMirror, .CodeMirror pre {
 416   font-size: 12px;
 417 }
 418 .CodeMirror {
 419   font-size: 12px;
 420   height: auto;
 421   margin-bottom: $-l;
 422   border: 1px solid;
 423   @include lightDark(border-color, #DDD, #111);
 424 }
 425 .CodeMirror pre::after {
 426   display: none;
 427 }
 428 html.dark-mode .CodeMirror pre {
 429   background-color: transparent;
 430 }
 431
 432 .cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 0; color: #333; }
 433
 434 .code-fill .CodeMirror {
 435   position: absolute;
 436   top: 0;
 437   bottom: 0;
 438   left: 0;
 439   width: 100%;
 440   height: 100%;
 441   margin-bottom: 0;
 442   border: 0;
 443 }
 444
 445 /**
 446  * Custom Copy Button
 447  */
 448 .CodeMirror-copy {
 449   position: absolute;
 450   top: -1px;
 451   right: -1px;
 452   background-color: #EEE;
 453   border: 1px solid #DDD;
 454   @include lightDark(background-color, #eee, #333);
 455   @include lightDark(border-color, #ddd, #444);
 456   @include lightDark(fill, #444, #888);
 457   padding: $-xs;
 458   line-height: 0;
 459   cursor: pointer;
 460   z-index: 5;
 461   user-select: none;
 462   opacity: 0;
 463   pointer-events: none;
 464   svg {
 465     transition: all ease-in 240ms;
 466     transform: translateY(0);
 467   }
 468   &.success {
 469     background-color: lighten($positive, 10%);
 470     svg {
 471       fill: #FFF;
 472       transform: translateY(-3px);
 473     }
 474   }
 475 }
 476 .CodeMirror:hover .CodeMirror-copy {
 477   user-select: all;
 478   opacity: 1;
 479   pointer-events: all;
 480 }