From d7087800eb69fd7d2f224f37ca7ef4579fae4b16 Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Tue, 22 Aug 2023 15:42:33 +0100 Subject: [PATCH 1/6] Consistent styling for the Pocket section to match that of the shortcuts section --- .../newtab/css/activity-stream-linux.css | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 2ae55a1ca4013..9697cb593a17e 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -2688,7 +2688,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { - color: var(--newtab-text-primary-color); + color: rgb(255, 255, 255); font-size: 17px; font-weight: 600; line-height: 20px; @@ -2702,7 +2702,7 @@ main.has-snippet { margin: auto; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a { - color: var(--newtab-primary-action-background); + color: #ffffff8e; font-weight: 500; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { @@ -2711,17 +2711,23 @@ main.has-snippet { .ds-onboarding-container, .ds-card-grid .ds-card { - background: #FFF; + background-color: color-mix(in srgb, var(--newtab-background-color) 50%, transparent); + border: 1px solid rgba(170, 170, 170, 0.6); border-radius: 4px; } +.ds-card-grid .ds-card:is(.active, :focus, :hover) { + background: var(--newtab-element-hover-color); +} [lwt-newtab-brighttext] .ds-onboarding-container, [lwt-newtab-brighttext] .ds-card-grid .ds-card { background: none; } +.floorp-backdrop-blur-enable .ds-card-grid .ds-card { + backdrop-filter: blur(12px); +} .ds-onboarding-container:not(.placeholder), .ds-card-grid .ds-card:not(.placeholder) { border-radius: 8px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } [lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder), [lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) { @@ -3574,21 +3580,12 @@ main.has-snippet { flex-direction: column; text-decoration: none; } -.ds-card .ds-card-link:hover header { - color: var(--newtab-primary-action-background); -} .ds-card .ds-card-link:focus { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); transition: none; } -.ds-card .ds-card-link:focus header { - color: var(--newtab-primary-action-background); -} -.ds-card .ds-card-link:active header { - color: var(--newtab-primary-element-active-color); -} .ds-card .meta { display: flex; flex-direction: column; From 0f4d9649265bc1447453b36fcb5dbd787157fe9c Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Tue, 22 Aug 2023 15:45:59 +0100 Subject: [PATCH 2/6] Added fading of Pocket NTP items to Lepton code --- floorp/browser/themes/designs/lepton/leptonContent.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/floorp/browser/themes/designs/lepton/leptonContent.css b/floorp/browser/themes/designs/lepton/leptonContent.css index 8da89d6721589..f4b67362cf7e7 100644 --- a/floorp/browser/themes/designs/lepton/leptonContent.css +++ b/floorp/browser/themes/designs/lepton/leptonContent.css @@ -355,12 +355,14 @@ } /* Background */ .top-site-outer, + .ds-card-grid .ds-card, #searchSubmit, button.icon, button.close-button { transition: background 1.5s var(--animation-easing-function); } .top-site-outer:hover, + .ds-card-grid .ds-card:hover, #searchSubmit:hover, button.icon:hover, button.close-button:hover { From 4295855a758a8d8f5a3b2642276683ea2c0bec87 Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Tue, 22 Aug 2023 15:50:26 +0100 Subject: [PATCH 3/6] Extra fix --- browser/components/newtab/css/activity-stream-linux.css | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 9697cb593a17e..e51aafd8f8fb5 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -3583,7 +3583,6 @@ main.has-snippet { .ds-card .ds-card-link:focus { border: 0; outline: 0; - box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); transition: none; } .ds-card .meta { From 5a5bb668631d91509c128f7ffd9aa4e5e9339e5d Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Tue, 22 Aug 2023 15:56:27 +0100 Subject: [PATCH 4/6] Ditto for macOS --- .../newtab/css/activity-stream-mac.css | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index c7e3b7751df57..256df4fd71923 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -2692,7 +2692,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { - color: var(--newtab-text-primary-color); + color: rgb(255, 255, 255); font-size: 17px; font-weight: 600; line-height: 20px; @@ -2706,7 +2706,7 @@ main.has-snippet { margin: auto; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a { - color: var(--newtab-primary-action-background); + color: #ffffff8e; font-weight: 500; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { @@ -2715,21 +2715,19 @@ main.has-snippet { .ds-onboarding-container, .ds-card-grid .ds-card { - background: #FFF; + background-color: color-mix(in srgb, var(--newtab-background-color) 50%, transparent); + border: 1px solid rgba(170, 170, 170, 0.6); border-radius: 4px; } -[lwt-newtab-brighttext] .ds-onboarding-container, -[lwt-newtab-brighttext] .ds-card-grid .ds-card { - background: none; +.ds-card-grid .ds-card:is(.active, :focus, :hover) { + background: var(--newtab-element-hover-color); +} +.floorp-backdrop-blur-enable .ds-card-grid .ds-card { + backdrop-filter: blur(12px); } .ds-onboarding-container:not(.placeholder), .ds-card-grid .ds-card:not(.placeholder) { border-radius: 8px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} -[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder), -[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) { - background: var(--newtab-background-color-secondary); } .ds-onboarding-container:not(.placeholder) .img-wrapper .img img, .ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image, @@ -3578,21 +3576,11 @@ main.has-snippet { flex-direction: column; text-decoration: none; } -.ds-card .ds-card-link:hover header { - color: var(--newtab-primary-action-background); -} .ds-card .ds-card-link:focus { border: 0; outline: 0; - box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); transition: none; } -.ds-card .ds-card-link:focus header { - color: var(--newtab-primary-action-background); -} -.ds-card .ds-card-link:active header { - color: var(--newtab-primary-element-active-color); -} .ds-card .meta { display: flex; flex-direction: column; From db423dd8e0eb05546ea89c6bb54bb40992b24461 Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Tue, 22 Aug 2023 16:00:54 +0100 Subject: [PATCH 5/6] Ditto for Windows --- .../newtab/css/activity-stream-windows.css | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index 6b2197b93aa7e..f6e360aed7203 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -2688,7 +2688,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { - color: var(--newtab-text-primary-color); + color: rgb(255, 255, 255); font-size: 17px; font-weight: 600; line-height: 20px; @@ -2702,7 +2702,7 @@ main.has-snippet { margin: auto; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a { - color: var(--newtab-primary-action-background); + color: #ffffff8e; font-weight: 500; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { @@ -2711,21 +2711,19 @@ main.has-snippet { .ds-onboarding-container, .ds-card-grid .ds-card { - background: #FFF; + background-color: color-mix(in srgb, var(--newtab-background-color) 50%, transparent); + border: 1px solid rgba(170, 170, 170, 0.6); border-radius: 4px; } -[lwt-newtab-brighttext] .ds-onboarding-container, -[lwt-newtab-brighttext] .ds-card-grid .ds-card { - background: none; +.ds-card-grid .ds-card:is(.active, :focus, :hover) { + background: var(--newtab-element-hover-color); +} +.floorp-backdrop-blur-enable .ds-card-grid .ds-card { + backdrop-filter: blur(12px); } .ds-onboarding-container:not(.placeholder), .ds-card-grid .ds-card:not(.placeholder) { border-radius: 8px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} -[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder), -[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) { - background: var(--newtab-background-color-secondary); } .ds-onboarding-container:not(.placeholder) .img-wrapper .img img, .ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image, @@ -3574,21 +3572,11 @@ main.has-snippet { flex-direction: column; text-decoration: none; } -.ds-card .ds-card-link:hover header { - color: var(--newtab-primary-action-background); -} .ds-card .ds-card-link:focus { border: 0; outline: 0; - box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); transition: none; } -.ds-card .ds-card-link:focus header { - color: var(--newtab-primary-action-background); -} -.ds-card .ds-card-link:active header { - color: var(--newtab-primary-element-active-color); -} .ds-card .meta { display: flex; flex-direction: column; From 94b23d4fae3a3a32b5cdd01a3a2624a48bc4b0de Mon Sep 17 00:00:00 2001 From: Dominic Hayes - Feren OS Dev Date: Wed, 23 Aug 2023 13:39:42 +0100 Subject: [PATCH 6/6] Update leptonContent.css --- floorp/browser/themes/designs/lepton/leptonContent.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/floorp/browser/themes/designs/lepton/leptonContent.css b/floorp/browser/themes/designs/lepton/leptonContent.css index f4b67362cf7e7..8da89d6721589 100644 --- a/floorp/browser/themes/designs/lepton/leptonContent.css +++ b/floorp/browser/themes/designs/lepton/leptonContent.css @@ -355,14 +355,12 @@ } /* Background */ .top-site-outer, - .ds-card-grid .ds-card, #searchSubmit, button.icon, button.close-button { transition: background 1.5s var(--animation-easing-function); } .top-site-outer:hover, - .ds-card-grid .ds-card:hover, #searchSubmit:hover, button.icon:hover, button.close-button:hover {