some more devtool synching, to round things up
[themes.git] / LCARStrek / devtools / dark-theme.css
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 @import url(variables.css);
7 @import url(common.css);
8 @import url(toolbars.css);
9
10 body, html {
11   padding: 0;
12   margin: 0;
13 }
14
15 .theme-body {
16   background: var(--theme-body-background);
17   color: var(--theme-body-color);
18 }
19
20 .theme-sidebar {
21   background: var(--theme-sidebar-background);
22   color: var(--theme-content-color1);
23 }
24
25 ::-moz-selection {
26   background-color: var(--theme-selection-background);
27   color: var(--theme-selection-color);
28 }
29
30 .theme-bg-darker {
31   background: var(--theme-selection-background-semitransparent);
32 }
33
34 .theme-selected,
35 .CodeMirror-hint-active {
36   background-color: var(--theme-selection-background2);
37   color: var(--theme-selection-color2);
38 }
39
40 .theme-bg-contrast,
41 .variable-or-property:not([overridden])[changed] {
42   background: var(--theme-contrast-background);
43 }
44
45 .theme-link,
46 .cm-s-mozilla .cm-link { /* original: blue */
47   color: var(--theme-text-blue);
48 }
49
50 /*
51  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
52  * failures in debug builds.
53  */
54 .theme-link:visited,
55 .cm-s-mozilla .cm-link:visited,
56 .CodeMirror-Tern-type {
57   color: var(--theme-text-blue);
58 }
59
60 .theme-comment,
61 .cm-s-mozilla .cm-meta,
62 .cm-s-mozilla .cm-hr,
63 .cm-s-mozilla .cm-comment,
64 .variable-or-property .token-undefined,
65 .variable-or-property .token-null,
66 .CodeMirror-Tern-completion-unknown:before {
67   color: var(--theme-comment);
68 }
69
70 .theme-gutter {
71   background-color: var(--theme-tab-toolbar-background);
72   color: var(--theme-content-color3);
73   border-color: var(--theme-splitter-color);
74 }
75
76 .theme-separator {
77   border-color: var(--theme-splitter-color);
78 }
79
80 .theme-fg-color1,
81 .cm-s-mozilla .cm-number,
82 .variable-or-property .token-number,
83 .variable-or-property[return] > .title > .name,
84 .variable-or-property[scope] > .title > .name {
85   color: var(--theme-highlight-green);
86 }
87
88 .CodeMirror-Tern-completion-number:before {
89   background-color: #008484;
90 }
91
92 .theme-fg-color2,
93 .cm-s-mozilla .cm-attribute,
94 .cm-s-mozilla .cm-variable,
95 .cm-s-mozilla .cm-def,
96 .cm-s-mozilla .cm-property,
97 .cm-s-mozilla .cm-qualifier,
98 .variables-view-variable > .title > .name {
99   color: var(--theme-highlight-blue);
100 }
101
102 .CodeMirror-Tern-completion-object:before {
103   background-color: #9C9CFF;
104 }
105
106 .cm-s-mozilla .cm-unused-line {
107   text-decoration: line-through;
108   text-decoration-color: #8050B0;
109 }
110
111 .cm-s-mozilla .cm-executed-line {
112   background-color: #404000;
113 }
114
115 .theme-fg-color3,
116 .cm-s-mozilla .cm-builtin,
117 .cm-s-mozilla .cm-tag,
118 .cm-s-mozilla .cm-header,
119 .cm-s-mozilla .cm-bracket,
120 .variables-view-property > .title > .name {
121   color: var(--theme-highlight-pink);
122 }
123
124 .CodeMirror-Tern-completion-array:before {
125   color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
126 }
127
128 .theme-fg-color4 {
129   color: var(--theme-highlight-purple);
130 }
131
132 .theme-fg-color5,
133 .cm-s-mozilla .cm-keyword {
134   color: var(--theme-highlight-lightorange);
135 }
136
137 .theme-fg-color6,
138 .cm-s-mozilla .cm-string,
139 .cm-s-mozilla .cm-string-2,
140 .variable-or-property .token-string,
141 .CodeMirror-Tern-farg {
142   color: var(--theme-highlight-pink); /* -orange? */
143 }
144
145 .CodeMirror-Tern-completion-string:before,
146 .CodeMirror-Tern-completion-fn:before {
147   background-color: #E7ADE7;
148 }
149
150 .theme-fg-color7,
151 .cm-s-mozilla .cm-atom,
152 .cm-s-mozilla .cm-quote,
153 .cm-s-mozilla .cm-error,
154 .variable-or-property .token-boolean,
155 .variable-or-property .token-domnode,
156 .variable-or-property[exception] > .title > .name {
157   color: var(--theme-highlight-red);
158 }
159
160 .CodeMirror-Tern-completion-bool:before {
161   background-color: #FF0000;
162 }
163
164 .variable-or-property .token-domnode {
165   font-weight: bold;
166 }
167
168 .theme-toolbar,
169 .devtools-toolbar,
170 .devtools-sidebar-tabs tabs,
171 .devtools-sidebar-alltabs,
172 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
173 /*  color: var(--theme-body-color-alt);
174   background-color: var(--theme-toolbar-background);*/
175 }
176
177 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
178   color: #FFCF00;
179 }
180
181 .ruleview-swatch,
182 .computedview-colorswatch {
183 /*  box-shadow: 0 0 0 1px #818181; */
184 }
185
186 .variables-view-scope:focus > .title,
187 .variable-or-property:focus > .title {
188   background-color: #008484; /* fg-color2 */
189   color: #000000;
190 }
191
192 /* CodeMirror specific styles.
193  * Best effort to match the existing theme, some of the colors
194  * are duplicated here to prevent weirdness in the main theme. */
195
196 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
197   font-family: inherit;
198   font-size: inherit;
199   background: transparent;
200 }
201
202 .CodeMirror.cm-s-mozilla pre,
203 .cm-s-mozilla .cm-variable-2,
204 .cm-s-mozilla .cm-variable-3,
205 .cm-s-mozilla .cm-operator,
206 .cm-s-mozilla .cm-special {
207   color: var(--theme-content-color1);
208 }
209
210 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
211   border-left: solid 1px #FF9F00;
212 }
213
214 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
215   background: #008484;
216   color: #FFCF00;
217 }
218
219 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
220   background: #008484;
221   color: #000000;
222 }
223
224 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
225   background: rgba(0, 132, 132, .25);
226 }
227
228 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
229   outline: solid 1px rgba(0, 132, 132, .4);
230   color: #FFCF00;
231 }
232
233 /* Highlight for a line that contains an error. */
234 div.CodeMirror div.error-line {
235   background: rgba(255, 0, 0, 0.2);
236 }
237
238 /* Generic highlighted text */
239 div.CodeMirror span.marked-text {
240   background: rgba(255,207,0,0.2);
241   border: 1px dashed rgba(156, 156, 255, 0.6);
242   -moz-margin-start: -1px;
243   -moz-margin-end: -1px;
244 }
245
246 /* Highlight for evaluating current statement. */
247 div.CodeMirror span.eval-text {
248   background-color: #403800;
249 }
250
251 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
252   color: var(--theme-content-color2);
253 }
254
255 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
256   border-right-color: var(--theme-contrast-border);
257   background-color: var(--theme-contrast-background);
258 }
259
260 .cm-s-markup-view pre {
261   line-height: 1.4em;
262   min-height: 1.4em;
263 }
264
265 /* Twisty and checkbox controls */
266 .theme-twisty, .theme-checkbox {
267   width: 14px;
268   height: 14px;
269   background-repeat: no-repeat;
270   background-image: url("chrome://devtools/skin/images/controls.png");
271   background-size: 28px 28px;
272 }
273
274 .theme-twisty {
275   cursor: pointer;
276   background-position: -0px -14px;
277 }
278
279 .theme-twisty:-moz-focusring {
280   outline-style: none;
281 }
282
283 .theme-twisty[open] {
284   background-position: -14px -14px;
285 }
286
287 .theme-twisty[invisible] {
288   visibility: hidden;
289 }
290
291 .theme-checkbox {
292   display: inline-block;
293   border: 0;
294   padding: 0;
295   outline: none;
296   background-position: 0 0;
297 }
298
299 .theme-checkbox[checked] {
300   background-position: -14px 0;
301 }
302
303 @media (min-resolution: 1.1dppx) {
304   .theme-twisty, .theme-checkbox {
305     background-image: url("chrome://devtools/skin/images/controls@2x.png");
306   }
307 }
308
309 /* XUL panel styling (see devtools/client/shared/widgets/Tooltip.js) */
310
311 .theme-tooltip-panel .panel-arrowcontent {
312 /*  padding: 5px; */
313   background: rgba(0, 0, 0, .9);
314 /*  border-radius: 5px;
315   box-shadow: none;
316   border: 3px solid #9C9CFF; */
317 }
318
319 /* Overring panel arrow images to fit with our light and dark themes */
320 /*
321 .theme-tooltip-panel .panel-arrow {
322   --arrow-margin: -4px;
323 }
324
325 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
326   --arrow-margin: -7px;
327 }
328
329 .theme-tooltip-panel .panel-arrow[side="top"],
330 .theme-tooltip-panel .panel-arrow[side="bottom"] {
331   list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
332   / !important is needed to override the popup.css rules in toolkit/themes /
333   width: 39px !important;
334   height: 16px !important;
335 }
336
337 .theme-tooltip-panel .panel-arrow[side="left"],
338 .theme-tooltip-panel .panel-arrow[side="right"] {
339   list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
340   / !important is needed to override the popup.css rules in toolkit/themes /
341   width: 16px !important;
342   height: 39px !important;
343 }
344
345 .theme-tooltip-panel .panel-arrow[side="top"] {
346   margin-bottom: var(--arrow-margin);
347 }
348
349 .theme-tooltip-panel .panel-arrow[side="bottom"] {
350   margin-top: var(--arrow-margin);
351 }
352
353 .theme-tooltip-panel .panel-arrow[side="left"] {
354   margin-right: var(--arrow-margin);
355 }
356
357 .theme-tooltip-panel .panel-arrow[side="right"] {
358   margin-left: var(--arrow-margin);
359 }
360
361 @media (min-resolution: 1.1dppx) {
362   .theme-tooltip-panel .panel-arrow[side="top"],
363   .theme-tooltip-panel .panel-arrow[side="bottom"] {
364     list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
365   }
366
367   .theme-tooltip-panel .panel-arrow[side="left"],
368   .theme-tooltip-panel .panel-arrow[side="right"] {
369     list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
370   }
371 }
372 */
373 .theme-tooltip-panel .devtools-tooltip-simple-text {
374 /*  color: white; */
375   border-bottom: 1px solid #A09090;
376 }
377
378 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
379   border-bottom: 0;
380 }
381
382 .devtools-textinput,
383 .devtools-searchinput {
384   background-color: #000000;
385   color: #E7ADE7;
386   border: 1px solid #9C9CFF;
387 }
388
389 .devtools-textinput:focus,
390 .devtools-searchinput:focus {
391   border-color: #008484;
392 }
393
394 .CodeMirror-Tern-fname {
395   color: #A09090;
396 }
397
398 .CodeMirror-hints,
399 .CodeMirror-Tern-tooltip {
400   background-color: #000000;
401   color: var(--theme-body-color);
402 }