mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-06 02:30:54 -08:00
Add: Theme - Linux transparent frame
This commit is contained in:
alstjr7375
parent
4ebd991874
commit
86d6fccb13
5 changed files with 186 additions and 0 deletions
83
css/leptonChrome.css
generated
83
css/leptonChrome.css
generated
|
|
@ -2173,6 +2173,76 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
/*= 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;
|
||||
}
|
||||
#main-window,
|
||||
#navigator-toolbox-background {
|
||||
background-color: transparent !important;
|
||||
appearance: auto !important;
|
||||
-moz-default-appearance: -moz-win-borderless-glass !important;
|
||||
}
|
||||
#navigator-toolbox {
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
#nav-bar,
|
||||
#PersonalToolbar {
|
||||
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
|
||||
background-repeat: repeat-x, var(--lwt-background-tiling);
|
||||
background-position: 0 0, var(--lwt-background-alignment);
|
||||
background-attachment: scroll, fixed !important;
|
||||
background-size: auto 100%, auto auto;
|
||||
}
|
||||
#appcontent {
|
||||
appearance: auto !important;
|
||||
-moz-default-appearance: -moz-win-exclude-glass !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);
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
#titlebar {
|
||||
--toolbarbutton-hover-background: color-mix(
|
||||
in srgb,
|
||||
var(--lwt-accent-color, Window) 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;
|
||||
}
|
||||
#TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
|
||||
background-color: var(--uc-frame-element-background);
|
||||
}
|
||||
#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
|
||||
#TabsToolbar .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);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Proton Theme Mode ========================================================*/
|
||||
@supports -moz-bool-pref("userChrome.theme.proton_chrome") {
|
||||
/*= Proton Commons ===========================================================*/
|
||||
|
|
@ -6631,6 +6701,19 @@
|
|||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.theme.transparent.frame") {
|
||||
:root:not([lwtheme-image])
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
|
||||
background-repeat: repeat-x, repeat-x, var(--lwt-background-tiling) !important;
|
||||
background-position: 0 0, 0 0, var(--lwt-background-alignment) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Multi Selected Color - More Contrast =====================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.multi_selected") {
|
||||
|
|
|
|||
|
|
@ -12,4 +12,14 @@
|
|||
*/
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
|
||||
@include Option("userChrome.theme.transparent.frame") {
|
||||
:root:not([lwtheme-image]) & {
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important;
|
||||
|
||||
background-repeat: repeat-x, repeat-x, var(--lwt-background-tiling) !important;
|
||||
background-position: 0 0, 0 0, var(--lwt-background-alignment) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,13 @@
|
|||
@import "fully_dark";
|
||||
}
|
||||
|
||||
/*= Transparent ==============================================================*/
|
||||
@include Option("userChrome.theme.transparent.frame") {
|
||||
@include OS($linux) {
|
||||
@import "transparent/general";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Proton Theme Mode ========================================================*/
|
||||
@include Option("userChrome.theme.proton_chrome") {
|
||||
@import "proton_chrome";
|
||||
|
|
|
|||
85
src/theme/transparent/_general.scss
Normal file
85
src/theme/transparent/_general.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
// 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;
|
||||
appearance: auto !important;
|
||||
-moz-default-appearance: -moz-win-borderless-glass !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
#nav-bar,
|
||||
#PersonalToolbar {
|
||||
background-image: linear-gradient(
|
||||
var(--toolbar-bgcolor),
|
||||
var(--toolbar-bgcolor)
|
||||
), var(--lwt-additional-images);
|
||||
background-repeat: repeat-x, var(--lwt-background-tiling);
|
||||
background-position: 0 0, var(--lwt-background-alignment);
|
||||
background-attachment: scroll, fixed !important;
|
||||
background-size: auto 100%, auto auto;
|
||||
}
|
||||
|
||||
#appcontent {
|
||||
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);
|
||||
}
|
||||
1
user.js
1
user.js
|
|
@ -71,6 +71,7 @@ user_pref("userChrome.rounding.square_tab", false);
|
|||
// user_pref("userChrome.theme.private", true);
|
||||
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
|
||||
// user_pref("userChrome.theme.monospace", true);
|
||||
// user_pref("userChrome.theme.transparent.frame", true);
|
||||
// user_pref("userChrome.theme.non_native_menu", true); // only for linux
|
||||
// user_pref("userChrome.compatibility.os.win11", true);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue