v1.1.0

Resolved background image clipping on hover with bookmarks toolbar auto-hide and theme background. Adjusted zoom level text brightness. Fixed window controls positioning in Nightly (v135) and updated for `customtitlebar` after `tabsintitlebar` deprecation. Added `uc.flex.disable-sidebery-autohide` preference to disable Sidebery auto-collapse.
yuuqilin · Dec 2, 2024 · a87c938 · a87c938
1 parent 05f0231
commit a87c938
Show file tree

Hide file tree

Showing 17 changed files with 326 additions and 195 deletions.
diff --git a/Profiles/chrome/components/uc-bookmarks.css b/Profiles/chrome/components/uc-bookmarks.css
@@ -33,14 +33,13 @@
             background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y);
             background-image: var(--toolbar-bgimage, linear-gradient(transparent, transparent)),
                 linear-gradient(var(--bg), var(--bg)), var(--lwt-header-image, var(--lwt-additional-images)) !important;
-            @media (-moz-bool-pref: "uc.flex.allow-addons-to-change-toolbar-color") {
-                @media not (-moz-bool-pref: "uc.flex.fully-hide-sidebery") {
-                    background-position-x:
-                        center,
-                        left,
-                        right var(--uc-theme-bg-x-right-end),
-                        var(--uc-theme-bg-x-left-start);
-                }
+            /* Adjust the background image offset */
+            @media (-moz-bool-pref: "uc.flex.allow-addons-to-change-toolbar-color") and (not (-moz-bool-pref: "uc.flex.fully-hide-sidebery")) {
+                background-position-x:
+                    center,
+                    left,
+                    right var(--uc-theme-bg-x-right-end),
+                    var(--uc-theme-bg-x-left-start);
             }
         }
 

diff --git a/Profiles/chrome/components/uc-sidebar.css b/Profiles/chrome/components/uc-sidebar.css
@@ -4,111 +4,82 @@
 }
 
 /* Reduce header size */
-@media (prefers-color-scheme: dark) {
-    #sidebar-header {
-        font-size: 1.2em !important;
-        padding: 2px 6px 2px 3px !important;
-        /*color: #fff !important;*/
-    }
-}
-@media (prefers-color-scheme: light) {
-    #sidebar-header {
-        font-size: 1.2em !important;
-        padding: 2px 6px 2px 3px !important;
-        /*color: #000 !important;*/
-    }
+#sidebar-header {
+    font-size: 1.2em !important;
+    padding: 2px 6px 2px 3px !important;
 }
 #sidebar-header #sidebar-close {
     padding: 3px !important;
 }
 #sidebar-header #sidebar-close .toolbarbutton-icon {
-    width: 14px !important;
-    height: 14px !important;
-    opacity: 0.6 !important;
+    width: 14px;
+    height: 14px;
+    opacity: 0.6;
 }
 
 /* Expand sidebar header on hover */
 #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
     #sidebar-header:hover {
-        background-color: var(--uc-sidebar-bgcolor) !important;
-        min-width: var(--uc-sidebar-hover-width) !important;
+        @media (prefers-color-scheme: light) {
+            --sidebar-border-color: #ced1d4;
+        }
+        max-height: 100vh;
+        max-width: 100vw;
+        min-width: var(--uc-sidebar-hover-width);
+        background-color: var(--uc-sidebar-bgcolor);
         transition:
-            max-height 115ms ease-in-out 10ms,
-            min-height 115ms ease-in-out 10ms,
-            min-width 115ms ease-in-out 10ms,
-            padding 115ms ease-in-out 10ms,
-            opacity 115ms ease-in-out 10ms;
+            border-bottom var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            max-height var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            min-height var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            max-width var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            min-width var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            padding var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            background-color var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay),
+            opacity var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay);
     }
 
     #sidebar-header:hover :is(#sidebar-switcher-target, #sidebar-close) {
-        transition: opacity 115ms ease-in-out 10ms;
+        transition: opacity var(--uc-hover-transition-duration) ease-in-out var(--uc-hover-sidebar-delay);
     }
 
     /* Modified from https://www.reddit.com/r/FirefoxCSS/comments/77ehp1/how_to_hide_the_title_of_webextension_sidebars/ */
     /* Minimize sidebar header to a stripe (except Bookmarks, History, Sync'd Tabs); appears normally on hover */
