The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/dark-theme.css
browser/themes/shared/devtools/dark-theme.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c0bac1c20631 |
|---|---|
| 1 /* vim:set ts=2 sw=2 sts=2 et: */ | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 | |
| 6 /* According to: | |
| 7 * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 | |
| 8 */ | |
| 9 .theme-body { | |
| 10 background: #14171a; | |
| 11 color: #a9bacb; | |
| 12 } | |
| 13 | |
| 14 .theme-sidebar { | |
| 15 background: #181d20; | |
| 16 color: #a9bacb; | |
| 17 } | |
| 18 | |
| 19 ::-moz-selection { | |
| 20 background-color: #1d4f73; | |
| 21 color: #f5f7fa; | |
| 22 } | |
| 23 | |
| 24 .theme-bg-darker { | |
| 25 background-color: rgba(0,0,0,0.5); | |
| 26 } | |
| 27 | |
| 28 .theme-selected { | |
| 29 background-color: #1d4f73; | |
| 30 color: #f5f7fa; /* Light foreground text */ | |
| 31 } | |
| 32 | |
| 33 .theme-bg-contrast, | |
| 34 .variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */ | |
| 35 background: #a18650; | |
| 36 } | |
| 37 | |
| 38 .theme-link, | |
| 39 .cm-s-mozilla .cm-link { /* blue */ | |
| 40 color: #3689b2; | |
| 41 } | |
| 42 | |
| 43 /* | |
| 44 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion | |
| 45 * failures in debug builds. | |
| 46 */ | |
| 47 .theme-link:visited, | |
| 48 .cm-s-mozilla .cm-link:visited { /* blue */ | |
| 49 color: #3689b2; | |
| 50 } | |
| 51 | |
| 52 | |
| 53 .theme-comment, | |
| 54 .cm-s-mozilla .cm-meta, | |
| 55 .cm-s-mozilla .cm-hr, | |
| 56 .cm-s-mozilla .cm-comment, | |
| 57 .variable-or-property .token-undefined, | |
| 58 .variable-or-property .token-null { /* grey */ | |
| 59 color: #5c6773; | |
| 60 } | |
| 61 | |
| 62 .theme-gutter { | |
| 63 background-color: #0f171f; | |
| 64 color: #667380; | |
| 65 border-color: #303b47; | |
| 66 } | |
| 67 | |
| 68 .theme-separator { /* grey */ | |
| 69 border-color: #303b47; | |
| 70 } | |
| 71 | |
| 72 .theme-fg-color1, | |
| 73 .cm-s-mozilla .cm-number, | |
| 74 .variable-or-property .token-number, | |
| 75 .variable-or-property[return] > .title > .name, | |
| 76 .variable-or-property[scope] > .title > .name { /* green */ | |
| 77 color: #5c9966; | |
| 78 } | |
| 79 | |
| 80 .theme-fg-color2, | |
| 81 .cm-s-mozilla .cm-attribute, | |
| 82 .cm-s-mozilla .cm-variable, | |
| 83 .cm-s-mozilla .cm-def, | |
| 84 .cm-s-mozilla .cm-property, | |
| 85 .cm-s-mozilla .cm-qualifier, | |
| 86 .variables-view-variable > .title > .name { /* blue */ | |
| 87 color: #3689b2; | |
| 88 } | |
| 89 | |
| 90 .theme-fg-color3, | |
| 91 .cm-s-mozilla .cm-builtin, | |
| 92 .cm-s-mozilla .cm-tag, | |
| 93 .cm-s-mozilla .cm-header, | |
| 94 .variables-view-property > .title > .name { /* pink/lavender */ | |
| 95 color: #a673bf; | |
| 96 } | |
| 97 | |
| 98 .theme-fg-color4 { /* purple/violet */ | |
| 99 color: #6270b2; | |
| 100 } | |
| 101 | |
| 102 .theme-fg-color5, | |
| 103 .cm-s-mozilla .cm-bracket, | |
| 104 .cm-s-mozilla .cm-keyword { /* Yellow */ | |
| 105 color: #a18650; | |
| 106 } | |
| 107 | |
| 108 .theme-fg-color6, | |
| 109 .cm-s-mozilla .cm-string, | |
| 110 .cm-s-mozilla .cm-string-2, | |
| 111 .variable-or-property .token-string { /* Orange */ | |
| 112 color: #b26b47; | |
| 113 } | |
| 114 | |
| 115 .theme-fg-color7, | |
| 116 .cm-s-mozilla .cm-atom, | |
| 117 .cm-s-mozilla .cm-quote, | |
| 118 .cm-s-mozilla .cm-error, | |
| 119 .variable-or-property .token-boolean, | |
| 120 .variable-or-property .token-domnode, | |
| 121 .variable-or-property[exception] > .title > .name { /* Red */ | |
| 122 color: #bf5656; | |
| 123 } | |
| 124 | |
| 125 .variable-or-property .token-domnode { | |
| 126 font-weight: bold; | |
| 127 } | |
| 128 | |
| 129 .theme-toolbar, | |
| 130 .devtools-toolbar, | |
| 131 .devtools-sidebar-tabs > tabs, | |
| 132 .CodeMirror-dialog { /* General toolbar styling */ | |
| 133 color: #b6babf; | |
| 134 background-color: #343c45; | |
| 135 border-color: hsla(210,8%,5%,.6); | |
| 136 } | |
| 137 | |
| 138 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */ | |
| 139 color: black; | |
| 140 } | |
| 141 | |
| 142 .ruleview-colorswatch, | |
| 143 .computedview-colorswatch, | |
| 144 .markupview-colorswatch { | |
| 145 box-shadow: 0 0 0 1px rgba(0,0,0,0.5); | |
| 146 } | |
| 147 | |
| 148 /* CodeMirror specific styles. | |
| 149 * Best effort to match the existing theme, some of the colors | |
| 150 * are duplicated here to prevent weirdness in the main theme. */ | |
| 151 | |
| 152 .CodeMirror { /* Inherit platform specific font sizing and styles */ | |
| 153 font-family: inherit; | |
| 154 font-size: inherit; | |
| 155 background: transparent; | |
| 156 } | |
| 157 | |
| 158 .CodeMirror pre, | |
| 159 .cm-s-mozilla .cm-variable-2, | |
| 160 .cm-s-mozilla .cm-variable-3, | |
| 161 .cm-s-mozilla .cm-operator, | |
| 162 .cm-s-mozilla .cm-special { /* theme-body color */ | |
| 163 color: #a9bacb; | |
| 164 } | |
| 165 | |
| 166 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { | |
| 167 border-left: solid 1px #fff; | |
| 168 } | |
| 169 | |
| 170 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ | |
| 171 background: rgb(185, 215, 253); | |
| 172 } | |
| 173 | |
| 174 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ | |
| 175 background: rgb(176, 176, 176); | |
| 176 } | |
| 177 | |
| 178 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ | |
| 179 background: rgba(185, 215, 253, .15); | |
| 180 } | |
| 181 | |
| 182 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ | |
| 183 outline: solid 1px rgba(255, 255, 255, .25); | |
| 184 color: white; | |
| 185 } | |
| 186 | |
| 187 /* Highlight for a line that contains an error. */ | |
| 188 div.CodeMirror div.error-line { | |
| 189 background: rgba(255,0,0,0.2); | |
| 190 } | |
| 191 | |
| 192 /* Highlight for a line that represents a stack frame's location. */ | |
| 193 div.CodeMirror div.debug-line { | |
| 194 background: rgba(0,128,255,0.1); | |
| 195 box-shadow: | |
| 196 0 1px 0 0 rgba(0,128,255,0.4), | |
| 197 0 -1px 0 0 rgba(0,128,255,0.4); | |
| 198 } | |
| 199 | |
| 200 /* Generic highlighted text */ | |
| 201 div.CodeMirror span.marked-text { | |
| 202 background: rgba(255,255,0,0.2); | |
| 203 border: 1px dashed rgba(192,192,0,0.6); | |
| 204 -moz-margin-start: -1px; | |
| 205 -moz-margin-end: -1px; | |
| 206 } | |
| 207 | |
| 208 /* Highlight for evaluating current statement. */ | |
| 209 div.CodeMirror span.eval-text { | |
| 210 background-color: #556; | |
| 211 } | |
| 212 | |
| 213 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */ | |
| 214 color: #5f7387; | |
| 215 } | |
| 216 | |
| 217 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ | |
| 218 border-right-color: #343c45; | |
| 219 background-color: #181d20; | |
| 220 } | |
| 221 | |
| 222 .cm-s-markup-view pre { | |
| 223 line-height: 1.4em; | |
| 224 min-height: 1.4em; | |
| 225 } | |
| 226 | |
| 227 /* Twisty and checkbox controls */ | |
| 228 .theme-twisty, .theme-checkbox { | |
| 229 width: 14px; | |
| 230 height: 14px; | |
| 231 background-repeat: no-repeat; | |
| 232 background-image: url("chrome://browser/skin/devtools/controls.png"); | |
| 233 background-size: 56px 28px; | |
| 234 } | |
| 235 | |
| 236 .theme-twisty { | |
| 237 cursor: pointer; | |
| 238 background-position: -28px -14px; | |
| 239 } | |
| 240 | |
| 241 .theme-twisty:-moz-focusring { | |
| 242 outline-style: none; | |
| 243 } | |
| 244 | |
| 245 .theme-twisty[open] { | |
| 246 background-position: -42px -14px; | |
| 247 } | |
| 248 | |
| 249 .theme-checkbox { | |
| 250 display: inline-block; | |
| 251 border: 0; | |
| 252 padding: 0; | |
| 253 outline: none; | |
| 254 background-position: -28px 0; | |
| 255 } | |
| 256 | |
| 257 .theme-checkbox[checked] { | |
| 258 background-position: -42px 0; | |
| 259 } | |
| 260 | |
| 261 @media (min-resolution: 2dppx) { | |
| 262 .theme-twisty, .theme-checkbox { | |
| 263 background-image: url("chrome://browser/skin/devtools/controls@2x.png"); | |
| 264 } | |
| 265 } | |
| 266 | |
| 267 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ | |
| 268 | |
| 269 .theme-tooltip-panel .panel-arrowcontent { | |
| 270 padding: 5px; | |
| 271 background: rgba(19, 28, 38, .9); | |
| 272 border-radius: 5px; | |
| 273 box-shadow: none; | |
| 274 border: 3px solid #434850; | |
| 275 } | |
| 276 | |
| 277 /* Overring panel arrow images to fit with our light and dark themes */ | |
| 278 | |
| 279 .theme-tooltip-panel .panel-arrow[side="top"] { | |
| 280 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); | |
| 281 margin-bottom: -4px; | |
| 282 } | |
| 283 | |
| 284 .theme-tooltip-panel .panel-arrow[side="bottom"] { | |
| 285 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); | |
| 286 margin-top: -4px; | |
| 287 } | |
| 288 | |
| 289 .theme-tooltip-panel .panel-arrow[side="left"] { | |
| 290 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); | |
| 291 margin-right: -4px; | |
| 292 } | |
| 293 | |
| 294 .theme-tooltip-panel .panel-arrow[side="right"] { | |
| 295 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); | |
| 296 margin-left: -4px; | |
| 297 } | |
| 298 | |
| 299 @media (min-resolution: 2dppx) { | |
| 300 .theme-tooltip-panel .panel-arrow[side="top"], | |
| 301 .theme-tooltip-panel .panel-arrow[side="bottom"] { | |
| 302 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); | |
| 303 } | |
| 304 | |
| 305 .theme-tooltip-panel .panel-arrow[side="left"], | |
| 306 .theme-tooltip-panel .panel-arrow[side="right"] { | |
| 307 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png"); | |
| 308 } | |
| 309 } | |
| 310 | |
| 311 .theme-tooltip-panel .devtools-tooltip-simple-text { | |
| 312 color: white; | |
| 313 border-bottom: 1px solid #434850; | |
| 314 } | |
| 315 | |
| 316 .theme-tooltip-panel .devtools-tooltip-font-previewer-text { | |
| 317 color: white; | |
| 318 } | |
| 319 | |
| 320 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child { | |
| 321 border-bottom: 0; | |
| 322 } | |
| 323 | |
| 324 .devtools-horizontal-splitter { | |
| 325 border-bottom: 1px solid black; | |
| 326 } | |
| 327 | |
| 328 .devtools-side-splitter { | |
| 329 -moz-border-end: 1px solid black; | |
| 330 border-color: black; /* Needed for responsive container at low width. */ | |
| 331 } | |
| 332 | |
| 333 .devtools-textinput, | |
| 334 .devtools-searchinput { | |
| 335 background-color: rgba(24, 29, 32, 1); | |
| 336 color: rgba(184, 200, 217, 1); | |
| 337 } | |
| 338 | |
| 339 %include toolbars.inc.css |
