Siklos/edge-frfox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #92 from TGSAN/main

Browse source 
Update theme styling to the Phoenix design
This commit is contained in:
bmFtZQ 2023-07-26 17:19:32 +08:00 • committed by GitHub
commit afe59d6d96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

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

27
chrome/global/browser.css Normal file
View file

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

2
chrome/global/colors.css
View file

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

10
chrome/global/tweaks.css
View file

@ -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 {

9
chrome/toolbar/navbar.css
View file

@ -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,

49
chrome/toolbar/tabbar.css
View file

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

13
chrome/toolbar/urlbar.css
View file

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

1
chrome/userChrome.css
View file

@ -8,3 +8,4 @@
@import url("global/colors.css");
@import url("global/popup.css");
@import url("global/tweaks.css");
@import url("global/browser.css");