first part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[themes.git] / LCARStrek / devtools / dark-theme.css
CommitLineData
2efcd25d
RK
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
dadba0f2 6@import url(variables.css);
873a46f8 7@import url(common.css);
dadba0f2 8@import url(toolbars.css);
dc9d5d64
RK
9
10body, html {
11 padding: 0;
12 margin: 0;
de5e780d
RK
13}
14
2efcd25d 15.theme-body {
de5e780d
RK
16 background: var(--theme-body-background);
17 color: var(--theme-body-color);
2efcd25d
RK
18}
19
45dc7657 20.theme-sidebar {
de5e780d
RK
21 background: var(--theme-sidebar-background);
22 color: var(--theme-content-color1);
45dc7657
RK
23}
24
dfa34f73 25::-moz-selection {
de5e780d
RK
26 background-color: var(--theme-selection-background);
27 color: var(--theme-selection-color);
dfa34f73
RK
28}
29
649b5d38 30.theme-bg-darker {
8c6555e2 31 background: var(--theme-selection-background-semitransparent);
2efcd25d
RK
32}
33
ed88669c
RK
34.theme-selected,
35.CodeMirror-hint-active {
de5e780d
RK
36 background-color: var(--theme-selection-background2);
37 color: var(--theme-selection-color2);
2efcd25d
RK
38}
39
de57e474 40.theme-bg-contrast,
de5e780d
RK
41.variable-or-property:not([overridden])[changed] {
42 background: var(--theme-contrast-background);
3a0880a9
RK
43}
44
7600e0b1
RK
45.theme-link,
46.cm-s-mozilla .cm-link { /* original: blue */
de5e780d 47 color: var(--theme-text-blue);
2efcd25d
RK
48}
49
6568957a
RK
50/*
51 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
52 * failures in debug builds.
53 */
54.theme-link:visited,
ed88669c 55.cm-s-mozilla .cm-link:visited,
de5e780d
RK
56.CodeMirror-Tern-type {
57 color: var(--theme-text-blue);
6568957a
RK
58}
59
7600e0b1
RK
60.theme-comment,
61.cm-s-mozilla .cm-meta,
62.cm-s-mozilla .cm-hr,
de57e474
RK
63.cm-s-mozilla .cm-comment,
64.variable-or-property .token-undefined,
de5e780d 65.variable-or-property .token-null,
ed88669c 66.CodeMirror-Tern-completion-unknown:before {
de5e780d 67 color: var(--theme-comment);
ed88669c
RK
68}
69
2efcd25d
RK
70.theme-gutter {
71 background-color: #000000;
de5e780d 72 color: var(--theme-content-color3);
2efcd25d
RK
73 border-color: #9C9CFF;
74}
75
76.theme-separator { /* original: grey */
77 border-color: #8050B0;
78}
79
7600e0b1 80.theme-fg-color1,
de57e474
RK
81.cm-s-mozilla .cm-number,
82.variable-or-property .token-number,
dfa34f73 83.variable-or-property[return] > .title > .name,
de5e780d
RK
84.variable-or-property[scope] > .title > .name {
85 color: var(--theme-highlight-green);
2efcd25d
RK
86}
87
ed88669c
RK
88.CodeMirror-Tern-completion-number:before {
89 background-color: #008484;
90}
91
7600e0b1
RK
92.theme-fg-color2,
93.cm-s-mozilla .cm-attribute,
7600e0b1
RK
94.cm-s-mozilla .cm-variable,
95.cm-s-mozilla .cm-def,
7600e0b1 96.cm-s-mozilla .cm-property,
de57e474 97.cm-s-mozilla .cm-qualifier,
de5e780d
RK
98.variables-view-variable > .title > .name {
99 color: var(--theme-highlight-blue);
2efcd25d
RK
100}
101
ed88669c
RK
102.CodeMirror-Tern-completion-object:before {
103 background-color: #9C9CFF;
104}
105
3d64e0ce
RK
106.cm-s-mozilla .cm-unused-line {
107 text-decoration: line-through;
de5e780d 108 text-decoration-color: #8050B0;
3d64e0ce
RK
109}
110
111.cm-s-mozilla .cm-executed-line {
112 background-color: #404000;
113}
114
7600e0b1 115.theme-fg-color3,
6568957a 116.cm-s-mozilla .cm-builtin,
7600e0b1 117.cm-s-mozilla .cm-tag,
de57e474 118.cm-s-mozilla .cm-header,
de5e780d 119.cm-s-mozilla .cm-bracket,
de57e474 120.variables-view-property > .title > .name,
de5e780d
RK
121.variable-or-property[safe-getter] > .title > .name {
122 color: var(--theme-highlight-pink);
2efcd25d
RK
123}
124
ed88669c 125.CodeMirror-Tern-completion-array:before {
de5e780d 126 color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
ed88669c
RK
127}
128
de5e780d
RK
129.theme-fg-color4 {
130 color: var(--theme-highlight-purple);
2efcd25d
RK
131}
132
7600e0b1 133.theme-fg-color5,
de5e780d
RK
134.cm-s-mozilla .cm-keyword {
135 color: var(--theme-highlight-lightorange);
2efcd25d
RK
136}
137
6568957a
RK
138.theme-fg-color6,
139.cm-s-mozilla .cm-string,
de57e474 140.cm-s-mozilla .cm-string-2,
ed88669c 141.variable-or-property .token-string,
de5e780d
RK
142.CodeMirror-Tern-farg {
143 color: var(--theme-highlight-pink); /* -orange? */
2efcd25d
RK
144}
145
ed88669c
RK
146.CodeMirror-Tern-completion-string:before,
147.CodeMirror-Tern-completion-fn:before {
148 background-color: #E7ADE7;
149}
150
7600e0b1 151.theme-fg-color7,
6568957a
RK
152.cm-s-mozilla .cm-atom,
153.cm-s-mozilla .cm-quote,
de57e474
RK
154.cm-s-mozilla .cm-error,
155.variable-or-property .token-boolean,
46e71434 156.variable-or-property .token-domnode,
de5e780d
RK
157.variable-or-property[exception] > .title > .name {
158 color: var(--theme-highlight-red);
2efcd25d 159}
3a0880a9 160
ed88669c
RK
161.CodeMirror-Tern-completion-bool:before {
162 background-color: #FF0000;
163}
164
46e71434
RK
165.variable-or-property .token-domnode {
166 font-weight: bold;
167}
168
6dc70335 169.theme-toolbar,
45dc7657 170.devtools-toolbar,
368d0b7f
RK
171.devtools-sidebar-tabs tabs,
172.devtools-sidebar-alltabs,
589b5528 173.CodeMirror-dialog { /* General toolbar styling */
de5e780d
RK
174/* color: var(--theme-body-color-alt);
175 background-color: var(--theme-toolbar-background);*/
6dc70335
RK
176}
177
178
3a0880a9
RK
179.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
180 color: #FFCF00;
181}
182
183.ruleview-colorswatch,
9168a62c
RK
184.computedview-colorswatch,
185.ruleview-bezierswatch {
dccbbf95 186/* box-shadow: 0 0 0 1px #818181; */
3a0880a9 187}
7600e0b1 188
de57e474
RK
189.variables-view-scope:focus > .title,
190.variable-or-property:focus > .title {
191 background-color: #008484; /* fg-color2 */
192 color: #000000;
193}
194
7600e0b1
RK
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
873a46f8
RK
199.CodeMirror,
200.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
7600e0b1
RK
201 font-family: inherit;
202 font-size: inherit;
203 background: transparent;
204}
205
206.CodeMirror pre,
6568957a
RK
207.cm-s-mozilla .cm-variable-2,
208.cm-s-mozilla .cm-variable-3,
7600e0b1 209.cm-s-mozilla .cm-operator,
de5e780d
RK
210.cm-s-mozilla .cm-special {
211 color: var(--theme-content-color1);
7600e0b1
RK
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
6568957a 223.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
7600e0b1
RK
224 background: #008484;
225 color: #000000;
226}
227
6568957a 228.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
3886293f 229 background: rgba(0, 132, 132, .25);
6568957a
RK
230}
231
232div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
3886293f 233 outline: solid 1px rgba(0, 132, 132, .4);
6568957a
RK
234 color: #FFCF00;
235}
236
d2ce251d
RK
237/* Highlight for a line that contains an error. */
238div.CodeMirror div.error-line {
3886293f 239 background: rgba(255, 0, 0, 0.2);
d2ce251d
RK
240}
241
242/* Highlight for a line that represents a stack frame's location. */
243div.CodeMirror div.debug-line {
3886293f 244 background: rgba(156, 156, 255, 0.2);
d2ce251d
RK
245}
246
247/* Generic highlighted text */
248div.CodeMirror span.marked-text {
249 background: rgba(255,207,0,0.2);
3886293f 250 border: 1px dashed rgba(156, 156, 255, 0.6);
d2ce251d
RK
251 -moz-margin-start: -1px;
252 -moz-margin-end: -1px;
253}
254
255/* Highlight for evaluating current statement. */
256div.CodeMirror span.eval-text {
257 background-color: #403800;
258}
259
6568957a 260.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
de5e780d 261 color: var(--theme-content-color2);
6568957a
RK
262}
263
264.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
de5e780d
RK
265 border-right-color: var(--theme-contrast-border);
266 background-color: var(--theme-contrast-background);
7600e0b1
RK
267}
268
269.cm-s-markup-view pre {
270 line-height: 1.4em;
271 min-height: 1.4em;
272}
c5987919 273
649b5d38
RK
274/* Twisty and checkbox controls */
275.theme-twisty, .theme-checkbox {
276 width: 14px;
277 height: 14px;
278 background-repeat: no-repeat;
dc9d5d64 279 background-image: url("chrome://devtools/skin/controls.png");
649b5d38
RK
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
2b5a5147
RK
296.theme-twisty[invisible] {
297 visibility: hidden;
298}
299
649b5d38
RK
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
024a65e9 312@media (min-resolution: 1.1dppx) {
649b5d38 313 .theme-twisty, .theme-checkbox {
dc9d5d64 314 background-image: url("chrome://devtools/skin/controls@2x.png");
649b5d38
RK
315 }
316}
317
6dc70335
RK
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"] {
dc9d5d64 331 list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
6dc70335
RK
332 margin-bottom: -4px;
333}
334
335.theme-tooltip-panel .panel-arrow[side="bottom"] {
dc9d5d64 336 list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
6dc70335
RK
337 margin-top: -4px;
338}
339
340.theme-tooltip-panel .panel-arrow[side="left"] {
dc9d5d64 341 list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
6dc70335
RK
342 margin-right: -4px;
343}
344
345.theme-tooltip-panel .panel-arrow[side="right"] {
dc9d5d64 346 list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
6dc70335
RK
347 margin-left: -4px;
348}
349
024a65e9 350@media (min-resolution: 1.1dppx) {
6dc70335
RK
351 .theme-tooltip-panel .panel-arrow[side="top"],
352 .theme-tooltip-panel .panel-arrow[side="bottom"] {
dc9d5d64 353 list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
6dc70335
RK
354 }
355
356 .theme-tooltip-panel .panel-arrow[side="left"],
357 .theme-tooltip-panel .panel-arrow[side="right"] {
dc9d5d64 358 list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
6dc70335
RK
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
45dc7657
RK
371.devtools-textinput,
372.devtools-searchinput {
373 background-color: #000000;
374 color: #E7ADE7;
1f756abf
RK
375 border: 1px solid #9C9CFF;
376}
377
378.devtools-textinput:focus,
379.devtools-searchinput:focus {
380 border-color: #008484;
45dc7657
RK
381}
382
ed88669c
RK
383.CodeMirror-Tern-fname {
384 color: #A09090;
385}
386
387.CodeMirror-hints,
388.CodeMirror-Tern-tooltip {
389 background-color: #000000;
de5e780d 390 color: var(--theme-body-color);
ed88669c 391}