X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fbrowser.css;h=f4a49cc0292e1766585bc24ca582440819d6e734;hp=6e02f342a2f19632a8e9e2aeec39a020ee18a468;hb=7d3f7f148d3392390dd58f221ab52974b8000807;hpb=6dc70335b2a0bf287f39b81011cb275c8158622c diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 6e02f342..f4a49cc0 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -12,8 +12,7 @@ toolbar { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar"); } -/* Remove selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ -#navigator-toolbox:not([iconsize]) > toolbar[customizable="true"] { +toolbar[customizable="true"] { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom"); } @@ -21,8 +20,7 @@ toolbar[type="menubar"][autohide="true"] { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide"); } -/* Remove selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ -#navigator-toolbox:not([iconsize]) > #toolbar-menubar[autohide="true"] { +#toolbar-menubar[autohide="true"] { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom"); } @@ -49,11 +47,17 @@ menubar { background-color: #9C9CFF; } +/* Hides the titlebar-placeholder underneath the window caption buttons when we + are not autohiding the menubar. */ +#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] { + display: none; +} + /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */ -#toolbar-menubar:not([autohide="true"]) ~ #TabsToolbar, -#toolbar-menubar[autohide="true"]:not([inactive]) ~ #TabsToolbar { +#toolbar-menubar:not([moz-collapsed=true]):not([autohide="true"]) ~ #TabsToolbar, +#toolbar-menubar:not([moz-collapsed=true])[autohide="true"]:not([inactive]) ~ #TabsToolbar { /* margin-top: 3px;*/ } @@ -62,8 +66,7 @@ menubar { /* margin-top: 15px;*/ } -/* Remove selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ -#navigator-toolbox:not([iconsize]) > #toolbar-menubar:not([autohide="true"]) { +#toolbar-menubar:not([autohide="true"]) { -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom"); } @@ -72,6 +75,13 @@ menubar { display: none; } +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before, +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before, +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before, +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before { + outline-color: #A09090; +} + #navigator-toolbox { } @@ -462,12 +472,60 @@ menubar { background: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") no-repeat center; } -.bookmarks-toolbar-customize, #bookmarks-toolbar-placeholder { - max-width: 15em !important; list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important; } +toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, +#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important; +} + +/* ----- BOOKMARK STAR ANIMATION ----- */ + +@keyframes animation-bookmarkAdded { + from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; } + 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; } + 80% { opacity: 1; } + to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; } +} + +@keyframes animation-bookmarkPulse { + from { transform: scale(1); } + 50% { transform: scale(1.3); } + to { transform: scale(1); } +} + +#bookmarked-notification-container { + min-height: 1px; + min-width: 1px; + height: 1px; + margin-bottom: -1px; + z-index: 5; + position: relative; +} + +#bookmarked-notification { + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; + opacity: 0; +} + +#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification { + background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png"); + animation: animation-bookmarkAdded 800ms; + animation-timing-function: ease, ease, ease; +} + +#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + animation: animation-bookmarkPulse 300ms; + animation-delay: 600ms; + animation-timing-function: ease-out; +} + /* ::::: bookmark menus ::::: */ menu.bookmark-item, @@ -476,7 +534,7 @@ menuitem.bookmark-item { max-width: 32em; } -.bookmark-item > .menu-iconic-left { +.bookmark-item:not(.subviewbutton) > .menu-iconic-left { margin-top: 0; margin-bottom: 0; } @@ -556,349 +614,348 @@ menuitem.bookmark-item { /* === BEGIN toolbarbuttons.inc.css === */ /* Whole section of this included file: */ -/* Remove |#navigator-toolbox:not([iconsize])| selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ -#navigator-toolbox:not([iconsize]) :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button), -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/ToolbarFx.png"); } -#navigator-toolbox:not([iconsize]) #back-button { +#back-button { -moz-image-region: rect(0, 36px, 18px, 18px); } -#navigator-toolbox:not([iconsize]) #back-button:hover:not([disabled="true"]) { +#back-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 36px, 36px, 18px); } -#navigator-toolbox:not([iconsize]) #back-button[disabled="true"] { +#back-button[disabled="true"] { -moz-image-region: rect(36px, 36px, 54px, 18px); } -#navigator-toolbox:not([iconsize]) #forward-button { +#forward-button { -moz-image-region: rect(0, 72px, 18px, 54px); } -#navigator-toolbox:not([iconsize]) #forward-button:hover:not([disabled="true"]) { +#forward-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 72px, 36px, 54px); } -#navigator-toolbox:not([iconsize]) #forward-button[disabled="true"] { +#forward-button[disabled="true"] { -moz-image-region: rect(36px, 72px, 54px, 54px); } -#navigator-toolbox:not([iconsize]) #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, -#navigator-toolbox:not([iconsize]) #forward-button:-moz-locale-dir(rtl) { +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#navigator-toolbox:not([iconsize]) #home-button[cui-areatype="toolbar"] { +#home-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 126px, 18px, 108px); } -#navigator-toolbox:not([iconsize]) #home-button[cui-areatype="toolbar"]:hover { +#home-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 126px, 36px, 108px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"] { +#bookmarks-menu-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 144px, 18px, 126px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"]:hover, -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] { +#bookmarks-menu-button[cui-areatype="toolbar"]:hover, +#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] { -moz-image-region: rect(18px, 144px, 36px, 126px); } /* When "new tab" page shows up, the menubutton-button (star button) is disabled */ -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] { +#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] { -moz-image-region: rect(36px, 144px, 54px, 126px) !important; background-color: transparent !important; } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] { +#bookmarks-menu-button[cui-areatype="toolbar"][starred] { -moz-image-region: rect(0, 162px, 18px, 144px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover, -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"] { +#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover, +#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"] { -moz-image-region: rect(18px, 162px, 36px, 144px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { -moz-image-region: rect(0, 630px, 18px, 612px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { +#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { padding: 1px; -moz-box-align: center; } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, +#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { -moz-image-region: rect(18px, 630px, 36px, 612px); } -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker, -#navigator-toolbox:not([iconsize]) #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker { +#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker, +#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker { padding-top: 2px; padding-bottom: 0px; -moz-padding-start: 2px; -moz-padding-end: 0px; } -#navigator-toolbox:not([iconsize]) #history-panelmenu[cui-areatype="toolbar"] { +#history-panelmenu[cui-areatype="toolbar"] { -moz-image-region: rect(0, 180px, 18px, 162px); } -#navigator-toolbox:not([iconsize]) #history-panelmenu[cui-areatype="toolbar"]:hover, -#navigator-toolbox:not([iconsize]) #history-panelmenu[cui-areatype="toolbar"][open="true"] { +#history-panelmenu[cui-areatype="toolbar"]:hover, +#history-panelmenu[cui-areatype="toolbar"][open="true"] { -moz-image-region: rect(18px, 180px, 36px, 162px); } -#navigator-toolbox:not([iconsize]) #downloads-button[cui-areatype="toolbar"] { +#downloads-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 198px, 18px, 180px); } -#navigator-toolbox:not([iconsize]) #downloads-button[cui-areatype="toolbar"]:hover, -#navigator-toolbox:not([iconsize]) #downloads-button[cui-areatype="toolbar"][open="true"] { +#downloads-button[cui-areatype="toolbar"]:hover, +#downloads-button[cui-areatype="toolbar"][open="true"] { -moz-image-region: rect(18px, 198px, 36px, 180px); } -#navigator-toolbox:not([iconsize]) #add-ons-button[cui-areatype="toolbar"] { +#add-ons-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 216px, 18px, 198px); } -#navigator-toolbox:not([iconsize]) #add-ons-button[cui-areatype="toolbar"]:hover { +#add-ons-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 216px, 36px, 198px); } -#navigator-toolbox:not([iconsize]) #switch-to-metro-button[cui-areatype="toolbar"] { +#switch-to-metro-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 648px, 18px, 630px); } -#navigator-toolbox:not([iconsize]) #switch-to-metro-button[cui-areatype="toolbar"]:hover { +#switch-to-metro-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 648px, 36px, 630px); } -#navigator-toolbox:not([iconsize]) #open-file-button[cui-areatype="toolbar"] { +#open-file-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 234px, 18px, 216px); } -#navigator-toolbox:not([iconsize]) #open-file-button[cui-areatype="toolbar"]:hover { +#open-file-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 234px, 36px, 216px); } -#navigator-toolbox:not([iconsize]) #save-page-button[cui-areatype="toolbar"] { +#save-page-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 252px, 18px, 234px); } -#navigator-toolbox:not([iconsize]) #save-page-button[cui-areatype="toolbar"]:hover { +#save-page-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 252px, 36px, 234px); } -#navigator-toolbox:not([iconsize]) #sync-button[cui-areatype="toolbar"] { +#sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 270px, 18px, 252px); } -#navigator-toolbox:not([iconsize]) #sync-button[cui-areatype="toolbar"]:hover { +#sync-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 270px, 36px, 252px); } -#navigator-toolbox:not([iconsize]) #feed-button[cui-areatype="toolbar"] { +#feed-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 288px, 18px, 270px); } -#navigator-toolbox:not([iconsize]) #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) { +#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 288px, 36px, 270px); } -#navigator-toolbox:not([iconsize]) #feed-button[cui-areatype="toolbar"][disabled="true"] { +#feed-button[cui-areatype="toolbar"][disabled="true"] { -moz-image-region: rect(36px, 288px, 54px, 270px); } -#navigator-toolbox:not([iconsize]) #social-share-button[cui-areatype="toolbar"] { +#social-share-button[cui-areatype="toolbar"] { -moz-image-region: rect(0px, 306px, 18px, 288px); } -#navigator-toolbox:not([iconsize]) #social-share-button[cui-areatype="toolbar"]:hover { +#social-share-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 306px, 36px, 288px); } -#navigator-toolbox:not([iconsize]) #email-link-button[cui-areatype="toolbar"] { +#email-link-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 306px, 18px, 288px); /* This is temporary until we have an email-link icon (Bug 932235) */ transform: scale(-1, -1); } -#navigator-toolbox:not([iconsize]) #email-link-button[cui-areatype="toolbar"]:hover { +#email-link-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 306px, 36px, 288px); } -#navigator-toolbox:not([iconsize]) #characterencoding-button[cui-areatype="toolbar"] { +#characterencoding-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 324px, 18px, 306px); } -#navigator-toolbox:not([iconsize]) #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]), -#navigator-toolbox:not([iconsize]) #characterencoding-button[cui-areatype="toolbar"][open="true"] { +#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]), +#characterencoding-button[cui-areatype="toolbar"][open="true"] { -moz-image-region: rect(18px, 324px, 36px, 306px); } -#navigator-toolbox:not([iconsize]) #characterencoding-button[cui-areatype="toolbar"][disabled="true"] { +#characterencoding-button[cui-areatype="toolbar"][disabled="true"] { -moz-image-region: rect(36px, 324px, 54px, 306px); } -#navigator-toolbox:not([iconsize]) #new-window-button[cui-areatype="toolbar"] { +#new-window-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 342px, 18px, 324px); } -#navigator-toolbox:not([iconsize]) #new-window-button[cui-areatype="toolbar"]:hover { +#new-window-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 342px, 36px, 324px); } -#navigator-toolbox:not([iconsize]) #new-tab-button[cui-areatype="toolbar"] { +#new-tab-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 360px, 18px, 342px); } -#navigator-toolbox:not([iconsize]) #new-tab-button[cui-areatype="toolbar"]:hover { +#new-tab-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 360px, 36px, 342px); } -#navigator-toolbox:not([iconsize]) #privatebrowsing-button[cui-areatype="toolbar"] { +#privatebrowsing-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 378px, 18px, 360px); } -#navigator-toolbox:not([iconsize]) #privatebrowsing-button[cui-areatype="toolbar"]:hover { +#privatebrowsing-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 378px, 36px, 360px); } -#navigator-toolbox:not([iconsize]) #find-button[cui-areatype="toolbar"] { +#find-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 396px, 18px, 378px); } -#navigator-toolbox:not([iconsize]) #find-button[cui-areatype="toolbar"]:hover { +#find-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 396px, 36px, 378px); } -#navigator-toolbox:not([iconsize]) #print-button[cui-areatype="toolbar"] { +#print-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 414px, 18px, 396px); } -#navigator-toolbox:not([iconsize]) #print-button[cui-areatype="toolbar"]:hover { +#print-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 414px, 36px, 396px); } -#navigator-toolbox:not([iconsize]) #fullscreen-button[cui-areatype="toolbar"] { +#fullscreen-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 432px, 18px, 414px); } -#navigator-toolbox:not([iconsize]) #fullscreen-button[cui-areatype="toolbar"]:hover { +#fullscreen-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 432px, 36px, 414px); } -#navigator-toolbox:not([iconsize]) #developer-button[cui-areatype="toolbar"] { +#developer-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 450px, 18px, 432px); } -#navigator-toolbox:not([iconsize]) #developer-button[cui-areatype="toolbar"]:hover, -#navigator-toolbox:not([iconsize]) #developer-button[cui-areatype="toolbar"][open="true"] { +#developer-button[cui-areatype="toolbar"]:hover, +#developer-button[cui-areatype="toolbar"][open="true"] { -moz-image-region: rect(18px, 450px, 36px, 432px); } -#navigator-toolbox:not([iconsize]) #preferences-button[cui-areatype="toolbar"] { +#preferences-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 468px, 18px, 450px); } -#navigator-toolbox:not([iconsize]) #preferences-button[cui-areatype="toolbar"]:hover { +#preferences-button[cui-areatype="toolbar"]:hover { -moz-image-region: rect(18px, 468px, 36px, 450px); } -#navigator-toolbox:not([iconsize]) #PanelUI-menu-button { +#PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } -#navigator-toolbox:not([iconsize]) #PanelUI-menu-button:hover, -#navigator-toolbox:not([iconsize]) #PanelUI-menu-button[open="true"] { +#PanelUI-menu-button:hover, +#PanelUI-menu-button[open="true"] { -moz-image-region: rect(18px, 486px, 36px, 468px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button:hover:not([disabled="true"]) { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 504px, 36px, 486px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button[disabled="true"] { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #cut-button[disabled="true"] { -moz-image-region: rect(36px, 504px, 54px, 486px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button { -moz-image-region: rect(0, 522px, 18px, 504px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button:hover:not([disabled="true"]) { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 522px, 36px, 504px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button[disabled="true"] { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #copy-button[disabled="true"] { -moz-image-region: rect(36px, 522px, 54px, 504px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button { -moz-image-region: rect(0, 540px, 18px, 522px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button:hover:not([disabled="true"]) { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 540px, 36px, 522px); } -#navigator-toolbox:not([iconsize]) #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button[disabled="true"] { +#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #paste-button[disabled="true"] { -moz-image-region: rect(36px, 540px, 54px, 522px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button { -moz-image-region: rect(0, 558px, 18px, 540px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button:hover:not([disabled="true"]) { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 558px, 36px, 540px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button[disabled="true"] { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-out-button[disabled="true"] { -moz-image-region: rect(36px, 558px, 54px, 540px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button { -moz-image-region: rect(0, 576px, 18px, 558px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button:hover:not([disabled="true"]) { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button:hover:not([disabled="true"]) { -moz-image-region: rect(18px, 576px, 36px, 558px); } -#navigator-toolbox:not([iconsize]) #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button[disabled="true"] { +#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) > #zoom-in-button[disabled="true"] { -moz-image-region: rect(36px, 576px, 54px, 558px); } -#navigator-toolbox:not([iconsize]) #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) { +#webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)) { -moz-image-region: rect(0, 594px, 18px, 576px); } -#navigator-toolbox:not([iconsize]) #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)):hover, -#navigator-toolbox:not([iconsize]) #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem))[open="true"] { +#webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)):hover, +#webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem))[open="true"] { -moz-image-region: rect(18px, 594px, 36px, 576px); } -#navigator-toolbox:not([iconsize]) #nav-bar-overflow-button { +#nav-bar-overflow-button { -moz-image-region: rect(0, 612px, 18px, 594px); } -#navigator-toolbox:not([iconsize]) #nav-bar-overflow-button:hover, -#navigator-toolbox:not([iconsize]) #nav-bar-overflow-button[open="true"] { +#nav-bar-overflow-button:hover, +#nav-bar-overflow-button[open="true"] { -moz-image-region: rect(18px, 612px, 36px, 594px); } @@ -908,13 +965,12 @@ menuitem.bookmark-item { /* Menu panel and palette styles */ -/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, @@ -923,22 +979,22 @@ menuitem.bookmark-item { } #home-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #home-button { +toolbarpaletteitem[place="palette"] > #home-button { -moz-image-region: rect(0px, 128px, 32px, 96px); } #home-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #home-button:hover { +toolbarpaletteitem[place="palette"] > #home-button:hover { -moz-image-region: rect(32px, 128px, 64px, 96px); } #bookmarks-menu-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { -moz-image-region: rect(0px, 160px, 32px, 128px); } #bookmarks-menu-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover { +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover { -moz-image-region: rect(32px, 160px, 64px, 128px); } @@ -951,208 +1007,208 @@ menuitem.bookmark-item { } #history-panelmenu[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #history-panelmenu { +toolbarpaletteitem[place="palette"] > #history-panelmenu { -moz-image-region: rect(0px, 224px, 32px, 192px); } #history-panelmenu[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #history-panelmenu:hover { +toolbarpaletteitem[place="palette"] > #history-panelmenu:hover { -moz-image-region: rect(32px, 224px, 64px, 192px); } #downloads-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #downloads-button { +toolbarpaletteitem[place="palette"] > #downloads-button { -moz-image-region: rect(0px, 256px, 32px, 224px); } #downloads-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #downloads-button:hover { +toolbarpaletteitem[place="palette"] > #downloads-button:hover { -moz-image-region: rect(32px, 256px, 64px, 224px); } #switch-to-metro-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #switch-to-metro-button { +toolbarpaletteitem[place="palette"] > #switch-to-metro-button { -moz-image-region: rect(0px, 800px, 32px, 768px); } #switch-to-metro-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover { +toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover { -moz-image-region: rect(32px, 800px, 64px, 768px); } #add-ons-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #add-ons-button { +toolbarpaletteitem[place="palette"] > #add-ons-button { -moz-image-region: rect(0px, 288px, 32px, 256px); } #add-ons-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #add-ons-button:hover { +toolbarpaletteitem[place="palette"] > #add-ons-button:hover { -moz-image-region: rect(32px, 288px, 64px, 256px); } #open-file-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #open-file-button { +toolbarpaletteitem[place="palette"] > #open-file-button { -moz-image-region: rect(0px, 320px, 32px, 288px); } #open-file-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #open-file-button:hover { +toolbarpaletteitem[place="palette"] > #open-file-button:hover { -moz-image-region: rect(32px, 320px, 64px, 288px); } #save-page-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #save-page-button { +toolbarpaletteitem[place="palette"] > #save-page-button { -moz-image-region: rect(0px, 352px, 32px, 320px); } #save-page-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #save-page-button:hover { +toolbarpaletteitem[place="palette"] > #save-page-button:hover { -moz-image-region: rect(32px, 352px, 64px, 320px); } #sync-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #sync-button { +toolbarpaletteitem[place="palette"] > #sync-button { -moz-image-region: rect(0px, 384px, 32px, 352px); } #sync-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #sync-button:hover { +toolbarpaletteitem[place="palette"] > #sync-button:hover { -moz-image-region: rect(32px, 384px, 64px, 352px); } #feed-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #feed-button { +toolbarpaletteitem[place="palette"] > #feed-button { -moz-image-region: rect(0px, 416px, 32px, 384px); } #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) { -moz-image-region: rect(32px, 416px, 64px, 384px); } #feed-button[cui-areatype="menu-panel"][disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] { -moz-image-region: rect(64px, 416px, 96px, 384px); } #social-share-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #social-share-button { +toolbarpaletteitem[place="palette"] > #social-share-button { -moz-image-region: rect(0px, 448px, 32px, 416px); } #social-share-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #social-share-button:hover { +toolbarpaletteitem[place="palette"] > #social-share-button:hover { -moz-image-region: rect(32px, 448px, 64px, 416px); } #email-link-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #email-link-button { +toolbarpaletteitem[place="palette"] > #email-link-button { -moz-image-region: rect(0, 448px, 32px, 416px); } #email-link-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #email-link-button:hover { +toolbarpaletteitem[place="palette"] > #email-link-button:hover { -moz-image-region: rect(32px, 448px, 64px, 416px); } /* This is temporary until we have an email-link icon (Bug 932235) */ #email-link-button[cui-areatype="menu-panel"] > image, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #email-link-button > image { +toolbarpaletteitem[place="palette"] > #email-link-button > image { transform: scale(-1, -1); } #characterencoding-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #characterencoding-button { +toolbarpaletteitem[place="palette"] > #characterencoding-button { -moz-image-region: rect(0px, 480px, 32px, 448px); } #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) { -moz-image-region: rect(32px, 480px, 64px, 448px); } #characterencoding-button[cui-areatype="menu-panel"][disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] { -moz-image-region: rect(64px, 480px, 96px, 448px); } #new-window-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #new-window-button { +toolbarpaletteitem[place="palette"] > #new-window-button { -moz-image-region: rect(0px, 512px, 32px, 480px); } #new-window-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #new-window-button:hover { +toolbarpaletteitem[place="palette"] > #new-window-button:hover { -moz-image-region: rect(32px, 512px, 64px, 480px); } #new-tab-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #new-tab-button { +toolbarpaletteitem[place="palette"] > #new-tab-button { -moz-image-region: rect(0px, 544px, 32px, 512px); } #new-tab-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #new-tab-button:hover { +toolbarpaletteitem[place="palette"] > #new-tab-button:hover { -moz-image-region: rect(32px, 544px, 64px, 512px); } #privatebrowsing-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #privatebrowsing-button { +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { -moz-image-region: rect(0px, 576px, 32px, 544px); } #privatebrowsing-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover { +toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover { -moz-image-region: rect(32px, 576px, 64px, 544px); } #find-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #find-button { +toolbarpaletteitem[place="palette"] > #find-button { -moz-image-region: rect(0px, 640px, 32px, 608px); } #find-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #find-button:hover { +toolbarpaletteitem[place="palette"] > #find-button:hover { -moz-image-region: rect(32px, 640px, 64px, 608px); } #print-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #print-button { +toolbarpaletteitem[place="palette"] > #print-button { -moz-image-region: rect(0px, 672px, 32px, 640px); } #print-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #print-button:hover { +toolbarpaletteitem[place="palette"] > #print-button:hover { -moz-image-region: rect(32px, 672px, 64px, 640px); } #fullscreen-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #fullscreen-button { +toolbarpaletteitem[place="palette"] > #fullscreen-button { -moz-image-region: rect(0px, 704px, 32px, 672px); } #fullscreen-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #fullscreen-button:hover { +toolbarpaletteitem[place="palette"] > #fullscreen-button:hover { -moz-image-region: rect(32px, 704px, 64px, 672px); } #developer-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #developer-button { +toolbarpaletteitem[place="palette"] > #developer-button { -moz-image-region: rect(0px, 736px, 32px, 704px); } #developer-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #developer-button:hover { +toolbarpaletteitem[place="palette"] > #developer-button:hover { -moz-image-region: rect(32px, 736px, 64px, 704px); } #preferences-button[cui-areatype="menu-panel"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #preferences-button { +toolbarpaletteitem[place="palette"] > #preferences-button { -moz-image-region: rect(0px, 768px, 32px, 736px); } #preferences-button[cui-areatype="menu-panel"]:hover, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #preferences-button:hover { +toolbarpaletteitem[place="palette"] > #preferences-button:hover { -moz-image-region: rect(32px, 768px, 64px, 736px); } @@ -1160,92 +1216,88 @@ menuitem.bookmark-item { #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton, #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { list-style-image: url("chrome://browser/skin/menuPanel-small.png"); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { -moz-image-region: rect(0px, 32px, 16px, 16px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) { -moz-image-region: rect(16px, 32px, 32px, 16px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button[disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] { -moz-image-region: rect(32px, 32px, 48px, 16px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { -moz-image-region: rect(0px, 48px, 16px, 32px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) { -moz-image-region: rect(16px, 48px, 32px, 32px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button[disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] { -moz-image-region: rect(32px, 48px, 48px, 32px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { -moz-image-region: rect(0px, 64px, 16px, 48px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) { -moz-image-region: rect(16px, 64px, 32px, 48px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button[disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] { -moz-image-region: rect(32px, 64px, 48px, 48px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { -moz-image-region: rect(0px, 80px, 16px, 64px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) { -moz-image-region: rect(16px, 80px, 32px, 64px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button[disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] { -moz-image-region: rect(32px, 80px, 48px, 64px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button, -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { -moz-image-region: rect(0px, 96px, 16px, 80px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:hover:not([disabled="true"]), -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) { -moz-image-region: rect(16px, 96px, 32px, 80px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button[disabled="true"], -:-moz-any(#customization-palette, #panelUI-contents) > toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] { +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] { -moz-image-region: rect(32px, 96px, 48px, 80px); } /* === END menupanel.inc.css === */ -.toolbarbutton-1 { - list-style-image: url("chrome://browser/skin/FxToolbar.png"); -} - .toolbarbutton-1:not([type="menu-button"]) { -moz-box-orient: vertical; } @@ -1276,6 +1328,16 @@ menuitem.bookmark-item { -moz-padding-end: 1px; } +/* Help SDK icons fit: */ +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { + width: 16px; +} + +#nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { + /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ + width: 32px; +} + /* ::::: small primary toolbar buttons ::::: */ #nav-bar { @@ -1388,35 +1450,10 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button { -moz-margin-end: 0; } -/* A number of styles use :-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) - this makes it only apply pre-Australis as iconsize and palette-box or addon-bar don't exist afterwards */ -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #back-button { - -moz-image-region: rect(0, 18px, 18px, 0); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #back-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 18px, 36px, 0); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #back-button[disabled="true"] { - -moz-image-region: rect(36px, 18px, 54px, 0); -} - #forward-button { -moz-margin-start: 0; } -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #forward-button { - -moz-image-region: rect(0, 36px, 18px, 18px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #forward-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 36px, 36px, 18px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #forward-button[disabled="true"] { - -moz-image-region: rect(36px, 36px, 54px, 18px); -} - #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, #forward-button:-moz-locale-dir(rtl), #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text { @@ -1434,8 +1471,7 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button { border-bottom-left-radius: 0; } */ -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #back-button, +#back-button, window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #back-button { @@ -1450,8 +1486,7 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon -moz-image-region: rect(54px, 20px, 74px, 0); } -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #back-button[open="true"], +#back-button[open="true"], window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #back-button:not([disabled="true"]):hover, @@ -1461,8 +1496,7 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon -moz-image-region: rect(54px, 40px, 74px, 20px); } -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #back-button[disabled="true"], +#back-button[disabled="true"], window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #back-button[disabled="true"] { @@ -1493,8 +1527,7 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon /* padding-top: 5px; */ } -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #forward-button, +#forward-button, window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button { @@ -1507,8 +1540,7 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon margin-bottom: 2px; } -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #forward-button:-moz-locale-dir(ltr), +#forward-button:-moz-locale-dir(ltr), window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button:-moz-locale-dir(ltr) { @@ -1516,8 +1548,7 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon border-bottom-right-radius: 11px; } -/* Remove selector when Australis lands - this makes it only apply post-Australis as back/forward buttons are in the urlbar-container there */ -#urlbar-container > #forward-button:-moz-locale-dir(rtl), +#forward-button:-moz-locale-dir(rtl), window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button:-moz-locale-dir(rtl) { @@ -1574,135 +1605,10 @@ window:not([chromehidden~="toolbar"]) #urlbar-container:hover > #forward-button[ background-color: transparent; } -/* A number of buttons use :-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) - this makes it only apply pre-Australis as iconsize and the palette-box don't exist afterwards */ -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #stop-button { - -moz-image-region: rect(0, 54px, 18px, 36px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #stop-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 54px, 36px, 36px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #stop-button[disabled="true"] { - -moz-image-region: rect(36px, 54px, 54px, 36px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #reload-button { - -moz-image-region: rect(0, 72px, 18px, 54px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #reload-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 72px, 36px, 54px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #reload-button[disabled="true"] { - -moz-image-region: rect(36px, 72px, 54px, 54px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #home-button.bookmark-item { - list-style-image: url("chrome://browser/skin/FxToolbar.png"); -} -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #home-button { - -moz-image-region: rect(0, 90px, 18px, 72px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #home-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 90px, 36px, 72px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #home-button[disabled="true"] { - -moz-image-region: rect(36px, 90px, 54px, 72px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #downloads-button { - -moz-image-region: rect(0, 108px, 18px, 90px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #downloads-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 108px, 36px, 90px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #downloads-button[disabled="true"] { - -moz-image-region: rect(36px, 108px, 54px, 90px); -} - #downloads-button > .toolbarbutton-icon { margin: 0; } -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #history-button { - -moz-image-region: rect(0, 126px, 18px, 108px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #history-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 126px, 36px, 108px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #history-button[disabled="true"] { - -moz-image-region: rect(36px, 126px, 54px, 108px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-button, -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-menu-button { - list-style-image: url("chrome://browser/skin/FxToolbar.png") !important; /* for making the palette work */ - -moz-image-region: rect(0, 144px, 18px, 126px); -} - -#bookmarks-menu-button.bookmark-item { - /* list-style-image: url("chrome://browser/skin/FxToolbar.png"); */ -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-menu-button.toolbarbutton-1 { - -moz-box-orient: horizontal; -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-button:not([disabled="true"]):hover, -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-menu-button[open="true"], -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-menu-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 144px, 36px, 126px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-button[disabled="true"], -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #bookmarks-menu-button[disabled="true"] { - -moz-image-region: rect(36px, 144px, 54px, 126px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #print-button { - -moz-image-region: rect(0, 162px, 18px, 144px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #print-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 162px, 36px, 144px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #print-button[disabled="true"] { - -moz-image-region: rect(36px, 162px, 54px, 144px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-tab-button { - -moz-image-region: rect(0, 180px, 18px, 162px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-tab-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 180px, 36px, 162px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-tab-button[disabled="true"] { - -moz-image-region: rect(36px, 180px, 54px, 162px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-window-button { - -moz-image-region: rect(0, 198px, 18px, 180px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-window-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 198px, 36px, 180px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #new-window-button[disabled="true"] { - -moz-image-region: rect(36px, 198px, 54px, 180px); -} - #cut-button { -moz-image-region: rect(0, 216px, 18px, 198px); } @@ -1739,18 +1645,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-container:hover > #forward-button[ -moz-image-region: rect(36px, 252px, 54px, 234px); } -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #fullscreen-button { - -moz-image-region: rect(0, 270px, 18px, 252px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #fullscreen-button:not([disabled="true"]):hover { - -moz-image-region: rect(18px, 270px, 36px, 252px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #fullscreen-button[disabled="true"] { - -moz-image-region: rect(36px, 270px, 54px, 252px); -} - #zoom-out-button { -moz-image-region: rect(0, 288px, 18px, 270px); -moz-margin-end: 0; @@ -1776,41 +1670,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-container:hover > #forward-button[ -moz-image-region: rect(36px, 306px, 54px, 288px); } -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #sync-button:not([status]) { - list-style-image: url("chrome://browser/skin/FxToolbar.png") !important; /* for making the palette work */ - -moz-image-region: rect(0, 324px, 18px, 306px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #sync-button[status="active"] { - list-style-image: url("chrome://browser/skin/sync-throbber.png"); - -moz-image-region: rect(0, 18px, 18px, 0); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #sync-button[disabled="true"] { - -moz-image-region: rect(36px, 324px, 54px, 306px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #feed-button { - -moz-image-region: rect(0, 342px, 18px, 324px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #feed-button[disabled="true"] { - -moz-image-region: rect(36px, 342px, 54px, 324px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #webrtc-status-button { - -moz-image-region: rect(0, 360px, 18px, 342px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #webrtc-status-button:not([disabled="true"]):hover, -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #webrtc-status-button[open="true"] { - -moz-image-region: rect(18px, 360px, 36px, 342px); -} - -:-moz-any(#palette-box, #navigator-toolbox[iconsize], #addon-bar) #webrtc-status-button[disabled="true"] { - -moz-image-region: rect(36px, 360px, 54px, 342px); -} - /* tabview button & menu item */ #tabview-button, @@ -2053,6 +1912,9 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, -moz-margin-start: 0; } +#urlbar-display-box { +} + #urlbar-display { -moz-border-end: 1px solid #9C9CFF; -moz-margin-end: 3px; @@ -2073,6 +1935,16 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, font-size: .9em; } +#identity-box:-moz-locale-dir(ltr) { +/* border-top-left-radius: 1.5px; + border-bottom-left-radius: 1.5px;*/ +} + +#identity-box:-moz-locale-dir(rtl) { +/* border-top-right-radius: 1.5px; + border-bottom-right-radius: 1.5px;*/ +} + #notification-popup-box:not([hidden]) + #identity-box { -moz-padding-start: 10px !important; border-radius: 0; @@ -2701,14 +2573,20 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { /* Tabstrip */ -/* Remove selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ -#navigator-toolbox:not([iconsize]) > #TabsToolbar, -#TabsToolbar { +/* Remove selector when Australis lands - this makes it only apply pre-Australis as iconsize only exists there */ +#navigator-toolbox[iconsize] > #TabsToolbar { min-height: 0; padding: 0; -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar"); } +/* Remove selector when Australis lands - this makes it only apply post-Australis as iconsize doesn't exist there */ +#navigator-toolbox:not([iconsize]) > #TabsToolbar { + min-height: 0; + padding: 0; + -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar"); +} + #TabsToolbar .toolbar-holder { background-color: #000000; /* correct effect of being an actual toolbar */ } @@ -2850,7 +2728,8 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { .tabs-newtab-button, #TabsToolbar > #new-tab-button, -#TabsToolbar > toolbarpaletteitem > #new-tab-button { +#TabsToolbar > toolbarpaletteitem > #new-tab-button, +#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] { list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png"); -moz-image-region: rect(0, 16px, 18px, 0); } @@ -3647,7 +3526,7 @@ html|*.highlighter-nodeinfobar-pseudo-classes { min-height: 32px; */ } -.developer-toolbar-button { +#developer-toolbar > toolbarbutton { /* margin: 0; padding: 0 10px; width: 32px; */ @@ -3676,6 +3555,25 @@ html|*.highlighter-nodeinfobar-pseudo-classes { -moz-image-region: rect(0px, 32px, 16px, 16px); } +#developer-toolbar-closebutton { + list-style-image: url("chrome://browser/skin/devtools/close.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); + min-width: 16px; + width: 16px; +} + +#developer-toolbar-closebutton > .toolbarbutton-icon { +} + +#developer-toolbar-closebutton > .toolbarbutton-text { + display: none; +} + +#developer-toolbar-closebutton:hover, +#developer-toolbar-closebutton:hover:active { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + /* GCLI */ html|*#gcli-tooltip-frame, @@ -3706,10 +3604,13 @@ html|*#gcli-output-frame { /* line-height: 32px; outline-style: none; */ background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0); + background-repeat: no-repeat; + background-color: rgba(0, 0, 0, .75); } .gclitoolbar-input-node[focused="true"] { background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); + background-color: #000000; } .gclitoolbar-input-node:not([focused="true"]) { @@ -3778,16 +3679,98 @@ html|*#gcli-output-frame { .devtools-responsiveui-toolbar { background: transparent; + /* text color is textColor from dark theme, since no theme is applied to + * the responsive toolbar. + */ + color: #FF9F00; margin: 10px 0; padding: 0; box-shadow: none; border-bottom-width: 0; } -.devtools-responsiveui-toolbar > menulist, -.devtools-responsiveui-toolbar > toolbarbutton { - min-width: 22px; -/* border-radius: 0; */ +.devtools-responsiveui-menulist, +.devtools-responsiveui-toolbarbutton { + -moz-box-align: center; + min-width: 32px; +/* min-height: 22px;*/ +/* margin: 0 3px; */ +} + +.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button { + -moz-box-orient: horizontal; +} + +.devtools-responsiveui-menulist:-moz-focusring, +.devtools-responsiveui-toolbarbutton:-moz-focusring { +/* outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px;*/ +} + +.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active { +/* border-color: hsla(210,8%,5%,.6); + background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3)); + box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */ +} + +.devtools-responsiveui-menulist[open=true], +.devtools-responsiveui-toolbarbutton[open=true], +.devtools-responsiveui-toolbarbutton[checked=true] { +/* border-color: hsla(210,8%,5%,.6) !important; + background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); + box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */ +} + +.devtools-responsiveui-toolbarbutton[checked=true] { +/* color: hsl(208,100%,60%); */ +} + +.devtools-responsiveui-toolbarbutton[checked=true]:hover { +/* background-color: transparent !important;*/ +} + +.devtools-responsiveui-toolbarbutton[checked=true]:hover:active { +/* background-color: hsla(210,8%,5%,.2) !important;*/ +} + +.devtools-responsiveui-menulist > .menulist-label-box { + text-align: center; +} + +.devtools-responsiveui-menulist > .menulist-dropmarker { +/* display: -moz-box; + background-color: transparent; + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + -moz-box-align: center; + border-width: 0; + min-width: 16px;*/ +} + +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { +/* color: inherit; + border-width: 0; + -moz-border-end: 1px solid hsla(210,8%,5%,.45); + box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/ +} + +.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { +/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/ +} + +.devtools-responsiveui-toolbarbutton[type=menu-button] { +/* padding: 0 1px;*/ + -moz-box-align: stretch; +} + +.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { +/* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + -moz-box-align: center; + padding: 0 3px;*/ } .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child, @@ -4297,36 +4280,72 @@ notification.pluginVulnerable .messageImage { /* === END plugin-doorhanger.inc.css === */ -#main-window[privatebrowsingmode=temporary] #toolbar-menubar { - background-image: url("chrome://browser/skin/privatebrowsing-dark.png"); - background-position: top right; - background-repeat: no-repeat; -} +/* === BEGIN customizeMode.inc.css === */ -#main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) { - background-position: top left; -} +/* Customization mode */ -#main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon { - list-style-image: url("chrome://browser/skin/privatebrowsing-light.png"); - width: 20px; - height: 16px; +#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck { + margin: 0 1em 1em; } -/* === BEGIN customizeMode.inc.css === */ +#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { + margin-left: 1em; + margin-right: 1em; +} -/* Customization mode */ -#nav-bar[customize-entered] > #nav-bar-customization-target { - margin: 1px 3px; +#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { + pointer-events: none; } -#nav-bar[customize-entered] > #nav-bar-customization-target, +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #PanelUI-contents > .panel-customization-placeholder { + -moz-outline-radius: 2.5px; outline: 1px dashed transparent; } -#main-window[customizing-movingItem] #nav-bar-customization-target, -#main-window[customizing-movingItem] .panel-customization-placeholder { +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { + /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ + -moz-box-ordinal-group: 0; + content: ""; + display: -moz-box; + height: 100%; + left: 0; + outline-offset: -2px; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; +} + +/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the + #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the + offset from the bottom effectively the same as other targets (-2px). */ +#main-window[customize-entered] #TabsToolbar.customization-target::before { +/* top: -2px;*/ +} + +/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), +#main-window[customize-entered] #nav-bar-customization-target.customization-target { + position: relative; +} + +/* Most target outlines are shown on hover and drag over but the panel menu uses + placeholders instead. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +/* nav-bar and panel outlines are always shown */ +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + outline-color: #A09090; +} + +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + transition: outline-color 250ms linear; +} + +#PanelUI-contents[showoutline=true] > .panel-customization-placeholder { + transition: outline-color 250ms linear; outline-color: #9C9CFF; } @@ -4335,18 +4354,23 @@ notification.pluginVulnerable .messageImage { outline-offset: -5px; } -#main-window[customize-entered] .customization-target { +#main-window[customizing] .customization-target:not(#PanelUI-contents) { min-width: 100px; - padding-left: 10px; - padding-right: 10px; +/* padding-left: 10px; + padding-right: 10px;*/ +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck { + padding: 0 2em 2em; } #customization-container { background-color: #000000; } -#customization-palette-container { - padding: 25px; +#customization-palette, +#customization-empty { + padding: 0 15px 15px; } #customization-header { @@ -4355,10 +4379,51 @@ notification.pluginVulnerable .messageImage { color: #9C9CFF; font-weight: lighter; margin-bottom: 1em; + padding: 15px 15px 0; } #customization-panel-container { - padding: 15px 25px 25px; + padding: 10px 10px 0px; +} + +#customization-footer { + /*background-color: rgb(236,236,236);*/ + border-top: 1px solid #9C9CFF; + padding: 15px; +} + +.customizationmode-button { + margin: 0; +} + +.customizationmode-button:hover { +} + +.customizationmode-button[disabled="true"] { +} + +#customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); + -moz-image-region: rect(0, 24px, 24px, 0); + padding: 2px 7px; + -moz-margin-end: 10px; +} + +#customization-titlebar-visibility-button > .button-box > .button-text { + /* Sadly, button.css thinks its margins are perfect for everyone. */ + -moz-margin-start: 6px !important; +} + +#customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 48px, 24px, 24px); + background-color: #008484; +} + +#customization-undo-reset-button { + -moz-margin-end: 10px; +} + +#main-window[customize-entered] #customization-panel-container { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-position: left top; background-repeat: repeat; @@ -4366,10 +4431,8 @@ notification.pluginVulnerable .messageImage { background-attachment: fixed; } -toolbarpaletteitem { - transition: background-color, border-color, box-shadow, border-width; - transition-duration: 10ms, 10ms, 10ms, 250ms; - transition-timing-function: linear, linear, linear, ease-in-out; +toolbarpaletteitem[place="toolbar"] { + transition: border-width 250ms ease-in-out; } toolbarpaletteitem[mousedown] { @@ -4381,23 +4444,37 @@ toolbarpaletteitem[mousedown] { .panel-customization-placeholder, toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="panel"] { - transition: background-color, border-color, box-shadow, transform; - transition-duration: 10ms, 10ms, 10ms, 250ms; - transition-timing-function: linear, linear, linear, ease-in-out; + transition: transform .3s ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; } +toolbarpaletteitem[notransition].panel-customization-placeholder, +toolbarpaletteitem[notransition][place="toolbar"], toolbarpaletteitem[notransition][place="palette"], toolbarpaletteitem[notransition][place="panel"] { - transition: background-color, border-color, box-shadow; - transition-duration: 10ms, 10ms, 10ms; - transition-timing-function: linear, linear, linear; + transition: none; } -toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon { - transition: transform 50ms ease-in-out; +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbaritem.panel-wide-item, +toolbarpaletteitem > toolbarbutton[type="menu-button"] { + transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, +toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { transform: scale(1.1); } @@ -4413,44 +4490,42 @@ toolbarpaletteitem[place="toolbar"] { margin-bottom: 25px; } -/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ -#customization-palette > #wrapper-edit-controls, -:-moz-any(#customization-palette, #panelUI-contents) > #customization-palette > #wrapper-zoom-controls { - width: 225px; -} - -#wrapper-edit-controls[place="palette"] > .toolbarpaletteitem-box, -#wrapper-zoom-controls[place="palette"] > .toolbarpaletteitem-box { - width: 225px; - max-width: 225px; -} - #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { - margin-top: 24px; +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { + margin-top: 20px; } +/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { margin-left: 0; margin-right: 0; - max-width: 70px; - min-width: 70px; + max-width: 24px; + min-width: 24px; max-height: 24px; height: 24px; + padding: 4px; } -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-text, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button > .toolbarbutton-text { - display: inline; +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + width: 16px; } -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - margin: 0; - -moz-margin-start: 5px; +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { + -moz-box-pack: center; + min-height: 48px; } #customization-palette > toolbarpaletteitem > label { @@ -4461,13 +4536,85 @@ toolbarpaletteitem[place="toolbar"] { /* === END customizeMode.inc.css === */ -#main-window[customizing] { - background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); - background-attachment: fixed; +/* === BEGIN customizeTip.inc.css === */ + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; + margin: 0; + min-width: 400px; + max-width: 1000px; + min-height: 200px; + border-radius: 3px; +/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/ + border: 1px solid #9C9CFF; } -#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck { - padding: 0 2em 2em; +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) { +/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/ +} + +.customization-tipPanel-infoBox { + margin: 20px 25px 25px; + width: 25px; + background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png"); + background-repeat: no-repeat; +} + +.customization-tipPanel-content { + margin: 25px 0; + font-size: 12px; + line-height: 18px; +} + +.customization-tipPanel-em { + margin: 0; + font-weight: bold; +} + +.customization-tipPanel-contentImage { + margin-top: 25px; + list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png"); + min-width: 300px; + max-width: 300px; + min-height: 190px; + max-height: 190px; + display: -moz-box; +} + +.customization-tipPanel-contentImage:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png"); +} + +.customization-tipPanel-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: #3333FF; + margin: 0; + cursor: pointer; +} + +.customization-tipPanel-link > .button-box > .button-text { + margin: 0 !important; +} + +.customization-tipPanel-closeBox > .close-icon { + -moz-appearance: none; + border: 0; + -moz-margin-end: -25px; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png"); +} + +/* === END customizeTip.inc.css === */ + +#main-window[customize-entered] { + background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); + background-attachment: fixed; } #customization-container { @@ -4476,6 +4623,32 @@ toolbarpaletteitem[place="toolbar"] { background-clip: padding-box; } +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] { + margin-right: -2px; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { + margin-left: -2px; +} + +/* End customization mode */ + +#main-window[privatebrowsingmode=temporary] #toolbar-menubar { + background-image: url("chrome://browser/skin/privatebrowsing-dark.png"); + background-position: top right; + background-repeat: no-repeat; +} + +#main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) { + background-position: top left; +} + +#main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon { + list-style-image: url("chrome://browser/skin/privatebrowsing-light.png"); + width: 20px; + height: 16px; +} + #main-window[privatebrowsingmode=temporary] #TabsToolbar::after { content: ""; display: -moz-box;