1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
13 #inspector-inspect-toolbutton {
14 list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
15 -moz-image-region: rect(0 16px 16px 0);
18 #inspector-inspect-toolbutton[checked=true],
19 #inspector-inspect-toolbutton:hover {
20 -moz-image-region: rect(0 32px 16px 16px);
23 /* Highlighter toolbar - breadcrumbs */
25 #inspector-breadcrumbs {
27 /* A fake 1px-shadow is included in the border-images of the
28 inspector-breadcrumbs-buttons, to match toolbar-buttons style.
29 This negative margin compensate the extra row of pixels created
34 #inspector-breadcrumbs > .scrollbutton-up,
35 #inspector-breadcrumbs > .scrollbutton-down {
41 #inspector-breadcrumbs > .scrollbutton-up {
45 #inspector-breadcrumbs > .scrollbutton-down {
49 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
50 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
53 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
54 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
58 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
59 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
62 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
63 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
66 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) {
67 border-top-right-radius: 0;
68 border-bottom-right-radius: 0;
71 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) {
72 border-top-left-radius: 0;
73 border-bottom-left-radius: 0;
76 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) {
77 border-top-left-radius: 0;
78 border-bottom-left-radius: 0;
81 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) {
82 border-top-right-radius: 0;
83 border-bottom-right-radius: 0;
86 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
87 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
88 /* transform: scaleX(-1); */
91 .inspector-breadcrumbs-button {
92 background-color: #000000;
95 border-width: 2px 13px;
98 width: 85px; /* Can't use max-width. See bug 723132 */
99 /* The content of the button can be larger than the button */
106 .inspector-breadcrumbs-button:hover {
107 background-color: #FFCF00;
111 .inspector-breadcrumbs-button[checked]:not(:hover) {
112 background-color: #008484;
116 .inspector-breadcrumbs-button[siblings-menu-open],
117 .inspector-breadcrumbs-button:active {
118 background-color: #FF9F00;
122 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
126 .inspector-breadcrumbs-button:-moz-focusring > label {
127 border-bottom: 1px dotted #008484;
130 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
131 /*color: hsl(208,100%,60%); */
134 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
135 /*color: hsl(205,100%,70%); */
138 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
142 .inspector-breadcrumbs-id,
143 .inspector-breadcrumbs-classes {
147 .inspector-breadcrumbs-pseudo-classes {
151 /* fit height of other buttons to breadcrumbs */
152 #inspector-toolbar .devtools-toolbarbutton,
153 #highlighter-closebutton,
154 #inspector-option-toolbarbutton {
158 /* Highlighter toolbar - breadcrumbs - LTR */
160 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
163 .inspector-breadcrumbs-button {
164 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
167 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
168 .inspector-breadcrumbs-button:not([checked]):hover:active {
169 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
172 .inspector-breadcrumbs-button[checked] {
173 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
176 .inspector-breadcrumbs-button[checked][siblings-menu-open],
177 .inspector-breadcrumbs-button[checked]:hover:active {
178 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
181 .inspector-breadcrumbs-button:first-of-type {
182 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
185 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
186 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
187 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
190 .inspector-breadcrumbs-button:first-of-type[checked] {
191 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
194 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
195 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
196 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
199 .inspector-breadcrumbs-button:last-of-type {
200 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
203 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
204 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
205 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
208 .inspector-breadcrumbs-button:last-of-type[checked] {
209 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
212 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
213 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
214 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
217 /* Highlighter toolbar - breadcrumbs - RTL */
219 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
222 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
223 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
226 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
227 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
228 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
231 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
232 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
235 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
236 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
237 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
240 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
241 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
244 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
245 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
246 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
249 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
250 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
253 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
254 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
255 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
258 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
259 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
262 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
265 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
266 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
267 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
270 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
271 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
274 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
275 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
276 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
279 #inspector-searchbox {
280 transition-property: max-width, -moz-padding-end, -moz-padding-start;
281 transition-duration: 250ms;
282 transition-timing-function: ease;
285 #inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
289 #inspector-searchbox:not([focused]):not([filled]) {
290 max-width: 20px !important;
291 -moz-padding-end: 6px;
292 -moz-padding-start: 22px;
293 background-position: 8px center, top left, top left;
296 #inspector-searchbox[focused],
297 #inspector-searchbox[filled] {
298 max-width: 200px !important;