Merge pull request #92 from TGSAN/main

Update theme styling to the Phoenix design

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)*                  |
 | ------------------------------------------------------------------- |

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);
+  }
+}

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;

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 {

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,

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,19 +315,24 @@ 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 {
   content: "";
   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;
+}

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;
 }

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");