update versions to current nightlies
[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: 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
228div.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. */
234div.CodeMirror div.error-line {
235 background: rgba(255, 0, 0, 0.2);
236}
237
238/* Generic highlighted text */
239div.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. */
247div.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}