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);
54 .theme-bg-contrast { /* contrast bg color to attract attention on a container */
59 .cm-s-mozilla .cm-link { /* original: blue */
64 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
65 * failures in debug builds.
68 .cm-s-mozilla .cm-link:visited { /* original: blue */
73 .cm-s-mozilla .cm-meta,
75 .cm-s-mozilla .cm-comment { /* original: grey */
80 background-color: #000000;
82 border-color: #9C9CFF;
85 .theme-separator { /* original: grey */
86 border-color: #8050B0;
90 .cm-s-mozilla .cm-number { /* original: green */
95 .cm-s-mozilla .cm-attribute,
96 .cm-s-mozilla .cm-variable,
97 .cm-s-mozilla .cm-def,
98 .cm-s-mozilla .cm-property,
99 .cm-s-mozilla .cm-qualifier { /* original: blue */
104 .cm-s-mozilla .cm-builtin,
105 .cm-s-mozilla .cm-tag,
106 .cm-s-mozilla .cm-header { /* original: pink/lavender */
110 .theme-fg-color4 { /* original: purple/violet */
115 .cm-s-mozilla .cm-bracket,
116 .cm-s-mozilla .cm-keyword { /* original: Yellow */
121 .cm-s-mozilla .cm-string,
122 .cm-s-mozilla .cm-string-2 { /* original: Orange */
127 .cm-s-mozilla .cm-atom,
128 .cm-s-mozilla .cm-quote,
129 .cm-s-mozilla .cm-error { /* original: Red */
134 .devtools-toolbar { /* General toolbar styling */
138 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
142 .ruleview-colorswatch,
143 .computedview-colorswatch,
144 .markupview-colorswatch {
145 /* box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
148 /* CodeMirror specific styles.
149 * Best effort to match the existing theme, some of the colors
150 * are duplicated here to prevent weirdness in the main theme. */
152 .CodeMirror { /* Inherit platform specific font sizing and styles */
153 font-family: inherit;
155 background: transparent;
159 .cm-s-mozilla .cm-variable-2,
160 .cm-s-mozilla .cm-variable-3,
161 .cm-s-mozilla .cm-operator,
162 .cm-s-mozilla .cm-special { /* theme-body color */
166 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
167 border-left: solid 1px #FF9F00;
170 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
175 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
180 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
181 background: rgba(0, 132, 132, .25);
184 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
185 outline: solid 1px rgba(0, 132, 132, .4);
189 /* Highlight for a line that contains an error. */
190 div.CodeMirror div.error-line {
191 background: rgba(255, 0, 0, 0.2);
194 /* Highlight for a line that represents a stack frame's location. */
195 div.CodeMirror div.debug-line {
196 background: rgba(156, 156, 255, 0.2);
199 /* Generic highlighted text */
200 div.CodeMirror span.marked-text {
201 background: rgba(255,207,0,0.2);
202 border: 1px dashed rgba(156, 156, 255, 0.6);
203 -moz-margin-start: -1px;
204 -moz-margin-end: -1px;
207 /* Highlight for evaluating current statement. */
208 div.CodeMirror span.eval-text {
209 background-color: #403800;
212 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
216 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
217 border-right-color: #A09090;
218 background-color: #402800;
221 .cm-s-markup-view pre {
226 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
228 .theme-tooltip-panel .panel-arrowcontent {
230 background: rgba(0, 0, 0, .9);
231 /* border-radius: 5px;
233 border: 3px solid #9C9CFF; */
236 /* Overring panel arrow images to fit with our light and dark themes */
238 .theme-tooltip-panel .panel-arrow[side="top"] {
239 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
243 .theme-tooltip-panel .panel-arrow[side="bottom"] {
244 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
248 .theme-tooltip-panel .panel-arrow[side="left"] {
249 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
253 .theme-tooltip-panel .panel-arrow[side="right"] {
254 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
258 @media (min-resolution: 2dppx) {
259 .theme-tooltip-panel .panel-arrow[side="top"],
260 .theme-tooltip-panel .panel-arrow[side="bottom"] {
261 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
264 .theme-tooltip-panel .panel-arrow[side="left"],
265 .theme-tooltip-panel .panel-arrow[side="right"] {
266 list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
270 .theme-tooltip-panel .devtools-tooltip-simple-text {
272 border-bottom: 1px solid #A09090;
275 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
279 /* === BEGIN toolbars.inc.css === */
284 /* LCARStrek checkbox colors don't work well against toolbar background */
285 .devtools-toolbar > checkbox {
286 background-color: #000000;
291 .devtools-toolbarbutton {
294 devtools-menulist:-moz-focusring,
295 .devtools-toolbarbutton:-moz-focusring {
296 outline: 1px dotted #008484;
299 .devtools-toolbarbutton > .toolbarbutton-icon {
302 .devtools-toolbarbutton:not([label]) {
306 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
310 .devtools-toolbarbutton > .toolbarbutton-menubutton-button {
311 /*-moz-box-orient: horizontal;*/
314 .devtools-toolbarbutton:not([checked=true]):hover:active {
317 .devtools-menulist[open=true],
318 .devtools-toolbarbutton[open=true],
319 .devtools-toolbarbutton[checked=true] {
322 .devtools-toolbarbutton[checked=true] {
325 .devtools-toolbarbutton[checked=true]:hover:active {
328 .devtools-option-toolbarbutton {
329 list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
330 -moz-image-region: rect(0px 16px 16px 0px);
335 .devtools-option-toolbarbutton:hover,
336 .devtools-option-toolbarbutton[open=true] {
337 -moz-image-region: rect(0px 32px 16px 16px);
340 .devtools-menulist > .menulist-label-box {
344 .devtools-menulist > .menulist-dropmarker {
347 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
350 .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
353 .devtools-toolbarbutton[type=menu-button] {
355 -moz-box-align: stretch;
358 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
359 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
360 -moz-box-align: center;
366 .devtools-searchinput {
367 -moz-appearance: none;
370 border: 1px solid hsla(211,68%,6%,.6);
371 box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
373 background-color: transparent;
374 background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
376 transition-property: background-color, border-color, box-shadow;
377 transition-duration: 150ms;
378 transition-timing-function: ease;
379 /* color: inherit; */
382 .devtools-searchinput {
383 background-image: url("magnifying-glass.png")/*, linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35))*/;
384 background-repeat: no-repeat;
385 background-position: 4px center, top left, top left;
388 -moz-padding-start: 18px;
389 -moz-padding-end: 12px;
393 .devtools-searchinput:-moz-locale-dir(rtl) {
394 background-position: calc(100% - 4px) center, top left, top left;
397 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
401 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
402 /* color: hsl(208,10%,66%);*/
405 .devtools-no-search-result {
406 /* box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
407 border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;*/
408 background-image: url("magnifying-glass.png"), linear-gradient(rgba(255,0,0,.15), rgba(255,0,0,.35));
413 .devtools-closebutton {
414 list-style-image: url("chrome://global/skin/icons/close-button.gif");
419 .devtools-closebutton > .toolbarbutton-text {
423 .devtools-closebutton:hover,
424 .devtools-closebutton:hover:active {
425 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
428 /* In-tools sidebar */
430 .devtools-sidebar-tabs {
433 .devtools-sidebar-tabs > tabpanels {
438 .devtools-sidebar-tabs > tabs {
443 .devtools-sidebar-tabs > tabs > .tabs-right,
444 .devtools-sidebar-tabs > tabs > .tabs-left {
448 .devtools-sidebar-tabs > tabs > tab {
456 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
460 .devtools-sidebar-tabs > tabs > tab:last-of-type {
461 -moz-border-end-width: 0;
464 .devtools-sidebar-tabs > tabs > tab:first-of-type {
465 -moz-margin-start: 0;
468 .devtools-sidebar-tabs > tabs > tab {
471 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
474 .devtools-sidebar-tabs > tabs > tab {
477 .devtools-sidebar-tabs > tabs > tab:hover {
480 .devtools-sidebar-tabs > tabs > tab:hover:active {
483 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
486 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
489 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
492 .devtools-sidebar-tabs > tabs > tab[selected=true] {
495 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
498 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
501 /* Toolbox - moved from toolbox.css.
502 * Rules that apply to the global toolbox like command buttons,
503 * devtools tabs, docking buttons, etc. */
509 #toolbox-controls > toolbarbutton,
510 #toolbox-dock-buttons > toolbarbutton {
512 /* padding: 1px 3px; */
515 #toolbox-dock-bottom {
516 list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
517 -moz-image-region: rect(0px, 16px, 16px, 0px);
520 #toolbox-dock-bottom:hover {
521 -moz-image-region: rect(0px, 32px, 16px, 16px);
525 list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
526 -moz-image-region: rect(0px, 16px, 16px, 0px);
529 #toolbox-dock-side:hover {
530 -moz-image-region: rect(0px, 32px, 16px, 16px);
533 #toolbox-dock-window {
534 list-style-image: url("chrome://browser/skin/devtools/undock.png");
535 -moz-image-region: rect(0px, 16px, 16px, 0px);
538 #toolbox-dock-window:hover {
539 -moz-image-region: rect(0px, 32px, 16px, 16px);
542 #toolbox-dock-window,
543 #toolbox-dock-bottom,
547 #toolbox-dock-window:hover,
548 #toolbox-dock-bottom:hover,
549 #toolbox-dock-side:hover {
552 #toolbox-controls-separator {
553 -moz-margin-start: 4px;
556 /* Command buttons */
559 /* padding: 1px 4px; */
563 .command-button:hover {
565 .command-button:hover:active {
568 #command-button-paintflashing {
569 list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
570 -moz-image-region: rect(0px, 16px, 16px, 0px);
573 #command-button-paintflashing:hover,
574 #command-button-paintflashing:hover:active,
575 #command-button-paintflashing[checked=true] {
576 -moz-image-region: rect(0px, 32px, 16px, 16px);
579 #command-button-responsive {
580 list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
581 -moz-image-region: rect(0px, 16px, 16px, 0px);
584 #command-button-responsive:hover,
585 #command-button-responsive:hover:active,
586 #command-button-responsive[checked=true] {
587 -moz-image-region: rect(0px, 32px, 16px, 16px);
590 #command-button-tilt {
591 list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
592 -moz-image-region: rect(0px, 16px, 16px, 0px);
595 #command-button-tilt:hover,
596 #command-button-tilt:hover:active,
597 #command-button-tilt[checked=true] {
598 -moz-image-region: rect(0px, 32px, 16px, 16px);
601 #command-button-scratchpad {
602 list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
603 -moz-image-region: rect(0px, 16px, 16px, 0px);
606 #command-button-scratchpad:hover,
607 #command-button-scratchpad:hover:active {
608 -moz-image-region: rect(0px, 32px, 16px, 16px);
611 #command-button-pick {
612 list-style-image: url("chrome://browser/skin/devtools/command-pick.png");
613 -moz-image-region: rect(0px, 16px, 16px, 0px);
616 #command-button-pick:hover,
617 #command-button-pick:hover:active {
618 -moz-image-region: rect(0px, 32px, 16px, 16px);
621 #command-button-splitconsole {
622 list-style-image: url("chrome://browser/skin/devtools/command-console.png");
623 -moz-image-region: rect(0px, 16px, 16px, 0px);
626 #command-button-splitconsole:hover,
627 #command-button-splitconsole:hover:active {
628 -moz-image-region: rect(0px, 32px, 16px, 16px);
638 background-color: #000000;
647 -moz-margin-end: 3px;
649 -moz-padding-start: 3px;
650 background-color: #C09070;
651 border-radius: 8px 8px 0 0;
654 .devtools-tab > image {
655 -moz-margin-end: 0px;
656 /* -moz-margin-start: 4px; */
658 width: 16px; /* Prevents collapse during theme switching */
661 #toolbox-tab-options > image {
665 .devtools-tab:hover > image {
668 .devtools-tab:active > image,
669 .devtools-tab[selected=true] > image {
673 .devtools-tab:hover:active {
674 background-color: #FFCF00;
678 .devtools-tab[selected=true] {
679 background-color: #008484;
683 .devtools-tab > spacer {
688 .devtools-tab > image {
690 -moz-margin-start: 0;
693 #toolbox-tab-options {
697 #toolbox-tab-options > image {
698 -moz-margin-end: 3px;
701 .devtools-tab:not(.highlighted) > .highlighted-icon,
702 .devtools-tab[selected=true] > .highlighted-icon,
703 .devtools-tab:not([selected=true]).highlighted > .default-icon {
704 visibility: collapse;
707 .devtools-tab:not([selected=true]).highlighted {
711 .devtools-tab:not(.highlighted) > .highlighted-icon,
712 .devtools-tab[selected=true] > .highlighted-icon,
713 .devtools-tab:not([selected=true]).highlighted > .default-icon {
714 visibility: collapse;
717 .hidden-labels-box:not(.visible) > label,
718 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
722 /* === END toolbars.inc.css === */