Commit | Line | Data |
---|---|---|
cc7e70eb RK |
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/. */ | |
4 | ||
445863a2 RK |
5 | window { |
6 | padding: 0; | |
7 | } | |
8 | ||
9 | #inspector-toolbar { | |
10 | border-top: none; | |
11 | } | |
12 | ||
445863a2 RK |
13 | #inspector-inspect-toolbutton { |
14 | list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); | |
0142a07b | 15 | -moz-image-region: rect(0 16px 16px 0); |
445863a2 RK |
16 | } |
17 | ||
0142a07b RK |
18 | #inspector-inspect-toolbutton[checked=true], |
19 | #inspector-inspect-toolbutton:hover { | |
20 | -moz-image-region: rect(0 32px 16px 16px); | |
445863a2 RK |
21 | } |
22 | ||
0142a07b | 23 | /* Highlighter toolbar - breadcrumbs */ |
445863a2 RK |
24 | |
25 | #inspector-breadcrumbs { | |
26 | -moz-margin-end: 3px; | |
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 | |
0142a07b RK |
30 | by the shadow.*/ |
31 | /*margin: -1px 0;*/ | |
445863a2 RK |
32 | } |
33 | ||
34 | #inspector-breadcrumbs > .scrollbutton-up, | |
35 | #inspector-breadcrumbs > .scrollbutton-down { | |
0142a07b RK |
36 | min-height: 25px; |
37 | margin-top: 0; | |
38 | margin-bottom: 0; | |
39 | } | |
40 | ||
41 | #inspector-breadcrumbs > .scrollbutton-up { | |
42 | -moz-margin-end: 1px; | |
43 | } | |
44 | ||
45 | #inspector-breadcrumbs > .scrollbutton-down { | |
46 | -moz-margin-end: 0; | |
445863a2 RK |
47 | } |
48 | ||
49 | #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover, | |
50 | #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover { | |
445863a2 RK |
51 | } |
52 | ||
53 | #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon, | |
54 | #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon { | |
0142a07b | 55 | /* margin: 0 5px; */ |
445863a2 RK |
56 | } |
57 | ||
58 | #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon, | |
59 | #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon { | |
445863a2 RK |
60 | } |
61 | ||
62 | #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, | |
63 | #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { | |
0142a07b RK |
64 | } |
65 | ||
66 | #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) { | |
67 | border-top-right-radius: 0; | |
68 | border-bottom-right-radius: 0; | |
69 | } | |
70 | ||
71 | #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) { | |
72 | border-top-left-radius: 0; | |
73 | border-bottom-left-radius: 0; | |
74 | } | |
75 | ||
76 | #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) { | |
77 | border-top-left-radius: 0; | |
78 | border-bottom-left-radius: 0; | |
79 | } | |
80 | ||
81 | #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) { | |
82 | border-top-right-radius: 0; | |
83 | border-bottom-right-radius: 0; | |
445863a2 RK |
84 | } |
85 | ||
86 | #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), | |
87 | #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { | |
0142a07b | 88 | /* transform: scaleX(-1); */ |
445863a2 RK |
89 | } |
90 | ||
91 | .inspector-breadcrumbs-button { | |
0142a07b RK |
92 | background-color: #000000; |
93 | border-radius: 0; | |
445863a2 RK |
94 | border-style: solid; |
95 | border-width: 2px 13px; | |
96 | outline: none; | |
0142a07b RK |
97 | color: #FF9F00; |
98 | width: 85px; /* Can't use max-width. See bug 723132 */ | |
99 | /* The content of the button can be larger than the button */ | |
445863a2 RK |
100 | overflow: hidden; |
101 | min-height: 25px; | |
102 | margin: 0 -11px 0 0; | |
103 | padding: 0 9px; | |
104 | } | |
105 | ||
0142a07b RK |
106 | .inspector-breadcrumbs-button:hover { |
107 | background-color: #FFCF00; | |
108 | color: #000000; | |
109 | } | |
110 | ||
111 | .inspector-breadcrumbs-button[checked]:not(:hover) { | |
112 | background-color: #008484; | |
113 | color: #000000; | |
114 | } | |
115 | ||
116 | .inspector-breadcrumbs-button[siblings-menu-open], | |
117 | .inspector-breadcrumbs-button:active { | |
118 | background-color: #FF9F00; | |
119 | color: #000000; | |
120 | } | |
121 | ||
445863a2 RK |
122 | .inspector-breadcrumbs-button:-moz-focusring > .button-box { |
123 | border-width: 0; | |
124 | } | |
125 | ||
126 | .inspector-breadcrumbs-button:-moz-focusring > label { | |
0142a07b | 127 | border-bottom: 1px dotted #008484; |
445863a2 RK |
128 | } |
129 | ||
130 | .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag { | |
0142a07b | 131 | /*color: hsl(208,100%,60%); */ |
445863a2 RK |
132 | } |
133 | ||
134 | .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id { | |
0142a07b | 135 | /*color: hsl(205,100%,70%); */ |
445863a2 RK |
136 | } |
137 | ||
138 | .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes { | |
0142a07b | 139 | color: #FF9F00; |
445863a2 RK |
140 | } |
141 | ||
142 | .inspector-breadcrumbs-id, | |
143 | .inspector-breadcrumbs-classes { | |
0142a07b | 144 | /*color: #8d99a6; */ |
445863a2 RK |
145 | } |
146 | ||
147 | .inspector-breadcrumbs-pseudo-classes { | |
0142a07b RK |
148 | color: #FFCF00; |
149 | } | |
150 | ||
151 | /* fit height of other buttons to breadcrumbs */ | |
152 | #inspector-toolbar .devtools-toolbarbutton, | |
153 | #highlighter-closebutton, | |
154 | #inspector-option-toolbarbutton { | |
155 | min-height: 25px; | |
445863a2 RK |
156 | } |
157 | ||
0142a07b RK |
158 | /* Highlighter toolbar - breadcrumbs - LTR */ |
159 | ||
160 | .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type { | |
161 | } | |
445863a2 RK |
162 | |
163 | .inspector-breadcrumbs-button { | |
82b4252f | 164 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; |
445863a2 RK |
165 | } |
166 | ||
0142a07b | 167 | .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]), |
445863a2 | 168 | .inspector-breadcrumbs-button:not([checked]):hover:active { |
82b4252f | 169 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
170 | } |
171 | ||
172 | .inspector-breadcrumbs-button[checked] { | |
82b4252f | 173 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
174 | } |
175 | ||
0142a07b | 176 | .inspector-breadcrumbs-button[checked][siblings-menu-open], |
445863a2 | 177 | .inspector-breadcrumbs-button[checked]:hover:active { |
82b4252f | 178 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
179 | } |
180 | ||
181 | .inspector-breadcrumbs-button:first-of-type { | |
82b4252f | 182 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch; |
445863a2 RK |
183 | } |
184 | ||
0142a07b | 185 | .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]), |
445863a2 | 186 | .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active { |
82b4252f | 187 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
188 | } |
189 | ||
190 | .inspector-breadcrumbs-button:first-of-type[checked] { | |
82b4252f | 191 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
192 | } |
193 | ||
0142a07b | 194 | .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked], |
445863a2 | 195 | .inspector-breadcrumbs-button:first-of-type[checked]:hover:active { |
82b4252f | 196 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
197 | } |
198 | ||
199 | .inspector-breadcrumbs-button:last-of-type { | |
82b4252f | 200 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch; |
445863a2 RK |
201 | } |
202 | ||
0142a07b | 203 | .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]), |
445863a2 | 204 | .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active { |
82b4252f | 205 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
206 | } |
207 | ||
208 | .inspector-breadcrumbs-button:last-of-type[checked] { | |
82b4252f | 209 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
210 | } |
211 | ||
0142a07b | 212 | .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked], |
445863a2 | 213 | .inspector-breadcrumbs-button:last-of-type[checked]:hover:active { |
82b4252f | 214 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
215 | } |
216 | ||
0142a07b RK |
217 | /* Highlighter toolbar - breadcrumbs - RTL */ |
218 | ||
219 | .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type { | |
220 | } | |
445863a2 RK |
221 | |
222 | .inspector-breadcrumbs-button:-moz-locale-dir(rtl) { | |
82b4252f | 223 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch; |
445863a2 RK |
224 | } |
225 | ||
0142a07b | 226 | .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl), |
445863a2 | 227 | .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) { |
82b4252f | 228 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
229 | } |
230 | ||
231 | .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) { | |
82b4252f | 232 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
233 | } |
234 | ||
0142a07b | 235 | .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl), |
445863a2 | 236 | .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) { |
82b4252f | 237 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
238 | } |
239 | ||
240 | .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) { | |
82b4252f | 241 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch; |
445863a2 RK |
242 | } |
243 | ||
0142a07b | 244 | .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl), |
445863a2 | 245 | .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { |
82b4252f | 246 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
247 | } |
248 | ||
249 | .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) { | |
82b4252f | 250 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
251 | } |
252 | ||
0142a07b | 253 | .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl), |
445863a2 | 254 | .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) { |
82b4252f | 255 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
256 | } |
257 | ||
258 | .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) { | |
82b4252f | 259 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch; |
445863a2 RK |
260 | } |
261 | ||
445863a2 | 262 | #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) { |
445863a2 RK |
263 | } |
264 | ||
0142a07b | 265 | .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl), |
445863a2 | 266 | .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { |
82b4252f | 267 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch; |
445863a2 RK |
268 | } |
269 | ||
270 | .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) { | |
82b4252f | 271 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch; |
445863a2 RK |
272 | } |
273 | ||
0142a07b | 274 | .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl), |
445863a2 | 275 | .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) { |
82b4252f | 276 | border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch; |
445863a2 | 277 | } |
56ab361a RK |
278 | |
279 | #inspector-searchbox { | |
280 | transition-property: max-width, -moz-padding-end, -moz-padding-start; | |
281 | transition-duration: 250ms; | |
282 | transition-timing-function: ease; | |
283 | } | |
284 | ||
285 | #inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box { | |
286 | overflow: hidden; | |
287 | } | |
288 | ||
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; | |
294 | } | |
295 | ||
296 | #inspector-searchbox[focused], | |
297 | #inspector-searchbox[filled] { | |
298 | max-width: 200px !important; | |
299 | } |