add titlebarbutton transition + fix urlbar colours

README.md

@@ -76,7 +76,7 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
 |-|
 |`uc.tweak.less-permissions-button-padding`|
 
-|use Firefox's default context menu font-size|
+|use Firefox's default context menu font-size (only applies to Windows)|
 |-|
 |`uc.tweak.smaller-context-menu-text`|
 

chrome/global/colors.css

@@ -21,17 +21,17 @@
   --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
   --toolbar-field-focus-color: var(--toolbar-field-color) !important;
   --toolbar-field-focus-border-color: #0055D7 !important;
+  --urlbar-box-bgcolor: rgba(0, 0, 0, 0.09) !important;
+  --urlbar-box-hover-bgcolor: rgba(0, 0, 0, 0.09) !important;
+  --urlbar-box-focus-bgcolor: rgba(0, 0, 0, 0.22) !important;
   --urlbar-icon-fill-opacity: 0.6 !important;
   --urlbar-popup-url-color: #0072C9 !important;
   --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
-  --urlbar-box-bgcolor: var(--toolbar-field-background-color) !important;
   --autocomplete-popup-background: #fff !important;
   --autocomplete-popup-color: #fff !important;
   --autocomplete-popup-highlight-background: #f2f2f2 !important;
   --autocomplete-popup-hover-background: #e5e5e5 !important;
   --autocomplete-popup-separator-color: #dadada00 !important;
-  --toolbarbutton-hover-background: #e0e0e0 !important;
-  --toolbarbutton-active-background: #d5d5d5 !important;
   --button-bgcolor: #EDEDED !important;
   --button-hover-bgcolor: #e5e5e5 !important;
   --button-active-bgcolor: #d5d5d5 !important;
@@ -59,8 +59,8 @@
   --focus-outline-color: #0055D7 !important;
   --panel-shortcut-color: inherit !important;
   --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-  --toolbarbutton-hover-background: #00000014 !important;
+  --toolbarbutton-hover-background: rgba(0, 0, 0, 0.08) !important;
-  --toolbarbutton-active-background: #00000021 !important;
+  --toolbarbutton-active-background: rgba(0, 0, 0, 0.12) !important;
   --uc-private-browsing-indicator: var(--button-primary-bgcolor);
   --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
   --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
@@ -88,10 +88,12 @@
   --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
   --toolbar-field-focus-color: var(--toolbar-field-color) !important;
   --toolbar-field-focus-border-color: #63ADE5 !important;
+  --urlbar-box-bgcolor: rgba(255, 255, 255, 0.11) !important;
+  --urlbar-box-hover-bgcolor: rgba(255, 255, 255, 0.11) !important;
+  --urlbar-box-focus-bgcolor: rgba(255, 255, 255, 0.28) !important;
   --urlbar-icon-fill-opacity: 1 !important;
   --urlbar-popup-url-color: #75B6E8 !important;
   --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
-  --urlbar-box-bgcolor: var(--toolbar-field-background-color) !important;
   --autocomplete-popup-background: #4A4A4A !important;
   --autocomplete-popup-color: #fff !important;
   --autocomplete-popup-highlight-background: #383838 !important;
@@ -123,14 +125,20 @@
   --panel-banner-item-update-supported-bgcolor: #81C995 !important;
   --focus-outline-color: #63ADE5 !important;
   --panel-shortcut-color: inherit !important;
-  --toolbarbutton-hover-background: #ffffff25 !important;
+  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.1) !important;
-  --toolbarbutton-active-background: #ffffff32 !important;
+  --toolbarbutton-active-background: rgba(255, 255, 255, 0.16) !important;
   --uc-private-browsing-indicator: var(--button-primary-bgcolor);
   --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
   --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
   --uc-private-browding-indicator-text: var(--button-primary-color);
 }
 
+#urlbar {
+  --urlbar-box-bgcolor: inherit !important;
+  --urlbar-box-hover-bgcolor: inherit !important;
+  --urlbar-box-focus-bgcolor: inherit !important;
+}
+
 /* Change Colour of page when loading */
 :root:not(:-moz-lwtheme) #tabbrowser-tabpanels,
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #tabbrowser-tabpanels {
@@ -144,7 +152,7 @@
 
 /* make the titlebar buttons black/white on default themes */
 :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox,
-:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] .titlebar-buttonbox {
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"][tabsintitlebar] .titlebar-buttonbox {
   color: #000 !important;
 }
 
@@ -153,8 +161,29 @@
   color: #fff !important;
 }
 
