browser/base/content/browser.css@8bccb770b82d
browser/base/content/browser.css
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
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/. */
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");
9 #main-window:not([chromehidden~="toolbar"]) {
10 %ifdef XP_MACOSX
11 min-width: 335px;
12 %else
13 min-width: 300px;
14 %endif
15 }
17 #main-window[customize-entered] {
18 min-width: -moz-fit-content;
19 }
21 searchbar {
22 -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
23 }
25 .browserStack > browser[remote="true"] {
26 -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
27 }
29 toolbar[customizable="true"] {
30 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
31 }
33 %ifdef XP_MACOSX
34 #toolbar-menubar {
35 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub");
36 }
38 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
39 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
40 }
41 %endif
43 #toolbar-menubar[autohide="true"] {
44 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
45 }
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 }
57 #addonbar-closebutton {
58 visibility: visible;
59 height: 0 !important;
60 }
62 #status-bar {
63 height: 0 !important;
64 -moz-binding: none;
65 padding: 0;
66 margin: 0;
67 }
69 panelmultiview {
70 -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
71 }
73 panelview {
74 -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview");
75 -moz-box-orient: vertical;
76 }
78 .panel-mainview {
79 transition: transform 150ms;
80 }
82 panelview:not([mainview]):not([current]) {
83 display: none;
84 }
86 tabbrowser {
87 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
88 }
90 .tabbrowser-tabs {
91 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
92 }
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 }
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 }
106 .tabbrowser-tab {
107 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
108 }
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 }
119 .tabbrowser-tab:not([pinned]):not([fadein]) {
120 max-width: 0.1px;
121 min-width: 0.1px;
122 visibility: hidden;
123 }
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 }
132 .tab-close-button[fadein],
133 .tab-background[fadein] {
134 /* This transition is only wanted for opening tabs. */
135 transition: visibility 0ms 25ms;
136 }
138 .tab-close-button:not([fadein]),
139 .tab-background:not([fadein]) {
140 visibility: hidden;
141 }
143 .tab-label:not([fadein]),
144 .tab-throbber:not([fadein]),
145 .tab-icon-image:not([fadein]) {
146 display: none;
147 }
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 }
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 }
160 .tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
161 transition: transform 200ms ease-out;
162 }
164 #alltabs-popup {
165 -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
166 }
168 toolbar[printpreview="true"] {
169 -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
170 }
172 toolbar[overflowable] > .customization-target {
173 overflow: hidden;
174 }
176 toolbar:not([overflowing]) > .overflow-button,
177 toolbar[customizing] > .overflow-button {
178 display: none;
179 }
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 }
189 #titlebar {
190 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
191 }
193 #titlebar-spacer {
194 pointer-events: none;
195 }
197 #main-window[tabsintitlebar] #titlebar-buttonbox {
198 position: relative;
199 }
201 #titlebar-buttonbox {
202 -moz-appearance: -moz-window-button-box;
203 }
205 %ifdef XP_MACOSX
206 #titlebar-fullscreen-button {
207 -moz-appearance: -moz-mac-fullscreen-button;
208 }
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 }
216 #titlebar-buttonbox-container:-moz-locale-dir(rtl) {
217 -moz-box-align: end;
218 }
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 }
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
241 %if !defined(MOZ_WIDGET_GTK) && !defined(MOZ_WIDGET_QT)
242 #TabsToolbar > .private-browsing-indicator {
243 -moz-box-ordinal-group: 1000;
244 }
245 %endif
247 %ifdef XP_WIN
248 #main-window[sizemode="maximized"] #titlebar-buttonbox {
249 -moz-appearance: -moz-window-button-box-maximized;
250 }
251 %endif
253 %endif
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 }
262 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > toolbarbutton {
263 display: -moz-box;
264 }
266 toolbarpaletteitem > toolbaritem[sdkstylewidget="true"][cui-areatype="toolbar"] > .toolbarbutton-text {
267 display: -moz-box;
268 }
270 toolbarpaletteitem[removable="false"] {
271 opacity: 0.5;
272 cursor: default;
273 }
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 }
282 #PlacesToolbarDropIndicatorHolder {
283 position: absolute;
284 top: 25%;
285 }
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 }
293 toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
294 toolbar:not(#TabsToolbar) > #personal-bookmarks {
295 -moz-box-flex: 1;
296 }
298 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
299 display: -moz-box;
300 }
302 #urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
303 #urlbar-reload-button[displaystop] {
304 visibility: collapse;
305 }
307 #PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
308 direction: rtl;
309 }
311 #panelMenu_bookmarksMenu > .bookmark-item {
312 max-width: none;
313 }
315 #urlbar-container {
316 min-width: 50ch;
317 }
319 #search-container {
320 min-width: 25ch;
321 }
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 }
331 #main-window:-moz-lwtheme {
332 background-repeat: no-repeat;
333 background-position: top right;
334 }
336 %ifdef XP_MACOSX
337 #main-window[inFullscreen="true"] {
338 padding-top: 0; /* override drawintitlebar="true" */
339 }
340 %endif
342 #browser-bottombox[lwthemefooter="true"] {
343 background-repeat: no-repeat;
344 background-position: bottom left;
345 }
347 .menuitem-tooltip {
348 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-tooltip");
349 }
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 }
357 /* Hide menu elements intended for keyboard access support */
358 #main-menubar[openedwithkey=false] .show-only-for-keyboard {
359 display: none;
360 }
362 /* ::::: location bar ::::: */
363 #urlbar {
364 -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
365 }
367 .ac-url-text:-moz-locale-dir(rtl),
368 .ac-title:-moz-locale-dir(rtl) > description {
369 direction: ltr !important;
370 }
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 }
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 }
383 panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-url-text {
384 visibility: visible;
385 }
387 #urlbar:not([actiontype]) > #urlbar-display-box {
388 display: none;
389 }
391 #PopupAutoComplete {
392 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-autocomplete-result-popup");
393 }
395 #PopupAutoCompleteRichResult {
396 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
397 }
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 }
406 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
407 visibility: collapse;
408 }
410 #urlbar[pageproxystate="invalid"] > #identity-box {
411 pointer-events: none;
412 }
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 }
450 #identity-icon-country-label {
451 direction: ltr;
452 }
454 #identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
455 -moz-margin-end: 0.25em !important;
456 }
458 #main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
459 visibility: hidden;
460 }
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 }
471 toolbarbutton.bookmark-item {
472 max-width: 13em;
473 }
475 #editBMPanel_tagsSelector {
476 /* override default listbox width from xul.css */
477 width: auto;
478 }
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 }
489 menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
490 display: none;
491 }
493 menuitem.spell-suggestion {
494 font-weight: bold;
495 }
497 /* apply Fitts' law to the notification bar's close button */
498 window[sizemode="maximized"] #content .notification-inner {
499 border-right: 0px !important;
500 }
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 }
508 #navigator-toolbox ,
509 #mainPopupSet {
510 min-width: 1px;
511 }
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 }
520 #sync-notifications notification {
521 -moz-binding: url("chrome://browser/content/sync/notification.xml#notification");
522 }
523 %endif
525 /* History Swipe Animation */
527 #historySwipeAnimationContainer {
528 overflow: hidden;
529 }
531 #historySwipeAnimationPreviousPage,
532 #historySwipeAnimationCurrentPage,
533 #historySwipeAnimationNextPage {
534 background: none top left no-repeat white;
535 }
537 #historySwipeAnimationPreviousPage {
538 background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot);
539 }
541 #historySwipeAnimationCurrentPage {
542 background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot);
543 }
545 #historySwipeAnimationNextPage {
546 background-image: -moz-element(#historySwipeAnimationNextPageSnapshot);
547 }
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 }
564 /* Full Screen UI */
566 #fullscr-toggler {
567 height: 1px;
568 background: black;
569 }
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 }
580 #full-screen-warning-container[fade-warning-out] {
581 transition-property: opacity !important;
582 transition-duration: 500ms !important;
583 opacity: 0.0;
584 }
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 }
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 }
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 }
607 /* ::::: Ctrl-Tab Panel ::::: */
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 }
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 }
626 .ctrlTab-favicon {
627 width: 16px;
628 height: 16px;
629 }
631 .ctrlTab-preview {
632 -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
633 }
636 /* notification anchors should only be visible when their associated
637 notifications are */
638 .notification-anchor-icon {
639 -moz-user-focus: normal;
640 }
642 .notification-anchor-icon:not([showing]) {
643 display: none;
644 }
646 #notification-popup .text-link.custom-link {
647 -moz-binding: url("chrome://global/content/bindings/text.xml#text-label");
648 text-decoration: none;
649 }
651 #invalid-form-popup > description {
652 max-width: 280px;
653 }
655 #addon-progress-notification {
656 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification");
657 }
659 #identity-request-notification {
660 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#identity-request-notification");
661 }
663 #click-to-play-plugins-notification {
664 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#click-to-play-plugins-notification");
665 }
667 .plugin-popupnotification-centeritem {
668 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#plugin-popupnotification-center-item");
669 }
671 browser[tabmodalPromptShowing] {
672 -moz-user-focus: none !important;
673 }
675 /* Status panel */
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 }
685 statuspanel:-moz-locale-dir(ltr)[mirror],
686 statuspanel:-moz-locale-dir(rtl):not([mirror]) {
687 left: auto;
688 right: 0;
689 }
691 statuspanel[sizelimit] {
692 max-width: 50%;
693 }
695 statuspanel[type=status] {
696 min-width: 23em;
697 }
699 @media all and (max-width: 800px) {
700 statuspanel[type=status] {
701 min-width: 33%;
702 }
703 }
705 statuspanel[type=overLink] {
706 transition: opacity 120ms ease-out;
707 direction: ltr;
708 }
710 statuspanel[inactive] {
711 transition: none;
712 opacity: 0;
713 }
715 statuspanel[inactive][previoustype=overLink] {
716 transition: opacity 200ms ease-out;
717 }
719 .statuspanel-inner {
720 height: 3em;
721 width: 100%;
722 -moz-box-align: end;
723 }
725 .panel-inner-arrowcontentfooter[footertype="promobox"] {
726 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
727 }
729 /* tabview menus */
730 .tabview-menuitem {
731 max-width: 32em;
732 }
734 /* highlighter */
735 %include highlighter.css
737 /* gcli */
739 html|*#gcli-tooltip-frame,
740 html|*#gcli-output-frame,
741 #gcli-output,
742 #gcli-tooltip {
743 overflow-x: hidden;
744 }
746 .gclitoolbar-input-node,
747 .gclitoolbar-complete-node {
748 direction: ltr;
749 }
751 #developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
752 display: none;
753 }
755 #developer-toolbar-toolbox-button[error-count]:before {
756 content: attr(error-count);
757 display: -moz-box;
758 -moz-box-pack: center;
759 }
761 /* Responsive Mode */
763 .browserContainer[responsivemode] {
764 overflow: auto;
765 }
767 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
768 -moz-box-pack: end;
769 }
771 .browserStack[responsivemode] {
772 transition-duration: 200ms;
773 transition-timing-function: linear;
774 }
776 .browserStack[responsivemode] {
777 transition-property: min-width, max-width, min-height, max-height;
778 }
780 .browserStack[responsivemode][notransition] {
781 transition: none;
782 }
784 .toolbarbutton-badge[badge]:not([badge=""])::after {
785 content: attr(badge);
786 }
788 toolbarbutton[type="badged"] {
789 -moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged");
790 }
792 toolbarbutton[type="socialmark"] {
793 -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
794 }
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 }
804 panelview > .social-panel-frame {
805 width: auto;
806 height: auto;
807 }
809 /* Translation */
810 notification[value="translation"] {
811 -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
812 }
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 }
823 chatbox[minimized="true"] {
824 width: 160px;
825 height: 20px; /* CHAT_WIDTH_MINIMIZED in socialchat.xml */
826 }
828 chatbar {
829 -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar");
830 height: 0;
831 max-height: 0;
832 }
834 /** See bug 872317 for why the following rule is necessary. */
836 #downloads-button {
837 -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
838 }
840 /*** Visibility of downloads indicator controls ***/
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 }
850 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > image.toolbarbutton-icon {
851 display: -moz-box;
852 }
854 toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon {
855 display: none;
856 }
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 }
865 /* Hacks for toolbar full and text modes, until bug 573329 removes them */
867 toolbar[mode="text"] > #downloads-button {
868 display: -moz-box;
869 -moz-box-orient: vertical;
870 -moz-box-pack: center;
871 }
873 toolbar[mode="text"] > #downloads-button > .toolbarbutton-text {
874 -moz-box-ordinal-group: 1;
875 }
877 toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon {
878 display: -moz-box;
879 -moz-box-ordinal-group: 2;
880 visibility: collapse;
881 }
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 }
902 /* hide chat chrome when chat is fullscreen */
903 chatbox:-moz-full-screen-ancestor > .chat-titlebar {
904 display: none;
905 }
907 /* hide chatbar if browser tab is fullscreen */
908 *:-moz-full-screen-ancestor chatbar:not(:-moz-full-screen-ancestor) {
909 display: none;
910 }
912 /* hide sidebar when fullscreen */
913 *:-moz-full-screen-ancestor #social-sidebar-box:not(:-moz-full-screen-ancestor) {
914 display: none;
915 }
917 /* Combobox dropdown renderer */
918 #ContentSelectDropdown {
919 max-height: 400px;
920 }
922 .contentSelectDropdown-optgroup {
923 font-weight: bold;
924 /* color: menutext used to overwrite the disabled color */
925 color: menutext;
926 }
928 .contentSelectDropdown-ingroup {
929 -moz-margin-start: 2em;
930 }
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 }
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 }
952 #tab-view-deck[fastcustomizeanimation] #navigator-toolbox,
953 #tab-view-deck[fastcustomizeanimation] #content-deck {
954 transition-duration: 1ms;
955 transition-timing-function: linear;
956 }
958 #PanelUI-contents > .panel-customization-placeholder > .panel-customization-placeholder-child {
959 list-style-image: none;
960 }
962 #customization-panelHolder {
963 overflow-y: hidden;
964 }
966 #customization-panelWrapper,
967 #customization-panelWrapper > .panel-arrowcontent {
968 -moz-box-flex: 1;
969 }
971 #customization-panelWrapper > .panel-arrowcontent {
972 padding: 0 !important;
973 overflow: hidden;
974 }
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 }
986 #customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller {
987 display: flex;
988 flex: auto;
989 flex-direction: column;
990 }
992 #customization-panel-container {
993 overflow-y: auto;
994 }
996 toolbarpaletteitem[dragover] {
997 border-left-color: transparent;
998 border-right-color: transparent;
999 }
1001 #customization-palette:not([hidden]) {
1002 display: block;
1003 overflow: auto;
1004 min-height: 3em;
1005 }
1007 #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
1008 display: -moz-box;
1009 }
1011 toolbarpaletteitem[place="palette"] {
1012 width: 10em;
1013 height: calc(40px + 2em);
1014 margin-bottom: 5px;
1015 overflow: hidden;
1016 display: inline-block;
1017 }
1019 toolbarpaletteitem[place="palette"][hidden] {
1020 display: none;
1021 }
1023 #customization-palette .toolbarpaletteitem-box {
1024 -moz-box-pack: center;
1025 -moz-box-flex: 1;
1026 width: 10em;
1027 max-width: 10em;
1028 }
1030 /* UI Tour */
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 }
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 }
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 }
1068 #UITourHighlightContainer,
1069 #UITourHighlight {
1070 pointer-events: none;
1071 }
1073 #UITourHighlight[active] {
1074 animation-delay: 2s;
1075 animation-fill-mode: forwards;
1076 animation-iteration-count: infinite;
1077 animation-timing-function: linear;
1078 }
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 }
