mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 05:11:16 +00:00
Bug 1898818 - Home and newtab fixes so newtab with a wallpaper looks good in both light and dark mode r=desktop-theme-reviewers,home-newtab-reviewers,omc-reviewers,sfoster,aminomancer,amy
Differential Revision: https://phabricator.services.mozilla.com/D211623
This commit is contained in:
scottdowne
parent
e99a626859
commit
db8000f5ff
@ -1706,8 +1706,9 @@ pref("browser.newtabpage.activity-stream.discoverystream.region-weather-config",
|
||||
|
||||
// Preference to enable wallpaper selection in the Customize Menu of new tab page
|
||||
pref("browser.newtabpage.activity-stream.newtabWallpapers.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.newtabWallpapers.v2.enabled", false);
|
||||
|
||||
// Current new tab page background image.
|
||||
// Current new tab page background images.
|
||||
pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper-light", "");
|
||||
pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper-dark", "");
|
||||
|
||||
|
||||
@ -3,12 +3,16 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--newtab-background-color: #F9F9FB;
|
||||
--newtab-background-color-secondary: #FFF;
|
||||
--newtab-text-primary-color: rgb(21, 20, 26);
|
||||
--newtab-primary-action-background: rgb(0, 97, 224);
|
||||
--newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), rgb(251, 251, 254));
|
||||
--newtab-primary-action-background: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
||||
--newtab-primary-action-background-pocket: rgb(0, 128, 120);
|
||||
--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-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);
|
||||
@ -17,10 +21,10 @@
|
||||
--newtab-button-hover-background: var(--button-background-color-hover);
|
||||
--newtab-button-active-background: var(--button-background-color-active);
|
||||
--newtab-button-text: var(--button-text-color);
|
||||
--newtab-button-static-background: #F0F0F4;
|
||||
--newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
|
||||
--newtab-button-static-focus-background: var(--newtab-button-static-background);
|
||||
--newtab-button-static-hover-background: #E0E0E6;
|
||||
--newtab-button-static-active-background: #CFCFD8;
|
||||
--newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
|
||||
--newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
|
||||
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
|
||||
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
|
||||
@ -31,7 +35,7 @@
|
||||
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
|
||||
--newtab-wordmark-color: #20123A;
|
||||
--newtab-wordmark-color: light-dark(#20123A, rgb(251, 251, 254));
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
@ -41,10 +45,10 @@
|
||||
--newtab-button-secondary-color: inherit;
|
||||
}
|
||||
:root[lwt-newtab-brighttext] {
|
||||
color-scheme: dark;
|
||||
--newtab-background-color: #2B2A33;
|
||||
--newtab-background-color-secondary: rgb(66, 65, 77);
|
||||
--newtab-text-primary-color: rgb(251, 251, 254);
|
||||
--newtab-primary-action-background: rgb(0, 221, 255);
|
||||
--newtab-contextual-text-primary-color: light-dark(rgb(21, 20, 26), var(--newtab-text-primary-color));
|
||||
--newtab-primary-action-background-pocket: rgb(0, 221, 255);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
|
||||
@ -56,11 +60,7 @@
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
|
||||
--newtab-primary-element-text-color: rgb(43, 42, 51);
|
||||
--newtab-wordmark-color: rgb(251, 251, 254);
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-button-static-background: #2B2A33;
|
||||
--newtab-button-static-hover-background: #52525E;
|
||||
--newtab-button-static-active-background: #5B5B66;
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
|
||||
@ -280,13 +280,19 @@ export class BaseContent extends React.PureComponent {
|
||||
`url(${darkWallpaper?.wallpaperUrl || ""})`
|
||||
);
|
||||
|
||||
// Grab the contrast of the currently displayed wallpaper.
|
||||
const { theme } =
|
||||
this.state.colorMode === "light" ? lightWallpaper : darkWallpaper;
|
||||
|
||||
// Add helper class to body if user has a wallpaper selected
|
||||
if (lightWallpaper) {
|
||||
global.document?.body.classList.add("hasWallpaperLight");
|
||||
if (theme === "light") {
|
||||
global.document?.body.classList.add("lightWallpaper");
|
||||
global.document?.body.classList.remove("darkWallpaper");
|
||||
}
|
||||
|
||||
if (darkWallpaper) {
|
||||
global.document?.body.classList.add("hasWallpaperDark");
|
||||
if (theme === "dark") {
|
||||
global.document?.body.classList.add("darkWallpaper");
|
||||
global.document?.body.classList.remove("lightWallpaper");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,6 +135,10 @@ main {
|
||||
.wallpaper-attribution {
|
||||
padding: 0 $section-horizontal-padding;
|
||||
font-size: 14px;
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
&.theme-light {
|
||||
display: inline-block;
|
||||
@ -153,7 +157,7 @@ main {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--newtab-element-color);
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
@ -21,6 +21,11 @@
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
&:not(:hover, :active) {
|
||||
@include wallpaper-contrast-fix;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--newtab-element-hover-color);
|
||||
}
|
||||
|
||||
@ -41,11 +41,14 @@ $ds-width: 936px;
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: $section-title-font-size;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
.icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
}
|
||||
@ -59,6 +62,9 @@ $ds-width: 936px;
|
||||
color: var(--newtab-primary-action-background);
|
||||
font-weight: 500;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
&:is(:focus, :hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
background-size: 20px;
|
||||
color: var(--icon-color);
|
||||
vertical-align: text-bottom;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
}
|
||||
|
||||
.feature-highlight-modal {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
|
||||
.ds-navigation {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@ -20,6 +20,9 @@
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
ul {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
|
||||
@ -39,6 +39,9 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
|
||||
height: $logo-size;
|
||||
margin-inline-start: 16px;
|
||||
width: $wordmark-size;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-medium - 1) {
|
||||
|
||||
@ -126,6 +126,11 @@ $letter-fallback-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
&:not(:hover, :active, .active) {
|
||||
@include wallpaper-contrast-fix;
|
||||
}
|
||||
|
||||
// Necessary for when navigating by a keyboard, having the context
|
||||
// menu open should display the "…" button. This style is a clone
|
||||
// of the `:active` state for `.context-menu-button`
|
||||
@ -152,6 +157,9 @@ $letter-fallback-color: $white;
|
||||
top: -20px;
|
||||
transition: opacity 200ms;
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--newtab-button-hover-background);
|
||||
|
||||
@ -180,7 +188,7 @@ $letter-fallback-color: $white;
|
||||
|
||||
// For letter fallback
|
||||
align-items: center;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
@ -286,7 +294,7 @@ $letter-fallback-color: $white;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
padding-top: 8px;
|
||||
font: caption;
|
||||
text-align: center;
|
||||
@ -305,7 +313,7 @@ $letter-fallback-color: $white;
|
||||
}
|
||||
|
||||
.sponsored-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
@ -25,36 +25,48 @@ export class _WallpapersSection extends React.PureComponent {
|
||||
const { id } = event.target;
|
||||
const prefs = this.props.Prefs.values;
|
||||
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
// If we don't care about color mode, set both to the same wallpaper.
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-dark`, id);
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-light`, id);
|
||||
} else {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
|
||||
// bug 1892095
|
||||
if (
|
||||
prefs["newtabWallpapers.wallpaper-dark"] === "" &&
|
||||
colorMode === "light"
|
||||
) {
|
||||
this.props.setPref(
|
||||
"newtabWallpapers.wallpaper-dark",
|
||||
id.replace("light", "dark")
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
prefs["newtabWallpapers.wallpaper-light"] === "" &&
|
||||
colorMode === "dark"
|
||||
) {
|
||||
this.props.setPref(
|
||||
`newtabWallpapers.wallpaper-light`,
|
||||
id.replace("dark", "light")
|
||||
);
|
||||
}
|
||||
}
|
||||
this.handleUserEvent({
|
||||
selected_wallpaper: id,
|
||||
hadPreviousWallpaper: !!this.props.activeWallpaper,
|
||||
});
|
||||
// bug 1892095
|
||||
if (
|
||||
prefs["newtabWallpapers.wallpaper-dark"] === "" &&
|
||||
colorMode === "light"
|
||||
) {
|
||||
this.props.setPref(
|
||||
"newtabWallpapers.wallpaper-dark",
|
||||
id.replace("light", "dark")
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
prefs["newtabWallpapers.wallpaper-light"] === "" &&
|
||||
colorMode === "dark"
|
||||
) {
|
||||
this.props.setPref(
|
||||
`newtabWallpapers.wallpaper-light`,
|
||||
id.replace("dark", "light")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleReset() {
|
||||
const prefs = this.props.Prefs.values;
|
||||
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
this.props.setPref("newtabWallpapers.wallpaper-light", "");
|
||||
this.props.setPref("newtabWallpapers.wallpaper-dark", "");
|
||||
} else {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
|
||||
}
|
||||
this.handleUserEvent({
|
||||
selected_wallpaper: "none",
|
||||
hadPreviousWallpaper: !!this.props.activeWallpaper,
|
||||
@ -74,9 +86,14 @@ export class _WallpapersSection extends React.PureComponent {
|
||||
render() {
|
||||
const { wallpaperList } = this.props.Wallpapers;
|
||||
const { activeWallpaper } = this.props;
|
||||
const prefs = this.props.Prefs.values;
|
||||
let fieldsetClassname = `wallpaper-list`;
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
fieldsetClassname += " ignore-color-mode";
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<fieldset className="wallpaper-list">
|
||||
<fieldset className={fieldsetClassname}>
|
||||
{wallpaperList.map(({ title, theme, fluent_id }) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
.wallpaper-input,
|
||||
.sr-only {
|
||||
&:not(.ignore-color-mode) .wallpaper-input,
|
||||
&:not(.ignore-color-mode) .sr-only {
|
||||
&.theme-light {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
@ -322,11 +322,12 @@ export class _Weather extends React.PureComponent {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
data-l10n-id="newtab-weather-sponsored"
|
||||
data-l10n-args='{"provider": "AccuWeather"}'
|
||||
className="weatherSponsorText"
|
||||
></span>
|
||||
<span className="weatherSponsorText">
|
||||
<span
|
||||
data-l10n-id="newtab-weather-sponsored"
|
||||
data-l10n-args='{"provider": "AccuWeather"}'
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -57,7 +57,14 @@
|
||||
.weatherSponsorText {
|
||||
visibility: hidden;
|
||||
font-size: var(--newtab-weather-sponsor-font-size);
|
||||
color: var(--text-color-deemphasized);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
@include wallpaper-contrast-fix;
|
||||
|
||||
span {
|
||||
color: var(--text-color-deemphasized);
|
||||
}
|
||||
}
|
||||
|
||||
.weatherInfoLink, .weatherButtonContextMenuWrapper {
|
||||
@ -86,44 +93,22 @@
|
||||
}
|
||||
|
||||
// Contrast fix for users who have wallpapers set
|
||||
.hasWallpaperDark & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
// TODO: Replace with token
|
||||
background-color: rgba(35, 34, 43, 70%);
|
||||
.lightWallpaper &,
|
||||
.darkWallpaper & {
|
||||
background-color: var(--newtab-weather-background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
|
||||
@media (prefers-contrast) and (prefers-color-scheme: dark) {
|
||||
&:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
}
|
||||
|
||||
.hasWallpaperLight & {
|
||||
@media (prefers-color-scheme: light) {
|
||||
// TODO: Replace with token
|
||||
background-color: rgba(255, 255, 255, 70%);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) and (prefers-color-scheme: light) {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.weatherInfoLink {
|
||||
@ -179,12 +164,6 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&::after {
|
||||
background-color: var(--color-gray-70);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: transparent
|
||||
|
||||
@ -48,3 +48,15 @@
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Some wallpapers are light/dark, and may not match the user set contrast,
|
||||
// so some text, icons, etc that are displayed over the wallpaper need a contrast fix.
|
||||
@mixin wallpaper-contrast-fix {
|
||||
.lightWallpaper & {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.darkWallpaper & {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,14 +24,24 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||
|
||||
// Default theme
|
||||
:root {
|
||||
color-scheme: light;
|
||||
// General styles
|
||||
--newtab-background-color: #{$in-content-page-background};
|
||||
--newtab-background-color-secondary: #{$newtab-background-secondary};
|
||||
--newtab-text-primary-color: #{$in-content-page-color};
|
||||
--newtab-primary-action-background: #{$primary-blue};
|
||||
// We need to be careful about the contrast of text over newtab wallpapers, which might not match the theme.
|
||||
// --newtab-text-primary-color is set in contextTheme.js and reacts to possible installed addon themes.
|
||||
// If we use that variable here, with light-dark, we can retain that addon theme text color,
|
||||
// and also have a fallback in case the wallpaper contrast doesn't match.
|
||||
--newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #{$in-content-page-color-dark});
|
||||
--newtab-primary-action-background: light-dark(#{$primary-blue}, #{$primary-blue-dark});
|
||||
// A button colour closer to the Pocket brand for usage in the Pocket section.
|
||||
--newtab-primary-action-background-pocket: #{$primary-green};
|
||||
--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);
|
||||
|
||||
// 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-element-*-color is used when an element needs to be set off from
|
||||
// the primary background color.
|
||||
@ -48,10 +58,10 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||
|
||||
// --newtab-button-static*-color is used on pocket cards and require a
|
||||
// static color unit due to transparency issues with `color-mix`
|
||||
--newtab-button-static-background: #F0F0F4;
|
||||
--newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
|
||||
--newtab-button-static-focus-background: var(--newtab-button-static-background);
|
||||
--newtab-button-static-hover-background: #E0E0E6;
|
||||
--newtab-button-static-active-background: #CFCFD8;
|
||||
--newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
|
||||
--newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
|
||||
|
||||
// --newtab-element-secondary*-color is used when an element needs to be set
|
||||
// off from the secondary background color.
|
||||
@ -67,7 +77,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$black});
|
||||
--newtab-wordmark-color: #{$newtab-wordmark-default-color};
|
||||
--newtab-wordmark-color: light-dark(#{$newtab-wordmark-default-color}, #{$newtab-wordmark-darktheme-color});
|
||||
--newtab-status-success: #{$status-green};
|
||||
--newtab-status-error: #{$red-60};
|
||||
--newtab-inner-box-shadow-color: #{$black-10};
|
||||
@ -79,12 +89,13 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||
--newtab-button-secondary-color: inherit;
|
||||
|
||||
&[lwt-newtab-brighttext] {
|
||||
// We export color-scheme because some addon themes might not work with light-dark and prefers-color-scheme.
|
||||
// If we add color-scheme here, we can still use light-dark
|
||||
color-scheme: dark;
|
||||
// General styles
|
||||
--newtab-background-color: #{$in-content-page-background-dark};
|
||||
--newtab-background-color-secondary: #{$newtab-background-secondary-dark};
|
||||
--newtab-text-primary-color: #{$in-content-page-color-dark};
|
||||
|
||||
--newtab-primary-action-background: #{$primary-blue-dark};
|
||||
--newtab-contextual-text-primary-color: light-dark(#{$in-content-page-color}, var(--newtab-text-primary-color));
|
||||
--newtab-primary-action-background-pocket: #{$primary-blue-dark};
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
|
||||
@ -100,14 +111,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$white});
|
||||
--newtab-primary-element-text-color: #{$primary-text-color-dark};
|
||||
--newtab-wordmark-color: #{$newtab-wordmark-darktheme-color};
|
||||
--newtab-status-success: #{$status-dark-green};
|
||||
|
||||
// --newtab-button-static*-color is used on pocket cards and require a
|
||||
// static color unit due to transparency issues with `color-mix`
|
||||
--newtab-button-static-background: #2B2A33;
|
||||
--newtab-button-static-hover-background: #52525E;
|
||||
--newtab-button-static-active-background: #5B5B66;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -34,12 +34,16 @@ input {
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--newtab-background-color: #F9F9FB;
|
||||
--newtab-background-color-secondary: #FFF;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-primary-action-background: #0061e0;
|
||||
--newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
|
||||
--newtab-primary-action-background: light-dark(#0061e0, #00ddff);
|
||||
--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-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);
|
||||
@ -48,10 +52,10 @@ input {
|
||||
--newtab-button-hover-background: var(--button-background-color-hover);
|
||||
--newtab-button-active-background: var(--button-background-color-active);
|
||||
--newtab-button-text: var(--button-text-color);
|
||||
--newtab-button-static-background: #F0F0F4;
|
||||
--newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
|
||||
--newtab-button-static-focus-background: var(--newtab-button-static-background);
|
||||
--newtab-button-static-hover-background: #E0E0E6;
|
||||
--newtab-button-static-active-background: #CFCFD8;
|
||||
--newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
|
||||
--newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
|
||||
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
|
||||
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
|
||||
@ -62,7 +66,7 @@ input {
|
||||
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
|
||||
--newtab-wordmark-color: #20123A;
|
||||
--newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
@ -72,10 +76,10 @@ input {
|
||||
--newtab-button-secondary-color: inherit;
|
||||
}
|
||||
:root[lwt-newtab-brighttext] {
|
||||
color-scheme: dark;
|
||||
--newtab-background-color: #2B2A33;
|
||||
--newtab-background-color-secondary: #42414d;
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-primary-action-background: #00ddff;
|
||||
--newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
|
||||
--newtab-primary-action-background-pocket: #00ddff;
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
|
||||
@ -87,11 +91,7 @@ input {
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
|
||||
--newtab-primary-element-text-color: #2b2a33;
|
||||
--newtab-wordmark-color: #fbfbfe;
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-button-static-background: #2B2A33;
|
||||
--newtab-button-static-hover-background: #52525E;
|
||||
--newtab-button-static-active-background: #5B5B66;
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
@ -527,6 +527,13 @@ main section {
|
||||
.wallpaper-attribution {
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .wallpaper-attribution {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .wallpaper-attribution {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.wallpaper-attribution.theme-light {
|
||||
display: inline-block;
|
||||
@ -541,7 +548,7 @@ main section {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-attribution a {
|
||||
color: var(--newtab-element-color);
|
||||
color: inherit;
|
||||
}
|
||||
.wallpaper-attribution a:hover {
|
||||
text-decoration: none;
|
||||
@ -678,6 +685,12 @@ main section {
|
||||
.top-site-outer:is(:hover) .context-menu-button {
|
||||
opacity: 1;
|
||||
}
|
||||
.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer.active .context-menu-button {
|
||||
opacity: 1;
|
||||
background-color: var(--newtab-button-active-background);
|
||||
@ -698,6 +711,12 @@ main section {
|
||||
top: -20px;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.lightWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer .context-menu-button:hover {
|
||||
background-color: var(--newtab-button-hover-background);
|
||||
}
|
||||
@ -720,7 +739,7 @@ main section {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
@ -809,7 +828,7 @@ main section {
|
||||
-moz-context-properties: fill;
|
||||
}
|
||||
.top-site-outer .title {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
padding-top: 8px;
|
||||
font: caption;
|
||||
text-align: center;
|
||||
@ -826,7 +845,7 @@ main section {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -1269,6 +1288,12 @@ main section {
|
||||
margin-inline-start: 16px;
|
||||
width: 134px;
|
||||
}
|
||||
.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@media (max-width: 609px) {
|
||||
.search-wrapper .logo-and-wordmark .logo {
|
||||
background-size: 64px;
|
||||
@ -1680,6 +1705,12 @@ main section {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
}
|
||||
.lightWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.personalize-button:hover {
|
||||
background-color: var(--newtab-element-hover-color);
|
||||
}
|
||||
@ -1918,20 +1949,16 @@ main section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-light,
|
||||
.wallpaper-list .sr-only.theme-light {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: inline-block;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-dark,
|
||||
.wallpaper-list .sr-only.theme-dark {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input {
|
||||
@ -2064,6 +2091,15 @@ main section {
|
||||
.weatherSponsorText {
|
||||
visibility: hidden;
|
||||
font-size: var(--newtab-weather-sponsor-font-size);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .weatherSponsorText {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .weatherSponsorText {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.weatherSponsorText span {
|
||||
color: var(--text-color-deemphasized);
|
||||
}
|
||||
|
||||
@ -2086,35 +2122,17 @@ main section {
|
||||
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
|
||||
outline: var(--focus-outline);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(35, 34, 43, 0.7);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--newtab-weather-background-color);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
@media (prefers-contrast) {
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
}
|
||||
@ -2165,11 +2183,6 @@ main section {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.weatherButtonContextMenuWrapper::after {
|
||||
background-color: var(--color-gray-70);
|
||||
}
|
||||
}
|
||||
.weatherButtonContextMenuWrapper:hover::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -3133,11 +3146,19 @@ main section {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
.lightWallpaper .ds-header,
|
||||
.lightWallpaper .ds-layout .section-title span {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-header,
|
||||
.darkWallpaper .ds-layout .section-title span {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -3150,6 +3171,12 @@ main section {
|
||||
color: var(--newtab-primary-action-background);
|
||||
font-weight: 500;
|
||||
}
|
||||
.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -3719,7 +3746,7 @@ main section {
|
||||
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
.ds-navigation {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@ -3737,6 +3764,12 @@ main section {
|
||||
.ds-navigation.ds-navigation-right-aligned {
|
||||
text-align: end;
|
||||
}
|
||||
.lightWallpaper .ds-navigation {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-navigation {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-navigation ul {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
@ -4924,6 +4957,12 @@ main section {
|
||||
color: var(--icon-color);
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.lightWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
|
||||
margin-inline-end: 11px;
|
||||
}
|
||||
|
||||
@ -38,12 +38,16 @@ input {
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--newtab-background-color: #F9F9FB;
|
||||
--newtab-background-color-secondary: #FFF;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-primary-action-background: #0061e0;
|
||||
--newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
|
||||
--newtab-primary-action-background: light-dark(#0061e0, #00ddff);
|
||||
--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-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);
|
||||
@ -52,10 +56,10 @@ input {
|
||||
--newtab-button-hover-background: var(--button-background-color-hover);
|
||||
--newtab-button-active-background: var(--button-background-color-active);
|
||||
--newtab-button-text: var(--button-text-color);
|
||||
--newtab-button-static-background: #F0F0F4;
|
||||
--newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
|
||||
--newtab-button-static-focus-background: var(--newtab-button-static-background);
|
||||
--newtab-button-static-hover-background: #E0E0E6;
|
||||
--newtab-button-static-active-background: #CFCFD8;
|
||||
--newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
|
||||
--newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
|
||||
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
|
||||
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
|
||||
@ -66,7 +70,7 @@ input {
|
||||
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
|
||||
--newtab-wordmark-color: #20123A;
|
||||
--newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
@ -76,10 +80,10 @@ input {
|
||||
--newtab-button-secondary-color: inherit;
|
||||
}
|
||||
:root[lwt-newtab-brighttext] {
|
||||
color-scheme: dark;
|
||||
--newtab-background-color: #2B2A33;
|
||||
--newtab-background-color-secondary: #42414d;
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-primary-action-background: #00ddff;
|
||||
--newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
|
||||
--newtab-primary-action-background-pocket: #00ddff;
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
|
||||
@ -91,11 +95,7 @@ input {
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
|
||||
--newtab-primary-element-text-color: #2b2a33;
|
||||
--newtab-wordmark-color: #fbfbfe;
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-button-static-background: #2B2A33;
|
||||
--newtab-button-static-hover-background: #52525E;
|
||||
--newtab-button-static-active-background: #5B5B66;
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
@ -531,6 +531,13 @@ main section {
|
||||
.wallpaper-attribution {
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .wallpaper-attribution {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .wallpaper-attribution {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.wallpaper-attribution.theme-light {
|
||||
display: inline-block;
|
||||
@ -545,7 +552,7 @@ main section {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-attribution a {
|
||||
color: var(--newtab-element-color);
|
||||
color: inherit;
|
||||
}
|
||||
.wallpaper-attribution a:hover {
|
||||
text-decoration: none;
|
||||
@ -682,6 +689,12 @@ main section {
|
||||
.top-site-outer:is(:hover) .context-menu-button {
|
||||
opacity: 1;
|
||||
}
|
||||
.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer.active .context-menu-button {
|
||||
opacity: 1;
|
||||
background-color: var(--newtab-button-active-background);
|
||||
@ -702,6 +715,12 @@ main section {
|
||||
top: -20px;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.lightWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer .context-menu-button:hover {
|
||||
background-color: var(--newtab-button-hover-background);
|
||||
}
|
||||
@ -724,7 +743,7 @@ main section {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
@ -813,7 +832,7 @@ main section {
|
||||
-moz-context-properties: fill;
|
||||
}
|
||||
.top-site-outer .title {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
padding-top: 8px;
|
||||
font: caption;
|
||||
text-align: center;
|
||||
@ -830,7 +849,7 @@ main section {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -1273,6 +1292,12 @@ main section {
|
||||
margin-inline-start: 16px;
|
||||
width: 134px;
|
||||
}
|
||||
.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@media (max-width: 609px) {
|
||||
.search-wrapper .logo-and-wordmark .logo {
|
||||
background-size: 64px;
|
||||
@ -1684,6 +1709,12 @@ main section {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
}
|
||||
.lightWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.personalize-button:hover {
|
||||
background-color: var(--newtab-element-hover-color);
|
||||
}
|
||||
@ -1922,20 +1953,16 @@ main section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-light,
|
||||
.wallpaper-list .sr-only.theme-light {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: inline-block;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-dark,
|
||||
.wallpaper-list .sr-only.theme-dark {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input {
|
||||
@ -2068,6 +2095,15 @@ main section {
|
||||
.weatherSponsorText {
|
||||
visibility: hidden;
|
||||
font-size: var(--newtab-weather-sponsor-font-size);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .weatherSponsorText {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .weatherSponsorText {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.weatherSponsorText span {
|
||||
color: var(--text-color-deemphasized);
|
||||
}
|
||||
|
||||
@ -2090,35 +2126,17 @@ main section {
|
||||
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
|
||||
outline: var(--focus-outline);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(35, 34, 43, 0.7);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--newtab-weather-background-color);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
@media (prefers-contrast) {
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
}
|
||||
@ -2169,11 +2187,6 @@ main section {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.weatherButtonContextMenuWrapper::after {
|
||||
background-color: var(--color-gray-70);
|
||||
}
|
||||
}
|
||||
.weatherButtonContextMenuWrapper:hover::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -3137,11 +3150,19 @@ main section {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
.lightWallpaper .ds-header,
|
||||
.lightWallpaper .ds-layout .section-title span {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-header,
|
||||
.darkWallpaper .ds-layout .section-title span {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -3154,6 +3175,12 @@ main section {
|
||||
color: var(--newtab-primary-action-background);
|
||||
font-weight: 500;
|
||||
}
|
||||
.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -3723,7 +3750,7 @@ main section {
|
||||
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
.ds-navigation {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@ -3741,6 +3768,12 @@ main section {
|
||||
.ds-navigation.ds-navigation-right-aligned {
|
||||
text-align: end;
|
||||
}
|
||||
.lightWallpaper .ds-navigation {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-navigation {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-navigation ul {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
@ -4928,6 +4961,12 @@ main section {
|
||||
color: var(--icon-color);
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.lightWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
|
||||
margin-inline-end: 11px;
|
||||
}
|
||||
|
||||
@ -34,12 +34,16 @@ input {
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--newtab-background-color: #F9F9FB;
|
||||
--newtab-background-color-secondary: #FFF;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-primary-action-background: #0061e0;
|
||||
--newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
|
||||
--newtab-primary-action-background: light-dark(#0061e0, #00ddff);
|
||||
--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-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);
|
||||
@ -48,10 +52,10 @@ input {
|
||||
--newtab-button-hover-background: var(--button-background-color-hover);
|
||||
--newtab-button-active-background: var(--button-background-color-active);
|
||||
--newtab-button-text: var(--button-text-color);
|
||||
--newtab-button-static-background: #F0F0F4;
|
||||
--newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
|
||||
--newtab-button-static-focus-background: var(--newtab-button-static-background);
|
||||
--newtab-button-static-hover-background: #E0E0E6;
|
||||
--newtab-button-static-active-background: #CFCFD8;
|
||||
--newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
|
||||
--newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
|
||||
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
|
||||
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
|
||||
@ -62,7 +66,7 @@ input {
|
||||
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
|
||||
--newtab-wordmark-color: #20123A;
|
||||
--newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
@ -72,10 +76,10 @@ input {
|
||||
--newtab-button-secondary-color: inherit;
|
||||
}
|
||||
:root[lwt-newtab-brighttext] {
|
||||
color-scheme: dark;
|
||||
--newtab-background-color: #2B2A33;
|
||||
--newtab-background-color-secondary: #42414d;
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-primary-action-background: #00ddff;
|
||||
--newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
|
||||
--newtab-primary-action-background-pocket: #00ddff;
|
||||
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
|
||||
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
|
||||
@ -87,11 +91,7 @@ input {
|
||||
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
|
||||
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
|
||||
--newtab-primary-element-text-color: #2b2a33;
|
||||
--newtab-wordmark-color: #fbfbfe;
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-button-static-background: #2B2A33;
|
||||
--newtab-button-static-hover-background: #52525E;
|
||||
--newtab-button-static-active-background: #5B5B66;
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
@ -527,6 +527,13 @@ main section {
|
||||
.wallpaper-attribution {
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .wallpaper-attribution {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .wallpaper-attribution {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.wallpaper-attribution.theme-light {
|
||||
display: inline-block;
|
||||
@ -541,7 +548,7 @@ main section {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-attribution a {
|
||||
color: var(--newtab-element-color);
|
||||
color: inherit;
|
||||
}
|
||||
.wallpaper-attribution a:hover {
|
||||
text-decoration: none;
|
||||
@ -678,6 +685,12 @@ main section {
|
||||
.top-site-outer:is(:hover) .context-menu-button {
|
||||
opacity: 1;
|
||||
}
|
||||
.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer.active .context-menu-button {
|
||||
opacity: 1;
|
||||
background-color: var(--newtab-button-active-background);
|
||||
@ -698,6 +711,12 @@ main section {
|
||||
top: -20px;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.lightWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .top-site-outer .context-menu-button {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.top-site-outer .context-menu-button:hover {
|
||||
background-color: var(--newtab-button-hover-background);
|
||||
}
|
||||
@ -720,7 +739,7 @@ main section {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
font-weight: 200;
|
||||
@ -809,7 +828,7 @@ main section {
|
||||
-moz-context-properties: fill;
|
||||
}
|
||||
.top-site-outer .title {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
padding-top: 8px;
|
||||
font: caption;
|
||||
text-align: center;
|
||||
@ -826,7 +845,7 @@ main section {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
color: var(--newtab-contextual-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -1269,6 +1288,12 @@ main section {
|
||||
margin-inline-start: 16px;
|
||||
width: 134px;
|
||||
}
|
||||
.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@media (max-width: 609px) {
|
||||
.search-wrapper .logo-and-wordmark .logo {
|
||||
background-size: 64px;
|
||||
@ -1680,6 +1705,12 @@ main section {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
}
|
||||
.lightWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .personalize-button:not(:hover, :active) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.personalize-button:hover {
|
||||
background-color: var(--newtab-element-hover-color);
|
||||
}
|
||||
@ -1918,20 +1949,16 @@ main section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-light,
|
||||
.wallpaper-list .sr-only.theme-light {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: inline-block;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
|
||||
display: none;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input.theme-dark,
|
||||
.wallpaper-list .sr-only.theme-dark {
|
||||
.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
|
||||
[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
|
||||
[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
.wallpaper-list .wallpaper-input {
|
||||
@ -2064,6 +2091,15 @@ main section {
|
||||
.weatherSponsorText {
|
||||
visibility: hidden;
|
||||
font-size: var(--newtab-weather-sponsor-font-size);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
}
|
||||
.lightWallpaper .weatherSponsorText {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .weatherSponsorText {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.weatherSponsorText span {
|
||||
color: var(--text-color-deemphasized);
|
||||
}
|
||||
|
||||
@ -2086,35 +2122,17 @@ main section {
|
||||
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
|
||||
outline: var(--focus-outline);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(35, 34, 43, 0.7);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--newtab-weather-background-color);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: dark) {
|
||||
.hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
|
||||
background-color: var(--newtab-button-static-hover-background);
|
||||
}
|
||||
.hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
|
||||
background-color: var(--newtab-button-static-active-background);
|
||||
}
|
||||
@media (prefers-contrast) and (prefers-color-scheme: light) {
|
||||
.hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
|
||||
@media (prefers-contrast) {
|
||||
.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
}
|
||||
@ -2165,11 +2183,6 @@ main section {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.weatherButtonContextMenuWrapper::after {
|
||||
background-color: var(--color-gray-70);
|
||||
}
|
||||
}
|
||||
.weatherButtonContextMenuWrapper:hover::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -3133,11 +3146,19 @@ main section {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
.lightWallpaper .ds-header,
|
||||
.lightWallpaper .ds-layout .section-title span {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-header,
|
||||
.darkWallpaper .ds-layout .section-title span {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -3150,6 +3171,12 @@ main section {
|
||||
color: var(--newtab-primary-action-background);
|
||||
font-weight: 500;
|
||||
}
|
||||
.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -3719,7 +3746,7 @@ main section {
|
||||
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
.ds-navigation {
|
||||
color: var(--newtab-text-primary-color);
|
||||
color: var(--newtab-contextual-text-primary-color);
|
||||
font-size: 11.5px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
@ -3737,6 +3764,12 @@ main section {
|
||||
.ds-navigation.ds-navigation-right-aligned {
|
||||
text-align: end;
|
||||
}
|
||||
.lightWallpaper .ds-navigation {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .ds-navigation {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.ds-navigation ul {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
@ -4924,6 +4957,12 @@ main section {
|
||||
color: var(--icon-color);
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.lightWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: light;
|
||||
}
|
||||
.darkWallpaper .sponsored-content-highlight .icon-help {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
|
||||
margin-inline-end: 11px;
|
||||
}
|
||||
|
||||
@ -8993,22 +8993,34 @@ class _WallpapersSection extends (external_React_default()).PureComponent {
|
||||
} = event.target;
|
||||
const prefs = this.props.Prefs.values;
|
||||
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
// If we don't care about color mode, set both to the same wallpaper.
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-dark`, id);
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-light`, id);
|
||||
} else {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
|
||||
// bug 1892095
|
||||
if (prefs["newtabWallpapers.wallpaper-dark"] === "" && colorMode === "light") {
|
||||
this.props.setPref("newtabWallpapers.wallpaper-dark", id.replace("light", "dark"));
|
||||
}
|
||||
if (prefs["newtabWallpapers.wallpaper-light"] === "" && colorMode === "dark") {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-light`, id.replace("dark", "light"));
|
||||
}
|
||||
}
|
||||
this.handleUserEvent({
|
||||
selected_wallpaper: id,
|
||||
hadPreviousWallpaper: !!this.props.activeWallpaper
|
||||
});
|
||||
// bug 1892095
|
||||
if (prefs["newtabWallpapers.wallpaper-dark"] === "" && colorMode === "light") {
|
||||
this.props.setPref("newtabWallpapers.wallpaper-dark", id.replace("light", "dark"));
|
||||
}
|
||||
if (prefs["newtabWallpapers.wallpaper-light"] === "" && colorMode === "dark") {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-light`, id.replace("dark", "light"));
|
||||
}
|
||||
}
|
||||
handleReset() {
|
||||
const prefs = this.props.Prefs.values;
|
||||
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
this.props.setPref("newtabWallpapers.wallpaper-light", "");
|
||||
this.props.setPref("newtabWallpapers.wallpaper-dark", "");
|
||||
} else {
|
||||
this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
|
||||
}
|
||||
this.handleUserEvent({
|
||||
selected_wallpaper: "none",
|
||||
hadPreviousWallpaper: !!this.props.activeWallpaper
|
||||
@ -9029,8 +9041,13 @@ class _WallpapersSection extends (external_React_default()).PureComponent {
|
||||
const {
|
||||
activeWallpaper
|
||||
} = this.props;
|
||||
const prefs = this.props.Prefs.values;
|
||||
let fieldsetClassname = `wallpaper-list`;
|
||||
if (prefs["newtabWallpapers.v2.enabled"]) {
|
||||
fieldsetClassname += " ignore-color-mode";
|
||||
}
|
||||
return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("fieldset", {
|
||||
className: "wallpaper-list"
|
||||
className: fieldsetClassname
|
||||
}, wallpaperList.map(({
|
||||
title,
|
||||
theme,
|
||||
@ -9836,10 +9853,11 @@ class _Weather extends (external_React_default()).PureComponent {
|
||||
link: "https://support.mozilla.org/kb/customize-items-on-firefox-new-tab-page",
|
||||
shouldSendImpressionStats: shouldSendImpressionStats
|
||||
}) : null))), /*#__PURE__*/external_React_default().createElement("span", {
|
||||
"data-l10n-id": "newtab-weather-sponsored",
|
||||
"data-l10n-args": "{\"provider\": \"AccuWeather\"}",
|
||||
className: "weatherSponsorText"
|
||||
}));
|
||||
}, /*#__PURE__*/external_React_default().createElement("span", {
|
||||
"data-l10n-id": "newtab-weather-sponsored",
|
||||
"data-l10n-args": "{\"provider\": \"AccuWeather\"}"
|
||||
})));
|
||||
}
|
||||
return /*#__PURE__*/external_React_default().createElement("div", {
|
||||
ref: this.setErrorRef,
|
||||
@ -10100,12 +10118,19 @@ class BaseContent extends (external_React_default()).PureComponent {
|
||||
__webpack_require__.g.document?.body.style.setProperty(`--newtab-wallpaper-light`, `url(${lightWallpaper?.wallpaperUrl || ""})`);
|
||||
__webpack_require__.g.document?.body.style.setProperty(`--newtab-wallpaper-dark`, `url(${darkWallpaper?.wallpaperUrl || ""})`);
|
||||
|
||||
// Grab the contrast of the currently displayed wallpaper.
|
||||
const {
|
||||
theme
|
||||
} = this.state.colorMode === "light" ? lightWallpaper : darkWallpaper;
|
||||
|
||||
// Add helper class to body if user has a wallpaper selected
|
||||
if (lightWallpaper) {
|
||||
__webpack_require__.g.document?.body.classList.add("hasWallpaperLight");
|
||||
if (theme === "light") {
|
||||
__webpack_require__.g.document?.body.classList.add("lightWallpaper");
|
||||
__webpack_require__.g.document?.body.classList.remove("darkWallpaper");
|
||||
}
|
||||
if (darkWallpaper) {
|
||||
__webpack_require__.g.document?.body.classList.add("hasWallpaperDark");
|
||||
if (theme === "dark") {
|
||||
__webpack_require__.g.document?.body.classList.add("darkWallpaper");
|
||||
__webpack_require__.g.document?.body.classList.remove("lightWallpaper");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -292,7 +292,14 @@ export const PREFS_CONFIG = new Map([
|
||||
"newtabWallpapers.enabled",
|
||||
{
|
||||
title: "Boolean flag to turn wallpaper functionality on and off",
|
||||
value: true,
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
"newtabWallpapers.v2.enabled",
|
||||
{
|
||||
title: "Boolean flag to turn wallpaper v2 functionality on and off",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
|
||||
Loading…
Reference in New Issue
Block a user