-/* library window theme */
 @media (-moz-platform: windows) {
+  .titlebar-button:not(.titlebar-close):hover {
+    background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
+  }
+
+  .titlebar-button:hover:active {
+    background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
+  }
+
+  .titlebar-close:hover {
+    stroke: white !important;
+    background-color: #e81123 !important;
+  }
+  
+  .titlebar-close:hover:active {
+    background-color: #EF6B76 !important;
+  }
+  
+  toolbar[brighttext] .titlebar-close:hover:active {
+    background-color: #9C1420 !important;
+  }
+
+  /* library window theme */
   window#places {
     --organizer-color: #000 !important;
     --organizer-deemphasized-color: #666 !important;

chrome/global/tweaks.css

@@ -51,6 +51,7 @@ browsing indicator) */
     --lwt-accent-color: #f3f3f3 !important;
     --lwt-accent-color-inactive: unset !important;
     --toolbar-bgcolor: #fff !important;
+    --lwt-tab-text: #262626 !important;
     --uc-urlbar-shadow: none !important;
   }
 
@@ -67,6 +68,8 @@ browsing indicator) */
     :root:not(:-moz-lwtheme) {
       --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
       --toolbar-field-background-color: Field !important;
+      --lwt-tab-text: -moz-dialogtext !important;
+      --uc-tab-border-color: #ffffff0f !important;
     }
   }
 
@@ -92,7 +95,13 @@ browsing indicator) */
   }
 
   .tabbrowser-tab[selected] .tab-label {
-    font-weight: 600 !important;
+    font-weight: 500 !important;
+  }
+
+  @media (-moz-platform: windows) {
+    .tabbrowser-tab[selected] .tab-label {
+      font-weight: 600 !important;
+    }
   }
 
   /* adjust spacing of area above tabs */
@@ -163,13 +172,6 @@ browsing indicator) */
       background: transparent !important;
     }
 
-    @supports -moz-bool-pref("uc.tweak.floating-tabs") {
-      #navigator-toolbox:not(:-moz-lwtheme),
-      #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
-        background: transparent !important;
-      }
-    }
-
     /* force tab color (for the tab transparency) */
     .tab-background:is([selected], [multiselected]) {
       background: var(--toolbar-bgcolor) !important;
@@ -183,10 +185,12 @@ browsing indicator) */
     @supports -moz-bool-pref("uc.tweak.floating-tabs") {
       :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
         --toolbar-bgcolor: #ffffffcc !important;
+        --lwt-accent-color: #0000 !important;
       }
 
       :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
         --toolbar-bgcolor: #ffffff25 !important;
+        --lwt-accent-color: #0000 !important;
       }
     }
 
@@ -208,6 +212,26 @@ browsing indicator) */
     :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]):is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
       padding-right: 19px !important;
     }
+
+    @supports -moz-bool-pref("uc.tweak.win11-mica-toolbar") {
+      :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+        --lwt-accent-color: #00000015 !important;
+        --toolbar-bgcolor: #ffffffbf !important;
+        --uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.03) !important;
+      }
+
+      :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
+        --toolbar-bgcolor: #4a4a4a70 !important;
+        --toolbar-field-background-color: #0004 !important;
+        --toolbar-field-focus-background-color: #2B2B2B !important;
+        --chrome-content-separator-color: #fff3 !important;
+      }
+
+      #navigator-toolbox #titlebar,
+      #navigator-toolbox .tab-background {
+        box-shadow: none !important;
+      }
+    }
   }
 }
 

chrome/toolbar/navbar.css

@@ -96,7 +96,8 @@
   #tracking-protection-icon-container,
   #fxa-toolbar-menu-button,
   panel button,
-  panel menulist {
+  panel menulist,
+  .titlebar-button {
     transition: background-color 0.25s ease !important;
   }
 
@@ -109,7 +110,8 @@
   #tracking-protection-icon-container:not([disabled=true]):is([open],[checked],:hover:active),
   #fxa-toolbar-menu-button:not([disabled=true]):is([open],[checked],:hover:active),
   panel button:not([disabled=true]):is([open],[checked],:hover:active),
-  panel menulist:not([disabled=true]):is([open],[checked],:hover:active) {
+  panel menulist:not([disabled=true]):is([open],[checked],:hover:active),
+  .titlebar-button:not([disabled=true]):hover:active {
     transition-duration: 0s !important;
   }
 }

chrome/toolbar/urlbar.css

@@ -9,10 +9,6 @@
   --identity-box-margin-inline: 2px !important;
 }
 
-:root:not(:-moz-lwtheme) #urlbar {
-  --urlbar-box-bgcolor: unset !important;
-}
-
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within {
   outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
@@ -195,6 +191,14 @@
   background-color: transparent !important;
 }
 
+:is(:root:not(:-moz-lwtheme),
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"],
+:root[lwt-default-theme-in-dark-mode="true"],
+:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
+) #urlbar-search-mode-indicator {
+  background-color: var(--urlbar-box-hover-bgcolor) !important;
+}
+
 /* increase space between icon and text */
 #identity-icon-label {
   padding-inline-start: 8px !important;