From 6412750cc1fc2d6277b21f31f0731a0d21ac117b Mon Sep 17 00:00:00 2001 From: Harry Twyford Date: Wed, 8 Sep 2021 22:06:24 +0000 Subject: [PATCH] Bug 1726432 - Part 1 - Remove newtab-experience class. r=amy Differential Revision: https://phabricator.services.mozilla.com/D123384 --- .../content-src/components/Base/Base.jsx | 1 - .../content-src/components/Card/_Card.scss | 82 +- .../_CollapsibleSection.scss | 40 +- .../CustomizeMenu/_CustomizeMenu.scss | 2 +- .../CardGrid/_CardGrid.scss | 36 +- .../DSCard/_DSCard.scss | 65 +- .../Navigation/_Navigation.scss | 12 +- .../TopSites/_TopSites.scss | 39 +- .../components/Search/_Search.scss | 233 ++---- .../components/TopSites/_TopSites.scss | 298 ++------ .../newtab/content-src/styles/_variables.scss | 35 +- .../newtab/css/activity-stream-linux.css | 709 +++++------------- .../newtab/css/activity-stream-mac.css | 709 +++++------------- .../newtab/css/activity-stream-windows.css | 709 +++++------------- .../data/content/activity-stream.bundle.js | 2 +- 15 files changed, 696 insertions(+), 2276 deletions(-) diff --git a/browser/components/newtab/content-src/components/Base/Base.jsx b/browser/components/newtab/content-src/components/Base/Base.jsx index cb32a5212ebc..b19fbc134e8f 100644 --- a/browser/components/newtab/content-src/components/Base/Base.jsx +++ b/browser/components/newtab/content-src/components/Base/Base.jsx @@ -199,7 +199,6 @@ export class BaseContent extends React.PureComponent { "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["logowordmark.alwaysVisible"] && "visible-logo", - "newtab-experience", ] .filter(v => v) .join(" "); diff --git a/browser/components/newtab/content-src/components/Card/_Card.scss b/browser/components/newtab/content-src/components/Card/_Card.scss index 74edec5b87e6..a00011dfab05 100644 --- a/browser/components/newtab/content-src/components/Card/_Card.scss +++ b/browser/components/newtab/content-src/components/Card/_Card.scss @@ -1,75 +1,29 @@ @use 'sass:math'; -// Special styling for the New Tab Experience styles, -// This is to be incorporated once the styles are made permanent -.outer-wrapper.newtab-experience { - .card-outer { - border-radius: $border-radius-new; - - &:is(:focus):not(.placeholder) { - @include ds-focus-nte; - - transition: none; - } - - &:hover { - box-shadow: none; - transition: none; - } - - .card { - box-shadow: var(--newtab-card-first-shadow); - border-radius: $border-radius-new; - } - - .card-preview-image-outer { - border-radius: $border-radius-new $border-radius-new 0 0; - } - - // Temporary fix to have the context button focus blend in with other New Tab Experience context menu focus - .context-menu-button { - &:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); - } - } - - > a { - &:is(:focus) { - .card { - @include ds-focus-nte; - } - } - } - } -} - -.outer-wrapper:not(.newtab-experience) { - .card-outer { - &:is(:hover, :focus, .active):not(.placeholder) { - @include fade-in-card; - } - } -} - .card-outer { @include context-menu-button; background: var(--newtab-card-background-color); - border-radius: $border-radius; + border-radius: $border-radius-new; display: inline-block; height: $card-height; margin-inline-end: $base-gutter; position: relative; width: 100%; + &:is(:focus):not(.placeholder) { + @include ds-focus; + + transition: none; + } + + &:hover { + box-shadow: none; + transition: none; + } + &.placeholder { background: transparent; - .card { - box-shadow: inset $inner-box-shadow; - } - .card-preview-image-outer, .card-context { display: none; @@ -77,8 +31,8 @@ } .card { - border-radius: $border-radius; - box-shadow: var(--newtab-card-shadow); + border-radius: $border-radius-new; + box-shadow: var(--newtab-card-first-shadow); height: 100%; } @@ -90,6 +44,12 @@ position: absolute; width: 100%; + &:is(:focus) { + .card { + @include ds-focus; + } + } + &:is(.active, :focus) { .card { @include fade-in-card; @@ -120,7 +80,7 @@ .card-preview-image-outer { background-color: $grey-30; - border-radius: $border-radius $border-radius 0 0; + border-radius: $border-radius-new $border-radius-new 0 0; height: $card-preview-image-height; overflow: hidden; position: relative; diff --git a/browser/components/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss b/browser/components/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss index 031d0fce6d23..697791aae0b1 100644 --- a/browser/components/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss +++ b/browser/components/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss @@ -1,28 +1,3 @@ -.outer-wrapper.newtab-experience { - .collapsible-section { - &[data-section-id='topsites'] { - .section-top-bar { - display: none; - } - } - - .section-title { - cursor: default; - font-weight: 600; - font-size: 17px; - color: var(--newtab-background-primary-text-color); - } - } -} - -.outer-wrapper:not(.newtab-experience) { - .collapsible-section { - .section-title { - vertical-align: middle; - } - } -} - .collapsible-section { padding: $section-vertical-padding $section-horizontal-padding; @@ -32,12 +7,13 @@ .section-title { font-size: $section-title-font-size; - font-weight: bold; - color: var(--newtab-section-header-text-color); - display: inline-block; - fill: var(--newtab-section-header-text-color); + font-weight: 600; + color: var(--newtab-background-primary-text-color); &.grey-title { + color: var(--newtab-section-header-text-color); + display: inline-block; + fill: var(--newtab-section-header-text-color); vertical-align: middle; } @@ -96,6 +72,12 @@ } } + &[data-section-id='topsites'] { + .section-top-bar { + display: none; + } + } + // Hide first story card for the medium breakpoint to prevent orphaned third story &[data-section-id='topstories'] .card-outer:first-child { @media (min-width: $break-point-medium) and (max-width: $break-point-large - 1) { diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss index 33b329f32ae9..c13f82bd746e 100644 --- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss +++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -31,7 +31,7 @@ } &:focus-visible { - @include ds-focus-nte; + @include ds-focus; } &.personalize-animate-exit-done { diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss index 2ecb3149378f..9187e2cdb071 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss @@ -1,29 +1,6 @@ $col4-header-line-height: 20; $col4-header-font-size: 14; -// Special styling for the New Tab Experience styles, -// This is to be incorporated once the styles are made permanent -.outer-wrapper.newtab-experience { - .ds-card-grid { - &.ds-card-grid-border { - .ds-card:not(.placeholder) { - border-radius: $border-radius-new; - box-shadow: var(--newtab-card-first-shadow); - - .img-wrapper .img img { - border-radius: $border-radius-new $border-radius-new 0 0; - } - } - } - - .ds-card-link:focus { - @include ds-focus-nte; - transition: none; - border-radius: $border-radius-new; - } - } -} - .ds-card-grid { display: grid; grid-gap: 24px; @@ -103,14 +80,13 @@ $col4-header-font-size: 14; &.ds-card-grid-border { .ds-card:not(.placeholder) { @include dark-theme-only { - box-shadow: 0 1px 4px $shadow-10; background: $proton-dark-grey-30; } - - box-shadow: 0 1px 4px 0 $grey-90-10; + border-radius: $border-radius-new; + box-shadow: var(--newtab-card-first-shadow); .img-wrapper .img img { - border-radius: 4px 4px 0 0; + border-radius: $border-radius-new $border-radius-new 0 0; } } } @@ -125,6 +101,12 @@ $col4-header-font-size: 14; } } + .ds-card-link:focus { + @include ds-focus; + transition: none; + border-radius: $border-radius-new; + } + // "2/3 width layout" .ds-column-5 &, .ds-column-6 &, diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss index 8564fa4f6740..2ade91a5e5c1 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -4,36 +4,6 @@ $header-line-height: 24; $excerpt-font-size: 14; $excerpt-line-height: 20; -.outer-wrapper:not(.newtab-experience) { - .ds-card { - .ds-card-link { - &:hover { - @include ds-fade-in($grey-30); - - @include dark-theme-only { - @include ds-fade-in($grey-60); - } - } - - &:focus { - @include ds-fade-in; - - @include dark-theme-only { - @include ds-fade-in($blue-40-40); - } - } - - &:active { - @include ds-fade-in($grey-30); - - @include dark-theme-only { - @include ds-fade-in($grey-60); - } - } - } - } -} - .ds-card { display: flex; flex-direction: column; @@ -109,6 +79,10 @@ $excerpt-line-height: 20; } &:focus { + @include ds-focus; + + transition: none; + header { @include dark-theme-only { color: $blue-40; @@ -280,34 +254,3 @@ $excerpt-line-height: 20; margin: 0; } } - -// Special styling for the New Tab Experience styles, -// This is to be incorporated once the styles are made permanent -.outer-wrapper.newtab-experience { - .ds-card { - // Temporary fix to have the context button focus blend in with other New Tab Experience context menu focus - .context-menu-button { - &:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); - } - } - - .ds-card-link { - &:focus { - @include ds-focus-nte; - - transition: none; - - header { - @include dark-theme-only { - color: $blue-40; - } - - color: $blue-60; - } - } - } - } -} diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss index 55dcdd09a0e7..9c89fbbaae06 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss @@ -1,15 +1,5 @@ -.outer-wrapper.newtab-experience { - .ds-navigation { - color: var(--newtab-background-primary-text-color); - } -} - .ds-navigation { - @include dark-theme-only { - color: $grey-30; - } - - color: $grey-50; + color: var(--newtab-background-primary-text-color); font-size: 11.5px; font-weight: 500; line-height: 22px; diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss index b40ce5bb7bea..189118fec3b6 100644 --- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss +++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss @@ -1,43 +1,9 @@ -// ds topsites wraps the original topsites, with a few css changes. -.outer-wrapper:not(.newtab-experience) { +.outer-wrapper { .ds-top-sites { - // This is the override layer. - .top-sites { - .top-site-outer { - padding: 0 12px; - - .top-site-inner > a:is(.active, :focus) .tile { - @include ds-fade-in; - - @include dark-theme-only { - @include ds-fade-in($blue-40-40); - } - } - - .top-site-inner > a:is(:hover) .tile { - - @include ds-fade-in($grey-30); - - @include dark-theme-only { - @include ds-fade-in($grey-60); - } - } - } - - .top-sites-list { - margin: 0 -12px; - } - } - } -} - -.outer-wrapper.newtab-experience { - .ds-top-sites { - // This is the override layer. .top-sites { .top-site-outer { .top-site-inner > a:is(.active, :focus) .tile { - @include ds-focus-nte; + @include ds-focus; } .top-site-inner > a:is(:hover) .top-site-inner { @@ -116,4 +82,3 @@ } } } - diff --git a/browser/components/newtab/content-src/components/Search/_Search.scss b/browser/components/newtab/content-src/components/Search/_Search.scss index d882ef2dc0e1..61ee891ca805 100644 --- a/browser/components/newtab/content-src/components/Search/_Search.scss +++ b/browser/components/newtab/content-src/components/Search/_Search.scss @@ -1,105 +1,16 @@ $search-height: 48px; $search-height-new: 52px; $search-icon-size: 24px; -$search-icon-padding: 12px; -$search-icon-width: 2 * $search-icon-padding + $search-icon-size - 2px; +$search-icon-padding: 16px; +$search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px; $search-button-width: 48px; $glyph-forward: url('chrome://browser/skin/forward.svg'); -.outer-wrapper.newtab-experience { - $search-icon-padding: 16px; - $search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px; - - &.visible-logo { - .logo-and-wordmark { - .wordmark { - fill: var(--newtab-wordmark-color); - } - } - } - - .search-wrapper { - padding-bottom: 38px; - - .search-inner-wrapper { - min-height: $search-height-new; - width: $searchbar-width-small-new; - - @media (min-width: $break-point-medium) { - width: $searchbar-width-medium-new; - } - - @media (min-width: $break-point-large) { - width: $searchbar-width-large-new; - } - - @media (min-width: $break-point-widest) { - width: $searchbar-width-largest-new; - } - } - - .search-button { - &:focus { - outline: 0; - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - border: 1px solid var(--newtab-focus-border); - border-radius: 0 $border-radius-new $border-radius-new 0; - } - } - - input:focus { - outline: 0; - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - } - - &.fake-focus:not(.search.disabled) { - .search-handoff-button { - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - } - } - - .search-handoff-button, - input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat; - background-size: $search-icon-size; - padding-inline-start: $search-icon-width; - padding-inline-end: 10px; - box-shadow: var(--newtab-search-first-shadow); - border: 1px solid transparent; - border-radius: 8px; - color: var(--newtab-search-text-color); - font-weight: 500; - font-size: 15px; - - &:dir(rtl) { - background-position-x: right $search-icon-padding; - } - } - - .search-handoff-button { - padding-inline-end: 15px; - fill: currentColor; - -moz-context-properties: fill; - - .fake-caret { - top: 18px; - inset-inline-start: $search-icon-width; - - &:dir(rtl) { - background-position-x: right $search-icon-padding; - } - } - } - } -} - .search-wrapper { - padding: 34px 0 64px; + padding: 34px 0 38px; .only-search & { - padding: 0 0 64px; + padding: 0 0 38px; } .logo-and-wordmark { @@ -155,58 +66,51 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); .search-inner-wrapper { cursor: default; display: flex; - min-height: $search-height; + min-height: $search-height-new; margin: 0 auto; position: relative; - width: $searchbar-width-small; - - .ds-outer-wrapper-breakpoint-override & { - width: 216px; - } + width: $searchbar-width-small-new; @media (min-width: $break-point-medium) { - width: $searchbar-width-medium; - - .ds-outer-wrapper-breakpoint-override & { - width: 460px; - } + width: $searchbar-width-medium-new; } @media (min-width: $break-point-large) { - width: $searchbar-width-large; + width: $searchbar-width-large-new; + } - .ds-outer-wrapper-breakpoint-override & { - width: 696px; - } + @media (min-width: $break-point-widest) { + width: $searchbar-width-largest-new; } } + .search-handoff-button, input { background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat; background-size: $search-icon-size; - border: solid 1px var(--newtab-search-border-color); - box-shadow: $shadow-secondary, 0 0 0 1px $black-15; - font-size: 15px; + padding-inline-start: $search-icon-width; + padding-inline-end: 10px; + padding-block: 0; + width: 100%; + box-shadow: var(--newtab-search-first-shadow); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-search-text-color); -moz-context-properties: fill; fill: var(--newtab-search-icon-color); - padding: 0; - padding-inline-end: $search-button-width; - padding-inline-start: $search-icon-width; - width: 100%; + font-weight: 500; + font-size: 15px; &:dir(rtl) { background-position-x: right $search-icon-padding; } } - &:hover input { - box-shadow: $shadow-secondary, 0 0 0 1px $black-25; - } - .search-inner-wrapper:active input, input:focus { - border: $input-border-active; - box-shadow: var(--newtab-textbox-focus-boxshadow); + border: 1px solid var(--newtab-focus-border); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } .search-button { @@ -227,6 +131,13 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); cursor: pointer; } + &:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + border: 1px solid var(--newtab-focus-border); + border-radius: 0 $border-radius-new $border-radius-new 0; + } + &:active { background-color: $grey-90-20; } @@ -235,6 +146,36 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); transform: scaleX(-1); } } + + &.fake-focus:not(.search.disabled) { + .search-handoff-button { + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + } + } + + .search-handoff-button { + padding-inline-end: 15px; + fill: currentColor; + -moz-context-properties: fill; + + .fake-caret { + top: 18px; + inset-inline-start: $search-icon-width; + + &:dir(rtl) { + background-position-x: right $search-icon-padding; + } + } + } + + &.visible-logo { + .logo-and-wordmark { + .wordmark { + fill: var(--newtab-wordmark-color); + } + } + } } .non-collapsible-section + .below-search-snippet-wrapper { @@ -275,10 +216,6 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); background-position-x: right $search-icon-padding; } - &:hover { - box-shadow: $shadow-secondary, 0 0 0 1px $black-25; - } - .fake-focus:not(.search-disabled) & { border: $input-border-active; box-shadow: var(--newtab-textbox-focus-boxshadow); @@ -335,22 +272,22 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); @media (min-height: 701px) { body:not(.inline-onboarding) .fixed-search { main { - padding-top: 146px; + padding-top: 124px; } &.visible-logo { main { - padding-top: 276px; + padding-top: 254px; } } .search-wrapper { - $search-height: 35px; - $search-icon-size: 16px; + $search-height: 45px; + $search-icon-size: 24px; $search-icon-padding: 16px; - border-bottom: solid 1px var(--newtab-border-secondary-color); - padding: 30px 0; + border-bottom: solid 1px var(--newtab-seperator-line-color); + padding: 27px 0; $search-header-bar-height: 95px; background-color: var(--newtab-search-header-background-color); min-height: $search-header-bar-height; @@ -382,40 +319,6 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); } } - &.newtab-experience { - main { - padding-top: 124px; - } - - &.visible-logo { - main { - padding-top: 254px; - } - } - - .search-wrapper { - $search-height: 45px; - $search-icon-size: 24px; - $search-icon-padding: 16px; - - border-bottom: solid 1px var(--newtab-seperator-line-color); - padding: 27px 0; - - .search-inner-wrapper { - min-height: $search-height; - } - - input { - background-position-x: $search-icon-padding; - background-size: $search-icon-size; - - &:dir(rtl) { - background-position-x: right $search-icon-padding; - } - } - } - } - .search-handoff-button { background-position-x: $search-icon-padding; background-size: $search-icon-size; diff --git a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss index 12c68899dcbf..dc786ac01a8c 100644 --- a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss +++ b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss @@ -20,6 +20,12 @@ $letter-fallback-color: $white; margin: 0 (-$half-base-gutter); padding: 0; + &:not(.dnd-active) { + .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-topsites-outer-card-hover); + } + } + // Two columns @media (max-width: $break-point-medium) { > :nth-child(2n+1) { @@ -37,31 +43,31 @@ $letter-fallback-color: $white; @include context-menu-open-left; } } - @media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width) { + @media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width-nte) { :nth-child(4n+3) { @include context-menu-open-left; } } // Six columns - @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) { + @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width-nte) { :nth-child(6n) { @include context-menu-open-left; } } - @media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width) { + @media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width-nte) { :nth-child(6n+5) { @include context-menu-open-left; } } // Eight columns - @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) { + @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width-nte) { :nth-child(8n) { @include context-menu-open-left; } } - @media (min-width: $break-point-widest) and (max-width: $break-point-widest + $card-width) { + @media (min-width: $break-point-widest) and (max-width: $break-point-widest + $card-width-nte) { :nth-child(8n+7) { @include context-menu-open-left; } @@ -92,7 +98,10 @@ $letter-fallback-color: $white; // container for drop zone .top-site-outer { - padding: 0 $half-base-gutter; + width: 120px; + padding: 20px $half-base-gutter 4px; + border-radius: 8px; + display: inline-block; // container for context menu @@ -106,9 +115,44 @@ $letter-fallback-color: $white; } } + &:is(:hover) { + .context-menu-button { + opacity: 1; + } + } + + .context-menu-button { + background-image: url('chrome://global/skin/icons/more.svg'); + border: 0; + border-radius: 4px; + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; + + &:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); + } + } + .tile { // sass-lint:disable-block property-sort-order - border-radius: $top-sites-border-radius; - box-shadow: inset $inner-box-shadow, var(--newtab-card-shadow); + border-radius: $nt-experience-top-sites-border-radius; + box-shadow: $newtab-card-firstshadow; + background-color: var(--newtab-topsites-background-color); + justify-content: center; + margin: 0 auto; + height: $top-sites-size-nte; + width: $top-sites-size-nte; + cursor: pointer; position: relative; @@ -118,7 +162,6 @@ $letter-fallback-color: $white; display: flex; font-size: 32px; font-weight: 200; - justify-content: center; text-transform: uppercase; // sass-lint:disable-line no-disallowed-properties .icon-wrapper { @@ -167,8 +210,8 @@ $letter-fallback-color: $white; .default-icon, .search-topsite { background-size: $default-icon-size; - height: $default-icon-wrapper-size; - width: $default-icon-wrapper-size; + height: $nt-experience-default-icon-wrapper-size; + width: $nt-experience-default-icon-wrapper-size; // for corner letter fallback align-items: center; @@ -183,7 +226,7 @@ $letter-fallback-color: $white; .search-topsite { background-image: url('chrome://global/skin/icons/search-glass.svg'); - background-size: 26px; + background-size: 16px; background-color: $blue-60; border-radius: $default-icon-wrapper-size; -moz-context-properties: fill; @@ -191,21 +234,32 @@ $letter-fallback-color: $white; box-shadow: var(--newtab-card-shadow); transition-duration: $hover-transition-duration; transition-property: background-size, bottom, inset-inline-end, height, width; - height: $search-icon-wrapper-size; - width: $search-icon-wrapper-size; + height: 32px; + width: 32px; bottom: -$default-icon-offset; inset-inline-end: -$default-icon-offset; } + &:hover .search-topsite { + $hover-icon-wrapper-size: $search-icon-wrapper-size + 4; + } + + &.placeholder { + .tile { + box-shadow: $inner-box-shadow; + } + } + .title { - color: var(--newtab-topsites-label-color); - font: message-box; - padding-top: 4px; + color: var(--newtab-background-primary-text-color); + padding-top: 8px; + font: caption; text-align: center; position: relative; .icon { - fill: var(--newtab-icon-tertiary-color); + margin-inline-end: 2px; + fill: var(--newtab-background-primary-text-color); } span { @@ -553,214 +607,6 @@ $letter-fallback-color: $white; } } -.outer-wrapper { - // Special styling for when we are using the old new tab styling, - // this is to be removed once the changes are made permanent - &:not(.newtab-experience) { - .top-site-outer { - @include context-menu-button; - - .tile { - height: $top-sites-size; - width: $top-sites-size; - transition: box-shadow $hover-transition-duration; - } - - .top-site-icon { - box-shadow: var(--newtab-topsites-icon-shadow); - } - - .title { - width: $top-sites-size; - - &.has-icon { - span { - padding: 0 13px; - } - } - - .icon { - inset-inline-start: 0; - position: absolute; - top: 0.5em; - } - } - - // container for context menu - .top-site-inner { - position: relative; - - > a { - color: inherit; - display: block; - outline: none; - - &:is(.active, :focus) { - .tile { - @include fade-in; - } - } - } - } - - .default-icon, - .search-topsite { - bottom: -$default-icon-offset; - inset-inline-end: -$default-icon-offset; - } - - &:hover .search-topsite { - $hover-icon-wrapper-size: $default-icon-wrapper-size + 4; - $hover-icon-offset: -$default-icon-offset - 3; - - background-size: 28px; - border-radius: $hover-icon-wrapper-size; - bottom: $hover-icon-offset; - height: $hover-icon-wrapper-size; - inset-inline-end: $hover-icon-offset; - width: $hover-icon-wrapper-size; - } - - &.placeholder { - .tile { - box-shadow: inset $inner-box-shadow; - } - } - } - - .top-sites-list { - &:not(.dnd-active) { - .top-site-outer:is(.active, :focus, :hover) { - .tile { - @include fade-in; - } - - @include context-menu-button-hover; - } - } - - li { - margin: 0 0 $top-sites-vertical-space; - } - } - } - - // Special styling for the New Tab Experience styles, - // This is to be incorporated once the styles are made permanent - &.newtab-experience { - .top-site-outer { - @include context-menu-button-newtab-experience; - width: 120px; - padding-block: 20px 4px; - border-radius: 8px; - - .edit-button { - background-image: url('#{$image-path}glyph-edit-16.svg'); - } - - .tile { - border-radius: $nt-experience-top-sites-border-radius; - box-shadow: $newtab-card-firstshadow; - background-color: var(--newtab-topsites-background-color); - justify-content: center; - margin: 0 auto; - height: $top-sites-size-nte; - width: $top-sites-size-nte; - } - - .title { - color: var(--newtab-background-primary-text-color); - padding-top: 8px; - font: caption; - - .icon { - margin-inline-end: 2px; - fill: var(--newtab-background-primary-text-color); - } - } - - .default-icon, - .search-topsite { - height: $nt-experience-default-icon-wrapper-size; - width: $nt-experience-default-icon-wrapper-size; - } - - .search-topsite { - background-size: 16px; - height: 32px; - width: 32px; - } - - &:hover .search-topsite { - $hover-icon-wrapper-size: $search-icon-wrapper-size + 4; - } - - &.placeholder { - .tile { - box-shadow: $inner-box-shadow; - } - } - } - - .top-sites-list { - // Two columns - @media (max-width: $break-point-medium) { - > :nth-child(2n+1) { - @include context-menu-open-middle; - } - - > :nth-child(2n) { - @include context-menu-open-left; - } - } - - // Four columns - @media (min-width: $break-point-medium) and (max-width: $break-point-large) { - :nth-child(4n) { - @include context-menu-open-left; - } - } - @media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width-nte) { - :nth-child(4n+3) { - @include context-menu-open-left; - } - } - - // Six columns - @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width-nte) { - :nth-child(6n) { - @include context-menu-open-left; - } - } - @media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width-nte) { - :nth-child(6n+5) { - @include context-menu-open-left; - } - } - - // Eight columns - @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width-nte) { - :nth-child(8n) { - @include context-menu-open-left; - } - } - @media (min-width: $break-point-widest) and (max-width: $break-point-widest + $card-width-nte) { - :nth-child(8n+7) { - @include context-menu-open-left; - } - } - } - - &:not(.dnd-active) { - .top-site-outer:is(.active, :focus, :hover) { - @include nt-experience-context-menu-button-hover; - background: var(--newtab-topsites-outer-card-hover); - } - } - } - -} - //used for tooltips below form element @keyframes fade-up-tt { 0% { diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss index 4e1df65cbb7a..f77c9b7f7690 100644 --- a/browser/components/newtab/content-src/styles/_variables.scss +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -225,7 +225,7 @@ $break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-w $break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px $break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px -$section-title-font-size: 13px; +$section-title-font-size: 17px; $card-width: $grid-unit * 2 + $base-gutter; $card-width-nte: $grid-unit-small * 2 + $base-gutter; @@ -275,37 +275,12 @@ $customize-menu-border-tint: 1px solid $newtab-card-tint; transition: box-shadow 150ms; } -@mixin ds-focus-nte { +@mixin ds-focus { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } -@mixin context-menu-button-newtab-experience { - .context-menu-button { - background-image: url('chrome://global/skin/icons/more.svg'); - border: 0; - border-radius: 4px; - cursor: pointer; - fill: var(--newtab-icon-primary-color); - -moz-context-properties: fill; - height: 20px; - width: 20px; - inset-inline-end: -9px; - opacity: 0; - position: absolute; - top: -20px; - transition: opacity 200ms; - - &:is(:active, :focus) { - outline: 0; - opacity: 1; - background-color: var(--newtab-topsites-context-menu-hover); - fill: var(--newtab-primary-action-background); - } - } -} - @mixin context-menu-button { .context-menu-button { background-clip: padding-box; @@ -342,12 +317,6 @@ $customize-menu-border-tint: 1px solid $newtab-card-tint; } } -@mixin nt-experience-context-menu-button-hover { - .context-menu-button { - opacity: 1; - } -} - @mixin context-menu-open-middle { .context-menu { margin-inline-end: auto; diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index 010d34e1ae24..5eedbf642fb1 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -622,6 +622,9 @@ main.has-snippet { margin: 0 -16px; padding: 0; } +.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-topsites-outer-card-hover); +} @media (max-width: 610px) { .top-sites-list > :nth-child(2n+1) .context-menu { margin-inline-end: auto; @@ -644,7 +647,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 610px) and (max-width: 834px) { +@media (min-width: 610px) and (max-width: 802px) { .top-sites-list :nth-child(4n+3) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -652,7 +655,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1314px) { +@media (min-width: 866px) and (max-width: 1250px) { .top-sites-list :nth-child(6n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -660,7 +663,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1090px) { +@media (min-width: 866px) and (max-width: 1058px) { .top-sites-list :nth-child(6n+5) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -668,7 +671,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1570px) { +@media (min-width: 1122px) and (max-width: 1506px) { .top-sites-list :nth-child(8n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -676,7 +679,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1346px) { +@media (min-width: 1122px) and (max-width: 1314px) { .top-sites-list :nth-child(8n+7) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -704,7 +707,9 @@ main.has-snippet { } .top-site-outer { - padding: 0 16px; + width: 120px; + padding: 20px 16px 4px; + border-radius: 8px; display: inline-block; } .top-site-outer .top-site-inner { @@ -715,9 +720,38 @@ main.has-snippet { display: block; outline: none; } -.top-site-outer .tile { +.top-site-outer:is(:hover) .context-menu-button { + opacity: 1; +} +.top-site-outer .context-menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + border: 0; border-radius: 4px; - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), var(--newtab-card-shadow); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; +} +.top-site-outer .context-menu-button:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); +} +.top-site-outer .tile { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); + background-color: var(--newtab-topsites-background-color); + justify-content: center; + margin: 0 auto; + height: 80px; + width: 80px; cursor: pointer; position: relative; align-items: center; @@ -725,7 +759,6 @@ main.has-snippet { display: flex; font-size: 32px; font-weight: 200; - justify-content: center; text-transform: uppercase; } .top-site-outer .tile .icon-wrapper { @@ -768,8 +801,8 @@ main.has-snippet { .top-site-outer .default-icon, .top-site-outer .search-topsite { background-size: 32px; - height: 42px; - width: 42px; + height: 32px; + width: 32px; align-items: center; display: flex; font-size: 20px; @@ -781,7 +814,7 @@ main.has-snippet { } .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); - background-size: 26px; + background-size: 16px; background-color: #0060DF; border-radius: 42px; -moz-context-properties: fill; @@ -789,20 +822,24 @@ main.has-snippet { box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; - height: 42px; - width: 42px; + height: 32px; + width: 32px; bottom: -6px; inset-inline-end: -6px; } +.top-site-outer.placeholder .tile { + box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +} .top-site-outer .title { - color: var(--newtab-topsites-label-color); - font: message-box; - padding-top: 4px; + color: var(--newtab-background-primary-text-color); + padding-top: 8px; + font: caption; text-align: center; position: relative; } .top-site-outer .title .icon { - fill: var(--newtab-icon-tertiary-color); + margin-inline-end: 2px; + fill: var(--newtab-background-primary-text-color); } .top-site-outer .title span { display: block; @@ -888,7 +925,7 @@ main.has-snippet { display: flex; } .topsite-form label { - font-size: 13px; + font-size: 17px; } .topsite-form .form-wrapper { width: 100%; @@ -1073,218 +1110,6 @@ main.has-snippet { border: 1px dotted var(--newtab-link-primary-color); } -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button { - background-clip: padding-box; - background-color: var(--newtab-contextmenu-button-color); - background-image: url("chrome://global/skin/icons/more.svg"); - background-position: 55%; - border: 1px solid var(--newtab-border-primary-color); - border-radius: 100%; - box-shadow: 0 2px rgba(12, 12, 13, 0.1); - cursor: pointer; - fill: var(--newtab-icon-primary-color); - height: 27px; - inset-inline-end: -13.5px; - opacity: 0; - position: absolute; - top: -13.5px; - transform: scale(0.25); - transition-duration: 150ms; - transition-property: transform, opacity; - width: 27px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button:is(:active, :focus) { - opacity: 1; - transform: scale(1); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .tile { - height: 96px; - width: 96px; - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon { - box-shadow: var(--newtab-topsites-icon-shadow); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title { - width: 96px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title.has-icon span { - padding: 0 13px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title .icon { - inset-inline-start: 0; - position: absolute; - top: 0.5em; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner { - position: relative; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a { - color: inherit; - display: block; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .default-icon, -.outer-wrapper:not(.newtab-experience) .top-site-outer .search-topsite { - bottom: -6px; - inset-inline-end: -6px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer:hover .search-topsite { - background-size: 28px; - border-radius: 46px; - bottom: -9px; - height: 46px; - inset-inline-end: -9px; - width: 46px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer.placeholder .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; - transform: scale(1); - transition-delay: 333ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list li { - margin: 0 0 8px; -} -.outer-wrapper.newtab-experience .top-site-outer { - width: 120px; - padding-block: 20px 4px; - border-radius: 8px; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button { - background-image: url("chrome://global/skin/icons/more.svg"); - border: 0; - border-radius: 4px; - cursor: pointer; - fill: var(--newtab-icon-primary-color); - -moz-context-properties: fill; - height: 20px; - width: 20px; - inset-inline-end: -9px; - opacity: 0; - position: absolute; - top: -20px; - transition: opacity 200ms; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button:is(:active, :focus) { - outline: 0; - opacity: 1; - background-color: var(--newtab-topsites-context-menu-hover); - fill: var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .top-site-outer .edit-button { - background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); -} -.outer-wrapper.newtab-experience .top-site-outer .tile { - border-radius: 8px; - box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); - background-color: var(--newtab-topsites-background-color); - justify-content: center; - margin: 0 auto; - height: 80px; - width: 80px; -} -.outer-wrapper.newtab-experience .top-site-outer .title { - color: var(--newtab-background-primary-text-color); - padding-top: 8px; - font: caption; -} -.outer-wrapper.newtab-experience .top-site-outer .title .icon { - margin-inline-end: 2px; - fill: var(--newtab-background-primary-text-color); -} -.outer-wrapper.newtab-experience .top-site-outer .default-icon, -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - background-size: 16px; - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer.placeholder .tile { - box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -@media (max-width: 610px) { - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n+1) .context-menu { - margin-inline-end: auto; - margin-inline-start: auto; - inset-inline-end: auto; - inset-inline-start: -32px; - } - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 866px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 802px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n+3) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1250px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1058px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n+5) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1506px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1314px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n+7) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { - background: var(--newtab-topsites-outer-card-hover); -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; -} - @keyframes fade-up-tt { 0% { opacity: 0; @@ -1449,81 +1274,11 @@ main.has-snippet { content: none; } -.outer-wrapper.newtab-experience.visible-logo .logo-and-wordmark .wordmark { - fill: var(--newtab-wordmark-color); -} -.outer-wrapper.newtab-experience .search-wrapper { - padding-bottom: 38px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 52px; - width: 200px; -} -@media (min-width: 610px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 360px; - } -} -@media (min-width: 866px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 600px; - } -} -@media (min-width: 1122px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 720px; - } -} -.outer-wrapper.newtab-experience .search-wrapper .search-button:focus { - outline: 0; - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - border: 1px solid var(--newtab-focus-border); - border-radius: 0 8px 8px 0; -} -.outer-wrapper.newtab-experience .search-wrapper input:focus { - outline: 0; - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button, -.outer-wrapper.newtab-experience .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; - background-size: 24px; - padding-inline-start: 52px; - padding-inline-end: 10px; - box-shadow: var(--newtab-search-first-shadow); - border: 1px solid transparent; - border-radius: 8px; - color: var(--newtab-search-text-color); - font-weight: 500; - font-size: 15px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button:dir(rtl), -.outer-wrapper.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button { - padding-inline-end: 15px; - fill: currentColor; - -moz-context-properties: fill; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret { - top: 18px; - inset-inline-start: 52px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret:dir(rtl) { - background-position-x: right 16px; -} - .search-wrapper { - padding: 34px 0 64px; + padding: 34px 0 38px; } .only-search .search-wrapper { - padding: 0 0 64px; + padding: 0 0 38px; } .search-wrapper .logo-and-wordmark { align-items: center; @@ -1569,53 +1324,52 @@ main.has-snippet { .search-wrapper .search-inner-wrapper { cursor: default; display: flex; - min-height: 48px; + min-height: 52px; margin: 0 auto; position: relative; - width: 224px; -} -.ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 216px; + width: 200px; } @media (min-width: 610px) { .search-wrapper .search-inner-wrapper { - width: 480px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 460px; + width: 360px; } } @media (min-width: 866px) { .search-wrapper .search-inner-wrapper { - width: 736px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 696px; + width: 600px; } } +@media (min-width: 1122px) { + .search-wrapper .search-inner-wrapper { + width: 720px; + } +} +.search-wrapper .search-handoff-button, .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; - border: solid 1px var(--newtab-search-border-color); - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); - font-size: 15px; + padding-inline-start: 52px; + padding-inline-end: 10px; + padding-block: 0; + width: 100%; + box-shadow: var(--newtab-search-first-shadow); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-search-text-color); -moz-context-properties: fill; fill: var(--newtab-search-icon-color); - padding: 0; - padding-inline-end: 48px; - padding-inline-start: 46px; - width: 100%; + font-weight: 500; + font-size: 15px; } +.search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { - background-position-x: right 12px; -} -.search-wrapper:hover input { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus { - border: 1px solid var(--newtab-textbox-focus-color); - box-shadow: var(--newtab-textbox-focus-boxshadow); + border: 1px solid var(--newtab-focus-border); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } .search-wrapper .search-button { background: url("chrome://browser/skin/forward.svg") no-repeat center center; @@ -1633,12 +1387,37 @@ main.has-snippet { background-color: rgba(12, 12, 13, 0.1); cursor: pointer; } +.search-wrapper .search-button:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + border: 1px solid var(--newtab-focus-border); + border-radius: 0 8px 8px 0; +} .search-wrapper .search-button:active { background-color: rgba(12, 12, 13, 0.2); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); } +.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); +} +.search-wrapper .search-handoff-button { + padding-inline-end: 15px; + fill: currentColor; + -moz-context-properties: fill; +} +.search-wrapper .search-handoff-button .fake-caret { + top: 18px; + inset-inline-start: 52px; +} +.search-wrapper .search-handoff-button .fake-caret:dir(rtl) { + background-position-x: right 16px; +} +.search-wrapper.visible-logo .logo-and-wordmark .wordmark { + fill: var(--newtab-wordmark-color); +} .non-collapsible-section + .below-search-snippet-wrapper { margin-top: -48px; @@ -1658,7 +1437,7 @@ main.has-snippet { } } .search-handoff-button { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; border: solid 1px var(--newtab-search-border-color); border-radius: 3px; @@ -1672,10 +1451,7 @@ main.has-snippet { width: 100%; } .search-handoff-button:dir(rtl) { - background-position-x: right 12px; -} -.search-handoff-button:hover { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .fake-focus:not(.search-disabled) .search-handoff-button { border: 1px solid var(--newtab-textbox-focus-color); @@ -1724,14 +1500,14 @@ main.has-snippet { @media (min-height: 701px) { body:not(.inline-onboarding) .fixed-search main { - padding-top: 146px; + padding-top: 124px; } body:not(.inline-onboarding) .fixed-search.visible-logo main { - padding-top: 276px; + padding-top: 254px; } body:not(.inline-onboarding) .fixed-search .search-wrapper { - border-bottom: solid 1px var(--newtab-border-secondary-color); - padding: 30px 0; + border-bottom: solid 1px var(--newtab-seperator-line-color); + padding: 27px 0; background-color: var(--newtab-search-header-background-color); min-height: 95px; left: 0; @@ -1741,11 +1517,11 @@ main.has-snippet { z-index: 9; } body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { - min-height: 35px; + min-height: 45px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input { background-position-x: 16px; - background-size: 16px; + background-size: 24px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { background-position-x: right 16px; @@ -1756,32 +1532,12 @@ main.has-snippet { body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { display: none; } - body:not(.inline-onboarding) .fixed-search.newtab-experience main { - padding-top: 124px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience.visible-logo main { - padding-top: 254px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper { - border-bottom: solid 1px var(--newtab-seperator-line-color); - padding: 27px 0; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 45px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input { + body:not(.inline-onboarding) .fixed-search .search-handoff-button { background-position-x: 16px; background-size: 24px; } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; - } - body:not(.inline-onboarding) .fixed-search .search-handoff-button { - background-position-x: 12px; - background-size: 24px; - } body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { - background-position-x: right 12px; + background-position-x: right 16px; } body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { top: 10px; @@ -2256,45 +2012,9 @@ main.has-snippet { box-shadow: 0 0 0 2px var(--newtab-focus-outline); } -.outer-wrapper.newtab-experience .card-outer { - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer:is(:focus):not(.placeholder) { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .card-outer:hover { - box-shadow: none; - transition: none; -} -.outer-wrapper.newtab-experience .card-outer .card { - box-shadow: var(--newtab-card-first-shadow); - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer .card-preview-image-outer { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .card-outer .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .card-outer > a:is(:focus) .card { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); -} - -.outer-wrapper:not(.newtab-experience) .card-outer:is(:hover, :focus, .active):not(.placeholder) { - box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} - .card-outer { background: var(--newtab-card-background-color); - border-radius: 3px; + border-radius: 8px; display: inline-block; height: 266px; margin-inline-end: 32px; @@ -2325,19 +2045,26 @@ main.has-snippet { opacity: 1; transform: scale(1); } +.card-outer:is(:focus):not(.placeholder) { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} +.card-outer:hover { + box-shadow: none; + transition: none; +} .card-outer.placeholder { background: transparent; } -.card-outer.placeholder .card { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} .card-outer.placeholder .card-preview-image-outer, .card-outer.placeholder .card-context { display: none; } .card-outer .card { - border-radius: 3px; - box-shadow: var(--newtab-card-shadow); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); height: 100%; } .card-outer > a { @@ -2348,6 +2075,11 @@ main.has-snippet { position: absolute; width: 100%; } +.card-outer > a:is(:focus) .card { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); +} .card-outer > a:is(.active, :focus) .card { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; @@ -2374,7 +2106,7 @@ main.has-snippet { } .card-outer .card-preview-image-outer { background-color: #D7D7DB; - border-radius: 3px 3px 0 0; + border-radius: 8px 8px 0 0; height: 122px; overflow: hidden; position: relative; @@ -2570,20 +2302,6 @@ main.has-snippet { } } -.outer-wrapper.newtab-experience .collapsible-section[data-section-id=topsites] .section-top-bar { - display: none; -} -.outer-wrapper.newtab-experience .collapsible-section .section-title { - cursor: default; - font-weight: 600; - font-size: 17px; - color: var(--newtab-background-primary-text-color); -} - -.outer-wrapper:not(.newtab-experience) .collapsible-section .section-title { - vertical-align: middle; -} - .collapsible-section { padding: 10px 25px; } @@ -2591,13 +2309,14 @@ main.has-snippet { margin: 0; } .collapsible-section .section-title { - font-size: 13px; - font-weight: bold; + font-size: 17px; + font-weight: 600; + color: var(--newtab-background-primary-text-color); +} +.collapsible-section .section-title.grey-title { color: var(--newtab-section-header-text-color); display: inline-block; fill: var(--newtab-section-header-text-color); -} -.collapsible-section .section-title.grey-title { vertical-align: middle; } .collapsible-section .section-title .section-title-contents { @@ -2642,6 +2361,9 @@ main.has-snippet { overflow: hidden; pointer-events: none; } +.collapsible-section[data-section-id=topsites] .section-top-bar { + display: none; +} @media (min-width: 610px) and (max-width: 865px) { .collapsible-section[data-section-id=topstories] .card-outer:first-child { display: none; @@ -2994,7 +2716,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { color: #737373; - font-size: 13px; + font-size: 17px; font-weight: 600; line-height: 20px; } @@ -3018,21 +2740,6 @@ main.has-snippet { text-decoration: underline; } -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - border-radius: 8px; - box-shadow: var(--newtab-card-first-shadow); -} -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .ds-card-grid .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; - border-radius: 8px; -} - .ds-card-grid { display: grid; grid-gap: 24px; @@ -3092,14 +2799,14 @@ main.has-snippet { } } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); } [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1); background: #42414d; } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; } .ds-card-grid.ds-card-grid-no-border .ds-card { background: none; @@ -3107,6 +2814,13 @@ main.has-snippet { .ds-card-grid.ds-card-grid-no-border .ds-card .meta { padding: 12px 0; } +.ds-card-grid .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; + border-radius: 8px; +} .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { grid-template-columns: repeat(2, 1fr); } @@ -3657,20 +3371,13 @@ main.has-snippet { color: #003EAA; } -.outer-wrapper.newtab-experience .ds-navigation { - color: var(--newtab-background-primary-text-color); -} - .ds-navigation { - color: #737373; + color: var(--newtab-background-primary-text-color); font-size: 11.5px; font-weight: 500; line-height: 22px; padding: 4px 0; } -[lwt-newtab-brighttext] .ds-navigation { - color: #D7D7DB; -} @media (min-width: 1122px) { .ds-navigation { line-height: 32px; @@ -3738,55 +3445,24 @@ main.has-snippet { color: #D7D7DB; } -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer { - padding: 0 12px; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-sites-list { - margin: 0 -12px; -} - -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #D7D7DB; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #4A4A4F; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-sites-list { +.outer-wrapper .ds-top-sites .top-sites .top-sites-list { margin: 0 -12px; } @@ -3933,43 +3609,6 @@ main.has-snippet { transition: box-shadow 150ms; } -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} - .ds-card { display: flex; flex-direction: column; @@ -4032,6 +3671,12 @@ main.has-snippet { [lwt-newtab-brighttext] .ds-card .ds-card-link:hover header { color: #45A1FF; } +.ds-card .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} .ds-card .ds-card-link:focus header { color: #0060DF; } @@ -4168,24 +3813,6 @@ main.has-snippet { color: #F9F9FA; } -.outer-wrapper.newtab-experience .ds-card .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #0060DF; -} -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #45A1FF; -} - .story-footer { color: var(--newtab-text-secondary-color); inset-inline-start: 0; diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index 66be3188770d..0c3c414ca531 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -626,6 +626,9 @@ main.has-snippet { margin: 0 -16px; padding: 0; } +.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-topsites-outer-card-hover); +} @media (max-width: 610px) { .top-sites-list > :nth-child(2n+1) .context-menu { margin-inline-end: auto; @@ -648,7 +651,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 610px) and (max-width: 834px) { +@media (min-width: 610px) and (max-width: 802px) { .top-sites-list :nth-child(4n+3) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -656,7 +659,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1314px) { +@media (min-width: 866px) and (max-width: 1250px) { .top-sites-list :nth-child(6n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -664,7 +667,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1090px) { +@media (min-width: 866px) and (max-width: 1058px) { .top-sites-list :nth-child(6n+5) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -672,7 +675,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1570px) { +@media (min-width: 1122px) and (max-width: 1506px) { .top-sites-list :nth-child(8n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -680,7 +683,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1346px) { +@media (min-width: 1122px) and (max-width: 1314px) { .top-sites-list :nth-child(8n+7) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -708,7 +711,9 @@ main.has-snippet { } .top-site-outer { - padding: 0 16px; + width: 120px; + padding: 20px 16px 4px; + border-radius: 8px; display: inline-block; } .top-site-outer .top-site-inner { @@ -719,9 +724,38 @@ main.has-snippet { display: block; outline: none; } -.top-site-outer .tile { +.top-site-outer:is(:hover) .context-menu-button { + opacity: 1; +} +.top-site-outer .context-menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + border: 0; border-radius: 4px; - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), var(--newtab-card-shadow); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; +} +.top-site-outer .context-menu-button:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); +} +.top-site-outer .tile { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); + background-color: var(--newtab-topsites-background-color); + justify-content: center; + margin: 0 auto; + height: 80px; + width: 80px; cursor: pointer; position: relative; align-items: center; @@ -729,7 +763,6 @@ main.has-snippet { display: flex; font-size: 32px; font-weight: 200; - justify-content: center; text-transform: uppercase; } .top-site-outer .tile .icon-wrapper { @@ -772,8 +805,8 @@ main.has-snippet { .top-site-outer .default-icon, .top-site-outer .search-topsite { background-size: 32px; - height: 42px; - width: 42px; + height: 32px; + width: 32px; align-items: center; display: flex; font-size: 20px; @@ -785,7 +818,7 @@ main.has-snippet { } .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); - background-size: 26px; + background-size: 16px; background-color: #0060DF; border-radius: 42px; -moz-context-properties: fill; @@ -793,20 +826,24 @@ main.has-snippet { box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; - height: 42px; - width: 42px; + height: 32px; + width: 32px; bottom: -6px; inset-inline-end: -6px; } +.top-site-outer.placeholder .tile { + box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +} .top-site-outer .title { - color: var(--newtab-topsites-label-color); - font: message-box; - padding-top: 4px; + color: var(--newtab-background-primary-text-color); + padding-top: 8px; + font: caption; text-align: center; position: relative; } .top-site-outer .title .icon { - fill: var(--newtab-icon-tertiary-color); + margin-inline-end: 2px; + fill: var(--newtab-background-primary-text-color); } .top-site-outer .title span { display: block; @@ -892,7 +929,7 @@ main.has-snippet { display: flex; } .topsite-form label { - font-size: 13px; + font-size: 17px; } .topsite-form .form-wrapper { width: 100%; @@ -1077,218 +1114,6 @@ main.has-snippet { border: 1px dotted var(--newtab-link-primary-color); } -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button { - background-clip: padding-box; - background-color: var(--newtab-contextmenu-button-color); - background-image: url("chrome://global/skin/icons/more.svg"); - background-position: 55%; - border: 1px solid var(--newtab-border-primary-color); - border-radius: 100%; - box-shadow: 0 2px rgba(12, 12, 13, 0.1); - cursor: pointer; - fill: var(--newtab-icon-primary-color); - height: 27px; - inset-inline-end: -13.5px; - opacity: 0; - position: absolute; - top: -13.5px; - transform: scale(0.25); - transition-duration: 150ms; - transition-property: transform, opacity; - width: 27px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button:is(:active, :focus) { - opacity: 1; - transform: scale(1); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .tile { - height: 96px; - width: 96px; - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon { - box-shadow: var(--newtab-topsites-icon-shadow); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title { - width: 96px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title.has-icon span { - padding: 0 13px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title .icon { - inset-inline-start: 0; - position: absolute; - top: 0.5em; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner { - position: relative; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a { - color: inherit; - display: block; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .default-icon, -.outer-wrapper:not(.newtab-experience) .top-site-outer .search-topsite { - bottom: -6px; - inset-inline-end: -6px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer:hover .search-topsite { - background-size: 28px; - border-radius: 46px; - bottom: -9px; - height: 46px; - inset-inline-end: -9px; - width: 46px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer.placeholder .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; - transform: scale(1); - transition-delay: 333ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list li { - margin: 0 0 8px; -} -.outer-wrapper.newtab-experience .top-site-outer { - width: 120px; - padding-block: 20px 4px; - border-radius: 8px; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button { - background-image: url("chrome://global/skin/icons/more.svg"); - border: 0; - border-radius: 4px; - cursor: pointer; - fill: var(--newtab-icon-primary-color); - -moz-context-properties: fill; - height: 20px; - width: 20px; - inset-inline-end: -9px; - opacity: 0; - position: absolute; - top: -20px; - transition: opacity 200ms; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button:is(:active, :focus) { - outline: 0; - opacity: 1; - background-color: var(--newtab-topsites-context-menu-hover); - fill: var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .top-site-outer .edit-button { - background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); -} -.outer-wrapper.newtab-experience .top-site-outer .tile { - border-radius: 8px; - box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); - background-color: var(--newtab-topsites-background-color); - justify-content: center; - margin: 0 auto; - height: 80px; - width: 80px; -} -.outer-wrapper.newtab-experience .top-site-outer .title { - color: var(--newtab-background-primary-text-color); - padding-top: 8px; - font: caption; -} -.outer-wrapper.newtab-experience .top-site-outer .title .icon { - margin-inline-end: 2px; - fill: var(--newtab-background-primary-text-color); -} -.outer-wrapper.newtab-experience .top-site-outer .default-icon, -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - background-size: 16px; - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer.placeholder .tile { - box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -@media (max-width: 610px) { - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n+1) .context-menu { - margin-inline-end: auto; - margin-inline-start: auto; - inset-inline-end: auto; - inset-inline-start: -32px; - } - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 866px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 802px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n+3) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1250px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1058px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n+5) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1506px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1314px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n+7) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { - background: var(--newtab-topsites-outer-card-hover); -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; -} - @keyframes fade-up-tt { 0% { opacity: 0; @@ -1453,81 +1278,11 @@ main.has-snippet { content: none; } -.outer-wrapper.newtab-experience.visible-logo .logo-and-wordmark .wordmark { - fill: var(--newtab-wordmark-color); -} -.outer-wrapper.newtab-experience .search-wrapper { - padding-bottom: 38px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 52px; - width: 200px; -} -@media (min-width: 610px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 360px; - } -} -@media (min-width: 866px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 600px; - } -} -@media (min-width: 1122px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 720px; - } -} -.outer-wrapper.newtab-experience .search-wrapper .search-button:focus { - outline: 0; - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - border: 1px solid var(--newtab-focus-border); - border-radius: 0 8px 8px 0; -} -.outer-wrapper.newtab-experience .search-wrapper input:focus { - outline: 0; - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button, -.outer-wrapper.newtab-experience .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; - background-size: 24px; - padding-inline-start: 52px; - padding-inline-end: 10px; - box-shadow: var(--newtab-search-first-shadow); - border: 1px solid transparent; - border-radius: 8px; - color: var(--newtab-search-text-color); - font-weight: 500; - font-size: 15px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button:dir(rtl), -.outer-wrapper.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button { - padding-inline-end: 15px; - fill: currentColor; - -moz-context-properties: fill; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret { - top: 18px; - inset-inline-start: 52px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret:dir(rtl) { - background-position-x: right 16px; -} - .search-wrapper { - padding: 34px 0 64px; + padding: 34px 0 38px; } .only-search .search-wrapper { - padding: 0 0 64px; + padding: 0 0 38px; } .search-wrapper .logo-and-wordmark { align-items: center; @@ -1573,53 +1328,52 @@ main.has-snippet { .search-wrapper .search-inner-wrapper { cursor: default; display: flex; - min-height: 48px; + min-height: 52px; margin: 0 auto; position: relative; - width: 224px; -} -.ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 216px; + width: 200px; } @media (min-width: 610px) { .search-wrapper .search-inner-wrapper { - width: 480px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 460px; + width: 360px; } } @media (min-width: 866px) { .search-wrapper .search-inner-wrapper { - width: 736px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 696px; + width: 600px; } } +@media (min-width: 1122px) { + .search-wrapper .search-inner-wrapper { + width: 720px; + } +} +.search-wrapper .search-handoff-button, .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; - border: solid 1px var(--newtab-search-border-color); - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); - font-size: 15px; + padding-inline-start: 52px; + padding-inline-end: 10px; + padding-block: 0; + width: 100%; + box-shadow: var(--newtab-search-first-shadow); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-search-text-color); -moz-context-properties: fill; fill: var(--newtab-search-icon-color); - padding: 0; - padding-inline-end: 48px; - padding-inline-start: 46px; - width: 100%; + font-weight: 500; + font-size: 15px; } +.search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { - background-position-x: right 12px; -} -.search-wrapper:hover input { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus { - border: 1px solid var(--newtab-textbox-focus-color); - box-shadow: var(--newtab-textbox-focus-boxshadow); + border: 1px solid var(--newtab-focus-border); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } .search-wrapper .search-button { background: url("chrome://browser/skin/forward.svg") no-repeat center center; @@ -1637,12 +1391,37 @@ main.has-snippet { background-color: rgba(12, 12, 13, 0.1); cursor: pointer; } +.search-wrapper .search-button:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + border: 1px solid var(--newtab-focus-border); + border-radius: 0 8px 8px 0; +} .search-wrapper .search-button:active { background-color: rgba(12, 12, 13, 0.2); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); } +.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); +} +.search-wrapper .search-handoff-button { + padding-inline-end: 15px; + fill: currentColor; + -moz-context-properties: fill; +} +.search-wrapper .search-handoff-button .fake-caret { + top: 18px; + inset-inline-start: 52px; +} +.search-wrapper .search-handoff-button .fake-caret:dir(rtl) { + background-position-x: right 16px; +} +.search-wrapper.visible-logo .logo-and-wordmark .wordmark { + fill: var(--newtab-wordmark-color); +} .non-collapsible-section + .below-search-snippet-wrapper { margin-top: -48px; @@ -1662,7 +1441,7 @@ main.has-snippet { } } .search-handoff-button { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; border: solid 1px var(--newtab-search-border-color); border-radius: 3px; @@ -1676,10 +1455,7 @@ main.has-snippet { width: 100%; } .search-handoff-button:dir(rtl) { - background-position-x: right 12px; -} -.search-handoff-button:hover { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .fake-focus:not(.search-disabled) .search-handoff-button { border: 1px solid var(--newtab-textbox-focus-color); @@ -1728,14 +1504,14 @@ main.has-snippet { @media (min-height: 701px) { body:not(.inline-onboarding) .fixed-search main { - padding-top: 146px; + padding-top: 124px; } body:not(.inline-onboarding) .fixed-search.visible-logo main { - padding-top: 276px; + padding-top: 254px; } body:not(.inline-onboarding) .fixed-search .search-wrapper { - border-bottom: solid 1px var(--newtab-border-secondary-color); - padding: 30px 0; + border-bottom: solid 1px var(--newtab-seperator-line-color); + padding: 27px 0; background-color: var(--newtab-search-header-background-color); min-height: 95px; left: 0; @@ -1745,11 +1521,11 @@ main.has-snippet { z-index: 9; } body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { - min-height: 35px; + min-height: 45px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input { background-position-x: 16px; - background-size: 16px; + background-size: 24px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { background-position-x: right 16px; @@ -1760,32 +1536,12 @@ main.has-snippet { body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { display: none; } - body:not(.inline-onboarding) .fixed-search.newtab-experience main { - padding-top: 124px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience.visible-logo main { - padding-top: 254px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper { - border-bottom: solid 1px var(--newtab-seperator-line-color); - padding: 27px 0; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 45px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input { + body:not(.inline-onboarding) .fixed-search .search-handoff-button { background-position-x: 16px; background-size: 24px; } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; - } - body:not(.inline-onboarding) .fixed-search .search-handoff-button { - background-position-x: 12px; - background-size: 24px; - } body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { - background-position-x: right 12px; + background-position-x: right 16px; } body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { top: 10px; @@ -2260,45 +2016,9 @@ main.has-snippet { box-shadow: 0 0 0 2px var(--newtab-focus-outline); } -.outer-wrapper.newtab-experience .card-outer { - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer:is(:focus):not(.placeholder) { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .card-outer:hover { - box-shadow: none; - transition: none; -} -.outer-wrapper.newtab-experience .card-outer .card { - box-shadow: var(--newtab-card-first-shadow); - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer .card-preview-image-outer { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .card-outer .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .card-outer > a:is(:focus) .card { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); -} - -.outer-wrapper:not(.newtab-experience) .card-outer:is(:hover, :focus, .active):not(.placeholder) { - box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} - .card-outer { background: var(--newtab-card-background-color); - border-radius: 3px; + border-radius: 8px; display: inline-block; height: 266px; margin-inline-end: 32px; @@ -2329,19 +2049,26 @@ main.has-snippet { opacity: 1; transform: scale(1); } +.card-outer:is(:focus):not(.placeholder) { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} +.card-outer:hover { + box-shadow: none; + transition: none; +} .card-outer.placeholder { background: transparent; } -.card-outer.placeholder .card { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} .card-outer.placeholder .card-preview-image-outer, .card-outer.placeholder .card-context { display: none; } .card-outer .card { - border-radius: 3px; - box-shadow: var(--newtab-card-shadow); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); height: 100%; } .card-outer > a { @@ -2352,6 +2079,11 @@ main.has-snippet { position: absolute; width: 100%; } +.card-outer > a:is(:focus) .card { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); +} .card-outer > a:is(.active, :focus) .card { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; @@ -2378,7 +2110,7 @@ main.has-snippet { } .card-outer .card-preview-image-outer { background-color: #D7D7DB; - border-radius: 3px 3px 0 0; + border-radius: 8px 8px 0 0; height: 122px; overflow: hidden; position: relative; @@ -2574,20 +2306,6 @@ main.has-snippet { } } -.outer-wrapper.newtab-experience .collapsible-section[data-section-id=topsites] .section-top-bar { - display: none; -} -.outer-wrapper.newtab-experience .collapsible-section .section-title { - cursor: default; - font-weight: 600; - font-size: 17px; - color: var(--newtab-background-primary-text-color); -} - -.outer-wrapper:not(.newtab-experience) .collapsible-section .section-title { - vertical-align: middle; -} - .collapsible-section { padding: 10px 25px; } @@ -2595,13 +2313,14 @@ main.has-snippet { margin: 0; } .collapsible-section .section-title { - font-size: 13px; - font-weight: bold; + font-size: 17px; + font-weight: 600; + color: var(--newtab-background-primary-text-color); +} +.collapsible-section .section-title.grey-title { color: var(--newtab-section-header-text-color); display: inline-block; fill: var(--newtab-section-header-text-color); -} -.collapsible-section .section-title.grey-title { vertical-align: middle; } .collapsible-section .section-title .section-title-contents { @@ -2646,6 +2365,9 @@ main.has-snippet { overflow: hidden; pointer-events: none; } +.collapsible-section[data-section-id=topsites] .section-top-bar { + display: none; +} @media (min-width: 610px) and (max-width: 865px) { .collapsible-section[data-section-id=topstories] .card-outer:first-child { display: none; @@ -2998,7 +2720,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { color: #737373; - font-size: 13px; + font-size: 17px; font-weight: 600; line-height: 20px; } @@ -3022,21 +2744,6 @@ main.has-snippet { text-decoration: underline; } -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - border-radius: 8px; - box-shadow: var(--newtab-card-first-shadow); -} -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .ds-card-grid .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; - border-radius: 8px; -} - .ds-card-grid { display: grid; grid-gap: 24px; @@ -3096,14 +2803,14 @@ main.has-snippet { } } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); } [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1); background: #42414d; } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; } .ds-card-grid.ds-card-grid-no-border .ds-card { background: none; @@ -3111,6 +2818,13 @@ main.has-snippet { .ds-card-grid.ds-card-grid-no-border .ds-card .meta { padding: 12px 0; } +.ds-card-grid .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; + border-radius: 8px; +} .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { grid-template-columns: repeat(2, 1fr); } @@ -3661,20 +3375,13 @@ main.has-snippet { color: #003EAA; } -.outer-wrapper.newtab-experience .ds-navigation { - color: var(--newtab-background-primary-text-color); -} - .ds-navigation { - color: #737373; + color: var(--newtab-background-primary-text-color); font-size: 11.5px; font-weight: 500; line-height: 22px; padding: 4px 0; } -[lwt-newtab-brighttext] .ds-navigation { - color: #D7D7DB; -} @media (min-width: 1122px) { .ds-navigation { line-height: 32px; @@ -3742,55 +3449,24 @@ main.has-snippet { color: #D7D7DB; } -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer { - padding: 0 12px; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-sites-list { - margin: 0 -12px; -} - -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #D7D7DB; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #4A4A4F; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-sites-list { +.outer-wrapper .ds-top-sites .top-sites .top-sites-list { margin: 0 -12px; } @@ -3937,43 +3613,6 @@ main.has-snippet { transition: box-shadow 150ms; } -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} - .ds-card { display: flex; flex-direction: column; @@ -4036,6 +3675,12 @@ main.has-snippet { [lwt-newtab-brighttext] .ds-card .ds-card-link:hover header { color: #45A1FF; } +.ds-card .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} .ds-card .ds-card-link:focus header { color: #0060DF; } @@ -4172,24 +3817,6 @@ main.has-snippet { color: #F9F9FA; } -.outer-wrapper.newtab-experience .ds-card .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #0060DF; -} -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #45A1FF; -} - .story-footer { color: var(--newtab-text-secondary-color); inset-inline-start: 0; diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index f4b91219e947..fe9bf794b62c 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -622,6 +622,9 @@ main.has-snippet { margin: 0 -16px; padding: 0; } +.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-topsites-outer-card-hover); +} @media (max-width: 610px) { .top-sites-list > :nth-child(2n+1) .context-menu { margin-inline-end: auto; @@ -644,7 +647,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 610px) and (max-width: 834px) { +@media (min-width: 610px) and (max-width: 802px) { .top-sites-list :nth-child(4n+3) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -652,7 +655,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1314px) { +@media (min-width: 866px) and (max-width: 1250px) { .top-sites-list :nth-child(6n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -660,7 +663,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 866px) and (max-width: 1090px) { +@media (min-width: 866px) and (max-width: 1058px) { .top-sites-list :nth-child(6n+5) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -668,7 +671,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1570px) { +@media (min-width: 1122px) and (max-width: 1506px) { .top-sites-list :nth-child(8n) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -676,7 +679,7 @@ main.has-snippet { inset-inline-start: auto; } } -@media (min-width: 1122px) and (max-width: 1346px) { +@media (min-width: 1122px) and (max-width: 1314px) { .top-sites-list :nth-child(8n+7) .context-menu { margin-inline-end: 5px; margin-inline-start: auto; @@ -704,7 +707,9 @@ main.has-snippet { } .top-site-outer { - padding: 0 16px; + width: 120px; + padding: 20px 16px 4px; + border-radius: 8px; display: inline-block; } .top-site-outer .top-site-inner { @@ -715,9 +720,38 @@ main.has-snippet { display: block; outline: none; } -.top-site-outer .tile { +.top-site-outer:is(:hover) .context-menu-button { + opacity: 1; +} +.top-site-outer .context-menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + border: 0; border-radius: 4px; - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), var(--newtab-card-shadow); + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; +} +.top-site-outer .context-menu-button:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); +} +.top-site-outer .tile { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); + background-color: var(--newtab-topsites-background-color); + justify-content: center; + margin: 0 auto; + height: 80px; + width: 80px; cursor: pointer; position: relative; align-items: center; @@ -725,7 +759,6 @@ main.has-snippet { display: flex; font-size: 32px; font-weight: 200; - justify-content: center; text-transform: uppercase; } .top-site-outer .tile .icon-wrapper { @@ -768,8 +801,8 @@ main.has-snippet { .top-site-outer .default-icon, .top-site-outer .search-topsite { background-size: 32px; - height: 42px; - width: 42px; + height: 32px; + width: 32px; align-items: center; display: flex; font-size: 20px; @@ -781,7 +814,7 @@ main.has-snippet { } .top-site-outer .search-topsite { background-image: url("chrome://global/skin/icons/search-glass.svg"); - background-size: 26px; + background-size: 16px; background-color: #0060DF; border-radius: 42px; -moz-context-properties: fill; @@ -789,20 +822,24 @@ main.has-snippet { box-shadow: var(--newtab-card-shadow); transition-duration: 150ms; transition-property: background-size, bottom, inset-inline-end, height, width; - height: 42px; - width: 42px; + height: 32px; + width: 32px; bottom: -6px; inset-inline-end: -6px; } +.top-site-outer.placeholder .tile { + box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +} .top-site-outer .title { - color: var(--newtab-topsites-label-color); - font: message-box; - padding-top: 4px; + color: var(--newtab-background-primary-text-color); + padding-top: 8px; + font: caption; text-align: center; position: relative; } .top-site-outer .title .icon { - fill: var(--newtab-icon-tertiary-color); + margin-inline-end: 2px; + fill: var(--newtab-background-primary-text-color); } .top-site-outer .title span { display: block; @@ -888,7 +925,7 @@ main.has-snippet { display: flex; } .topsite-form label { - font-size: 13px; + font-size: 17px; } .topsite-form .form-wrapper { width: 100%; @@ -1073,218 +1110,6 @@ main.has-snippet { border: 1px dotted var(--newtab-link-primary-color); } -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button { - background-clip: padding-box; - background-color: var(--newtab-contextmenu-button-color); - background-image: url("chrome://global/skin/icons/more.svg"); - background-position: 55%; - border: 1px solid var(--newtab-border-primary-color); - border-radius: 100%; - box-shadow: 0 2px rgba(12, 12, 13, 0.1); - cursor: pointer; - fill: var(--newtab-icon-primary-color); - height: 27px; - inset-inline-end: -13.5px; - opacity: 0; - position: absolute; - top: -13.5px; - transform: scale(0.25); - transition-duration: 150ms; - transition-property: transform, opacity; - width: 27px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .context-menu-button:is(:active, :focus) { - opacity: 1; - transform: scale(1); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .tile { - height: 96px; - width: 96px; - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon { - box-shadow: var(--newtab-topsites-icon-shadow); -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title { - width: 96px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title.has-icon span { - padding: 0 13px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .title .icon { - inset-inline-start: 0; - position: absolute; - top: 0.5em; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner { - position: relative; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a { - color: inherit; - display: block; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer .default-icon, -.outer-wrapper:not(.newtab-experience) .top-site-outer .search-topsite { - bottom: -6px; - inset-inline-end: -6px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer:hover .search-topsite { - background-size: 28px; - border-radius: 46px; - bottom: -9px; - height: 46px; - inset-inline-end: -9px; - width: 46px; -} -.outer-wrapper:not(.newtab-experience) .top-site-outer.placeholder .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color), 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; - transform: scale(1); - transition-delay: 333ms; -} -.outer-wrapper:not(.newtab-experience) .top-sites-list li { - margin: 0 0 8px; -} -.outer-wrapper.newtab-experience .top-site-outer { - width: 120px; - padding-block: 20px 4px; - border-radius: 8px; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button { - background-image: url("chrome://global/skin/icons/more.svg"); - border: 0; - border-radius: 4px; - cursor: pointer; - fill: var(--newtab-icon-primary-color); - -moz-context-properties: fill; - height: 20px; - width: 20px; - inset-inline-end: -9px; - opacity: 0; - position: absolute; - top: -20px; - transition: opacity 200ms; -} -.outer-wrapper.newtab-experience .top-site-outer .context-menu-button:is(:active, :focus) { - outline: 0; - opacity: 1; - background-color: var(--newtab-topsites-context-menu-hover); - fill: var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .top-site-outer .edit-button { - background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); -} -.outer-wrapper.newtab-experience .top-site-outer .tile { - border-radius: 8px; - box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2); - background-color: var(--newtab-topsites-background-color); - justify-content: center; - margin: 0 auto; - height: 80px; - width: 80px; -} -.outer-wrapper.newtab-experience .top-site-outer .title { - color: var(--newtab-background-primary-text-color); - padding-top: 8px; - font: caption; -} -.outer-wrapper.newtab-experience .top-site-outer .title .icon { - margin-inline-end: 2px; - fill: var(--newtab-background-primary-text-color); -} -.outer-wrapper.newtab-experience .top-site-outer .default-icon, -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer .search-topsite { - background-size: 16px; - height: 32px; - width: 32px; -} -.outer-wrapper.newtab-experience .top-site-outer.placeholder .tile { - box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); -} -@media (max-width: 610px) { - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n+1) .context-menu { - margin-inline-end: auto; - margin-inline-start: auto; - inset-inline-end: auto; - inset-inline-start: -32px; - } - .outer-wrapper.newtab-experience .top-sites-list > :nth-child(2n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 866px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 610px) and (max-width: 802px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(4n+3) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1250px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 866px) and (max-width: 1058px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(6n+5) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1506px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -@media (min-width: 1122px) and (max-width: 1314px) { - .outer-wrapper.newtab-experience .top-sites-list :nth-child(8n+7) .context-menu { - margin-inline-end: 5px; - margin-inline-start: auto; - inset-inline-end: 0; - inset-inline-start: auto; - } -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { - background: var(--newtab-topsites-outer-card-hover); -} -.outer-wrapper.newtab-experience:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .context-menu-button { - opacity: 1; -} - @keyframes fade-up-tt { 0% { opacity: 0; @@ -1449,81 +1274,11 @@ main.has-snippet { content: none; } -.outer-wrapper.newtab-experience.visible-logo .logo-and-wordmark .wordmark { - fill: var(--newtab-wordmark-color); -} -.outer-wrapper.newtab-experience .search-wrapper { - padding-bottom: 38px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 52px; - width: 200px; -} -@media (min-width: 610px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 360px; - } -} -@media (min-width: 866px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 600px; - } -} -@media (min-width: 1122px) { - .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper { - width: 720px; - } -} -.outer-wrapper.newtab-experience .search-wrapper .search-button:focus { - outline: 0; - box-shadow: 0 0 0 2px var(--newtab-focus-outline); - border: 1px solid var(--newtab-focus-border); - border-radius: 0 8px 8px 0; -} -.outer-wrapper.newtab-experience .search-wrapper input:focus { - outline: 0; - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { - border: 1px solid var(--newtab-focus-border); - box-shadow: 0 0 0 2px var(--newtab-focus-outline); -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button, -.outer-wrapper.newtab-experience .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; - background-size: 24px; - padding-inline-start: 52px; - padding-inline-end: 10px; - box-shadow: var(--newtab-search-first-shadow); - border: 1px solid transparent; - border-radius: 8px; - color: var(--newtab-search-text-color); - font-weight: 500; - font-size: 15px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button:dir(rtl), -.outer-wrapper.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button { - padding-inline-end: 15px; - fill: currentColor; - -moz-context-properties: fill; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret { - top: 18px; - inset-inline-start: 52px; -} -.outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret:dir(rtl) { - background-position-x: right 16px; -} - .search-wrapper { - padding: 34px 0 64px; + padding: 34px 0 38px; } .only-search .search-wrapper { - padding: 0 0 64px; + padding: 0 0 38px; } .search-wrapper .logo-and-wordmark { align-items: center; @@ -1569,53 +1324,52 @@ main.has-snippet { .search-wrapper .search-inner-wrapper { cursor: default; display: flex; - min-height: 48px; + min-height: 52px; margin: 0 auto; position: relative; - width: 224px; -} -.ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 216px; + width: 200px; } @media (min-width: 610px) { .search-wrapper .search-inner-wrapper { - width: 480px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 460px; + width: 360px; } } @media (min-width: 866px) { .search-wrapper .search-inner-wrapper { - width: 736px; - } - .ds-outer-wrapper-breakpoint-override .search-wrapper .search-inner-wrapper { - width: 696px; + width: 600px; } } +@media (min-width: 1122px) { + .search-wrapper .search-inner-wrapper { + width: 720px; + } +} +.search-wrapper .search-handoff-button, .search-wrapper input { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; - border: solid 1px var(--newtab-search-border-color); - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); - font-size: 15px; + padding-inline-start: 52px; + padding-inline-end: 10px; + padding-block: 0; + width: 100%; + box-shadow: var(--newtab-search-first-shadow); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-search-text-color); -moz-context-properties: fill; fill: var(--newtab-search-icon-color); - padding: 0; - padding-inline-end: 48px; - padding-inline-start: 46px; - width: 100%; + font-weight: 500; + font-size: 15px; } +.search-wrapper .search-handoff-button:dir(rtl), .search-wrapper input:dir(rtl) { - background-position-x: right 12px; -} -.search-wrapper:hover input { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus { - border: 1px solid var(--newtab-textbox-focus-color); - box-shadow: var(--newtab-textbox-focus-boxshadow); + border: 1px solid var(--newtab-focus-border); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); } .search-wrapper .search-button { background: url("chrome://browser/skin/forward.svg") no-repeat center center; @@ -1633,12 +1387,37 @@ main.has-snippet { background-color: rgba(12, 12, 13, 0.1); cursor: pointer; } +.search-wrapper .search-button:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-focus-outline); + border: 1px solid var(--newtab-focus-border); + border-radius: 0 8px 8px 0; +} .search-wrapper .search-button:active { background-color: rgba(12, 12, 13, 0.2); } .search-wrapper .search-button:dir(rtl) { transform: scaleX(-1); } +.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { + border: 1px solid var(--newtab-focus-border); + box-shadow: 0 0 0 2px var(--newtab-focus-outline); +} +.search-wrapper .search-handoff-button { + padding-inline-end: 15px; + fill: currentColor; + -moz-context-properties: fill; +} +.search-wrapper .search-handoff-button .fake-caret { + top: 18px; + inset-inline-start: 52px; +} +.search-wrapper .search-handoff-button .fake-caret:dir(rtl) { + background-position-x: right 16px; +} +.search-wrapper.visible-logo .logo-and-wordmark .wordmark { + fill: var(--newtab-wordmark-color); +} .non-collapsible-section + .below-search-snippet-wrapper { margin-top: -48px; @@ -1658,7 +1437,7 @@ main.has-snippet { } } .search-handoff-button { - background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 12px center no-repeat; + background: var(--newtab-textbox-background-color) var(--newtab-search-icon) 16px center no-repeat; background-size: 24px; border: solid 1px var(--newtab-search-border-color); border-radius: 3px; @@ -1672,10 +1451,7 @@ main.has-snippet { width: 100%; } .search-handoff-button:dir(rtl) { - background-position-x: right 12px; -} -.search-handoff-button:hover { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25); + background-position-x: right 16px; } .fake-focus:not(.search-disabled) .search-handoff-button { border: 1px solid var(--newtab-textbox-focus-color); @@ -1724,14 +1500,14 @@ main.has-snippet { @media (min-height: 701px) { body:not(.inline-onboarding) .fixed-search main { - padding-top: 146px; + padding-top: 124px; } body:not(.inline-onboarding) .fixed-search.visible-logo main { - padding-top: 276px; + padding-top: 254px; } body:not(.inline-onboarding) .fixed-search .search-wrapper { - border-bottom: solid 1px var(--newtab-border-secondary-color); - padding: 30px 0; + border-bottom: solid 1px var(--newtab-seperator-line-color); + padding: 27px 0; background-color: var(--newtab-search-header-background-color); min-height: 95px; left: 0; @@ -1741,11 +1517,11 @@ main.has-snippet { z-index: 9; } body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { - min-height: 35px; + min-height: 45px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input { background-position-x: 16px; - background-size: 16px; + background-size: 24px; } body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { background-position-x: right 16px; @@ -1756,32 +1532,12 @@ main.has-snippet { body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { display: none; } - body:not(.inline-onboarding) .fixed-search.newtab-experience main { - padding-top: 124px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience.visible-logo main { - padding-top: 254px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper { - border-bottom: solid 1px var(--newtab-seperator-line-color); - padding: 27px 0; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper .search-inner-wrapper { - min-height: 45px; - } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input { + body:not(.inline-onboarding) .fixed-search .search-handoff-button { background-position-x: 16px; background-size: 24px; } - body:not(.inline-onboarding) .fixed-search.newtab-experience .search-wrapper input:dir(rtl) { - background-position-x: right 16px; - } - body:not(.inline-onboarding) .fixed-search .search-handoff-button { - background-position-x: 12px; - background-size: 24px; - } body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { - background-position-x: right 12px; + background-position-x: right 16px; } body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { top: 10px; @@ -2256,45 +2012,9 @@ main.has-snippet { box-shadow: 0 0 0 2px var(--newtab-focus-outline); } -.outer-wrapper.newtab-experience .card-outer { - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer:is(:focus):not(.placeholder) { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .card-outer:hover { - box-shadow: none; - transition: none; -} -.outer-wrapper.newtab-experience .card-outer .card { - box-shadow: var(--newtab-card-first-shadow); - border-radius: 8px; -} -.outer-wrapper.newtab-experience .card-outer .card-preview-image-outer { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .card-outer .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .card-outer > a:is(:focus) .card { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); -} - -.outer-wrapper:not(.newtab-experience) .card-outer:is(:hover, :focus, .active):not(.placeholder) { - box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); - transition: box-shadow 150ms; -} - .card-outer { background: var(--newtab-card-background-color); - border-radius: 3px; + border-radius: 8px; display: inline-block; height: 266px; margin-inline-end: 32px; @@ -2325,19 +2045,26 @@ main.has-snippet { opacity: 1; transform: scale(1); } +.card-outer:is(:focus):not(.placeholder) { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} +.card-outer:hover { + box-shadow: none; + transition: none; +} .card-outer.placeholder { background: transparent; } -.card-outer.placeholder .card { - box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); -} .card-outer.placeholder .card-preview-image-outer, .card-outer.placeholder .card-context { display: none; } .card-outer .card { - border-radius: 3px; - box-shadow: var(--newtab-card-shadow); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); height: 100%; } .card-outer > a { @@ -2348,6 +2075,11 @@ main.has-snippet { position: absolute; width: 100%; } +.card-outer > a:is(:focus) .card { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); +} .card-outer > a:is(.active, :focus) .card { box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color); transition: box-shadow 150ms; @@ -2374,7 +2106,7 @@ main.has-snippet { } .card-outer .card-preview-image-outer { background-color: #D7D7DB; - border-radius: 3px 3px 0 0; + border-radius: 8px 8px 0 0; height: 122px; overflow: hidden; position: relative; @@ -2570,20 +2302,6 @@ main.has-snippet { } } -.outer-wrapper.newtab-experience .collapsible-section[data-section-id=topsites] .section-top-bar { - display: none; -} -.outer-wrapper.newtab-experience .collapsible-section .section-title { - cursor: default; - font-weight: 600; - font-size: 17px; - color: var(--newtab-background-primary-text-color); -} - -.outer-wrapper:not(.newtab-experience) .collapsible-section .section-title { - vertical-align: middle; -} - .collapsible-section { padding: 10px 25px; } @@ -2591,13 +2309,14 @@ main.has-snippet { margin: 0; } .collapsible-section .section-title { - font-size: 13px; - font-weight: bold; + font-size: 17px; + font-weight: 600; + color: var(--newtab-background-primary-text-color); +} +.collapsible-section .section-title.grey-title { color: var(--newtab-section-header-text-color); display: inline-block; fill: var(--newtab-section-header-text-color); -} -.collapsible-section .section-title.grey-title { vertical-align: middle; } .collapsible-section .section-title .section-title-contents { @@ -2642,6 +2361,9 @@ main.has-snippet { overflow: hidden; pointer-events: none; } +.collapsible-section[data-section-id=topsites] .section-top-bar { + display: none; +} @media (min-width: 610px) and (max-width: 865px) { .collapsible-section[data-section-id=topstories] .card-outer:first-child { display: none; @@ -2994,7 +2716,7 @@ main.has-snippet { .ds-header, .ds-layout .section-title span { color: #737373; - font-size: 13px; + font-size: 17px; font-weight: 600; line-height: 20px; } @@ -3018,21 +2740,6 @@ main.has-snippet { text-decoration: underline; } -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - border-radius: 8px; - box-shadow: var(--newtab-card-first-shadow); -} -.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 8px 8px 0 0; -} -.outer-wrapper.newtab-experience .ds-card-grid .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; - border-radius: 8px; -} - .ds-card-grid { display: grid; grid-gap: 24px; @@ -3092,14 +2799,14 @@ main.has-snippet { } } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1); + border-radius: 8px; + box-shadow: var(--newtab-card-first-shadow); } [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { - box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1); background: #42414d; } .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; } .ds-card-grid.ds-card-grid-no-border .ds-card { background: none; @@ -3107,6 +2814,13 @@ main.has-snippet { .ds-card-grid.ds-card-grid-no-border .ds-card .meta { padding: 12px 0; } +.ds-card-grid .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; + border-radius: 8px; +} .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { grid-template-columns: repeat(2, 1fr); } @@ -3657,20 +3371,13 @@ main.has-snippet { color: #003EAA; } -.outer-wrapper.newtab-experience .ds-navigation { - color: var(--newtab-background-primary-text-color); -} - .ds-navigation { - color: #737373; + color: var(--newtab-background-primary-text-color); font-size: 11.5px; font-weight: 500; line-height: 22px; padding: 4px 0; } -[lwt-newtab-brighttext] .ds-navigation { - color: #D7D7DB; -} @media (min-width: 1122px) { .ds-navigation { line-height: 32px; @@ -3738,55 +3445,24 @@ main.has-snippet { color: #D7D7DB; } -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer { - padding: 0 12px; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .tile { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-sites-list { - margin: 0 -12px; -} - -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { border: 0; outline: 0; box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #D7D7DB; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { +[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { box-shadow: 0 0 0 5px #4A4A4F; transition: box-shadow 150ms; border-radius: 4px; outline: none; } -.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-sites-list { +.outer-wrapper .ds-top-sites .top-sites .top-sites-list { margin: 0 -12px; } @@ -3933,43 +3609,6 @@ main.has-snippet { transition: box-shadow 150ms; } -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:hover { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:focus { - box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -.outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #D7D7DB; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} -[lwt-newtab-brighttext] .outer-wrapper:not(.newtab-experience) .ds-card .ds-card-link:active { - box-shadow: 0 0 0 5px #4A4A4F; - transition: box-shadow 150ms; - border-radius: 4px; - outline: none; -} - .ds-card { display: flex; flex-direction: column; @@ -4032,6 +3671,12 @@ main.has-snippet { [lwt-newtab-brighttext] .ds-card .ds-card-link:hover header { color: #45A1FF; } +.ds-card .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); + transition: none; +} .ds-card .ds-card-link:focus header { color: #0060DF; } @@ -4168,24 +3813,6 @@ main.has-snippet { color: #F9F9FA; } -.outer-wrapper.newtab-experience .ds-card .context-menu-button:is(:active, :focus) { - outline: 0; - fill: var(--newtab-primary-action-background); - border: 1px solid var(--newtab-primary-action-background); -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus { - border: 0; - outline: 0; - box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); - transition: none; -} -.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #0060DF; -} -[lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header { - color: #45A1FF; -} - .story-footer { color: var(--newtab-text-secondary-color); inset-inline-start: 0; diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js index 902a0f532cb4..f98af74bd7dd 100644 --- a/browser/components/newtab/data/content/activity-stream.bundle.js +++ b/browser/components/newtab/data/content/activity-stream.bundle.js @@ -728,7 +728,7 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo const { mayHaveSponsoredTopSites } = prefs; - const outerClassName = ["outer-wrapper", isDiscoveryStream && pocketEnabled && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["logowordmark.alwaysVisible"] && "visible-logo", "newtab-experience"].filter(v => v).join(" "); + const outerClassName = ["outer-wrapper", isDiscoveryStream && pocketEnabled && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["logowordmark.alwaysVisible"] && "visible-logo"].filter(v => v).join(" "); const hasSnippet = prefs["feeds.snippets"] && this.props.adminContent && this.props.adminContent.message && this.props.adminContent.message.id; return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_CustomizeMenu_CustomizeMenu__WEBPACK_IMPORTED_MODULE_7__["CustomizeMenu"], { onClose: this.closeCustomizationMenu,