From a25a08819ad36b3601a23123458edded0d849f7e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Feb 2024 02:01:35 +0900 Subject: [PATCH] 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 41ee8182..586e9a38 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 c7b7863d..1010c08a 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 3911d6e1..ef6deb33 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)) */