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