9 #inspector-inspect-toolbutton {
10 list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
11 -moz-image-region: rect(0 16px 16px 0);
14 #inspector-inspect-toolbutton[checked=true],
15 #inspector-inspect-toolbutton:hover {
16 -moz-image-region: rect(0 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 {
37 #inspector-breadcrumbs > .scrollbutton-up {
41 #inspector-breadcrumbs > .scrollbutton-down {
45 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
46 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
49 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
50 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
54 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
55 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
58 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
59 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
62 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) {
63 border-top-right-radius: 0;
64 border-bottom-right-radius: 0;
67 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) {
68 border-top-left-radius: 0;
69 border-bottom-left-radius: 0;
72 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) {
73 border-top-left-radius: 0;
74 border-bottom-left-radius: 0;
77 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) {
78 border-top-right-radius: 0;
79 border-bottom-right-radius: 0;
82 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
83 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
84 /* transform: scaleX(-1); */
87 .inspector-breadcrumbs-button {
88 background-color: #000000;
91 border-width: 2px 13px;
94 width: 85px; /* Can't use max-width. See bug 723132 */
95 /* The content of the button can be larger than the button */
102 .inspector-breadcrumbs-button:hover {
103 background-color: #FFCF00;
107 .inspector-breadcrumbs-button[checked]:not(:hover) {
108 background-color: #008484;
112 .inspector-breadcrumbs-button[siblings-menu-open],
113 .inspector-breadcrumbs-button:active {
114 background-color: #FF9F00;
118 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
122 .inspector-breadcrumbs-button:-moz-focusring > label {
123 border-bottom: 1px dotted #008484;
126 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
127 /*color: hsl(208,100%,60%); */
130 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
131 /*color: hsl(205,100%,70%); */
134 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
138 .inspector-breadcrumbs-id,
139 .inspector-breadcrumbs-classes {
143 .inspector-breadcrumbs-pseudo-classes {
147 /* fit height of other buttons to breadcrumbs */
148 #inspector-toolbar .devtools-toolbarbutton,
149 #highlighter-closebutton,
150 #inspector-option-toolbarbutton {
154 /* Highlighter toolbar - breadcrumbs - LTR */
156 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
159 .inspector-breadcrumbs-button {
160 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
163 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
164 .inspector-breadcrumbs-button:not([checked]):hover:active {
165 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
168 .inspector-breadcrumbs-button[checked] {
169 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
172 .inspector-breadcrumbs-button[checked][siblings-menu-open],
173 .inspector-breadcrumbs-button[checked]:hover:active {
174 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
177 .inspector-breadcrumbs-button:first-of-type {
178 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
181 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
182 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
183 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
186 .inspector-breadcrumbs-button:first-of-type[checked] {
187 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
190 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
191 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
192 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
195 .inspector-breadcrumbs-button:last-of-type {
196 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
199 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
200 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
201 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
204 .inspector-breadcrumbs-button:last-of-type[checked] {
205 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
208 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
209 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
210 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
213 /* Highlighter toolbar - breadcrumbs - RTL */
215 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
218 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
219 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
222 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
223 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
224 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
227 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
228 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
231 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
232 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
233 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
236 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
237 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
240 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
241 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
242 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
245 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
246 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
249 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
250 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
251 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
254 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
255 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
258 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
261 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
262 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
263 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
266 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
267 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
270 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
271 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
272 -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;