light-theme.css (6795B)
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 @import url(chrome://devtools/skin/variables.css); 6 @import url(chrome://devtools/skin/common.css); 7 @import url(chrome://devtools/skin/toolbars.css); 8 @import url(chrome://devtools/skin/tooltips.css); 9 10 body { 11 margin: 0; 12 } 13 14 .theme-body { 15 background: var(--theme-body-background); 16 color: var(--theme-body-color); 17 } 18 19 .theme-sidebar { 20 background: var(--theme-sidebar-background); 21 color: var(--theme-body-color); 22 } 23 24 .theme-selected, 25 .CodeMirror-hint-active { 26 background-color: var(--theme-selection-background); 27 color: var(--theme-selection-color); 28 } 29 30 .variable-or-property:not([overridden])[changed] { 31 background: var(--theme-contrast-background); 32 } 33 34 .theme-link, 35 .cm-s-mozilla .cm-link, 36 :is(.cm-editor, .cm-highlighted) .tok-link, 37 .CodeMirror-Tern-type { 38 color: var(--theme-comment); 39 } 40 41 /* 42 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion 43 * failures in debug builds. 44 */ 45 :is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited { 46 color: var(--theme-link-color); 47 } 48 49 .theme-comment, 50 .cm-s-mozilla .cm-meta, 51 .cm-s-mozilla .cm-hr, 52 .cm-s-mozilla .cm-comment :is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment), 53 .variable-or-property .token-undefined, 54 .variable-or-property .token-null, 55 .CodeMirror-Tern-completion-unknown:before { 56 color: var(--theme-comment); 57 } 58 59 .cm-s-mozilla .cm-unused-line { 60 text-decoration: line-through; 61 text-decoration-color: var(--theme-highlight-bluegrey); 62 } 63 64 .cm-s-mozilla .cm-executed-line { 65 background-color: #fcfffc; 66 } 67 68 .cm-s-mozilla .cm-number, 69 :is(.cm-editor, .cm-highlighted) .tok-number, 70 .variable-or-property .token-number, 71 .variable-or-property[return] > .title > .name, 72 .variable-or-property[scope] > .title > .name { 73 color: var(--theme-highlight-purple); 74 } 75 76 .CodeMirror-Tern-completion-number:before { 77 background-color: hsl(72, 100%, 27%); 78 } 79 80 .cm-s-mozilla .cm-property, 81 :is(.cm-editor, .cm-highlighted) .tok-propertyName { 82 color: var(--theme-highlight-green); 83 } 84 85 .theme-fg-color1, 86 /* ------- cm6 ------- */ 87 .cm-editor .tok-literal, 88 .cm-editor .tok-className, 89 /* This matches html attribute names only, not matching css declaration names */ 90 .cm-editor .tok-propertyName:has(+ .tok-operator), 91 /* ------------------- */ 92 .cm-s-mozilla .cm-attribute, 93 .cm-s-mozilla .cm-builtin, 94 .cm-s-mozilla .cm-keyword, 95 :is(.cm-editor, .cm-highlighted) .tok-keyword, 96 .variables-view-variable > .title > .name { 97 color: var(--theme-highlight-red); 98 } 99 100 .cm-s-mozilla .cm-def, 101 .cm-s-mozilla .cm-variable-2, 102 :is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) { 103 color: var(--blue-55); 104 } 105 106 .cm-s-mozilla .cm-variable, 107 :is(.cm-editor, .cm-highlighted) .tok-variableName2 { 108 color: var(--purple-60); 109 } 110 111 .CodeMirror-Tern-completion-object:before { 112 background-color: hsl(208, 56%, 40%); 113 } 114 115 .theme-fg-color3, 116 /* ------- cm6 ------- */ 117 .cm-editor .tok-typeName, 118 /* ------------------- */ 119 .cm-s-mozilla .cm-tag, 120 .cm-s-mozilla .cm-header, 121 .cm-s-mozilla .cm-bracket, 122 .cm-s-mozilla .cm-qualifier, 123 :is(.cm-editor, .cm-highlighted) .tok-heading, 124 .variables-view-property > .title > .name { 125 color: var(--theme-highlight-blue); 126 } 127 128 .CodeMirror-Tern-completion-array:before { 129 background-color: var(--theme-highlight-bluegrey); 130 } 131 132 .theme-fg-color2, 133 .cm-s-mozilla .cm-string, 134 .cm-s-mozilla .cm-string-2, 135 /* ------- cm6 ------- */ 136 :is(.cm-editor, .cm-highlighted) .tok-string, 137 :is(.cm-editor, .cm-highlighted) .tok-string2, 138 .variable-or-property .token-string, 139 /* ------------------- */ 140 .CodeMirror-Tern-farg { 141 color: var(--theme-highlight-purple); 142 } 143 144 .CodeMirror-Tern-completion-string:before, 145 .CodeMirror-Tern-completion-fn:before { 146 background-color: hsl(24, 85%, 39%); 147 } 148 149 .cm-s-mozilla .cm-atom, 150 .cm-s-mozilla .cm-quote, 151 .cm-s-mozilla .cm-error, 152 :is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid), 153 .variable-or-property .token-boolean, 154 .variable-or-property .token-domnode, 155 .variable-or-property[exception] > .title > .name { 156 color: var(--theme-highlight-red); 157 } 158 159 .CodeMirror-Tern-completion-bool:before { 160 background-color: #bf5656; 161 } 162 163 .variable-or-property .token-domnode { 164 font-weight: bold; 165 } 166 167 .theme-toolbar, 168 .devtools-toolbar, 169 .devtools-sidebar-tabs tabs, 170 .devtools-sidebar-alltabs, 171 .cm-s-mozilla .CodeMirror-dialog { 172 /* General toolbar styling */ 173 color: var(--theme-body-color); 174 background-color: var(--theme-toolbar-background); 175 border-color: var(--theme-splitter-color); 176 } 177 178 .theme-bg-contrast { 179 background: var(--theme-contrast-background); 180 } 181 182 .theme-fg-contrast { 183 color: var(--theme-contrast-color); 184 } 185 186 /* CodeMirror specific styles. 187 * Best effort to match the existing theme, some of the colors 188 * are duplicated here to prevent weirdness in the main theme. */ 189 190 .CodeMirror.cm-s-mozilla { 191 /* Inherit platform specific font sizing and styles */ 192 font-family: inherit; 193 font-size: inherit; 194 background: transparent; 195 } 196 197 .CodeMirror.cm-s-mozilla pre, 198 .CodeMirror.cm-s-mozilla pre.CodeMirror-line, 199 .CodeMirror.cm-s-mozilla pre.CodeMirror-line-like, 200 .cm-s-mozilla .cm-variable-3, 201 .cm-s-mozilla .cm-operator, 202 .cm-s-mozilla .cm-special, 203 :is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) { 204 color: var(--theme-body-color); 205 } 206 207 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor:not(.CodeMirror-secondarycursor), 208 .cm-editor .cm-cursor { 209 border-left: solid 1px black; 210 } 211 212 .cm-s-mozilla .CodeMirror-activeline-background { 213 /* selected color with alpha */ 214 background: rgba(185, 215, 253, 0.35); 215 } 216 217 /* Highlight for a line that contains an error. */ 218 div.CodeMirror div.error-line { 219 background: rgba(255, 0, 0, 0.2); 220 } 221 222 /* Generic highlighted text */ 223 div.CodeMirror span.marked-text { 224 background: rgba(255, 255, 0, 0.2); 225 border: 1px dashed rgba(192, 192, 0, 0.6); 226 margin-inline-start: -1px; 227 margin-inline-end: -1px; 228 } 229 230 .cm-s-mozilla .empty-line .CodeMirror-linenumber, 231 /* Codemirror 6 */ 232 :is(.cm-editor, .cm-highlighted) .cm-gutterElement.empty-line { 233 color: var(--grey-40); 234 } 235 236 /* Blackboxing lines */ 237 .CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt), 238 /* Codemirror 6 */ 239 .cm-gutterElement.blackboxed-line, .cm-line.blackboxed-line span[class^="tok-"] { 240 color: #806414cc; 241 } 242 243 /* Highlight for evaluating current statement. */ 244 div.CodeMirror span.eval-text { 245 background-color: #ccd; 246 } 247 248 .cm-s-mozilla .CodeMirror-linenumber { 249 /* line number text */ 250 color: var(--grey-50); 251 } 252 253 .CodeMirror-hints, 254 .CodeMirror-Tern-tooltip { 255 box-shadow: 0 0 4px rgba(128, 128, 128, 0.5); 256 background-color: var(--theme-sidebar-background); 257 }