first part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[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: #000000;
72   color: var(--theme-content-color3);
73   border-color: #9C9CFF;
74 }
75
76 .theme-separator { /* original: grey */
77   border-color: #8050B0;
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 .variable-or-property[safe-getter] > .title > .name {
122   color: var(--theme-highlight-pink);
123 }
124
125 .CodeMirror-Tern-completion-array:before {
126   color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
127 }
128
129 .theme-fg-color4 {
130   color: var(--theme-highlight-purple);
131 }
132
133 .theme-fg-color5,
134 .cm-s-mozilla .cm-keyword {
135   color: var(--theme-highlight-lightorange);
136 }
137
138 .theme-fg-color6,
139 .cm-s-mozilla .cm-string,
140 .cm-s-mozilla .cm-string-2,
141 .variable-or-property .token-string,
142 .CodeMirror-Tern-farg {
143   color: var(--theme-highlight-pink); /* -orange? */
144 }
145
146 .CodeMirror-Tern-completion-string:before,
147 .CodeMirror-Tern-completion-fn:before {
148   background-color: #E7ADE7;
149 }
150
151 .theme-fg-color7,
152 .cm-s-mozilla .cm-atom,
153 .cm-s-mozilla .cm-quote,
154 .cm-s-mozilla .cm-error,
155 .variable-or-property .token-boolean,
156 .variable-or-property .token-domnode,
157 .variable-or-property[exception] > .title > .name {
158   color: var(--theme-highlight-red);
159 }
160
161 .CodeMirror-Tern-completion-bool:before {
162   background-color: #FF0000;
163 }
164
165 .variable-or-property .token-domnode {
166   font-weight: bold;
167 }
168
169 .theme-toolbar,
170 .devtools-toolbar,
171 .devtools-sidebar-tabs tabs,
172 .devtools-sidebar-alltabs,
173 .CodeMirror-dialog { /* General toolbar styling */
174 /*  color: var(--theme-body-color-alt);
175   background-color: var(--theme-toolbar-background);*/
176 }
177
178
179 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
180   color: #FFCF00;
181 }
182
183 .ruleview-colorswatch,
184 .computedview-colorswatch,
185 .ruleview-bezierswatch {
186 /*  box-shadow: 0 0 0 1px #818181; */
187 }
188
189 .variables-view-scope:focus > .title,
190 .variable-or-property:focus > .title {
191   background-color: #008484; /* fg-color2 */
192   color: #000000;
193 }
194
195 /* CodeMirror specific styles.
196  * Best effort to match the existing theme, some of the colors
197  * are duplicated here to prevent weirdness in the main theme. */
198
199 .CodeMirror,
200 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
201   font-family: inherit;
202   font-size: inherit;
203   background: transparent;
204 }
205
206 .CodeMirror pre,
207 .cm-s-mozilla .cm-variable-2,
208 .cm-s-mozilla .cm-variable-3,
209 .cm-s-mozilla .cm-operator,
210 .cm-s-mozilla .cm-special {
211   color: var(--theme-content-color1);
212 }
213
214 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
215   border-left: solid 1px #FF9F00;
216 }
217
218 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
219   background: #008484;
220   color: #FFCF00;
221 }
222
223 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
224   background: #008484;
225   color: #000000;
226 }
227
228 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
229   background: rgba(0, 132, 132, .25);
230 }
231
232 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
233   outline: solid 1px rgba(0, 132, 132, .4);
234   color: #FFCF00;
235 }
236
237 /* Highlight for a line that contains an error. */
238 div.CodeMirror div.error-line {
239   background: rgba(255, 0, 0, 0.2);
240 }
241
242 /* Highlight for a line that represents a stack frame's location. */
243 div.CodeMirror div.debug-line {
244   background: rgba(156, 156, 255, 0.2);
245 }
246
247 /* Generic highlighted text */
248 div.CodeMirror span.marked-text {
249   background: rgba(255,207,0,0.2);
250   border: 1px dashed rgba(156, 156, 255, 0.6);
251   -moz-margin-start: -1px;
252   -moz-margin-end: -1px;
253 }
254
255 /* Highlight for evaluating current statement. */
256 div.CodeMirror span.eval-text {
257   background-color: #403800;
258 }
259
260 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
261   color: var(--theme-content-color2);
262 }
263
264 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
265   border-right-color: var(--theme-contrast-border);
266   background-color: var(--theme-contrast-background);
267 }
268
269 .cm-s-markup-view pre {
270   line-height: 1.4em;
271   min-height: 1.4em;
272 }
273
274 /* Twisty and checkbox controls */
275 .theme-twisty, .theme-checkbox {
276   width: 14px;
277   height: 14px;
278   background-repeat: no-repeat;
279   background-image: url("chrome://devtools/skin/controls.png");
280   background-size: 28px 28px;
281 }
282
283 .theme-twisty {
284   cursor: pointer;
285   background-position: -0px -14px;
286 }
287
288 .theme-twisty:-moz-focusring {
289   outline-style: none;
290 }
291
292 .theme-twisty[open] {
293   background-position: -14px -14px;
294 }
295
296 .theme-twisty[invisible] {
297   visibility: hidden;
298 }
299
300 .theme-checkbox {
301   display: inline-block;
302   border: 0;
303   padding: 0;
304   outline: none;
305   background-position: 0 0;
306 }
307
308 .theme-checkbox[checked] {
309   background-position: -14px 0;
310 }
311
312 @media (min-resolution: 1.1dppx) {
313   .theme-twisty, .theme-checkbox {
314     background-image: url("chrome://devtools/skin/controls@2x.png");
315   }
316 }
317
318 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
319
320 .theme-tooltip-panel .panel-arrowcontent {
321 /*  padding: 5px; */
322   background: rgba(0, 0, 0, .9);
323 /*  border-radius: 5px;
324   box-shadow: none;
325   border: 3px solid #9C9CFF; */
326 }
327
328 /* Overring panel arrow images to fit with our light and dark themes */
329 /*
330 .theme-tooltip-panel .panel-arrow[side="top"] {
331   list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
332   margin-bottom: -4px;
333 }
334
335 .theme-tooltip-panel .panel-arrow[side="bottom"] {
336   list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
337   margin-top: -4px;
338 }
339
340 .theme-tooltip-panel .panel-arrow[side="left"] {
341   list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
342   margin-right: -4px;
343 }
344
345 .theme-tooltip-panel .panel-arrow[side="right"] {
346   list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
347   margin-left: -4px;
348 }
349
350 @media (min-resolution: 1.1dppx) {
351   .theme-tooltip-panel .panel-arrow[side="top"],
352   .theme-tooltip-panel .panel-arrow[side="bottom"] {
353     list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
354   }
355
356   .theme-tooltip-panel .panel-arrow[side="left"],
357   .theme-tooltip-panel .panel-arrow[side="right"] {
358     list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
359   }
360 }
361 */
362 .theme-tooltip-panel .devtools-tooltip-simple-text {
363 /*  color: white; */
364   border-bottom: 1px solid #A09090;
365 }
366
367 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
368  border-bottom: 0;
369 }
370
371 .devtools-textinput,
372 .devtools-searchinput {
373   background-color: #000000;
374   color: #E7ADE7;
375   border: 1px solid #9C9CFF;
376 }
377
378 .devtools-textinput:focus,
379 .devtools-searchinput:focus {
380   border-color: #008484;
381 }
382
383 .CodeMirror-Tern-fname {
384   color: #A09090;
385 }
386
387 .CodeMirror-hints,
388 .CodeMirror-Tern-tooltip {
389   background-color: #000000;
390   color: var(--theme-body-color);
391 }