From 6d703b384bd314e55eb60c7ca7d0b8c288f50c48 Mon Sep 17 00:00:00 2001 From: 2641a40fd44383320adde4b027a1d0b03bd550 <58827198+2641a40fd44383320adde4b027a1d0b03bd550@users.noreply.github.com> Date: Fri, 22 Sep 2023 12:02:58 +0000 Subject: [PATCH 1/2] Fix: Activity Stream - Use pseudo-element for background image #773 --- css/leptonChrome.css | 4 ++++ css/leptonChromeESR.css | 4 ++++ css/leptonContent.css | 11 +++++++---- css/leptonContentESR.css | 11 +++++++---- src/contents/_activity_stream.scss | 14 ++++++++------ 5 files changed, 30 insertions(+), 14 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ce29ebed..bf10826b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -13070,6 +13070,10 @@ #usercssloader-submenupopup > menuitem[data-l10n-id="edit-userContentCss-editor"] { --menuitem-image: url("chrome://global/skin/icons/page-portrait.svg"); } + #context_toggleToPrivateContainer, + #open_in_private_container { + --menuitem-image: url("../icons/private-favicon.svg"); + } #toggle_statusBar { --menuitem-image: url("../icons/pulse-square.svg"); } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 891a65eb..db1f1f62 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -13682,6 +13682,10 @@ #usercssloader-submenupopup > menuitem[data-l10n-id="edit-userContentCss-editor"] { --menuitem-image: url("chrome://global/skin/icons/page-portrait.svg"); } + #context_toggleToPrivateContainer, + #open_in_private_container { + --menuitem-image: url("../icons/private-favicon.svg"); + } #toggle_statusBar { --menuitem-image: url("../icons/pulse-square.svg"); } diff --git a/css/leptonContent.css b/css/leptonContent.css index f5a56848..615ea4fe 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -490,18 +490,21 @@ padding-top: 0 !important; } } - /** Activity Stream - Hide Firefox's logo ***********************************/ + /** Activity Stream - Custom background image *******************************/ @supports -moz-bool-pref("userContent.newTab.background_image") { - body { + body::before { + content: ""; + position: absolute; + inset: 0; background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); background-size: cover; /* or auto auto */ background-repeat: no-repeat; background-position: right top; background-attachment: fixed; + /** Use night sky version in dark mode **********************************/ } - /** Use night sky version in dark mode ************************************/ @media (prefers-color-scheme: dark) { - body { + body::before { background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg")); } } diff --git a/css/leptonContentESR.css b/css/leptonContentESR.css index 6ca64791..8cc4b83e 100644 --- a/css/leptonContentESR.css +++ b/css/leptonContentESR.css @@ -490,18 +490,21 @@ padding-top: 0 !important; } } - /** Activity Stream - Hide Firefox's logo ***********************************/ + /** Activity Stream - Custom background image *******************************/ @supports -moz-bool-pref("userContent.newTab.background_image") { - body { + body::before { + content: ""; + position: absolute; + inset: 0; background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); background-size: cover; /* or auto auto */ background-repeat: no-repeat; background-position: right top; background-attachment: fixed; + /** Use night sky version in dark mode **********************************/ } - /** Use night sky version in dark mode ************************************/ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - body { + body::before { background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg")); } } diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 166a3527..7e42e3ae 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -218,20 +218,22 @@ } } - /** Activity Stream - Hide Firefox's logo ***********************************/ + /** Activity Stream - Custom background image *******************************/ @include Option("userContent.newTab.background_image") { - body { + body::before { + content: ''; + position: absolute; + inset: 0; + // https://best-wallpaper.net/Forest-trees-sunset-art-picture_wallpapers.html background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); background-size: cover; /* or auto auto */ background-repeat: no-repeat; background-position: right top; background-attachment: fixed; - } - /** Use night sky version in dark mode ************************************/ - @include Dark { - body { + /** Use night sky version in dark mode **********************************/ + @include Dark { background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg")); } } From 2883774f307151b76e2db70b1ab2658460d17086 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 23 Sep 2023 21:07:52 +0900 Subject: [PATCH 2/2] Fix: Activity Stream - Background element position to `fixed` --- css/leptonContent.css | 5 +++-- css/leptonContentESR.css | 5 +++-- src/contents/_activity_stream.scss | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/css/leptonContent.css b/css/leptonContent.css index 615ea4fe..e15dac22 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -494,8 +494,9 @@ @supports -moz-bool-pref("userContent.newTab.background_image") { body::before { content: ""; - position: absolute; - inset: 0; + position: fixed; + width: 100%; + height: 100%; background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); background-size: cover; /* or auto auto */ background-repeat: no-repeat; diff --git a/css/leptonContentESR.css b/css/leptonContentESR.css index 8cc4b83e..224b3ebb 100644 --- a/css/leptonContentESR.css +++ b/css/leptonContentESR.css @@ -494,8 +494,9 @@ @supports -moz-bool-pref("userContent.newTab.background_image") { body::before { content: ""; - position: absolute; - inset: 0; + position: fixed; + width: 100%; + height: 100%; background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); background-size: cover; /* or auto auto */ background-repeat: no-repeat; diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 7e42e3ae..696a7223 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -222,8 +222,9 @@ @include Option("userContent.newTab.background_image") { body::before { content: ''; - position: absolute; - inset: 0; + position: fixed; + width: 100%; + height: 100%; // https://best-wallpaper.net/Forest-trees-sunset-art-picture_wallpapers.html background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg"));