diff --git a/application/palemoon/themes/osx/Toolbar-glass.png b/application/palemoon/themes/osx/Toolbar-glass.png deleted file mode 100644 index 23cc4bfaf4..0000000000 Binary files a/application/palemoon/themes/osx/Toolbar-glass.png and /dev/null differ diff --git a/application/palemoon/themes/osx/Toolbar-inverted.png b/application/palemoon/themes/osx/Toolbar-inverted.png index 2c3253fe80..54d83bf5f2 100644 Binary files a/application/palemoon/themes/osx/Toolbar-inverted.png and b/application/palemoon/themes/osx/Toolbar-inverted.png differ diff --git a/application/palemoon/themes/osx/Toolbar-inverted.svg b/application/palemoon/themes/osx/Toolbar-inverted.svg new file mode 100644 index 0000000000..ce59313e68 --- /dev/null +++ b/application/palemoon/themes/osx/Toolbar-inverted.svg @@ -0,0 +1,302 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/osx/Toolbar.png b/application/palemoon/themes/osx/Toolbar.png index 3d1b80ec70..8ec756e03d 100644 Binary files a/application/palemoon/themes/osx/Toolbar.png and b/application/palemoon/themes/osx/Toolbar.png differ diff --git a/application/palemoon/themes/osx/Toolbar.svg b/application/palemoon/themes/osx/Toolbar.svg new file mode 100644 index 0000000000..7a68c06087 --- /dev/null +++ b/application/palemoon/themes/osx/Toolbar.svg @@ -0,0 +1,1356 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/osx/appmenu-dropmarker.png b/application/palemoon/themes/osx/appmenu-dropmarker.png deleted file mode 100644 index 27deaff722..0000000000 Binary files a/application/palemoon/themes/osx/appmenu-dropmarker.png and /dev/null differ diff --git a/application/palemoon/themes/osx/appmenu-icons.png b/application/palemoon/themes/osx/appmenu-icons.png deleted file mode 100644 index 78f3658163..0000000000 Binary files a/application/palemoon/themes/osx/appmenu-icons.png and /dev/null differ diff --git a/application/palemoon/themes/osx/browser.css b/application/palemoon/themes/osx/browser.css index 0f8b83dde6..d1b0608a1a 100644 --- a/application/palemoon/themes/osx/browser.css +++ b/application/palemoon/themes/osx/browser.css @@ -9,22 +9,58 @@ %include shared.inc %filter substitution -%define toolbarHighlight rgba(255,255,255,.5) -%define selectedTabHighlight rgba(255,255,255,.7) %define toolbarShadowColor rgba(10%,10%,10%,.4) %define toolbarShadowOnTab linear-gradient(to top, rgba(10%,10%,10%,.4) 1px, transparent 1px) -%define bgTabTexture linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)) -%define bgTabTextureHover linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)) %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32); %define navbarLargeIcons #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar %define forwardTransitionLength 150ms %define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"],#nav-bar:not([currentset])) > #unified-back-forward-button %define conditionalForwardWithUrlbarWidth 27 +:root { + --toolbox-after-color: ThreeDShadow; + + --toolbar-custom-color: -moz-Dialog; + --toolbar-highlight-top: rgba(255,255,255,.5); + --toolbar-highlight-bottom: transparent; + + --toolbarbutton-background-color: hsla(210,32%,93%,.3); + --toolbarbutton-border-radius: 2.5px; + --toolbarbutton-border-color: hsla(210,54%,20%,.2); + + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.png"); + --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.png"); + + --tab-background: linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)); + --tab-background-hover: linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)); + --tab-border-radius: 6px; + --tab-box-shadow: inset 0.5px 1px 1px var(--tab-selected-highlight); + --tab-selected-highlight: rgba(255,255,255,.7); +} + +/* Use SVG for HiDPI 133%+ */ +@media (min-resolution: 1.33dppx) { + :root { + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg"); + --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.svg"); + } +} + +:root:-moz-lwtheme-brighttext { + --toolbar-highlight-top: rgba(32,32,32,.8); + --toolbar-highlight-bottom: rgba(32,32,32,0); +} + +:root:-moz-lwtheme-darktext { + --toolbar-highlight-top: rgba(255,255,255,.8); + + --tab-selected-highlight: rgba(255,255,255,.6); +} + #navigator-toolbox { - -moz-appearance: none; - background-color: transparent; - border-top: none; + -moz-appearance: none; + background-color: transparent; + border-top: none; } #main-window { @@ -33,66 +69,54 @@ } #navigator-toolbox::after { - content: ""; - display: -moz-box; - -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ - height: 1px; - background-color: ThreeDShadow; + content: ""; + display: -moz-box; + -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ + height: 1px; + background-color: var(--toolbox-after-color); } #navigator-toolbox[tabsontop=false]::after, #main-window[disablechrome] #navigator-toolbox::after { - visibility: collapse; + visibility: collapse; } #navigator-toolbox > toolbar:not(:-moz-lwtheme) { - -moz-appearance: none; - border-style: none; - background-color: -moz-Dialog; + -moz-appearance: none; + border-style: none; + background-color: var(--toolbar-custom-color); } #nav-bar[tabsontop=true]:not(:-moz-lwtheme), #nav-bar[tabsontop=true][collapsed=true]:not([customizing]):not(:-moz-lwtheme) + toolbar, #nav-bar[tabsontop=true][collapsed=true]:not([customizing]):not(:-moz-lwtheme) + #customToolbars + #PersonalToolbar { - background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0)); -} - -#nav-bar[tabsontop=true]:-moz-lwtheme, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]):-moz-lwtheme + toolbar, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]):-moz-lwtheme + #customToolbars + #PersonalToolbar { - background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0)); -} - -#nav-bar[tabsontop=true]:-moz-lwtheme-brighttext, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]):-moz-lwtheme-brighttext + toolbar, -#nav-bar[tabsontop=true][collapsed=true]:not([customizing]):-moz-lwtheme-brighttext + #customToolbars + #PersonalToolbar { - background-image: linear-gradient(rgba(32,32,32,.8), rgba(32,32,32,0)); + background-image: linear-gradient(var(--toolbar-highlight-top), var(--toolbar-highlight-bottom)); } /* Blend the topmost toolbar with the titlebar */ #main-window[tabsontop=false]:not([privatebrowsingmode=temporary]) #nav-bar:not(:-moz-lwtheme), #main-window[tabsontop=true]:not([privatebrowsingmode=temporary]) #TabsToolbar:not(:-moz-lwtheme) { - -moz-appearance: toolbar; + -moz-appearance: toolbar; } #main-window[tabsontop=false][privatebrowsingmode=temporary] #nav-bar:not(:-moz-lwtheme), #main-window[tabsontop=true][privatebrowsingmode=temporary] #TabsToolbar:not(:-moz-lwtheme) { - background-color: transparent; + background-color: transparent; } #main-window[tabsontop=false][privatebrowsingmode=temporary] #nav-bar:not(:-moz-lwtheme) { - border-bottom: 1px solid rgba(26,26,26,0.2); + border-bottom: 1px solid rgba(26,26,26,0.2); } #personal-bookmarks { - min-height: 24px; + min-height: 24px; } #print-preview-toolbar:not(:-moz-lwtheme) { - -moz-appearance: toolbox; + -moz-appearance: toolbox; } #browser-bottombox:not(:-moz-lwtheme) { - background-color: -moz-dialog; + background-color: var(--toolbar-custom-color); } @@ -100,52 +124,52 @@ /* ::::: titlebar ::::: */ #main-window[sizemode="normal"]:not([privatebrowsingmode=temporary]) > #titlebar { - -moz-appearance: -moz-window-titlebar; + -moz-appearance: -moz-window-titlebar; } #main-window[sizemode="maximized"] > #titlebar { - -moz-appearance: -moz-window-titlebar-maximized; + -moz-appearance: -moz-window-titlebar-maximized; } #titlebar-buttonbox { - -moz-appearance: -moz-window-button-box; + -moz-appearance: -moz-window-button-box; } .titlebar-placeholder[type="appmenu-button"] { - margin-left: 4px; + margin-left: 4px; } .titlebar-placeholder[type="caption-buttons"] { - margin-left: 10px; + margin-left: 10px; } /* titlebar command buttons */ #titlebar-min { - -moz-appearance: -moz-window-button-minimize; + -moz-appearance: -moz-window-button-minimize; } #titlebar-max { - -moz-appearance: -moz-window-button-maximize; + -moz-appearance: -moz-window-button-maximize; } #main-window[sizemode="maximized"] #titlebar-max { - -moz-appearance: -moz-window-button-restore; + -moz-appearance: -moz-window-button-restore; } #titlebar-close { - -moz-appearance: -moz-window-button-close; + -moz-appearance: -moz-window-button-close; } /* ensure titlebar on privacy windows is of correct size */ #titlebar { - height: 22px; + height: 22px; } /* ensure extra titlebar doesn't appear on normal (e.g. non-privacy) windows */ #main-window:not([privatebrowsingmode=temporary]):not(:-moz-lwtheme) > #titlebar > #titlebar-content > #titlebar-buttonbox-container, #main-window:not([drawintitlebar=true]):not(:-moz-lwtheme) > #titlebar { - display: none; + display: none; } #titlebar-buttonbox-container { @@ -179,11 +203,11 @@ toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon { @media (min-resolution: 2dppx) { toolbarbutton.chevron { - list-style-image: url("chrome://global/skin/icons/chevron@2x.png"); + list-style-image: url("chrome://global/skin/icons/chevron@2x.png"); } toolbarbutton.chevron > .toolbarbutton-icon { - width: 13px; + width: 13px; } } @@ -207,12 +231,12 @@ toolbarbutton.bookmark-item { @media (min-resolution: 2dppx) { .bookmark-item > .toolbarbutton-menu-dropmarker { - list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png"); - -moz-image-region: rect(0, 14px, 10px, 0); + list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png"); + -moz-image-region: rect(0, 14px, 10px, 0); } .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon { - width: 7px; + width: 7px; } } @@ -240,7 +264,7 @@ toolbarbutton.bookmark-item[open="true"] { @media (min-resolution: 2dppx) { .bookmark-item:hover > .toolbarbutton-menu-dropmarker, .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker { - -moz-image-region: rect(10px, 14px, 20px, 0); + -moz-image-region: rect(10px, 14px, 20px, 0); } } @@ -305,35 +329,35 @@ toolbarbutton.bookmark-item > menupopup { @media (min-resolution: 2dppx) { .bookmark-item[container] { - list-style-image: url("chrome://global/skin/tree/folder@2x.png"); + list-style-image: url("chrome://global/skin/tree/folder@2x.png"); } .bookmark-item[container][livemark] { - list-style-image: url("chrome://browser/skin/page-livemarks@2x.png"); + list-style-image: url("chrome://browser/skin/page-livemarks@2x.png"); } .bookmark-item[container][livemark] .bookmark-item { - list-style-image: url("chrome://browser/skin/places/livemark-item.png"); + list-style-image: url("chrome://browser/skin/places/livemark-item.png"); } .bookmark-item[container][query] { - list-style-image: url("chrome://browser/skin/places/query@2x.png"); + list-style-image: url("chrome://browser/skin/places/query@2x.png"); } .bookmark-item[query][tagContainer] { - list-style-image: url("chrome://browser/skin/places/tag@2x.png"); + list-style-image: url("chrome://browser/skin/places/tag@2x.png"); } .bookmark-item[query][dayContainer] { - list-style-image: url("chrome://browser/skin/places/history@2x.png"); + list-style-image: url("chrome://browser/skin/places/history@2x.png"); } .bookmark-item[query][hostContainer] { - list-style-image: url("chrome://global/skin/tree/folder@2x.png"); + list-style-image: url("chrome://global/skin/tree/folder@2x.png"); } .bookmark-item[query][hostContainer][open] { - list-style-image: url("chrome://global/skin/tree/folder@2x.png"); + list-style-image: url("chrome://global/skin/tree/folder@2x.png"); } } @@ -357,7 +381,7 @@ toolbarbutton.bookmark-item > menupopup { @media (min-resolution: 2dppx) { .bookmark-item > .toolbarbutton-icon, .bookmark-item > .menu-iconic-left > .menu-iconic-icon { - image-rendering: -moz-crisp-edges; + image-rendering: -moz-crisp-edges; } } @@ -372,16 +396,16 @@ toolbarbutton.bookmark-item > menupopup { @media (min-resolution: 2dppx) { #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box { - background-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png"); - background-size: 16px; + background-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png"); + background-size: 16px; } .bookmarks-toolbar-customize { - list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important; + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important; } .bookmarks-toolbar-customize > .toolbarbutton-icon { - width: 16px; + width: 16px; } } @@ -395,11 +419,11 @@ toolbarbutton.bookmark-item > menupopup { /* ::::: primary toolbar buttons ::::: */ .toolbarbutton-1 { - list-style-image: url("chrome://browser/skin/Toolbar.png"); + list-style-image: var(--toolbarbutton-image); } toolbar[brighttext] .toolbarbutton-1 { - list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); + list-style-image: var(--toolbarbutton-inverted-image); } .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, @@ -407,136 +431,136 @@ toolbar[brighttext] .toolbarbutton-1 { .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon { - opacity: .4; + opacity: .4; } .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { - list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); } toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { - list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } .toolbarbutton-1 > .toolbarbutton-icon, .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-margin-end: 0; + -moz-margin-end: 0; } toolbar[mode=full] .toolbarbutton-1:not([type=menu-button]) { - -moz-box-orient: vertical; + -moz-box-orient: vertical; } toolbar[mode=full] .toolbarbutton-1, toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { - min-width: 57px; + min-width: 57px; } #nav-bar { - /* force iconsize="small" on this toolbar */ - counter-reset: smallicons; + /* force iconsize="small" on this toolbar */ + counter-reset: smallicons; } @navbarLargeIcons@ .toolbarbutton-1, @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button { - -moz-appearance: none; - border: none; - padding: 0; - background: none; + -moz-appearance: none; + border: none; + padding: 0; + background: none; } @navbarLargeIcons@ .toolbarbutton-1:not([type=menu-button]), @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button, @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { - padding: 5px 2px; - -moz-box-pack: center; + padding: 5px 2px; + -moz-box-pack: center; } @navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) { - padding-left: 5px; - padding-right: 5px; + padding-left: 5px; + padding-right: 5px; } @navbarLargeIcons@ .toolbarbutton-1 > menupopup { - margin-top: -3px; + margin-top: -3px; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button { - -moz-padding-end: 0; + -moz-padding-end: 0; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { - -moz-padding-start: 0; - -moz-box-align: center; + -moz-padding-start: 0; + -moz-box-align: center; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-badge-stack, @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { - padding: 2px 6px; - background: hsla(210,32%,93%,.3) padding-box; - background-image: linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,100%,.1)); - background-clip: padding-box; - border-radius: 2.5px; - border: 1px solid; - border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.2) hsla(210,54%,20%,.2); - box-shadow: 0 1px hsla(0,0%,100%,.05) inset, - 0 1px hsla(210,54%,20%,.05), - 0 0 2px hsla(210,54%,20%,.05); - transition-property: background-image, background-color, border-color, box-shadow; - transition-duration: 150ms; + padding: 2px 6px; + background: var(--toolbarbutton-background-color) padding-box; + background-image: linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,100%,.1)); + background-clip: padding-box; + border-radius: var(--toolbarbutton-border-radius); + border: 1px solid; + border-color: var(--toolbarbutton-border-color) var(--toolbarbutton-border-color) var(--toolbarbutton-border-color); + box-shadow: 0 1px hsla(0,0%,100%,.05) inset, + 0 1px hsla(210,54%,20%,.05), + 0 0 2px hsla(210,54%,20%,.05); + transition-property: background-image, background-color, border-color, box-shadow; + transition-duration: 150ms; } @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack, @navbarLargeIcons@ .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - padding: 3px 7px; + padding: 3px 7px; } @navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ { - -moz-padding-end: 17px; + -moz-padding-end: 17px; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { - -moz-margin-start: -15px; + -moz-margin-start: -15px; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-border-end: none; + -moz-border-end: none; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { - padding: 8px 5px 7px; + padding: 8px 5px 7px; } @navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - content: ""; - display: -moz-box; - width: 1px; - height: 18px; - -moz-margin-end: -1px; - background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); - background-clip: padding-box; - background-position: center; - background-repeat: no-repeat; - background-size: 1px 18px; - box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); + content: ""; + display: -moz-box; + width: 1px; + height: 18px; + -moz-margin-end: -1px; + background-image: linear-gradient(var(--toolbarbutton-border-color) 0, var(--toolbarbutton-border-color) 18px); + background-clip: padding-box; + background-position: center; + background-repeat: no-repeat; + background-size: 1px 18px; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr), @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl), @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @@ -544,56 +568,56 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack, @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon { - background-image: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.5)); - border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.3) hsla(210,54%,20%,.35); - box-shadow: 0 1px hsla(0,0%,100%,.3) inset, - 0 1px hsla(210,54%,20%,.03), - 0 0 2px hsla(210,54%,20%,.1); - transition-property: background-image, background-color, border-color, box-shadow; - transition-duration: 150ms; + background-image: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.5)); + border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.3) hsla(210,54%,20%,.35); + box-shadow: 0 1px hsla(0,0%,100%,.3) inset, + 0 1px hsla(210,54%,20%,.03), + 0 0 2px hsla(210,54%,20%,.1); + transition-property: background-image, background-color, border-color, box-shadow; + transition-duration: 150ms; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):not([open]):not(:active):hover > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon, @conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon { - border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4); - background-color: hsla(210,48%,96%,.75); - box-shadow: 0 0 1px hsla(210,54%,20%,.03), - 0 0 2px hsla(210,54%,20%,.1); + border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4); + background-color: hsla(210,48%,96%,.75); + box-shadow: 0 0 1px hsla(210,54%,20%,.03), + 0 0 2px hsla(210,54%,20%,.1); } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon, @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon, @navbarLargeIcons@ .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack { - background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); - background-color: hsla(210,54%,20%,.15); - border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4); - box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset, - 0 0 1px hsla(210,54%,20%,.2) inset, - /* allows windows-keyhole-forward-clip-path to be used for non-hover as well as hover: */ - 0 1px 0 hsla(210,54%,20%,0), - 0 0 2px hsla(210,54%,20%,0); - text-shadow: none; - transition: none; + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); + background-color: hsla(210,54%,20%,.15); + border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4); + box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset, + 0 0 1px var(--toolbarbutton-border-color) inset, + /* allows osx-keyhole-forward-clip-path to be used for non-hover as well as hover: */ + 0 1px 0 hsla(210,54%,20%,0), + 0 0 2px hsla(210,54%,20%,0); + text-shadow: none; + transition: none; } @navbarLargeIcons@ .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon { - -moz-border-start-color: hsla(210,54%,20%,.35); + -moz-border-start-color: hsla(210,54%,20%,.35); } @navbarLargeIcons@ .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { - background-color: rgba(90%,90%,90%,.4); - transition: background-color .4s; + background-color: rgba(90%,90%,90%,.4); + transition: background-color .4s; } :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1, :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button, .tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down { - -moz-appearance: none; - border-style: none; - padding: 0 3px; + -moz-appearance: none; + border-style: none; + padding: 0 3px; } #TabsToolbar .toolbarbutton-1:not([disabled]):hover, @@ -601,230 +625,231 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover, .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover { - background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)), - linear-gradient(transparent, rgba(0,0,0,.25) 30%), - linear-gradient(transparent, rgba(0,0,0,.25) 30%); - background-position: 1px -1px, 0 -1px, 100% -1px; - background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%; - background-repeat: no-repeat; + background-image: linear-gradient(var(--toolbar-highlight-bottom), var(--toolbar-highlight-top)), + linear-gradient(transparent, rgba(0,0,0,.25) 30%), + linear-gradient(transparent, rgba(0,0,0,.25) 30%); + background-position: 1px -1px, 0 -1px, 100% -1px; + background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%; + background-repeat: no-repeat; } #addon-bar .toolbarbutton-1:not([disabled]):hover, #addon-bar .toolbarbutton-1[open], #addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover { - background-image: linear-gradient(to top, transparent, rgba(0,0,0,.15)), - linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%), - linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%); - background-position: left, left, right; - background-size: auto, 1px 100%, 1px 100%; - background-repeat: no-repeat; + background-image: linear-gradient(to top, transparent, rgba(0,0,0,.15)), + linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%), + linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%); + background-position: left, left, right; + background-size: auto, 1px 100%, 1px 100%; + background-repeat: no-repeat; } /* unified back/forward button */ #back-button { - -moz-image-region: rect(0, 18px, 18px, 0); + -moz-image-region: rect(0, 18px, 18px, 0); } #forward-button { - -moz-image-region: rect(0, 36px, 18px, 18px); + -moz-image-region: rect(0, 36px, 18px, 18px); } #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, #forward-button:-moz-locale-dir(rtl), #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text { - transform: scaleX(-1); + transform: scaleX(-1); } @conditionalForwardWithUrlbar@ { - -moz-box-align: center; + -moz-box-align: center; } @conditionalForwardWithUrlbar@ > #forward-button { - padding: 0; + padding: 0; } @conditionalForwardWithUrlbar@ > #forward-button > menupopup { - margin-top: 1px; + margin-top: 1px; } @conditionalForwardWithUrlbar@ > #forward-button > .toolbarbutton-icon { - /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */ - clip-path: url(chrome://browser/content/browser.xul#osx-keyhole-forward-clip-path); - -moz-margin-start: -9px !important; - border-left-style: none; - border-radius: 0; - padding-left: 7px; - padding-right: 3px; + /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */ + clip-path: url(chrome://browser/content/browser.xul#osx-keyhole-forward-clip-path); + -moz-margin-start: -9px !important; + border-left-style: none; + border-radius: 0; + padding-left: 7px; + padding-right: 3px; } @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button { - transition: opacity @forwardTransitionLength@ ease-out; + transition: opacity @forwardTransitionLength@ ease-out; } @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] { - /* opacity: 0; */ + /* opacity: 0; */ } @conditionalForwardWithUrlbar@ > #back-button { - -moz-image-region: rect(18px, 20px, 38px, 0); - padding-top: 3px; - padding-bottom: 3px; - -moz-padding-start: 5px; - -moz-padding-end: 0; - position: relative; - z-index: 1; - border-radius: 0 10000px 10000px 0; + -moz-image-region: rect(18px, 20px, 38px, 0); + padding-top: 3px; + padding-bottom: 3px; + -moz-padding-start: 5px; + -moz-padding-end: 0; + position: relative; + z-index: 1; + border-radius: 0 10000px 10000px 0; } @conditionalForwardWithUrlbar@ > #back-button:-moz-locale-dir(rtl) { - border-radius: 10000px 0 0 10000px; + border-radius: 10000px 0 0 10000px; } @conditionalForwardWithUrlbar@ > #back-button > menupopup { - margin-top: -1px; + margin-top: -1px; } @conditionalForwardWithUrlbar@ > #back-button > .toolbarbutton-icon { - border-radius: 10000px; - padding: 5px; - border: none; - background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(210,54%,20%,.25), - 0 1px 0 hsla(210,54%,20%,.35); - transition-property: background-color, box-shadow; - transition-duration: 250ms; + border-radius: 10000px; + padding: 5px; + border: none; + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(210,54%,20%,.25), + 0 1px 0 hsla(210,54%,20%,.35); + transition-property: background-color, box-shadow; + transition-duration: 250ms; } @conditionalForwardWithUrlbar@ > #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { - background-color: hsla(210,48%,96%,.75); - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(210,54%,20%,.3), - 0 1px 0 hsla(210,54%,20%,.4), - 0 0 4px hsla(210,54%,20%,.2); + background-color: hsla(210,48%,96%,.75); + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(210,54%,20%,.3), + 0 1px 0 hsla(210,54%,20%,.4), + 0 0 4px var(--toolbarbutton-border-color); } @conditionalForwardWithUrlbar@ > #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon, @conditionalForwardWithUrlbar@ > #back-button[open="true"] > .toolbarbutton-icon { - background-color: hsla(210,54%,20%,.15); - box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset, - 0 0 1px hsla(210,54%,20%,.2) inset, - 0 0 0 1px hsla(210,54%,20%,.4), - 0 1px 0 hsla(210,54%,20%,.2); - transition: none; + background-color: hsla(210,54%,20%,.15); + box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset, + 0 0 1px var(--toolbarbutton-border-color) inset, + 0 0 0 1px hsla(210,54%,20%,.4), + 0 1px 0 var(--toolbarbutton-border-color); + transition: none; } @conditionalForwardWithUrlbar@ > #back-button[disabled] > .toolbarbutton-icon { - box-shadow: 0 0 0 1px hsla(210,54%,20%,.55), - 0 1px 0 hsla(210,54%,20%,.65); - transition: none; + box-shadow: 0 0 0 1px hsla(210,54%,20%,.55), + 0 1px 0 hsla(210,54%,20%,.65); + transition: none; } .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { - list-style-image: url("chrome://browser/skin/menu-back.png") !important; + list-style-image: url("chrome://browser/skin/menu-back.png") !important; } .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { - list-style-image: url("chrome://browser/skin/menu-forward.png") !important; + list-style-image: url("chrome://browser/skin/menu-forward.png") !important; } #stop-button { - -moz-image-region: rect(0, 54px, 18px, 36px); + -moz-image-region: rect(0, 54px, 18px, 36px); } #reload-button { - -moz-image-region: rect(0, 72px, 18px, 54px); + -moz-image-region: rect(0, 72px, 18px, 54px); } #home-button.bookmark-item { - list-style-image: url("chrome://browser/skin/Toolbar.png"); + list-style-image: var(--toolbarbutton-image); } + toolbar[brighttext] #home-button.bookmark-item { - list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); + list-style-image: var(--toolbarbutton-inverted-image); } #home-button { - -moz-image-region: rect(0, 90px, 18px, 72px); + -moz-image-region: rect(0, 90px, 18px, 72px); } #downloads-button { - -moz-image-region: rect(0, 108px, 18px, 90px); + -moz-image-region: rect(0, 108px, 18px, 90px); } #history-button, #history-menu-button { - -moz-image-region: rect(0, 126px, 18px, 108px); + -moz-image-region: rect(0, 126px, 18px, 108px); } #bookmarks-button, #bookmarks-menu-button { - -moz-image-region: rect(0, 144px, 18px, 126px); + -moz-image-region: rect(0, 144px, 18px, 126px); } #bookmarks-menu-button.bookmark-item { - list-style-image: url("chrome://browser/skin/Toolbar.png"); + list-style-image: var(--toolbarbutton-image); } toolbar[brighttext] #bookmarks-menu-button.bookmark-item { - list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); + list-style-image: var(--toolbarbutton-inverted-image); } #print-button { - -moz-image-region: rect(0, 162px, 18px, 144px); + -moz-image-region: rect(0, 162px, 18px, 144px); } #new-tab-button { - -moz-image-region: rect(0, 180px, 18px, 162px); + -moz-image-region: rect(0, 180px, 18px, 162px); } #new-window-button { - -moz-image-region: rect(0, 198px, 18px, 180px); + -moz-image-region: rect(0, 198px, 18px, 180px); } #cut-button { - -moz-image-region: rect(0, 216px, 18px, 198px); + -moz-image-region: rect(0, 216px, 18px, 198px); } #copy-button { - -moz-image-region: rect(0, 234px, 18px, 216px); + -moz-image-region: rect(0, 234px, 18px, 216px); } #paste-button { - -moz-image-region: rect(0, 252px, 18px, 234px); + -moz-image-region: rect(0, 252px, 18px, 234px); } #fullscreen-button { - -moz-image-region: rect(0, 270px, 18px, 252px); + -moz-image-region: rect(0, 270px, 18px, 252px); } #zoom-out-button { - -moz-image-region: rect(0, 288px, 18px, 270px); + -moz-image-region: rect(0, 288px, 18px, 270px); } #zoom-in-button { - -moz-image-region: rect(0, 306px, 18px, 288px); + -moz-image-region: rect(0, 306px, 18px, 288px); } #sync-button { - -moz-image-region: rect(0, 324px, 18px, 306px); + -moz-image-region: rect(0, 324px, 18px, 306px); } #sync-button[status="active"] { - list-style-image: url("chrome://browser/skin/sync-throbber.png"); - -moz-image-region: rect(0, 18px, 18px, 0); + list-style-image: url("chrome://browser/skin/sync-throbber.png"); + -moz-image-region: rect(0, 18px, 18px, 0); } #feed-button { - -moz-image-region: rect(0, 342px, 18px, 324px); + -moz-image-region: rect(0, 342px, 18px, 324px); } %ifdef MOZ_WEBRTC #webrtc-status-button { - -moz-image-region: rect(0, 360px, 18px, 342px); + -moz-image-region: rect(0, 360px, 18px, 342px); } %endif @@ -832,211 +857,211 @@ toolbar[brighttext] #bookmarks-menu-button.bookmark-item { #urlbar, .searchbar-textbox { - -moz-appearance: none; - margin: 1px 3px; - padding: 0; - background-clip: padding-box; - border: 1px solid ThreeDShadow; - border-radius: 2px; + -moz-appearance: none; + margin: 1px 3px; + padding: 0; + background-clip: padding-box; + border: 1px solid ThreeDShadow; + border-radius: 2px; } #urlbar { - width: 7em; - -moz-padding-end: 2px; + width: 7em; + -moz-padding-end: 2px; } @media (-moz-mac-lion-theme) { - #urlbar, - .searchbar-textbox { - @navbarTextboxCustomBorder@ - } + #urlbar, + .searchbar-textbox { + @navbarTextboxCustomBorder@ + } } #urlbar:-moz-lwtheme, .searchbar-textbox:-moz-lwtheme { - background-color: rgba(255,255,255,.8); - @navbarTextboxCustomBorder@ - color: black; + background-color: rgba(255,255,255,.8); + @navbarTextboxCustomBorder@ + color: black; } @conditionalForwardWithUrlbar@ + #urlbar-container { - padding-left: @conditionalForwardWithUrlbarWidth@px; - -moz-margin-start: -@conditionalForwardWithUrlbarWidth@px; - position: relative; - pointer-events: none; + padding-left: @conditionalForwardWithUrlbarWidth@px; + -moz-margin-start: -@conditionalForwardWithUrlbarWidth@px; + position: relative; + pointer-events: none; } @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar { - -moz-border-start: none; - margin-left: 0; - pointer-events: all; + -moz-border-start: none; + margin-left: 0; + pointer-events: all; } @conditionalForwardWithUrlbar@:not([switchingtabs]) + #urlbar-container > #urlbar { - transition: margin-left @forwardTransitionLength@ ease-out; + transition: margin-left @forwardTransitionLength@ ease-out; } @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container { - clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path"); + clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path"); } @conditionalForwardWithUrlbar@ + #urlbar-container:-moz-locale-dir(rtl), @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) { - /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */ - transform: scaleX(-1); + /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */ + transform: scaleX(-1); } html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder { - opacity: 1.0; - color: #777; + opacity: 1.0; + color: #777; } #urlbar:-moz-lwtheme[focused="true"], .searchbar-textbox:-moz-lwtheme[focused="true"] { - background-color: white; + background-color: white; } #urlbar-container { - -moz-box-orient: horizontal; - -moz-box-align: stretch; + -moz-box-orient: horizontal; + -moz-box-align: stretch; } .urlbar-textbox-container { - -moz-box-align: stretch; + -moz-box-align: stretch; } .urlbar-input-box { - -moz-margin-start: 0; - min-width: 4em; + -moz-margin-start: 0; + min-width: 4em; } #urlbar-icons { - -moz-box-align: center; + -moz-box-align: center; } .urlbar-icon { - padding: 0 3px; + padding: 0 3px; } .searchbar-engine-button, .search-go-container { - padding: 2px 2px; + padding: 2px 2px; } .urlbar-icon:hover { - background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.3), hsla(200,100%,70%,0)); + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.3), hsla(200,100%,70%,0)); } .urlbar-icon[open="true"], .urlbar-icon:hover:active { - background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.1), hsla(200,100%,70%,0)); + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.1), hsla(200,100%,70%,0)); } #urlbar-search-splitter { - min-width: 6px; - -moz-margin-start: -3px; - border: none; - background: transparent; + min-width: 6px; + -moz-margin-start: -3px; + border: none; + background: transparent; } #urlbar-search-splitter + #urlbar-container > #urlbar , #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { - -moz-margin-start: 0; + -moz-margin-start: 0; } #urlbar-display-box { - -moz-border-end: 1px solid #AAA; - -moz-margin-end: 3px; + -moz-border-end: 1px solid #AAA; + -moz-margin-end: 3px; } #urlbar-display { - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 0; - color: GrayText; + margin-top: 0; + margin-bottom: 0; + -moz-margin-start: 0; + color: GrayText; } /* identity box */ #identity-box { - padding: 2px; - font-size: .9em; + padding: 2px; + font-size: .9em; } #identity-box:-moz-locale-dir(ltr) { - border-top-left-radius: 1.5px; - border-bottom-left-radius: 1.5px; + 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; + border-top-right-radius: 1.5px; + border-bottom-right-radius: 1.5px; } #notification-popup-box:not([hidden]) + #identity-box { - -moz-padding-start: 10px; - border-radius: 0; + -moz-padding-start: 10px; + border-radius: 0; } @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar > #identity-box { - border-radius: 0; + border-radius: 0; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: hsl(92,100%,30%); - -moz-margin-end: 4px; - background-image: -moz-linear-gradient(hsla(92,81%,16%,0), - hsla(92,81%,16%,.08) 25%, - hsla(92,81%,16%,.08) 75%, - hsla(92,81%,16%,0)); - background-position: right; - background-repeat: no-repeat; + color: hsl(92,100%,30%); + -moz-margin-end: 4px; + background-image: -moz-linear-gradient(hsla(92,81%,16%,0), + hsla(92,81%,16%,.08) 25%, + hsla(92,81%,16%,.08) 75%, + hsla(92,81%,16%,0)); + background-position: right; + background-repeat: no-repeat; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain { - color: rgb(0,79,168); - -moz-margin-end: 4px; - background-image: -moz-linear-gradient(rgba(0,79,168,0), - rgba(0,79,168,.08) 25%, - rgba(0,79,168,.08) 75%, - rgba(0,79,168,0)); - background-position: right; - background-repeat: no-repeat; + color: rgb(0,79,168); + -moz-margin-end: 4px; + background-image: -moz-linear-gradient(rgba(0,79,168,0), + rgba(0,79,168,.08) 25%, + rgba(0,79,168,.08) 75%, + rgba(0,79,168,0)); + background-position: right; + background-repeat: no-repeat; } #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; + background-position: left; } #identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: #fff; - box-shadow: inset 0 0 2px rgb(0,168,0); + background-color: #fff; + box-shadow: inset 0 0 2px rgb(0,168,0); } #identity-box.verifiedDomain:not(:-moz-lwtheme) { - background-color: rgb(224,234,247); - box-shadow: inset 0 0 2px rgb(0,79,168); + background-color: rgb(224,234,247); + box-shadow: inset 0 0 2px rgb(0,79,168); } #identity-box:-moz-focusring { - outline: 1px dotted #000; - outline-offset: -3px; + outline: 1px dotted #000; + outline-offset: -3px; } #identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; + -moz-padding-start: 2px; + -moz-padding-end: 5px; } /* Address bar shading for SSL */ @@ -1073,282 +1098,282 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, /* Location bar dropmarker */ .urlbar-history-dropmarker { - -moz-appearance: none; - padding: 0 3px; - background-color: transparent; - border: none; - width: auto; - list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png"); - -moz-image-region: rect(0px, 11px, 14px, 0px); + -moz-appearance: none; + padding: 0 3px; + background-color: transparent; + border: none; + width: auto; + list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png"); + -moz-image-region: rect(0px, 11px, 14px, 0px); } .urlbar-history-dropmarker:hover { - background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)); - -moz-image-region: rect(0px, 22px, 14px, 11px); + background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)); + -moz-image-region: rect(0px, 22px, 14px, 11px); } .urlbar-history-dropmarker:hover:active, .urlbar-history-dropmarker[open="true"] { - background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.1), hsla(205,100%,70%,0)); - -moz-image-region: rect(0px, 33px, 14px, 22px); + background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.1), hsla(205,100%,70%,0)); + -moz-image-region: rect(0px, 33px, 14px, 22px); } /* page proxy icon */ #page-proxy-favicon { - width: 16px; - height: 16px; - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 2px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); - -moz-image-region: rect(0, 16px, 16px, 0); + width: 16px; + height: 16px; + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 2px; + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); + -moz-image-region: rect(0, 16px, 16px, 0); } @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar > #identity-box > #page-proxy-favicon { - -moz-margin-end: 1px; + -moz-margin-end: 1px; } /* Since we already have a padlock, always use the generic icon until the favicon loads .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } */ #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); + -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); + -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; + opacity: 0.3; } /* autocomplete */ #treecolAutoCompleteImage { - max-width: 36px; + max-width: 36px; } .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/bookmark.png"); - -moz-image-region: rect(0px 48px 16px 32px); - width: 16px; - height: 16px; + list-style-image: url("chrome://browser/skin/places/bookmark.png"); + -moz-image-region: rect(0px 48px 16px 32px); + width: 16px; + height: 16px; } .ac-result-type-keyword, .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { - list-style-image: url(chrome://global/skin/icons/search-textbox.png); - margin: 2px; - width: 12px; - height: 12px; + list-style-image: url(chrome://global/skin/icons/search-textbox.png); + margin: 2px; + width: 12px; + height: 12px; } .ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/tag.png"); - width: 16px; - height: 16px; + list-style-image: url("chrome://browser/skin/places/tag.png"); + width: 16px; + height: 16px; } .ac-comment { - font-size: 1.06em; + font-size: 1.06em; } .ac-extra > .ac-comment { - font-size: 1em; + font-size: 1em; } .ac-url-text, .ac-action-text { - font-size: 1em; - color: -moz-nativehyperlinktext; + font-size: 1em; + color: -moz-nativehyperlinktext; } @media (-moz-mac-lion-theme) { - .ac-url-text:not([selected="true"]), - .ac-action-text:not([selected="true"]) { - color: #008800; - } + .ac-url-text:not([selected="true"]), + .ac-action-text:not([selected="true"]) { + color: #008800; + } } richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - -moz-image-region: rect(0, 16px, 11px, 0); - padding: 0 3px; + list-style-image: url("chrome://browser/skin/actionicon-tab.png"); + -moz-image-region: rect(0, 16px, 11px, 0); + padding: 0 3px; } richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon { - -moz-image-region: rect(11px, 16px, 22px, 0); + -moz-image-region: rect(11px, 16px, 22px, 0); } .ac-comment[selected="true"], .ac-url-text[selected="true"], .ac-action-text[selected="true"] { - color: inherit !important; + color: inherit !important; } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { - color: GrayText; + color: GrayText; } .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { - color: GrayText; - font-size: smaller; + color: GrayText; + font-size: smaller; } .autocomplete-treebody::-moz-tree-cell(suggesthint) { - border-top: 1px solid GrayText; + border-top: 1px solid GrayText; } /* combined go/reload/stop button in location bar */ #go-button, #urlbar > toolbarbutton { - -moz-appearance: none; - padding: 0 2px; - background-origin: border-box; - border: none; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + -moz-appearance: none; + padding: 0 2px; + background-origin: border-box; + border: none; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } #go-button { - padding: 0 3px; + padding: 0 3px; } #urlbar-reload-button { - -moz-image-region: rect(0, 14px, 14px, 0); + -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0)); - -moz-image-region: rect(14px, 14px, 28px, 0); + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0)); + -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0)); - -moz-image-region: rect(28px, 14px, 42px, 0); + background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0)); + -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { - transform: scaleX(-1); + transform: scaleX(-1); } #go-button, #urlbar-go-button { - -moz-image-region: rect(0, 42px, 14px, 28px); + -moz-image-region: rect(0, 42px, 14px, 28px); } #go-button:hover, #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0)); - -moz-image-region: rect(14px, 42px, 28px, 28px); + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0)); + -moz-image-region: rect(14px, 42px, 28px, 28px); } #go-button:hover:active, #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0)); - -moz-image-region: rect(28px, 42px, 42px, 28px); + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0)); + -moz-image-region: rect(28px, 42px, 42px, 28px); } #go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { - transform: scaleX(-1); + transform: scaleX(-1); } #urlbar-stop-button { - -moz-image-region: rect(0, 28px, 14px, 14px); + -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0)); - -moz-image-region: rect(14px, 28px, 28px, 14px); + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0)); + -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0)); - -moz-image-region: rect(28px, 28px, 42px, 14px); + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0)); + -moz-image-region: rect(28px, 28px, 42px, 14px); } /* popup blocker button */ #page-report-button { - list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); + -moz-image-region: rect(0, 16px, 16px, 0); } #page-report-button:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); + -moz-image-region: rect(0, 32px, 16px, 16px); } #page-report-button:hover:active, #page-report-button[open="true"] { - -moz-image-region: rect(0, 48px, 16px, 32px); + -moz-image-region: rect(0, 48px, 16px, 32px); } /* star button */ #star-button { - list-style-image: url("chrome://browser/skin/places/bookmark.png"); - -moz-image-region: rect(0px 16px 16px 0px); + list-style-image: url("chrome://browser/skin/places/bookmark.png"); + -moz-image-region: rect(0px 16px 16px 0px); } #star-button:hover { - background-image: radial-gradient(circle closest-side, hsla(45,100%,73%,.3), hsla(45,100%,73%,0)); - -moz-image-region: rect(0px 32px 16px 16px); + background-image: radial-gradient(circle closest-side, hsla(45,100%,73%,.3), hsla(45,100%,73%,0)); + -moz-image-region: rect(0px 32px 16px 16px); } #star-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(45,100%,73%,.1), hsla(45,100%,73%,0)); - -moz-image-region: rect(0px 48px 16px 32px); + background-image: radial-gradient(circle closest-side, hsla(45,100%,73%,.1), hsla(45,100%,73%,0)); + -moz-image-region: rect(0px 48px 16px 32px); } #star-button[starred] { - list-style-image: url("chrome://browser/skin/places/editBookmark.png"); + list-style-image: url("chrome://browser/skin/places/editBookmark.png"); } /* bookmarking panel */ #editBookmarkPanelStarIcon { - list-style-image: url("chrome://browser/skin/places/starred48.png"); - width: 48px; - height: 48px; + list-style-image: url("chrome://browser/skin/places/starred48.png"); + width: 48px; + height: 48px; } #editBookmarkPanelStarIcon[unstarred] { - list-style-image: url("chrome://browser/skin/places/unstarred48.png"); + list-style-image: url("chrome://browser/skin/places/unstarred48.png"); } #editBookmarkPanelTitle { - font-size: 130%; + font-size: 130%; } #editBookmarkPanelHeader, #editBookmarkPanelContent { - margin-bottom: .5em; + margin-bottom: .5em; } /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ #editBMPanel_folderTree { - min-width: 27em; + min-width: 27em; } /* BOOKMARKING PANEL */ @@ -1385,7 +1410,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- border-radius: 3px; border: 1px solid rgba(0,0,0,.3) !important; box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05), - 0 1px rgba(255,255,255,.3); + 0 1px rgba(255,255,255,.3); margin: 0; padding: 3px 6px; } @@ -1440,8 +1465,8 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- border-radius: 0 0 3px 3px; border: 1px solid #a5a5a5; box-shadow: inset 0 1px rgba(255,255,255,.8), - inset 0 0 1px rgba(255,255, 255,.25), - 0 1px rgba(255,255,255,.3); + inset 0 0 1px rgba(255,255, 255,.25), + 0 1px rgba(255,255,255,.3); margin: 0; padding: 0; height: 20px; @@ -1519,7 +1544,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- border-radius: 3px; border: 1px solid rgba(0,0,0,.3); box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05), - 0 1px rgba(255,255,255,.3); + 0 1px rgba(255,255,255,.3); margin: 0; } @@ -1580,16 +1605,16 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- @media (min-resolution: 2dppx) { #editBookmarkPanel .expander-up { - list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png"); + list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png"); } #editBookmarkPanel .expander-down { - list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png"); + list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png"); } #editBookmarkPanel .expander-up > .button-box > .button-icon, #editBookmarkPanel .expander-down > .button-box > .button-icon { - width: 9px; + width: 9px; } } @@ -1605,40 +1630,40 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- /* ::::: content area ::::: */ #sidebar { - background-color: Window; + background-color: Window; } #sidebar-title { - -moz-padding-start: 0px; + -moz-padding-start: 0px; } /* ::::: throbber ::::: */ #navigator-throbber { - width: 16px; - min-height: 16px; - margin: 0 3px; + width: 16px; + min-height: 16px; + margin: 0 3px; } #navigator-throbber[busy="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading_16.png"); } #navigator-throbber, #wrapper-navigator-throbber > #navigator-throbber { - list-style-image: url("chrome://global/skin/icons/notloading_16.png"); + list-style-image: url("chrome://global/skin/icons/notloading_16.png"); } /* Tabstrip */ #TabsToolbar { - min-height: 0; - padding: 0; + min-height: 0; + padding: 0; } #TabsToolbar:not(:-moz-lwtheme), #TabsToolbar[tabsontop=false] { - background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%); + background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%); } /* When the tab bar is collapsed, show a 1px border in its place. */ @@ -1653,50 +1678,50 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- } @media (-moz-mac-lion-theme) { - #main-window[sizemode=normal] #TabsToolbar { - padding-left: 2px; - padding-right: 2px; - } + #main-window[sizemode=normal] #TabsToolbar { + padding-left: 2px; + padding-right: 2px; + } } /* remove 5 pixel border on left and right of browser screen */ .tabbrowser-tabbox { - margin: 0; + margin: 0; } .tabbrowser-tab, .tabs-newtab-button { - -moz-appearance: none; - background: @toolbarShadowOnTab@, @bgTabTexture@, - linear-gradient(-moz-dialog, -moz-dialog); - background-clip: padding-box; - padding: 3px 1px 4px; - /* Setting a transparent outer border allows us to have a 1px gap - between the tabs and the top edge of the screen, even when the - tabs have a top margin of 0, which is important for Fitts' law - compliance */ - border: 2px solid; - border-bottom: none; - border-radius: 6px 6px 0px 0px; - -moz-border-top-colors: transparent #929292; - -moz-border-left-colors: transparent #929292; - -moz-border-right-colors: transparent #929292; - /* Hide the transparent top border by default */ - margin-top: -1px; - /* Reduce the gap between the tabs */ - -moz-margin-start: -1px; - box-shadow: inset 0.5px 1px 1px rgba(255,255,255,.7); + -moz-appearance: none; + background: @toolbarShadowOnTab@, var(--tab-background), + linear-gradient(var(--toolbar-custom-color), var(--toolbar-custom-color)); + background-clip: padding-box; + padding: 3px 1px 4px; + /* Setting a transparent outer border allows us to have a 1px gap + between the tabs and the top edge of the screen, even when the + tabs have a top margin of 0, which is important for Fitts' law + compliance */ + border: 1.6px solid; + border-bottom: none; + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px; + -moz-border-top-colors: transparent #929292; + -moz-border-left-colors: transparent #929292; + -moz-border-right-colors: transparent #929292; + /* Hide the transparent top border by default */ + margin-top: -1px; + /* Reduce the gap between the tabs */ + -moz-margin-start: -1px; + box-shadow: var(--tab-box-shadow); } .tabbrowser-tab { - -moz-padding-end: 3px; + -moz-padding-end: 3px; } /* Override the default (globally-set) tab width values; increase by 2px to compensate for the transparent outer border of the tabs */ .tabbrowser-tab:not([pinned]) { - max-width: 252px; - min-width: 102px; + max-width: 252px; + min-width: 102px; } /* When the tabs are on top and the window is maximized or in full- @@ -1706,32 +1731,32 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- #main-window[sizemode="maximized"][tabsontop=true] .tabs-newtab-button, #main-window[sizemode="fullscreen"][tabsontop=true] .tabbrowser-tab, #main-window[sizemode="fullscreen"][tabsontop=true] .tabs-newtab-button { - margin-top: 0px; + margin-top: 0px; } /* make the tab text colors match those of the Windows client */ @media (-moz-mac-lion-theme) { - tab { - text-shadow: none; - color: black !important; - } + tab { + text-shadow: none; + color: black !important; + } } .tabbrowser-tab:hover, .tabs-newtab-button:hover { - background-image: @toolbarShadowOnTab@, @bgTabTextureHover@, - linear-gradient(-moz-dialog, -moz-dialog); + background-image: @toolbarShadowOnTab@, var(--tab-background-hover), + linear-gradient(var(--toolbar-custom-color), var(--toolbar-custom-color)); } .tabbrowser-tab[selected="true"] { - background-image: linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%), - linear-gradient(-moz-dialog, -moz-dialog); + background-image: linear-gradient(var(--tab-selected-highlight), var(--toolbar-highlight-top) 50%), + linear-gradient(var(--toolbar-custom-color), var(--toolbar-custom-color)); } #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) { - background-image: @toolbarShadowOnTab@, - linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%), - linear-gradient(-moz-dialog, -moz-dialog); + background-image: @toolbarShadowOnTab@, + linear-gradient(var(--tab-selected-highlight), var(--toolbar-highlight-top) 50%), + linear-gradient(var(--toolbar-custom-color), var(--toolbar-custom-color)); } .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) { @@ -1747,100 +1772,100 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- /* Remove highlight fuzz on dark themes */ .tabbrowser-tab:-moz-lwtheme-brighttext, .tabs-newtab-button:-moz-lwtheme-brighttext { - box-shadow:none; - -moz-border-top-colors: transparent #707070; - -moz-border-left-colors: transparent #707070; - -moz-border-right-colors: transparent #707070; + box-shadow:none; + -moz-border-top-colors: transparent #707070; + -moz-border-left-colors: transparent #707070; + -moz-border-right-colors: transparent #707070; } .tabbrowser-tab[selected="true"]:-moz-lwtheme { - background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.8) 50%); + background-image: linear-gradient(var(--tab-selected-highlight), var(--toolbar-highlight-top) 50%); } .tabbrowser-tab[selected="true"]:-moz-lwtheme-brighttext { - background-image: linear-gradient(rgba(128,128,128,.9), rgba(32,32,32,.9) 50%, rgba(32,32,32,.9) 80%, rgba(32,32,32,.8) 100%); - -moz-border-top-colors: transparent #D0D0D0; - -moz-border-left-colors: transparent #D0D0D0; - -moz-border-right-colors: transparent #D0D0D0; + background-image: linear-gradient(rgba(128,128,128,.9), rgba(32,32,32,.9) 50%, rgba(32,32,32,.9) 80%, var(--toolbar-highlight-top) 100%); + -moz-border-top-colors: transparent #D0D0D0; + -moz-border-left-colors: transparent #D0D0D0; + -moz-border-right-colors: transparent #D0D0D0; } .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]), .tabs-newtab-button:-moz-lwtheme-brighttext { - background-image: linear-gradient(hsla(0,0%,25%,.4), hsla(0,0%,15%,.6) 80%); + background-image: linear-gradient(hsla(0,0%,25%,.4), hsla(0,0%,15%,.6) 80%); } .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover, .tabs-newtab-button:-moz-lwtheme-brighttext:hover { - background-image: linear-gradient(hsla(0,0%,60%,.4), hsla(0,0%,10%,.8) 80%); + background-image: linear-gradient(hsla(0,0%,60%,.4), hsla(0,0%,10%,.8) 80%); } .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]), .tabs-newtab-button:-moz-lwtheme-darktext { - background-image: linear-gradient(hsla(0,0%,75%,.4), hsla(0,0%,85%,.6) 80%); + background-image: linear-gradient(hsla(0,0%,75%,.4), hsla(0,0%,85%,.6) 80%); } .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover, .tabs-newtab-button:-moz-lwtheme-darktext:hover { - background-image: linear-gradient(hsla(0,0%,60%,.4), hsla(0,0%,90%,.8) 80%); + background-image: linear-gradient(hsla(0,0%,60%,.4), hsla(0,0%,90%,.8) 80%); } .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) { - background-image: radial-gradient(circle farthest-corner at 50% 3px, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25)); + background-image: radial-gradient(circle farthest-corner at 50% 3px, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25)); } .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover { - background-image: linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 80%), - radial-gradient(circle farthest-corner at 50% 3px, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25)); + background-image: linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 80%), + radial-gradient(circle farthest-corner at 50% 3px, rgba(255,255,255,1) 3%, rgba(186,221,251,.75) 40%, rgba(127,179,255,.5) 80%, rgba(127,179,255,.25)); } .tab-throbber, .tab-icon-image { - width: 16px; - height: 16px; - list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); - -moz-margin-start: 2px; - -moz-margin-end: 3px; + width: 16px; + height: 16px; + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); + -moz-margin-start: 2px; + -moz-margin-end: 3px; } .tab-throbber { - list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); + list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } .tab-throbber[progress] { - list-style-image: url("chrome://browser/skin/tabbrowser/loading.png"); + list-style-image: url("chrome://browser/skin/tabbrowser/loading.png"); } .tab-throbber[pinned], .tab-icon-image[pinned] { - -moz-margin-start: 5px; - -moz-margin-end: 5px; + -moz-margin-start: 5px; + -moz-margin-end: 5px; } /* tabbrowser-tab focus ring */ .tabbrowser-tab:focus > .tab-stack { - outline: 1px dotted; + outline: 1px dotted; } /* Tab DnD indicator */ .tab-drop-indicator { - list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); - margin-bottom: -11px; + list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); + margin-bottom: -11px; } /* Tab close button */ .tab-close-button { - -moz-appearance: none; - border: none; - padding: 0px; + -moz-appearance: none; + border: none; + padding: 0px; } .tab-close-button:-moz-lwtheme-brighttext { - list-style-image: url("chrome://global/skin/icons/close-inverted.png"); + list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } @media (min-resolution: 2dppx) { - .tab-close-button:-moz-lwtheme-brighttext { - list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); - } + .tab-close-button:-moz-lwtheme-brighttext { + list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); + } } /* Tab sound indicator */ @@ -1931,280 +1956,280 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- .tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png"); - margin: 0; - padding-right: 2px; - border-right: 2px solid transparent; - background-origin: border-box; + list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png"); + margin: 0; + padding-right: 2px; + border-right: 2px solid transparent; + background-origin: border-box; } toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-up, toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-down { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png); + list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png); } .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled], .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] { - opacity: .4; + opacity: .4; } .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl), .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) { - transform: scaleX(-1); + transform: scaleX(-1); } .tabbrowser-arrowscrollbox > .scrollbutton-down { - transition: 1s background-color ease-out; + transition: 1s background-color ease-out; } .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { - background-color: Highlight; - transition: none; + background-color: Highlight; + transition: none; } .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]), .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) { - border-width: 0 2px 0 0; - border-style: solid; - border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; + border-width: 0 2px 0 0; + border-style: solid; + border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; } .tabs-newtab-button > .toolbarbutton-icon { - margin-top: -1px; - margin-bottom: -1px; + margin-top: -1px; + margin-bottom: -1px; } .tabs-newtab-button, #TabsToolbar > #new-tab-button, #TabsToolbar > toolbarpaletteitem > #new-tab-button { - list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png); - -moz-image-region: auto; + list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png); + -moz-image-region: auto; } .tabs-newtab-button:-moz-lwtheme-brighttext, toolbar[brighttext] #TabsToolbar > #new-tab-button, toolbar[brighttext] #TabsToolbar > toolbarpaletteitem > #new-tab-button { - list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png); + list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png); } .tabs-newtab-button { - width: 28px; + width: 28px; } #TabsToolbar > #new-tab-button { - width: 26px; + width: 26px; } #alltabs-button { - list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.png"); - -moz-image-region: rect(0, 14px, 16px, 0); + list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.png"); + -moz-image-region: rect(0, 14px, 16px, 0); } #alltabs-button[type="menu"] { - list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); - -moz-image-region: auto; + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); + -moz-image-region: auto; } toolbar[brighttext] #alltabs-button { - list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-inverted.png"); + list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-inverted.png"); } toolbar[brighttext] #alltabs-button[type="menu"] { - list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } #alltabs-button[type="menu"] > .toolbarbutton-icon { - margin: 0 2px; + margin: 0 2px; } #alltabs-button[type="menu"] > .toolbarbutton-menu-dropmarker { - display: none; + display: none; } /* All tabs menupopup */ .alltabs-item > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } .alltabs-item[selected="true"] { - font-weight: bold; + font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading_16.png"); } .alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; + /* box-shadow instead of background-color to work around native styling */ + box-shadow: inset -5px 0 ThreeDShadow; } /* Tabstrip close button */ .tabs-closebutton { - -moz-appearance: none; - padding: 4px 2px; - margin: 0px; - border: none; + -moz-appearance: none; + padding: 4px 2px; + margin: 0px; + border: none; } toolbar[brighttext] .tabs-closebutton { - list-style-image: url("chrome://global/skin/icons/close-inverted.png"); + list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } @media (min-resolution: 2dppx) { - toolbar[brighttext] .tabs-closebutton { - list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); - } + toolbar[brighttext] .tabs-closebutton { + list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); + } } .tabs-closebutton > .toolbarbutton-icon { - -moz-margin-end: 0px !important; - -moz-padding-end: 2px !important; - -moz-padding-start: 2px !important; + -moz-margin-end: 0px !important; + -moz-padding-end: 2px !important; + -moz-padding-start: 2px !important; } #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); - -moz-margin-end: 4px; + list-style-image: url("chrome://global/skin/icons/loading_16.png"); + -moz-margin-end: 4px; } /* Pale Moon: Feed icon */ #ub-feed-button, #ub-feed-button > .button-box, #ub-feed-button:hover:active > .button-box { - padding: 0px; - margin: 0px; - border: 0px; - background-color: transparent !important; + padding: 0px; + margin: 0px; + border: 0px; + background-color: transparent !important; } #ub-feed-button { - -moz-appearance: none; - min-width: 0px; - list-style-image: url("chrome://browser/skin/feeds/feed-icons-16.png"); - -moz-image-region: rect(0px 16px 16px 0px); + -moz-appearance: none; + min-width: 0px; + list-style-image: url("chrome://browser/skin/feeds/feed-icons-16.png"); + -moz-image-region: rect(0px 16px 16px 0px); } #ub-feed-button:hover { - -moz-image-region: rect(0px 32px 16px 16px); + -moz-image-region: rect(0px 32px 16px 16px); } #ub-feed-button[open="true"], #ub-feed-button:hover:active { - -moz-image-region: rect(0px 48px 16px 32px); + -moz-image-region: rect(0px 48px 16px 32px); } /* Bookmarks toolbar */ #PlacesToolbarDropIndicator { - list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); + list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); } toolbarbutton.bookmark-item[dragover="true"][open="true"] { - -moz-appearance: none; - background: Highlight !important; - color: HighlightText !important; + -moz-appearance: none; + background: Highlight !important; + color: HighlightText !important; } /* rules for menupopup drop indicators */ .menupopup-drop-indicator-bar { - position: relative; - /* these two margins must together compensate the indicator's height */ - margin-top: -1px; - margin-bottom: -1px; + position: relative; + /* these two margins must together compensate the indicator's height */ + margin-top: -1px; + margin-bottom: -1px; } .menupopup-drop-indicator { - list-style-image: none; - height: 2px; - -moz-margin-end: -4em; - background-color: Highlight; + list-style-image: none; + height: 2px; + -moz-margin-end: -4em; + background-color: Highlight; } /* ::::: Identity Indicator Styling ::::: */ /* Popup Icons */ #identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); + -moz-image-region: rect(64px, 64px, 128px, 0px); } #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); + -moz-image-region: rect(128px, 64px, 192px, 0px); } /* Popup Body Text */ .identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } .identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } #identity-popup-content-host, #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 1.2em; + font-size: 1.2em; } #identity-popup-content-host { - margin-top: 3px; - margin-bottom: 5px; - font-weight: bold; - max-width: 300px; + margin-top: 3px; + margin-bottom: 5px; + font-weight: bold; + max-width: 300px; } #identity-popup-content-owner { - margin-top: 4px; - margin-bottom: 0 !important; - font-weight: bold; - max-width: 300px; + margin-top: 4px; + margin-bottom: 0 !important; + font-weight: bold; + max-width: 300px; } .verifiedDomain > #identity-popup-content-owner { - font-weight: normal; + font-weight: normal; } #identity-popup-content-verifier { - margin: 4px 0 2px; + margin: 4px 0 2px; } #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , #identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -24px; + margin-top: 10px; + -moz-margin-start: -24px; } #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure24.png"); + list-style-image: url("chrome://browser/skin/Secure24.png"); } #identity-popup-more-info-button { - margin-top: 6px; - margin-bottom: 0; - -moz-margin-end: 0; + margin-top: 6px; + margin-bottom: 0; + -moz-margin-end: 0; } .popup-notification-icon { - width: 64px; - height: 64px; - -moz-margin-end: 10px; + width: 64px; + height: 64px; + -moz-margin-end: 10px; } .popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } .popup-notification-icon[popupid="xpinstall-disabled"], @@ -2214,198 +2239,198 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { .popup-notification-icon[popupid="addon-install-origin-blocked"], .popup-notification-icon[popupid="addon-install-failed"], .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { - list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } .popup-notification-icon[popupid="web-notifications"] { - list-style-image: url(chrome://browser/skin/notification-64.png); + list-style-image: url(chrome://browser/skin/notification-64.png); } .addon-progress-description { - width: 350px; - max-width: 350px; + width: 350px; + max-width: 350px; } .popup-progress-label, .popup-progress-meter { - -moz-margin-start: 0; - -moz-margin-end: 0; + -moz-margin-start: 0; + -moz-margin-end: 0; } .popup-progress-cancel { - -moz-appearance: none; - background: transparent; - border: none; - padding: 0; - min-height: 16px; - min-width: 16px; - max-height: 16px; - max-width: 16px; - margin: 0 1px 0 1px; - list-style-image: url(chrome://mozapps/skin/downloads/buttons.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + min-height: 16px; + min-width: 16px; + max-height: 16px; + max-width: 16px; + margin: 0 1px 0 1px; + list-style-image: url(chrome://mozapps/skin/downloads/buttons.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } .popup-progress-cancel:hover { - -moz-image-region: rect(16px, 32px, 32px, 16px); + -moz-image-region: rect(16px, 32px, 32px, 16px); } .popup-progress-cancel:active { - -moz-image-region: rect(32px, 32px, 48px, 16px); + -moz-image-region: rect(32px, 32px, 48px, 16px); } .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid="indexedDB-quota-prompt"], .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); + list-style-image: url(chrome://global/skin/icons/question-64.png); } .popup-notification-icon[popupid="password"] { - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } .popup-notification-icon[popupid="mixed-content-blocked"] { - list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png); + list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png); } %ifdef MOZ_WEBRTC .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } %endif .popup-notification-icon[popupid="pointerLock"] { - list-style-image: url(chrome://browser/skin/pointerLock-64.png); + list-style-image: url(chrome://browser/skin/pointerLock-64.png); } /* Notification icon box */ #notification-popup-box { - position: relative; - background-color: #fff; - background-clip: padding-box; - padding-left: 3px; - border-radius: 2.5px 0 0 2.5px; - border-width: 0 8px 0 0; - border-style: solid; - border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; - -moz-margin-end: -8px; + position: relative; + background-color: #fff; + background-clip: padding-box; + padding-left: 3px; + border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius); + border-width: 0 8px 0 0; + border-style: solid; + border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; + -moz-margin-end: -8px; } @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box { - padding-left: 5px; + padding-left: 5px; } #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { - transform: scaleX(-1); + transform: scaleX(-1); } .notification-anchor-icon { - width: 16px; - height: 16px; - margin: 0 2px; + width: 16px; + height: 16px; + margin: 0 2px; } .notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; - outline-offset: -3px; + outline: 1px dotted -moz-DialogText; + outline-offset: -3px; } .default-notification-icon, #default-notification-icon { - list-style-image: url(chrome://global/skin/icons/information-16.png); + list-style-image: url(chrome://global/skin/icons/information-16.png); } .geo-notification-icon, #geo-notification-icon { - list-style-image: url(chrome://browser/skin/Geolocation-16.png); + list-style-image: url(chrome://browser/skin/Geolocation-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, #indexedDB-notification-icon { - list-style-image: url(chrome://global/skin/icons/question-16.png); + list-style-image: url(chrome://global/skin/icons/question-16.png); } #password-notification-icon { - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } #plugins-notification-icon { - list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); + list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } #alert-plugins-notification-icon { - list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); + list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); } #blocked-plugins-notification-icon { - list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); + list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); } #plugins-notification-icon, #alert-plugins-notification-icon, #blocked-plugins-notification-icon { - -moz-image-region: rect(0, 16px, 16px, 0); + -moz-image-region: rect(0, 16px, 16px, 0); } #plugins-notification-icon:hover, #alert-plugins-notification-icon:hover, #blocked-plugins-notification-icon:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); + -moz-image-region: rect(0, 32px, 16px, 16px); } #plugins-notification-icon:active, #alert-plugins-notification-icon:active, #blocked-plugins-notification-icon:active { - -moz-image-region: rect(0, 48px, 16px, 32px); + -moz-image-region: rect(0, 48px, 16px, 32px); } #notification-popup-box[hidden] { - /* Override display:none to make the pluginBlockedNotification animation work - when showing the notification repeatedly. */ - display: -moz-box; - visibility: collapse; + /* Override display:none to make the pluginBlockedNotification animation work + when showing the notification repeatedly. */ + display: -moz-box; + visibility: collapse; } #blocked-plugins-notification-icon[showing] { - animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; } @keyframes pluginBlockedNotification { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } .mixed-content-blocked-notification-icon, #mixed-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png); + list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png); } %ifdef MOZ_WEBRTC .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } .webRTC-sharingDevices-notification-icon, #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); } %endif @@ -2426,14 +2451,14 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { } #pointerLock-notification-icon { - list-style-image: url(chrome://browser/skin/pointerLock-16.png); + list-style-image: url(chrome://browser/skin/pointerLock-16.png); } #pointerLock-cancel { - margin: 0px; + margin: 0px; } #identity-popup-container { - min-width: 280px; + min-width: 280px; } /* Bookmarks roots menu-items */ @@ -2443,59 +2468,59 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { #subscribeToPageMenupopup, #BMB_subscribeToPageMenuitem:not([disabled]), #BMB_subscribeToPageMenupopup { - list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png"); + list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png"); } #appmenu_bookmarksToolbar, #bookmarksToolbarFolderMenu, #BMB_bookmarksToolbar { - list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png"); - -moz-image-region: auto; + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png"); + -moz-image-region: auto; } @media (min-resolution: 2dppx) { #bookmarksToolbarFolderMenu, #BMB_bookmarksToolbar { - list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png"); - -moz-image-region: auto; + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png"); + -moz-image-region: auto; } } #appmenu_unsortedBookmarks, #BMB_unsortedBookmarks { - list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); - -moz-image-region: auto; + list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); + -moz-image-region: auto; } /* ::::: Keyboard UI Panel ::::: */ .KUI-panel { - -moz-appearance: none; - background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x; - color: white; - border-style: none; - border-radius: 20px; + -moz-appearance: none; + background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x; + color: white; + border-style: none; + border-radius: 20px; } .KUI-panel[level="top"] { - background-color: rgba(27%,27%,27%,.65); + background-color: rgba(27%,27%,27%,.65); } .KUI-panel-closebutton { - list-style-image: url(KUI-close.png); - -moz-appearance: none; - border: none; - padding: 0; - width: 24px; - height: 24px; + list-style-image: url(KUI-close.png); + -moz-appearance: none; + border: none; + padding: 0; + width: 24px; + height: 24px; } .KUI-panel-closebutton:not(:hover) { - opacity: .6; + opacity: .6; } .KUI-panel-closebutton > .toolbarbutton-icon { - margin: 0; + margin: 0; } /* ::::: Ctrl-Tab and All Tabs Panels ::::: */ @@ -2503,205 +2528,205 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { /* Ctrl-Tab */ #ctrlTab-panel { - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%); + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%); } .ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } .ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px rgb(12%,12%,12%); + box-shadow: 1px 1px 2px rgb(12%,12%,12%); } .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; + margin-bottom: 2px; } .ctrlTab-preview-inner { - padding-bottom: 10px; + padding-bottom: 10px; } #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255,255,255,.2); - border-radius: .5em; + padding: 10px; + background-color: rgba(255,255,255,.2); + border-radius: .5em; } .ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0,0,0,.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; + color: white; + background-color: rgba(0,0,0,.6); + text-shadow: none; + padding: 8px; + border: 2px solid white; + border-radius: .5em; } .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; + margin: -10px -10px 0; } #ctrlTab-showAll { - margin-top: .5em; + margin-top: .5em; } /* All Tabs */ #allTabs-panel { - padding-bottom: 10px; - -moz-appearance: none; - border: none; - background: -moz-dialog; - color: -moz-dialogText; + padding-bottom: 10px; + -moz-appearance: none; + border: none; + background: -moz-dialog; + color: -moz-dialogText; } #allTabs-meta { - margin: 10px; + margin: 10px; } #allTabs-filter { - -moz-margin-start: 24px; - -moz-margin-end: 0; + -moz-margin-start: 24px; + -moz-margin-end: 0; } #allTabs-tab-close-button > .toolbarbutton-icon { - margin: 0; + margin: 0; } /* Make sure the allTab previews always have regular close buttons */ #allTabs-tab-close-button:-moz-lwtheme-brighttext { - list-style-image: url("chrome://global/skin/icons/close.png"); + list-style-image: url("chrome://global/skin/icons/close.png"); } .allTabs-favicon[src] { - background-color: -moz-dialog; - width: 22px; - height: 22px; - padding-top: 1px; - padding-bottom: 5px; - -moz-padding-start: 1px; - -moz-padding-end: 5px; - margin-top: -2px; - -moz-margin-start: -2px; - border-bottom-right-radius: 4px; + background-color: -moz-dialog; + width: 22px; + height: 22px; + padding-top: 1px; + padding-bottom: 5px; + -moz-padding-start: 1px; + -moz-padding-end: 5px; + margin-top: -2px; + -moz-margin-start: -2px; + border-bottom-right-radius: 4px; } .allTabs-favicon[src]:-moz-locale-dir(rtl) { - border-bottom-right-radius: 0; - border-bottom-left-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 4px; } .allTabs-preview-inner > .tabPreview-canvas { - background-color: rgb(60%,60%,60%); - box-shadow: 0 0 1.5px ThreeDShadow; + background-color: rgb(60%,60%,60%); + box-shadow: 0 0 1.5px ThreeDShadow; } .allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas { - opacity: .8; + opacity: .8; } .allTabs-preview:focus > * > .allTabs-preview-inner { - outline: 1px dotted -moz-dialogText; + outline: 1px dotted -moz-dialogText; } /* Add-on bar */ #addon-bar { - -moz-appearance: none; - min-height: 20px; - border-top-style: none; - border-bottom-style: none; - padding-top: 1px; - background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px); - background-size: 100% 2px; - background-repeat: no-repeat; + -moz-appearance: none; + min-height: 20px; + border-top-style: none; + border-bottom-style: none; + padding-top: 1px; + background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px); + background-size: 100% 2px; + background-repeat: no-repeat; } #status-bar { - -moz-appearance: none; - background-color: transparent; - border: none; - min-height: 0; + -moz-appearance: none; + background-color: transparent; + border: none; + min-height: 0; } #addon-bar[customizing] > #status-bar { - opacity: .5; - background-image: repeating-linear-gradient(135deg, - rgba(255,255,255,.3), rgba(255,255,255,.3) 5px, - rgba(0,0,0,.3) 5px, rgba(0,0,0,.3) 10px); + opacity: .5; + background-image: repeating-linear-gradient(135deg, + rgba(255,255,255,.3), rgba(255,255,255,.3) 5px, + rgba(0,0,0,.3) 5px, rgba(0,0,0,.3) 10px); } #status-bar > statusbarpanel { - border-width: 0; - -moz-appearance: none; + border-width: 0; + -moz-appearance: none; } #addonbar-closebutton { - border: none; - padding: 0 5px; - -moz-appearance: none; + border: none; + padding: 0 5px; + -moz-appearance: none; } toolbar[brighttext] #addonbar-closebutton { - list-style-image: url("chrome://global/skin/icons/close-inverted.png"); + list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } @media (min-resolution: 2dppx) { - toolbar[brighttext] #addonbar-closebutton { - list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); - } + toolbar[brighttext] #addonbar-closebutton { + list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); + } } /* Status panel */ .statuspanel-label { - margin: 0; - padding: 2px 4px; - background: linear-gradient(#fff, #ddd); - border: 1px none #ccc; - border-top-style: solid; - color: #333; - text-shadow: none; + margin: 0; + padding: 2px 4px; + background: linear-gradient(#fff, #ddd); + border: 1px none #ccc; + border-top-style: solid; + color: #333; + text-shadow: none; } .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), .statuspanel-label:-moz-locale-dir(rtl)[mirror] { - border-right-style: solid; - /* disabled for triggering grayscale AA (bug 659213) - border-top-right-radius: .3em; - */ - margin-right: 1em; + border-right-style: solid; + /* disabled for triggering grayscale AA (bug 659213) + border-top-right-radius: .3em; + */ + margin-right: 1em; } .statuspanel-label:-moz-locale-dir(rtl):not([mirror]), .statuspanel-label:-moz-locale-dir(ltr)[mirror] { - border-left-style: solid; - /* disabled for triggering grayscale AA (bug 659213) - border-top-left-radius: .3em; - */ - margin-left: 1em; + border-left-style: solid; + /* disabled for triggering grayscale AA (bug 659213) + border-top-left-radius: .3em; + */ + margin-left: 1em; } #full-screen-warning-message { - background-color: hsl(0,0%,15%); - color: white; - border-radius: 8px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; + background-color: hsl(0,0%,15%); + color: white; + border-radius: 8px; + margin-top: 30px; + padding: 30px 50px; + box-shadow: 0 0 2px white; } .full-screen-description { - font-size: 150%; + font-size: 150%; } #full-screen-domain-text { - font-size: 300%; + font-size: 300%; } %ifdef MOZ_DEVTOOLS @@ -2714,48 +2739,48 @@ toolbar[brighttext] #addonbar-closebutton { /* Error counter */ #developer-toolbar-toolbox-button[error-count]:before { - color: #FDF3DE; - min-width: 16px; - text-shadow: none; - background-image: linear-gradient(#B4211B, #8A1915); - border-radius: 1px; - -moz-margin-end: 5px; + color: #FDF3DE; + min-width: 16px; + text-shadow: none; + background-image: linear-gradient(#B4211B, #8A1915); + border-radius: 1px; + -moz-margin-end: 5px; } %endif .toolbarbutton-badge-stack { - margin: 0; - padding: 0; - position: relative; + margin: 0; + padding: 0; + position: relative; } @navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-badge-stack { - padding: 2px 5px; + padding: 2px 5px; } .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbar-icon { - position: absolute; - top: 2px; - right: 2px; + position: absolute; + top: 2px; + right: 2px; } .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { - -moz-margin-end: 0; + -moz-margin-end: 0; } @navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""])::after { - top: 1px; - right: 1px; + top: 1px; + right: 1px; } .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after { - left: 0; - right: auto; + left: 0; + right: auto; } @navbarLargeIcons@ *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after { - left: 1px; - right: auto; + left: 1px; + right: auto; } #main-window[privatebrowsingmode=temporary] { @@ -2767,8 +2792,8 @@ toolbar[brighttext] #addonbar-closebutton { @media (min-resolution: 2dppx) { #main-window[privatebrowsingmode=temporary] { - background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png"); - background-size: 38px; + background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png"); + background-size: 38px; } } @@ -2798,16 +2823,16 @@ toolbar[brighttext] #addonbar-closebutton { @media (-moz-mac-lion-theme) { #main-window[privatebrowsingmode=temporary][inFullscreen] #TabsToolbar[tabsontop=true] { - -moz-padding-end: 50px; + -moz-padding-end: 50px; } } @media not all and (-moz-mac-lion-theme) { #main-window[privatebrowsingmode=temporary] { - background-position: top right 10px; + background-position: top right 10px; } #main-window[privatebrowsingmode=temporary][inFullscreen][tabsontop=true] #window-controls { - -moz-padding-end: 50px; + -moz-padding-end: 50px; } } diff --git a/application/palemoon/themes/osx/downloads/download-glow.png b/application/palemoon/themes/osx/downloads/download-glow.png deleted file mode 100644 index 53182d7a40..0000000000 Binary files a/application/palemoon/themes/osx/downloads/download-glow.png and /dev/null differ diff --git a/application/palemoon/themes/osx/downloads/downloads.css b/application/palemoon/themes/osx/downloads/downloads.css index 267574e2ca..073f529cb1 100644 --- a/application/palemoon/themes/osx/downloads/downloads.css +++ b/application/palemoon/themes/osx/downloads/downloads.css @@ -251,37 +251,39 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti /*** Main indicator icon ***/ #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), + background: -moz-image-rect(var(--toolbarbutton-image), 0, 108, 18, 90) center no-repeat; min-width: 18px; min-height: 18px; } toolbar[brighttext] #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), + background: -moz-image-rect(var(--toolbarbutton-inverted-image), 0, 108, 18, 90) center no-repeat; } #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + background: -moz-image-rect(var(--toolbarbutton-image), + 19, 108, 36, 90) center no-repeat; } /* In the next few rules, we use :not([counter]) as a shortcut that is equivalent to -moz-any([progress], [paused]). */ #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), + background: -moz-image-rect(var(--toolbarbutton-image), 0, 108, 18, 90) center no-repeat; background-size: 12px; } toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), + background: -moz-image-rect(var(--toolbarbutton-inverted-image), 0, 108, 18, 90) center no-repeat; } #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + background: -moz-image-rect(var(--toolbarbutton-image), + 19, 108, 36, 90) center no-repeat; } /*** Download notifications ***/ diff --git a/application/palemoon/themes/osx/jar.mn b/application/palemoon/themes/osx/jar.mn index 9f45210a93..9b48763549 100644 --- a/application/palemoon/themes/osx/jar.mn +++ b/application/palemoon/themes/osx/jar.mn @@ -17,8 +17,6 @@ browser.jar: #endif * skin/classic/browser/autocomplete.css skin/classic/browser/actionicon-tab.png - skin/classic/browser/appmenu-icons.png - skin/classic/browser/appmenu-dropmarker.png * skin/classic/browser/browser.css skin/classic/browser/click-to-play-warning-stripes.png * skin/classic/browser/engineManager.css @@ -68,6 +66,8 @@ browser.jar: skin/classic/browser/slowStartup-16.png skin/classic/browser/Toolbar.png skin/classic/browser/Toolbar-inverted.png + skin/classic/browser/Toolbar.svg + skin/classic/browser/Toolbar-inverted.svg skin/classic/browser/toolbarbutton-dropdown-arrow.png skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png skin/classic/browser/urlbar-arrow.png @@ -84,7 +84,6 @@ browser.jar: skin/classic/browser/webRTC-sharingDevice-16.png #endif skin/classic/browser/downloads/buttons.png (downloads/buttons.png) - skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png) @@ -119,6 +118,7 @@ browser.jar: skin/classic/browser/places/toolbarDropMarker.png (places/toolbarDropMarker.png) skin/classic/browser/places/editBookmarkOverlay.css (places/editBookmarkOverlay.css) skin/classic/browser/places/libraryToolbar.png (places/libraryToolbar.png) + skin/classic/browser/places/libraryToolbar.svg (places/libraryToolbar.svg) skin/classic/browser/places/starred48.png (places/starred48.png) skin/classic/browser/places/unstarred48.png (places/unstarred48.png) skin/classic/browser/places/unfiledBookmarks.png (places/unfiledBookmarks.png) diff --git a/application/palemoon/themes/osx/places/libraryToolbar.svg b/application/palemoon/themes/osx/places/libraryToolbar.svg new file mode 100644 index 0000000000..5fcf42ae3a --- /dev/null +++ b/application/palemoon/themes/osx/places/libraryToolbar.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/osx/places/organizer.css b/application/palemoon/themes/osx/places/organizer.css index 611c0c00c0..bfa35dc9e1 100644 --- a/application/palemoon/themes/osx/places/organizer.css +++ b/application/palemoon/themes/osx/places/organizer.css @@ -2,6 +2,20 @@ * 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/. */ +:root { + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.png"); + --library-toolbar-image: url("chrome://browser/skin/places/libraryToolbar.png"); +} + + +/* Use SVG for HiDPI 133%+ */ +@media (min-resolution: 1.33dppx) { + :root { + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg"); + --library-toolbar-image: url("chrome://browser/skin/places/libraryToolbar.svg"); + } +} + /* Toolbar */ #placesToolbar { padding: 3px; @@ -14,7 +28,7 @@ #back-button, #forward-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); + list-style-image: var(--toolbarbutton-image); } #back-button { @@ -34,35 +48,23 @@ #organizeButton, #viewMenu, #maintenanceButton { - list-style-image: url("chrome://browser/skin/places/libraryToolbar.png"); + list-style-image: var(--library-toolbar-image); } /* organize button */ #organizeButton { -moz-image-region: rect(0px, 16px, 16px, 0px); } -#organizeButton:hover, -#organizeButton[open="true"] { - -moz-image-region: rect(16px, 16px, 32px, 0px); -} /* view button */ #viewMenu { -moz-image-region: rect(0px, 32px, 16px, 16px); } -#viewMenu:hover, -#viewMenu[open="true"] { - -moz-image-region: rect(16px, 32px, 32px, 16px); -} /* maintenance button */ #maintenanceButton { -moz-image-region: rect(0px, 48px, 16px, 32px); } -#maintenanceButton:hover, -#maintenanceButton[open="true"] { - -moz-image-region: rect(16px, 48px, 32px, 32px); -} /* Root View */ #placesView { diff --git a/application/palemoon/themes/osx/tabbrowser/newtab-glass.png b/application/palemoon/themes/osx/tabbrowser/newtab-glass.png deleted file mode 100644 index 15185beb6e..0000000000 Binary files a/application/palemoon/themes/osx/tabbrowser/newtab-glass.png and /dev/null differ diff --git a/application/palemoon/themes/osx/tabbrowser/tab-arrow-left-glass.png b/application/palemoon/themes/osx/tabbrowser/tab-arrow-left-glass.png deleted file mode 100644 index aac93a7273..0000000000 Binary files a/application/palemoon/themes/osx/tabbrowser/tab-arrow-left-glass.png and /dev/null differ