diff --git a/README.md b/README.md index 8373700..24bbb4c 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,17 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse | ----------------------------- | | `uc.tweak.disable-drag-space` | -| enable Edge style floating tabs | -| ------------------------------- | -| `uc.tweak.floating-tabs` | +| enable rounded corners | +| -------------------------- | +| `uc.tweak.rounded-corners` | + +| enable Edge style floating tabs | +| ---------------------------------------------------------------------------------------------------------------- | +| `uc.tweak.floating-tabs` | +| **OPTIONAL1: Make the top and bottom margins of the tab equal** | +| `uc.tweak.floating-tabs.equal-margin` | +| **OPTIONAL2: Hide the separator of adjacent tabs (need to wait for Firefox support, or forced enable with bug)** | +| `layout.css.has-selector.enabled` | | enable Mica toolbar background *(Windows 11 only)* | | ------------------------------------------------------------------- | diff --git a/chrome/global/browser.css b/chrome/global/browser.css new file mode 100644 index 0000000..b5572ae --- /dev/null +++ b/chrome/global/browser.css @@ -0,0 +1,27 @@ +/* EdgeFr-Fox 2 - browser */ + +@supports (-moz-bool-pref("uc.tweak.floating-tabs")) { + :root { + --browser-frame-bgcolor: var(--lwt-accent-color); + } +} + +@supports (not -moz-bool-pref("uc.tweak.floating-tabs")) { + :root { + --browser-frame-bgcolor: var(--toolbar-bgcolor); + } +} + +@supports (-moz-bool-pref("uc.tweak.rounded-corners")) { + :root #browser>#appcontent { + margin: 0px 3px 3px 3px; + border-radius: 8px; + overflow: hidden; + border: 1.25px solid rgba(0, 0, 0, 0.05); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + } + + :root #browser { + background-color: var(--browser-frame-bgcolor); + } +} diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 8623f46..2be755b 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -21,6 +21,7 @@ --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-hover-highlight-color: rgba(192, 192, 192, 0.5) !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; @@ -88,6 +89,7 @@ --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-hover-highlight-color: rgba(128, 128, 128, 0.5) !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; diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index f63250c..e9550f1 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -89,16 +89,6 @@ bugs with certain themes eg. dark text on dark background.) */ outline-offset: -1px !important; } - .tabbrowser-tab[selected] .tab-label { - font-weight: 500 !important; - } - - @media (-moz-platform: windows) { - .tabbrowser-tab[selected] .tab-label { - font-weight: 600 !important; - } - } - /* adjust spacing of area above tabs */ @media not (-moz-platform: macos) { :root[sizemode="maximized"] #titlebar { diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css index cbf2e7f..cb6aba3 100644 --- a/chrome/toolbar/navbar.css +++ b/chrome/toolbar/navbar.css @@ -1,7 +1,7 @@ /* EdgeFr-Fox by bmFtZQ - navbar.css */ :root { - --toolbarbutton-border-radius: 2px !important; + --toolbarbutton-border-radius: 4px !important; --toolbarbutton-inner-padding: 7px !important; --uc-toolbarbutton-inner-inline-padding: 12px !important; --tabs-navbar-shadow-size: 0 !important; @@ -21,13 +21,18 @@ #reload-button>.toolbarbutton-animatable-box, #stop-button>.toolbarbutton-animatable-box { top: calc(50% - 10px) !important; - margin-inline-start: calc((16px + 2 * var(--uc-toolbarbutton-inner-inline-padding) - 20px) / 2) !important; } #nav-bar-customization-target :where(#reload-button, #stop-button)>.toolbarbutton-icon { padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; } +@supports (-moz-bool-pref("uc.tweak.rounded-corners")) { + #navigator-toolbox { + border-bottom: none !important; + } +} + /* account button */ #navigator-toolbox>toolbar #fxa-toolbar-menu-button, #navigator-toolbox>toolbar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack, diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 92abd56..6397907 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -1,13 +1,25 @@ /* EdgeFr-Fox 2 - tabbar */ +@supports -moz-bool-pref("uc.tweak.floating-tabs.equal-margin") and -moz-bool-pref("uc.tweak.floating-tabs") { + :root #titlebar { + --tab-block-margin: 5px !important; + } +} + +@supports (not -moz-bool-pref("uc.tweak.floating-tabs.equal-margin")) or (not -moz-bool-pref("uc.tweak.floating-tabs")) { + :root #titlebar { + --tab-block-margin: 8px !important; + } +} + :root #titlebar { --tab-min-height: 32px !important; --inline-tab-padding: 11px !important; - --tab-border-radius: 4px !important; - --tab-block-margin: 8px !important; + --tab-border-radius: 8px !important; --uc-toolbarbutton-inner-padding: 6px !important; - --toolbarbutton-border-radius: 2px !important; + --toolbarbutton-border-radius: 4px !important; + --toolbarbutton-tabsline-border-radius: 8px !important; --tabs-navbar-shadow-size: 0 !important; --tab-shadow-max-size: 0 !important; } @@ -153,6 +165,10 @@ color: var(--lwt-tab-text, var(--toolbar-color)) !important; } +.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { + z-index: 1; +} + .tab-close-button { margin-inline-end: 8px !important; width: 17px !important; @@ -234,7 +250,7 @@ .tabbrowser-tab { font-size: 12px !important; padding-inline: 0 !important; - overflow-clip-margin: 4px !important; + overflow-clip-margin: 8px !important; } #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon, @@ -243,6 +259,11 @@ padding: var(--uc-toolbarbutton-inner-padding) calc(var(--uc-toolbarbutton-inner-padding) + 2px) !important; } +#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-icon, +#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-tabsline-border-radius) !important; +} + #TabsToolbar .toolbarbutton-1>.toolbarbutton-icon { width: calc(2 * (var(--uc-toolbarbutton-inner-padding) + 2px) + 16px) !important; height: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important; @@ -294,7 +315,7 @@ toolbarbutton[part="scrollbutton-down"] { /* tab separators */ .tabbrowser-tab:not([last-visible-tab="true"]) { - margin-inline-end: -1px !important; + margin-inline-end: 3px !important; } .tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after { @@ -302,11 +323,16 @@ toolbarbutton[part="scrollbutton-down"] { position: absolute; display: block; height: 20px; - right: 0; + right: -1px; top: 6px; border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent); } +/* need layout.css.has-selector.enabled */ +.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after { + display: none; +} + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; } @@ -348,7 +374,10 @@ toolbarbutton[part="scrollbutton-down"] { } #tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:first-of-type { - margin-inline-start: 8px !important; + margin-inline-start: 14px !important; +} +#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:last-of-type { + margin-inline-end: 6px !important; } #tabbrowser-tabs { @@ -372,7 +401,7 @@ toolbarbutton[part="scrollbutton-down"] { --uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset; --uc-tab-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)), - 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2); + 0px 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); } :root[lwtheme-brighttext="true"] { @@ -463,3 +492,7 @@ toolbarbutton[part="scrollbutton-down"] { margin-block: 1px 2px; margin-inline: 6px 5px; } + +#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { + opacity: 1 !important; +} diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index 2ad44de..656dc15 100644 --- a/chrome/toolbar/urlbar.css +++ b/chrome/toolbar/urlbar.css @@ -3,7 +3,7 @@ :root { --urlbar-min-height: 30px !important; --urlbarView-item-inline-padding: 14px !important; - --urlbar-icon-border-radius: var(--toolbarbutton-border-radius) !important; + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) + 14px) !important; --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; --uc-urlbar-icon-inline-padding: calc(var(--uc-toolbarbutton-inner-inline-padding) - 2px) !important; --identity-box-margin-inline: 2px !important; @@ -116,7 +116,12 @@ #urlbar-background, #searchbar { - border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; + border-radius: var(--urlbar-icon-border-radius) !important; +} + +#urlbar:hover:not([suppress-focus-border])>#urlbar-background, +#searchbar:hover { + outline: 1.5px solid var(--urlbar-hover-highlight-color); } /* move tracking protection button */ @@ -126,6 +131,10 @@ order: 2 !important; } +#urlbar, #searchbar { + padding: 0 4px !important; +} + #urlbar-container:not(:hover) #tracking-protection-icon-container:not([open]) { visibility: collapse !important; } diff --git a/chrome/userChrome.css b/chrome/userChrome.css index 1053b75..e6a952b 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -8,3 +8,4 @@ @import url("global/colors.css"); @import url("global/popup.css"); @import url("global/tweaks.css"); +@import url("global/browser.css");