browser/themes/shared/devtools/light-theme.css@6474c204b198
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.
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/. */
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 }
14 .theme-sidebar {
15 background: #f7f7f7; /* Background - Sidebars */
16 color: #18191a;
17 }
19 ::-moz-selection {
20 background-color: #4c9ed9;
21 color: #f5f7fa;
22 }
24 .theme-bg-darker {
25 background: #EFEFEF;
26 }
28 .theme-selected {
29 background-color: #4c9ed9;
30 color: #f5f7fa; /* Light foreground text */
31 }
33 .theme-bg-contrast,
34 .variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
35 background: #a18650;
36 }
38 .theme-link,
39 .cm-s-mozilla .cm-link { /* blue */
40 color: hsl(208,56%,40%);
41 }
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 }
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 }
61 .theme-gutter {
62 background-color: hsl(0,0%,90%);
63 color: #667380;
64 border-color: hsl(0,0%,65%);
65 }
67 .theme-separator { /* grey */
68 border-color: #cddae5;
69 }
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 }
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 }
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 }
97 .theme-fg-color4 { /* Orange */
98 color: hsl(24,85%,39%);
99 }
101 .theme-fg-color5,
102 .cm-s-mozilla .cm-bracket,
103 .cm-s-mozilla .cm-keyword { /* Yellow */
104 color: #a18650;
105 }
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 }
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 }
124 .variable-or-property .token-domnode {
125 font-weight: bold;
126 }
128 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
129 color: black;
130 }
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 }
141 .ruleview-colorswatch,
142 .computedview-colorswatch,
143 .markupview-colorswatch {
144 box-shadow: 0 0 0 1px #EFEFEF;
145 }
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. */
151 .CodeMirror { /* Inherit platform specific font sizing and styles */
152 font-family: inherit;
153 font-size: inherit;
154 background: transparent;
155 }
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 }
165 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
166 border-left: solid 1px black;
167 }
169 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
170 background: rgb(185, 215, 253);
171 }
173 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
174 background: rgb(176, 176, 176);
175 }
177 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
178 background: rgba(185, 215, 253, .35);
179 }
181 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
182 outline: solid 1px rgba(0, 0, 0, .25);
183 color: black;
184 }
186 /* Highlight for a line that contains an error. */
187 div.CodeMirror div.error-line {
188 background: rgba(255,0,0,0.2);
189 }
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 }
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 }
207 /* Highlight for evaluating current statement. */
208 div.CodeMirror span.eval-text {
209 background-color: #ccd;
210 }
212 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
213 color: #667380;
214 }
216 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
217 border-right-color: #a6a6a6;
218 background-color: #f7f7f7;
219 }
221 .cm-s-markup-view pre {
222 line-height: 1.4em;
223 min-height: 1.4em;
224 }
226 /* 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 }
236 .theme-twisty {
237 cursor: pointer;
238 background-position: 0 -14px;
239 }
241 .theme-twisty:-moz-focusring {
242 outline-style: none;
243 }
245 .theme-twisty[open] {
246 background-position: -14px -14px;
247 }
249 /* Use white twisty when next to a selected item in markup view */
250 .theme-selected ~ .theme-twisty {
251 background-position: -28px -14px;
252 }
254 .theme-selected ~ .theme-twisty[open] {
255 background-position: -42px -14px;
256 }
258 .theme-checkbox {
259 display: inline-block;
260 border: 0;
261 padding: 0;
262 outline: none;
263 background-position: 0 0;
264 }
266 .theme-checkbox[checked] {
267 background-position: -14px 0;
268 }
270 @media (min-resolution: 2dppx) {
271 .theme-twisty, .theme-checkbox {
272 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
273 }
274 }
276 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
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 }
286 /* Overring panel arrow images to fit with our light and dark themes */
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 }
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 }
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 }
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 }
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 }
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 }
320 .theme-tooltip-panel .devtools-tooltip-simple-text {
321 color: black;
322 border-bottom: 1px solid #d9e1e8;
323 }
325 .theme-tooltip-panel .devtools-tooltip-font-previewer-text {
326 color: black;
327 }
329 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
330 border-bottom: 0;
331 }
333 .devtools-horizontal-splitter {
334 border-bottom: 1px solid #aaa;
335 }
337 .devtools-side-splitter {
338 -moz-border-end: 1px solid #aaa;
339 border-color: #aaa; /* Needed for responsive container at low width. */
340 }
342 %include toolbars.inc.css
