mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-13 12:51:20 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: Theme - Windows11 transparent(mica) frame

Browse source
This commit is contained in:
alstjr7375 2023-04-15 08:27:27 +09:00
parent 85bb81b741
commit 37730741f3
6 changed files with 119 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

38
css/leptonChrome.css generated
View file

@ -2175,14 +2175,7 @@
}
/*= Transparent ==============================================================*/
@supports -moz-bool-pref("userChrome.theme.transparent.frame") {
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) {
--lwt-accent-color: Window !important;
--lwt-text-color: WindowText !important;
}
:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
--lwt-accent-color: rgb(45, 36, 91) !important;
}
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10), (-moz-gtk-csd-available) {
#main-window,
#navigator-toolbox-background {
background-color: transparent !important;
@ -2205,6 +2198,35 @@
appearance: auto !important;
-moz-default-appearance: -moz-win-exclude-glass !important;
}
}
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
:root,
#navigator-toolbox {
--lwt-accent-color: transparent !important;
--lwt-text-color: WindowText !important;
}
#titlebar .toolbarbutton-1 {
--toolbarbutton-icon-fill: var(--lwt-text-color) !important;
}
:root:not([sizemode="fullscreen"]) .titlebar-buttonbox-container .titlebar-button:not(.titlebar-close:hover) {
list-style-image: none !important;
}
:root:not([sizemode="fullscreen"])
#toolbar-menubar[autohide="true"][inactive="true"]
+ #TabsToolbar
.titlebar-button:is(.titlebar-close:hover)
.toolbarbutton-icon {
transform: translateY(-7px) !important;
}
}
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) {
--lwt-accent-color: Window !important;
--lwt-text-color: WindowText !important;
}
:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
--lwt-accent-color: rgb(45, 36, 91) !important;
}
#titlebar {
--uc-frame-element-background: color-mix(in srgb, var(--lwt-accent-color, Window) 60%, transparent);
--toolbarbutton-hover-background: color-mix(in srgb, var(--lwt-accent-color, Window) 85%, transparent);

7
src/theme/_index.scss
View file

@ -36,12 +36,7 @@
/*= Transparent ==============================================================*/
@include Option("userChrome.theme.transparent.frame") {
@include OS($linux) {
@import "transparent/general";
}
@include OS($mac) {
@import "transparent/mac";
}
@import "transparent";
}
/*= Proton Theme Mode ========================================================*/

12
src/theme/_transparent.scss Normal file
View file

@ -0,0 +1,12 @@
@include OS($win10, $linux) {
@import "transparent/general";
}
@include OS($win10) {
@import "transparent/win11";
}
@include OS($linux) {
@import "transparent/linux";
}
@include OS($mac) {
@import "transparent/mac";
}

58
src/theme/transparent/_general.scss
View file

@ -1,13 +1,3 @@
// Frame
:root:not(:-moz-lwtheme) {
--lwt-accent-color: Window !important;
--lwt-text-color: WindowText !important;
}
:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
// Alpenglow theme
--lwt-accent-color: rgb(45, 36, 91) !important;
}
#main-window,
#navigator-toolbox-background {
background-color: transparent !important;
@ -35,51 +25,3 @@
appearance: auto !important;
-moz-default-appearance: -moz-win-exclude-glass !important;
}
// Set Colors
@function frameTransparent($per: 60%, $transparent: transparent) {
@return color-mix(
in srgb,
var(--lwt-accent-color, Window) $per,
$transparent
);
}
#titlebar {
--uc-frame-element-background: #{ frameTransparent() };
--toolbarbutton-hover-background: #{ frameTransparent(85%) };
@include Dark {
--toolbarbutton-hover-background: #{ frameTransparent(40%, rgba(255, 255, 255, 0.25)) };
}
}
#main-menubar:not(:-moz-window-inactive),
.titlebar-buttonbox-container:not(:-moz-window-inactive) {
background-color: var(--uc-frame-element-background);
border-radius: 4px;
}
#TabsToolbar {
--toolbarseparator-color: transparent;
.tabbrowser-tab
> .tab-stack
> .tab-background:not([selected="true"], [multiselected]) {
background-color: var(--uc-frame-element-background);
}
#firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
.tabbrowser-tab:hover
> .tab-stack
> .tab-background:not([selected="true"], [multiselected]) {
background-color: var(--toolbarbutton-hover-background) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
}
}
#scrollbutton-up,
#scrollbutton-down,
#alltabs-button > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
background-color: var(--uc-frame-element-background);
}

57
src/theme/transparent/_linux.scss Normal file
View file

@ -0,0 +1,57 @@
// Frame
:root:not(:-moz-lwtheme) {
--lwt-accent-color: Window !important;
--lwt-text-color: WindowText !important;
}
:root[style*="--focus-outline-color: rgb(172, 112, 255); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);"] {
// Alpenglow theme
--lwt-accent-color: rgb(45, 36, 91) !important;
}
// Set Colors
@function frameTransparent($per: 60%, $transparent: transparent) {
@return color-mix(
in srgb,
var(--lwt-accent-color, Window) $per,
$transparent
);
}
#titlebar {
--uc-frame-element-background: #{ frameTransparent() };
--toolbarbutton-hover-background: #{ frameTransparent(85%) };
@include Dark {
--toolbarbutton-hover-background: #{ frameTransparent(40%, rgba(255, 255, 255, 0.25)) };
}
}
#main-menubar:not(:-moz-window-inactive),
.titlebar-buttonbox-container:not(:-moz-window-inactive) {
background-color: var(--uc-frame-element-background);
border-radius: 4px;
}
#TabsToolbar {
--toolbarseparator-color: transparent;
.tabbrowser-tab
> .tab-stack
> .tab-background:not([selected="true"], [multiselected]) {
background-color: var(--uc-frame-element-background);
}
#firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
.tabbrowser-tab:hover
> .tab-stack
> .tab-background:not([selected="true"], [multiselected]) {
background-color: var(--toolbarbutton-hover-background) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
}
}
#scrollbutton-up,
#scrollbutton-down,
#alltabs-button > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
background-color: var(--uc-frame-element-background);
}

19
src/theme/transparent/_win11.scss Normal file
View file

@ -0,0 +1,19 @@
// @media (-moz-windows-accent-color-in-titlebar: 0) {
// }
:root,
#navigator-toolbox {
--lwt-accent-color: transparent !important; // Window
--lwt-text-color: WindowText !important;
}
#titlebar .toolbarbutton-1 {
--toolbarbutton-icon-fill: var(--lwt-text-color) !important;
}
:root:not([sizemode="fullscreen"]) .titlebar-buttonbox-container .titlebar-button:not(.titlebar-close:hover) {
list-style-image: none !important;
}
:root:not([sizemode="fullscreen"]) #toolbar-menubar[autohide="true"][inactive="true"] + #TabsToolbar .titlebar-button:is(.titlebar-close:hover) .toolbarbutton-icon {
transform: translateY(-7px) !important;
}