browser/base/content/browser.css

branch
TOR_BUG_3246
changeset 6
8bccb770b82d
equal deleted inserted replaced
-1:000000000000 0:4deb5822ead7
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 }

mercurial