10 #inspector-inspect-toolbutton {
11 list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
12 -moz-image-region: rect(0px 16px 16px 0px);
15 #inspector-inspect-toolbutton[checked=true] {
16 -moz-image-region: rect(0px 32px 16px 16px);
19 /* Highlighter toolbar - breadcrumbs *
21 #inspector-breadcrumbs {
23 /* A fake 1px-shadow is included in the border-images of the
24 inspector-breadcrumbs-buttons, to match toolbar-buttons style.
25 This negative margin compensate the extra row of pixels created
30 #inspector-breadcrumbs > .scrollbutton-up,
31 #inspector-breadcrumbs > .scrollbutton-down {
32 -moz-appearance: none;
33 border: 1px solid hsla(210,8%,5%,.45);
34 background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
35 box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
39 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
40 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
41 border-color: hsla(210,8%,5%,.6);
42 background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
43 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
46 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
47 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
48 -moz-appearance: none;
49 list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
50 -moz-image-region: rect(0px 7px 16px 0px);
54 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
55 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
59 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
60 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
61 -moz-image-region: rect(0px 14px 16px 7px);
64 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
65 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
66 transform: scaleX(-1);
69 .inspector-breadcrumbs-button {
70 -moz-appearance: none;
71 background-color: transparent;
73 border-width: 2px 13px;
75 color: hsl(210,30%,85%);
76 width: 85px; /* Can't use max-width. See bug 723132 *
77 /* The content of the button can be larger than the button *
84 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
88 .inspector-breadcrumbs-button:-moz-focusring > label {
89 border-bottom: 1px dotted hsla(210,30%,85%,0.4);
92 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
93 color: hsl(200,100%,60%);
96 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
97 color: hsl(200,100%,70%);
100 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
101 color: hsl(20, 100%, 70%);
104 .inspector-breadcrumbs-id,
105 .inspector-breadcrumbs-classes {
109 .inspector-breadcrumbs-pseudo-classes {
110 color: hsl(20, 100%, 85%);
113 /* Highlighter toolbar - breadcrumbs - LTR *
115 .inspector-breadcrumbs-button {
116 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
119 .inspector-breadcrumbs-button:not([checked]):hover:active {
120 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
123 .inspector-breadcrumbs-button[checked] {
124 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
127 .inspector-breadcrumbs-button[checked]:hover:active {
128 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
131 .inspector-breadcrumbs-button:first-of-type {
132 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
135 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
136 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
139 .inspector-breadcrumbs-button:first-of-type[checked] {
140 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
143 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
144 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
147 .inspector-breadcrumbs-button:last-of-type {
148 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
151 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
152 border-left-width: 0;
155 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
156 border-right-width: 0;
159 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
160 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
163 .inspector-breadcrumbs-button:last-of-type[checked] {
164 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
167 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
168 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
171 /* Highlighter toolbar - breadcrumbs - RTL *
173 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
174 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
177 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
178 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
181 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
182 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
185 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
186 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
189 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
190 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
193 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
194 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
197 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
198 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
201 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
202 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
205 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
206 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
209 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
210 border-right-width: 0;
213 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
214 border-left-width: 0;
217 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
218 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
221 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
222 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
225 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
226 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;