commit 33b3a324f1fb756d1aa7f63ce21a30cc0dd02127 parent c57c6e1331ef18b75dd37a9f2508d0bc1c93a8cc Author: Irene Ni <ini@mozilla.com> Date: Wed, 22 Oct 2025 22:17:55 +0000 Bug 1991134 - Add standard opacity to New Tab card containers, along with blur and hover effects. r=home-newtab-reviewers,desktop-theme-reviewers,jules,maxx Differential Revision: https://phabricator.services.mozilla.com/D266420 Diffstat:
9 files changed, 80 insertions(+), 17 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss @@ -45,8 +45,9 @@ } .ad-banner-inner { + @include newtab-card-style; + position: relative; - background: var(--newtab-background-card); box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -409,7 +409,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); } .ds-card-grid & { - background: var(--newtab-background-card); + @include newtab-card-style; &:not(.placeholder) { box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 20%); @@ -419,6 +419,12 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); &:focus-within, &:hover { box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color); + z-index: 1; + } + + // This is higher to keep the context menu (when open) above any other cards + &.active { + z-index: 2; } .img-wrapper > .ds-image.img > img { @@ -546,7 +552,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); } &.refined-cards { - background: var(--newtab-background-card); + @include newtab-card-style; .img-wrapper .ds-image img { border-bottom-left-radius: 0; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss @@ -1,6 +1,7 @@ .promo-card-wrapper { + @include newtab-card-style; + display: none; // hidden by default - background: var(--newtab-background-card); box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); height: 298px; diff --git a/browser/extensions/newtab/content-src/components/Widgets/FocusTimer/_FocusTimer.scss b/browser/extensions/newtab/content-src/components/Widgets/FocusTimer/_FocusTimer.scss @@ -3,9 +3,10 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ .focus-timer { + @include newtab-card-style; + grid-column: span 1; width: var(--newtab-card-width-medium); - background: var(--newtab-background-card); border-radius: var(--border-radius-large); padding-block: var(--space-medium); height: var(--newtab-card-height); diff --git a/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss b/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss @@ -3,9 +3,10 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ .lists { + @include newtab-card-style; + grid-column: span 1; width: var(--newtab-card-width-medium); - background: var(--newtab-background-card); border-radius: var(--border-radius-large); padding-block-start: var(--space-medium); height: var(--newtab-card-height); diff --git a/browser/extensions/newtab/content-src/styles/_mixins.scss b/browser/extensions/newtab/content-src/styles/_mixins.scss @@ -74,3 +74,15 @@ } } } + +// Adds transparency and a hover effect to card background. +@mixin newtab-card-style { + background: var(--newtab-background-card); + transition: opacity 0.2s ease; + + @media (prefers-reduced-motion: no-preference) { + &:hover { + background: var(--newtab-background-color-secondary); + } + } +} diff --git a/browser/extensions/newtab/content-src/styles/_theme.scss b/browser/extensions/newtab/content-src/styles/_theme.scss @@ -45,7 +45,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15; --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent); // A background color for weather widget to help with wallpaper contrast. - --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%)); + --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%)); // --newtab-element-*-color is used when an element needs to be set off from // the primary background color. diff --git a/browser/extensions/newtab/content-src/styles/_variables.scss b/browser/extensions/newtab/content-src/styles/_variables.scss @@ -59,9 +59,9 @@ $in-content-page-background-dark: #2B2A33; $newtab-background-secondary: var(--color-white); $newtab-background-secondary-dark: rgb(66, 65, 77); -// Mirrors $newtab-background-secondary with 20% opacity -$newtab-background-card: color-mix(in srgb, var(--color-white) 80%, transparent); -$newtab-background-card-dark: rgb(66, 65, 77, 80%); +// Mirrors $newtab-background-secondary with 15% transparency +$newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent); +$newtab-background-card-dark: rgba(66, 65, 77, 85%); // Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html $photon-easing: cubic-bezier(0.07, 0.95, 0, 1); diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -38,7 +38,7 @@ input { --newtab-background-color: #F9F9FB; --newtab-background-color-secondary: var(--color-white); --newtab-text-primary-color: var(--text-color); - --newtab-background-card: color-mix(in srgb, var(--color-white) 80%, transparent); + --newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent); --newtab-text-topic-label-color: var(--color-violet-70); --newtab-text-secondary-text: var(--text-color-deemphasized); --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), var(--text-color)); @@ -46,7 +46,7 @@ input { --newtab-primary-action-background-pocket: #008078; --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent); - --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%)); + --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%)); --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000); --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000); --newtab-button-background: var(--button-background-color); @@ -86,7 +86,7 @@ input { --newtab-background-color: #2B2A33; --newtab-background-color-secondary: #42414d; --newtab-text-primary-color: var(--text-color); - --newtab-background-card: rgba(66, 65, 77, 0.8); + --newtab-background-card: rgba(66, 65, 77, 0.85); --newtab-text-topic-label-color: var(--color-violet-30); --newtab-text-secondary-text: #FBFBFEB0; --newtab-contextual-text-primary-color: light-dark(var(--text-color), var(--newtab-text-primary-color)); @@ -4443,9 +4443,10 @@ dialog::after { * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ .lists { + background: var(--newtab-background-card); + transition: opacity 0.2s ease; grid-column: span 1; width: var(--newtab-card-width-medium); - background: var(--newtab-background-card); border-radius: var(--border-radius-large); padding-block-start: var(--space-medium); height: var(--newtab-card-height); @@ -4454,6 +4455,11 @@ dialog::after { display: flex; flex-direction: column; } +@media (prefers-reduced-motion: no-preference) { + .lists:hover { + background: var(--newtab-background-color-secondary); + } +} .lists .confetti-canvas { position: absolute; top: 0; @@ -4659,9 +4665,10 @@ dialog::after { * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ .focus-timer { + background: var(--newtab-background-card); + transition: opacity 0.2s ease; grid-column: span 1; width: var(--newtab-card-width-medium); - background: var(--newtab-background-card); border-radius: var(--border-radius-large); padding-block: var(--space-medium); height: var(--newtab-card-height); @@ -4670,6 +4677,11 @@ dialog::after { align-items: center; box-shadow: var(--box-shadow-card); } +@media (prefers-reduced-motion: no-preference) { + .focus-timer:hover { + background: var(--newtab-background-color-secondary); + } +} .focus-timer-tabs { display: flex; @@ -7491,6 +7503,12 @@ dialog::after { } .ds-card-grid .sections-card-ui { background: var(--newtab-background-card); + transition: opacity 0.2s ease; +} +@media (prefers-reduced-motion: no-preference) { + .ds-card-grid .sections-card-ui:hover { + background: var(--newtab-background-color-secondary); + } } .ds-card-grid .sections-card-ui:not(.placeholder) { box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); @@ -7498,6 +7516,10 @@ dialog::after { } .ds-card-grid .sections-card-ui:not(.placeholder).active, .ds-card-grid .sections-card-ui:not(.placeholder):focus-within, .ds-card-grid .sections-card-ui:not(.placeholder):hover { box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color); + z-index: 1; +} +.ds-card-grid .sections-card-ui:not(.placeholder).active { + z-index: 2; } .ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; @@ -7605,6 +7627,13 @@ dialog::after { .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards { background: var(--newtab-background-card); + transition: opacity 0.2s ease; +} +@media (prefers-reduced-motion: no-preference) { + .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover, +.ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover { + background: var(--newtab-background-color-secondary); + } } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img { @@ -8870,11 +8899,17 @@ dialog::after { } } .ad-banner-wrapper .ad-banner-inner { - position: relative; background: var(--newtab-background-card); + transition: opacity 0.2s ease; + position: relative; box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); } +@media (prefers-reduced-motion: no-preference) { + .ad-banner-wrapper .ad-banner-inner:hover { + background: var(--newtab-background-color-secondary); + } +} .ad-banner-wrapper .ad-banner-inner:hover { box-shadow: var(--box-shadow-card-hover); } @@ -8988,8 +9023,9 @@ dialog::after { } .promo-card-wrapper { - display: none; background: var(--newtab-background-card); + transition: opacity 0.2s ease; + display: none; box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); height: 298px; @@ -8997,6 +9033,11 @@ dialog::after { position: relative; padding: var(--space-large); } +@media (prefers-reduced-motion: no-preference) { + .promo-card-wrapper:hover { + background: var(--newtab-background-color-secondary); + } +} .promo-card-wrapper .promo-card-title { display: block; font-size: var(--font-size-medium);