third part of syncing LCARStrek with Firefox 36 windows theme changes (changeset...
[themes.git] / LCARStrek / browser / 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/* According to:
7 * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
8 */
9:root {
10 --theme-body-background: #000000;
11 --theme-sidebar-background: #000000;
12 --theme-contrast-background: #402800;
13 --theme-contrast-border: #A09090;
14
15 --theme-tab-toolbar-background: #.252c33;
16 --theme-toolbar-background: #000000;
17 --theme-hover-background: #FFCF00;
18 --theme-hover-color: #000000;
19 --theme-selection-background: #008484;
20 --theme-selection-color: #000000;
21 --theme-selection-background2: #004242;
22 --theme-selection-color2: #FF9F00;
23 --theme-splitter-color: #9C9CFF;
24 --theme-comment: #A09090;
25
26 --theme-contrastsidebar-background: #A09090;
27 --theme-contrastsidebar-color: #000000;
28 --theme-contrastsidebar-bordercolor: #000000;
29
30 --theme-body-color: #FF9F00;
31 --theme-body-color-alt: #A09090;
32 --theme-content-color1: #FF9F00;
33 --theme-content-color2: #A09090;
34 --theme-content-color3: #FF9F00;
35 --theme-content-disabled: #8050B0;
36
37 --theme-text-blue: #3333FF;
38 --theme-highlight-green: #008484;
39 --theme-highlight-blue: #9C9CFF;
40 --theme-highlight-bluegrey: #A09090;
41 --theme-highlight-purple: #C09070;
42 --theme-highlight-darkpurple: #6000CF;
43 --theme-highlight-lightorange: #FFCF00;
44 --theme-highlight-orange: #FF9F00;
45 --theme-highlight-red: #FF0000;
46 --theme-highlight-pink: #E7ADE7;
47}
48
49.theme-body {
50 background: var(--theme-body-background);
51 color: var(--theme-body-color);
52}
53
54.theme-sidebar {
55 background: var(--theme-sidebar-background);
56 color: var(--theme-content-color1);
57}
58
59::-moz-selection {
60 background-color: var(--theme-selection-background);
61 color: var(--theme-selection-color);
62}
63
64.theme-bg-darker {
65 background-color: rgba(0,0,0,0.5);
66}
67
68.theme-selected,
69.CodeMirror-hint-active {
70 background-color: var(--theme-selection-background2);
71 color: var(--theme-selection-color2);
72}
73
74.theme-bg-contrast,
75.variable-or-property:not([overridden])[changed] {
76 background: var(--theme-contrast-background);
77}
78
79.theme-link,
80.cm-s-mozilla .cm-link { /* original: blue */
81 color: var(--theme-text-blue);
82}
83
84/*
85 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
86 * failures in debug builds.
87 */
88.theme-link:visited,
89.cm-s-mozilla .cm-link:visited,
90.CodeMirror-Tern-type {
91 color: var(--theme-text-blue);
92}
93
94.theme-comment,
95.cm-s-mozilla .cm-meta,
96.cm-s-mozilla .cm-hr,
97.cm-s-mozilla .cm-comment,
98.variable-or-property .token-undefined,
99.variable-or-property .token-null,
100.CodeMirror-Tern-completion-unknown:before {
101 color: var(--theme-comment);
102}
103
104.theme-gutter {
105 background-color: #000000;
106 color: var(--theme-content-color3);
107 border-color: #9C9CFF;
108}
109
110.theme-separator { /* original: grey */
111 border-color: #8050B0;
112}
113
114.theme-fg-color1,
115.cm-s-mozilla .cm-number,
116.variable-or-property .token-number,
117.variable-or-property[return] > .title > .name,
118.variable-or-property[scope] > .title > .name {
119 color: var(--theme-highlight-green);
120}
121
122.CodeMirror-Tern-completion-number:before {
123 background-color: #008484;
124}
125
126.theme-fg-color2,
127.cm-s-mozilla .cm-attribute,
128.cm-s-mozilla .cm-variable,
129.cm-s-mozilla .cm-def,
130.cm-s-mozilla .cm-property,
131.cm-s-mozilla .cm-qualifier,
132.variables-view-variable > .title > .name {
133 color: var(--theme-highlight-blue);
134}
135
136.CodeMirror-Tern-completion-object:before {
137 background-color: #9C9CFF;
138}
139
140.cm-s-mozilla .cm-unused-line {
141 text-decoration: line-through;
142 text-decoration-color: #8050B0;
143}
144
145.cm-s-mozilla .cm-executed-line {
146 background-color: #404000;
147}
148
149.theme-fg-color3,
150.cm-s-mozilla .cm-builtin,
151.cm-s-mozilla .cm-tag,
152.cm-s-mozilla .cm-header,
153.cm-s-mozilla .cm-bracket,
154.variables-view-property > .title > .name,
155.variable-or-property[safe-getter] > .title > .name {
156 color: var(--theme-highlight-pink);
157}
158
159.CodeMirror-Tern-completion-array:before {
160 color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
161}
162
163.theme-fg-color4 {
164 color: var(--theme-highlight-purple);
165}
166
167.theme-fg-color5,
168.cm-s-mozilla .cm-keyword {
169 color: var(--theme-highlight-lightorange);
170}
171
172.theme-fg-color6,
173.cm-s-mozilla .cm-string,
174.cm-s-mozilla .cm-string-2,
175.variable-or-property .token-string,
176.CodeMirror-Tern-farg {
177 color: var(--theme-highlight-pink); /* -orange? */
178}
179
180.CodeMirror-Tern-completion-string:before,
181.CodeMirror-Tern-completion-fn:before {
182 background-color: #E7ADE7;
183}
184
185.theme-fg-color7,
186.cm-s-mozilla .cm-atom,
187.cm-s-mozilla .cm-quote,
188.cm-s-mozilla .cm-error,
189.variable-or-property .token-boolean,
190.variable-or-property .token-domnode,
191.variable-or-property[exception] > .title > .name {
192 color: var(--theme-highlight-red);
193}
194
195.CodeMirror-Tern-completion-bool:before {
196 background-color: #FF0000;
197}
198
199.variable-or-property .token-domnode {
200 font-weight: bold;
201}
202
203.theme-toolbar,
204.devtools-toolbar,
205.devtools-sidebar-tabs > tabs,
206.CodeMirror-dialog { /* General toolbar styling */
207/* color: var(--theme-body-color-alt);
208 background-color: var(--theme-toolbar-background);*/
209}
210
211
212.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
213 color: #FFCF00;
214}
215
216.ruleview-colorswatch,
217.computedview-colorswatch,
218.ruleview-bezierswatch {
219/* box-shadow: 0 0 0 1px #818181; */
220}
221
222.variables-view-scope:focus > .title,
223.variable-or-property:focus > .title {
224 background-color: #008484; /* fg-color2 */
225 color: #000000;
226}
227
228/* CodeMirror specific styles.
229 * Best effort to match the existing theme, some of the colors
230 * are duplicated here to prevent weirdness in the main theme. */
231
232.CodeMirror { /* Inherit platform specific font sizing and styles */
233 font-family: inherit;
234 font-size: inherit;
235 background: transparent;
236}
237
238.CodeMirror pre,
239.cm-s-mozilla .cm-variable-2,
240.cm-s-mozilla .cm-variable-3,
241.cm-s-mozilla .cm-operator,
242.cm-s-mozilla .cm-special {
243 color: var(--theme-content-color1);
244}
245
246.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
247 border-left: solid 1px #FF9F00;
248}
249
250.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
251 background: #008484;
252 color: #FFCF00;
253}
254
255.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
256 background: #008484;
257 color: #000000;
258}
259
260.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
261 background: rgba(0, 132, 132, .25);
262}
263
264div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
265 outline: solid 1px rgba(0, 132, 132, .4);
266 color: #FFCF00;
267}
268
269/* Highlight for a line that contains an error. */
270div.CodeMirror div.error-line {
271 background: rgba(255, 0, 0, 0.2);
272}
273
274/* Highlight for a line that represents a stack frame's location. */
275div.CodeMirror div.debug-line {
276 background: rgba(156, 156, 255, 0.2);
277}
278
279/* Generic highlighted text */
280div.CodeMirror span.marked-text {
281 background: rgba(255,207,0,0.2);
282 border: 1px dashed rgba(156, 156, 255, 0.6);
283 -moz-margin-start: -1px;
284 -moz-margin-end: -1px;
285}
286
287/* Highlight for evaluating current statement. */
288div.CodeMirror span.eval-text {
289 background-color: #403800;
290}
291
292.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
293 color: var(--theme-content-color2);
294}
295
296.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
297 border-right-color: var(--theme-contrast-border);
298 background-color: var(--theme-contrast-background);
299}
300
301.cm-s-markup-view pre {
302 line-height: 1.4em;
303 min-height: 1.4em;
304}
305
306/* Twisty and checkbox controls */
307.theme-twisty, .theme-checkbox {
308 width: 14px;
309 height: 14px;
310 background-repeat: no-repeat;
311 background-image: url("chrome://browser/skin/devtools/controls.png");
312 background-size: 28px 28px;
313}
314
315.theme-twisty {
316 cursor: pointer;
317 background-position: -0px -14px;
318}
319
320.theme-twisty:-moz-focusring {
321 outline-style: none;
322}
323
324.theme-twisty[open] {
325 background-position: -14px -14px;
326}
327
328.theme-twisty[invisible] {
329 visibility: hidden;
330}
331
332.theme-checkbox {
333 display: inline-block;
334 border: 0;
335 padding: 0;
336 outline: none;
337 background-position: 0 0;
338}
339
340.theme-checkbox[checked] {
341 background-position: -14px 0;
342}
343
344@media (min-resolution: 2dppx) {
345 .theme-twisty, .theme-checkbox {
346 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
347 }
348}
349
350/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
351
352.theme-tooltip-panel .panel-arrowcontent {
353/* padding: 5px; */
354 background: rgba(0, 0, 0, .9);
355/* border-radius: 5px;
356 box-shadow: none;
357 border: 3px solid #9C9CFF; */
358}
359
360/* Overring panel arrow images to fit with our light and dark themes */
361/*
362.theme-tooltip-panel .panel-arrow[side="top"] {
363 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
364 margin-bottom: -4px;
365}
366
367.theme-tooltip-panel .panel-arrow[side="bottom"] {
368 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
369 margin-top: -4px;
370}
371
372.theme-tooltip-panel .panel-arrow[side="left"] {
373 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
374 margin-right: -4px;
375}
376
377.theme-tooltip-panel .panel-arrow[side="right"] {
378 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
379 margin-left: -4px;
380}
381
382@media (min-resolution: 2dppx) {
383 .theme-tooltip-panel .panel-arrow[side="top"],
384 .theme-tooltip-panel .panel-arrow[side="bottom"] {
385 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
386 }
387
388 .theme-tooltip-panel .panel-arrow[side="left"],
389 .theme-tooltip-panel .panel-arrow[side="right"] {
390 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
391 }
392}
393*/
394.theme-tooltip-panel .devtools-tooltip-simple-text {
395/* color: white; */
396 border-bottom: 1px solid #A09090;
397}
398
399.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
400 border-bottom: 0;
401}
402
403.devtools-horizontal-splitter {
404/* border-bottom: 1px solid var(--theme-splitter-color); */
405}
406
407.devtools-side-splitter {
408/* -moz-border-end: 1px solid var(--theme-splitter-color);
409 border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
410}
411
412.devtools-textinput,
413.devtools-searchinput {
414 background-color: #000000;
415 color: #E7ADE7;
416}
417
418.CodeMirror-Tern-fname {
419 color: #A09090;
420}
421
422.CodeMirror-hints,
423.CodeMirror-Tern-tooltip {
424 background-color: #000000;
425 color: var(--theme-body-color);
426}
427
428/* === BEGIN toolbars.inc.css === */
429
430/* Toolbars */
431.devtools-toolbar,
432.devtools-sidebar-tabs > tabs {
433}
434
435.devtools-toolbar {
436}
437
438.devtools-toolbar checkbox {
439 /* LCARStrek checkbox colors don't work well against toolbar background */
440 background-color: #000000;
441 padding: 2px;
442}
443.devtools-toolbar checkbox .checkbox-check {
444}
445.devtools-toolbar checkbox .checkbox-label-box {
446}
447.devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
448}
449
450/* Toolbar buttons */
451.devtools-menulist,
452.devtools-toolbarbutton {
453/* transition: background 0.05s ease-in-out; */
454}
455
456.devtools-menulist:-moz-focusring,
457.devtools-toolbarbutton:-moz-focusring {
458 outline: 1px dotted #008484;
459}
460
461.devtools-toolbarbutton[standalone] {
462}
463.devtools-toolbarbutton[label][standalone] {
464}
465
466.devtools-toolbarbutton:not([label]),
467.devtools-toolbarbutton[text-as-image] {
468 min-width: 20px;
469}
470
471#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
472 -moz-padding-start: 5px;
473 -moz-padding-end: 5px;
474 min-width: inherit;
475}
476
477/* Command buttons with menupopups should be styled slightly differently -
478 no background color and a bit more narrow */
479#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
480 background: transparent;
481}
482#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
483 padding: 0 2px;
484}
485
486.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
487 display: none;
488}
489
490.devtools-toolbar .devtools-toolbarbutton {
491}
492
493.devtools-toolbarbutton > .toolbarbutton-icon {
494}
495
496.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
497/* -moz-box-orient: horizontal; */
498}
499
500.devtools-toolbarbutton[type=menu-button] {
501}
502
503.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
504}
505
506.devtools-menulist > .menulist-dropmarker {
507}
508
509.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
510.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
511}
512
513.devtools-menulist,
514.devtools-toolbarbutton {
515}
516
517/* Text-only buttons */
518.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
519#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
520/* background-color: rgba(0, 0, 0, .2); / Splitter */
521}
522
523/* Button States */
524.devtools-toolbarbutton:hover,
525#toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover,
526.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
527/* background: rgba(0, 0, 0, .3); / Splitters */
528}
529
530.devtools-toolbarbutton:hover:active,
531#toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover:active,
532.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
533/* background: rgba(0, 0, 0, .4); / Splitters */
534}
535
536/* Menu type buttons and checked states */
537.devtools-toolbarbutton[checked=true],
538#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
539/* background: rgba(29, 79, 115, .7); / Select highlight blue /
540 color: #f5f7fa;*/
541}
542
543.devtools-menulist[open=true],
544.devtools-toolbarbutton[open=true],
545.devtools-toolbarbutton[open=true]:hover,
546.devtools-toolbarbutton[open=true]:hover:active,
547.devtools-toolbarbutton[checked=true],
548.devtools-toolbarbutton[checked=true]:hover,
549#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
550/* background: rgba(29, 79, 115, .8); / Select highlight blue /
551 color: #f5f7fa; */
552}
553
554.devtools-toolbarbutton[checked=true]:hover {
555}
556
557.devtools-option-toolbarbutton {
558 list-style-image: url("chrome://browser/skin/devtools/tool-options-tbutton.svg");
559/* background: none;
560 border: none; */
561}
562
563.devtools-option-toolbarbutton:hover,
564.devtools-option-toolbarbutton[open=true] {
565 list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
566}
567
568/* Toolbar button groups */
569.devtools-toolbarbutton-group > .devtools-toolbarbutton {
570}
571
572.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
573}
574
575.devtools-toolbarbutton-group + .devtools-toolbarbutton {
576}
577
578.devtools-separator + .devtools-toolbarbutton {
579}
580
581/* Text input */
582
583.devtools-textinput,
584.devtools-searchinput {
585/* -moz-appearance: none;
586 margin: 0 3px;
587 border: 1px solid rgb(88, 94, 101);
588 border-radius: 2px;
589 background-color: rgba(24, 29, 32, 1);
590 padding: 4px 6px;
591 color: rgba(184, 200, 217, 1);*/
592}
593
594.devtools-searchinput {
595/* margin-top: 1px;
596 margin-bottom: 1px;
597 padding: 0;*/
598 -moz-padding-start: 22px;
599 -moz-padding-end: 12px;
600 background-position: 8px center;
601 background-size: 11px 11px;
602 background-repeat: no-repeat;
603 font-size: inherit;
604
605 background-image: url("magnifying-glass.png");
606}
607
608@media (min-resolution: 2dppx) {
609 .devtools-searchinput {
610 background-image: url("magnifying-glass@2x.png");
611 }
612}
613
614.devtools-searchinput:-moz-locale-dir(rtl) {
615 background-position: calc(100% - 8px) center;
616}
617
618.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
619 display: none;
620}
621
622.devtools-no-search-result {
623 border-color: #FF0000 !important;
624}
625
626/* Close button */
627
628.devtools-closebutton {
629 min-width: 16px;
630 width: 16px;
631}
632
633.devtools-closebutton > image {
634 width: 16px;
635 height: 16px;
636 -moz-appearance: none;
637 background-size: 32px 16px;
638 background-image: url("chrome://browser/skin/devtools/close@2x.png");
639 background-position: 0 center;
640 background-repeat: no-repeat;
641}
642
643.devtools-closebutton:hover > image,
644.devtools-closebutton:hover:active > image {
645 background-position: -16px center;
646}
647
648.devtools-closebutton > .toolbarbutton-text {
649 display: none;
650}
651
652/* In-tools sidebar */
653
654.devtools-sidebar-tabs {
655}
656
657.devtools-sidebar-tabs > tabpanels {
658 padding: 0;
659 border: 0;
660}
661
662.devtools-sidebar-tabs > tabs {
663 position: static;
664 overflow: hidden;
665}
666
667.devtools-sidebar-tabs > tabs > .tabs-right,
668.devtools-sidebar-tabs > tabs > .tabs-left {
669 display: none;
670}
671
672.devtools-sidebar-tabs > tabs > tab {
673 min-width: 78px;
674 text-align: center;
675 -moz-box-flex: 1;
676 position: static;
677 margin-top: 0;
678}
679
680.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
681 position: static;
682}
683
684.devtools-sidebar-tabs > tabs > tab:last-of-type {
685 -moz-border-end-width: 0;
686}
687
688.devtools-sidebar-tabs > tabs > tab:first-child {
689}
690
691.devtools-sidebar-tabs > tabs > tab:hover {
692}
693
694.devtools-sidebar-tabs > tabs > tab:hover:active {
695}
696
697.devtools-sidebar-tabs > tabs > tab[selected] + tab {
698}
699
700.devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
701}
702
703.devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
704}
705
706.devtools-sidebar-tabs > tabs > tab[selected],
707.devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
708}
709
710/* Toolbox - moved from toolbox.css.
711 * Rules that apply to the global toolbox like command buttons,
712 * devtools tabs, docking buttons, etc. */
713
714#toolbox-controls > toolbarbutton,
715#toolbox-dock-buttons > toolbarbutton {
716 min-width: 16px;
717/* padding: 1px 3px; */
718}
719
720#toolbox-dock-buttons > toolbarbutton > image {
721 width: 16px;
722 height: 16px;
723 background-size: 32px 16px;
724 background-position: 0 center;
725 background-repeat: no-repeat;
726}
727
728#toolbox-dock-buttons > toolbarbutton:hover > image {
729 background-position: -16px center;
730}
731
732#toolbox-dock-bottom > image {
733 background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
734}
735
736#toolbox-dock-side > image {
737 background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
738}
739
740#toolbox-dock-window > image {
741 background-image: url("chrome://browser/skin/devtools/undock@2x.png");
742}
743
744#toolbox-dock-window,
745#toolbox-dock-bottom,
746#toolbox-dock-side {
747}
748
749#toolbox-dock-window:hover,
750#toolbox-dock-bottom:hover,
751#toolbox-dock-side:hover {
752}
753
754.devtools-separator {
755 margin: 0 2px;
756 width: 2px;
757}
758
759#toolbox-buttons:empty + .devtools-separator,
760.devtools-separator[invisible] {
761 visibility: hidden;
762}
763
764#toolbox-controls-separator {
765 margin: 0;
766}
767
768/* Command buttons */
769
770.command-button {
771/* padding: 1px 4px; */
772 min-width: 16px;
773}
774
775.command-button:hover {
776}
777.command-button:hover:active {
778}
779
780.command-button > image {
781 width: 16px;
782 height: 16px;
783 background-size: 32px 16px;
784 background-position: 0 center;
785 background-repeat: no-repeat;
786}
787
788.command-button:hover > image,
789.command-button:hover:active > image,
790.command-button[checked=true] > image,
791.command-button[open=true] > image {
792 background-position: -16px center;
793}
794
795#command-button-paintflashing > image {
796 background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
797}
798
799#command-button-screenshot > image {
800 background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
801}
802
803#command-button-responsive > image {
804 background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
805}
806
807#command-button-tilt > image {
808 background-image: url("chrome://browser/skin/devtools/command-tilt.png");
809}
810
811#command-button-scratchpad > image {
812 background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
813}
814
815#command-button-pick > image {
816 background-image: url("chrome://browser/skin/devtools/command-pick.png");
817}
818
819#command-button-frames > image {
820 background-image: url("chrome://browser/skin/devtools/command-frames.png");
821}
822
823#command-button-splitconsole > image {
824 background-image: url("chrome://browser/skin/devtools/command-console.png");
825}
826
827#command-button-eyedropper > image {
828 background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
829}
830
831@media (min-resolution: 2dppx) {
832 #command-button-paintflashing > image {
833 background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
834 }
835
836 #command-button-screenshot > image {
837 background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
838 }
839
840 #command-button-responsive > image {
841 background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
842 }
843
844 #command-button-tilt > image {
845 background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
846 }
847
848 #command-button-scratchpad > image {
849 background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
850 }
851
852 #command-button-pick > image {
853 background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
854 }
855
856 #command-button-frames > image {
857 background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
858 }
859
860 #command-button-splitconsole > image {
861 background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
862 }
863
864 #command-button-eyedropper > image {
865 background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
866 }
867}
868
869/* Tabs */
870
871.devtools-tabbar {
872}
873
874#toolbox-tabs {
875 margin: 0 2px;
876 -moz-padding-start: 3px;
877 background-color: #000000;
878 color: #FFCF00;
879}
880
881.devtools-tab {
882 min-width: 32px;
883 max-width: 110px;
884 color: #000000;
885 margin: 0;
886 -moz-margin-end: 3px;
887 padding: 1px;
888 -moz-padding-start: 3px;
889 background-color: #C09070;
890 border-radius: 8px 8px 0 0;
891}
892
893.devtools-tab > image {
894 -moz-margin-end: 0px;
895/* -moz-margin-start: 4px; */
896 max-height: 16px;
897 width: 16px; /* Prevents collapse during theme switching */
898}
899
900.devtools-tab:hover > image {
901}
902
903.devtools-tab:active > image,
904.devtools-tab[selected] > image {
905}
906
907.devtools-tab:hover,
908.devtools-tab:hover:active {
909 background-color: #FFCF00;
910 color: #000000;
911}
912
913.devtools-tab[selected] {
914 background-color: #008484;
915 color: #000000;
916}
917
918.devtools-tab > spacer {
919 max-width: 0;
920 -moz-box-flex: 0;
921}
922
923.devtools-tab > image {
924 -moz-margin-end: 0;
925 -moz-margin-start: 0;
926}
927
928#toolbox-option-container {
929 background-color: #000000;
930 -moz-padding-start: 3px;
931}
932
933#toolbox-tab-options {
934 min-width: 20px;
935}
936
937#toolbox-tab-options > image {
938 -moz-margin-end: 3px;
939}
940
941.devtools-tab:not([highlighted]) > .highlighted-icon,
942.devtools-tab[selected] > .highlighted-icon,
943.devtools-tab:not([selected])[highlighted] > .default-icon {
944 visibility: collapse;
945}
946
947.devtools-tab:not([selected])[highlighted] {
948 color: #FFCF00;
949}
950
951.devtools-tab:not([highlighted]) > .highlighted-icon,
952.devtools-tab[selected] > .highlighted-icon,
953.devtools-tab:not([selected])[highlighted] > .default-icon {
954 visibility: collapse;
955}
956
957/* The options tab is special - it doesn't have the same parent
958 as the other tabs (toolbox-option-container vs toolbox-tabs) */
959#toolbox-option-container .devtools-tab:not([selected]) {
960/* background-color: transparent;*/
961}
962#toolbox-option-container .devtools-tab {
963/* border-color: transparent;
964 border-width: 0;
965 -moz-padding-start: 1px;*/
966}
967#toolbox-tab-options > image {
968/* margin: 0 8px;*/
969}
970
971.hidden-labels-box:not(.visible) > label,
972.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
973 display: none;
974}
975
976/* === END toolbars.inc.css === */