diff --git a/chrome/global/browser.css b/chrome/global/browser.css index 962d78a..f294952 100644 --- a/chrome/global/browser.css +++ b/chrome/global/browser.css @@ -13,15 +13,62 @@ } @media (-moz-bool-pref: "uc.tweak.rounded-corners") { - :root #browser>#appcontent { - margin: 0px 3px 3px 3px; - border-radius: 8px; + /* Fix changes to the bookmarks bar made in Firefox 120 */ + :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel { + padding-top: 0 !important; + } + + :root[BookmarksToolbarOverlapsBrowser] #appcontent { + margin-top: var(--bookmarks-toolbar-overlapping-browser-height); + } + + :root { + --uc-tweak-rounded-corners-padding: 3px; + --uc-tweak-rounded-corners-border: 1px; + --uc-tweak-rounded-corners-radius: 8px; + + & #browser:not([style*="--sidebar-border-color"]) { + --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important; + } + } + + /* disable rounded corners in fullscreen, only if the toolbar is hidden */ + :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser { + --uc-tweak-rounded-corners-padding: 0; + --uc-tweak-rounded-corners-border: 0; + --uc-tweak-rounded-corners-radius: 0; + } + + #appcontent { + margin-inline: var(--uc-tweak-rounded-corners-padding); + margin-block-end: var(--uc-tweak-rounded-corners-padding); + border-radius: var(--uc-tweak-rounded-corners-radius); overflow: hidden; - border: 1.25px solid rgb(0 0 0 / .05); + border: 1px solid rgb(0 0 0 / .1); box-shadow: 0px 1px 2px rgb(0 0 0 / .1); } - - :root #browser { + + + /* apply rounded corners to sidebar */ + #sidebar-box { + margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; + margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; + border-radius: var(--uc-tweak-rounded-corners-radius) !important; + overflow: hidden !important; + border: 1px solid rgb(0 0 0 / .1); + + &[positionend] { + margin-inline-start: 0 !important; + margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; + } + } + + /* remove sidebar border */ + #sidebar-splitter { + border-inline-width: 0 !important; + } + + #browser { background-color: var(--browser-frame-bgcolor); } } diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 68bd0a5..f775789 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -68,6 +68,7 @@ --uc-private-browsing-indicator-text: var(--button-primary-color); --tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important; --tab-icon-overlay-fill: light-dark(#252525, #fff) !important; + --toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important; } /* ensure that dark mode is enabled completely in private browsing mode. */ diff --git a/chrome/global/popup.css b/chrome/global/popup.css index 20f055b..04e1409 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -403,7 +403,7 @@ panelview .toolbarbutton-1, panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, .menupopup-arrowscrollbox { background: var(--arrowpanel-background) !important; - border: 0 !important; + border: 1px solid var(--panel-separator-color) !important; } /* make room for menu shadow */ @@ -493,6 +493,10 @@ panelview .toolbarbutton-1, padding: 0 !important; background: none !important; border-top: 1px solid var(--panel-separator-color) !important; + + &::before { + content: unset !important; + } } #PlacesToolbar menupopup[placespopup="true"] menuseparator::before { diff --git a/chrome/toolbar/personalbar.css b/chrome/toolbar/personalbar.css index 0051896..0215c1c 100644 --- a/chrome/toolbar/personalbar.css +++ b/chrome/toolbar/personalbar.css @@ -4,39 +4,60 @@ --bookmark-block-padding: 6px !important; } +/* Bookmarks bar item sizing */ #personal-toolbar-empty-description, #PersonalToolbar .toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton) { - margin-block: 0 4px !important; - padding: var(--bookmark-block-padding) 6px !important; + margin-block: 2px 4px !important; + padding-block: var(--bookmark-block-padding) !important; + padding-inline: 6px !important; font-size: 12px !important; + + /* Adjust vertical label position on Windows */ + @media (-moz-platform: windows) { + & .toolbarbutton-text { + margin-block: -1px 0 !important; + } + } } #PersonalToolbar .toolbarbutton-1 { padding: 0 !important; } -#PlacesToolbarItems>toolbarseparator::before { - content: ""; - display: block; - border-inline-start: 1px solid var(--toolbarseparator-color) !important; - margin-block: 6px 10px !important; - border-image-source: none !important; +/* Bookmarks bar separators */ +#PlacesToolbarItems > toolbarseparator { + padding-inline: 1px !important; + + &::before { + content: ""; + display: block; + border-inline-start: 1px solid var(--toolbarseparator-color) !important; + margin-block: 8px 10px !important; + border-image-source: none !important; + } } +/* Left and Right padding of bookmarks bar */ #PersonalToolbar { padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 6px) !important; } +/* Spacing between icon and label for bookmarks bar items */ #managed-bookmarks>.toolbarbutton-icon, #bookmarks-toolbar-placeholder>.toolbarbutton-icon, #PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]), #OtherBookmarks.bookmark-item[container]>.toolbarbutton-icon { - margin-inline-end: 6px !important; + margin-inline-end: 8px !important; } +/* Sizing for bookmarks bar icons */ #PersonalToolbar .toolbarbutton-1>.toolbarbutton-icon { width: calc(2 * var(--bookmark-block-padding) + 16px) !important; height: calc(2 * var(--bookmark-block-padding) + 16px) !important; padding: var(--bookmark-block-padding) !important; } + +:root { + --bookmarks-toolbar-overlapping-browser-height: 34px !important; +} diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 781cf66..282d1ac 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -265,13 +265,15 @@ padding: 0 12px !important; } -.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { - height: 8px !important; - clip-path: inset(0 0 6px) !important; - border-radius: var(--tab-border-radius) !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - margin: 0 !important; +/* Tab container indicator */ +.tabbrowser-tab[usercontextid] .tab-background .tab-context-line { + height: 2px !important; + border-radius: 2px !important; + margin: 2px 7px 0 !important; +} + +.tabbrowser-tab[selected][usercontextid] .tab-background .tab-context-line { + margin-inline: 9px !important; } .titlebar-spacer[type="post-tabs"] {