2085d5fb7f80356fd3a38cba8940f656ccaa18b2
[themes.git] / LCARStrek / browser / 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 /* According to:
7  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
8  */
9 .theme-body {
10   background: #000000;
11   color: #FF9F00;
12 }
13
14 .theme-sidebar {
15   background: #000000;
16   color: #FF9F00;
17 }
18
19 ::-moz-selection {
20   background-color: #008484;
21   color: #FFCF00;
22 }
23
24 .theme-twisty {
25   cursor: pointer;
26   width: 14px;
27   height: 14px;
28   background-repeat: no-repeat;
29   background-image: url("chrome://browser/skin/devtools/controls.png");
30   background-position: 0 -14px;
31 }
32
33 .theme-twisty:-moz-focusring {
34   outline-style: none;
35 }
36
37 .theme-twisty[open] {
38   background-position: -14px -14px;
39 }
40
41 .theme-checkbox {
42   display: inline-block;
43   border: 0;
44   width: 14px;
45   height: 14px;
46   padding: 0;
47   outline: none;
48   background-image: url("chrome://browser/skin/devtools/controls.png");
49   background-position: 0 0;
50 }
51
52 .theme-checkbox[checked] {
53   background-position: -14px 0;
54 }
55
56 .theme-selected {
57   background: #004242;
58 }
59
60 .theme-bg-darker {
61   background-color: rgba(0,0,0,0.5);
62 }
63
64 .theme-bg-contrast,
65 .variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
66   background: #402800;
67 }
68
69 .theme-link,
70 .cm-s-mozilla .cm-link { /* original: blue */
71   color: #3333FF;
72 }
73
74 /*
75  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
76  * failures in debug builds.
77  */
78 .theme-link:visited,
79 .cm-s-mozilla .cm-link:visited { /* original: blue */
80   color: #3333FF;
81 }
82
83 .theme-comment,
84 .cm-s-mozilla .cm-meta,
85 .cm-s-mozilla .cm-hr,
86 .cm-s-mozilla .cm-comment,
87 .variable-or-property .token-undefined,
88 .variable-or-property .token-null { /* original: grey */
89   color: #A09090;
90 }
91
92 .theme-gutter {
93   background-color: #000000;
94   color: #FF9F00;
95   border-color: #9C9CFF;
96 }
97
98 .theme-separator { /* original: grey */
99   border-color: #8050B0;
100 }
101
102 .theme-fg-color1,
103 .cm-s-mozilla .cm-number,
104 .variable-or-property .token-number,
105 .variable-or-property[return] > .title > .name,
106 .variable-or-property[scope] > .title > .name { /* original: green */
107   color: #008484;
108 }
109
110 .theme-fg-color2,
111 .cm-s-mozilla .cm-attribute,
112 .cm-s-mozilla .cm-variable,
113 .cm-s-mozilla .cm-def,
114 .cm-s-mozilla .cm-property,
115 .cm-s-mozilla .cm-qualifier,
116 .variables-view-variable > .title > .name { /* original: blue */
117   color: #9C9CFF;
118 }
119
120 .theme-fg-color3,
121 .cm-s-mozilla .cm-builtin,
122 .cm-s-mozilla .cm-tag,
123 .cm-s-mozilla .cm-header,
124 .variables-view-property > .title > .name,
125 .variable-or-property[safe-getter] > .title > .name { /* original: pink/lavender */
126   color: #E7ADE7;
127 }
128
129 .theme-fg-color4 { /* original: purple/violet */
130   color: #C09070;
131 }
132
133 .theme-fg-color5,
134 .cm-s-mozilla .cm-bracket,
135 .cm-s-mozilla .cm-keyword { /* original: Yellow */
136   color: #FFCF00;
137 }
138
139 .theme-fg-color6,
140 .cm-s-mozilla .cm-string,
141 .cm-s-mozilla .cm-string-2,
142 .variable-or-property .token-string { /* original: Orange */
143   color: #E7ADE7;
144 }
145
146 .theme-fg-color7,
147 .cm-s-mozilla .cm-atom,
148 .cm-s-mozilla .cm-quote,
149 .cm-s-mozilla .cm-error,
150 .variable-or-property .token-boolean,
151 .variable-or-property[exception] > .title > .name { /* original: Red */
152   color: #FF0000;
153 }
154
155 .theme-toolbar,
156 .devtools-toolbar,
157 .devtools-sidebar-tabs > tabs { /* General toolbar styling */
158 }
159
160
161 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
162   color: #FFCF00;
163 }
164
165 .ruleview-colorswatch,
166 .computedview-colorswatch,
167 .markupview-colorswatch {
168 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
169 }
170
171 .variables-view-scope:focus > .title,
172 .variable-or-property:focus > .title {
173   background-color: #008484; /* fg-color2 */
174   color: #000000;
175 }
176
177 /* CodeMirror specific styles.
178  * Best effort to match the existing theme, some of the colors
179  * are duplicated here to prevent weirdness in the main theme. */
180
181 .CodeMirror { /* Inherit platform specific font sizing and styles */
182   font-family: inherit;
183   font-size: inherit;
184   background: transparent;
185 }
186
187 .CodeMirror pre,
188 .cm-s-mozilla .cm-variable-2,
189 .cm-s-mozilla .cm-variable-3,
190 .cm-s-mozilla .cm-operator,
191 .cm-s-mozilla .cm-special { /* theme-body color */
192   color: #FF9F00;
193 }
194
195 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
196   border-left: solid 1px #FF9F00;
197 }
198
199 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
200   background: #008484;
201   color: #FFCF00;
202 }
203
204 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
205   background: #008484;
206   color: #000000;
207 }
208
209 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
210   background: rgba(0, 132, 132, .25);
211 }
212
213 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
214   outline: solid 1px rgba(0, 132, 132, .4);
215   color: #FFCF00;
216 }
217
218 /* Highlight for a line that contains an error. */
219 div.CodeMirror div.error-line {
220   background: rgba(255, 0, 0, 0.2);
221 }
222
223 /* Highlight for a line that represents a stack frame's location. */
224 div.CodeMirror div.debug-line {
225   background: rgba(156, 156, 255, 0.2);
226 }
227
228 /* Generic highlighted text */
229 div.CodeMirror span.marked-text {
230   background: rgba(255,207,0,0.2);
231   border: 1px dashed rgba(156, 156, 255, 0.6);
232   -moz-margin-start: -1px;
233   -moz-margin-end: -1px;
234 }
235
236 /* Highlight for evaluating current statement. */
237 div.CodeMirror span.eval-text {
238   background-color: #403800;
239 }
240
241 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
242   color: #A09090;
243 }
244
245 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
246   border-right-color: #A09090;
247   background-color: #402800;
248 }
249
250 .cm-s-markup-view pre {
251   line-height: 1.4em;
252   min-height: 1.4em;
253 }
254
255 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
256
257 .theme-tooltip-panel .panel-arrowcontent {
258 /*  padding: 5px; */
259   background: rgba(0, 0, 0, .9);
260 /*  border-radius: 5px;
261   box-shadow: none;
262   border: 3px solid #9C9CFF; */
263 }
264
265 /* Overring panel arrow images to fit with our light and dark themes */
266 /*
267 .theme-tooltip-panel .panel-arrow[side="top"] {
268   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
269   margin-bottom: -4px;
270 }
271
272 .theme-tooltip-panel .panel-arrow[side="bottom"] {
273   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
274   margin-top: -4px;
275 }
276
277 .theme-tooltip-panel .panel-arrow[side="left"] {
278   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
279   margin-right: -4px;
280 }
281
282 .theme-tooltip-panel .panel-arrow[side="right"] {
283   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
284   margin-left: -4px;
285 }
286
287 @media (min-resolution: 2dppx) {
288   .theme-tooltip-panel .panel-arrow[side="top"],
289   .theme-tooltip-panel .panel-arrow[side="bottom"] {
290     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
291   }
292
293   .theme-tooltip-panel .panel-arrow[side="left"],
294   .theme-tooltip-panel .panel-arrow[side="right"] {
295     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
296   }
297 }
298 */
299 .theme-tooltip-panel .devtools-tooltip-simple-text {
300 /*  color: white; */
301   border-bottom: 1px solid #A09090;
302 }
303
304 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
305  border-bottom: 0;
306 }
307
308 .devtools-horizontal-splitter {
309 }
310
311 .devtools-side-splitter {
312 }
313
314 .devtools-textinput,
315 .devtools-searchinput {
316   background-color: #000000;
317   color: #E7ADE7;
318 }
319
320 /* === BEGIN toolbars.inc.css === */
321
322 .devtools-toolbar {
323 }
324
325 /* LCARStrek checkbox colors don't work well against toolbar background */
326 .devtools-toolbar > checkbox {
327   background-color: #000000;
328   padding: 2px;
329 }
330
331 .devtools-menulist,
332 .devtools-toolbarbutton {
333 }
334
335 devtools-menulist:-moz-focusring,
336 .devtools-toolbarbutton:-moz-focusring {
337   outline: 1px dotted #008484;
338 }
339
340 .devtools-toolbarbutton > .toolbarbutton-icon {
341 }
342
343 .devtools-toolbarbutton:not([label]) {
344   min-width: 20px;
345 }
346
347 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
348   display: none;
349 }
350
351 .devtools-toolbarbutton > .toolbarbutton-menubutton-button {
352   /*-moz-box-orient: horizontal;*/
353 }
354
355 .devtools-toolbarbutton:not([checked]):hover:active {
356 }
357
358 .devtools-menulist[open=true],
359 .devtools-toolbarbutton[open=true],
360 .devtools-toolbarbutton[checked] {
361 }
362
363 .devtools-toolbarbutton[checked] {
364 }
365
366 .devtools-toolbarbutton[checked]:hover:active {
367 }
368
369 .devtools-option-toolbarbutton {
370   list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
371   -moz-image-region: rect(0px 16px 16px 0px);
372 /*  background: none;
373   border: none; */
374 }
375
376 .devtools-option-toolbarbutton:hover,
377 .devtools-option-toolbarbutton[open=true] {
378   -moz-image-region: rect(0px 32px 16px 16px);
379 }
380
381 .devtools-menulist > .menulist-label-box {
382   text-align: center;
383 }
384
385 .devtools-menulist > .menulist-dropmarker {
386 }
387
388 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
389 }
390
391 .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
392 }
393
394 .devtools-toolbarbutton[type=menu-button] {
395   padding: 0 1px;
396   -moz-box-align: stretch;
397 }
398
399 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
400 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
401   -moz-box-align: center;
402 }
403
404 /* Text input */
405
406 .devtools-textinput,
407 .devtools-searchinput {
408 /*  -moz-appearance: none;
409   margin: 0 3px;
410   border: 1px solid rgb(88, 94, 101);
411   border-radius: 2px;
412   background-color: rgba(24, 29, 32, 1);
413   padding: 4px 6px;
414   color: rgba(184, 200, 217, 1);*/
415 }
416
417 .devtools-searchinput {
418 /*  padding-top: 3px;
419   padding-bottom: 3px;*/
420   -moz-padding-start: 22px;
421   -moz-padding-end: 12px;
422   background-image: url("magnifying-glass.png");
423   background-position: 8px center;
424   background-repeat: no-repeat;
425   font-size: inherit;
426 }
427
428 .devtools-searchinput:-moz-locale-dir(rtl) {
429   background-position: calc(100% - 8px) center;
430 }
431
432 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
433   display: none;
434 }
435
436 .devtools-no-search-result {
437   border-color: #FF0000 !important;
438 }
439
440 /* Close button */
441
442 .devtools-closebutton {
443   min-width: 16px;
444   width: 16px;
445 }
446
447 .devtools-closebutton > image {
448   width: 16px;
449   height: 16px;
450   -moz-appearance: none;
451   background-size: 32px 16px;
452   background-image: url("chrome://browser/skin/devtools/close@2x.png");
453   background-position: 0 center;
454   background-repeat: no-repeat;
455 }
456
457 .devtools-closebutton:hover > image,
458 .devtools-closebutton:hover:active > image {
459   background-position: -16px center;
460 }
461
462 .devtools-closebutton > .toolbarbutton-text {
463   display: none;
464 }
465
466 /* In-tools sidebar */
467
468 .devtools-sidebar-tabs {
469 }
470
471 .devtools-sidebar-tabs > tabpanels {
472   padding: 0;
473   border: 0;
474 }
475
476 .devtools-sidebar-tabs > tabs {
477   position: static;
478   overflow: hidden;
479 }
480
481 .devtools-sidebar-tabs > tabs > .tabs-right,
482 .devtools-sidebar-tabs > tabs > .tabs-left {
483   display: none;
484 }
485
486 .devtools-sidebar-tabs > tabs > tab {
487   min-width: 78px;
488   text-align: center;
489   -moz-box-flex: 1;
490   position: static;
491   margin-top: 0;
492 }
493
494 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
495   position: static;
496 }
497
498 .devtools-sidebar-tabs > tabs > tab:last-of-type {
499   -moz-border-end-width: 0;
500 }
501
502 .devtools-sidebar-tabs > tabs > tab:first-of-type {
503   -moz-margin-start: 0;
504 }
505
506 .devtools-sidebar-tabs > tabs > tab {
507 }
508
509 .devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
510 }
511
512 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
513 }
514
515 .devtools-sidebar-tabs > tabs > tab {
516 }
517
518 .devtools-sidebar-tabs > tabs > tab:hover {
519 }
520
521 .devtools-sidebar-tabs > tabs > tab:hover:active {
522 }
523
524 .devtools-sidebar-tabs > tabs > tab[selected] + tab {
525 }
526
527 .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
528 }
529
530 .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
531 }
532
533 .devtools-sidebar-tabs > tabs > tab[selected] {
534 }
535
536 .devtools-sidebar-tabs > tabs > tab[selected]:hover {
537 }
538
539 .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
540 }
541
542 /* Toolbox - moved from toolbox.css.
543  * Rules that apply to the global toolbox like command buttons,
544  * devtools tabs, docking buttons, etc. */
545
546 #toolbox-controls {
547   margin: 0 2px;
548 }
549
550 #toolbox-controls > toolbarbutton,
551 #toolbox-dock-buttons > toolbarbutton {
552   min-width: 16px;
553 /*  padding: 1px 3px; */
554 }
555
556 #toolbox-dock-buttons > toolbarbutton > image {
557   width: 16px;
558   height: 16px;
559   background-size: 32px 16px;
560   background-position: 0 center;
561   background-repeat: no-repeat;
562 }
563  
564 #toolbox-dock-buttons > toolbarbutton:hover > image {
565   background-position: -16px center;
566 }
567  
568 #toolbox-dock-bottom > image {
569   background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
570 }
571  
572 #toolbox-dock-side > image {
573   background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
574 }
575
576 #toolbox-dock-window > image {
577   background-image: url("chrome://browser/skin/devtools/undock@2x.png");
578 }
579
580 #toolbox-dock-window,
581 #toolbox-dock-bottom,
582 #toolbox-dock-side {
583 }
584
585 #toolbox-dock-window:hover,
586 #toolbox-dock-bottom:hover,
587 #toolbox-dock-side:hover {
588 }
589
590 #toolbox-controls-separator {
591   -moz-margin-start: 4px;
592 }
593
594 /* Command buttons */
595
596 .command-button {
597 /*  padding: 1px 4px; */
598   min-width: 16px;
599 }
600
601 .command-button:hover {
602 }
603 .command-button:hover:active {
604 }
605
606 .command-button > image {
607   width: 16px;
608   height: 16px;
609   background-size: 32px 16px;
610   background-position: 0 center;
611   background-repeat: no-repeat;
612 }
613
614 .command-button:hover > image,
615 .command-button:hover:active > image,
616 .command-button[checked=true] > image {
617   background-position: -16px center;
618 }
619
620 #command-button-paintflashing > image {
621   background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
622 }
623
624 #command-button-responsive > image {
625   background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
626 }
627
628 #command-button-tilt > image {
629   background-image: url("chrome://browser/skin/devtools/command-tilt.png");
630 }
631
632 #command-button-scratchpad > image {
633   background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
634 }
635
636 #command-button-pick > image {
637   background-image: url("chrome://browser/skin/devtools/command-pick.png");
638 }
639
640 #command-button-splitconsole > image {
641   background-image: url("chrome://browser/skin/devtools/command-console.png");
642 }
643
644 #command-button-eyedropper > image {
645   background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
646 }
647
648 @media (min-resolution: 2dppx) {
649   #command-button-paintflashing > image {
650     background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
651   }
652
653   #command-button-responsive > image {
654     background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
655   }
656
657   #command-button-tilt > image {
658     background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
659   }
660
661   #command-button-scratchpad > image {
662     background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
663   }
664
665   #command-button-pick > image {
666     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
667   }
668
669   #command-button-splitconsole > image {
670     background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
671   }
672
673   #command-button-eyedropper > image {
674     background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
675   }
676 }
677
678 /* Tabs */
679
680 .devtools-tabbar {
681 }
682
683 #toolbox-tabs {
684   margin: 0;
685   background-color: #000000;
686   color: #FFCF00;
687 }
688
689 .devtools-tab {
690   min-width: 32px;
691   max-width: 110px;
692   color: #000000;
693   margin: 0;
694   -moz-margin-end: 3px;
695   padding: 1px;
696   -moz-padding-start: 3px;
697   background-color: #C09070;
698   border-radius: 8px 8px 0 0;
699 }
700
701 .devtools-tab:first-child {
702 }
703
704 .devtools-tab:last-child {
705 }
706
707 .devtools-tab > image {
708   -moz-margin-end: 0px;
709 /*  -moz-margin-start: 4px; */
710   max-height: 16px;
711   width: 16px; /* Prevents collapse during theme switching */
712 }
713
714 #toolbox-tab-options > image {
715 /*  margin: 0 8px; */
716 }
717
718 .devtools-tab:hover > image {
719 }
720
721 .devtools-tab:active > image,
722 .devtools-tab[selected] > image {
723 }
724
725 .devtools-tab:hover,
726 .devtools-tab:hover:active {
727   background-color: #FFCF00;
728   color: #000000;
729 }
730
731 .devtools-tab[selected] {
732   background-color: #008484;
733   color: #000000;
734 }
735
736 .devtools-tab > spacer {
737   max-width: 0;
738   -moz-box-flex: 0;
739 }
740
741 .devtools-tab > image {
742   -moz-margin-end: 0;
743   -moz-margin-start: 0;
744 }
745
746 #toolbox-tab-options {
747   min-width: 20px;
748 }
749
750 #toolbox-tab-options > image {
751   -moz-margin-end: 3px;
752 }
753
754 .devtools-tab:not([highlighted]) > .highlighted-icon,
755 .devtools-tab[selected] > .highlighted-icon,
756 .devtools-tab:not([selected])[highlighted] > .default-icon {
757   visibility: collapse;
758 }
759
760 .devtools-tab:not([selected])[highlighted] {
761   color: #FFCF00;
762 }
763
764 .devtools-tab:not([highlighted]) > .highlighted-icon,
765 .devtools-tab[selected] > .highlighted-icon,
766 .devtools-tab:not([selected])[highlighted] > .default-icon {
767   visibility: collapse;
768 }
769
770 .hidden-labels-box:not(.visible) > label,
771 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
772   display: none;
773 }
774
775 /* === END toolbars.inc.css === */