diff --git a/waterfox/browser/themes/lepton/icons/radio.svg b/waterfox/browser/themes/lepton/icons/radio.svg new file mode 100644 index 000000000000..21ec9fd44a4a --- /dev/null +++ b/waterfox/browser/themes/lepton/icons/radio.svg @@ -0,0 +1,6 @@ + + + + diff --git a/waterfox/browser/themes/lepton/leptonChrome.css b/waterfox/browser/themes/lepton/leptonChrome.css index 3f886e097255..0dff4dc9ffb0 100644 --- a/waterfox/browser/themes/lepton/leptonChrome.css +++ b/waterfox/browser/themes/lepton/leptonChrome.css @@ -2516,7 +2516,7 @@ fill: currentColor !important; color: var(--in-content-primary-button-text-color) !important; background-color: var(--in-content-primary-button-background) !important; - background-image: url("chrome://global/skin/icons/radio.svg") !important; + background-image: url("chrome://browser/skin/lepton/radio.svg") !important; border-color: transparent !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; @@ -3716,12 +3716,18 @@ transition: all 0.3s var(--animation-easing-function) !important; } /*- URL / Search Bar -------------------------------------------------------*/ - #urlbar-background, + #urlbar-background { + transition: border-color 1s var(--animation-easing-function), + background-color 0.5s var(--animation-easing-function) !important; + } + #urlbar-background:hover { + transition: border-color 0.5s var(--animation-easing-function), + background-color 0.5s var(--animation-easing-function) !important; + } #searchbar { transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important; } - #urlbar-background:hover, #searchbar:hover { transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; @@ -4409,11 +4415,6 @@ :root:not([uidensity="compact"]) #urlbar[breakout][breakout-extend-disabled][open] { height: auto !important; } - :root[uidensity="touch"] #urlbar[breakout] { - top: calc( - (var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2 + 1px - ) !important; - } /* spread menu */ :root:not([uidensity]) .urlbarView-row { padding-block: 1px !important; /* Original: 2px */ @@ -6806,6 +6807,9 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + #tabbrowser-tabs[orient="horizontal"] { + min-height: unset !important; /* Original: var(--tabstrip-min-height) */ + } #tabbrowser-tabs[orient="vertical"] { --uc-tab-border-bottom-radius: var(--tab-border-radius); } @@ -7485,7 +7489,8 @@ display: -moz-inline-box !important; height: 1px !important; border-radius: 9999px !important; - margin-top: 3px; + transform: translateY(5px); + margin-top: -1px !important; margin-left: 5px; margin-right: 5px; } @@ -7525,7 +7530,6 @@ .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; - transform: none !important; } #TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) @@ -8346,7 +8350,7 @@ .tab-icon-overlay:not([crashed])[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } - .tab-icon-overlay:not([crashed])[soundplaying] { + .tab-icon-overlay:not([crashed])[activemedia-blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { @@ -9121,7 +9125,7 @@ @supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { --uc-sidebar-shadow-color: #28282f; - z-index: 1 !important; + z-index: var(--browser-area-z-index-sidebar-splitter, 3) !important; position: relative !important; box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color); } @@ -9849,19 +9853,27 @@ /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #navigator-toolbox { position: fixed !important; /* Needed for content to take up entire height */ z-index: 1000 !important; /* Puts the UI above the content */ } - :root[sizemode="fullscreen"] #navigator-toolbox:is(:hover, :focus-within) { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #navigator-toolbox:is(:hover, :focus-within) { margin-top: 0 !important; } - :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) + :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { width: 100%; /* Makes the UI take up the entire width */ } + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #urlbar:popover-open { + position: fixed !important; + } @media (-moz-gtk-csd-available) { /* Fix transparent background */ - :root[tabsintitlebar][sizemode="fullscreen"]:is(:not([lwtheme]), :not(:-moz-lwtheme)) #TabsToolbar { + :root[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]):is( + :not([lwtheme]), + :not(:-moz-lwtheme) + ) + #TabsToolbar { appearance: auto !important; } } @@ -10459,11 +10471,17 @@ @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10472,11 +10490,17 @@ @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -10500,7 +10524,12 @@ var(--ext-theme-background-transition) !important; } } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + #nav-bar:not([customizing]) #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { transition-delay: 0s !important; } } @@ -11649,6 +11678,9 @@ #allTabsMenu-searchTabs { list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } + #allTabsMenu-syncedTabs { + list-style-image: url("chrome://browser/skin/lepton/synced-tabs.svg"); + } #allTabsMenu-closeDuplicateTabs { list-style-image: var(--uc-tab-close-duplicate-icon); } @@ -11766,6 +11798,22 @@ #sidebarMenu-popup > *:is(menuitem)[data-l10n-id="sidebar-menu-close"] { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } + /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ + .item.client[clientType="phone"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-phone.svg") !important; + } + .item.client[clientType="tablet"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-tablet.svg") !important; + } + .item.client[clientType="desktop"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-desktop.svg") !important; + } + .item.client[clientType="tv"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-tv.svg") !important; + } + .item.client[clientType="vr"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-vr.svg") !important; + } /*= unified-extensions-view ===================================================*/ #unified-extensions-manage-extensions { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); @@ -16428,7 +16476,7 @@ fill: currentColor !important; color: var(--in-content-primary-button-text-color) !important; background-color: var(--in-content-primary-button-background) !important; - background-image: url("chrome://global/skin/icons/radio.svg") !important; + background-image: url("chrome://browser/skin/lepton/radio.svg") !important; border-color: transparent !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; @@ -17720,11 +17768,18 @@ } } @media (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { - #urlbar-background, + #urlbar-background { + transition: border-color 1s var(--animation-easing-function), background-color 0.5s var(--animation-easing-function) !important; + } + #urlbar-background:hover { + transition: border-color 0.5s var(--animation-easing-function), + background-color 0.5s var(--animation-easing-function) !important; + } +} +@media (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { #searchbar { transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important; } - #urlbar-background:hover, #searchbar:hover { transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; } @@ -18442,11 +18497,6 @@ :root:not([uidensity="compact"]) #urlbar[breakout][breakout-extend-disabled][open] { height: auto !important; } - :root[uidensity="touch"] #urlbar[breakout] { - top: calc( - (var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2 + 1px - ) !important; - } /* spread menu */ :root:not([uidensity]) .urlbarView-row { padding-block: 1px !important; /* Original: 2px */ @@ -21255,6 +21305,9 @@ /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @media (-moz-bool-pref: "userChrome.tab.connect_to_window") { + #tabbrowser-tabs[orient="horizontal"] { + min-height: unset !important; /* Original: var(--tabstrip-min-height) */ + } #tabbrowser-tabs[orient="vertical"] { --uc-tab-border-bottom-radius: var(--tab-border-radius); } @@ -22056,7 +22109,8 @@ display: -moz-inline-box !important; height: 1px !important; border-radius: 9999px !important; - margin-top: 3px; + transform: translateY(5px); + margin-top: -1px !important; margin-left: 5px; margin-right: 5px; } @@ -22096,7 +22150,6 @@ .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; - transform: none !important; } #TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) @@ -22955,7 +23008,7 @@ .tab-icon-overlay:not([crashed])[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } - .tab-icon-overlay:not([crashed])[soundplaying] { + .tab-icon-overlay:not([crashed])[activemedia-blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); } } @@ -23779,7 +23832,7 @@ @media (-moz-bool-pref: "userChrome.sidebar.overlap"), (-moz-bool-pref: "userChrome.autohide.sidebar") { #sidebar-box { --uc-sidebar-shadow-color: #28282f; - z-index: 1 !important; + z-index: var(--browser-area-z-index-sidebar-splitter, 3) !important; position: relative !important; box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color); } @@ -24567,20 +24620,25 @@ } /** Fullscreen - Overlap toolbar **********************************************/ @media (-moz-bool-pref: "userChrome.fullscreen.overlap") and (-moz-bool-pref: "browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #navigator-toolbox { position: fixed !important; /* Needed for content to take up entire height */ z-index: 1000 !important; /* Puts the UI above the content */ } - :root[sizemode="fullscreen"] #navigator-toolbox:is(:hover, :focus-within) { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #navigator-toolbox:is(:hover, :focus-within) { margin-top: 0 !important; } - :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) + :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { width: 100%; /* Makes the UI take up the entire width */ } + :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #urlbar:popover-open { + position: fixed !important; + } } @media (-moz-bool-pref: "userChrome.fullscreen.overlap") and (-moz-bool-pref: "browser.fullscreen.autohide") and (-moz-gtk-csd-available) { /* Fix transparent background */ - :root[tabsintitlebar][sizemode="fullscreen"]:is(:not([lwtheme]), :not(:-moz-lwtheme)) #TabsToolbar { + :root[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]):is(:not([lwtheme]), :not(:-moz-lwtheme)) + #TabsToolbar { appearance: auto !important; } } @@ -25383,11 +25441,17 @@ (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -25397,11 +25461,17 @@ screen and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + } + #nav-bar:not([customizing]), + #nav-bar:not([customizing]) #urlbar { opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { opacity: 1; } } @@ -25432,7 +25502,17 @@ (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference), (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference) { - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + #nav-bar:not([customizing]) #urlbar { + transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay) !important; + } +} +@media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.autohide.navbar") and (prefers-reduced-motion: no-preference), + (-moz-bool-pref: "userChrome.autohide.navbar") and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (prefers-reduced-motion: no-preference) { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]), + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) #urlbar { transition-delay: 0s !important; } } @@ -26073,6 +26153,7 @@ /*= protections-popup ========================================================*/ /*= identity-popup ===========================================================*/ /*= sidebarMenu-popup ========================================================*/ + /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/ /*= unified-extensions-view ===================================================*/ /*= Compatibility ============================================================*/ /*= Tab Mix Plus =============================================================*/ @@ -26775,6 +26856,11 @@ list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + #allTabsMenu-syncedTabs { + list-style-image: url("chrome://browser/skin/lepton/synced-tabs.svg"); + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { #allTabsMenu-closeDuplicateTabs { list-style-image: var(--uc-tab-close-duplicate-icon); @@ -26933,6 +27019,31 @@ --menuitem-image: url("chrome://global/skin/icons/close.svg"); } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + .item.client[clientType="phone"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-phone.svg") !important; + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + .item.client[clientType="tablet"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-tablet.svg") !important; + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + .item.client[clientType="desktop"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-desktop.svg") !important; + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + .item.client[clientType="tv"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-tv.svg") !important; + } +} +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { + .item.client[clientType="vr"] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/lepton/device-vr.svg") !important; + } +} @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.panel") { #unified-extensions-manage-extensions { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); diff --git a/waterfox/browser/themes/lepton/leptonContent.css b/waterfox/browser/themes/lepton/leptonContent.css index 2cc3d04a3319..e804a859f989 100644 --- a/waterfox/browser/themes/lepton/leptonContent.css +++ b/waterfox/browser/themes/lepton/leptonContent.css @@ -2877,7 +2877,7 @@ fill: currentColor !important; color: var(--in-content-primary-button-text-color) !important; background-color: var(--in-content-primary-button-background) !important; - background-image: url("chrome://global/skin/icons/radio.svg") !important; + background-image: url("chrome://browser/skin/lepton/radio.svg") !important; border-color: transparent !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; @@ -6702,7 +6702,7 @@ fill: currentColor !important; color: var(--in-content-primary-button-text-color) !important; background-color: var(--in-content-primary-button-background) !important; - background-image: url("chrome://global/skin/icons/radio.svg") !important; + background-image: url("chrome://browser/skin/lepton/radio.svg") !important; border-color: transparent !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important;