browser/themes/shared/devtools/dark-theme.css@6474c204b198
browser/themes/shared/devtools/dark-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: #14171a;
11 color: #a9bacb;
12 }
14 .theme-sidebar {
15 background: #181d20;
16 color: #a9bacb;
17 }
19 ::-moz-selection {
20 background-color: #1d4f73;
21 color: #f5f7fa;
22 }
24 .theme-bg-darker {
25 background-color: rgba(0,0,0,0.5);
26 }
28 .theme-selected {
29 background-color: #1d4f73;
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: #3689b2;
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: #3689b2;
50 }
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 }
62 .theme-gutter {
63 background-color: #0f171f;
64 color: #667380;
65 border-color: #303b47;
66 }
68 .theme-separator { /* grey */
69 border-color: #303b47;
70 }
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 }
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 }
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 }
98 .theme-fg-color4 { /* purple/violet */
99 color: #6270b2;
100 }
102 .theme-fg-color5,
103 .cm-s-mozilla .cm-bracket,
104 .cm-s-mozilla .cm-keyword { /* Yellow */
105 color: #a18650;
106 }
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 }
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 }
125 .variable-or-property .token-domnode {
126 font-weight: bold;
127 }
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 }
138 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
139 color: black;
140 }
142 .ruleview-colorswatch,
143 .computedview-colorswatch,
144 .markupview-colorswatch {
145 box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
146 }
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. */
152 .CodeMirror { /* Inherit platform specific font sizing and styles */
153 font-family: inherit;
154 font-size: inherit;
155 background: transparent;
156 }
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 }
166 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
167 border-left: solid 1px #fff;
168 }
170 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
171 background: rgb(185, 215, 253);
172 }
174 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
175 background: rgb(176, 176, 176);
176 }
178 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
179 background: rgba(185, 215, 253, .15);
180 }
182 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
183 outline: solid 1px rgba(255, 255, 255, .25);
184 color: white;
185 }
187 /* Highlight for a line that contains an error. */
188 div.CodeMirror div.error-line {
189 background: rgba(255,0,0,0.2);
190 }
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 }
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 }
208 /* Highlight for evaluating current statement. */
209 div.CodeMirror span.eval-text {
210 background-color: #556;
211 }
213 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
214 color: #5f7387;
215 }
217 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
218 border-right-color: #343c45;
219 background-color: #181d20;
220 }
222 .cm-s-markup-view pre {
223 line-height: 1.4em;
224 min-height: 1.4em;
225 }
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 }
236 .theme-twisty {
237 cursor: pointer;
238 background-position: -28px -14px;
239 }
241 .theme-twisty:-moz-focusring {
242 outline-style: none;
243 }
245 .theme-twisty[open] {
246 background-position: -42px -14px;
247 }
249 .theme-checkbox {
250 display: inline-block;
251 border: 0;
252 padding: 0;
253 outline: none;
254 background-position: -28px 0;
255 }
257 .theme-checkbox[checked] {
258 background-position: -42px 0;
259 }
261 @media (min-resolution: 2dppx) {
262 .theme-twisty, .theme-checkbox {
263 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
264 }
265 }
267 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
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 }
277 /* Overring panel arrow images to fit with our light and dark themes */
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 }
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 }
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 }
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 }
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 }
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 }
311 .theme-tooltip-panel .devtools-tooltip-simple-text {
312 color: white;
313 border-bottom: 1px solid #434850;
314 }
316 .theme-tooltip-panel .devtools-tooltip-font-previewer-text {
317 color: white;
318 }
320 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
321 border-bottom: 0;
322 }
324 .devtools-horizontal-splitter {
325 border-bottom: 1px solid black;
326 }
328 .devtools-side-splitter {
329 -moz-border-end: 1px solid black;
330 border-color: black; /* Needed for responsive container at low width. */
331 }
333 .devtools-textinput,
334 .devtools-searchinput {
335 background-color: rgba(24, 29, 32, 1);
336 color: rgba(184, 200, 217, 1);
337 }
339 %include toolbars.inc.css
