first part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[themes.git] / LCARStrek / devtools / dark-theme.css
... / ...
CommitLineData
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
10body, 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
232div.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. */
238div.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. */
243div.CodeMirror div.debug-line {
244 background: rgba(156, 156, 255, 0.2);
245}
246
247/* Generic highlighted text */
248div.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. */
256div.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}