browser/themes/shared/devtools/light-theme.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

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

mercurial