|
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 |
|
5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
|
6 @namespace html url("http://www.w3.org/1999/xhtml"); |
|
7 @namespace svg url("http://www.w3.org/2000/svg"); |
|
8 |
|
9 #main-window:not([chromehidden~="toolbar"]) { |
|
10 %ifdef XP_MACOSX |
|
11 min-width: 335px; |
|
12 %else |
|
13 min-width: 300px; |
|
14 %endif |
|
15 } |
|
16 |
|
17 #main-window[customize-entered] { |
|
18 min-width: -moz-fit-content; |
|
19 } |
|
20 |
|
21 searchbar { |
|
22 -moz-binding: url("chrome://browser/content/search/search.xml#searchbar"); |
|
23 } |
|
24 |
|
25 .browserStack > browser[remote="true"] { |
|
26 -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser"); |
|
27 } |
|
28 |
|
29 toolbar[customizable="true"] { |
|
30 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar"); |
|
31 } |
|
32 |
|
33 %ifdef XP_MACOSX |
|
34 #toolbar-menubar { |
|
35 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub"); |
|
36 } |
|
37 |
|
38 toolbar[customizable="true"]:not([nowindowdrag="true"]) { |
|
39 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); |
|
40 } |
|
41 %endif |
|
42 |
|
43 #toolbar-menubar[autohide="true"] { |
|
44 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide"); |
|
45 } |
|
46 |
|
47 #addon-bar { |
|
48 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#addonbar-delegating"); |
|
49 visibility: visible; |
|
50 margin: 0; |
|
51 height: 0 !important; |
|
52 overflow: hidden; |
|
53 padding: 0; |
|
54 border: 0 none; |
|
55 } |
|
56 |
|
57 #addonbar-closebutton { |
|
58 visibility: visible; |
|
59 height: 0 !important; |
|
60 } |
|
61 |
|
62 #status-bar { |
|
63 height: 0 !important; |
|
64 -moz-binding: none; |
|
65 padding: 0; |
|
66 margin: 0; |
|
67 } |
|
68 |
|
69 panelmultiview { |
|
70 -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview"); |
|
71 } |
|
72 |
|
73 panelview { |
|
74 -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview"); |
|
75 -moz-box-orient: vertical; |
|
76 } |
|
77 |
|
78 .panel-mainview { |
|
79 transition: transform 150ms; |
|
80 } |
|
81 |
|
82 panelview:not([mainview]):not([current]) { |
|
83 display: none; |
|
84 } |
|
85 |
|
86 tabbrowser { |
|
87 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser"); |
|
88 } |
|
89 |
|
90 .tabbrowser-tabs { |
|
91 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs"); |
|
92 } |
|
93 |
|
94 #tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button, |
|
95 #tabbrowser-tabs:not([overflow="true"]) + #new-tab-button, |
|
96 #tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button, |
|
97 #TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button, |
|
98 #TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button { |
|
99 visibility: collapse; |
|
100 } |
|
101 |
|
102 #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button { |
|
103 visibility: hidden; /* temporary space to keep a tab's close button under the cursor */ |
|
104 } |
|
105 |
|
106 .tabbrowser-tab { |
|
107 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab"); |
|
108 } |
|
109 |
|
110 .tabbrowser-tab:not([pinned]) { |
|
111 -moz-box-flex: 100; |
|
112 max-width: 210px; |
|
113 min-width: 100px; |
|
114 width: 0; |
|
115 transition: min-width 200ms ease-out, |
|
116 max-width 230ms ease-out; |
|
117 } |
|
118 |
|
119 .tabbrowser-tab:not([pinned]):not([fadein]) { |
|
120 max-width: 0.1px; |
|
121 min-width: 0.1px; |
|
122 visibility: hidden; |
|
123 } |
|
124 |
|
125 .tab-close-button, |
|
126 .tab-background { |
|
127 /* Explicitly set the visibility to override the value (collapsed) |
|
128 * we inherit from #TabsToolbar[collapsed] upon opening a browser window. */ |
|
129 visibility: visible; |
|
130 } |
|
131 |
|
132 .tab-close-button[fadein], |
|
133 .tab-background[fadein] { |
|
134 /* This transition is only wanted for opening tabs. */ |
|
135 transition: visibility 0ms 25ms; |
|
136 } |
|
137 |
|
138 .tab-close-button:not([fadein]), |
|
139 .tab-background:not([fadein]) { |
|
140 visibility: hidden; |
|
141 } |
|
142 |
|
143 .tab-label:not([fadein]), |
|
144 .tab-throbber:not([fadein]), |
|
145 .tab-icon-image:not([fadein]) { |
|
146 display: none; |
|
147 } |
|
148 |
|
149 .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { |
|
150 position: fixed !important; |
|
151 display: block; /* position:fixed already does this (bug 579776), but let's be explicit */ |
|
152 } |
|
153 |
|
154 .tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected] { |
|
155 position: relative; |
|
156 z-index: 2; |
|
157 pointer-events: none; /* avoid blocking dragover events on scroll buttons */ |
|
158 } |
|
159 |
|
160 .tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) { |
|
161 transition: transform 200ms ease-out; |
|
162 } |
|
163 |
|
164 #alltabs-popup { |
|
165 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup"); |
|
166 } |
|
167 |
|
168 toolbar[printpreview="true"] { |
|
169 -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar"); |
|
170 } |
|
171 |
|
172 toolbar[overflowable] > .customization-target { |
|
173 overflow: hidden; |
|
174 } |
|
175 |
|
176 toolbar:not([overflowing]) > .overflow-button, |
|
177 toolbar[customizing] > .overflow-button { |
|
178 display: none; |
|
179 } |
|
180 |
|
181 %ifdef CAN_DRAW_IN_TITLEBAR |
|
182 #main-window:not([chromemargin]) > #titlebar, |
|
183 #main-window[inFullscreen] > #titlebar, |
|
184 #main-window[inFullscreen] .titlebar-placeholder, |
|
185 #main-window:not([tabsintitlebar]) .titlebar-placeholder { |
|
186 display: none; |
|
187 } |
|
188 |
|
189 #titlebar { |
|
190 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox"); |
|
191 } |
|
192 |
|
193 #titlebar-spacer { |
|
194 pointer-events: none; |
|
195 } |
|
196 |
|
197 #main-window[tabsintitlebar] #titlebar-buttonbox { |
|
198 position: relative; |
|
199 } |
|
200 |
|
201 #titlebar-buttonbox { |
|
202 -moz-appearance: -moz-window-button-box; |
|
203 } |
|
204 |
|
205 %ifdef XP_MACOSX |
|
206 #titlebar-fullscreen-button { |
|
207 -moz-appearance: -moz-mac-fullscreen-button; |
|
208 } |
|
209 |
|
210 /* Because these buttons don't move, they should always be aligned the same, |
|
211 * left and right were deprecated, so we have to do work to get it to mean that: */ |
|
212 #titlebar-buttonbox-container:-moz-locale-dir(ltr) { |
|
213 -moz-box-align: start; |
|
214 } |
|
215 |
|
216 #titlebar-buttonbox-container:-moz-locale-dir(rtl) { |
|
217 -moz-box-align: end; |
|
218 } |
|
219 |
|
220 /* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */ |
|
221 #titlebar-secondary-buttonbox:-moz-locale-dir(ltr), |
|
222 #titlebar-buttonbox-container:-moz-locale-dir(rtl), |
|
223 .titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr), |
|
224 .titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) { |
|
225 -moz-box-ordinal-group: 1000; |
|
226 } |
|
227 |
|
228 #titlebar-secondary-buttonbox:-moz-locale-dir(rtl), |
|
229 #titlebar-buttonbox-container:-moz-locale-dir(ltr), |
|
230 .titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr), |
|
231 .titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) { |
|
232 -moz-box-ordinal-group: 0; |
|
233 } |
|
234 %else |
|
235 /* On non-OSX, these should be start-aligned */ |
|
236 #titlebar-buttonbox-container { |
|
237 -moz-box-align: start; |
|
238 } |
|
239 %endif |
|
240 |
|
241 %if !defined(MOZ_WIDGET_GTK) && !defined(MOZ_WIDGET_QT) |
|
242 #TabsToolbar > .private-browsing-indicator { |
|
243 -moz-box-ordinal-group: 1000; |
|
244 } |
|
245 %endif |
|
246 |
|
247 %ifdef XP_WIN |
|
248 #main-window[sizemode="maximized"] #titlebar-buttonbox { |
|
249 -moz-appearance: -moz-window-button-box-maximized; |
|
250 } |
|
251 %endif |
|
252 |
|
253 %endif |
|
254 |
|
255 /* Rules to help integrate SDK widgets */ |
|
256 toolbaritem[sdkstylewidget="true"] > toolbarbutton, |
|
257 toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe, |
|
258 toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-text { |
|
259 display: none; |
|
260 } |
|
261 |
|
262 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > toolbarbutton { |
|
263 display: -moz-box; |
|
264 } |
|
265 |
|
266 toolbarpaletteitem > toolbaritem[sdkstylewidget="true"][cui-areatype="toolbar"] > .toolbarbutton-text { |
|
267 display: -moz-box; |
|
268 } |
|
269 |
|
270 toolbarpaletteitem[removable="false"] { |
|
271 opacity: 0.5; |
|
272 cursor: default; |
|
273 } |
|
274 |
|
275 #bookmarks-toolbar-placeholder, |
|
276 toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar, |
|
277 #personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar, |
|
278 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #PlacesToolbar { |
|
279 display: none; |
|
280 } |
|
281 |
|
282 #PlacesToolbarDropIndicatorHolder { |
|
283 position: absolute; |
|
284 top: 25%; |
|
285 } |
|
286 |
|
287 toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder, |
|
288 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder, |
|
289 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder { |
|
290 display: -moz-box; |
|
291 } |
|
292 |
|
293 toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks, |
|
294 toolbar:not(#TabsToolbar) > #personal-bookmarks { |
|
295 -moz-box-flex: 1; |
|
296 } |
|
297 |
|
298 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text { |
|
299 display: -moz-box; |
|
300 } |
|
301 |
|
302 #urlbar-reload-button:not([displaystop]) + #urlbar-stop-button, |
|
303 #urlbar-reload-button[displaystop] { |
|
304 visibility: collapse; |
|
305 } |
|
306 |
|
307 #PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) { |
|
308 direction: rtl; |
|
309 } |
|
310 |
|
311 #panelMenu_bookmarksMenu > .bookmark-item { |
|
312 max-width: none; |
|
313 } |
|
314 |
|
315 #urlbar-container { |
|
316 min-width: 50ch; |
|
317 } |
|
318 |
|
319 #search-container { |
|
320 min-width: 25ch; |
|
321 } |
|
322 |
|
323 #urlbar, |
|
324 .searchbar-textbox { |
|
325 /* Setting a width and min-width to let the location & search bars maintain |
|
326 a constant width in case they haven't be resized manually. (bug 965772) */ |
|
327 width: 1px; |
|
328 min-width: 1px; |
|
329 } |
|
330 |
|
331 #main-window:-moz-lwtheme { |
|
332 background-repeat: no-repeat; |
|
333 background-position: top right; |
|
334 } |
|
335 |
|
336 %ifdef XP_MACOSX |
|
337 #main-window[inFullscreen="true"] { |
|
338 padding-top: 0; /* override drawintitlebar="true" */ |
|
339 } |
|
340 %endif |
|
341 |
|
342 #browser-bottombox[lwthemefooter="true"] { |
|
343 background-repeat: no-repeat; |
|
344 background-position: bottom left; |
|
345 } |
|
346 |
|
347 .menuitem-tooltip { |
|
348 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-tooltip"); |
|
349 } |
|
350 |
|
351 .menuitem-iconic-tooltip, |
|
352 .menuitem-tooltip[type="checkbox"], |
|
353 .menuitem-tooltip[type="radio"] { |
|
354 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-iconic-tooltip"); |
|
355 } |
|
356 |
|
357 /* Hide menu elements intended for keyboard access support */ |
|
358 #main-menubar[openedwithkey=false] .show-only-for-keyboard { |
|
359 display: none; |
|
360 } |
|
361 |
|
362 /* ::::: location bar ::::: */ |
|
363 #urlbar { |
|
364 -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar); |
|
365 } |
|
366 |
|
367 .ac-url-text:-moz-locale-dir(rtl), |
|
368 .ac-title:-moz-locale-dir(rtl) > description { |
|
369 direction: ltr !important; |
|
370 } |
|
371 |
|
372 /* For results that are actions, their description text is shown instead of |
|
373 the URL - this needs to follow the locale's direction, unlike URLs. */ |
|
374 panel:not([noactions]) > richlistbox > richlistitem[type~="action"]:-moz-locale-dir(rtl) > .ac-url-box { |
|
375 direction: rtl; |
|
376 } |
|
377 |
|
378 panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-action-text, |
|
379 panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-action-icon { |
|
380 visibility: collapse; |
|
381 } |
|
382 |
|
383 panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-url-text { |
|
384 visibility: visible; |
|
385 } |
|
386 |
|
387 #urlbar:not([actiontype]) > #urlbar-display-box { |
|
388 display: none; |
|
389 } |
|
390 |
|
391 #PopupAutoComplete { |
|
392 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-autocomplete-result-popup"); |
|
393 } |
|
394 |
|
395 #PopupAutoCompleteRichResult { |
|
396 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup"); |
|
397 } |
|
398 |
|
399 #urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon, |
|
400 #urlbar[pageproxystate="invalid"][focused="true"] > #urlbar-go-button ~ toolbarbutton, |
|
401 #urlbar[pageproxystate="valid"] > #urlbar-go-button, |
|
402 #urlbar:not([focused="true"]) > #urlbar-go-button { |
|
403 visibility: collapse; |
|
404 } |
|
405 |
|
406 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels { |
|
407 visibility: collapse; |
|
408 } |
|
409 |
|
410 #urlbar[pageproxystate="invalid"] > #identity-box { |
|
411 pointer-events: none; |
|
412 } |
|
413 |
|
414 #identity-icon-labels { |
|
415 max-width: 18em; |
|
416 } |
|
417 @media (max-width: 700px) { |
|
418 #urlbar-container { |
|
419 min-width: 45ch; |
|
420 } |
|
421 #identity-icon-labels { |
|
422 max-width: 70px; |
|
423 } |
|
424 } |
|
425 @media (max-width: 600px) { |
|
426 #urlbar-container { |
|
427 min-width: 40ch; |
|
428 } |
|
429 #identity-icon-labels { |
|
430 max-width: 60px; |
|
431 } |
|
432 } |
|
433 @media (max-width: 500px) { |
|
434 #urlbar-container { |
|
435 min-width: 35ch; |
|
436 } |
|
437 #identity-icon-labels { |
|
438 max-width: 50px; |
|
439 } |
|
440 } |
|
441 @media (max-width: 400px) { |
|
442 #urlbar-container { |
|
443 min-width: 28ch; |
|
444 } |
|
445 #identity-icon-labels { |
|
446 max-width: 40px; |
|
447 } |
|
448 } |
|
449 |
|
450 #identity-icon-country-label { |
|
451 direction: ltr; |
|
452 } |
|
453 |
|
454 #identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label { |
|
455 -moz-margin-end: 0.25em !important; |
|
456 } |
|
457 |
|
458 #main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box { |
|
459 visibility: hidden; |
|
460 } |
|
461 |
|
462 /* ::::: Unified Back-/Forward Button ::::: */ |
|
463 #back-button > .toolbarbutton-menu-dropmarker, |
|
464 #forward-button > .toolbarbutton-menu-dropmarker { |
|
465 display: none; |
|
466 } |
|
467 .unified-nav-current { |
|
468 font-weight: bold; |
|
469 } |
|
470 |
|
471 toolbarbutton.bookmark-item { |
|
472 max-width: 13em; |
|
473 } |
|
474 |
|
475 #editBMPanel_tagsSelector { |
|
476 /* override default listbox width from xul.css */ |
|
477 width: auto; |
|
478 } |
|
479 |
|
480 /* The star doesn't make sense as text */ |
|
481 toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon { |
|
482 display: -moz-box !important; |
|
483 } |
|
484 toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-text, |
|
485 toolbar[mode="full"] #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-text { |
|
486 display: none; |
|
487 } |
|
488 |
|
489 menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result { |
|
490 display: none; |
|
491 } |
|
492 |
|
493 menuitem.spell-suggestion { |
|
494 font-weight: bold; |
|
495 } |
|
496 |
|
497 /* apply Fitts' law to the notification bar's close button */ |
|
498 window[sizemode="maximized"] #content .notification-inner { |
|
499 border-right: 0px !important; |
|
500 } |
|
501 |
|
502 /* Hide extension toolbars that neglected to set the proper class */ |
|
503 window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar), |
|
504 window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-menubar) { |
|
505 display: none; |
|
506 } |
|
507 |
|
508 #navigator-toolbox , |
|
509 #mainPopupSet { |
|
510 min-width: 1px; |
|
511 } |
|
512 |
|
513 %ifdef MOZ_SERVICES_SYNC |
|
514 /* Sync notification UI */ |
|
515 #sync-notifications { |
|
516 -moz-binding: url("chrome://browser/content/sync/notification.xml#notificationbox"); |
|
517 overflow-y: visible !important; |
|
518 } |
|
519 |
|
520 #sync-notifications notification { |
|
521 -moz-binding: url("chrome://browser/content/sync/notification.xml#notification"); |
|
522 } |
|
523 %endif |
|
524 |
|
525 /* History Swipe Animation */ |
|
526 |
|
527 #historySwipeAnimationContainer { |
|
528 overflow: hidden; |
|
529 } |
|
530 |
|
531 #historySwipeAnimationPreviousPage, |
|
532 #historySwipeAnimationCurrentPage, |
|
533 #historySwipeAnimationNextPage { |
|
534 background: none top left no-repeat white; |
|
535 } |
|
536 |
|
537 #historySwipeAnimationPreviousPage { |
|
538 background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot); |
|
539 } |
|
540 |
|
541 #historySwipeAnimationCurrentPage { |
|
542 background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot); |
|
543 } |
|
544 |
|
545 #historySwipeAnimationNextPage { |
|
546 background-image: -moz-element(#historySwipeAnimationNextPageSnapshot); |
|
547 } |
|
548 |
|
549 /* Identity UI */ |
|
550 #identity-popup-content-box:not(.chromeUI) > #identity-popup-brandName, |
|
551 #identity-popup-content-box:not(.chromeUI) > #identity-popup-chromeLabel, |
|
552 #identity-popup-content-box.chromeUI > .identity-popup-label:not(#identity-popup-brandName):not(#identity-popup-chromeLabel), |
|
553 #identity-popup-content-box.chromeUI > .identity-popup-description, |
|
554 #identity-popup.chromeUI > #identity-popup-button-container, |
|
555 #identity-popup-content-box.unknownIdentity > #identity-popup-connectedToLabel , |
|
556 #identity-popup-content-box.unknownIdentity > #identity-popup-runByLabel , |
|
557 #identity-popup-content-box.unknownIdentity > #identity-popup-content-host , |
|
558 #identity-popup-content-box.unknownIdentity > #identity-popup-content-owner , |
|
559 #identity-popup-content-box.verifiedIdentity > #identity-popup-connectedToLabel2 , |
|
560 #identity-popup-content-box.verifiedDomain > #identity-popup-connectedToLabel2 { |
|
561 display: none; |
|
562 } |
|
563 |
|
564 /* Full Screen UI */ |
|
565 |
|
566 #fullscr-toggler { |
|
567 height: 1px; |
|
568 background: black; |
|
569 } |
|
570 |
|
571 #full-screen-warning-container { |
|
572 position: fixed; |
|
573 top: 0; |
|
574 left: 0; |
|
575 width: 100%; |
|
576 height: 100%; |
|
577 z-index: 2147483647 !important; |
|
578 } |
|
579 |
|
580 #full-screen-warning-container[fade-warning-out] { |
|
581 transition-property: opacity !important; |
|
582 transition-duration: 500ms !important; |
|
583 opacity: 0.0; |
|
584 } |
|
585 |
|
586 /* When the modal fullscreen approval UI is showing, don't allow interaction |
|
587 with the page, but when we're just showing the warning upon entering |
|
588 fullscreen on an already approved page, do allow interaction with the page. |
|
589 */ |
|
590 #full-screen-warning-container:not([obscure-browser]) { |
|
591 pointer-events: none; |
|
592 } |
|
593 |
|
594 #full-screen-warning-message { |
|
595 /* We must specify a max-width, otherwise word-wrap:break-word doesn't |
|
596 work in descendant <description> and <label> elements. Bug 630864. */ |
|
597 max-width: 800px; |
|
598 } |
|
599 |
|
600 #full-screen-domain-text, |
|
601 #full-screen-remember-decision > .checkbox-label-box > .checkbox-label { |
|
602 word-wrap: break-word; |
|
603 /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */ |
|
604 min-width: 1px; |
|
605 } |
|
606 |
|
607 /* ::::: Ctrl-Tab Panel ::::: */ |
|
608 |
|
609 .ctrlTab-preview > html|img, |
|
610 .ctrlTab-preview > html|canvas { |
|
611 min-width: inherit; |
|
612 max-width: inherit; |
|
613 min-height: inherit; |
|
614 max-height: inherit; |
|
615 } |
|
616 |
|
617 .ctrlTab-favicon-container { |
|
618 -moz-box-align: start; |
|
619 %ifdef XP_MACOSX |
|
620 -moz-box-pack: end; |
|
621 %else |
|
622 -moz-box-pack: start; |
|
623 %endif |
|
624 } |
|
625 |
|
626 .ctrlTab-favicon { |
|
627 width: 16px; |
|
628 height: 16px; |
|
629 } |
|
630 |
|
631 .ctrlTab-preview { |
|
632 -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview"); |
|
633 } |
|
634 |
|
635 |
|
636 /* notification anchors should only be visible when their associated |
|
637 notifications are */ |
|
638 .notification-anchor-icon { |
|
639 -moz-user-focus: normal; |
|
640 } |
|
641 |
|
642 .notification-anchor-icon:not([showing]) { |
|
643 display: none; |
|
644 } |
|
645 |
|
646 #notification-popup .text-link.custom-link { |
|
647 -moz-binding: url("chrome://global/content/bindings/text.xml#text-label"); |
|
648 text-decoration: none; |
|
649 } |
|
650 |
|
651 #invalid-form-popup > description { |
|
652 max-width: 280px; |
|
653 } |
|
654 |
|
655 #addon-progress-notification { |
|
656 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification"); |
|
657 } |
|
658 |
|
659 #identity-request-notification { |
|
660 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#identity-request-notification"); |
|
661 } |
|
662 |
|
663 #click-to-play-plugins-notification { |
|
664 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#click-to-play-plugins-notification"); |
|
665 } |
|
666 |
|
667 .plugin-popupnotification-centeritem { |
|
668 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#plugin-popupnotification-center-item"); |
|
669 } |
|
670 |
|
671 browser[tabmodalPromptShowing] { |
|
672 -moz-user-focus: none !important; |
|
673 } |
|
674 |
|
675 /* Status panel */ |
|
676 |
|
677 statuspanel { |
|
678 -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel"); |
|
679 position: fixed; |
|
680 margin-top: -3em; |
|
681 max-width: calc(100% - 5px); |
|
682 pointer-events: none; |
|
683 } |
|
684 |
|
685 statuspanel:-moz-locale-dir(ltr)[mirror], |
|
686 statuspanel:-moz-locale-dir(rtl):not([mirror]) { |
|
687 left: auto; |
|
688 right: 0; |
|
689 } |
|
690 |
|
691 statuspanel[sizelimit] { |
|
692 max-width: 50%; |
|
693 } |
|
694 |
|
695 statuspanel[type=status] { |
|
696 min-width: 23em; |
|
697 } |
|
698 |
|
699 @media all and (max-width: 800px) { |
|
700 statuspanel[type=status] { |
|
701 min-width: 33%; |
|
702 } |
|
703 } |
|
704 |
|
705 statuspanel[type=overLink] { |
|
706 transition: opacity 120ms ease-out; |
|
707 direction: ltr; |
|
708 } |
|
709 |
|
710 statuspanel[inactive] { |
|
711 transition: none; |
|
712 opacity: 0; |
|
713 } |
|
714 |
|
715 statuspanel[inactive][previoustype=overLink] { |
|
716 transition: opacity 200ms ease-out; |
|
717 } |
|
718 |
|
719 .statuspanel-inner { |
|
720 height: 3em; |
|
721 width: 100%; |
|
722 -moz-box-align: end; |
|
723 } |
|
724 |
|
725 .panel-inner-arrowcontentfooter[footertype="promobox"] { |
|
726 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox"); |
|
727 } |
|
728 |
|
729 /* tabview menus */ |
|
730 .tabview-menuitem { |
|
731 max-width: 32em; |
|
732 } |
|
733 |
|
734 /* highlighter */ |
|
735 %include highlighter.css |
|
736 |
|
737 /* gcli */ |
|
738 |
|
739 html|*#gcli-tooltip-frame, |
|
740 html|*#gcli-output-frame, |
|
741 #gcli-output, |
|
742 #gcli-tooltip { |
|
743 overflow-x: hidden; |
|
744 } |
|
745 |
|
746 .gclitoolbar-input-node, |
|
747 .gclitoolbar-complete-node { |
|
748 direction: ltr; |
|
749 } |
|
750 |
|
751 #developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon { |
|
752 display: none; |
|
753 } |
|
754 |
|
755 #developer-toolbar-toolbox-button[error-count]:before { |
|
756 content: attr(error-count); |
|
757 display: -moz-box; |
|
758 -moz-box-pack: center; |
|
759 } |
|
760 |
|
761 /* Responsive Mode */ |
|
762 |
|
763 .browserContainer[responsivemode] { |
|
764 overflow: auto; |
|
765 } |
|
766 |
|
767 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) { |
|
768 -moz-box-pack: end; |
|
769 } |
|
770 |
|
771 .browserStack[responsivemode] { |
|
772 transition-duration: 200ms; |
|
773 transition-timing-function: linear; |
|
774 } |
|
775 |
|
776 .browserStack[responsivemode] { |
|
777 transition-property: min-width, max-width, min-height, max-height; |
|
778 } |
|
779 |
|
780 .browserStack[responsivemode][notransition] { |
|
781 transition: none; |
|
782 } |
|
783 |
|
784 .toolbarbutton-badge[badge]:not([badge=""])::after { |
|
785 content: attr(badge); |
|
786 } |
|
787 |
|
788 toolbarbutton[type="badged"] { |
|
789 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged"); |
|
790 } |
|
791 |
|
792 toolbarbutton[type="socialmark"] { |
|
793 -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks"); |
|
794 } |
|
795 |
|
796 toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon, |
|
797 toolbarbutton[type="socialmark"] > .toolbarbutton-icon { |
|
798 max-width: 16px; |
|
799 } |
|
800 toolbarpaletteitem[place="palette"] > toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon { |
|
801 max-width: 32px; |
|
802 } |
|
803 |
|
804 panelview > .social-panel-frame { |
|
805 width: auto; |
|
806 height: auto; |
|
807 } |
|
808 |
|
809 /* Translation */ |
|
810 notification[value="translation"] { |
|
811 -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar"); |
|
812 } |
|
813 |
|
814 /* Social */ |
|
815 /* Note the chatbox 'width' values are duplicated in socialchat.xml */ |
|
816 chatbox { |
|
817 -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox"); |
|
818 transition: height 150ms ease-out, width 150ms ease-out; |
|
819 height: 285px; |
|
820 width: 260px; /* CHAT_WIDTH_OPEN in socialchat.xml */ |
|
821 } |
|
822 |
|
823 chatbox[minimized="true"] { |
|
824 width: 160px; |
|
825 height: 20px; /* CHAT_WIDTH_MINIMIZED in socialchat.xml */ |
|
826 } |
|
827 |
|
828 chatbar { |
|
829 -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar"); |
|
830 height: 0; |
|
831 max-height: 0; |
|
832 } |
|
833 |
|
834 /** See bug 872317 for why the following rule is necessary. */ |
|
835 |
|
836 #downloads-button { |
|
837 -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton"); |
|
838 } |
|
839 |
|
840 /*** Visibility of downloads indicator controls ***/ |
|
841 |
|
842 /* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel, |
|
843 and just show the icon. This is a hack to side-step very weird layout bugs that |
|
844 seem to be caused by the indicator stack interacting with the menu panel. */ |
|
845 #downloads-button[indicator]:not([cui-areatype="menu-panel"]) > image.toolbarbutton-icon, |
|
846 #downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor { |
|
847 display: none; |
|
848 } |
|
849 |
|
850 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > image.toolbarbutton-icon { |
|
851 display: -moz-box; |
|
852 } |
|
853 |
|
854 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon { |
|
855 display: none; |
|
856 } |
|
857 |
|
858 #downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon, |
|
859 #downloads-button:not(:-moz-any([progress], [counter], [paused])) |
|
860 #downloads-indicator-progress-area |
|
861 { |
|
862 visibility: hidden; |
|
863 } |
|
864 |
|
865 /* Hacks for toolbar full and text modes, until bug 573329 removes them */ |
|
866 |
|
867 toolbar[mode="text"] > #downloads-button { |
|
868 display: -moz-box; |
|
869 -moz-box-orient: vertical; |
|
870 -moz-box-pack: center; |
|
871 } |
|
872 |
|
873 toolbar[mode="text"] > #downloads-button > .toolbarbutton-text { |
|
874 -moz-box-ordinal-group: 1; |
|
875 } |
|
876 |
|
877 toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon { |
|
878 display: -moz-box; |
|
879 -moz-box-ordinal-group: 2; |
|
880 visibility: collapse; |
|
881 } |
|
882 |
|
883 /* full screen chat window support */ |
|
884 chatbar:-moz-full-screen-ancestor, |
|
885 chatbox:-moz-full-screen-ancestor { |
|
886 border: none; |
|
887 position: fixed !important; |
|
888 top: 0 !important; |
|
889 left: 0 !important; |
|
890 right: 0 !important; |
|
891 bottom: 0 !important; |
|
892 width: 100% !important; |
|
893 height: 100% !important; |
|
894 margin: 0 !important; |
|
895 min-width: 0 !important; |
|
896 max-width: none !important; |
|
897 min-height: 0 !important; |
|
898 max-height: none !important; |
|
899 box-sizing: border-box !important; |
|
900 } |
|
901 |
|
902 /* hide chat chrome when chat is fullscreen */ |
|
903 chatbox:-moz-full-screen-ancestor > .chat-titlebar { |
|
904 display: none; |
|
905 } |
|
906 |
|
907 /* hide chatbar if browser tab is fullscreen */ |
|
908 *:-moz-full-screen-ancestor chatbar:not(:-moz-full-screen-ancestor) { |
|
909 display: none; |
|
910 } |
|
911 |
|
912 /* hide sidebar when fullscreen */ |
|
913 *:-moz-full-screen-ancestor #social-sidebar-box:not(:-moz-full-screen-ancestor) { |
|
914 display: none; |
|
915 } |
|
916 |
|
917 /* Combobox dropdown renderer */ |
|
918 #ContentSelectDropdown { |
|
919 max-height: 400px; |
|
920 } |
|
921 |
|
922 .contentSelectDropdown-optgroup { |
|
923 font-weight: bold; |
|
924 /* color: menutext used to overwrite the disabled color */ |
|
925 color: menutext; |
|
926 } |
|
927 |
|
928 .contentSelectDropdown-ingroup { |
|
929 -moz-margin-start: 2em; |
|
930 } |
|
931 |
|
932 /* Give this menupopup an arrow panel styling */ |
|
933 #BMB_bookmarksPopup { |
|
934 -moz-appearance: none; |
|
935 -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow"); |
|
936 background: transparent; |
|
937 border: none; |
|
938 transition: opacity 300ms; |
|
939 /* The popup inherits -moz-image-region from the button, must reset it */ |
|
940 -moz-image-region: auto; |
|
941 } |
|
942 |
|
943 /* Customize mode */ |
|
944 #navigator-toolbox, |
|
945 #browser-bottombox, |
|
946 #content-deck { |
|
947 transition-property: margin-left, margin-right; |
|
948 transition-duration: 200ms; |
|
949 transition-timing-function: linear; |
|
950 } |
|
951 |
|
952 #tab-view-deck[fastcustomizeanimation] #navigator-toolbox, |
|
953 #tab-view-deck[fastcustomizeanimation] #content-deck { |
|
954 transition-duration: 1ms; |
|
955 transition-timing-function: linear; |
|
956 } |
|
957 |
|
958 #PanelUI-contents > .panel-customization-placeholder > .panel-customization-placeholder-child { |
|
959 list-style-image: none; |
|
960 } |
|
961 |
|
962 #customization-panelHolder { |
|
963 overflow-y: hidden; |
|
964 } |
|
965 |
|
966 #customization-panelWrapper, |
|
967 #customization-panelWrapper > .panel-arrowcontent { |
|
968 -moz-box-flex: 1; |
|
969 } |
|
970 |
|
971 #customization-panelWrapper > .panel-arrowcontent { |
|
972 padding: 0 !important; |
|
973 overflow: hidden; |
|
974 } |
|
975 |
|
976 #customization-panelHolder > #PanelUI-mainView { |
|
977 display: flex; |
|
978 flex-direction: column; |
|
979 /* Hack alert - by manually setting the preferred height to 0, we convince |
|
980 #PanelUI-mainView to shrink when the window gets smaller in customization |
|
981 mode. Not sure why that is - might have to do with our intermingling of |
|
982 XUL flex, and CSS3 Flexbox. */ |
|
983 height: 0; |
|
984 } |
|
985 |
|
986 #customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller { |
|
987 display: flex; |
|
988 flex: auto; |
|
989 flex-direction: column; |
|
990 } |
|
991 |
|
992 #customization-panel-container { |
|
993 overflow-y: auto; |
|
994 } |
|
995 |
|
996 toolbarpaletteitem[dragover] { |
|
997 border-left-color: transparent; |
|
998 border-right-color: transparent; |
|
999 } |
|
1000 |
|
1001 #customization-palette:not([hidden]) { |
|
1002 display: block; |
|
1003 overflow: auto; |
|
1004 min-height: 3em; |
|
1005 } |
|
1006 |
|
1007 #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker { |
|
1008 display: -moz-box; |
|
1009 } |
|
1010 |
|
1011 toolbarpaletteitem[place="palette"] { |
|
1012 width: 10em; |
|
1013 height: calc(40px + 2em); |
|
1014 margin-bottom: 5px; |
|
1015 overflow: hidden; |
|
1016 display: inline-block; |
|
1017 } |
|
1018 |
|
1019 toolbarpaletteitem[place="palette"][hidden] { |
|
1020 display: none; |
|
1021 } |
|
1022 |
|
1023 #customization-palette .toolbarpaletteitem-box { |
|
1024 -moz-box-pack: center; |
|
1025 -moz-box-flex: 1; |
|
1026 width: 10em; |
|
1027 max-width: 10em; |
|
1028 } |
|
1029 |
|
1030 /* UI Tour */ |
|
1031 |
|
1032 @keyframes uitour-wobble { |
|
1033 from { |
|
1034 transform: rotate(0deg) translateX(3px) rotate(0deg); |
|
1035 } |
|
1036 50% { |
|
1037 transform: rotate(360deg) translateX(3px) rotate(-360deg); |
|
1038 } |
|
1039 to { |
|
1040 transform: rotate(720deg) translateX(0px) rotate(-720deg); |
|
1041 } |
|
1042 } |
|
1043 |
|
1044 @keyframes uitour-zoom { |
|
1045 from { |
|
1046 transform: scale(0.8); |
|
1047 } |
|
1048 50% { |
|
1049 transform: scale(1.0); |
|
1050 } |
|
1051 to { |
|
1052 transform: scale(0.8); |
|
1053 } |
|
1054 } |
|
1055 |
|
1056 @keyframes uitour-color { |
|
1057 from { |
|
1058 border-color: #5B9CD9; |
|
1059 } |
|
1060 50% { |
|
1061 border-color: #FF0000; |
|
1062 } |
|
1063 to { |
|
1064 border-color: #5B9CD9; |
|
1065 } |
|
1066 } |
|
1067 |
|
1068 #UITourHighlightContainer, |
|
1069 #UITourHighlight { |
|
1070 pointer-events: none; |
|
1071 } |
|
1072 |
|
1073 #UITourHighlight[active] { |
|
1074 animation-delay: 2s; |
|
1075 animation-fill-mode: forwards; |
|
1076 animation-iteration-count: infinite; |
|
1077 animation-timing-function: linear; |
|
1078 } |
|
1079 |
|
1080 #UITourHighlight[active="wobble"] { |
|
1081 animation-name: uitour-wobble; |
|
1082 animation-delay: 0s; |
|
1083 animation-duration: 1.5s; |
|
1084 animation-iteration-count: 1; |
|
1085 } |
|
1086 #UITourHighlight[active="zoom"] { |
|
1087 animation-name: uitour-zoom; |
|
1088 animation-duration: 1s; |
|
1089 } |
|
1090 #UITourHighlight[active="color"] { |
|
1091 animation-name: uitour-color; |
|
1092 animation-duration: 2s; |
|
1093 } |