source-editor.css (6254B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :root { 6 --breakpoint-active-color: light-dark( 7 rgba(44, 187, 15, 0.2), 8 rgba(45, 210, 158, 0.5)) 9 ; 10 --breakpoint-active-color-hover: light-dark( 11 rgba(44, 187, 15, 0.5), 12 rgba(0, 255, 175, 0.7) 13 ); 14 15 /* use 30% opacity to allow showing text selection background */ 16 --paused-line-background: light-dark( 17 hsl(from var(--paused-background-color) h s calc( l * 0.7 ) / 30%), 18 /* dark theme requires some specific luminosity factor */ 19 hsl(from var(--paused-background-color) h s calc( l * 2 ) / 30%) 20 ); 21 --paused-line-color: inherits; 22 --paused-line-border: var(--paused-color); 23 } 24 25 :root[forced-colors-active] { 26 --paused-line-background: Mark; 27 --paused-line-color: MarkText; 28 --paused-line-border: SelectedItem; 29 } 30 31 .CodeMirror .errors { 32 width: 16px; 33 } 34 35 .CodeMirror .error { 36 display: inline-block; 37 margin-left: 5px; 38 width: 12px; 39 height: 12px; 40 opacity: 0.75; 41 } 42 43 .CodeMirror .hit-counts { 44 width: 6px; 45 } 46 47 .CodeMirror .hit-count { 48 display: inline-block; 49 height: 12px; 50 border: solid rgba(0, 0, 0, 0.2); 51 border-width: 1px 1px 1px 0; 52 border-radius: 0 3px 3px 0; 53 padding: 0 3px; 54 font-size: 10px; 55 pointer-events: none; 56 } 57 58 /* For CM6 */ 59 .cm-editor .cm-line.paused-line { 60 background-color: var(--paused-line-background); 61 color: var(--paused-line-color); 62 outline: var(--paused-line-border) solid 1px; 63 } 64 65 /* For CM6 */ 66 .cm-editor .cm-line.traced-line { 67 background-color: var(--theme-inline-preview-label-trace-background); 68 outline: var(--theme-inline-preview-label-trace-color) solid 1px; 69 } 70 71 /* Don't display the highlight color since the debug line 72 is already highlighted */ 73 .paused-line .CodeMirror-activeline-background { 74 display: none; 75 } 76 77 .CodeMirror { 78 cursor: text; 79 height: 100%; 80 } 81 82 .CodeMirror-gutters { 83 cursor: default; 84 } 85 86 /* This is to avoid the fake horizontal scrollbar div of codemirror to go 0 87 height when floating scrollbars are active. Make sure that this value is equal 88 to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]` 89 selector in floating-scrollbar-light.css across all platforms. */ 90 .CodeMirror-hscrollbar { 91 min-height: 10px; 92 } 93 94 /* This is to avoid the fake vertical scrollbar div of codemirror to go 0 95 width when floating scrollbars are active. Make sure that this value is equal 96 to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]` 97 selector in floating-scrollbar-light.css across all platforms. */ 98 .CodeMirror-vscrollbar { 99 min-width: 10px; 100 } 101 102 .cm-trailingspace { 103 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg=="); 104 opacity: 0.75; 105 background-position: left bottom; 106 background-repeat: repeat-x; 107 } 108 109 /* CodeMirror dialogs styling */ 110 111 .CodeMirror-dialog { 112 padding: 4px 3px; 113 } 114 115 .CodeMirror-dialog, 116 .CodeMirror-dialog input { 117 font: message-box; 118 } 119 120 /* Fold addon */ 121 122 .CodeMirror-foldmarker { 123 color: blue; 124 text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, 125 #b9f -1px 1px 2px; 126 font-family: sans-serif; 127 line-height: 0.3; 128 cursor: pointer; 129 } 130 131 .CodeMirror-foldgutter { 132 width: 10px; 133 } 134 135 .CodeMirror-foldgutter-open, 136 .CodeMirror-foldgutter-folded { 137 color: #555; 138 cursor: pointer; 139 line-height: 1; 140 padding: 0 1px; 141 } 142 143 .CodeMirror-foldgutter-open::after, 144 .CodeMirror-foldgutter-open::before, 145 .CodeMirror-foldgutter-folded::after, 146 .CodeMirror-foldgutter-folded::before { 147 content: ""; 148 height: 0; 149 width: 0; 150 position: absolute; 151 border: 4px solid transparent; 152 } 153 154 .CodeMirror-foldgutter-open::after { 155 border-top-color: var(--theme-codemirror-gutter-background); 156 top: 4px; 157 } 158 159 .CodeMirror-foldgutter-open::before { 160 border-top-color: var(--theme-body-color); 161 top: 5px; 162 } 163 164 .new-breakpoint .CodeMirror-foldgutter-open::after { 165 border-top-color: var(--theme-selection-background); 166 } 167 168 .new-breakpoint .CodeMirror-foldgutter-open::before { 169 border-top-color: white; 170 } 171 172 .CodeMirror-foldgutter-folded::after { 173 border-left-color: var(--theme-codemirror-gutter-background); 174 left: 3px; 175 top: 3px; 176 } 177 178 .CodeMirror-foldgutter-folded::before { 179 border-left-color: var(--theme-body-color); 180 left: 4px; 181 top: 3px; 182 } 183 184 .new-breakpoint .CodeMirror-foldgutter-folded::after { 185 border-left-color: var(--theme-selection-background); 186 } 187 188 .new-breakpoint .CodeMirror-foldgutter-folded::before { 189 border-left-color: white; 190 } 191 192 .CodeMirror-hints { 193 position: absolute; 194 z-index: 10; 195 overflow: hidden; 196 list-style: none; 197 margin: 0; 198 padding: 2px; 199 border-radius: 3px; 200 font-size: 90%; 201 max-height: 20em; 202 overflow-y: auto; 203 } 204 205 .CodeMirror-hint { 206 margin: 0; 207 padding: 0 4px; 208 border-radius: 2px; 209 max-width: 19em; 210 overflow: hidden; 211 white-space: pre; 212 cursor: pointer; 213 } 214 215 .CodeMirror-Tern-completion { 216 padding-inline-start: 22px; 217 position: relative; 218 line-height: 18px; 219 } 220 221 .CodeMirror-Tern-completion:before { 222 position: absolute; 223 left: 2px; 224 bottom: 2px; 225 border-radius: 50%; 226 font-size: 12px; 227 font-weight: bold; 228 height: 15px; 229 width: 15px; 230 line-height: 16px; 231 text-align: center; 232 color: #ffffff; 233 box-sizing: border-box; 234 } 235 236 .CodeMirror-Tern-completion-unknown:before { 237 content: "?"; 238 } 239 240 .CodeMirror-Tern-completion-object:before { 241 content: "O"; 242 } 243 244 .CodeMirror-Tern-completion-fn:before { 245 content: "F"; 246 } 247 248 .CodeMirror-Tern-completion-array:before { 249 content: "A"; 250 } 251 252 .CodeMirror-Tern-completion-number:before { 253 content: "N"; 254 } 255 256 .CodeMirror-Tern-completion-string:before { 257 content: "S"; 258 } 259 260 .CodeMirror-Tern-completion-bool:before { 261 content: "B"; 262 } 263 264 .CodeMirror-Tern-completion-guess { 265 color: #999; 266 } 267 268 .CodeMirror-Tern-tooltip { 269 border-radius: 3px; 270 padding: 2px 5px; 271 white-space: pre-wrap; 272 max-width: 40em; 273 position: absolute; 274 z-index: 10; 275 } 276 277 .CodeMirror-Tern-hint-doc { 278 max-width: 25em; 279 } 280 281 .CodeMirror-Tern-farg-current { 282 text-decoration: underline; 283 } 284 285 .CodeMirror-Tern-fhint-guess { 286 opacity: 0.7; 287 }