зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1727321 - Part 1 - Stop using color variables in links. r=thecount
The purpose of this stack of patches is to stop using color variables directly in newtab CSS in favour of the semantic variables defined in _theme.scss. That way, we can later refactor _theme.scss to use theme variables instead of hardcoded colors. There's a lot of dead CSS/components in new tab. This stack of patches refactors dead code as well, mostly because it's not clear what is dead and what is not. I tried to keep things generally looking the same on visible surfaces, but there are some minor style differences in dead components and in asrouter devtools. I spoke to Mardak on Slack and he confirmed it would be okay to slightly change the look of dead components. Scott, I tagged you for review since you know what is dead and what is not. Differential Revision: https://phabricator.services.mozilla.com/D124397
This commit is contained in:
Родитель
b5240599b1
Коммит
f459f79ac1
|
@ -70,11 +70,7 @@ $excerpt-line-height: 20;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
header {
|
header {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-color);
|
||||||
color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-60;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,21 +80,13 @@ $excerpt-line-height: 20;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-color);
|
||||||
color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-60;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
header {
|
header {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-active-color);
|
||||||
color: $blue-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-70;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -189,10 +177,8 @@ $excerpt-line-height: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-link {
|
.cta-link {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-color);
|
||||||
color: $blue-40;
|
fill: var(--newtab-link-primary-color);
|
||||||
fill: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -202,28 +188,17 @@ $excerpt-line-height: 20;
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
background-position: right 1.5px;
|
background-position: right 1.5px;
|
||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
color: $blue-60;
|
|
||||||
fill: $blue-60;
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include dark-theme-only {
|
box-shadow: $shadow-primary;
|
||||||
box-shadow: 0 0 0 1px $grey-80, 0 0 0 4px $blue-50-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
box-shadow: 0 0 0 1px $white, 0 0 0 4px $blue-50-50;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-active-color);
|
||||||
color: $blue-50;
|
fill: var(--newtab-link-primary-active-color);
|
||||||
fill: $blue-50;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-70;
|
|
||||||
fill: $blue-70;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $blue-60;
|
color: var(--newtab-link-primary-color);
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
-moz-context-properties: fill;
|
-moz-context-properties: fill;
|
||||||
fill: $blue-60;
|
fill: var(--newtab-link-primary-color);
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
|
@ -69,7 +69,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-chevron-link {
|
.ds-chevron-link {
|
||||||
color: $blue-60;
|
color: var(--newtab-link-primary-color);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
||||||
|
@ -78,18 +78,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-active-color);
|
||||||
color: $blue-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-70;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@include dark-theme-only {
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
background-color: $blue-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: $blue-70;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -103,13 +95,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@include dark-theme-only {
|
background-color: var(--newtab-link-primary-color);
|
||||||
background-color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
content: ' ';
|
content: ' ';
|
||||||
mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat;
|
mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat;
|
||||||
background-color: $blue-60;
|
|
||||||
margin: 0 0 0 4px;
|
margin: 0 0 0 4px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
|
|
@ -80,19 +80,11 @@ $card-header-in-hero-line-height: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .meta header {
|
&:hover .meta header {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-color);
|
||||||
color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-60;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active .meta header {
|
&:active .meta header {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-primary-active-color);
|
||||||
color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $blue-70;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-wrapper {
|
.img-wrapper {
|
||||||
|
@ -134,11 +126,7 @@ $card-header-in-hero-line-height: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.context {
|
.context {
|
||||||
@include dark-theme-only {
|
color: var(--newtab-link-secondary-color);
|
||||||
color: $teal-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: $teal-70;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.source {
|
.source {
|
||||||
|
@ -254,20 +242,20 @@ $card-header-in-hero-line-height: 20;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: $blue-40;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active .title {
|
&:active .title {
|
||||||
@include dark-theme-only {
|
@include dark-theme-only {
|
||||||
color: $blue-50;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@include dark-theme-only {
|
@include dark-theme-only {
|
||||||
color: $white;
|
color: var(--newtab-text-primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include limit-visible-lines(3, 20, 14);
|
@include limit-visible-lines(3, 20, 14);
|
||||||
|
|
|
@ -105,11 +105,7 @@ $item-line-height: 20;
|
||||||
padding-inline-start: $counter-padded-size;
|
padding-inline-start: $counter-padded-size;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@include dark-theme-only {
|
background-color: var(--newtab-link-secondary-color);
|
||||||
background-color: $teal-70;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: $pocket-teal;
|
|
||||||
border-radius: $counter-size;
|
border-radius: $counter-size;
|
||||||
color: $white;
|
color: $white;
|
||||||
content: counter(list);
|
content: counter(list);
|
||||||
|
@ -124,19 +120,11 @@ $item-line-height: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::before {
|
&:hover::before {
|
||||||
@include dark-theme-only {
|
background-color: var(--newtab-link-primary-color);
|
||||||
background-color: $blue-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: $blue-40;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active::before {
|
&:active::before {
|
||||||
@include dark-theme-only {
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
background-color: $blue-60;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: $blue-70;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -259,13 +247,13 @@ $item-line-height: 20;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.ds-list-item-title {
|
.ds-list-item-title {
|
||||||
color: $blue-40;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
.ds-list-item-title {
|
.ds-list-item-title {
|
||||||
color: $blue-70;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,7 @@ body {
|
||||||
--newtab-inner-box-shadow-color: #{$black-10};
|
--newtab-inner-box-shadow-color: #{$black-10};
|
||||||
|
|
||||||
--newtab-link-primary-color: #{$blue-60};
|
--newtab-link-primary-color: #{$blue-60};
|
||||||
|
--newtab-link-primary-active-color: #{$blue-70};
|
||||||
--newtab-link-secondary-color: #{$teal-70};
|
--newtab-link-secondary-color: #{$teal-70};
|
||||||
--newtab-text-conditional-color: #{$grey-60};
|
--newtab-text-conditional-color: #{$grey-60};
|
||||||
--newtab-text-primary-color: #{$in-content-page-color};
|
--newtab-text-primary-color: #{$in-content-page-color};
|
||||||
|
@ -127,6 +128,7 @@ body {
|
||||||
--newtab-icon-secondary-color: #{$grey-10-40};
|
--newtab-icon-secondary-color: #{$grey-10-40};
|
||||||
--newtab-inner-box-shadow-color: #{$grey-10-20};
|
--newtab-inner-box-shadow-color: #{$grey-10-20};
|
||||||
--newtab-link-primary-color: #{$blue-40};
|
--newtab-link-primary-color: #{$blue-40};
|
||||||
|
--newtab-link-primary-active-color: #{$blue-60};
|
||||||
--newtab-link-secondary-color: #{$pocket-teal};
|
--newtab-link-secondary-color: #{$pocket-teal};
|
||||||
--newtab-text-conditional-color: #{$grey-10};
|
--newtab-text-conditional-color: #{$grey-10};
|
||||||
--newtab-text-primary-color: #{$in-content-page-color-dark};
|
--newtab-text-primary-color: #{$in-content-page-color-dark};
|
||||||
|
|
|
@ -44,6 +44,7 @@ body {
|
||||||
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
||||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||||
--newtab-link-primary-color: #0060DF;
|
--newtab-link-primary-color: #0060DF;
|
||||||
|
--newtab-link-primary-active-color: #003EAA;
|
||||||
--newtab-link-secondary-color: #008EA4;
|
--newtab-link-secondary-color: #008EA4;
|
||||||
--newtab-text-conditional-color: #4A4A4F;
|
--newtab-text-conditional-color: #4A4A4F;
|
||||||
--newtab-text-primary-color: #15141a;
|
--newtab-text-primary-color: #15141a;
|
||||||
|
@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
|
||||||
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
||||||
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
||||||
--newtab-link-primary-color: #45A1FF;
|
--newtab-link-primary-color: #45A1FF;
|
||||||
|
--newtab-link-primary-active-color: #0060DF;
|
||||||
--newtab-link-secondary-color: #50BCB6;
|
--newtab-link-secondary-color: #50BCB6;
|
||||||
--newtab-text-conditional-color: #F9F9FA;
|
--newtab-text-conditional-color: #F9F9FA;
|
||||||
--newtab-text-primary-color: #fbfbfe;
|
--newtab-text-primary-color: #fbfbfe;
|
||||||
|
@ -2948,16 +2950,10 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-hero .wrapper:hover .meta header {
|
.ds-hero .wrapper:hover .meta header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper:active .meta header {
|
.ds-hero .wrapper:active .meta header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .img-wrapper {
|
.ds-hero .wrapper .img-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -2993,10 +2989,7 @@ main.has-snippet {
|
||||||
margin: 0 0 4px;
|
margin: 0 0 4px;
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .context {
|
.ds-hero .wrapper .meta .context {
|
||||||
color: #008EA4;
|
color: var(--newtab-link-secondary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
|
|
||||||
color: #A7FFFE;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .source {
|
.ds-hero .wrapper .meta .source {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -3090,10 +3083,10 @@ main.has-snippet {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
||||||
color: #0A84FF;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -3101,7 +3094,7 @@ main.has-snippet {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
color: #FFF;
|
color: var(--newtab-text-primary-color);
|
||||||
}
|
}
|
||||||
.ds-hero.empty {
|
.ds-hero.empty {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
|
@ -3206,7 +3199,7 @@ main.has-snippet {
|
||||||
padding-inline-start: 41px;
|
padding-inline-start: 41px;
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
||||||
background-color: #50BCB6;
|
background-color: var(--newtab-link-secondary-color);
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
content: counter(list);
|
content: counter(list);
|
||||||
|
@ -3219,20 +3212,11 @@ main.has-snippet {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
|
||||||
background-color: #008EA4;
|
|
||||||
}
|
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
||||||
background-color: #45A1FF;
|
background-color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
|
||||||
background-color: #0060DF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-list-borders {
|
.ds-list-borders {
|
||||||
|
@ -3352,10 +3336,10 @@ main.has-snippet {
|
||||||
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.ds-list-item:hover .ds-list-item-title {
|
.ds-list-item:hover .ds-list-item-title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
.ds-list-item:active .ds-list-item-title {
|
.ds-list-item:active .ds-list-item-title {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-navigation {
|
.ds-navigation {
|
||||||
|
@ -3653,10 +3637,7 @@ main.has-snippet {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:hover header {
|
.ds-card .ds-card-link:hover header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus {
|
.ds-card .ds-card-link:focus {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -3665,16 +3646,10 @@ main.has-snippet {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus header {
|
.ds-card .ds-card-link:focus header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:active header {
|
.ds-card .ds-card-link:active header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-card.video-card .meta {
|
.ds-card.video-card .meta {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
@ -3746,6 +3721,8 @@ main.has-snippet {
|
||||||
background: rgba(12, 12, 13, 0.7);
|
background: rgba(12, 12, 13, 0.7);
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link {
|
.ds-card .meta .cta-link {
|
||||||
|
color: var(--newtab-link-primary-color);
|
||||||
|
fill: var(--newtab-link-primary-color);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
@ -3754,29 +3731,15 @@ main.has-snippet {
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
background-position: right 1.5px;
|
background-position: right 1.5px;
|
||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
color: #0060DF;
|
|
||||||
fill: #0060DF;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link {
|
|
||||||
color: #45A1FF;
|
|
||||||
fill: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:focus {
|
.ds-card .meta .cta-link:focus {
|
||||||
box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
|
|
||||||
box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
|
||||||
}
|
|
||||||
.ds-card .meta .cta-link:active {
|
.ds-card .meta .cta-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
fill: #003EAA;
|
fill: var(--newtab-link-primary-active-color);
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
fill: #0A84FF;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:hover {
|
.ds-card .meta .cta-link:hover {
|
||||||
|
@ -4169,7 +4132,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-chevron-link {
|
.ds-chevron-link {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
@ -4177,16 +4140,10 @@ main.has-snippet {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active {
|
.ds-chevron-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active::after {
|
.ds-chevron-link:active::after {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
|
|
||||||
background-color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:focus {
|
.ds-chevron-link:focus {
|
||||||
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
|
@ -4196,18 +4153,15 @@ main.has-snippet {
|
||||||
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
}
|
}
|
||||||
.ds-chevron-link::after {
|
.ds-chevron-link::after {
|
||||||
|
background-color: var(--newtab-link-primary-color);
|
||||||
content: " ";
|
content: " ";
|
||||||
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
||||||
background-color: #0060DF;
|
|
||||||
margin: 0 0 0 4px;
|
margin: 0 0 0 4px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link::after {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ds-signup {
|
.ds-signup {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
@ -4263,7 +4217,7 @@ main.has-snippet {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link:hover {
|
.ds-privacy-modal .modal-link:hover {
|
||||||
|
@ -4272,7 +4226,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link::before {
|
.ds-privacy-modal .modal-link::before {
|
||||||
-moz-context-properties: fill;
|
-moz-context-properties: fill;
|
||||||
fill: #0060DF;
|
fill: var(--newtab-link-primary-color);
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
|
@ -48,6 +48,7 @@ body {
|
||||||
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
||||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||||
--newtab-link-primary-color: #0060DF;
|
--newtab-link-primary-color: #0060DF;
|
||||||
|
--newtab-link-primary-active-color: #003EAA;
|
||||||
--newtab-link-secondary-color: #008EA4;
|
--newtab-link-secondary-color: #008EA4;
|
||||||
--newtab-text-conditional-color: #4A4A4F;
|
--newtab-text-conditional-color: #4A4A4F;
|
||||||
--newtab-text-primary-color: #15141a;
|
--newtab-text-primary-color: #15141a;
|
||||||
|
@ -121,6 +122,7 @@ body[lwt-newtab-brighttext] {
|
||||||
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
||||||
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
||||||
--newtab-link-primary-color: #45A1FF;
|
--newtab-link-primary-color: #45A1FF;
|
||||||
|
--newtab-link-primary-active-color: #0060DF;
|
||||||
--newtab-link-secondary-color: #50BCB6;
|
--newtab-link-secondary-color: #50BCB6;
|
||||||
--newtab-text-conditional-color: #F9F9FA;
|
--newtab-text-conditional-color: #F9F9FA;
|
||||||
--newtab-text-primary-color: #fbfbfe;
|
--newtab-text-primary-color: #fbfbfe;
|
||||||
|
@ -2952,16 +2954,10 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-hero .wrapper:hover .meta header {
|
.ds-hero .wrapper:hover .meta header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper:active .meta header {
|
.ds-hero .wrapper:active .meta header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .img-wrapper {
|
.ds-hero .wrapper .img-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -2997,10 +2993,7 @@ main.has-snippet {
|
||||||
margin: 0 0 4px;
|
margin: 0 0 4px;
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .context {
|
.ds-hero .wrapper .meta .context {
|
||||||
color: #008EA4;
|
color: var(--newtab-link-secondary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
|
|
||||||
color: #A7FFFE;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .source {
|
.ds-hero .wrapper .meta .source {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -3094,10 +3087,10 @@ main.has-snippet {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
||||||
color: #0A84FF;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -3105,7 +3098,7 @@ main.has-snippet {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
color: #FFF;
|
color: var(--newtab-text-primary-color);
|
||||||
}
|
}
|
||||||
.ds-hero.empty {
|
.ds-hero.empty {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
|
@ -3210,7 +3203,7 @@ main.has-snippet {
|
||||||
padding-inline-start: 41px;
|
padding-inline-start: 41px;
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
||||||
background-color: #50BCB6;
|
background-color: var(--newtab-link-secondary-color);
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
content: counter(list);
|
content: counter(list);
|
||||||
|
@ -3223,20 +3216,11 @@ main.has-snippet {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
|
||||||
background-color: #008EA4;
|
|
||||||
}
|
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
||||||
background-color: #45A1FF;
|
background-color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
|
||||||
background-color: #0060DF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-list-borders {
|
.ds-list-borders {
|
||||||
|
@ -3356,10 +3340,10 @@ main.has-snippet {
|
||||||
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.ds-list-item:hover .ds-list-item-title {
|
.ds-list-item:hover .ds-list-item-title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
.ds-list-item:active .ds-list-item-title {
|
.ds-list-item:active .ds-list-item-title {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-navigation {
|
.ds-navigation {
|
||||||
|
@ -3657,10 +3641,7 @@ main.has-snippet {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:hover header {
|
.ds-card .ds-card-link:hover header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus {
|
.ds-card .ds-card-link:focus {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -3669,16 +3650,10 @@ main.has-snippet {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus header {
|
.ds-card .ds-card-link:focus header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:active header {
|
.ds-card .ds-card-link:active header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-card.video-card .meta {
|
.ds-card.video-card .meta {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
@ -3750,6 +3725,8 @@ main.has-snippet {
|
||||||
background: rgba(12, 12, 13, 0.7);
|
background: rgba(12, 12, 13, 0.7);
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link {
|
.ds-card .meta .cta-link {
|
||||||
|
color: var(--newtab-link-primary-color);
|
||||||
|
fill: var(--newtab-link-primary-color);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
@ -3758,29 +3735,15 @@ main.has-snippet {
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
background-position: right 1.5px;
|
background-position: right 1.5px;
|
||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
color: #0060DF;
|
|
||||||
fill: #0060DF;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link {
|
|
||||||
color: #45A1FF;
|
|
||||||
fill: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:focus {
|
.ds-card .meta .cta-link:focus {
|
||||||
box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
|
|
||||||
box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
|
||||||
}
|
|
||||||
.ds-card .meta .cta-link:active {
|
.ds-card .meta .cta-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
fill: #003EAA;
|
fill: var(--newtab-link-primary-active-color);
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
fill: #0A84FF;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:hover {
|
.ds-card .meta .cta-link:hover {
|
||||||
|
@ -4173,7 +4136,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-chevron-link {
|
.ds-chevron-link {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
@ -4181,16 +4144,10 @@ main.has-snippet {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active {
|
.ds-chevron-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active::after {
|
.ds-chevron-link:active::after {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
|
|
||||||
background-color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:focus {
|
.ds-chevron-link:focus {
|
||||||
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
|
@ -4200,18 +4157,15 @@ main.has-snippet {
|
||||||
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
}
|
}
|
||||||
.ds-chevron-link::after {
|
.ds-chevron-link::after {
|
||||||
|
background-color: var(--newtab-link-primary-color);
|
||||||
content: " ";
|
content: " ";
|
||||||
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
||||||
background-color: #0060DF;
|
|
||||||
margin: 0 0 0 4px;
|
margin: 0 0 0 4px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link::after {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ds-signup {
|
.ds-signup {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
@ -4267,7 +4221,7 @@ main.has-snippet {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link:hover {
|
.ds-privacy-modal .modal-link:hover {
|
||||||
|
@ -4276,7 +4230,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link::before {
|
.ds-privacy-modal .modal-link::before {
|
||||||
-moz-context-properties: fill;
|
-moz-context-properties: fill;
|
||||||
fill: #0060DF;
|
fill: var(--newtab-link-primary-color);
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
|
@ -44,6 +44,7 @@ body {
|
||||||
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
|
||||||
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
|
||||||
--newtab-link-primary-color: #0060DF;
|
--newtab-link-primary-color: #0060DF;
|
||||||
|
--newtab-link-primary-active-color: #003EAA;
|
||||||
--newtab-link-secondary-color: #008EA4;
|
--newtab-link-secondary-color: #008EA4;
|
||||||
--newtab-text-conditional-color: #4A4A4F;
|
--newtab-text-conditional-color: #4A4A4F;
|
||||||
--newtab-text-primary-color: #15141a;
|
--newtab-text-primary-color: #15141a;
|
||||||
|
@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
|
||||||
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
|
||||||
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
|
||||||
--newtab-link-primary-color: #45A1FF;
|
--newtab-link-primary-color: #45A1FF;
|
||||||
|
--newtab-link-primary-active-color: #0060DF;
|
||||||
--newtab-link-secondary-color: #50BCB6;
|
--newtab-link-secondary-color: #50BCB6;
|
||||||
--newtab-text-conditional-color: #F9F9FA;
|
--newtab-text-conditional-color: #F9F9FA;
|
||||||
--newtab-text-primary-color: #fbfbfe;
|
--newtab-text-primary-color: #fbfbfe;
|
||||||
|
@ -2948,16 +2950,10 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-hero .wrapper:hover .meta header {
|
.ds-hero .wrapper:hover .meta header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper:active .meta header {
|
.ds-hero .wrapper:active .meta header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .img-wrapper {
|
.ds-hero .wrapper .img-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -2993,10 +2989,7 @@ main.has-snippet {
|
||||||
margin: 0 0 4px;
|
margin: 0 0 4px;
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .context {
|
.ds-hero .wrapper .meta .context {
|
||||||
color: #008EA4;
|
color: var(--newtab-link-secondary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
|
|
||||||
color: #A7FFFE;
|
|
||||||
}
|
}
|
||||||
.ds-hero .wrapper .meta .source {
|
.ds-hero .wrapper .meta .source {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -3090,10 +3083,10 @@ main.has-snippet {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:hover .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:hover .title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card:active .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card:active .title {
|
||||||
color: #0A84FF;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
.ds-column-9 .ds-hero .cards .ds-card .title, .ds-column-10 .ds-hero .cards .ds-card .title, .ds-column-11 .ds-hero .cards .ds-card .title, .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -3101,7 +3094,7 @@ main.has-snippet {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
[lwt-newtab-brighttext] .ds-column-9 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-10 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-11 .ds-hero .cards .ds-card .title, [lwt-newtab-brighttext] .ds-column-12 .ds-hero .cards .ds-card .title {
|
||||||
color: #FFF;
|
color: var(--newtab-text-primary-color);
|
||||||
}
|
}
|
||||||
.ds-hero.empty {
|
.ds-hero.empty {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
|
@ -3206,7 +3199,7 @@ main.has-snippet {
|
||||||
padding-inline-start: 41px;
|
padding-inline-start: 41px;
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
||||||
background-color: #50BCB6;
|
background-color: var(--newtab-link-secondary-color);
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
content: counter(list);
|
content: counter(list);
|
||||||
|
@ -3219,20 +3212,11 @@ main.has-snippet {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link::before {
|
|
||||||
background-color: #008EA4;
|
|
||||||
}
|
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
||||||
background-color: #45A1FF;
|
background-color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
|
|
||||||
background-color: #0060DF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-list-borders {
|
.ds-list-borders {
|
||||||
|
@ -3352,10 +3336,10 @@ main.has-snippet {
|
||||||
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.ds-list-item:hover .ds-list-item-title {
|
.ds-list-item:hover .ds-list-item-title {
|
||||||
color: #45A1FF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
}
|
||||||
.ds-list-item:active .ds-list-item-title {
|
.ds-list-item:active .ds-list-item-title {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-navigation {
|
.ds-navigation {
|
||||||
|
@ -3653,10 +3637,7 @@ main.has-snippet {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:hover header {
|
.ds-card .ds-card-link:hover header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus {
|
.ds-card .ds-card-link:focus {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -3665,16 +3646,10 @@ main.has-snippet {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:focus header {
|
.ds-card .ds-card-link:focus header {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
|
|
||||||
color: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .ds-card-link:active header {
|
.ds-card .ds-card-link:active header {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-card.video-card .meta {
|
.ds-card.video-card .meta {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
@ -3746,6 +3721,8 @@ main.has-snippet {
|
||||||
background: rgba(12, 12, 13, 0.7);
|
background: rgba(12, 12, 13, 0.7);
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link {
|
.ds-card .meta .cta-link {
|
||||||
|
color: var(--newtab-link-primary-color);
|
||||||
|
fill: var(--newtab-link-primary-color);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
@ -3754,29 +3731,15 @@ main.has-snippet {
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
background-position: right 1.5px;
|
background-position: right 1.5px;
|
||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
color: #0060DF;
|
|
||||||
fill: #0060DF;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link {
|
|
||||||
color: #45A1FF;
|
|
||||||
fill: #45A1FF;
|
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:focus {
|
.ds-card .meta .cta-link:focus {
|
||||||
box-shadow: 0 0 0 1px #FFF, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:focus {
|
|
||||||
box-shadow: 0 0 0 1px #2A2A2E, 0 0 0 4px rgba(10, 132, 255, 0.5);
|
|
||||||
}
|
|
||||||
.ds-card .meta .cta-link:active {
|
.ds-card .meta .cta-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
fill: #003EAA;
|
fill: var(--newtab-link-primary-active-color);
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
fill: #0A84FF;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.ds-card .meta .cta-link:hover {
|
.ds-card .meta .cta-link:hover {
|
||||||
|
@ -4169,7 +4132,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-chevron-link {
|
.ds-chevron-link {
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
@ -4177,16 +4140,10 @@ main.has-snippet {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active {
|
.ds-chevron-link:active {
|
||||||
color: #003EAA;
|
color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active {
|
|
||||||
color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:active::after {
|
.ds-chevron-link:active::after {
|
||||||
background-color: #003EAA;
|
background-color: var(--newtab-link-primary-active-color);
|
||||||
}
|
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
|
|
||||||
background-color: #0A84FF;
|
|
||||||
}
|
}
|
||||||
.ds-chevron-link:focus {
|
.ds-chevron-link:focus {
|
||||||
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
|
@ -4196,18 +4153,15 @@ main.has-snippet {
|
||||||
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
box-shadow: 0 0 0 2px #2A2A2E, 0 0 0 5px rgba(10, 132, 255, 0.5);
|
||||||
}
|
}
|
||||||
.ds-chevron-link::after {
|
.ds-chevron-link::after {
|
||||||
|
background-color: var(--newtab-link-primary-color);
|
||||||
content: " ";
|
content: " ";
|
||||||
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
|
||||||
background-color: #0060DF;
|
|
||||||
margin: 0 0 0 4px;
|
margin: 0 0 0 4px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
[lwt-newtab-brighttext] .ds-chevron-link::after {
|
|
||||||
background-color: #45A1FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ds-signup {
|
.ds-signup {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
@ -4263,7 +4217,7 @@ main.has-snippet {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #0060DF;
|
color: var(--newtab-link-primary-color);
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link:hover {
|
.ds-privacy-modal .modal-link:hover {
|
||||||
|
@ -4272,7 +4226,7 @@ main.has-snippet {
|
||||||
}
|
}
|
||||||
.ds-privacy-modal .modal-link::before {
|
.ds-privacy-modal .modal-link::before {
|
||||||
-moz-context-properties: fill;
|
-moz-context-properties: fill;
|
||||||
fill: #0060DF;
|
fill: var(--newtab-link-primary-color);
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче