3.0.5 update.

handle ContextualFeatureRecommendation styles. see previous commit notes for thorough release notes.
aminomancer · Dec 8, 2021 · 9aa1d05 · 9aa1d05
1 parent fffffba
commit 9aa1d05
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.