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/. */
7 * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
18 background-repeat: no-repeat;
19 background-image: url("chrome://browser/skin/devtools/controls.png");
20 background-position: 0 -14px;
23 .theme-twisty:-moz-focusring {
28 background-position: -14px -14px;
32 display: inline-block;
38 background-image: url("chrome://browser/skin/devtools/controls.png");
39 background-position: 0 0;
42 .theme-checkbox[checked] {
43 background-position: -14px 0;
51 background-color: rgba(0,0,0,0.5);
55 .variable-or-property[changed] { /* contrast bg color to attract attention on a container */
60 .cm-s-mozilla .cm-link { /* original: blue */
65 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
66 * failures in debug builds.
69 .cm-s-mozilla .cm-link:visited { /* original: blue */
74 .cm-s-mozilla .cm-meta,
76 .cm-s-mozilla .cm-comment,
77 .variable-or-property .token-undefined,
78 .variable-or-property .token-null { /* original: grey */
83 background-color: #000000;
85 border-color: #9C9CFF;
88 .theme-separator { /* original: grey */
89 border-color: #8050B0;
93 .cm-s-mozilla .cm-number,
94 .variable-or-property .token-number,
95 .variable-or-property[return] > .title > .name { /* original: green */
100 .cm-s-mozilla .cm-attribute,
101 .cm-s-mozilla .cm-variable,
102 .cm-s-mozilla .cm-def,
103 .cm-s-mozilla .cm-property,
104 .cm-s-mozilla .cm-qualifier,
105 .variables-view-variable > .title > .name,
106 .variable-or-property[scope] > .title > .name { /* original: blue */
111 .cm-s-mozilla .cm-builtin,
112 .cm-s-mozilla .cm-tag,
113 .cm-s-mozilla .cm-header,
114 .variables-view-property > .title > .name,
115 .variable-or-property[safe-getter] > .title > .name { /* original: pink/lavender */
119 .theme-fg-color4 { /* original: purple/violet */
124 .cm-s-mozilla .cm-bracket,
125 .cm-s-mozilla .cm-keyword { /* original: Yellow */
130 .cm-s-mozilla .cm-string,
131 .cm-s-mozilla .cm-string-2,
132 .variable-or-property .token-string { /* original: Orange */
137 .cm-s-mozilla .cm-atom,
138 .cm-s-mozilla .cm-quote,
139 .cm-s-mozilla .cm-error,
140 .variable-or-property .token-boolean,
141 .variable-or-property[exception] > .title > .name { /* original: Red */
146 .devtools-toolbar { /* General toolbar styling */
150 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
154 .ruleview-colorswatch,
155 .computedview-colorswatch,
156 .markupview-colorswatch {
157 /* box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
160 .variables-view-scope:focus > .title,
161 .variable-or-property:focus > .title {
162 background-color: #008484; /* fg-color2 */
166 /* CodeMirror specific styles.
167 * Best effort to match the existing theme, some of the colors
168 * are duplicated here to prevent weirdness in the main theme. */
170 .CodeMirror { /* Inherit platform specific font sizing and styles */
171 font-family: inherit;
173 background: transparent;
177 .cm-s-mozilla .cm-variable-2,
178 .cm-s-mozilla .cm-variable-3,
179 .cm-s-mozilla .cm-operator,
180 .cm-s-mozilla .cm-special { /* theme-body color */
184 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
185 border-left: solid 1px #FF9F00;
188 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
193 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
198 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
199 background: rgba(0, 132, 132, .25);
202 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
203 outline: solid 1px rgba(0, 132, 132, .4);
207 /* Highlight for a line that contains an error. */
208 div.CodeMirror div.error-line {
209 background: rgba(255, 0, 0, 0.2);
212 /* Highlight for a line that represents a stack frame's location. */
213 div.CodeMirror div.debug-line {
214 background: rgba(156, 156, 255, 0.2);
217 /* Generic highlighted text */
218 div.CodeMirror span.marked-text {
219 background: rgba(255,207,0,0.2);
220 border: 1px dashed rgba(156, 156, 255, 0.6);
221 -moz-margin-start: -1px;
222 -moz-margin-end: -1px;
225 /* Highlight for evaluating current statement. */
226 div.CodeMirror span.eval-text {
227 background-color: #403800;
230 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
234 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
235 border-right-color: #A09090;
236 background-color: #402800;
239 .cm-s-markup-view pre {
244 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
246 .theme-tooltip-panel .panel-arrowcontent {
248 background: rgba(0, 0, 0, .9);
249 /* border-radius: 5px;
251 border: 3px solid #9C9CFF; */
254 /* Overring panel arrow images to fit with our light and dark themes */
256 .theme-tooltip-panel .panel-arrow[side="top"] {
257 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
261 .theme-tooltip-panel .panel-arrow[side="bottom"] {
262 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
266 .theme-tooltip-panel .panel-arrow[side="left"] {
267 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
271 .theme-tooltip-panel .panel-arrow[side="right"] {
272 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
276 @media (min-resolution: 2dppx) {
277 .theme-tooltip-panel .panel-arrow[side="top"],
278 .theme-tooltip-panel .panel-arrow[side="bottom"] {
279 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
282 .theme-tooltip-panel .panel-arrow[side="left"],
283 .theme-tooltip-panel .panel-arrow[side="right"] {
284 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
288 .theme-tooltip-panel .devtools-tooltip-simple-text {
290 border-bottom: 1px solid #A09090;
293 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
297 /* === BEGIN toolbars.inc.css === */
302 /* LCARStrek checkbox colors don't work well against toolbar background */
303 .devtools-toolbar > checkbox {
304 background-color: #000000;
309 .devtools-toolbarbutton {
312 devtools-menulist:-moz-focusring,
313 .devtools-toolbarbutton:-moz-focusring {
314 outline: 1px dotted #008484;
317 .devtools-toolbarbutton > .toolbarbutton-icon {
320 .devtools-toolbarbutton:not([label]) {
324 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
328 .devtools-toolbarbutton > .toolbarbutton-menubutton-button {
329 /*-moz-box-orient: horizontal;*/
332 .devtools-toolbarbutton:not([checked=true]):hover:active {
335 .devtools-menulist[open=true],
336 .devtools-toolbarbutton[open=true],
337 .devtools-toolbarbutton[checked=true] {
340 .devtools-toolbarbutton[checked=true] {
343 .devtools-toolbarbutton[checked=true]:hover:active {
346 .devtools-option-toolbarbutton {
347 list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
348 -moz-image-region: rect(0px 16px 16px 0px);
353 .devtools-option-toolbarbutton:hover,
354 .devtools-option-toolbarbutton[open=true] {
355 -moz-image-region: rect(0px 32px 16px 16px);
358 .devtools-menulist > .menulist-label-box {
362 .devtools-menulist > .menulist-dropmarker {
365 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
368 .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
371 .devtools-toolbarbutton[type=menu-button] {
373 -moz-box-align: stretch;
376 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
377 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
378 -moz-box-align: center;
384 .devtools-searchinput {
385 -moz-appearance: none;
388 border: 1px solid hsla(211,68%,6%,.6);
389 box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
391 background-color: transparent;
392 background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
394 transition-property: background-color, border-color, box-shadow;
395 transition-duration: 150ms;
396 transition-timing-function: ease;
397 /* color: inherit; */
400 .devtools-searchinput {
401 background-image: url("magnifying-glass.png")/*, linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35))*/;
402 background-repeat: no-repeat;
403 background-position: 4px center, top left, top left;
406 -moz-padding-start: 18px;
407 -moz-padding-end: 12px;
411 .devtools-searchinput:-moz-locale-dir(rtl) {
412 background-position: calc(100% - 4px) center, top left, top left;
415 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
419 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
420 /* color: hsl(208,10%,66%);*/
423 .devtools-no-search-result {
424 /* box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
425 border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;*/
426 background-image: url("magnifying-glass.png"), linear-gradient(rgba(255,0,0,.15), rgba(255,0,0,.35));
431 .devtools-closebutton {
432 list-style-image: url("chrome://global/skin/icons/close-button.gif");
437 .devtools-closebutton > .toolbarbutton-text {
441 .devtools-closebutton:hover,
442 .devtools-closebutton:hover:active {
443 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
446 /* In-tools sidebar */
448 .devtools-sidebar-tabs {
451 .devtools-sidebar-tabs > tabpanels {
456 .devtools-sidebar-tabs > tabs {
461 .devtools-sidebar-tabs > tabs > .tabs-right,
462 .devtools-sidebar-tabs > tabs > .tabs-left {
466 .devtools-sidebar-tabs > tabs > tab {
474 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
478 .devtools-sidebar-tabs > tabs > tab:last-of-type {
479 -moz-border-end-width: 0;
482 .devtools-sidebar-tabs > tabs > tab:first-of-type {
483 -moz-margin-start: 0;
486 .devtools-sidebar-tabs > tabs > tab {
489 .devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
492 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
495 .devtools-sidebar-tabs > tabs > tab {
498 .devtools-sidebar-tabs > tabs > tab:hover {
501 .devtools-sidebar-tabs > tabs > tab:hover:active {
504 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
507 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
510 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
513 .devtools-sidebar-tabs > tabs > tab[selected=true] {
516 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
519 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
522 /* Toolbox - moved from toolbox.css.
523 * Rules that apply to the global toolbox like command buttons,
524 * devtools tabs, docking buttons, etc. */
530 #toolbox-controls > toolbarbutton,
531 #toolbox-dock-buttons > toolbarbutton {
533 /* padding: 1px 3px; */
536 #toolbox-dock-bottom {
537 list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
538 -moz-image-region: rect(0px, 16px, 16px, 0px);
541 #toolbox-dock-bottom:hover {
542 -moz-image-region: rect(0px, 32px, 16px, 16px);
546 list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
547 -moz-image-region: rect(0px, 16px, 16px, 0px);
550 #toolbox-dock-side:hover {
551 -moz-image-region: rect(0px, 32px, 16px, 16px);
554 #toolbox-dock-window {
555 list-style-image: url("chrome://browser/skin/devtools/undock.png");
556 -moz-image-region: rect(0px, 16px, 16px, 0px);
559 #toolbox-dock-window:hover {
560 -moz-image-region: rect(0px, 32px, 16px, 16px);
563 #toolbox-dock-window,
564 #toolbox-dock-bottom,
568 #toolbox-dock-window:hover,
569 #toolbox-dock-bottom:hover,
570 #toolbox-dock-side:hover {
573 #toolbox-controls-separator {
574 -moz-margin-start: 4px;
577 /* Command buttons */
580 /* padding: 1px 4px; */
584 .command-button:hover {
586 .command-button:hover:active {
589 #command-button-paintflashing {
590 list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
591 -moz-image-region: rect(0px, 16px, 16px, 0px);
594 #command-button-paintflashing:hover,
595 #command-button-paintflashing:hover:active,
596 #command-button-paintflashing[checked=true] {
597 -moz-image-region: rect(0px, 32px, 16px, 16px);
600 #command-button-responsive {
601 list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
602 -moz-image-region: rect(0px, 16px, 16px, 0px);
605 #command-button-responsive:hover,
606 #command-button-responsive:hover:active,
607 #command-button-responsive[checked=true] {
608 -moz-image-region: rect(0px, 32px, 16px, 16px);
611 #command-button-tilt {
612 list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
613 -moz-image-region: rect(0px, 16px, 16px, 0px);
616 #command-button-tilt:hover,
617 #command-button-tilt:hover:active,
618 #command-button-tilt[checked=true] {
619 -moz-image-region: rect(0px, 32px, 16px, 16px);
622 #command-button-scratchpad {
623 list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
624 -moz-image-region: rect(0px, 16px, 16px, 0px);
627 #command-button-scratchpad:hover,
628 #command-button-scratchpad:hover:active {
629 -moz-image-region: rect(0px, 32px, 16px, 16px);
632 #command-button-pick {
633 list-style-image: url("chrome://browser/skin/devtools/command-pick.png");
634 -moz-image-region: rect(0px, 16px, 16px, 0px);
637 #command-button-pick:hover,
638 #command-button-pick:hover:active {
639 -moz-image-region: rect(0px, 32px, 16px, 16px);
642 #command-button-splitconsole {
643 list-style-image: url("chrome://browser/skin/devtools/command-console.png");
644 -moz-image-region: rect(0px, 16px, 16px, 0px);
647 #command-button-splitconsole:hover,
648 #command-button-splitconsole:hover:active {
649 -moz-image-region: rect(0px, 32px, 16px, 16px);
659 background-color: #000000;
668 -moz-margin-end: 3px;
670 -moz-padding-start: 3px;
671 background-color: #C09070;
672 border-radius: 8px 8px 0 0;
675 .devtools-tab:first-child {
678 .devtools-tab:last-child {
681 .devtools-tab > image {
682 -moz-margin-end: 0px;
683 /* -moz-margin-start: 4px; */
685 width: 16px; /* Prevents collapse during theme switching */
688 #toolbox-tab-options > image {
692 .devtools-tab:hover > image {
695 .devtools-tab:active > image,
696 .devtools-tab[selected=true] > image {
700 .devtools-tab:hover:active {
701 background-color: #FFCF00;
705 .devtools-tab[selected=true] {
706 background-color: #008484;
710 .devtools-tab > spacer {
715 .devtools-tab > image {
717 -moz-margin-start: 0;
720 #toolbox-tab-options {
724 #toolbox-tab-options > image {
725 -moz-margin-end: 3px;
728 .devtools-tab:not(.highlighted) > .highlighted-icon,
729 .devtools-tab[selected=true] > .highlighted-icon,
730 .devtools-tab:not([selected=true]).highlighted > .default-icon {
731 visibility: collapse;
734 .devtools-tab:not([selected=true]).highlighted {
738 .devtools-tab:not(.highlighted) > .highlighted-icon,
739 .devtools-tab[selected=true] > .highlighted-icon,
740 .devtools-tab:not([selected=true]).highlighted > .default-icon {
741 visibility: collapse;
744 .hidden-labels-box:not(.visible) > label,
745 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
749 /* === END toolbars.inc.css === */