michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
michael@0: @namespace html url("http://www.w3.org/1999/xhtml");
michael@0: @namespace svg url("http://www.w3.org/2000/svg");
michael@0: 
michael@0: #main-window:not([chromehidden~="toolbar"]) {
michael@0: %ifdef XP_MACOSX
michael@0:   min-width: 335px;
michael@0: %else
michael@0:   min-width: 300px;
michael@0: %endif
michael@0: }
michael@0: 
michael@0: #main-window[customize-entered] {
michael@0:   min-width: -moz-fit-content;
michael@0: }
michael@0: 
michael@0: searchbar {
michael@0:   -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
michael@0: }
michael@0: 
michael@0: .browserStack > browser[remote="true"] {
michael@0:   -moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
michael@0: }
michael@0: 
michael@0: toolbar[customizable="true"] {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
michael@0: }
michael@0: 
michael@0: %ifdef XP_MACOSX
michael@0: #toolbar-menubar {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub");
michael@0: }
michael@0: 
michael@0: toolbar[customizable="true"]:not([nowindowdrag="true"]) {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
michael@0: }
michael@0: %endif
michael@0: 
michael@0: #toolbar-menubar[autohide="true"] {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
michael@0: }
michael@0: 
michael@0: #addon-bar {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#addonbar-delegating");
michael@0:   visibility: visible;
michael@0:   margin: 0;
michael@0:   height: 0 !important;
michael@0:   overflow: hidden;
michael@0:   padding: 0;
michael@0:   border: 0 none;
michael@0: }
michael@0: 
michael@0: #addonbar-closebutton {
michael@0:   visibility: visible;
michael@0:   height: 0 !important;
michael@0: }
michael@0: 
michael@0: #status-bar {
michael@0:   height: 0 !important;
michael@0:   -moz-binding: none;
michael@0:   padding: 0;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: panelmultiview {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
michael@0: }
michael@0: 
michael@0: panelview {
michael@0:   -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview");
michael@0:   -moz-box-orient: vertical;
michael@0: }
michael@0: 
michael@0: .panel-mainview {
michael@0:   transition: transform 150ms;
michael@0: }
michael@0: 
michael@0: panelview:not([mainview]):not([current]) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: tabbrowser {
michael@0:   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
michael@0: }
michael@0: 
michael@0: .tabbrowser-tabs {
michael@0:   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
michael@0: }
michael@0: 
michael@0: #tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button,
michael@0: #tabbrowser-tabs:not([overflow="true"]) + #new-tab-button,
michael@0: #tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
michael@0: #TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
michael@0: #TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
michael@0:   visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab {
michael@0:   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab:not([pinned]) {
michael@0:   -moz-box-flex: 100;
michael@0:   max-width: 210px;
michael@0:   min-width: 100px;
michael@0:   width: 0;
michael@0:   transition: min-width 200ms ease-out,
michael@0:               max-width 230ms ease-out;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab:not([pinned]):not([fadein]) {
michael@0:   max-width: 0.1px;
michael@0:   min-width: 0.1px;
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .tab-close-button,
michael@0: .tab-background {
michael@0:   /* Explicitly set the visibility to override the value (collapsed)
michael@0:    * we inherit from #TabsToolbar[collapsed] upon opening a browser window. */
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: .tab-close-button[fadein],
michael@0: .tab-background[fadein] {
michael@0:   /* This transition is only wanted for opening tabs. */
michael@0:   transition: visibility 0ms 25ms;
michael@0: }
michael@0: 
michael@0: .tab-close-button:not([fadein]),
michael@0: .tab-background:not([fadein]) {
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .tab-label:not([fadein]),
michael@0: .tab-throbber:not([fadein]),
michael@0: .tab-icon-image:not([fadein]) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
michael@0:   position: fixed !important;
michael@0:   display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
michael@0: }
michael@0: 
michael@0: .tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected] {
michael@0:   position: relative;
michael@0:   z-index: 2;
michael@0:   pointer-events: none; /* avoid blocking dragover events on scroll buttons */
michael@0: }
michael@0: 
michael@0: .tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
michael@0:   transition: transform 200ms ease-out;
michael@0: }
michael@0: 
michael@0: #alltabs-popup {
michael@0:   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
michael@0: }
michael@0: 
michael@0: toolbar[printpreview="true"] {
michael@0:   -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
michael@0: }
michael@0: 
michael@0: toolbar[overflowable] > .customization-target {
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: toolbar:not([overflowing]) > .overflow-button,
michael@0: toolbar[customizing] > .overflow-button {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: %ifdef CAN_DRAW_IN_TITLEBAR
michael@0: #main-window:not([chromemargin]) > #titlebar,
michael@0: #main-window[inFullscreen] > #titlebar,
michael@0: #main-window[inFullscreen] .titlebar-placeholder,
michael@0: #main-window:not([tabsintitlebar]) .titlebar-placeholder {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #titlebar {
michael@0:   -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
michael@0: }
michael@0: 
michael@0: #titlebar-spacer {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #main-window[tabsintitlebar] #titlebar-buttonbox {
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: #titlebar-buttonbox {
michael@0:   -moz-appearance: -moz-window-button-box;
michael@0: }
michael@0: 
michael@0: %ifdef XP_MACOSX
michael@0: #titlebar-fullscreen-button {
michael@0:   -moz-appearance: -moz-mac-fullscreen-button;
michael@0: }
michael@0: 
michael@0: /* Because these buttons don't move, they should always be aligned the same,
michael@0:  * left and right were deprecated, so we have to do work to get it to mean that: */
michael@0: #titlebar-buttonbox-container:-moz-locale-dir(ltr) {
michael@0:   -moz-box-align: start;
michael@0: }
michael@0: 
michael@0: #titlebar-buttonbox-container:-moz-locale-dir(rtl) {
michael@0:   -moz-box-align: end;
michael@0: }
michael@0: 
michael@0: /* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
michael@0: #titlebar-secondary-buttonbox:-moz-locale-dir(ltr),
michael@0: #titlebar-buttonbox-container:-moz-locale-dir(rtl),
michael@0: .titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
michael@0: .titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
michael@0:   -moz-box-ordinal-group: 1000;
michael@0: }
michael@0: 
michael@0: #titlebar-secondary-buttonbox:-moz-locale-dir(rtl),
michael@0: #titlebar-buttonbox-container:-moz-locale-dir(ltr),
michael@0: .titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
michael@0: .titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
michael@0:   -moz-box-ordinal-group: 0;
michael@0: }
michael@0: %else
michael@0: /* On non-OSX, these should be start-aligned */
michael@0: #titlebar-buttonbox-container {
michael@0:   -moz-box-align: start;
michael@0: }
michael@0: %endif
michael@0: 
michael@0: %if !defined(MOZ_WIDGET_GTK) && !defined(MOZ_WIDGET_QT)
michael@0: #TabsToolbar > .private-browsing-indicator {
michael@0:   -moz-box-ordinal-group: 1000;
michael@0: }
michael@0: %endif
michael@0: 
michael@0: %ifdef XP_WIN
michael@0: #main-window[sizemode="maximized"] #titlebar-buttonbox {
michael@0:   -moz-appearance: -moz-window-button-box-maximized;
michael@0: }
michael@0: %endif
michael@0: 
michael@0: %endif
michael@0: 
michael@0: /* Rules to help integrate SDK widgets */
michael@0: toolbaritem[sdkstylewidget="true"] > toolbarbutton,
michael@0: toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe,
michael@0: toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > toolbarbutton {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem > toolbaritem[sdkstylewidget="true"][cui-areatype="toolbar"] > .toolbarbutton-text {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[removable="false"] {
michael@0:   opacity: 0.5;
michael@0:   cursor: default;
michael@0: }
michael@0: 
michael@0: #bookmarks-toolbar-placeholder,
michael@0: toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
michael@0: #personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar,
michael@0: #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #PlacesToolbar {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #PlacesToolbarDropIndicatorHolder {
michael@0:   position: absolute;
michael@0:   top: 25%;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
michael@0: #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder,
michael@0: #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
michael@0: toolbar:not(#TabsToolbar) > #personal-bookmarks {
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: #urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
michael@0: #urlbar-reload-button[displaystop] {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
michael@0:   direction: rtl;
michael@0: }
michael@0: 
michael@0: #panelMenu_bookmarksMenu > .bookmark-item {
michael@0:   max-width: none;
michael@0: }
michael@0: 
michael@0: #urlbar-container {
michael@0:   min-width: 50ch;
michael@0: }
michael@0: 
michael@0: #search-container {
michael@0:   min-width: 25ch;
michael@0: }
michael@0: 
michael@0: #urlbar,
michael@0: .searchbar-textbox {
michael@0:   /* Setting a width and min-width to let the location & search bars maintain
michael@0:      a constant width in case they haven't be resized manually. (bug 965772) */
michael@0:   width: 1px;
michael@0:   min-width: 1px;
michael@0: }
michael@0: 
michael@0: #main-window:-moz-lwtheme {
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: top right;
michael@0: }
michael@0: 
michael@0: %ifdef XP_MACOSX
michael@0: #main-window[inFullscreen="true"] {
michael@0:   padding-top: 0; /* override drawintitlebar="true" */
michael@0: }
michael@0: %endif
michael@0: 
michael@0: #browser-bottombox[lwthemefooter="true"] {
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: bottom left;
michael@0: }
michael@0: 
michael@0: .menuitem-tooltip {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-tooltip");
michael@0: }
michael@0: 
michael@0: .menuitem-iconic-tooltip,
michael@0: .menuitem-tooltip[type="checkbox"],
michael@0: .menuitem-tooltip[type="radio"] {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-iconic-tooltip");
michael@0: }
michael@0: 
michael@0: /* Hide menu elements intended for keyboard access support */
michael@0: #main-menubar[openedwithkey=false] .show-only-for-keyboard {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* ::::: location bar ::::: */
michael@0: #urlbar {
michael@0:   -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
michael@0: }
michael@0: 
michael@0: .ac-url-text:-moz-locale-dir(rtl),
michael@0: .ac-title:-moz-locale-dir(rtl) > description {
michael@0:   direction: ltr !important;
michael@0: }
michael@0: 
michael@0: /* For results that are actions, their description text is shown instead of
michael@0:    the URL - this needs to follow the locale's direction, unlike URLs. */
michael@0: panel:not([noactions]) > richlistbox > richlistitem[type~="action"]:-moz-locale-dir(rtl) > .ac-url-box {
michael@0:   direction: rtl;
michael@0: }
michael@0: 
michael@0: panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-action-text,
michael@0: panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-action-icon {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: panel[noactions] > richlistbox > richlistitem[type~="action"] > .ac-url-box > .ac-url > .ac-url-text {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: #urlbar:not([actiontype]) > #urlbar-display-box {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #PopupAutoComplete {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-autocomplete-result-popup");
michael@0: }
michael@0: 
michael@0: #PopupAutoCompleteRichResult {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
michael@0: }
michael@0: 
michael@0: #urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
michael@0: #urlbar[pageproxystate="invalid"][focused="true"] > #urlbar-go-button ~ toolbarbutton,
michael@0: #urlbar[pageproxystate="valid"] > #urlbar-go-button,
michael@0: #urlbar:not([focused="true"]) > #urlbar-go-button {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #urlbar[pageproxystate="invalid"] > #identity-box {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #identity-icon-labels {
michael@0:   max-width: 18em;
michael@0: }
michael@0: @media (max-width: 700px) {
michael@0:   #urlbar-container {
michael@0:     min-width: 45ch;
michael@0:   }
michael@0:   #identity-icon-labels {
michael@0:     max-width: 70px;
michael@0:   }
michael@0: }
michael@0: @media (max-width: 600px) {
michael@0:   #urlbar-container {
michael@0:     min-width: 40ch;
michael@0:   }
michael@0:   #identity-icon-labels {
michael@0:     max-width: 60px;
michael@0:   }
michael@0: }
michael@0: @media (max-width: 500px) {
michael@0:   #urlbar-container {
michael@0:     min-width: 35ch;
michael@0:   }
michael@0:   #identity-icon-labels {
michael@0:     max-width: 50px;
michael@0:   }
michael@0: }
michael@0: @media (max-width: 400px) {
michael@0:   #urlbar-container {
michael@0:     min-width: 28ch;
michael@0:   }
michael@0:   #identity-icon-labels {
michael@0:     max-width: 40px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: #identity-icon-country-label {
michael@0:   direction: ltr;
michael@0: }
michael@0: 
michael@0: #identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
michael@0:   -moz-margin-end: 0.25em !important;
michael@0: }
michael@0: 
michael@0: #main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: /* ::::: Unified Back-/Forward Button ::::: */
michael@0: #back-button > .toolbarbutton-menu-dropmarker,
michael@0: #forward-button > .toolbarbutton-menu-dropmarker {
michael@0:   display: none;
michael@0: }
michael@0: .unified-nav-current {
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: toolbarbutton.bookmark-item {
michael@0:   max-width: 13em;
michael@0: }
michael@0: 
michael@0: #editBMPanel_tagsSelector {
michael@0:   /* override default listbox width from xul.css */
michael@0:   width: auto;
michael@0: }
michael@0: 
michael@0: /* The star doesn't make sense as text */
michael@0: toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
michael@0:   display: -moz-box !important;
michael@0: }
michael@0: toolbar[mode="text"] #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-text,
michael@0: toolbar[mode="full"] #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: menuitem.spell-suggestion {
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: /* apply Fitts' law to the notification bar's close button */
michael@0: window[sizemode="maximized"] #content .notification-inner {
michael@0:   border-right: 0px !important;
michael@0: }
michael@0: 
michael@0: /* Hide extension toolbars that neglected to set the proper class */
michael@0: window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
michael@0: window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-menubar) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #navigator-toolbox ,
michael@0: #mainPopupSet {
michael@0:   min-width: 1px;
michael@0: }
michael@0: 
michael@0: %ifdef MOZ_SERVICES_SYNC
michael@0: /* Sync notification UI */
michael@0: #sync-notifications {
michael@0:   -moz-binding: url("chrome://browser/content/sync/notification.xml#notificationbox");
michael@0:   overflow-y: visible !important;
michael@0: }
michael@0: 
michael@0: #sync-notifications notification {
michael@0:   -moz-binding: url("chrome://browser/content/sync/notification.xml#notification");
michael@0: }
michael@0: %endif
michael@0: 
michael@0: /* History Swipe Animation */
michael@0: 
michael@0: #historySwipeAnimationContainer {
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: #historySwipeAnimationPreviousPage,
michael@0: #historySwipeAnimationCurrentPage,
michael@0: #historySwipeAnimationNextPage {
michael@0:   background: none top left no-repeat white;
michael@0: }
michael@0: 
michael@0: #historySwipeAnimationPreviousPage {
michael@0:   background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot);
michael@0: }
michael@0: 
michael@0: #historySwipeAnimationCurrentPage {
michael@0:   background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot);
michael@0: }
michael@0: 
michael@0: #historySwipeAnimationNextPage {
michael@0:   background-image: -moz-element(#historySwipeAnimationNextPageSnapshot);
michael@0: }
michael@0: 
michael@0: /* Identity UI */
michael@0: #identity-popup-content-box:not(.chromeUI) > #identity-popup-brandName,
michael@0: #identity-popup-content-box:not(.chromeUI) > #identity-popup-chromeLabel,
michael@0: #identity-popup-content-box.chromeUI > .identity-popup-label:not(#identity-popup-brandName):not(#identity-popup-chromeLabel),
michael@0: #identity-popup-content-box.chromeUI > .identity-popup-description,
michael@0: #identity-popup.chromeUI > #identity-popup-button-container,
michael@0: #identity-popup-content-box.unknownIdentity > #identity-popup-connectedToLabel ,
michael@0: #identity-popup-content-box.unknownIdentity > #identity-popup-runByLabel ,
michael@0: #identity-popup-content-box.unknownIdentity > #identity-popup-content-host ,
michael@0: #identity-popup-content-box.unknownIdentity > #identity-popup-content-owner ,
michael@0: #identity-popup-content-box.verifiedIdentity > #identity-popup-connectedToLabel2 ,
michael@0: #identity-popup-content-box.verifiedDomain > #identity-popup-connectedToLabel2 {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /*  Full Screen UI */
michael@0: 
michael@0: #fullscr-toggler {
michael@0:   height: 1px;
michael@0:   background: black;
michael@0: }
michael@0: 
michael@0: #full-screen-warning-container {
michael@0:   position: fixed;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   width: 100%;
michael@0:   height: 100%;
michael@0:   z-index: 2147483647 !important;
michael@0: }
michael@0: 
michael@0: #full-screen-warning-container[fade-warning-out] {
michael@0:   transition-property: opacity !important;
michael@0:   transition-duration: 500ms !important;
michael@0:   opacity: 0.0;
michael@0: }
michael@0: 
michael@0: /* When the modal fullscreen approval UI is showing, don't allow interaction
michael@0:    with the page, but when we're just showing the warning upon entering
michael@0:    fullscreen on an already approved page, do allow interaction with the page.
michael@0:  */
michael@0: #full-screen-warning-container:not([obscure-browser]) {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #full-screen-warning-message {
michael@0:   /* We must specify a max-width, otherwise word-wrap:break-word doesn't
michael@0:      work in descendant <description> and <label> elements. Bug 630864. */
michael@0:   max-width: 800px;
michael@0: }
michael@0: 
michael@0: #full-screen-domain-text,
michael@0: #full-screen-remember-decision > .checkbox-label-box > .checkbox-label {
michael@0:   word-wrap: break-word;
michael@0:   /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
michael@0:   min-width: 1px;
michael@0: }
michael@0: 
michael@0: /* ::::: Ctrl-Tab Panel ::::: */
michael@0: 
michael@0: .ctrlTab-preview > html|img,
michael@0: .ctrlTab-preview > html|canvas {
michael@0:   min-width: inherit;
michael@0:   max-width: inherit;
michael@0:   min-height: inherit;
michael@0:   max-height: inherit;
michael@0: }
michael@0: 
michael@0: .ctrlTab-favicon-container {
michael@0:   -moz-box-align: start;
michael@0: %ifdef XP_MACOSX
michael@0:   -moz-box-pack: end;
michael@0: %else
michael@0:   -moz-box-pack: start;
michael@0: %endif
michael@0: }
michael@0: 
michael@0: .ctrlTab-favicon {
michael@0:   width: 16px;
michael@0:   height: 16px;
michael@0: }
michael@0: 
michael@0: .ctrlTab-preview {
michael@0:   -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
michael@0: }
michael@0: 
michael@0: 
michael@0: /* notification anchors should only be visible when their associated
michael@0:    notifications are */
michael@0: .notification-anchor-icon {
michael@0:   -moz-user-focus: normal;
michael@0: }
michael@0: 
michael@0: .notification-anchor-icon:not([showing]) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #notification-popup .text-link.custom-link {
michael@0:   -moz-binding: url("chrome://global/content/bindings/text.xml#text-label");
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: #invalid-form-popup > description {
michael@0:   max-width: 280px;
michael@0: }
michael@0: 
michael@0: #addon-progress-notification {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification");
michael@0: }
michael@0: 
michael@0: #identity-request-notification {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#identity-request-notification");
michael@0: }
michael@0: 
michael@0: #click-to-play-plugins-notification {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#click-to-play-plugins-notification");
michael@0: }
michael@0: 
michael@0: .plugin-popupnotification-centeritem {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#plugin-popupnotification-center-item");
michael@0: }
michael@0: 
michael@0: browser[tabmodalPromptShowing] {
michael@0:   -moz-user-focus: none !important;
michael@0: }
michael@0: 
michael@0: /* Status panel */
michael@0: 
michael@0: statuspanel {
michael@0:   -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel");
michael@0:   position: fixed;
michael@0:   margin-top: -3em;
michael@0:   max-width: calc(100% - 5px);
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: statuspanel:-moz-locale-dir(ltr)[mirror],
michael@0: statuspanel:-moz-locale-dir(rtl):not([mirror]) {
michael@0:   left: auto;
michael@0:   right: 0;
michael@0: }
michael@0: 
michael@0: statuspanel[sizelimit] {
michael@0:   max-width: 50%;
michael@0: }
michael@0: 
michael@0: statuspanel[type=status] {
michael@0:   min-width: 23em;
michael@0: }
michael@0: 
michael@0: @media all and (max-width: 800px) {
michael@0:   statuspanel[type=status] {
michael@0:     min-width: 33%;
michael@0:   }
michael@0: }
michael@0: 
michael@0: statuspanel[type=overLink] {
michael@0:   transition: opacity 120ms ease-out;
michael@0:   direction: ltr;
michael@0: }
michael@0: 
michael@0: statuspanel[inactive] {
michael@0:   transition: none;
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: statuspanel[inactive][previoustype=overLink] {
michael@0:   transition: opacity 200ms ease-out;
michael@0: }
michael@0: 
michael@0: .statuspanel-inner {
michael@0:   height: 3em;
michael@0:   width: 100%;
michael@0:   -moz-box-align: end;
michael@0: }
michael@0: 
michael@0: .panel-inner-arrowcontentfooter[footertype="promobox"] {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
michael@0: }
michael@0: 
michael@0: /* tabview menus */
michael@0: .tabview-menuitem {
michael@0:   max-width: 32em;
michael@0: }
michael@0: 
michael@0: /* highlighter */
michael@0: %include highlighter.css
michael@0: 
michael@0: /* gcli */
michael@0: 
michael@0: html|*#gcli-tooltip-frame,
michael@0: html|*#gcli-output-frame,
michael@0: #gcli-output,
michael@0: #gcli-tooltip {
michael@0:   overflow-x: hidden;
michael@0: }
michael@0: 
michael@0: .gclitoolbar-input-node,
michael@0: .gclitoolbar-complete-node {
michael@0:   direction: ltr;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button[error-count]:before {
michael@0:   content: attr(error-count);
michael@0:   display: -moz-box;
michael@0:   -moz-box-pack: center;
michael@0: }
michael@0: 
michael@0: /* Responsive Mode */
michael@0: 
michael@0: .browserContainer[responsivemode] {
michael@0:   overflow: auto;
michael@0: }
michael@0: 
michael@0: .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) {
michael@0:   -moz-box-pack: end;
michael@0: }
michael@0: 
michael@0: .browserStack[responsivemode] {
michael@0:   transition-duration: 200ms;
michael@0:   transition-timing-function: linear;
michael@0: }
michael@0: 
michael@0: .browserStack[responsivemode] {
michael@0:   transition-property: min-width, max-width, min-height, max-height;
michael@0: }
michael@0: 
michael@0: .browserStack[responsivemode][notransition] {
michael@0:   transition: none;
michael@0: }
michael@0: 
michael@0: .toolbarbutton-badge[badge]:not([badge=""])::after {
michael@0:   content: attr(badge);
michael@0: }
michael@0: 
michael@0: toolbarbutton[type="badged"] {
michael@0:   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#toolbarbutton-badged");
michael@0: }
michael@0: 
michael@0: toolbarbutton[type="socialmark"] {
michael@0:   -moz-binding: url("chrome://browser/content/socialmarks.xml#toolbarbutton-marks");
michael@0: }
michael@0: 
michael@0: toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
michael@0: toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
michael@0:   max-width: 16px;
michael@0: }
michael@0: toolbarpaletteitem[place="palette"] > toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
michael@0:   max-width: 32px;
michael@0: }
michael@0: 
michael@0: panelview > .social-panel-frame {
michael@0:   width: auto;
michael@0:   height: auto;
michael@0: }
michael@0: 
michael@0: /* Translation */
michael@0: notification[value="translation"] {
michael@0:   -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
michael@0: }
michael@0: 
michael@0: /* Social */
michael@0: /* Note the chatbox 'width' values are duplicated in socialchat.xml */
michael@0: chatbox {
michael@0:   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbox");
michael@0:   transition: height 150ms ease-out, width 150ms ease-out;
michael@0:   height: 285px;
michael@0:   width: 260px; /* CHAT_WIDTH_OPEN in socialchat.xml */
michael@0: }
michael@0: 
michael@0: chatbox[minimized="true"] {
michael@0:   width: 160px;
michael@0:   height: 20px; /* CHAT_WIDTH_MINIMIZED in socialchat.xml */
michael@0: }
michael@0: 
michael@0: chatbar {
michael@0:   -moz-binding: url("chrome://browser/content/socialchat.xml#chatbar");
michael@0:   height: 0;
michael@0:   max-height: 0;
michael@0: }
michael@0: 
michael@0: /** See bug 872317 for why the following rule is necessary. */
michael@0: 
michael@0: #downloads-button {
michael@0:   -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
michael@0: }
michael@0: 
michael@0: /*** Visibility of downloads indicator controls ***/
michael@0: 
michael@0: /* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel,
michael@0:    and just show the icon. This is a hack to side-step very weird layout bugs that
michael@0:    seem to be caused by the indicator stack interacting with the menu panel. */
michael@0: #downloads-button[indicator]:not([cui-areatype="menu-panel"]) > image.toolbarbutton-icon,
michael@0: #downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > image.toolbarbutton-icon {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > stack.toolbarbutton-icon {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #downloads-button:-moz-any([progress], [counter], [paused]) #downloads-indicator-icon,
michael@0: #downloads-button:not(:-moz-any([progress], [counter], [paused]))
michael@0:                                                    #downloads-indicator-progress-area
michael@0: {
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: /* Hacks for toolbar full and text modes, until bug 573329 removes them */
michael@0: 
michael@0: toolbar[mode="text"] > #downloads-button {
michael@0:   display: -moz-box;
michael@0:   -moz-box-orient: vertical;
michael@0:   -moz-box-pack: center;
michael@0: }
michael@0: 
michael@0: toolbar[mode="text"] > #downloads-button > .toolbarbutton-text {
michael@0:   -moz-box-ordinal-group: 1;
michael@0: }
michael@0: 
michael@0: toolbar[mode="text"] > #downloads-button > .toolbarbutton-icon {
michael@0:   display: -moz-box;
michael@0:   -moz-box-ordinal-group: 2;
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: /* full screen chat window support */
michael@0: chatbar:-moz-full-screen-ancestor,
michael@0: chatbox:-moz-full-screen-ancestor  {
michael@0:   border: none;
michael@0:   position: fixed !important;
michael@0:   top: 0 !important;
michael@0:   left: 0 !important;
michael@0:   right: 0 !important;
michael@0:   bottom: 0 !important;
michael@0:   width: 100% !important;
michael@0:   height: 100% !important;
michael@0:   margin: 0 !important;
michael@0:   min-width: 0 !important;
michael@0:   max-width: none !important;
michael@0:   min-height: 0 !important;
michael@0:   max-height: none !important;
michael@0:   box-sizing: border-box !important;
michael@0: }
michael@0: 
michael@0: /* hide chat chrome when chat is fullscreen */
michael@0: chatbox:-moz-full-screen-ancestor > .chat-titlebar {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* hide chatbar if browser tab is fullscreen */
michael@0: *:-moz-full-screen-ancestor chatbar:not(:-moz-full-screen-ancestor) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* hide sidebar when fullscreen */
michael@0: *:-moz-full-screen-ancestor #social-sidebar-box:not(:-moz-full-screen-ancestor) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* Combobox dropdown renderer */
michael@0: #ContentSelectDropdown {
michael@0:   max-height: 400px;
michael@0: }
michael@0: 
michael@0: .contentSelectDropdown-optgroup {
michael@0:   font-weight: bold;
michael@0:   /* color: menutext used to overwrite the disabled color */
michael@0:   color: menutext;
michael@0: }
michael@0: 
michael@0: .contentSelectDropdown-ingroup {
michael@0:   -moz-margin-start: 2em;
michael@0: }
michael@0: 
michael@0: /* Give this menupopup an arrow panel styling */
michael@0: #BMB_bookmarksPopup {
michael@0:   -moz-appearance: none;
michael@0:   -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
michael@0:   background: transparent;
michael@0:   border: none;
michael@0:   transition: opacity 300ms;
michael@0:   /* The popup inherits -moz-image-region from the button, must reset it */
michael@0:   -moz-image-region: auto;
michael@0: }
michael@0: 
michael@0: /* Customize mode */
michael@0: #navigator-toolbox,
michael@0: #browser-bottombox,
michael@0: #content-deck {
michael@0:   transition-property: margin-left, margin-right;
michael@0:   transition-duration: 200ms;
michael@0:   transition-timing-function: linear;
michael@0: }
michael@0: 
michael@0: #tab-view-deck[fastcustomizeanimation] #navigator-toolbox,
michael@0: #tab-view-deck[fastcustomizeanimation] #content-deck {
michael@0:   transition-duration: 1ms;
michael@0:   transition-timing-function: linear;
michael@0: }
michael@0: 
michael@0: #PanelUI-contents > .panel-customization-placeholder > .panel-customization-placeholder-child {
michael@0:   list-style-image: none;
michael@0: }
michael@0: 
michael@0: #customization-panelHolder {
michael@0:   overflow-y: hidden;
michael@0: }
michael@0: 
michael@0: #customization-panelWrapper,
michael@0: #customization-panelWrapper > .panel-arrowcontent {
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: #customization-panelWrapper > .panel-arrowcontent {
michael@0:   padding: 0 !important;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: #customization-panelHolder > #PanelUI-mainView {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   /* Hack alert - by manually setting the preferred height to 0, we convince
michael@0:      #PanelUI-mainView to shrink when the window gets smaller in customization
michael@0:      mode. Not sure why that is - might have to do with our intermingling of
michael@0:      XUL flex, and CSS3 Flexbox. */
michael@0:   height: 0;
michael@0: }
michael@0: 
michael@0: #customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller {
michael@0:   display: flex;
michael@0:   flex: auto;
michael@0:   flex-direction: column;
michael@0: }
michael@0: 
michael@0: #customization-panel-container {
michael@0:   overflow-y: auto;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[dragover] {
michael@0:   border-left-color: transparent;
michael@0:   border-right-color: transparent;
michael@0: }
michael@0: 
michael@0: #customization-palette:not([hidden]) {
michael@0:   display: block;
michael@0:   overflow: auto;
michael@0:   min-height: 3em;
michael@0: }
michael@0: 
michael@0: #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[place="palette"] {
michael@0:   width: 10em;
michael@0:   height: calc(40px + 2em);
michael@0:   margin-bottom: 5px;
michael@0:   overflow: hidden;
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[place="palette"][hidden] {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #customization-palette .toolbarpaletteitem-box {
michael@0:   -moz-box-pack: center;
michael@0:   -moz-box-flex: 1;
michael@0:   width: 10em;
michael@0:   max-width: 10em;
michael@0: }
michael@0: 
michael@0: /* UI Tour */
michael@0: 
michael@0: @keyframes uitour-wobble {
michael@0:   from {
michael@0:     transform: rotate(0deg) translateX(3px) rotate(0deg);
michael@0:   }
michael@0:   50% {
michael@0:     transform: rotate(360deg) translateX(3px) rotate(-360deg);
michael@0:   }
michael@0:   to {
michael@0:     transform: rotate(720deg) translateX(0px) rotate(-720deg);
michael@0:   }
michael@0: }
michael@0: 
michael@0: @keyframes uitour-zoom {
michael@0:   from {
michael@0:     transform: scale(0.8);
michael@0:   }
michael@0:   50% {
michael@0:     transform: scale(1.0);
michael@0:   }
michael@0:   to {
michael@0:     transform: scale(0.8);
michael@0:   }
michael@0: }
michael@0: 
michael@0: @keyframes uitour-color {
michael@0:   from {
michael@0:     border-color: #5B9CD9;
michael@0:   }
michael@0:   50% {
michael@0:     border-color: #FF0000;
michael@0:   }
michael@0:   to {
michael@0:     border-color: #5B9CD9;
michael@0:   }
michael@0: }
michael@0: 
michael@0: #UITourHighlightContainer,
michael@0: #UITourHighlight {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #UITourHighlight[active] {
michael@0:   animation-delay: 2s;
michael@0:   animation-fill-mode: forwards;
michael@0:   animation-iteration-count: infinite;
michael@0:   animation-timing-function: linear;
michael@0: }
michael@0: 
michael@0: #UITourHighlight[active="wobble"] {
michael@0:   animation-name: uitour-wobble;
michael@0:   animation-delay: 0s;
michael@0:   animation-duration: 1.5s;
michael@0:   animation-iteration-count: 1;
michael@0: }
michael@0: #UITourHighlight[active="zoom"] {
michael@0:   animation-name: uitour-zoom;
michael@0:   animation-duration: 1s;
michael@0: }
michael@0: #UITourHighlight[active="color"] {
michael@0:   animation-name: uitour-color;
michael@0:   animation-duration: 2s;
michael@0: }