From: Robert Kaiser Date: Sun, 6 Nov 2016 23:24:43 +0000 (+0100) Subject: second and last part of syncing LCARStrek with Firefox 49/50 windows theme changes X-Git-Tag: LCARStrek-2.47~5 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=db1c5db107950e750d8c3cf3a6ac106ec0cc606e;p=themes.git second and last part of syncing LCARStrek with Firefox 49/50 windows theme changes --- diff --git a/EarlyBlue/global/filefield.css b/EarlyBlue/global/filefield.css index 7d428f3d..3a2820e7 100644 --- a/EarlyBlue/global/filefield.css +++ b/EarlyBlue/global/filefield.css @@ -1,5 +1,5 @@ /* -# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- +# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil -*- # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. diff --git a/EarlyBlue/messenger-newsblog/feed-subscriptions.css b/EarlyBlue/messenger-newsblog/feed-subscriptions.css index c8f0acdf..648dfc76 100644 --- a/EarlyBlue/messenger-newsblog/feed-subscriptions.css +++ b/EarlyBlue/messenger-newsblog/feed-subscriptions.css @@ -1,4 +1,4 @@ -/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- +/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil -*- * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ diff --git a/EarlyBlue/messenger/newmailalert.css b/EarlyBlue/messenger/newmailalert.css index ed167e40..7d38b0bb 100644 --- a/EarlyBlue/messenger/newmailalert.css +++ b/EarlyBlue/messenger/newmailalert.css @@ -1,4 +1,4 @@ -/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- +/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil -*- * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ diff --git a/EarlyBlue/mozapps/pref/pref.css b/EarlyBlue/mozapps/pref/pref.css index 3868b58d..43ec184d 100644 --- a/EarlyBlue/mozapps/pref/pref.css +++ b/EarlyBlue/mozapps/pref/pref.css @@ -1,5 +1,5 @@ /* -# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- +# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil -*- # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. diff --git a/EarlyBlue/x-browser-old/pref/pref.css b/EarlyBlue/x-browser-old/pref/pref.css index e37b707c..727cdbbb 100644 --- a/EarlyBlue/x-browser-old/pref/pref.css +++ b/EarlyBlue/x-browser-old/pref/pref.css @@ -1,5 +1,5 @@ /* -# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- +# -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil -*- # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. diff --git a/LCARStrek/browser/Geolocation-16.png b/LCARStrek/browser/Geolocation-16.png deleted file mode 100644 index 1ce827f7..00000000 Binary files a/LCARStrek/browser/Geolocation-16.png and /dev/null differ diff --git a/LCARStrek/browser/Geolocation-64.png b/LCARStrek/browser/Geolocation-64.png deleted file mode 100644 index 499481aa..00000000 Binary files a/LCARStrek/browser/Geolocation-64.png and /dev/null differ diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css index f031acaf..2c504843 100644 --- a/LCARStrek/browser/aboutNetError.css +++ b/LCARStrek/browser/aboutNetError.css @@ -79,6 +79,7 @@ body.certerror #advancedButton { #advancedPanelContainer { position: absolute; padding: 24px 0; + width: 100%; } .advanced-panel { @@ -108,6 +109,10 @@ span#hostname { #automaticallyReportInFuture { cursor: pointer; + display: inline-block; + padding-inline-start: 2.3em; + text-indent: -2.3em; + line-height: 16px } #errorCode:not([href]) { diff --git a/LCARStrek/browser/addons/addon-install-anchor.svg b/LCARStrek/browser/addons/addon-install-anchor.svg index c16fb3e8..6d469c9a 100644 --- a/LCARStrek/browser/addons/addon-install-anchor.svg +++ b/LCARStrek/browser/addons/addon-install-anchor.svg @@ -5,23 +5,7 @@ - - + - - - + diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index c01eaded..29431c64 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -79,8 +79,8 @@ menubar { /* 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([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar, -#toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar { +#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]), +#toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) { /* margin-top: 3px;*/ } @@ -314,15 +314,20 @@ menubar { toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { /* margin: 0; - padding: 2px 3px;*/ + padding: 2px 3px; + -moz-appearance: none; + border: 1px solid transparent;*/ } -toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active, -toolbarbutton.bookmark-item[open="true"] { -/* padding-top: 3px; - padding-bottom: 1px; - padding-inline-start: 4px; - padding-inline-end: 2px;*/ +toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) { +/* border-color: var(--toolbarbutton-hover-bordercolor); + background: var(--toolbarbutton-hover-background);*/ +} + +toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] { +/* border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); + background: var(--toolbarbutton-active-background);*/ } .bookmark-item > .toolbarbutton-icon, @@ -1427,10 +1432,10 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an transition-duration: 150ms;*/ } /* -#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon, -#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack, -#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - padding: 3px 7px; +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px; } */ @@ -1706,39 +1711,52 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but /* ::::: fullscreen window controls ::::: */ -#window-controls { - margin-inline-start: 4px; -} - #minimize-button, #restore-button, #close-button { -/* list-style-image: url("chrome://global/skin/icons/windowControls.png"); - padding: 0; */ + -moz-appearance: none; + border: none; +/* margin: 0 !important; + padding: 6px 12px;*/ } #minimize-button { - list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif"); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); } #minimize-button:hover { - list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif"); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover); } #restore-button { - list-style-image: url("chrome://navigator/skin/icons/win-restore.gif"); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); +} + +#restore-button:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover); } +#minimize-button:hover, #restore-button:hover { - list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif"); +/* background-color: hsla(0, 0%, 0%, .12);*/ +} + +#minimize-button:hover:active, +#restore-button:hover:active { +/* background-color: hsla(0, 0%, 0%, .22);*/ } #close-button { - list-style-image: url("chrome://navigator/skin/icons/win-close.gif"); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); } #close-button:hover { - list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif"); +/* background-color: hsl(355, 86%, 49%);*/ + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover); +} + +#close-button:hover:active { +/* background-color: hsl(355, 82%, 69%);*/ } /* ::::: Location Bar ::::: */ @@ -1820,6 +1838,16 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, margin-inline-start: 0; } +.urlbar-input-box, + +#urlbar-display-box { + padding-inline-start: 4px; + border-inline-start: 1px solid var(--urlbar-separator-color); + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); + border-image-slice: 1; +} + #urlbar-icons { -moz-box-align: center; } @@ -1864,9 +1892,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, margin-inline-start: 0; } -#urlbar-display-box { -} - .urlbar-display { border-inline-end: 1px solid #9C9CFF; margin-inline-end: 3px; @@ -1965,7 +1990,7 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, transition: none; } -#navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker { +#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 0; } @@ -1981,17 +2006,13 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, /* === BEGIN identity-block.inc.css === */ #identity-box { -/* --identity-box-hover-background-color: #FFCF00; - --identity-box-selected-background-color: #FF9F00; */ --identity-box-verified-color: #008484; /* Default theme does different color per channel, we can't as they do it build-time. */ --identity-box-chrome-color: #9C9CFF; - border-inline-end: 1px solid var(--urlbar-separator-color); font-size: .9em; border-radius: 2px; padding: 3px 5px; - margin-inline-end: 4px; overflow: hidden; /* The latter two properties have a transition to handle the delayed hiding of the forward button when hovered. */ @@ -2013,11 +2034,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, border-inline-end: 1px solid var(--identity-box-chrome-color); } -#identity-box:hover > :not(#identity-icon), -#identity-box[open=true] > :not(#identity-icon) { -/* filter: grayscale(100%);*/ -} - #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { color: var(--identity-box-verified-color); border-inline-end: 1px solid var(--identity-box-verified-color); @@ -2031,11 +2047,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, padding-right: 2px; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 10px; - border-radius: 0; -} - window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { /* border-radius: 0; padding-inline-start: 2px; */ @@ -2043,21 +2054,18 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box margin-inline-end: 1px; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box { padding-inline-start: 2px; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box { /* Forward button hiding is delayed when hovered, so we should use the same delay for the identity box. We handle both horizontal paddings (for LTR and RTL), the latter two delays here are for padding-left and padding-right. */ transition-delay: 0s, 100s, 100s; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box { /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ padding-inline-start: 2.01px; } @@ -2070,11 +2078,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } -#identity-box:hover > #identity-icon, +#identity-box:hover > #identity-icon:not(.no-hover), #identity-box[open=true] > #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); +} + #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } @@ -2132,11 +2149,17 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon { +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { list-style-image: url(chrome://browser/skin/identity-secure.svg); visibility: visible; } +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + visibility: visible; +} + #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); @@ -2150,16 +2173,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but visibility: visible; } -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; -} - /* === END identity-block.inc.css === */ #page-proxy-favicon { @@ -2349,7 +2362,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- #urlbar-stop-button { border-style: none; list-style-image: url("chrome://browser/skin/reload-stop-goFx.png"); -/* padding: 0 9px;*/ +/* margin: 0 9px; */ margin-inline-start: 0px; border-inline-start: 1px solid var(--urlbar-separator-color); border-image: linear-gradient(transparent 15%, @@ -2627,38 +2640,6 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- min-width: 27em; } -.panel-promo-box { - margin: 5px 0 -6px; - padding: 5px 0; - border-top: 1px solid #9C9CFF; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - margin-inline-end: 10px; - vertical-align: middle; -} - -.panel-promo-closebutton { - list-style-image: url("chrome://global/skin/icons/close-button.gif"); - margin-inline-end: -3px; - margin-top: -3px; -} - -.panel-promo-closebutton:hover { - list-style-image: url("chrome://global/skin/icons/close-button-hover.gif"); -} - -.panel-promo-closebutton:hover:active { - list-style-image: url("chrome://global/skin/icons/close-button-hover.gif"); -} - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; -} - /* ::::: content area ::::: */ #sidebar-box { @@ -2786,11 +2767,13 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- .tab-throbber, .tab-icon-image, +.tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { } .tab-throbber, +.tab-sharing-icon-overlay, .tab-icon-image { height: 16px; width: 16px; @@ -2801,6 +2784,47 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } +.tab-icon-image[sharing]:not([selected]), +.tab-sharing-icon-overlay { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +.tab-icon-image[sharing]:not([selected]) { + animation-delay: -1.5s; +} + +.tab-sharing-icon-overlay { + /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */ + margin-inline-start: -22px; + position: relative; +} + +.tab-sharing-icon-overlay[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); +} + +.tab-sharing-icon-overlay[sharing] { + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: #FFCF00; +} + .tab-icon-overlay { width: 16px; height: 16px; @@ -3091,19 +3115,33 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- width: 28px; /* width: calc(36px + var(--tab-curve-width)); */ } +@media (min-resolution: 1.1dppx) { + /* image preloading hack from like lowdpi styles */ + #tabbrowser-tabs::before { + } -/* === END tabs.inc.css === */ + .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), + .tabs-newtab-button:hover { + } -/* Background tabs: - * - * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top - * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by - * the titlebar. We don't need this in fullscreen since window dragging is not an issue there. - */ -#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) { -/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/ + .tab-background-middle[visuallyselected=true] { + } + + .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after, + .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after { + } + + .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after, + .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after { + } + + .tab-icon-image { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } } +/* === END tabs.inc.css === */ + /* Tab DnD indicator */ .tab-drop-indicator { list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png"); @@ -3315,180 +3353,256 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { /* === BEGIN notification-icons.inc.css === */ +#notification-popup-box { + border-radius: 3px 0 0 3px; + padding: 5px 0px; + margin: -5px 0px; + margin-inline-end: -5px; + padding-inline-end: 5px; +} + +/* This class can be used alone or in combination with the class defining the + type of icon displayed. This rule must be defined before the others in order + for its list-style-image to be overridden. */ +.notification-anchor-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + list-style-image: url("chrome://global/skin/icons/information-16.png"); +} + +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted #008484; +} + +@media (min-resolution: 1.1dppx) { + .notification-anchor-icon { + list-style-image: url(chrome://global/skin/icons/information-32.png); + } +} + .popup-notification-icon { width: 64px; height: 64px; margin-inline-end: 10px; } -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url("chrome://browser/skin/Geolocation-64.png"); +#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { + fill: #000000; } -.popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +/* INDIVIDUAL NOTIFICATIONS */ + +/* For the moment we apply the color filter only on the icons listed here. + The first two selectors are used by socialchat.xml (bug 1275558). */ +.webRTC-sharingDevices-notification-icon, +.webRTC-sharingMicrophone-notification-icon, +.camera-icon, +.geo-icon, +.indexedDB-icon, +.install-icon, +.login-icon, +.microphone-icon, +.plugin-icon, +.pointerLock-icon, +.popup-icon, +.screen-icon, +.desktop-notification-icon, +.popup-notification-icon[popupid="geolocation"], +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.popup-notification-icon[popupid="password"], +.popup-notification-icon[popupid="pointerLock"], +.popup-notification-icon[popupid="webRTC-shareDevices"], +.popup-notification-icon[popupid="webRTC-shareMicrophone"], +.popup-notification-icon[popupid="webRTC-shareScreen"], +.popup-notification-icon[popupid="webRTC-sharingDevices"], +.popup-notification-icon[popupid="webRTC-sharingMicrophone"], +.popup-notification-icon[popupid="webRTC-sharingScreen"], +.popup-notification-icon[popupid="web-notifications"] { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #A09090; } -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); +/* The first two selectors are used by socialchat.xml (bug 1275558). The + notifications in the chat window are only shown when they are in use. */ +.webRTC-sharingDevices-notification-icon, +.webRTC-sharingMicrophone-notification-icon, +.in-use { + fill: #008484; } -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); +.popup-notification-icon[popupid="web-notifications"], +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); +.desktop-notification-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows); } -.popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); +.geo-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked); } -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed); } -.popup-notification-icon[popupid="click-to-play-plugins"] { - list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png"); +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.popup-notification-icon[popupid="web-notifications"] { - list-style-image: url("chrome://browser/skin/web-notifications-icon.svg"); +.indexedDB-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid*="offline-app-requested"], -.popup-notification-icon[popupid="offline-app-usage"] { - list-style-image: url("chrome://global/skin/icons/alert-question.gif"); +.login-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); } .popup-notification-icon[popupid="password"] { - list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png"); + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png"); +#login-fill-notification-icon { + /* Temporary solution until the capture and fill doorhangers are unified. */ + transform: scaleX(-1); } -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png"); +/* The first selector is used by socialchat.xml (bug 1275558). */ +.webRTC-sharingDevices-notification-icon, +.camera-icon, +.popup-notification-icon[popupid="webRTC-shareDevices"], +.popup-notification-icon[popupid="webRTC-sharingDevices"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png); +.camera-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -.popup-notification-icon[popupid="pointerLock"] { - list-style-image: url("chrome://browser/skin/pointerLock-64.png"); +/* The first selector is used by socialchat.xml (bug 1275558). */ +.webRTC-sharingMicrophone-notification-icon, +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -/* Notification icon box */ -#notification-popup .panel-promo-box { -/* margin: 10px -10px -10px; */ +.microphone-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -#notification-popup-box { - position: relative; - background-color: #000000; - background-clip: padding-box; - padding-left: 3px; - padding-right: 8px; - border-radius: 3px 0 0 3px; - border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0; - margin-inline-end: -8px; - border-right-width: 8px; +.popup-notification-icon[popupid="webRTC-shareMicrophone"], +.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box { -/* padding-left: 7px; */ +.popup-notification-icon[popupid="webRTC-shareScreen"], +.popup-notification-icon[popupid="webRTC-sharingScreen"], +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -/* This changes the direction of the main notification box on the url bar. */ -#notification-popup-box:-moz-locale-dir(rtl), -/* This adds a second flip for the notification anchors, as they don't switch direction - for RTL mode. */ -.notification-anchor-icon:-moz-locale-dir(rtl) { - transform: scaleX(-1); +.screen-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } -/* For the anchor icons in the chat window, we don't have the notification popup box, - so we need to cancel the RTL transform. */ -.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { - transform: none; +.popup-notification-icon[popupid="pointerLock"], +.pointerLock-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } -.notification-anchor-icon { - list-style-image: url("chrome://global/skin/icons/information-16.png"); +.pointerLock-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); +} - width: 16px; - height: 16px; - margin: 0 2px; +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#popup"); } -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted #008484; +/* EME */ + +.popup-notification-icon[popupid="drmContentPlaying"], +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} + +.drm-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); +} + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } -.geo-notification-icon, -#geo-notification-icon { - list-style-image: url("chrome://browser/skin/Geolocation-16.png"); +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } } -#addons-notification-icon { +/* INSTALL ADDONS */ + +.install-icon { list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-install-blocked"], +.popup-notification-icon[popupid="addon-install-origin-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url("chrome://global/skin/icons/question-16.png"); +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } -#password-notification-icon { - list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png"); +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } -#plugins-notification-icon { - list-style-image: url("chrome://browser/skin/notification-pluginNormal.png"); +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } -#plugins-notification-icon.plugin-hidden { - list-style-image: url("chrome://browser/skin/notification-pluginAlert.png"); +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } -#plugins-notification-icon.plugin-blocked { - list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); +.popup-notification-icon[popupid="click-to-play-plugins"] { + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } -#plugins-notification-icon { -/* -moz-image-region: rect(0, 16px, 16px, 0);*/ +/* OFFLINE APPS */ + +.popup-notification-icon[popupid*="offline-app-requested"], +.popup-notification-icon[popupid="offline-app-usage"] { + list-style-image: url(chrome://global/skin/icons/question-64.png); +} + +/* PLUGINS */ + +.plugin-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } -#plugins-notification-icon:hover { -/* -moz-image-region: rect(0, 32px, 16px, 16px);*/ +.plugin-icon.plugin-blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); + fill: #FF0000 !important; /* important! to override the default hover color */ } #notification-popup-box[hidden] { @@ -3511,153 +3625,27 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled } } -.webRTC-shareDevices-notification-icon, -#webRTC-shareDevices-notification-icon { - list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png"); -} +/* SOCIAL API */ -.webRTC-sharingDevices-notification-icon, -#webRTC-sharingDevices-notification-icon { - list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png"); -} - -.webRTC-shareMicrophone-notification-icon, -#webRTC-shareMicrophone-notification-icon { - list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png"); -} - -.webRTC-sharingMicrophone-notification-icon, -#webRTC-sharingMicrophone-notification-icon { - list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png"); -} - -.webRTC-shareScreen-notification-icon, -#webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); -} - -.webRTC-sharingScreen-notification-icon, -#webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png); -} - -.web-notifications-notification-icon, -#web-notifications-notification-icon { - list-style-image: url("chrome://browser/skin/web-notifications-tray.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.web-notifications-notification-icon:hover, -#web-notifications-notification-icon:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } -.web-notifications-notification-icon:hover:active, -#web-notifications-notification-icon:hover:active { - -moz-image-region: rect(0, 48px, 16px, 32px); +.service-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } -#pointerLock-notification-icon { - list-style-image: url("chrome://browser/skin/pointerLock-16.png"); -} +/* TRANSLATION */ -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url("chrome://browser/skin/translation-16.png"); +.translation-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); -moz-image-region: rect(0px, 16px, 16px, 0px); } -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url("chrome://browser/skin/translation-16.png"); +.translation-icon.in-use { -moz-image-region: rect(0px, 32px, 16px, 16px); } -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url("chrome://browser/skin/social/services-64.png"); -} -#servicesInstall-notification-icon { - list-style-image: url("chrome://browser/skin/social/services-16.png"); -} - -/* EME notifications */ - -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); -} - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); -} - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; -} - -@keyframes emeTeachingMoment { - 0% {transform: translateX(0); } - 25% {transform: translateX(3px) } - 75% {transform: translateX(-3px) } - 100% { transform: translateX(0); } -} - -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { -/* #notification-popup-box { - border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; - } -*/ - .notification-anchor-icon { - list-style-image: url(chrome://global/skin/icons/information-32.png); - } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); - } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); - } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); - } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); - } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); - } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); - } - - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); - } - - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); - } - - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); - } -} - /* === END notification-icons.inc.css === */ .popup-notification-body[popupid="addon-progress"], @@ -3777,21 +3765,13 @@ notification[value="translation"] { -moz-image-region: auto; } -/* ::::: Keyboard UI Panel ::::: */ - -.KUI-panel { - color: #FF9F00; - border-style: none; - border-radius: 20px; -} - -.KUI-panel[level="top"] { - /*background-color: rgba(27%,27%,27%,.65);*/ -} - /* Ctrl-Tab */ #ctrlTab-panel { + -moz-appearance: none; + background: rgba(0%,0%,0%,.7); + color: #FF9F00; + border-style: none; padding: 20px 10px 10px; font-weight: bold; } @@ -3804,6 +3784,7 @@ notification[value="translation"] { } .ctrlTab-preview-inner > .tabPreview-canvas { +/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/ } .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { @@ -3837,33 +3818,6 @@ notification[value="translation"] { margin-top: .5em; } -/* Sync Panel */ - -.sync-panel-icon { - height:32px; - width: 32px; - background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat; -} - -.sync-panel-inner { - width: 0; - padding-left: 10px; -} - -.sync-panel-button-box { - margin-top: 1em; -} - -#sync-start-panel-title { - font-size: 120%; - font-weight: bold; - margin-bottom: 5px; -} - -#sync-start-panel-subtitle { - margin-bottom: 0; -} - /* Status panel */ .statuspanel-label { @@ -3898,7 +3852,7 @@ notification[value="translation"] { /* === BEGIN fullscreen/warning.inc.css === */ -html|*#fullscreen-warning { +html|*.pointerlockfswarning { align-items: center; background: rgba(0, 0, 0, 0.9); border: 2px solid #A09090; @@ -3908,34 +3862,34 @@ html|*#fullscreen-warning { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; } -html|*#fullscreen-warning::before { +html|*.pointerlockfswarning::before { margin: 0; width: 24px; height: 24px; } -html|*#fullscreen-warning.verifiedIdentity::before, -html|*#fullscreen-warning.verifiedDomain::before { +html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before, +html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { content: url("chrome://browser/skin/fullscreen/secure.svg"); } -html|*#fullscreen-warning.unknownIdentity::before { +html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -html|*#fullscreen-domain-text, -html|*#fullscreen-generic-text { +html|*.pointerlockfswarning-domain-text, +html|*.pointerlockfswarning-generic-text { font-size: 21px; font-weight: lighter; color: #A09090; margin: 0 16px; } -html|*#fullscreen-domain { +html|*.pointerlockfswarning-domain { font-weight: bold; margin: 0; } -html|*#fullscreen-exit-button { +html|*.pointerlockfswarning-exit-button { padding: 5px 30px; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; @@ -4526,45 +4480,6 @@ html|*#gcli-output-frame { margin-inline-end: 5px; } -/* Social toolbar item */ - -#social-notification-icon-mentions { - background-color: #000000; - border-radius: 3px; - margin-inline-start: 2px; -} - -#social-notification-icon-mentions:hover { - background-color: #FFCF00; -} - -#social-notification-icon-mentions[open="true"] { - background-color: #FF9F00; -} - -#social-sidebar-splitter { - border: 0; -} - -#socialActivatedNotification .popup-notification-button-container { - margin-left: 6px; -} - -.social-activation-icon { - width: auto; - height: auto; - max-height: 64px; - max-width: 64px; -} - -#social-activation-message { - max-width: 250px; -} - -#social-activation-message > label { - margin: 0; -} - /* social toolbar provider menu */ .social-statusarea-popup { margin-top: 0; @@ -4923,7 +4838,9 @@ window > chatbox { } .messageImage[value="plugin-hidden"] { - list-style-image: url("chrome://browser/skin/notification-pluginNormal.png"); + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #A09090; } /* Keep any changes to this style in sync with pluginProblem.css */ @@ -4931,7 +4848,9 @@ notification.pluginVulnerable { } notification.pluginVulnerable .messageImage { - list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #FF0000; } /* === END plugin-doorhanger.inc.css === */ @@ -5022,6 +4941,10 @@ notification.pluginVulnerable .messageImage { /* Customization mode */ +:root { + --drag-drop-transition-duration: .3s; +} + #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { margin-bottom: 1em; } @@ -5263,7 +5186,7 @@ toolbarpaletteitem[mousedown] { .panel-customization-placeholder, toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="panel"] { - transition: transform .3s ease-in-out; + transition: transform var(--drag-drop-transition-duration) ease-in-out; } #customization-palette { @@ -5275,6 +5198,10 @@ toolbarpaletteitem[place="panel"] { opacity: 1; } +toolbarpaletteitem toolbarbutton[disabled] { +/* color: inherit !important;*/ +} + toolbarpaletteitem[notransition].panel-customization-placeholder, toolbarpaletteitem[notransition][place="toolbar"], toolbarpaletteitem[notransition][place="palette"], @@ -5286,7 +5213,7 @@ toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { - transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, @@ -5314,11 +5241,22 @@ toolbarpaletteitem[place="toolbar"] { toolbarpaletteitem[place="palette"]:-moz-focusring, toolbarpaletteitem[place="panel"]:-moz-focusring, toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); outline: 1px dotted #A09090; - outline-offset: -5px; -moz-outline-radius: 2.5px; } +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: -5px; +} + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -5661,17 +5599,18 @@ toolbarpaletteitem[place="toolbar"]:-moz-focusring { } #UITourTooltipBody { - margin-inline-end: 14px; - margin-inline-start: 14px; - margin-top: -16px; - margin-bottom: 8px; + -moz-box-align: start; +} + +#UITourTooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - margin-inline-start: 14px; - margin-inline-end: 14px; + margin-inline-end: 10px; } #UITourTooltipTitle, @@ -5682,11 +5621,7 @@ toolbarpaletteitem[place="toolbar"]:-moz-focusring { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - margin-inline-start: 0; - /* Avoid the title overlapping the close button */ - margin-inline-end: 14px; - margin-top: 0; - margin-bottom: 9px; + margin: 0; } #UITourTooltipDescription { @@ -5716,7 +5651,7 @@ toolbarpaletteitem[place="toolbar"]:-moz-focusring { background-color: rgba(0,0,0,.2); border-top: 1px solid rgba(0,0,0,.4); margin: 10px -16px -16px; - padding: 2em 15px; + padding: 16px; } #UITourTooltipButtons > label, @@ -5729,6 +5664,11 @@ toolbarpaletteitem[place="toolbar"]:-moz-focusring { margin-inline-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css index 159f203f..a670c2c8 100644 --- a/LCARStrek/browser/controlcenter/panel.css +++ b/LCARStrek/browser/controlcenter/panel.css @@ -348,8 +348,21 @@ description#identity-popup-content-verifier, background-image: url(chrome://browser/skin/controlcenter/permissions.svg); } -#identity-popup-permission-list menulist { - min-width: 60px; +#identity-popup-permissions-headline { + /* Make sure the label is as tall as the icon so that the permission list + which is aligned with the icon doesn't cover it up. */ + min-height: 24px; +} + +#identity-popup-permission-list { + /* Offset the padding set on #identity-popup-permissions-content so that it + shows up just below the section. The permission icons are 16px wide and + should be right aligned with the section icon. */ + margin-inline-start: calc(-1em - 16px); +} + +.identity-popup-permission-item { + min-height: 24px; } #identity-popup-permission-list:not(:empty) { @@ -360,9 +373,56 @@ description#identity-popup-content-verifier, display: none; } +.identity-popup-permission-icon { + width: 16px; + height: 16px; +} + .identity-popup-permission-label { - margin-inline-start: 0; - word-wrap: break-word; + margin-inline-start: 1em; +} + +.identity-popup-permission-state-label { + text-align: end; + opacity: 0.6; +} + +.identity-popup-permission-remove-button { + margin: 0; + border-width: 0; + border-radius: 50%; + min-width: 0; + padding: 2px; + background-color: transparent; +} + +.identity-popup-permission-remove-button > .button-box { + padding: 0; +} + +.identity-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #A09090; +} + +.identity-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover { + background-color: #FFCF00; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon { + fill: #000000; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active { + background-color: #FF9F00; } /* === END panel.inc.css === */ diff --git a/LCARStrek/browser/customizableui/panelUI.css b/LCARStrek/browser/customizableui/panelUI.css index bb39b655..b7cb52ff 100644 --- a/LCARStrek/browser/customizableui/panelUI.css +++ b/LCARStrek/browser/customizableui/panelUI.css @@ -290,7 +290,6 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan panelview[id^=PanelUI-webext-] { overflow: hidden; - border-radius: 3.5px; } panelview:not([mainview]) .toolbarbutton-text, @@ -546,7 +545,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { border-bottom-left-radius: 4px; } -#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator { +#main-window[customizing] #PanelUI-footer-fxa { display: none; } @@ -1449,6 +1448,11 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { visibility: hidden; } +#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + .panel-mainview[panelid=customizationui-widget-panel], #customizationui-widget-multiview > .panel-viewcontainer, #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css deleted file mode 100644 index 5e2ee689..00000000 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ /dev/null @@ -1,1688 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* === BEGIN panelUIOverlay.inc.css === */ - -:root { - --panel-ui-exit-subview-gutter-width: 38px; -} - -#PanelUI-popup #PanelUI-contents:empty { - height: 128px; -} - -#PanelUI-popup #PanelUI-contents:empty::before { - content: ""; - background-image: url(chrome://browser/skin/customizableui/whimsy.png); - background-size: 64px 64px; - display: block; - width: 64px; - height: 64px; - position: absolute; - transition: transform 1s ease-out; - animation: whimsyMoveX 3.05s linear 0s infinite alternate, - whimsyMoveY 3.4s linear 0s infinite alternate; -} - -#PanelUI-popup #PanelUI-contents:not(:hover):empty::before { - filter: grayscale(100%); -} - -#PanelUI-popup #PanelUI-contents:active:empty::before { - animation: whimsyMoveX 3.05s linear 0s infinite alternate, - whimsyMoveY 3.4s linear 0s infinite alternate, - whimsyRotate 1s linear 0s infinite normal; -} - -#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before { - animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, - whimsyMoveY 3.4s linear 0s infinite alternate; -} - -#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before { - animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, - whimsyMoveY 3.4s linear 0s infinite alternate, - whimsyRotate 1s linear 0s infinite normal; -} - -@media (min-resolution: 2dppx) { - #PanelUI-popup #PanelUI-contents:empty::before { - background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png"); - } -} - -@keyframes whimsyMoveX { - /* These values are adjusted for the padding on the panel. */ - from { margin-left: -9px; } to { margin-left: calc(100% - 55px); } -} - -@keyframes whimsyMoveXRTL { - /* These values are adjusted for the padding on the panel. */ - from { margin-right: -9px; } to { margin-right: calc(100% - 55px); } -} - -@keyframes whimsyMoveY { - /* These values are adjusted for the padding and height of the panel. */ - from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); } -} - -@keyframes whimsyRotate { - to { transform: perspective(5000px) rotateY(360deg); } -} - -#customization-panelHolder { - border-radius: 4px; -} - -#PanelUI-button { - margin-inline-start: 3px; -} - -#PanelUI-button:-moz-locale-dir(rtl) { -} - -#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - display: -moz-box; - height: 10px; - width: 10px; - background-size: contain; - border: none; -} - -#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - display: none; -} - -#PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center; - height: 13px; -} - -#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; - height: 13px; -} - -#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, -#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - height: 13px; - box-shadow: none; -} - -#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; -} - -#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; -} - -#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, -#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { -} - -.panel-subviews { - padding: 4px; - margin-inline-start: var(--panel-ui-exit-subview-gutter-width); -} - -.panel-viewstack[viewtype="main"] > .panel-subviews { - transform: translateX(22.35em); -} - -.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { - transform: translateX(-22.35em); -} - -panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews { - display: none; -} - -.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView { - -moz-box-flex: 1; -} - -.panel-subview-body { - overflow-y: auto; - overflow-x: hidden; - -moz-box-flex: 1; -} - -#PanelUI-popup .panel-subview-body { - margin: -4px; - padding: 4px 4px; -} - -.panel-subview-header, -.subviewbutton.panel-subview-footer { - box-sizing: border-box; -/* min-height: 41px; */ - padding: 3px; -} - -.panel-subview-header { - margin: 0 0 4px; - background-color: #A09090; - color: #000000; - font-variant: small-caps; - border-radius: 4px; -} - -.panel-subview-footer { - border-top: 1px solid #A09090; -} - -.cui-widget-panelview .panel-subview-header { - display: none; -} - -.cui-widget-panelview .subviewbutton.panel-subview-footer { - margin: 4px 0 0; - -moz-box-pack: center; -} - -#PanelUI-mainView { - display: flex; - flex-direction: column; - border-radius: 4px; -} - -#PanelUI-popup > arrowscrollbox > autorepeatbutton { - display: none; -} -#PanelUI-popup > arrowscrollbox > scrollbox { - overflow: visible; -} - -#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent { - overflow: hidden; - padding: 0; -} - -#PanelUI-contents { - padding: .5em 0; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { -/* line-height: 1.2;*/ - max-height: 2.4em; -} - -.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, -.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text { - -moz-hyphens: auto; -} - -.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, -.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text { - position: absolute; - clip: rect(-0.1em, auto, 2.6em, auto); -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { - text-align: center; - /* Need to override toolkit theming which sets margin: 0 !important; */ - margin: 2px 0 0 !important; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { - text-align: center; - margin: -1px 0 0; -} - -#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls, -#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls { - margin-inline-start: 0; -} - -#PanelUI-contents { - max-width: 22.35em; -} - -#BMB_bookmarksPopup, -.panel-mainview:not([panelid="PanelUI-popup"]) { - max-width: 30em; -} - -/* Give WebExtension stand-alone panels extra width for Chrome compatibility */ -.cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview { - max-width: 800px; -} - -.cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - -.cui-widget-panelview[id^=PanelUI-webext-] { - border-radius: 3.5px; -} - -panelview:not([mainview]) .toolbarbutton-text, -.cui-widget-panel toolbarbutton > .toolbarbutton-text { - text-align: start; - display: -moz-box; -} - -.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - -.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { - padding-bottom: 0; -} - -.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child { - border-radius: 4px 4px 0 0; -} - -.cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child { - border-radius: 0 0 4px 4px; -} - -#PanelUI-contents { - display: block; - flex: 1 0 auto; - margin-left: auto; - margin-right: auto; - max-width: 22.35em; -} - -#PanelUI-contents-scroller { - overflow-y: auto; - overflow-x: hidden; - width: 22.35em; - flex: auto; -} - -.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon { - min-width: 0; - min-height: 0; - margin: 0; -} - -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item), -.panelUI-grid .toolbarbutton-1, -.panel-customization-placeholder-child { - -moz-appearance: none; - -moz-box-orient: vertical; - width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */ - height: calc(51px + 2.2em); -} - -/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem - * should have a min-width set so they abide by the width set above (which they do outside of - * customize mode because they're in a flexed container) */ -toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { - min-width: 0.01px; -} - -/* Help SDK buttons fit in. */ -toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, -toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { - height: 32px; - width: 32px; -} - -.customization-palette .toolbarbutton-1 { - -moz-appearance: none; - -moz-box-orient: vertical; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button { - -moz-appearance: none; - -moz-box-orient: vertical; - width: calc(22.35em / 3 - 0.1px - 2px); - height: calc(49px + 2.2em); - border: 0; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { - margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */ -} - -.panel-customization-placeholder-child { - margin: 6px 0 0; -/* padding: 2px 6px;*/ -} - -.panelUI-grid .toolbarbutton-1[type="menu"] { - background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif"); - background-position: right 3px top 16px; - background-repeat: no-repeat; -} - -.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) { - background-position: left 3px top 16px; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { - display: none; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { - -moz-box-align: center; - width: 16px; - margin-inline-start: -16px; - height: 51px; - margin-bottom: 2.2em; - padding: 0; -} - -.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker { - border-radius: 0 0 0 2px; -} - -.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { - border-radius: 0 0 2px 0; -} - -#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon { -/* opacity: .5; */ -} - -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { - width: calc(22.35em / 3 - 0.1px); - margin: 0 !important; -} - -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { - -moz-box-align: center; - -moz-box-pack: center; -} - -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { - margin: 4px auto; -} - -#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView { -} - -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { - opacity: .5; -} - -/* - * XXXgijs: this is a workaround for a layout issue that was caused by these iframes, - * which was affecting subview display. Because of this, we're hiding the iframe *only* - * when displaying a subview. The discerning user might notice this, but it's not nearly - * as bad as the brokenness. - * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375 - * is addressed. - */ -#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe { - visibility: hidden; -} - -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text { - text-align: center; -} - -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, -.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, -.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, -.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, -.panel-customization-placeholder-child > .toolbarbutton-icon { - min-width: 32px; - min-height: 32px; - /* Explanation for the below formula (A / B - C) - A - Each button is 22.35em / 3 - 0.1px wide - B - Each button has two margins. - C (44px / 2 = 22px) - The button icon is 32 pixels wide. - The button has 12px of horizontal padding (6 on each side). - The button has 0px of horizontal border (0 on each side). - Total width of button's icon + button padding should therefore be 44px, - which means each horizontal margin should be the half the button's width - (44/2) px. - */ - margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px); -} - -/* above we treat the container as the icon for the margins, that is so the -/* badge itself is positioned correctly. Here we make sure that the icon itself -/* has the minum size we want, but no padding/margin. */ -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { - width: 32px; - height: 32px; - min-width: 32px; - min-height: 32px; - margin: 0; - padding: 0; -} - -toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { - -moz-box-flex: 1; -} - -#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder { - -moz-box-flex: 1; -} - -#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { - margin-inline-end: 2px; -} - -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button { - border-left: none; - border-right: none; - border-radius: 0; -} - -#zoom-in-button > .toolbarbutton-text, -#zoom-out-button > .toolbarbutton-text, -#zoom-reset-button > .toolbarbutton-icon { - display: none; -} - -#PanelUI-footer { - display: flex; - flex-shrink: 0; - flex-direction: column; -/* background-color: hsla(210,4%,10%,.07);*/ - padding: 0; - margin: 0; -/* min-height: 4em;*/ - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator { - display: none; -} - -#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, -#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, -#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - display: none; -} - -#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after { - content: url("chrome://browser/skin/warning.svg"); - width: 47px; - padding-top: 1px; - display: block; - text-align: center; - position: relative; - top: 25%; -} - -#PanelUI-update-status[update-status]::after { - content: ""; - width: 14px; - height: 14px; - margin-right: 16.5px; - border-radius: 2px; - background-size: contain; - display: -moz-box; -} - -#PanelUI-update-status[update-status="succeeded"]::after { - background-image: url(chrome://browser/skin/update-badge.svg); - background-color: #008484; -} - -#PanelUI-update-status[update-status="failed"]::after { - background-image: url(chrome://browser/skin/update-badge-failed.svg); - background-color: #FF0000; -} - -#PanelUI-fxa-status { - display: flex; - flex: 1 1 0%; - width: 1px; -} - -#PanelUI-footer-inner, -#PanelUI-footer-fxa:not([hidden]) { - display: flex; - border-top: 1px solid #9C9CFF; -} - -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { - position: relative; -} - -#PanelUI-footer-inner > toolbarseparator, -#PanelUI-footer-fxa > toolbarseparator { - border: 0; - border-left: 1px solid #9C9CFF; - margin: 0; -} - -#PanelUI-footer-inner:hover > toolbarseparator, -#PanelUI-footer-fxa:hover > toolbarseparator { -/* margin: 0;*/ -} - -#PanelUI-update-status, -#PanelUI-help, -#PanelUI-fxa-label, -#PanelUI-fxa-icon, -#PanelUI-customize, -#PanelUI-quit { - margin: 0; - padding: 11px 0; - box-sizing: border-box; - min-height: 40px; - box-shadow: none; - border: none; - border-radius: 0; - transition: background-color; - -moz-box-orient: horizontal; -} - -#PanelUI-update-status { - border-top: 1px solid #9C9CFF; - border-bottom: 1px solid transparent; - margin-bottom: -1px; -} - -#PanelUI-update-status > .toolbarbutton-text { - width: 0; /* Fancy cropping solution for flexbox. */ -} - -#PanelUI-help[panel-multiview-anchor="true"] { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -#PanelUI-help, -#PanelUI-quit { - min-width: 44px; -} - -#PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-label > .toolbarbutton-text, -#PanelUI-customize > .toolbarbutton-text { - margin: 0; - padding: 0 6px; - text-align: start; -} - -#PanelUI-help > .toolbarbutton-text, -#PanelUI-quit > .toolbarbutton-text, -#PanelUI-fxa-avatar > .toolbarbutton-text { - display: none; -} - -#PanelUI-update-status > .toolbarbutton-icon, -#PanelUI-fxa-label > .toolbarbutton-icon, -#PanelUI-fxa-icon > .toolbarbutton-icon, -#PanelUI-customize > .toolbarbutton-icon, -#PanelUI-help > .toolbarbutton-icon, -#PanelUI-quit > .toolbarbutton-icon { - margin-inline-end: 0; -} - -#PanelUI-fxa-icon { - padding-inline-start: 15px; - padding-inline-end: 15px; -} - -#PanelUI-fxa-label, -#PanelUI-customize { - flex: 1; - padding-inline-start: 15px; - border-inline-start-style: none; -} - -#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, -#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { - padding-inline-start: 0px; -} - -#PanelUI-update-status { - width: calc(22.35em + 30px); - padding-inline-start: 15px; - border-inline-start-style: none; -} - -#PanelUI-update-status { - list-style-image: url(chrome://branding/content/icon16.png); -} - -#PanelUI-fxa-label, -#PanelUI-fxa-icon { - list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png"); -} - -#PanelUI-remotetabs { - --panel-ui-sync-illustration-height: 157.5px; -} - -.PanelUI-remotetabs-instruction-title, -.PanelUI-remotetabs-instruction-label, -#PanelUI-remotetabs-mobile-promo { - /* If you change the margin here, the min-height of the synced tabs panel - (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may - need adjusting (see bug 1248506) */ - margin: 15px; - text-align: center; - text-shadow: none; - max-width: 15em; - color: #A09090; -} - -.PanelUI-remotetabs-instruction-title { - font-size: 1.3em; -} - -/* The boxes with "instructions" get extra top and bottom padding for space - around the illustration and buttons */ -.PanelUI-remotetabs-instruction-box { - /* If you change the padding here, the min-height of the synced tabs panel - (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may - need adjusting (see bug 1248506) */ - padding-bottom: 30px; - padding-top: 15px; -} - -.PanelUI-remotetabs-prefs-button { -/* - -moz-appearance: none; - background-color: #0096dd; - / !important for the color as an OSX specific rule when a lightweight theme - is used for buttons in the toolbox overrides. See bug 1238531 for details / - color: white !important; - border-radius: 2px; - / If you change the margin or padding below, the min-height of the synced tabs - panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, - etc) may need adjusting (see bug 1248506) / - margin-top: 10px; - margin-bottom: 10px; - padding: 8px; - text-shadow: none; -*/ - min-width: 200px; -} - -.PanelUI-remotetabs-prefs-button:hover, -.PanelUI-remotetabs-prefs-button:hover:active { -/* background-color: #018acb; */ -} - -.remotetabs-promo-link { - margin: 0; -} - -.PanelUI-remotetabs-notabsforclient-label { - color: #A09090; - /* This margin is to line this label up with the labels in toolbarbuttons. */ - margin-left: 28px; -} - -.fxaSyncIllustration { - height: var(--panel-ui-sync-illustration-height); - list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); -} - -.PanelUI-remotetabs-prefs-button > .toolbarbutton-text { - /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */ - text-align: center !important; - text-shadow: none; -} - -#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ - min-width: 19em; -} - -/* Work around bug 1224412 - these boxes will cause scrollbars to appear when - the panel is anchored to a toolbar button. -*/ -#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, -#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, -#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, -#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { - min-height: calc(var(--panel-ui-sync-illustration-height) + - 20px + /* margin of .PanelUI-remotetabs-prefs-button */ - 16px + /* padding of .PanelUI-remotetabs-prefs-button */ - 30px + /* margin of .PanelUI-remotetabs-instruction-label */ - 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */ - 11em); -} - -#PanelUI-remotetabs-tabslist > label[itemtype="client"] { - color: #A09090; -} - -/* Collapse the non-active vboxes in the remotetabs deck to use only the - height the active box needs */ -#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, -#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, -#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { - visibility: collapse; -} - -#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { - display: none; -} - -#PanelUI-fxa-icon[syncstatus="active"] { - list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png"); -} - -#PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, -#PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { - list-style-image: url(chrome://browser/skin/warning.svg); -} - -#PanelUI-customize { - list-style-image: url("chrome://browser/skin/menuPanel-customize.png"); -} - -#customization-panelHolder #PanelUI-customize { - list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png"); -} - -#PanelUI-help { - list-style-image: url("chrome://browser/skin/menuPanel-help.png"); -} - -#PanelUI-quit { - border-inline-end-style: none; - list-style-image: url("chrome://browser/skin/menuPanel-exit.png"); -} - -#PanelUI-fxa-label, -#PanelUI-fxa-icon, -#PanelUI-customize, -#PanelUI-help, -#PanelUI-quit { - -moz-image-region: rect(0, 16px, 16px, 0); -} - -#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, -#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { - display: none; -} - -#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - display: none; -} - -#PanelUI-fxa-avatar[disabled], -#PanelUI-fxa-icon[disabled] { - display: none; -} - -#PanelUI-fxa-status[disabled] { - pointer-events: none; -} - -#PanelUI-fxa-avatar { - width: 32px; - height: 32px; - border-radius: 50%; - background-repeat: no-repeat; - background-position: 0 0; - background-size: contain; - align-self: center; - margin: 0px 7px; - padding: 0px; - border: 0px none; - margin-inline-end: 0; -} - -#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); -} - -#PanelUI-customize:hover, -#PanelUI-help:not([disabled]):hover, -#PanelUI-quit:not([disabled]):hover, -#PanelUI-customize:hover:active, -#PanelUI-help:not([disabled]):hover:active, -#PanelUI-quit:not([disabled]):hover:active { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -#PanelUI-help[disabled], -#PanelUI-quit[disabled] { - -moz-image-region: rect(0, 48px, 16px, 32px); -} - -#PanelUI-fxa-icon:not([disabled]):hover, -#PanelUI-help:not([disabled]):hover, -#PanelUI-customize:hover, -#PanelUI-quit:not([disabled]):hover { -} - -#PanelUI-fxa-icon:not([disabled]):hover:active, -#PanelUI-help:not([disabled]):hover:active, -#PanelUI-customize:hover:active, -#PanelUI-quit:not([disabled]):hover:active { -} - -#PanelUI-fxa-status:not([disabled]):hover, -#PanelUI-fxa-status:not([disabled]):hover:active, -#PanelUI-fxa-icon:not([disabled]):hover, -#PanelUI-fxa-icon:not([disabled]):hover:active { -} - -#PanelUI-footer-fxa[fxastatus="error"] { - background-color: #FF0000; - color: #000000; -} - -#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { - background-color: #FFCF00; -} - -#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { - background-color: #FF9F00; -} - -#PanelUI-update-status { -/* color: black; */ -} - -#PanelUI-update-status[update-status="succeeded"] { - background-color: #008484; - color: #000000; -} - -#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover { - background-color: #FFCF00; -} - -#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active { - background-color: #FF9F00; -} - -#PanelUI-update-status[update-status="failed"] { - background-color: #FF0000; - color: #000000; -} - -#PanelUI-update-status[update-status="failed"]:not([disabled]):hover { - background-color: #FFCF00; -} - -#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active { - background-color: #FF9F00; -} - -#PanelUI-quit:not([disabled]):hover { - background-color: #FF0000; -} - -#PanelUI-quit:not([disabled]):hover:active { - background-color: #FF9F00; -} - -#customization-panelHolder #PanelUI-customize { - color: #FFCF00; - background-color: #008484; - text-shadow: none; - margin-top: -1px; -} - -#customization-panelHolder #PanelUI-customize + toolbarseparator { - display: none; -} - -#customization-panelHolder #PanelUI-customize:hover, -#customization-panelHolder #PanelUI-customize:hover:active { - background-color: #FFCF00; - color: #000000; -} - -#customization-palette .toolbarbutton-multiline-text, -#customization-palette .toolbarbutton-text { - display: none; -} - -panelview .toolbarbutton-1, -.subviewbutton, -.widget-overflow-list .toolbarbutton-1, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, -.share-provider-button, -.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { -/* padding: 0 6px; - background-color: hsla(210,4%,10%,0); - border-radius: 2px; - border-style: solid; - border-color: hsla(210,4%,10%,0);*/ -} - -panelview .toolbarbutton-1, -.subviewbutton, -.widget-overflow-list .toolbarbutton-1, -.share-provider-button, -.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { - border-width: 0; -} - -.subviewbutton.panel-subview-footer { -/* border-radius: 0; */ - margin: 2px 0 0; -} - -.subviewbutton.panel-subview-footer > .menu-text { - margin-inline-start: 0px !important; - padding-inline-start: 6px; - padding-inline-end: 6px; - -moz-box-flex: 0; - text-align: center; -} - -.subviewbutton.panel-subview-footer > .toolbarbutton-icon { - margin: 0; -} - -.subviewbutton.panel-subview-footer > .toolbarbutton-text { - text-align: center; - padding: 0; -} - -.subviewbutton.panel-subview-footer > .menu-accel-container { - padding-inline-start: 6px; -} - -.subviewbutton:not(.panel-subview-footer) { - margin: 0; -} - -.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, -/* Bookmark items need a more specific selector. */ -.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, -.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { -/* font: menu;*/ -} - -.PanelUI-subView .subviewbutton[shortcut]::after { - content: attr(shortcut); - float: right; - color: #A09090; -} - -.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after { - margin-inline-start: 10px; -} - -/* This is a