зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1726432 - Part 1 - Remove newtab-experience class. r=amy
Differential Revision: https://phabricator.services.mozilla.com/D123384
This commit is contained in:
Harry Twyford
Родитель
0dead9fc50
Коммит
6412750cc1
|
|
@ -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(" ");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include ds-focus-nte;
|
||||
@include ds-focus;
|
||||
}
|
||||
|
||||
&.personalize-animate-exit-done {
|
||||
|
|
|
|||
|
|
@ -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 &,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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% {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -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,
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче