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

apply edge colors to 'light' and 'dark' themes #30

Browse source
This commit is contained in:
bmFtZQ 2022-06-10 21:42:06 +08:00
parent 1a8b57cb66
commit 52b5647d14
5 changed files with 56 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -48,7 +48,7 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
|enable Mica toolbar background (Windows 11 only)|
|-|
|**See [Mica Tweak Instructions (Windows 11 Only)](#mica-tweak-instructions-windows-11-only) for installation instructions.**|
|**NOTE: Only works on default theme: 'System theme - auto'**|
|**NOTE: Only works on default themes: 'System theme - auto', 'Light' and 'Dark'**|
|`uc.tweak.win11-mica`|
|force tab background colour to `--toolbar-bg` (useful for Proton themes)|

2
chrome/content/newtab.css
View file

@ -30,7 +30,7 @@
--newtab-button-secondary-color: inherit !important;
}
body[style*="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1);"]:not([style*="--newtab-background-color-secondary"])[lwt-newtab-brighttext],
body[style*="--newtab-background-color: rgb(43, 42, 51)"][lwt-newtab-brighttext],
body:not([style*="color"])[lwt-newtab-brighttext] {
--newtab-background-color: #252525 !important;
--newtab-background-color-secondary: #4A4A4A !important;

18
chrome/global/colors.css
View file

@ -1,7 +1,8 @@
/* EdgeFr-Fox by bmFtZQ - colors.css */
/* light */
:root:not(:-moz-lwtheme) {
:root:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] {
--lwt-accent-color: #cecece !important;
--lwt-accent-color-inactive: #e8e8e8 !important;
--lwt-text-color: #000 !important;
@ -67,7 +68,8 @@
}
/* dark */
:root[lwt-default-theme-in-dark-mode="true"] {
:root[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
--lwt-accent-color: #1C1C1C !important;
--lwt-accent-color-inactive: #2e2e2e !important;
--lwt-text-color: #E5E5E5 !important;
@ -130,19 +132,23 @@
}
/* Change Colour of page when loading */
:root:not(:-moz-lwtheme) #tabbrowser-tabpanels {
:root:not(:-moz-lwtheme) #tabbrowser-tabpanels,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #tabbrowser-tabpanels {
background-color: #f7f7f7 !important;
}
:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels {
:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels,
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] #tabbrowser-tabpanels {
background-color: #252525 !important;
}
/* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] .titlebar-buttonbox {
color: #000 !important;
}
:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox {
:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox,
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"][tabsintitlebar] .titlebar-buttonbox {
color: #fff !important;
}

51
chrome/global/tweaks.css
View file

@ -46,13 +46,15 @@ browsing indicator) */
}
@supports -moz-bool-pref("uc.tweak.floating-tabs") {
:root:not(:-moz-lwtheme) {
:root:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] {
--lwt-accent-color: #f3f3f3 !important;
--lwt-accent-color-inactive: unset !important;
--toolbar-bgcolor: #fff !important;
}
:root[lwt-default-theme-in-dark-mode="true"] {
:root[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
--toolbar-bgcolor: #4D4D4D !important;
--lwt-accent-color-inactive: unset !important;
--chrome-content-separator-color: #535353 !important;
@ -137,18 +139,23 @@ browsing indicator) */
@supports -moz-bool-pref("uc.tweak.win11-mica") {
/* enable mica appearance */
#main-window:not(:-moz-lwtheme),
#main-window[lwt-default-theme-in-dark-mode="true"] {
#main-window[style*="--lwt-accent-color: rgb(240, 240, 244)"],
#main-window[lwt-default-theme-in-dark-mode="true"],
#main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
appearance: -moz-win-glass !important;
background: transparent !important;
}
#main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
#main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive),
#main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] #navigator-toolbox:not(:-moz-window-inactive) {
background: transparent !important;
}
@supports -moz-bool-pref("uc.tweak.floating-tabs") {
#navigator-toolbox:not(:-moz-lwtheme),
#main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
#main-window[style*="--lwt-accent-color: rgb(240, 240, 244)"] #navigator-toolbox,
#main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive),
#main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] #navigator-toolbox:not(:-moz-window-inactive) {
background: transparent !important;
}
}
@ -159,36 +166,56 @@ browsing indicator) */
}
/* color adjustments */
:root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
:root:not(:-moz-lwtheme):not(:-moz-window-inactive),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"]:not(:-moz-window-inactive) {
--lwt-accent-color: #00000020 !important;
}
@supports -moz-bool-pref("uc.tweak.floating-tabs") {
:root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
:root:not(:-moz-lwtheme):not(:-moz-window-inactive),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"]:not(:-moz-window-inactive) {
--toolbar-bgcolor: #ffffffcc !important;
}
:root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
:root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive),
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]:not(:-moz-window-inactive)
{
--toolbar-bgcolor: #ffffff20 !important;
}
}
/* line up buttons with duplicate icons from -moz-win-glass */
:root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container {
:root:is(:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
) .titlebar-buttonbox-container {
--uc-titlebar-button-size: 30px;
--uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin));
margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important;
}
:root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
:root:is(:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
list-style-image: none !important;
}
:root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
:root:is(:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
padding-block: 7px 9px !important;
}
:root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
:root:is(:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
padding-block: 7px 9px !important;
padding-right: 19px !important;
}

4
chrome/toolbar/urlbar.css
View file

@ -14,7 +14,9 @@
}
#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme),
#searchbar:not(:-moz-lwtheme):focus-within {
#searchbar:not(:-moz-lwtheme):focus-within,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within {
outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
}