The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/light-theme.css
browser/themes/shared/devtools/light-theme.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:855c87483278 |
|---|---|
| 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: #fcfcfc; /* Background - Editor */ | |
| 11 color: #18191a; | |
| 12 } | |
| 13 | |
| 14 .theme-sidebar { | |
| 15 background: #f7f7f7; /* Background - Sidebars */ | |
| 16 color: #18191a; | |
| 17 } | |
| 18 | |
| 19 ::-moz-selection { | |
| 20 background-color: #4c9ed9; | |
| 21 color: #f5f7fa; | |
| 22 } | |
| 23 | |
| 24 .theme-bg-darker { | |
| 25 background: #EFEFEF; | |
| 26 } | |
| 27 | |
| 28 .theme-selected { | |
| 29 background-color: #4c9ed9; | |
| 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: hsl(208,56%,40%); | |
| 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: hsl(208,56%,40%); | |
| 50 } | |
| 51 | |
| 52 .theme-comment, | |
| 53 .cm-s-mozilla .cm-meta, | |
| 54 .cm-s-mozilla .cm-hr, | |
| 55 .cm-s-mozilla .cm-comment, | |
| 56 .variable-or-property .token-undefined, | |
| 57 .variable-or-property .token-null { /* grey */ | |
| 58 color: hsl(90,2%,46%); | |
| 59 } | |
| 60 | |
| 61 .theme-gutter { | |
| 62 background-color: hsl(0,0%,90%); | |
| 63 color: #667380; | |
| 64 border-color: hsl(0,0%,65%); | |
| 65 } | |
| 66 | |
| 67 .theme-separator { /* grey */ | |
| 68 border-color: #cddae5; | |
| 69 } | |
| 70 | |
| 71 .theme-fg-color1, | |
| 72 .cm-s-mozilla .cm-number, | |
| 73 .variable-or-property .token-number, | |
| 74 .variable-or-property[return] > .title > .name, | |
| 75 .variable-or-property[scope] > .title > .name { /* green */ | |
| 76 color: hsl(72,100%,27%); | |
| 77 } | |
| 78 | |
| 79 .theme-fg-color2, | |
| 80 .cm-s-mozilla .cm-attribute, | |
| 81 .cm-s-mozilla .cm-builtin, | |
| 82 .cm-s-mozilla .cm-def, | |
| 83 .cm-s-mozilla .cm-property, | |
| 84 .cm-s-mozilla .cm-qualifier, | |
| 85 .variables-view-variable > .title > .name { /* blue */ | |
| 86 color: hsl(208,56%,40%); | |
| 87 } | |
| 88 | |
| 89 .theme-fg-color3, | |
| 90 .cm-s-mozilla .cm-variable, | |
| 91 .cm-s-mozilla .cm-tag, | |
| 92 .cm-s-mozilla .cm-header, | |
| 93 .variables-view-property > .title > .name { /* dark blue */ | |
| 94 color: hsl(208,81%,21%) | |
| 95 } | |
| 96 | |
| 97 .theme-fg-color4 { /* Orange */ | |
| 98 color: hsl(24,85%,39%); | |
| 99 } | |
| 100 | |
| 101 .theme-fg-color5, | |
| 102 .cm-s-mozilla .cm-bracket, | |
| 103 .cm-s-mozilla .cm-keyword { /* Yellow */ | |
| 104 color: #a18650; | |
| 105 } | |
| 106 | |
| 107 .theme-fg-color6, | |
| 108 .cm-s-mozilla .cm-string, | |
| 109 .cm-s-mozilla .cm-string-2, | |
| 110 .variable-or-property .token-string { /* Orange */ | |
| 111 color: hsl(24,85%,39%); | |
| 112 } | |
| 113 | |
| 114 .theme-fg-color7, | |
| 115 .cm-s-mozilla .cm-atom, | |
| 116 .cm-s-mozilla .cm-quote, | |
| 117 .cm-s-mozilla .cm-error, | |
| 118 .variable-or-property .token-boolean, | |
| 119 .variable-or-property .token-domnode, | |
| 120 .variable-or-property[exception] > .title > .name { /* Red */ | |
| 121 color: #bf5656; | |
| 122 } | |
| 123 | |
| 124 .variable-or-property .token-domnode { | |
| 125 font-weight: bold; | |
| 126 } | |
| 127 | |
| 128 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */ | |
| 129 color: black; | |
| 130 } | |
| 131 | |
| 132 .theme-toolbar, | |
| 133 .devtools-toolbar, | |
| 134 .devtools-sidebar-tabs > tabs, | |
| 135 .CodeMirror-dialog { /* General toolbar styling */ | |
| 136 color: #585959; | |
| 137 background-color: #f0f1f2; | |
| 138 border-color: #aaa; | |
| 139 } | |
| 140 | |
| 141 .ruleview-colorswatch, | |
| 142 .computedview-colorswatch, | |
| 143 .markupview-colorswatch { | |
| 144 box-shadow: 0 0 0 1px #EFEFEF; | |
| 145 } | |
| 146 | |
| 147 /* CodeMirror specific styles. | |
| 148 * Best effort to match the existing theme, some of the colors | |
| 149 * are duplicated here to prevent weirdness in the main theme. */ | |
| 150 | |
| 151 .CodeMirror { /* Inherit platform specific font sizing and styles */ | |
| 152 font-family: inherit; | |
| 153 font-size: inherit; | |
| 154 background: transparent; | |
| 155 } | |
| 156 | |
| 157 .CodeMirror pre, | |
| 158 .cm-s-mozilla .cm-variable-2, | |
| 159 .cm-s-mozilla .cm-variable-3, | |
| 160 .cm-s-mozilla .cm-operator, | |
| 161 .cm-s-mozilla .cm-special { /* theme-body color */ | |
| 162 color: black; | |
| 163 } | |
| 164 | |
| 165 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { | |
| 166 border-left: solid 1px black; | |
| 167 } | |
| 168 | |
| 169 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ | |
| 170 background: rgb(185, 215, 253); | |
| 171 } | |
| 172 | |
| 173 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ | |
| 174 background: rgb(176, 176, 176); | |
| 175 } | |
| 176 | |
| 177 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ | |
| 178 background: rgba(185, 215, 253, .35); | |
| 179 } | |
| 180 | |
| 181 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ | |
| 182 outline: solid 1px rgba(0, 0, 0, .25); | |
| 183 color: black; | |
| 184 } | |
| 185 | |
| 186 /* Highlight for a line that contains an error. */ | |
| 187 div.CodeMirror div.error-line { | |
| 188 background: rgba(255,0,0,0.2); | |
| 189 } | |
| 190 | |
| 191 /* Highlight for a line that represents a stack frame's location. */ | |
| 192 div.CodeMirror div.debug-line { | |
| 193 background: rgba(0,128,255,0.1); | |
| 194 box-shadow: | |
| 195 0 1px 0 0 rgba(0,128,255,0.4), | |
| 196 0 -1px 0 0 rgba(0,128,255,0.4); | |
| 197 } | |
| 198 | |
| 199 /* Generic highlighted text */ | |
| 200 div.CodeMirror span.marked-text { | |
| 201 background: rgba(255,255,0,0.2); | |
| 202 border: 1px dashed rgba(192,192,0,0.6); | |
| 203 -moz-margin-start: -1px; | |
| 204 -moz-margin-end: -1px; | |
| 205 } | |
| 206 | |
| 207 /* Highlight for evaluating current statement. */ | |
| 208 div.CodeMirror span.eval-text { | |
| 209 background-color: #ccd; | |
| 210 } | |
| 211 | |
| 212 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */ | |
| 213 color: #667380; | |
| 214 } | |
| 215 | |
| 216 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ | |
| 217 border-right-color: #a6a6a6; | |
| 218 background-color: #f7f7f7; | |
| 219 } | |
| 220 | |
| 221 .cm-s-markup-view pre { | |
| 222 line-height: 1.4em; | |
| 223 min-height: 1.4em; | |
| 224 } | |
| 225 | |
| 226 /* Twisty and checkbox controls */ | |
| 227 | |
| 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: 0 -14px; | |
| 239 } | |
| 240 | |
| 241 .theme-twisty:-moz-focusring { | |
| 242 outline-style: none; | |
| 243 } | |
| 244 | |
| 245 .theme-twisty[open] { | |
| 246 background-position: -14px -14px; | |
| 247 } | |
| 248 | |
| 249 /* Use white twisty when next to a selected item in markup view */ | |
| 250 .theme-selected ~ .theme-twisty { | |
| 251 background-position: -28px -14px; | |
| 252 } | |
| 253 | |
| 254 .theme-selected ~ .theme-twisty[open] { | |
| 255 background-position: -42px -14px; | |
| 256 } | |
| 257 | |
| 258 .theme-checkbox { | |
| 259 display: inline-block; | |
| 260 border: 0; | |
| 261 padding: 0; | |
| 262 outline: none; | |
| 263 background-position: 0 0; | |
| 264 } | |
| 265 | |
| 266 .theme-checkbox[checked] { | |
| 267 background-position: -14px 0; | |
| 268 } | |
| 269 | |
| 270 @media (min-resolution: 2dppx) { | |
| 271 .theme-twisty, .theme-checkbox { | |
| 272 background-image: url("chrome://browser/skin/devtools/controls@2x.png"); | |
| 273 } | |
| 274 } | |
| 275 | |
| 276 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ | |
| 277 | |
| 278 .theme-tooltip-panel .panel-arrowcontent { | |
| 279 padding: 4px; | |
| 280 background: rgba(255, 255, 255, .9); | |
| 281 border-radius: 5px; | |
| 282 box-shadow: none; | |
| 283 border: 3px solid #d9e1e8; | |
| 284 } | |
| 285 | |
| 286 /* Overring panel arrow images to fit with our light and dark themes */ | |
| 287 | |
| 288 .theme-tooltip-panel .panel-arrow[side="top"] { | |
| 289 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); | |
| 290 margin-bottom: -4px; | |
| 291 } | |
| 292 | |
| 293 .theme-tooltip-panel .panel-arrow[side="bottom"] { | |
| 294 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); | |
| 295 margin-top: -4px; | |
| 296 } | |
| 297 | |
| 298 .theme-tooltip-panel .panel-arrow[side="left"] { | |
| 299 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); | |
| 300 margin-right: -4px; | |
| 301 } | |
| 302 | |
| 303 .theme-tooltip-panel .panel-arrow[side="right"] { | |
| 304 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); | |
| 305 margin-left: -4px; | |
| 306 } | |
| 307 | |
| 308 @media (min-resolution: 2dppx) { | |
| 309 .theme-tooltip-panel .panel-arrow[side="top"], | |
| 310 .theme-tooltip-panel .panel-arrow[side="bottom"] { | |
| 311 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png"); | |
| 312 } | |
| 313 | |
| 314 .theme-tooltip-panel .panel-arrow[side="left"], | |
| 315 .theme-tooltip-panel .panel-arrow[side="right"] { | |
| 316 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light@2x.png"); | |
| 317 } | |
| 318 } | |
| 319 | |
| 320 .theme-tooltip-panel .devtools-tooltip-simple-text { | |
| 321 color: black; | |
| 322 border-bottom: 1px solid #d9e1e8; | |
| 323 } | |
| 324 | |
| 325 .theme-tooltip-panel .devtools-tooltip-font-previewer-text { | |
| 326 color: black; | |
| 327 } | |
| 328 | |
| 329 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child { | |
| 330 border-bottom: 0; | |
| 331 } | |
| 332 | |
| 333 .devtools-horizontal-splitter { | |
| 334 border-bottom: 1px solid #aaa; | |
| 335 } | |
| 336 | |
| 337 .devtools-side-splitter { | |
| 338 -moz-border-end: 1px solid #aaa; | |
| 339 border-color: #aaa; /* Needed for responsive container at low width. */ | |
| 340 } | |
| 341 | |
| 342 %include toolbars.inc.css |
