Commit | Line | Data |
---|---|---|
3d85dbf1 | 1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
9099c61d RK |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
4 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
3d85dbf1 | 5 | |
0142a07b RK |
6 | /* Font for code */ |
7 | .devtools-monospace { | |
8 | font: 12px "Liberation Mono", Consolas, "Courier New", monospace; | |
9 | } | |
10 | ||
3d85dbf1 RK |
11 | /* Toolbar and Toolbar items */ |
12 | ||
13 | .devtools-toolbar { | |
14 | } | |
15 | ||
85cfb236 | 16 | .devtools-menulist, |
3d85dbf1 RK |
17 | .devtools-toolbarbutton { |
18 | } | |
19 | ||
fcfb76ce RK |
20 | .devtools-toolbarbutton > .toolbarbutton-menubutton-button { |
21 | /*-moz-box-orient: horizontal;*/ | |
22 | } | |
23 | ||
85cfb236 | 24 | devtools-menulist:-moz-focusring, |
a40f6a79 RK |
25 | .devtools-toolbarbutton:-moz-focusring { |
26 | outline: 1px dotted #008484; | |
a40f6a79 RK |
27 | } |
28 | ||
3d85dbf1 RK |
29 | .devtools-toolbarbutton > .toolbarbutton-icon { |
30 | } | |
31 | ||
8d7ef0d9 RK |
32 | .devtools-toolbarbutton:not([label]) { |
33 | min-width: 20px; | |
34 | } | |
35 | ||
0142a07b RK |
36 | .devtools-toolbarbutton:not([label]) > .toolbarbutton-text { |
37 | display: none; | |
38 | } | |
39 | ||
37953ab4 | 40 | .devtools-toolbarbutton:not([checked=true]):hover:active { |
3d85dbf1 RK |
41 | } |
42 | ||
85cfb236 | 43 | .devtools-menulist[open=true], |
fcfb76ce RK |
44 | .devtools-toolbarbutton[open=true], |
45 | .devtools-toolbarbutton[checked=true] { | |
46 | } | |
47 | ||
37953ab4 | 48 | .devtools-toolbarbutton[checked=true] { |
3d85dbf1 RK |
49 | } |
50 | ||
37953ab4 | 51 | .devtools-toolbarbutton[checked=true]:hover:active { |
3d85dbf1 RK |
52 | } |
53 | ||
b8384c33 RK |
54 | .devtools-option-toolbarbutton { |
55 | list-style-image: url("chrome://browser/skin/devtools/option-icon.png"); | |
56 | -moz-image-region: rect(0px 16px 16px 0px); | |
f7774352 RK |
57 | /* background: none; |
58 | border: none; */ | |
b8384c33 RK |
59 | } |
60 | ||
61 | .devtools-option-toolbarbutton:hover, | |
62 | .devtools-option-toolbarbutton[open=true] { | |
63 | -moz-image-region: rect(0px 32px 16px 16px); | |
64 | } | |
65 | ||
85cfb236 RK |
66 | .devtools-menulist > .menulist-label-box { |
67 | text-align: center; | |
68 | } | |
69 | ||
70 | .devtools-menulist > .menulist-dropmarker { | |
71 | } | |
72 | ||
73 | .devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box { | |
74 | } | |
75 | ||
37953ab4 RK |
76 | /* LCARStrek checkbox colors don't work well against toolbar background */ |
77 | .devtools-toolbar > checkbox { | |
78 | background-color: #000000; | |
79 | padding: 2px; | |
80 | } | |
81 | ||
fcfb76ce RK |
82 | .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { |
83 | } | |
84 | ||
85 | .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { | |
86 | } | |
87 | ||
88 | .devtools-toolbarbutton[type=menu-button] { | |
89 | padding: 0 1px; | |
90 | -moz-box-align: stretch; | |
91 | } | |
92 | ||
93 | .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, | |
94 | .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { | |
fcfb76ce RK |
95 | -moz-box-align: center; |
96 | } | |
97 | ||
0142a07b | 98 | /* Text input */ |
3d85dbf1 | 99 | |
0142a07b | 100 | .devtools-textinput, |
3d85dbf1 RK |
101 | .devtools-searchinput { |
102 | -moz-appearance: none; | |
56ab361a | 103 | /* margin: 0 3px; |
2efcd25d | 104 | min-height: 22px; |
3d85dbf1 RK |
105 | border: 1px solid hsla(211,68%,6%,.6); |
106 | box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1); | |
107 | border-radius: 2px; | |
108 | background-color: transparent; | |
099c339a | 109 | background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); |
56ab361a | 110 | padding: 3px;*/ |
0142a07b RK |
111 | transition-property: background-color, border-color, box-shadow; |
112 | transition-duration: 150ms; | |
113 | transition-timing-function: ease; | |
56ab361a | 114 | /* color: inherit; */ |
0142a07b RK |
115 | } |
116 | ||
117 | .devtools-searchinput { | |
56ab361a | 118 | background-image: url("magnifying-glass.png")/*, linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35))*/; |
3d85dbf1 | 119 | background-repeat: no-repeat; |
85cfb236 | 120 | background-position: 4px center, top left, top left; |
56ab361a RK |
121 | /* padding-top: 0; |
122 | padding-bottom: 0;*/ | |
3d85dbf1 RK |
123 | -moz-padding-start: 18px; |
124 | -moz-padding-end: 12px; | |
82b4252f | 125 | font-size: inherit; |
3d85dbf1 RK |
126 | } |
127 | ||
128 | .devtools-searchinput[focused] { | |
56ab361a | 129 | /* border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%); |
3d85dbf1 RK |
130 | background-origin: padding-box; |
131 | background-clip: padding-box; | |
56ab361a | 132 | box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);*/ |
3d85dbf1 RK |
133 | } |
134 | ||
135 | .devtools-searchinput:-moz-locale-dir(rtl) { | |
fcfb76ce | 136 | background-position: calc(100% - 4px) center, top left, top left; |
3d85dbf1 RK |
137 | } |
138 | ||
139 | .devtools-searchinput > .textbox-input-box > .textbox-search-icons { | |
140 | display: none; | |
141 | } | |
142 | ||
a7145e95 | 143 | .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder { |
56ab361a RK |
144 | /* color: hsl(208,10%,66%);*/ |
145 | } | |
146 | ||
147 | .devtools-no-search-result { | |
56ab361a RK |
148 | /* box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35); |
149 | border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;*/ | |
150 | background-image: url("magnifying-glass.png"), linear-gradient(rgba(255,0,0,.15), rgba(255,0,0,.35)); | |
3d85dbf1 | 151 | } |
713cf603 | 152 | |
85cfb236 RK |
153 | /* Close button */ |
154 | ||
155 | .devtools-closebutton { | |
156 | list-style-image: url("chrome://global/skin/icons/close-button.gif"); | |
157 | min-width: 16px; | |
158 | width: 16px; | |
159 | } | |
160 | ||
161 | .devtools-closebutton > .toolbarbutton-text { | |
162 | display: none; | |
163 | } | |
164 | ||
165 | .devtools-closebutton:hover, | |
166 | .devtools-closebutton:hover:active { | |
167 | list-style-image: url("chrome://global/skin/icons/close-button-hover.gif"); | |
168 | } | |
169 | ||
37953ab4 | 170 | /* Splitters */ |
85cfb236 RK |
171 | |
172 | .devtools-horizontal-splitter { | |
85cfb236 RK |
173 | min-height: 3px; |
174 | height: 3px; | |
85cfb236 RK |
175 | position: relative; |
176 | } | |
713cf603 | 177 | |
8d7ef0d9 | 178 | #devtools-side-splitter { |
37953ab4 RK |
179 | min-width: 0; |
180 | width: 3px; | |
ed1a91c6 RK |
181 | border: none; |
182 | margin: 0 3px; | |
37953ab4 | 183 | position: relative; |
ed1a91c6 | 184 | cursor: e-resize; |
713cf603 | 185 | } |
445863a2 | 186 | |
0142a07b RK |
187 | /* In-tools sidebar */ |
188 | ||
82b4252f RK |
189 | .devtools-toolbox-side-iframe { |
190 | min-width: 465px; | |
191 | } | |
192 | ||
0142a07b RK |
193 | .devtools-sidebar-tabs { |
194 | } | |
195 | ||
196 | .devtools-sidebar-tabs > tabpanels { | |
197 | padding: 0; | |
198 | border: 0; | |
199 | } | |
200 | ||
201 | .devtools-sidebar-tabs > tabs { | |
202 | position: static; | |
203 | overflow: hidden; | |
204 | } | |
205 | ||
206 | .devtools-sidebar-tabs > tabs > .tabs-right, | |
207 | .devtools-sidebar-tabs > tabs > .tabs-left { | |
208 | display: none; | |
209 | } | |
210 | ||
211 | .devtools-sidebar-tabs > tabs > tab { | |
212 | min-width: 78px; | |
213 | text-align: center; | |
214 | -moz-box-flex: 1; | |
215 | position: static; | |
cc7e70eb | 216 | margin-top: 0; |
0142a07b RK |
217 | } |
218 | ||
219 | .devtools-sidebar-tabs > tabs > tab:-moz-focusring { | |
220 | position: static; | |
221 | } | |
222 | ||
223 | .devtools-sidebar-tabs > tabs > tab:last-of-type { | |
224 | -moz-border-end-width: 0; | |
225 | } | |
226 | ||
227 | .devtools-sidebar-tabs > tabs > tab:first-of-type { | |
228 | -moz-margin-start: 0; | |
229 | } | |
230 | ||
231 | .devtools-sidebar-tabs > tabs > tab { | |
232 | } | |
233 | ||
234 | .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab { | |
235 | } | |
236 | ||
237 | .devtools-sidebar-tabs > tabs > tab { | |
238 | } | |
239 | ||
240 | .devtools-sidebar-tabs > tabs > tab:hover { | |
241 | } | |
242 | ||
243 | .devtools-sidebar-tabs > tabs > tab:hover:active { | |
244 | } | |
245 | ||
246 | .devtools-sidebar-tabs > tabs > tab[selected=true] + tab { | |
247 | } | |
248 | ||
249 | .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover { | |
250 | } | |
251 | ||
252 | .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active { | |
253 | } | |
254 | ||
255 | .devtools-sidebar-tabs > tabs > tab[selected=true] { | |
256 | } | |
257 | ||
258 | .devtools-sidebar-tabs > tabs > tab[selected=true]:hover { | |
259 | } | |
260 | ||
261 | .devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active { | |
262 | } | |
263 | ||
7600e0b1 | 264 | /* === BEGIN common.inc.css === */ |
0142a07b | 265 | |
82b4252f RK |
266 | /* Autocomplete Popup */ |
267 | /* Dark and light theme */ | |
268 | ||
269 | .devtools-autocomplete-popup { | |
270 | border: 1px solid #FF9F00; | |
0142a07b | 271 | background-color: #000000; |
82b4252f RK |
272 | border-radius: 3px; |
273 | max-height: 40rem; | |
274 | } | |
275 | ||
276 | .devtools-autocomplete-listbox { | |
277 | background-color: transparent; | |
278 | border-width: 0px !important; | |
0142a07b RK |
279 | } |
280 | ||
82b4252f RK |
281 | .devtools-autocomplete-listbox > richlistitem, |
282 | .devtools-autocomplete-listbox > richlistitem[selected] { | |
283 | width: 100%; | |
284 | background-color: transparent; | |
285 | border-radius: 4px; | |
0142a07b RK |
286 | } |
287 | ||
82b4252f RK |
288 | .devtools-autocomplete-listbox.dark-theme > richlistitem[selected], |
289 | .devtools-autocomplete-listbox.dark-theme > richlistitem:hover { | |
290 | /* background-color: rgba(0,0,0,0.5); */ | |
0142a07b RK |
291 | } |
292 | ||
82b4252f RK |
293 | .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value, |
294 | .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value { | |
295 | /* color: hsl(208,100%,60%);*/ | |
0142a07b RK |
296 | } |
297 | ||
82b4252f RK |
298 | .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label { |
299 | /* color: #eee;*/ | |
0142a07b RK |
300 | } |
301 | ||
82b4252f RK |
302 | .devtools-autocomplete-listbox.dark-theme > richlistitem > label { |
303 | /* color: #ccc;*/ | |
0142a07b RK |
304 | } |
305 | ||
82b4252f RK |
306 | .devtools-autocomplete-listbox > richlistitem > .initial-value, |
307 | .devtools-autocomplete-listbox > richlistitem > .autocomplete-value { | |
308 | margin: 0; | |
309 | padding: 1px 0; | |
0142a07b RK |
310 | } |
311 | ||
82b4252f RK |
312 | .devtools-autocomplete-listbox > richlistitem > .autocomplete-count { |
313 | text-align: right; | |
314 | } | |
0142a07b | 315 | |
82b4252f RK |
316 | /* Rest of the light theme */ |
317 | ||
318 | .devtools-autocomplete-popup.light-theme { | |
445863a2 RK |
319 | } |
320 | ||
82b4252f RK |
321 | .devtools-autocomplete-listbox.light-theme > richlistitem[selected], |
322 | .devtools-autocomplete-listbox.light-theme > richlistitem:hover { | |
323 | /* background-color: rgba(128,128,128,0.3); */ | |
324 | } | |
325 | ||
326 | .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value, | |
327 | .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value { | |
328 | /* color: #222;*/ | |
329 | } | |
330 | ||
331 | .devtools-autocomplete-listbox.light-theme > richlistitem > label { | |
332 | /* color: #666;*/ | |
0142a07b | 333 | } |
82b4252f | 334 | |
ed1a91c6 RK |
335 | /* Responsive container */ |
336 | ||
337 | .devtools-responsive-container { | |
338 | -moz-box-orient: horizontal; | |
339 | } | |
340 | ||
341 | @media (max-width: 700px) { | |
342 | .devtools-responsive-container { | |
343 | -moz-box-orient: vertical; | |
344 | } | |
345 | ||
346 | .devtools-responsive-container > .devtools-side-splitter { | |
347 | border: 0; | |
348 | margin: 3px 0; | |
349 | min-height: 3px; | |
350 | height: 3px; | |
351 | /* In some edge case the cursor is not changed to n-resize */ | |
352 | cursor: n-resize; | |
353 | } | |
354 | ||
355 | .devtools-responsive-container > .devtools-sidebar-tabs { | |
356 | min-height: 35vh; | |
357 | max-height: 75vh; | |
358 | } | |
359 | } | |
7600e0b1 RK |
360 | |
361 | /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */ | |
362 | ||
363 | .devtools-tooltip.devtools-tooltip-tooltip { | |
364 | /* If the tooltip uses a <tooltip> XUL element */ | |
365 | padding: 4px; | |
366 | background: #A09090; | |
367 | border-radius: 3px; | |
368 | } | |
5a199ba1 | 369 | |
7600e0b1 RK |
370 | .devtools-tooltip.devtools-tooltip-panel .panel-arrowcontent { |
371 | /* If the tooltip uses a <panel> XUL element instead */ | |
372 | padding: 4px; | |
373 | } | |
374 | ||
5a199ba1 RK |
375 | .devtools-tooltip-simple-text { |
376 | background: #000000; | |
377 | max-width: 400px; | |
378 | margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ | |
379 | padding: 8px 12px; | |
380 | white-space: pre-wrap; | |
381 | } | |
382 | ||
383 | .devtools-tooltip-simple-text:first-child { | |
384 | margin-top: -4px; | |
385 | } | |
386 | ||
387 | .devtools-tooltip-simple-text:last-child { | |
388 | margin-bottom: -4px; | |
389 | } | |
390 | ||
6568957a RK |
391 | .devtools-tooltip-simple-text { |
392 | background-color: #000000; | |
393 | max-width: 400px; | |
394 | margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ | |
395 | padding: 8px 12px; | |
396 | white-space: pre-wrap; | |
397 | } | |
398 | ||
399 | .devtools-tooltip-simple-text:first-child { | |
400 | margin-top: -4px; | |
401 | } | |
402 | ||
403 | .devtools-tooltip-simple-text:last-child { | |
404 | margin-bottom: -4px; | |
405 | } | |
406 | ||
7600e0b1 RK |
407 | .devtools-tooltip-tiles { |
408 | background-color: #A09090; | |
409 | background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF), | |
410 | linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF); | |
411 | background-size: 20px 20px; | |
412 | background-position: 0 0, 10px 10px; | |
413 | } | |
414 | ||
415 | /* === END common.inc.css === */ |