2017-05-28 14:16:21 +02:00
/* BASICS */
. CodeMirror {
/* Set height, width, borders, and global font properties here */
2020-09-26 18:33:43 +02:00
font-family : monospace ;
2017-05-28 14:16:21 +02:00
height : 300 px ;
color : black ;
2020-09-26 18:33:43 +02:00
direction : ltr ;
2017-05-28 14:16:21 +02:00
}
/* PADDING */
. CodeMirror-lines {
padding : 4 px 0 ; /* Vertical padding around content */
}
2020-09-26 18:33:43 +02:00
. CodeMirror pre . CodeMirror-line ,
. CodeMirror pre . CodeMirror-line-like {
2017-05-28 14:16:21 +02:00
padding : 0 4 px ; /* Horizontal padding of content */
}
. CodeMirror-scrollbar-filler , . CodeMirror-gutter-filler {
background-color : white ; /* The little square between H and V scrollbars */
}
/* GUTTER */
. CodeMirror-gutters {
border-right : 1 px solid #ddd ;
background-color : #f7f7f7 ;
white-space : nowrap ;
}
. CodeMirror-linenumbers { }
. CodeMirror-linenumber {
padding : 0 3 px 0 5 px ;
min-width : 20 px ;
text-align : right ;
color : #999 ;
white-space : nowrap ;
}
. CodeMirror-guttermarker { color : black ; }
. CodeMirror-guttermarker-subtle { color : #999 ; }
/* CURSOR */
. CodeMirror-cursor {
border-left : 1 px solid black ;
border-right : none ;
width : 0 ;
}
/* Shown when moving in bi-directional text */
. CodeMirror div . CodeMirror-secondarycursor {
border-left : 1 px solid silver ;
}
. cm-fat-cursor . CodeMirror-cursor {
width : auto ;
border : 0 !important ;
background : #7e7 ;
}
. cm-fat-cursor div . CodeMirror-cursors {
z-index : 1 ;
}
2020-09-26 18:33:43 +02:00
. cm-fat-cursor-mark {
background-color : rgba ( 20 , 255 , 20 , 0 .5 ) ;
-webkit-animation : blink 1 .06 s steps ( 1 ) infinite ;
-moz-animation : blink 1 .06 s steps ( 1 ) infinite ;
animation : blink 1 .06 s steps ( 1 ) infinite ;
}
2017-05-28 14:16:21 +02:00
. cm-animate-fat-cursor {
width : auto ;
border : 0 ;
-webkit-animation : blink 1 .06 s steps ( 1 ) infinite ;
-moz-animation : blink 1 .06 s steps ( 1 ) infinite ;
animation : blink 1 .06 s steps ( 1 ) infinite ;
background-color : #7e7 ;
}
@-moz-keyframes blink {
0 % { }
50 % { background-color : transparent ; }
100 % { }
}
@-webkit-keyframes blink {
0 % { }
50 % { background-color : transparent ; }
100 % { }
}
@keyframes blink {
0 % { }
50 % { background-color : transparent ; }
100 % { }
}
/* Can style cursor different in overwrite (non-insert) mode */
. CodeMirror-overwrite . CodeMirror-cursor { }
. cm-tab { display : inline-block ; text-decoration : inherit ; }
. CodeMirror-rulers {
position : absolute ;
2020-09-26 18:33:43 +02:00
left : 0 ; right : 0 ; top : - 50 px ; bottom : 0 ;
2017-05-28 14:16:21 +02:00
overflow : hidden ;
}
. CodeMirror-ruler {
border-left : 1 px solid #ccc ;
top : 0 ; bottom : 0 ;
position : absolute ;
}
/* DEFAULT THEME */
. cm-s-default . cm-header { color : blue ; }
. cm-s-default . cm-quote { color : #090 ; }
. cm-negative { color : #d44 ; }
. cm-positive { color : #292 ; }
. cm-header , . cm-strong { font-weight : bold ; }
. cm-em { font-style : italic ; }
. cm-link { text-decoration : underline ; }
. cm-strikethrough { text-decoration : line-through ; }
. cm-s-default . cm-keyword { color : #708 ; }
. cm-s-default . cm-atom { color : #219 ; }
. cm-s-default . cm-number { color : #164 ; }
. cm-s-default . cm-def { color : #00f ; }
. cm-s-default . cm-variable ,
. cm-s-default . cm-punctuation ,
. cm-s-default . cm-property ,
. cm-s-default . cm-operator { }
. cm-s-default . cm-variable-2 { color : #05a ; }
2020-09-26 18:33:43 +02:00
. cm-s-default . cm-variable-3 , . cm-s-default . cm-type { color : #085 ; }
2017-05-28 14:16:21 +02:00
. cm-s-default . cm-comment { color : #a50 ; }
. cm-s-default . cm-string { color : #a11 ; }
. cm-s-default . cm-string-2 { color : #f50 ; }
. cm-s-default . cm-meta { color : #555 ; }
. cm-s-default . cm-qualifier { color : #555 ; }
. cm-s-default . cm-builtin { color : #30a ; }
. cm-s-default . cm-bracket { color : #997 ; }
. cm-s-default . cm-tag { color : #170 ; }
. cm-s-default . cm-attribute { color : #00c ; }
. cm-s-default . cm-hr { color : #999 ; }
. cm-s-default . cm-link { color : #00c ; }
. cm-s-default . cm-error { color : #f00 ; }
. cm-invalidchar { color : #f00 ; }
. CodeMirror-composing { border-bottom : 2 px solid ; }
/* Default styles for common addons */
2020-09-26 18:33:43 +02:00
div . CodeMirror span . CodeMirror-matchingbracket { color : #0b0 ; }
div . CodeMirror span . CodeMirror-nonmatchingbracket { color : #a22 ; }
2017-05-28 14:16:21 +02:00
. CodeMirror-matchingtag { background : rgba ( 255 , 150 , 0 , .3 ) ; }
. CodeMirror-activeline-background { background : #e8f2ff ; }
/* STOP */
/ * The rest of this file contains styles related to the mechanics of
the editor . You probably shouldn ' t touch them. */
. CodeMirror {
position : relative ;
overflow : hidden ;
background : white ;
}
. CodeMirror-scroll {
overflow : scroll !important ; /* Things will break if this is overridden */
2020-09-26 18:33:43 +02:00
/* 50px is the magic margin used to hide the element's real scrollbars */
2017-05-28 14:16:21 +02:00
/* See overflow: hidden in .CodeMirror */
2020-09-26 18:33:43 +02:00
margin-bottom : - 50 px ; margin-right : - 50 px ;
padding-bottom : 50 px ;
2017-05-28 14:16:21 +02:00
height : 100 % ;
outline : none ; /* Prevent dragging from highlighting the element */
position : relative ;
}
. CodeMirror-sizer {
position : relative ;
2020-09-26 18:33:43 +02:00
border-right : 50 px solid transparent ;
2017-05-28 14:16:21 +02:00
}
/ * The fake , visible scrollbars . Used to force redraw during scrolling
before actual scrolling happens , thus preventing shaking and
flickering artifacts . * /
. CodeMirror-vscrollbar , . CodeMirror-hscrollbar , . CodeMirror-scrollbar-filler , . CodeMirror-gutter-filler {
position : absolute ;
z-index : 6 ;
display : none ;
2020-09-26 18:33:43 +02:00
outline : none ;
2017-05-28 14:16:21 +02:00
}
. CodeMirror-vscrollbar {
right : 0 ; top : 0 ;
overflow-x : hidden ;
overflow-y : scroll ;
}
. CodeMirror-hscrollbar {
bottom : 0 ; left : 0 ;
overflow-y : hidden ;
overflow-x : scroll ;
}
. CodeMirror-scrollbar-filler {
right : 0 ; bottom : 0 ;
}
. CodeMirror-gutter-filler {
left : 0 ; bottom : 0 ;
}
. CodeMirror-gutters {
position : absolute ; left : 0 ; top : 0 ;
min-height : 100 % ;
z-index : 3 ;
}
. CodeMirror-gutter {
white-space : normal ;
height : 100 % ;
display : inline-block ;
vertical-align : top ;
2020-09-26 18:33:43 +02:00
margin-bottom : - 50 px ;
2017-05-28 14:16:21 +02:00
}
. CodeMirror-gutter-wrapper {
position : absolute ;
z-index : 4 ;
background : none !important ;
border : none !important ;
}
. CodeMirror-gutter-background {
position : absolute ;
top : 0 ; bottom : 0 ;
z-index : 4 ;
}
. CodeMirror-gutter-elt {
position : absolute ;
cursor : default ;
z-index : 4 ;
}
. CodeMirror-gutter-wrapper : : selection { background-color : transparent }
. CodeMirror-gutter-wrapper : : -moz-selection { background-color : transparent }
. CodeMirror-lines {
cursor : text ;
min-height : 1 px ; /* prevents collapsing before first draw */
}
2020-09-26 18:33:43 +02:00
. CodeMirror pre . CodeMirror-line ,
. CodeMirror pre . CodeMirror-line-like {
2017-05-28 14:16:21 +02:00
/* Reset some styles that the rest of the page might have set */
-moz-border-radius : 0 ; -webkit-border-radius : 0 ; border-radius : 0 ;
border-width : 0 ;
background : transparent ;
2020-09-26 18:33:43 +02:00
font-family : inherit ;
2017-05-28 14:16:21 +02:00
font-size : inherit ;
margin : 0 ;
white-space : pre ;
word-wrap : normal ;
line-height : inherit ;
color : inherit ;
z-index : 2 ;
position : relative ;
overflow : visible ;
-webkit-tap-highlight-color : transparent ;
-webkit-font-variant-ligatures : contextual ;
font-variant-ligatures : contextual ;
}
2020-09-26 18:33:43 +02:00
. CodeMirror-wrap pre . CodeMirror-line ,
. CodeMirror-wrap pre . CodeMirror-line-like {
2017-05-28 14:16:21 +02:00
word-wrap : break-word ;
white-space : pre-wrap ;
word-break : normal ;
}
. CodeMirror-linebackground {
position : absolute ;
left : 0 ; right : 0 ; top : 0 ; bottom : 0 ;
z-index : 0 ;
}
. CodeMirror-linewidget {
position : relative ;
z-index : 2 ;
2020-09-26 18:33:43 +02:00
padding : 0 .1 px ; /* Force widget margins to stay inside of the container */
2017-05-28 14:16:21 +02:00
}
. CodeMirror-widget { }
. CodeMirror-rtl pre { direction : rtl ; }
. CodeMirror-code {
outline : none ;
}
/* Force content-box sizing for the elements where we expect it */
. CodeMirror-scroll ,
. CodeMirror-sizer ,
. CodeMirror-gutter ,
. CodeMirror-gutters ,
. CodeMirror-linenumber {
-moz-box-sizing : content-box ;
box-sizing : content-box ;
}
. CodeMirror-measure {
position : absolute ;
width : 100 % ;
height : 0 ;
overflow : hidden ;
visibility : hidden ;
}
. CodeMirror-cursor {
position : absolute ;
pointer-events : none ;
}
. CodeMirror-measure pre { position : static ; }
div . CodeMirror-cursors {
visibility : hidden ;
position : relative ;
z-index : 3 ;
}
div . CodeMirror-dragcursors {
visibility : visible ;
}
. CodeMirror-focused div . CodeMirror-cursors {
visibility : visible ;
}
. CodeMirror-selected { background : #d9d9d9 ; }
. CodeMirror-focused . CodeMirror-selected { background : #d7d4f0 ; }
. CodeMirror-crosshair { cursor : crosshair ; }
. CodeMirror-line : : selection , . CodeMirror-line > span : : selection , . CodeMirror-line > span > span : : selection { background : #d7d4f0 ; }
. CodeMirror-line : : -moz-selection , . CodeMirror-line > span : : -moz-selection , . CodeMirror-line > span > span : : -moz-selection { background : #d7d4f0 ; }
. cm-searching {
2020-09-26 18:33:43 +02:00
background-color : #ffa ;
background-color : rgba ( 255 , 255 , 0 , .4 ) ;
2017-05-28 14:16:21 +02:00
}
/* Used to force a border model for a node */
. cm-force-border { padding-right : .1 px ; }
@media print {
/* Hide the cursor when printing */
. CodeMirror div . CodeMirror-cursors {
visibility : hidden ;
}
}
/* See issue #2901 */
. cm-tab-wrap-hack : after { content : ' ' ; }
/* Help users use markselection to safely style text background */
span . CodeMirror-selectedtext { background : none ; }
2020-02-02 22:59:51 +01:00
/* STOP */
2017-05-28 14:16:21 +02:00
2020-04-10 23:38:29 +02:00
/ * *
* Codemirror Darcula theme
* /
/ * *
Name : IntelliJ IDEA darcula theme
From IntelliJ IDEA by JetBrains
* /
. cm-s-darcula { font-family : Consolas , Menlo , Monaco , ' Lucida Console ' , ' Liberation Mono ' , ' DejaVu Sans Mono ' , ' Bitstream Vera Sans Mono ' , ' Courier New ' , monospace , serif ; }
. cm-s-darcula . CodeMirror { background : #2B2B2B ; color : #A9B7C6 ; }
. cm-s-darcula span . cm-meta { color : #BBB529 ; }
. cm-s-darcula span . cm-number { color : #6897BB ; }
. cm-s-darcula span . cm-keyword { color : #CC7832 ; line-height : 1 em ; font-weight : bold ; }
. cm-s-darcula span . cm-def { color : #A9B7C6 ; font-style : italic ; }
. cm-s-darcula span . cm-variable { color : #A9B7C6 ; }
. cm-s-darcula span . cm-variable-2 { color : #A9B7C6 ; }
. cm-s-darcula span . cm-variable-3 { color : #9876AA ; }
. cm-s-darcula span . cm-type { color : #AABBCC ; font-weight : bold ; }
. cm-s-darcula span . cm-property { color : #FFC66D ; }
. cm-s-darcula span . cm-operator { color : #A9B7C6 ; }
. cm-s-darcula span . cm-string { color : #6A8759 ; }
. cm-s-darcula span . cm-string-2 { color : #6A8759 ; }
. cm-s-darcula span . cm-comment { color : #61A151 ; font-style : italic ; }
. cm-s-darcula span . cm-link { color : #CC7832 ; }
. cm-s-darcula span . cm-atom { color : #CC7832 ; }
. cm-s-darcula span . cm-error { color : #BC3F3C ; }
. cm-s-darcula span . cm-tag { color : #629755 ; font-weight : bold ; font-style : italic ; text-decoration : underline ; }
. cm-s-darcula span . cm-attribute { color : #6897bb ; }
. cm-s-darcula span . cm-qualifier { color : #6A8759 ; }
. cm-s-darcula span . cm-bracket { color : #A9B7C6 ; }
. cm-s-darcula span . cm-builtin { color : #FF9E59 ; }
. cm-s-darcula span . cm-special { color : #FF9E59 ; }
. cm-s-darcula span . cm-matchhighlight { color : #FFFFFF ; background-color : rgba ( 50 , 89 , 48 , .7 ) ; font-weight : normal ; }
. cm-s-darcula span . cm-searching { color : #FFFFFF ; background-color : rgba ( 61 , 115 , 59 , .7 ) ; font-weight : normal ; }
. cm-s-darcula . CodeMirror-cursor { border-left : 1 px solid #A9B7C6 ; }
. cm-s-darcula . CodeMirror-activeline-background { background : #323232 ; }
. cm-s-darcula . CodeMirror-gutters { background : #313335 ; border-right : 1 px solid #313335 ; }
. cm-s-darcula . CodeMirror-guttermarker { color : #FFEE80 ; }
. cm-s-darcula . CodeMirror-guttermarker-subtle { color : #D0D0D0 ; }
. cm-s-darcula . CodeMirrir-linenumber { color : #606366 ; }
. cm-s-darcula . CodeMirror-matchingbracket { background-color : #3B514D ; color : #FFEF28 !important ; font-weight : bold ; }
. cm-s-darcula div . CodeMirror-selected { background : #214283 ; }
. CodeMirror-hints . darcula {
font-family : Menlo , Monaco , Consolas , ' Courier New ' , monospace ;
color : #9C9E9E ;
background-color : #3B3E3F !important ;
}
. CodeMirror-hints . darcula . CodeMirror-hint-active {
background-color : #494D4E !important ;
color : #9C9E9E !important ;
}
2017-05-28 14:16:21 +02:00
/ * *
* Custom BookStack overrides
* /
2023-04-11 14:16:04 +02:00
. cm-editor {
@include lightDark ( background-color , #FFF , #000 ) ;
}
// TODO - All below are old
2017-09-02 14:34:37 +02:00
. CodeMirror , . CodeMirror pre {
font-size : 12 px ;
}
. CodeMirror {
2017-05-28 14:16:21 +02:00
font-size : 12 px ;
height : auto ;
margin-bottom : $-l ;
2020-04-10 23:38:29 +02:00
border : 1 px solid ;
2020-04-25 20:19:41 +02:00
@include lightDark ( border-color , #DDD , #111 ) ;
2020-09-26 18:33:43 +02:00
}
. CodeMirror pre : : after {
display : none ;
2020-04-25 20:19:41 +02:00
}
html . dark-mode . CodeMirror pre {
background-color : transparent ;
2017-05-28 14:16:21 +02:00
}
2020-01-18 10:55:02 +01:00
. cm-s-mdn-like . CodeMirror-gutters { background : #f8f8f8 ; border-left : 0 ; color : #333 ; }
2017-05-28 17:02:46 +02:00
2017-08-19 19:32:24 +02:00
. code-fill . CodeMirror {
2017-05-28 17:02:46 +02:00
position : absolute ;
top : 0 ;
bottom : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
2019-12-22 15:21:18 +01:00
margin-bottom : 0 ;
2021-11-15 12:37:17 +01:00
border : 0 ;
2018-06-09 11:41:01 +02:00
}
/ * *
* Custom Copy Button
* /
. CodeMirror-copy {
position : absolute ;
top : - 1 px ;
right : - 1 px ;
background-color : #EEE ;
2020-04-10 23:38:29 +02:00
border : 1 px solid #DDD ;
@include lightDark ( background-color , #eee , #333 ) ;
@include lightDark ( border-color , #ddd , #444 ) ;
@include lightDark ( fill , #444 , #888 ) ;
2018-06-09 11:41:01 +02:00
padding : $-xs ;
line-height : 0 ;
cursor : pointer ;
z-index : 5 ;
user-select : none ;
2018-09-22 15:55:33 +02:00
opacity : 0 ;
pointer-events : none ;
2018-06-09 11:41:01 +02:00
svg {
2020-04-10 23:38:29 +02:00
transition : all ease-in 240 ms ;
2018-06-09 11:41:01 +02:00
transform : translateY ( 0 ) ;
}
& . success {
background-color : lighten ( $positive , 10 % ) ;
svg {
2020-04-10 23:38:29 +02:00
fill : #FFF ;
2018-06-09 11:41:01 +02:00
transform : translateY ( - 3 px ) ;
}
}
}
. CodeMirror : hover . CodeMirror-copy {
user-select : all ;
opacity : 1 ;
2018-09-22 15:55:33 +02:00
pointer-events : all ;
2017-05-28 17:02:46 +02:00
}