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 /* Highlighter toolbar - breadcrumbs */
15 #inspector-breadcrumbs {
17 /* A fake 1px-shadow is included in the border-images of the
18 inspector-breadcrumbs-buttons, to match toolbar-buttons style.
19 This negative margin compensate the extra row of pixels created
24 #inspector-breadcrumbs > .scrollbutton-up,
25 #inspector-breadcrumbs > .scrollbutton-down {
31 #inspector-breadcrumbs > .scrollbutton-up {
35 #inspector-breadcrumbs > .scrollbutton-down {
39 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
40 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
43 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
44 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
48 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
49 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
52 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
53 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
56 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) {
57 border-top-right-radius: 0;
58 border-bottom-right-radius: 0;
61 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) {
62 border-top-left-radius: 0;
63 border-bottom-left-radius: 0;
66 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) {
67 border-top-left-radius: 0;
68 border-bottom-left-radius: 0;
71 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) {
72 border-top-right-radius: 0;
73 border-bottom-right-radius: 0;
76 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
77 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
78 /* transform: scaleX(-1); */
81 .inspector-breadcrumbs-button {
82 background-color: #000000;
85 border-width: 2px 13px;
88 width: 85px; /* Can't use max-width. See bug 723132 */
89 /* The content of the button can be larger than the button */
96 .inspector-breadcrumbs-button:hover {
97 background-color: #FFCF00;
101 .inspector-breadcrumbs-button[checked]:not(:hover) {
102 background-color: #008484;
106 .inspector-breadcrumbs-button[siblings-menu-open],
107 .inspector-breadcrumbs-button:active {
108 background-color: #FF9F00;
112 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
116 .inspector-breadcrumbs-button:-moz-focusring > label {
117 border-bottom: 1px dotted #008484;
120 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
121 /*color: hsl(208,100%,60%); */
124 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
125 /*color: hsl(205,100%,70%); */
128 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
132 .inspector-breadcrumbs-id,
133 .inspector-breadcrumbs-classes {
137 .inspector-breadcrumbs-pseudo-classes {
141 /* fit height of other buttons to breadcrumbs */
142 #inspector-toolbar .devtools-toolbarbutton,
143 #highlighter-closebutton,
144 #inspector-option-toolbarbutton {
148 /* Highlighter toolbar - breadcrumbs - LTR */
150 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
153 .inspector-breadcrumbs-button {
154 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
157 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
158 .inspector-breadcrumbs-button:not([checked]):hover:active {
159 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
162 .inspector-breadcrumbs-button[checked] {
163 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
166 .inspector-breadcrumbs-button[checked][siblings-menu-open],
167 .inspector-breadcrumbs-button[checked]:hover:active {
168 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
171 .inspector-breadcrumbs-button:first-of-type {
172 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
175 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
176 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
177 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
180 .inspector-breadcrumbs-button:first-of-type[checked] {
181 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
184 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
185 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
186 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
189 .inspector-breadcrumbs-button:last-of-type {
190 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
193 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
194 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
195 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
198 .inspector-breadcrumbs-button:last-of-type[checked] {
199 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
202 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
203 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
204 border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
207 /* Highlighter toolbar - breadcrumbs - RTL */
209 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
212 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
213 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
216 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
217 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
218 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
221 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
222 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
225 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
226 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
227 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
230 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
231 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
234 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
235 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
236 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
239 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
240 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
243 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
244 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
245 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
248 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
249 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
252 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
255 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
256 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
257 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
260 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
261 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
264 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
265 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
266 border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
269 #inspector-searchbox {
270 transition-property: max-width, -moz-padding-end, -moz-padding-start;
271 transition-duration: 250ms;
272 transition-timing-function: ease;
275 #inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
279 #inspector-searchbox:not([focused]):not([filled]) {
280 max-width: 20px !important;
281 -moz-padding-end: 6px;
282 -moz-padding-start: 22px;
283 background-position: 8px center, top left, top left;
286 #inspector-searchbox[focused],
287 #inspector-searchbox[filled] {
288 max-width: 200px !important;