-    @media (-moz-bool-pref: "uc.flex.fully-hide-sidebery") {
-        &:hover #sidebar-header:not(:hover):not(:has(.active)) {
-            --uc-sidebar-width: 44px;
-            max-height: 5px !important;
-            min-height: 5px !important;
-            min-width: var(--uc-sidebar-width) !important;
-            overflow: hidden;
-            padding: 0 !important;
-            background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 50%, var(--uc-sidebar-bgcolor)) !important;
-            opacity: 1 !important;
-            transition:
-                max-height var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                min-height var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                min-width var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                padding var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                background-color 0ms var(--uc-autohide-transition-type) 0ms,
-                opacity 0ms var(--uc-autohide-transition-type) 0ms;
-        }
-
-        @media (prefers-color-scheme: dark) {
-            &:hover #sidebar-header:not(:hover):not(:has(.active)) {
-                background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 70%, var(--uc-sidebar-bgcolor)) !important;
-            }
-        }
-
-        @media (-moz-bool-pref: "uc.flex.sidebery-fast-hover-expand") {
-            &:not(:hover) #sidebar-header:not(:hover):not(:has(.active)) {
-                transition: none !important;
-            }
-        }
-    }
-
     #sidebar-header:not(:hover):not(:has(.active)) {
-        max-height: 5px !important;
-        min-height: 5px !important;
-        min-width: var(--uc-sidebar-width) !important;
+        max-height: 5px;
+        min-height: 5px;
+        min-width: var(--uc-sidebar-width);
         overflow: hidden;
         padding: 0 !important;
-        background-color: var(--uc-sidebar-header-stripe) !important;
-        opacity: 0.5 !important;
+        background-color: var(--uc-sidebar-header-stripe);
+        opacity: 0.5;
         transition:
-            max-height 115ms ease-in-out 10ms,
-            min-height 115ms ease-in-out 10ms,
-            min-width 115ms ease-in-out 10ms,
-            padding 115ms ease-in-out 10ms,
-            background-color 115ms ease-in-out 10ms,
+            max-height var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+            min-height var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+            min-width var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+            padding var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+            background-color var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
             opacity 0ms ease-in-out 0ms;
     }
 
+    /* When Sidebery's auto-collapse is disabled, limit the sidebar header width to the specified value */
+    @media (-moz-bool-pref: "uc.flex.disable-sidebery-autohide") and (not (-moz-bool-pref: "uc.flex.fully-hide-sidebery")) and (not (display-mode: fullscreen)) {
+        --sidebar-background-color: var(--uc-sidebar-bgcolor) !important;
+        #sidebar-header:not(:hover):not(:has(.active)) {
+            max-width: var(--uc-sidebar-header-width);
+            min-width: var(--uc-sidebar-header-width);
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
         #sidebar-header:not(:hover):not(:has(.active)) {
-            opacity: 0.87 !important;
+            opacity: 0.87;
         }
     }
 
     &:not(:has(.active)) #sidebar-header:not(:hover) #sidebar-switcher-target,
     #sidebar-header:not(:hover) #sidebar-close {
         /* BAD NEWS: display: none !important; */
-        opacity: 0 !important;
+        opacity: 0;
         transition: opacity 0ms ease-in-out 0ms;
     }
 
@@ -118,39 +89,29 @@
     }
 }
 
-:root[inFullscreen] {
+@media (-moz-bool-pref: "uc.flex.fully-hide-sidebery"), (display-mode: fullscreen) {
     #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
         &:hover #sidebar-header:not(:hover):not(:has(.active)) {
             --uc-sidebar-width: 44px;
-            max-height: 5px !important;
-            min-height: 5px !important;
-            min-width: var(--uc-sidebar-width) !important;
+            max-height: 5px;
+            min-height: 5px;
+            min-width: var(--uc-sidebar-width);
             overflow: hidden;
             padding: 0 !important;
-            background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 50%, var(--uc-sidebar-bgcolor)) !important;
-            opacity: 1 !important;
+            background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 50%, var(--uc-sidebar-bgcolor));
+            opacity: 1;
             transition:
