diff --git a/uc-globals.css b/uc-globals.css index 59348adf..a799bf1b 100644 --- a/uc-globals.css +++ b/uc-globals.css @@ -260,6 +260,7 @@ tooltip { --urlbar-input-bgcolor: hsl(233, 28%, 25%); --urlbar-input-bgcolor-brighter: hsl(233, 26%, 27%); --urlbar-input-bgcolor-disabled: hsl(233, 30%, 21%); + --urlbar-zoom-button-bgcolor: hsla(0, 0%, 0%, 0.09); --uc-urlbar-container-height: 38px; --uc-menubar-searchbar-width: 256px; --uc-tab-min-height: 35px; diff --git a/uc-panels.css b/uc-panels.css index 3e6fc163..18446ce5 100644 --- a/uc-panels.css +++ b/uc-panels.css @@ -396,6 +396,8 @@ panel[type="arrow"][side="top"] { border: 1px solid transparent !important; padding: 6px 16px !important; min-height: var(--subviewbutton-height, 28px) !important; + -moz-box-align: center !important; + -moz-box-pack: center !important; } .popup-notification-button-container > button[disabled] { @@ -1796,3 +1798,56 @@ richlistitem.download-state > .downloadButton.downloadIconCancel .button-box .bu #downloads-button-autohide-panel:is(:dir(rtl), :-moz-locale-dir(rtl)) { --arrowpanel-padding: 8px 8px 8px 12px !important; } + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:not([hidden]) { + display: flex !important; + align-items: center !important; + background: none !important; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] + description { + transform: none !important; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] + .popup-notification-button-container { + float: inline-end; + background-color: transparent; + flex-direction: row-reverse; + margin: 0 !important; + gap: 0 !important; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] + .popup-notification-button.popup-notification-secondary-button { + margin: 0 !important; + height: 22px !important; + width: 22px !important; + padding: 0 !important; + align-self: center !important; + flex: none !important; + min-height: revert !important; + min-width: revert !important; + order: 1 !important; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] + .popup-notification-button.popup-notification-primary-button { + margin: 4px !important; + padding: 3px 6px 3px 12px !important; + flex: 1 !important; + min-height: revert !important; + min-width: revert !important; + order: 0 !important; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] + .popup-notification-button.popup-notification-primary-button::after { + margin-inline-start: 4px !important; +} + +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] + .popup-notification-body-container { + padding-bottom: calc(var(--arrowpanel-padding) / 2) !important; +} diff --git a/uc-urlbar.css b/uc-urlbar.css index 65d99715..3ad9eddb 100644 --- a/uc-urlbar.css +++ b/uc-urlbar.css @@ -271,8 +271,15 @@ toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background filter: none !important; } +.urlbar-page-action { + -moz-box-pack: center !important; +} + +:is(.urlbar-page-action:not([disabled]), #urlbar-go-button, .search-go-button):not([disabled], :hover, [open]):focus-visible { + background-color: var(--urlbar-box-focus-bgcolor) !important; +} + :not(.urlbar-page-action) > .urlbar-icon:not([disabled]):is(:hover, :focus-visible, [open]), -#pageAction-urlbar-screenshot[shooting]:not(:hover) .urlbar-icon, .urlbar-page-action:not([disabled]):is(:hover, :focus-visible, [open]) .urlbar-icon { fill-opacity: 1 !important; } @@ -288,6 +295,48 @@ toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background opacity: 1; } +#contextual-feature-recommendation { + --cfr-active-color: var(--button-hover-bgcolor) !important; +} + +#cfr-label-container { + border-radius: var(--toolbarbutton-border-radius) !important; + font-size: 0.85em !important; + border: 1px solid transparent !important; + margin-block: 1px !important; +} + +#urlbar:not([cfr-recommendation-state="expanded"]) #cfr-button { + transform: translateX(-2px); +} + +#cfr-label-container:is(:hover, :focus-visible) { + filter: brightness(1.1) saturate(1.2); + border-color: var(--button-hover-bgcolor) !important; +} + +#cfr-label-container:hover:active { + filter: brightness(1.2) saturate(1.4); + border-color: var(--button-active-bgcolor) !important; +} + +#cfr-label { + padding-block: 0 !important; + padding-inline: 0 10px !important; +} + +#cfr-button { + margin-block: 0 !important; +} + +#urlbar[cfr-recommendation-state="expanded"] #cfr-button { + pointer-events: none !important; +} + +#urlbar[cfr-recommendation-state="expanded"] #cfr-button .urlbar-icon { + fill-opacity: inherit !important; +} + #urlbar[usertyping]:is([focused], [open]) > #urlbar-input-container > #urlbar-go-button { display: -moz-inline-box !important; } @@ -355,10 +404,6 @@ but CSS hides it faster and avoids flickering. } } -.urlbar-page-action { - -moz-box-pack: center !important; -} - #userContext-indicator { margin-inline-start: 6px !important; } @@ -385,7 +430,7 @@ but CSS hides it faster and avoids flickering. height: 20px !important; border-radius: 10px !important; border: 1px solid var(--desaturate-dimmed) !important; - background: hsla(0, 0%, 0%, 0.09) !important; + background: var(--urlbar-zoom-button-bgcolor, hsla(0, 0%, 0%, 0.09)) !important; margin-inline: 4px !important; padding: 1px 8px !important; } diff --git a/uc-variables.css b/uc-variables.css index 3f0e3615..970b4b14 100644 --- a/uc-variables.css +++ b/uc-variables.css @@ -169,6 +169,11 @@ menupopup { --vertical-tabs-pane-background: var(--ui-secondary-bg) !important; --vpn-on-icon: url(chrome://userchrome/content/skin/vpn-on-light.svg); + + --cfr-animation-duration: 0.35s; + --cfr-button-addons-icon: url(chrome://userchrome/content/material/extension.svg) !important; + --cfr-button-features-icon: url(chrome://userchrome/content/skin/tip.svg) !important; + --cfr-button-highlights-icon: url(chrome://global/skin/icons/highlights.svg) !important; } :root[lwthemetextcolor="bright"] { @@ -219,6 +224,13 @@ panel { --urlbar-container-height: var(--uc-urlbar-container-height) !important; } +#urlbar, +#searchbar { + --urlbar-box-focus-bgcolor: var(--desaturate-faint) !important; + --urlbar-box-hover-bgcolor: var(--desaturate-dimmed) !important; + --urlbar-box-active-bgcolor: var(--desaturate-dimmed-further) !important; +} + #appMenu-multiView { --subviewbutton-height: 32px !important; --arrowpanel-menuitem-padding-inline: 8px !important; diff --git a/userChrome.css b/userChrome.css index 0b566953..35de6df9 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,6 +1,6 @@ /* @name duskFox -@version 3.0.4 +@version 3.0.5 @author aminomancer @homepage https://github.com/aminomancer @description A dark indigo theme integrated with extensive functional and visual scripts.