From 651cf12fd3f7189a651c7f308967d58a062d1adf Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 26 Jan 2024 08:25:19 +0900 Subject: [PATCH 01/10] Fix: Icons - Login page #862 --- css/leptonContent.css | 16 ++++++++++++++++ css/leptonContentESR.css | 7 +++++++ src/contents/_context_menu.scss | 6 ++++++ src/icons/_login_page.scss | 3 +++ 4 files changed, 32 insertions(+) create mode 100644 src/icons/_login_page.scss diff --git a/css/leptonContent.css b/css/leptonContent.css index d51e236..8d46fb2 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -3576,6 +3576,13 @@ } } } + @-moz-document url-prefix("about:logins") { + @supports -moz-bool-pref("userChrome.icon.context_menu") { + .menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; + } + } + } } } /** Download Panel ************************************************************/ @@ -7312,6 +7319,15 @@ } } } +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") { + @-moz-document url-prefix("about:logins") { + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { + .menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; + } + } + } +} /** Download Panel ************************************************************/ @-moz-document url-prefix("about:downloads") { @media (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.download_panel") { diff --git a/css/leptonContentESR.css b/css/leptonContentESR.css index 3613979..1f657de 100644 --- a/css/leptonContentESR.css +++ b/css/leptonContentESR.css @@ -3715,6 +3715,13 @@ } } } + @-moz-document url-prefix("about:logins") { + @supports -moz-bool-pref("userChrome.icon.context_menu") { + .menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; + } + } + } } } /** Download Panel ************************************************************/ diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss index aa18c87..daec5c7 100644 --- a/src/contents/_context_menu.scss +++ b/src/contents/_context_menu.scss @@ -25,3 +25,9 @@ @import "../icons/addon_page"; } } + +@include moz-document(url-prefix "about:logins") { + @include Option("userChrome.icon.context_menu") { + @import "../icons/login_page"; + } +} diff --git a/src/icons/_login_page.scss b/src/icons/_login_page.scss new file mode 100644 index 0000000..f1f26dc --- /dev/null +++ b/src/icons/_login_page.scss @@ -0,0 +1,3 @@ +.menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; +} From 192d83f418a0a0077e3a0b45f40f6fe5fd681ed3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 28 Jan 2024 16:12:18 +0900 Subject: [PATCH 02/10] Fix: Tab - Background image #861 --- css/leptonChrome.css | 6 ++++++ css/leptonChromeESR.css | 3 +++ src/tab/selected_tab/_color_like_toolbar.scss | 3 +++ 3 files changed, 12 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 42fc5d4..67801d9 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6706,6 +6706,9 @@ */ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + background-position: 0, 0, right top; + background-attachment: scroll, scroll, fixed; + background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { :root:not([lwtheme-image]) @@ -20612,6 +20615,9 @@ */ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + background-position: 0, 0, right top; + background-attachment: scroll, scroll, fixed; + background-repeat: repeat-x, repeat-x, no-repeat !important; } } @media (-moz-bool-pref: "userChrome.tab.color_like_toolbar") and (-moz-bool-pref: "userChrome.theme.transparent.frame") { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index edee2db..9c3a04d 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7115,6 +7115,9 @@ */ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + background-position: 0, 0, right top; + background-attachment: scroll, scroll, fixed; + background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { :root:not([lwtheme-image]) diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index 5e3e323..8b77d21 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -16,6 +16,9 @@ */ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + background-position: 0, 0, right top; + background-attachment: scroll, scroll, fixed; + background-repeat: repeat-x, repeat-x, no-repeat !important; @include Option("userChrome.theme.transparent.frame") { :root:not([lwtheme-image]) & { From ed315431274ac367f89b7934b360ba2692cf544f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 30 Jan 2024 08:48:51 +0900 Subject: [PATCH 03/10] Fix: Theme - Better contrast for linux system theme urlbar #864 --- css/leptonChrome.css | 26 ++++++++++++++++++++++++ css/leptonChromeESR.css | 13 ++++++++++++ src/theme/system_default_theme/_gtk.scss | 15 ++++++++++++++ 3 files changed, 54 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 67801d9..41ee818 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -764,6 +764,19 @@ } } } + @media (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { + :root:not(:-moz-lwtheme) { + --toolbar-field-background-color: Field !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-border-color: ThreeDShadow !important; + } + } + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) #urlbar-background, + :root:not(:-moz-lwtheme) #searchbar { + background-color: var(--toolbar-field-background-color) !important; + } + } /*= Mac - Default like color =================================================*/ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:not(:-moz-lwtheme), @@ -14089,6 +14102,19 @@ --urlbar-popup-url-color: -moz-accent-color; } } +@media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { + :root:not(:-moz-lwtheme) { + --toolbar-field-background-color: Field !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-border-color: ThreeDShadow !important; + } +} +@media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) #urlbar-background, + :root:not(:-moz-lwtheme) #searchbar { + background-color: var(--toolbar-field-background-color) !important; + } +} @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 9c3a04d..c7b7863 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -983,6 +983,19 @@ } } } + @media (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { + :root:not(:-moz-lwtheme) { + --toolbar-field-background-color: Field !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-border-color: ThreeDShadow !important; + } + } + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) #urlbar-background, + :root:not(:-moz-lwtheme) #searchbar { + background-color: var(--toolbar-field-background-color) !important; + } + } /*= Mac - Default like color =================================================*/ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:not(:-moz-lwtheme), diff --git a/src/theme/system_default_theme/_gtk.scss b/src/theme/system_default_theme/_gtk.scss index fb4ec0f..1f72f54 100644 --- a/src/theme/system_default_theme/_gtk.scss +++ b/src/theme/system_default_theme/_gtk.scss @@ -5,4 +5,19 @@ --urlbar-popup-url-color: #{$accentColor}; } } + + // #864 + :root:not(:-moz-lwtheme) { + @media not (-moz-gtk-theme-family) { + // Rollback to color + --toolbar-field-background-color: Field !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-border-color: ThreeDShadow !important; + } + + #urlbar-background, #searchbar { + // Original: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)) + background-color: var(--toolbar-field-background-color) !important; + } + } } From 772cba205f20a447bed636ab85ba5332822f4fc4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 31 Jan 2024 08:01:03 +0900 Subject: [PATCH 04/10] Doc: CREDITS - Sponsors update --- CREDITS | 4 ++++ README.org | 1 + 2 files changed, 5 insertions(+) diff --git a/CREDITS b/CREDITS index ee1183f..22c743c 100644 --- a/CREDITS +++ b/CREDITS @@ -40,6 +40,10 @@ W: https://github.com/Cyberax N: AuRiMaS666 W: https://github.com/AuRiMaS666 +N: firefox9067 +E: firefox@snowdot.kr +W: https://github.com/firefox9067 + N: Jani Haiko E: haiko.jani@gmail.com W: https://github.com/ojaha065 diff --git a/README.org b/README.org index 894a13b..f38e3ea 100644 --- a/README.org +++ b/README.org @@ -209,6 +209,7 @@ Thanks to all sponsors & contributors to this project for providing help and dev [[https://github.com/Mike-Kennelly][@@html:@@]] [[https://github.com/Cyberax][@@html:@@]] [[https://github.com/AuRiMaS666][@@html:@@]] +[[https://github.com/firefox9067][@@html:@@]] - A donation was received from Safira on [[https://ko-fi.com/home/coffeeshop?txid=97e5fa0d-c73e-4308-a2fd-6b44b08cd828][Ko-Fi]] - Private sponsors: 3 From a25a08819ad36b3601a23123458edded0d849f7e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Feb 2024 02:01:35 +0900 Subject: [PATCH 05/10] Fix: Compatibility - Tab background color #867 --- css/leptonChrome.css | 32 ++++++++++++++++++++++++-------- css/leptonChromeESR.css | 15 +++++++++++---- src/compatibility/_theme.scss | 14 +++++++++++++- 3 files changed, 48 insertions(+), 13 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 41ee818..586e9a3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -102,22 +102,26 @@ } /*= Light Weight Theme =======================================================*/ /* Header Image */ - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; + background-color: var(--lwt-accent-color, Window) !important; + } + :root[lwtheme-image] > body:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; } @media (min-width: 2500px) { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: contain; } @supports -moz-bool-pref("userChrome.compatibility.covered_header_image") { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: cover; } } } - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + :root[lwtheme-image] > body #navigator-toolbox:-moz-lwtheme { background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; background-repeat: var(--lwt-background-tiling) !important; background-position: var(--lwt-background-alignment) !important; @@ -128,6 +132,9 @@ --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } + #customization-container { + background-color: transparent !important; /* Original: color-mix(in srgb, -moz-dialog 85%, white) */ + } /*= Findbar Border Color =====================================================*/ html|input.findbar-textbox { border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ @@ -13440,24 +13447,28 @@ } } @media (-moz-bool-pref: "userChrome.compatibility.theme") { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; + background-color: var(--lwt-accent-color, Window) !important; + } + :root[lwtheme-image] > body:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; } } @media (-moz-bool-pref: "userChrome.compatibility.theme") and (min-width: 2500px) { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: contain; } } @media (-moz-bool-pref: "userChrome.compatibility.theme") and (min-width: 2500px) and (-moz-bool-pref: "userChrome.compatibility.covered_header_image") { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: cover; } } @media (-moz-bool-pref: "userChrome.compatibility.theme") { - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + :root[lwtheme-image] > body #navigator-toolbox:-moz-lwtheme { background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; background-repeat: var(--lwt-background-tiling) !important; background-position: var(--lwt-background-alignment) !important; @@ -13470,6 +13481,11 @@ --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } } +@media (-moz-bool-pref: "userChrome.compatibility.theme") { + #customization-container { + background-color: transparent !important; /* Original: color-mix(in srgb, -moz-dialog 85%, white) */ + } +} @media (-moz-bool-pref: "userChrome.compatibility.theme") { html|input.findbar-textbox { border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index c7b7863..1010c08 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -102,22 +102,26 @@ } /*= Light Weight Theme =======================================================*/ /* Header Image */ - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; + background-color: var(--lwt-accent-color, Window) !important; + } + :root[lwtheme-image] > body:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; } @media (min-width: 2500px) { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: contain; } @supports -moz-bool-pref("userChrome.compatibility.covered_header_image") { - :root[lwtheme-image] { + :root[lwtheme-image] > body { background-size: cover; } } } - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + :root[lwtheme-image] > body #navigator-toolbox:-moz-lwtheme { background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; background-repeat: var(--lwt-background-tiling) !important; background-position: var(--lwt-background-alignment) !important; @@ -128,6 +132,9 @@ --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } + #customization-container { + background-color: transparent !important; /* Original: color-mix(in srgb, -moz-dialog 85%, white) */ + } /*= Findbar Border Color =====================================================*/ html|input.findbar-textbox { border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 3911d6e..ef6deb3 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -93,10 +93,18 @@ menu { /*= Light Weight Theme =======================================================*/ /* Header Image */ -:root[lwtheme-image] { +:root[lwtheme-image] > body { + // Linux compatibility: + // :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) { + // appearance: auto; + // } background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; + background-color: var(--lwt-accent-color, Window) !important; + &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; + } // For high-resolution screen's image ratio @media (min-width: 2500px) { @@ -122,6 +130,10 @@ menu { --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } +#customization-container { + background-color: transparent !important; /* Original: color-mix(in srgb, -moz-dialog 85%, white) */ +} + /*= Findbar Border Color =====================================================*/ html|input.findbar-textbox { border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ From 0f2a4790e2790a88efc9725fd42315d9141f2bed Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 16 Feb 2024 22:11:08 +0900 Subject: [PATCH 06/10] Add: User.js - Activate useful settings --- user.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/user.js b/user.js index ce9873c..fb61dcf 100644 --- a/user.js +++ b/user.js @@ -280,6 +280,14 @@ user_pref("userContent.page.dark_mode", true); // Need proton_color user_pref("userContent.page.proton", true); // Need proton_color // ** Useful Options *********************************************************** +// Tab preview +// https://blog.nightly.mozilla.org/2024/02/06/a-preview-of-tab-previews-these-weeks-in-firefox-issue-153/ +user_pref("browser.tabs.cardPreview.enabled", true); + +// Paste suggestion at urlbar +// https://blog.nightly.mozilla.org/2023/12/04/url-gonna-want-to-check-this-out-these-weeks-in-firefox-issue-150/ +user_pref("browser.urlbar.clipboard.featureGate", true); + // Integrated calculator at urlbar user_pref("browser.urlbar.suggest.calculator", true); @@ -290,6 +298,18 @@ user_pref("browser.urlbar.suggest.calculator", true); // user_pref("browser.tabs.drawInTitlebar", true); // user_pref("browser.tabs.inTitlebar", 1); // Nightly, 96 Above +// Searchbar, Removed from settings starting with FF v122 +// user_pref("browser.search.widget.inNavBar", true); + +// Firefox view search +// https://blog.nightly.mozilla.org/2023/12/14/better-searching-in-firefox-to-close-out-2023-these-weeks-in-firefox-issue-151/ +// user_pref("browser.firefox-view.search.enabled", true); +// user_pref("browser.firefox-view.virtual-list.enabled", true); + +// Firefox screenshot +// https://blog.nightly.mozilla.org/2024/01/22/happy-new-year-these-weeks-in-firefox-issue-152/ +// user_pref("screenshots.browser.component.enabled", true); + // ** Scrolling Settings ******************************************************* // == Only Sharpen Scrolling =================================================== // Pref Value Original From 20183e7a6cbeed582c960c1a2e87618d445c44cb Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 18 Feb 2024 23:43:05 +0900 Subject: [PATCH 07/10] Fix: Animation - Tabbar focus delay #470 --- css/leptonChrome.css | 46 +++++++++++++++++++++++++++++++----- css/leptonChromeESR.css | 22 ++++++++++++++--- src/decoration/_animate.scss | 27 ++++++++++++++++++--- 3 files changed, 83 insertions(+), 12 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 586e9a3..23f5b55 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3694,19 +3694,35 @@ transition-delay: 0s, 0s, 0.25s !important; } } - /*- Full Screen ------------------------------------------------------------*/ + /*- Titlebar & Full Screen -------------------------------------------------*/ + #titlebar { + will-change: background-color !important; + transition: background-color 0.2s var(--animation-easing-function) !important; + } + #titlebar:-moz-window-inactive { + transition: background-color 0.5s var(--animation-easing-function) !important; + } #navigator-toolbox { /* Full screen out */ - transition: margin-top 1s ease; + will-change: margin-top, background-color !important; + transition: margin-top 1s ease, background-color 0.2s var(--animation-easing-function) !important; transform-origin: top; } + #navigator-toolbox:-moz-window-inactive { + transition: margin-top 1s ease, background-color 0.5s var(--animation-easing-function) !important; + } #navigator-toolbox[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; animation-name: fullscreen; animation-timing-function: ease; /* Full screen navbar not hover */ - transition: margin-top 1.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox[inFullscreen="true"]:hover { margin-top: 0 !important; @@ -17068,7 +17084,7 @@ /* Buttons in URL bar */ /*- Border - Other Fields --------------------------------------------------*/ /*- Sidebar ----------------------------------------------------------------*/ - /*- Full Screen ------------------------------------------------------------*/ + /*- Titlebar & Full Screen -------------------------------------------------*/ /*- Expand - Synced Tabs ---------------------------------------------------*/ /*- Arrow - Synced Tabs ----------------------------------------------------*/ /*- Arrow - Edit Bookmark Popup --------------------------------------------*/ @@ -17180,19 +17196,37 @@ transition-delay: 0s, 0s, 0.25s !important; } } +@media (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { + #titlebar { + will-change: background-color !important; + transition: background-color 0.2s var(--animation-easing-function) !important; + } + #titlebar:-moz-window-inactive { + transition: background-color 0.5s var(--animation-easing-function) !important; + } +} @media (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { #navigator-toolbox { /* Full screen out */ - transition: margin-top 1s ease; + will-change: margin-top, background-color !important; + transition: margin-top 1s ease, background-color 0.2s var(--animation-easing-function) !important; transform-origin: top; } + #navigator-toolbox:-moz-window-inactive { + transition: margin-top 1s ease, background-color 0.5s var(--animation-easing-function) !important; + } #navigator-toolbox[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; animation-name: fullscreen; animation-timing-function: ease; /* Full screen navbar not hover */ - transition: margin-top 1.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox[inFullscreen="true"]:hover { margin-top: 0 !important; diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 1010c08..f94f632 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -4011,19 +4011,35 @@ transition-delay: 0s, 0s, 0.25s !important; } } - /*- Full Screen ------------------------------------------------------------*/ + /*- Titlebar & Full Screen -------------------------------------------------*/ + #titlebar { + will-change: background-color !important; + transition: background-color 0.2s var(--animation-easing-function) !important; + } + #titlebar:-moz-window-inactive { + transition: background-color 0.5s var(--animation-easing-function) !important; + } #navigator-toolbox { /* Full screen out */ - transition: margin-top 1s ease; + will-change: margin-top, background-color !important; + transition: margin-top 1s ease, background-color 0.2s var(--animation-easing-function) !important; transform-origin: top; } + #navigator-toolbox:-moz-window-inactive { + transition: margin-top 1s ease, background-color 0.5s var(--animation-easing-function) !important; + } #navigator-toolbox[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; animation-name: fullscreen; animation-timing-function: ease; /* Full screen navbar not hover */ - transition: margin-top 1.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.2s var(--animation-easing-function) !important; + } + #navigator-toolbox[inFullscreen="true"]:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.5s var(--animation-easing-function) !important; } #navigator-toolbox[inFullscreen="true"]:hover { margin-top: 0 !important; diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index a0b7cbb..8136471 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -124,12 +124,27 @@ xul|search-textbox.tabsFilter, } } -/*- Full Screen ------------------------------------------------------------*/ +/*- Titlebar & Full Screen -------------------------------------------------*/ +#titlebar { + will-change: background-color !important; + transition: background-color 0.2s var(--animation-easing-function) !important; + + &:-moz-window-inactive { + transition: background-color 0.5s var(--animation-easing-function) !important; + } +} #navigator-toolbox { /* Full screen out */ - transition: margin-top 1s ease; + will-change: margin-top, background-color !important; + transition: margin-top 1s ease, + background-color 0.2s var(--animation-easing-function) !important; transform-origin: top; + &:-moz-window-inactive { + transition: margin-top 1s ease, + background-color 0.5s var(--animation-easing-function) !important; + } + &[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; @@ -138,7 +153,13 @@ xul|search-textbox.tabsFilter, /* Full screen navbar not hover */ // transition: margin-top 0.3s var(--animation-easing-function) 50ms; - transition: margin-top 1.3s var(--animation-easing-function) 50ms; + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.2s var(--animation-easing-function) !important; + &:-moz-window-inactive { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + background-color 0.5s var(--animation-easing-function) !important; + } + &:hover { // Full screen navbar hover // transition-duration: 1.5s; // Not works, because !important From 41acca6f96dc7fa98ca09097421819b4448ca893 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 18 Feb 2024 23:54:17 +0900 Subject: [PATCH 08/10] Fix: Hidden - Tabbar padding and title container opacity #810 --- css/leptonChrome.css | 144 ++++++++++++++++++------- css/leptonChromeESR.css | 54 ++++++++++ src/tabbar/layout/_window_control.scss | 14 ++- 3 files changed, 175 insertions(+), 37 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 23f5b55..405d43e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5325,9 +5325,6 @@ } } @media (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -5398,6 +5395,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -5472,9 +5478,6 @@ } } @media (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -5545,6 +5548,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -5616,9 +5628,6 @@ } } @media (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -5689,6 +5698,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -5769,9 +5787,6 @@ } } @media screen and (max-width: 1100px) and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -5851,6 +5866,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } } @media screen and (max-width: 1100px) { @@ -5929,9 +5953,6 @@ } } @media screen and (min-width: 1100px) and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -6002,6 +6023,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -6075,9 +6105,6 @@ } } @media screen and (min-width: 1100px) and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -6148,6 +6175,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -18995,9 +19031,6 @@ (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) and (-moz-bool-pref: "userChrome.hidden.tabbar") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) and (-moz-bool-pref: "userChrome.hidden.tabbar") and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -19106,6 +19139,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) and (-moz-bool-pref: "userChrome.tabbar.on_bottom"), (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (not (-moz-bool-pref: "userChrome.tabbar.one_liner")) and (-moz-bool-pref: "userChrome.hidden.tabbar"), @@ -19213,9 +19255,6 @@ @media (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -19300,6 +19339,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first"), (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first"), @@ -19401,9 +19449,6 @@ @media (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows), (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -19488,6 +19533,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled"), (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive")) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled"), @@ -19619,9 +19673,6 @@ screen and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (-moz-bool-pref: "userChrome.hidden.tabbar") and (max-width: 1100px) and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (max-width: 1100px) and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (-moz-bool-pref: "userChrome.hidden.tabbar") and (max-width: 1100px) and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -19730,6 +19781,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (max-width: 1100px), screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (-moz-bool-pref: "userChrome.hidden.tabbar") and (max-width: 1100px), @@ -19837,9 +19897,6 @@ @media screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first") and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -19924,6 +19981,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first"), screen and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "userChrome.tabbar.one_liner.tabbar_first"), @@ -20025,9 +20091,6 @@ @media screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows), screen and (-moz-bool-pref: "userChrome.hidden.tabbar") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-platform: windows) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } @@ -20112,6 +20175,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } @media screen and (-moz-bool-pref: "userChrome.tabbar.on_bottom") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled"), screen and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (not (-moz-bool-pref: "userChrome.hidden.titlebar_container")) and (-moz-bool-pref: "userChrome.tabbar.one_liner") and (-moz-bool-pref: "userChrome.tabbar.one_liner.responsive") and (min-width: 1100px) and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled"), diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index f94f632..97612be 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -5780,6 +5780,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -5930,6 +5939,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -6077,6 +6095,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -6243,6 +6270,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } } @media screen and (max-width: 1100px) { @@ -6398,6 +6434,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) @@ -6548,6 +6593,15 @@ :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } + :root[tabsintitlebar] #titlebar { + z-index: 1; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + opacity: 1 !important; + } + :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index bcb07fc..2c45148 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -54,7 +54,9 @@ See the above repository for updates as well as full license text. */ @include OS($win) { :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; + @if mode.isESR() { + --uc-titlebar-padding: 8px; + } #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); @@ -127,6 +129,16 @@ See the above repository for updates as well as full license text. */ visibility: collapse !important; } } + + :root[tabsintitlebar] #titlebar { + z-index: 1; + &:-moz-window-inactive { + opacity: 1 !important; + .titlebar-buttonbox { + opacity: var(--inactive-titlebar-opacity); + } + } + } } /* At Activated Menubar */ From 3a0b786bc3237abfa5f4da6b2e2bbfff5dbfd2b1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 19 Feb 2024 01:17:21 +0900 Subject: [PATCH 09/10] Fix: Tab - Selected tab background color when moving --- css/leptonChrome.css | 12 ++++++++++++ css/leptonChromeESR.css | 6 ++++++ src/tab/selected_tab/_color_like_toolbar.scss | 4 ++++ 3 files changed, 22 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 405d43e..031b571 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6769,6 +6769,7 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -6783,6 +6784,11 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]) + #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected]:-moz-lwtheme, :root:not([lwtheme-image]) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -20754,6 +20760,7 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -20769,6 +20776,11 @@ } } @media (-moz-bool-pref: "userChrome.tab.color_like_toolbar") and (-moz-bool-pref: "userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]) + #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected]:-moz-lwtheme, :root:not([lwtheme-image]) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 97612be..9c60522 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -7196,6 +7196,7 @@ .tab-background:is([selected], [multiselected]) { background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } + #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -7210,6 +7211,11 @@ background-repeat: repeat-x, repeat-x, no-repeat !important; } @supports -moz-bool-pref("userChrome.theme.transparent.frame") { + :root:not([lwtheme-image]) + #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected]:-moz-lwtheme, :root:not([lwtheme-image]) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index 8b77d21..a8fc64f 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -7,6 +7,10 @@ background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important; } +#tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab From d91f2822b4b9f71d6fc7f7d870526fcf56719348 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 19 Feb 2024 01:26:50 +0900 Subject: [PATCH 10/10] Fix: Theme - Forced GTK URL view background color #864 --- css/leptonChrome.css | 8 +------- css/leptonChromeESR.css | 4 ---- src/theme/system_default_theme/_gtk.scss | 10 ++++------ 3 files changed, 5 insertions(+), 17 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 031b571..ac295ed 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -770,15 +770,11 @@ --urlbar-popup-url-color: -moz-accent-color; } } - } - @media (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { :root:not(:-moz-lwtheme) { --toolbar-field-background-color: Field !important; --toolbar-field-color: FieldText !important; --toolbar-field-border-color: ThreeDShadow !important; } - } - @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) #urlbar-background, :root:not(:-moz-lwtheme) #searchbar { background-color: var(--toolbar-field-background-color) !important; @@ -14176,14 +14172,12 @@ --urlbar-popup-url-color: -moz-accent-color; } } -@media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { +@media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) { --toolbar-field-background-color: Field !important; --toolbar-field-color: FieldText !important; --toolbar-field-border-color: ThreeDShadow !important; } -} -@media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) #urlbar-background, :root:not(:-moz-lwtheme) #searchbar { background-color: var(--toolbar-field-background-color) !important; diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 9c60522..25f348c 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -989,15 +989,11 @@ --urlbar-popup-url-color: -moz-accent-color; } } - } - @media (-moz-gtk-csd-available) and (not (-moz-gtk-theme-family)) { :root:not(:-moz-lwtheme) { --toolbar-field-background-color: Field !important; --toolbar-field-color: FieldText !important; --toolbar-field-border-color: ThreeDShadow !important; } - } - @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) #urlbar-background, :root:not(:-moz-lwtheme) #searchbar { background-color: var(--toolbar-field-background-color) !important; diff --git a/src/theme/system_default_theme/_gtk.scss b/src/theme/system_default_theme/_gtk.scss index 1f72f54..51010ef 100644 --- a/src/theme/system_default_theme/_gtk.scss +++ b/src/theme/system_default_theme/_gtk.scss @@ -8,12 +8,10 @@ // #864 :root:not(:-moz-lwtheme) { - @media not (-moz-gtk-theme-family) { - // Rollback to color - --toolbar-field-background-color: Field !important; - --toolbar-field-color: FieldText !important; - --toolbar-field-border-color: ThreeDShadow !important; - } + // Rollback to color + --toolbar-field-background-color: Field !important; + --toolbar-field-color: FieldText !important; + --toolbar-field-border-color: ThreeDShadow !important; #urlbar-background, #searchbar { // Original: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3))