-                max-height var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                min-height var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                min-width var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                padding var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-                    var(--uc-hover-sidebar-delay),
-                background-color 0ms var(--uc-autohide-transition-type) 0ms,
-                opacity 0ms var(--uc-autohide-transition-type) 0ms;
+                max-height var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+                min-height var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+                min-width var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+                padding var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+                background-color var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay),
+                opacity 0ms ease-in-out 0ms;
         }
 
         @media (prefers-color-scheme: dark) {
             &:hover #sidebar-header:not(:hover):not(:has(.active)) {
-                background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 70%, var(--uc-sidebar-bgcolor)) !important;
-            }
-        }
-
-        @media (-moz-bool-pref: "uc.flex.sidebery-fast-hover-expand") {
-            &:not(:hover) #sidebar-header:not(:hover):not(:has(.active)) {
-                transition: none !important;
+                background-color: color-mix(in srgb, var(--uc-sidebar-header-stripe) 87%, var(--uc-sidebar-bgcolor));
             }
         }
     }

diff --git a/Profiles/chrome/components/uc-uni-extensions.css b/Profiles/chrome/components/uc-uni-extensions.css
@@ -75,15 +75,17 @@
     }
     */
 
+    /*
     #unified-extensions-view #unified-extensions-area {
-    /*     padding-top: 0px !important; */
-    /*     padding-bottom: 0px !important; */
-    /*     border-bottom: 0px solid #aeaeae33 !important; */
+        padding-top: 0px !important;
+        padding-bottom: 0px !important;
+        border-bottom: 0px solid #aeaeae33 !important;
     }
 
     #unified-extensions-view .unified-extensions-list {
-    /*     border-top: 1px solid #aeaeae33 !important; */
+        border-top: 1px solid #aeaeae33 !important;
     }
+    */
 
     #wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls,
     #wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls,

diff --git a/Profiles/chrome/components/uc-urlbar.css b/Profiles/chrome/components/uc-urlbar.css
@@ -187,6 +187,7 @@
 #urlbar-zoom-button {
     background-color: var(--bg) !important;
     border-radius: 16px !important;
+    opacity: 0.8;
     &:hover {
         background-color: var(--urlbar-box-hover-bgcolor) !important;
     }

diff --git a/Profiles/chrome/components/uc-variables.css b/Profiles/chrome/components/uc-variables.css
@@ -82,6 +82,11 @@
         @media (-moz-bool-pref: "uc.flex.increase-sidebery-expanded-width") {
             --uc-sidebar-hover-width: 260px;
         }
+        /* Set the display width of Sidebery and the sidebar header when Sidebery's auto-collapse is disabled */
+        @media (-moz-bool-pref: "uc.flex.disable-sidebery-autohide") {
+            --uc-sidebar-width: var(--uc-sidebar-hover-width);
+            --uc-sidebar-header-width: 44px;
+        }
         /* Trigger width for expanding Sidebery on hover when fully hidden or in fullscreen */
         @media (-moz-bool-pref: "uc.flex.fully-hide-sidebery"), (display-mode: fullscreen) {
             --uc-sidebar-width: 1px;
@@ -102,9 +107,13 @@
                 --uc-bookmarks-margin-left: 10px;
             }
         }
-        --uc-bg-y-padding: 17px;
-        @media not ((-moz-bool-pref: "uc.flex.disable-bookmarks-autohide") or (-moz-bool-pref: "uc.flex.fully-hide-toolbox") or (-moz-bool-pref: "uc.flex.fully-hide-sidebery")) {
-            @media (-moz-bool-pref: "uc.flex.allow-addons-to-change-toolbar-color") {
+        /**
+         * Adjust the vertical and horizontal offsets of the toolbar background image 
+         * when themes and addons are allowed to customize the toolbar background color and image. 
+         */
+        --uc-bg-y-padding: 16px;
+        @media (-moz-bool-pref: "uc.flex.allow-addons-to-change-toolbar-color") {
+            @media not ((-moz-bool-pref: "uc.flex.disable-bookmarks-autohide") or (-moz-bool-pref: "uc.flex.fully-hide-toolbox") or (-moz-bool-pref: "uc.flex.fully-hide-sidebery")) {
                 &:not([inFullscreen]):not([customizing]) {
                     &:has(#sidebar-box:not([positionend])) {
                         --uc-theme-bg-x-left-start: calc(-1 * var(--uc-sidebar-width));

diff --git a/Profiles/chrome/components/uc-verticalfox.css b/Profiles/chrome/components/uc-verticalfox.css
@@ -50,20 +50,25 @@
         display: none;
     }
 
-    #sidebar {
-        transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type)
-            var(--uc-autohide-sidebar-delay) !important;
-        min-width: var(--uc-sidebar-width) !important;
-        will-change: min-width;
-        @media (-moz-bool-pref: "uc.flex.sidebery-fast-hover-expand") {
-            transition: none !important;
+    /* Hide Sidebery when auto-collapse is disabled but full hiding of Sidebery or fullscreen mode is enabled */
+    @media not (-moz-bool-pref: "uc.flex.disable-sidebery-autohide"),
+        (-moz-bool-pref: "uc.flex.fully-hide-sidebery"),
+        (display-mode: fullscreen) {
+        #sidebar {
+            min-width: var(--uc-sidebar-width) !important;
+            transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type)
+                var(--uc-autohide-sidebar-delay) !important;
+            @media (-moz-bool-pref: "uc.flex.sidebery-fast-hover-expand") {
+                transition: none !important;
+            }
         }
-    }
 
-    &:hover > #sidebar {
-        min-width: var(--uc-sidebar-hover-width) !important;
-        transition: min-width var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
-            var(--uc-hover-sidebar-delay) !important;
+        &:hover > #sidebar {
+            will-change: min-width;
+            min-width: var(--uc-sidebar-hover-width) !important;
+            transition: min-width var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
+                var(--uc-hover-sidebar-delay) !important;
+        }
     }
 
     .sidebar-panel {
@@ -73,6 +78,7 @@
 
     .sidebar-panel #search-box {
         -moz-appearance: none !important;
+        appearance: none !important;
         background-color: rgba(249, 249, 250, 0.1) !important;
         color: inherit !important;
     }

diff --git a/Profiles/chrome/components/uc-window-controls.css b/Profiles/chrome/components/uc-window-controls.css
@@ -50,7 +50,7 @@
 */
 
 /* Hide menubar window controls when menubar is inactive */
-:root[tabsintitlebar="true"]:not([customizing]) {
+:root:is([tabsintitlebar], [customtitlebar]):not([customizing]) {
     #toolbar-menubar[inactive="true"] > .titlebar-buttonbox-container {
         display: none !important;
     }
@@ -79,7 +79,7 @@
 }
 
 /* Adjust menubar (title bar) height */
-:root[tabsintitlebar="true"]:not([customizing]):not([inFullscreen]) {
+:root:is([tabsintitlebar], [customtitlebar]):not([customizing]):not([inFullscreen]) {
     #navigator-toolbox #toolbar-menubar[autohide="false"] {
         margin-top: 0px;
         margin-bottom: -7px;
@@ -116,7 +116,7 @@
 =============================================*/
 
 /* ----- Close/min/max fix ----- */
-:root[tabsintitlebar="true"]:not([inFullscreen]):not([customizing])
+:root:is([tabsintitlebar], [customtitlebar]):not([inFullscreen]):not([customizing])
     :has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]))
     #navigator-toolbox
     #TabsToolbar
@@ -232,7 +232,7 @@
 }
 
 /* ----  Move nav-bar to make room for window controls ---- */
-:root[tabsintitlebar="true"]:not([customizing]) #nav-bar {
+:root:is([tabsintitlebar], [customtitlebar]):not([customizing]) #nav-bar {
     padding-left: 0px;
     padding-right: var(--uc-nav-bar-more-padding-right, var(--uc-nav-bar-padding-right)) !important;
 }