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