mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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:
Harry Twyford 2021-09-08 22:06:26 +00:00
Родитель b5240599b1
Коммит f459f79ac1
9 изменённых файлов: 108 добавлений и 305 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

41
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
Просмотреть файл

@ -70,11 +70,7 @@ $excerpt-line-height: 20;
&:hover {
header {
@include dark-theme-only {
color: $blue-40;
}
color: $blue-60;
color: var(--newtab-link-primary-color);
}
}
@ -84,21 +80,13 @@ $excerpt-line-height: 20;
transition: none;
header {
@include dark-theme-only {
color: $blue-40;
}
color: $blue-60;
color: var(--newtab-link-primary-color);
}
}
&:active {
header {
@include dark-theme-only {
color: $blue-50;
}
color: $blue-70;
color: var(--newtab-link-primary-active-color);
}
}
}
@ -189,10 +177,8 @@ $excerpt-line-height: 20;
}
.cta-link {
@include dark-theme-only {
color: $blue-40;
fill: $blue-40;
}
color: var(--newtab-link-primary-color);
fill: var(--newtab-link-primary-color);
font-size: 15px;
font-weight: 600;
@ -202,28 +188,17 @@ $excerpt-line-height: 20;
background-size: auto;
background-position: right 1.5px;
padding-right: 9px;
color: $blue-60;
fill: $blue-60;
&:focus {
@include dark-theme-only {
box-shadow: 0 0 0 1px $grey-80, 0 0 0 4px $blue-50-50;
}
box-shadow: $shadow-primary;
box-shadow: 0 0 0 1px $white, 0 0 0 4px $blue-50-50;
border-radius: 4px;
outline: 0;
}
&:active {
@include dark-theme-only {
color: $blue-50;
fill: $blue-50;
box-shadow: none;
}
color: $blue-70;
fill: $blue-70;
color: var(--newtab-link-primary-active-color);
fill: var(--newtab-link-primary-active-color);
box-shadow: none;
}

4
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSPrivacyModal/_DSPrivacyModal.scss
Просмотреть файл

@ -5,7 +5,7 @@
margin: 0 0 8px;
border: 0;
padding: 0;
color: $blue-60;
color: var(--newtab-link-primary-color);
width: max-content;
&:hover {
@ -15,7 +15,7 @@
&::before {
-moz-context-properties: fill;
fill: $blue-60;
fill: var(--newtab-link-primary-color);
content: '';
display: inline-block;
width: 16px;

20
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss
Просмотреть файл

@ -69,7 +69,7 @@
}
.ds-chevron-link {
color: $blue-60;
color: var(--newtab-link-primary-color);
display: inline-block;
outline: 0;
@ -78,18 +78,10 @@
}
&:active {
@include dark-theme-only {
color: $blue-50;
}
color: $blue-70;
color: var(--newtab-link-primary-active-color);
&::after {
@include dark-theme-only {
background-color: $blue-50;
}
background-color: $blue-70;
background-color: var(--newtab-link-primary-active-color);
}
}
@ -103,13 +95,9 @@
}
&::after {
@include dark-theme-only {
background-color: $blue-40;
}
background-color: var(--newtab-link-primary-color);
content: ' ';
mask: url('chrome://global/skin/icons/arrow-right-12.svg') 0 -8px no-repeat;
background-color: $blue-60;
margin: 0 0 0 4px;
width: 5px;
height: 8px;

24
browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
Просмотреть файл

@ -80,19 +80,11 @@ $card-header-in-hero-line-height: 20;
}
&:hover .meta header {
@include dark-theme-only {
color: $blue-40;
}
color: $blue-60;
color: var(--newtab-link-primary-color);
}
&:active .meta header {
@include dark-theme-only {
color: $blue-40;
}
color: $blue-70;
color: var(--newtab-link-primary-active-color);
}
.img-wrapper {
@ -134,11 +126,7 @@ $card-header-in-hero-line-height: 20;
}
.context {
@include dark-theme-only {
color: $teal-10;
}
color: $teal-70;
color: var(--newtab-link-secondary-color);
}
.source {
@ -254,20 +242,20 @@ $card-header-in-hero-line-height: 20;
background: none;
.title {
color: $blue-40;
color: var(--newtab-link-primary-color);
}
}
}
&:active .title {
@include dark-theme-only {
color: $blue-50;
color: var(--newtab-link-primary-active-color);
}
}
.title {
@include dark-theme-only {
color: $white;
color: var(--newtab-text-primary-color);
}
@include limit-visible-lines(3, 20, 14);

22
browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
Просмотреть файл

@ -105,11 +105,7 @@ $item-line-height: 20;
padding-inline-start: $counter-padded-size;
&::before {
@include dark-theme-only {
background-color: $teal-70;
}
background-color: $pocket-teal;
background-color: var(--newtab-link-secondary-color);
border-radius: $counter-size;
color: $white;
content: counter(list);
@ -124,19 +120,11 @@ $item-line-height: 20;
}
&:hover::before {
@include dark-theme-only {
background-color: $blue-40;
}
background-color: $blue-40;
background-color: var(--newtab-link-primary-color);
}
&:active::before {
@include dark-theme-only {
background-color: $blue-60;
}
background-color: $blue-70;
background-color: var(--newtab-link-primary-active-color);
}
}
}
@ -259,13 +247,13 @@ $item-line-height: 20;
&:hover {
.ds-list-item-title {
color: $blue-40;
color: var(--newtab-link-primary-color);
}
}
&:active {
.ds-list-item-title {
color: $blue-70;
color: var(--newtab-link-primary-active-color);
}
}
}

2
browser/components/newtab/content-src/styles/_theme.scss
Просмотреть файл

@ -32,6 +32,7 @@ body {
--newtab-inner-box-shadow-color: #{$black-10};
--newtab-link-primary-color: #{$blue-60};
--newtab-link-primary-active-color: #{$blue-70};
--newtab-link-secondary-color: #{$teal-70};
--newtab-text-conditional-color: #{$grey-60};
--newtab-text-primary-color: #{$in-content-page-color};
@ -127,6 +128,7 @@ body {
--newtab-icon-secondary-color: #{$grey-10-40};
--newtab-inner-box-shadow-color: #{$grey-10-20};
--newtab-link-primary-color: #{$blue-40};
--newtab-link-primary-active-color: #{$blue-60};
--newtab-link-secondary-color: #{$pocket-teal};
--newtab-text-conditional-color: #{$grey-10};
--newtab-text-primary-color: #{$in-content-page-color-dark};

100
browser/components/newtab/css/activity-stream-linux.css
Просмотреть файл

@ -44,6 +44,7 @@ body {
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
--newtab-link-primary-color: #0060DF;
--newtab-link-primary-active-color: #003EAA;
--newtab-link-secondary-color: #008EA4;
--newtab-text-conditional-color: #4A4A4F;
--newtab-text-primary-color: #15141a;
@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
--newtab-link-primary-color: #45A1FF;
--newtab-link-primary-active-color: #0060DF;
--newtab-link-secondary-color: #50BCB6;
--newtab-text-conditional-color: #F9F9FA;
--newtab-text-primary-color: #fbfbfe;
@ -2948,16 +2950,10 @@ main.has-snippet {
}
.ds-hero .wrapper:hover .meta header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-hero .wrapper:active .meta header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-active-color);
}
.ds-hero .wrapper .img-wrapper {
width: 100%;
@ -2993,10 +2989,7 @@ main.has-snippet {
margin: 0 0 4px;
}
.ds-hero .wrapper .meta .context {
color: #008EA4;
}
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
color: #A7FFFE;
color: var(--newtab-link-secondary-color);
}
.ds-hero .wrapper .meta .source {
font-size: 13px;
@ -3090,10 +3083,10 @@ main.has-snippet {
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 {
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 {
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 {
font-size: 14px;
@ -3101,7 +3094,7 @@ main.has-snippet {
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 {
color: #FFF;
color: var(--newtab-text-primary-color);
}
.ds-hero.empty {
grid-template-columns: auto;
@ -3206,7 +3199,7 @@ main.has-snippet {
padding-inline-start: 41px;
}
.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;
color: #FFF;
content: counter(list);
@ -3219,20 +3212,11 @@ main.has-snippet {
text-align: center;
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 {
background-color: #45A1FF;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
background-color: #45A1FF;
background-color: var(--newtab-link-primary-color);
}
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #0060DF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-list-borders {
@ -3352,10 +3336,10 @@ main.has-snippet {
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.ds-list-item:hover .ds-list-item-title {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-list-item:active .ds-list-item-title {
color: #003EAA;
color: var(--newtab-link-primary-active-color);
}
.ds-navigation {
@ -3653,10 +3637,7 @@ main.has-snippet {
flex-direction: column;
}
.ds-card .ds-card-link:hover header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:focus {
border: 0;
@ -3665,16 +3646,10 @@ main.has-snippet {
transition: none;
}
.ds-card .ds-card-link:focus header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:active header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-card.video-card .meta {
margin-top: 4px;
@ -3746,6 +3721,8 @@ main.has-snippet {
background: rgba(12, 12, 13, 0.7);
}
.ds-card .meta .cta-link {
color: var(--newtab-link-primary-color);
fill: var(--newtab-link-primary-color);
font-size: 15px;
font-weight: 600;
line-height: 24px;
@ -3754,29 +3731,15 @@ main.has-snippet {
background-size: auto;
background-position: right 1.5px;
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 {
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;
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 {
color: #003EAA;
fill: #003EAA;
box-shadow: none;
}
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
color: #0A84FF;
fill: #0A84FF;
color: var(--newtab-link-primary-active-color);
fill: var(--newtab-link-primary-active-color);
box-shadow: none;
}
.ds-card .meta .cta-link:hover {
@ -4169,7 +4132,7 @@ main.has-snippet {
}
.ds-chevron-link {
color: #0060DF;
color: var(--newtab-link-primary-color);
display: inline-block;
outline: 0;
}
@ -4177,16 +4140,10 @@ main.has-snippet {
text-decoration: underline;
}
.ds-chevron-link:active {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:active::after {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
background-color: #0A84FF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:focus {
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);
}
.ds-chevron-link::after {
background-color: var(--newtab-link-primary-color);
content: " ";
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
background-color: #0060DF;
margin: 0 0 0 4px;
width: 5px;
height: 8px;
text-decoration: none;
display: inline-block;
}
[lwt-newtab-brighttext] .ds-chevron-link::after {
background-color: #45A1FF;
}
.ds-signup {
max-width: 300px;
@ -4263,7 +4217,7 @@ main.has-snippet {
margin: 0 0 8px;
border: 0;
padding: 0;
color: #0060DF;
color: var(--newtab-link-primary-color);
width: max-content;
}
.ds-privacy-modal .modal-link:hover {
@ -4272,7 +4226,7 @@ main.has-snippet {
}
.ds-privacy-modal .modal-link::before {
-moz-context-properties: fill;
fill: #0060DF;
fill: var(--newtab-link-primary-color);
content: "";
display: inline-block;
width: 16px;

100
browser/components/newtab/css/activity-stream-mac.css
Просмотреть файл

@ -48,6 +48,7 @@ body {
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
--newtab-link-primary-color: #0060DF;
--newtab-link-primary-active-color: #003EAA;
--newtab-link-secondary-color: #008EA4;
--newtab-text-conditional-color: #4A4A4F;
--newtab-text-primary-color: #15141a;
@ -121,6 +122,7 @@ body[lwt-newtab-brighttext] {
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
--newtab-link-primary-color: #45A1FF;
--newtab-link-primary-active-color: #0060DF;
--newtab-link-secondary-color: #50BCB6;
--newtab-text-conditional-color: #F9F9FA;
--newtab-text-primary-color: #fbfbfe;
@ -2952,16 +2954,10 @@ main.has-snippet {
}
.ds-hero .wrapper:hover .meta header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-hero .wrapper:active .meta header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-active-color);
}
.ds-hero .wrapper .img-wrapper {
width: 100%;
@ -2997,10 +2993,7 @@ main.has-snippet {
margin: 0 0 4px;
}
.ds-hero .wrapper .meta .context {
color: #008EA4;
}
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
color: #A7FFFE;
color: var(--newtab-link-secondary-color);
}
.ds-hero .wrapper .meta .source {
font-size: 13px;
@ -3094,10 +3087,10 @@ main.has-snippet {
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 {
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 {
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 {
font-size: 14px;
@ -3105,7 +3098,7 @@ main.has-snippet {
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 {
color: #FFF;
color: var(--newtab-text-primary-color);
}
.ds-hero.empty {
grid-template-columns: auto;
@ -3210,7 +3203,7 @@ main.has-snippet {
padding-inline-start: 41px;
}
.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;
color: #FFF;
content: counter(list);
@ -3223,20 +3216,11 @@ main.has-snippet {
text-align: center;
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 {
background-color: #45A1FF;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
background-color: #45A1FF;
background-color: var(--newtab-link-primary-color);
}
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #0060DF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-list-borders {
@ -3356,10 +3340,10 @@ main.has-snippet {
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.ds-list-item:hover .ds-list-item-title {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-list-item:active .ds-list-item-title {
color: #003EAA;
color: var(--newtab-link-primary-active-color);
}
.ds-navigation {
@ -3657,10 +3641,7 @@ main.has-snippet {
flex-direction: column;
}
.ds-card .ds-card-link:hover header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:focus {
border: 0;
@ -3669,16 +3650,10 @@ main.has-snippet {
transition: none;
}
.ds-card .ds-card-link:focus header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:active header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-card.video-card .meta {
margin-top: 4px;
@ -3750,6 +3725,8 @@ main.has-snippet {
background: rgba(12, 12, 13, 0.7);
}
.ds-card .meta .cta-link {
color: var(--newtab-link-primary-color);
fill: var(--newtab-link-primary-color);
font-size: 15px;
font-weight: 600;
line-height: 24px;
@ -3758,29 +3735,15 @@ main.has-snippet {
background-size: auto;
background-position: right 1.5px;
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 {
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;
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 {
color: #003EAA;
fill: #003EAA;
box-shadow: none;
}
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
color: #0A84FF;
fill: #0A84FF;
color: var(--newtab-link-primary-active-color);
fill: var(--newtab-link-primary-active-color);
box-shadow: none;
}
.ds-card .meta .cta-link:hover {
@ -4173,7 +4136,7 @@ main.has-snippet {
}
.ds-chevron-link {
color: #0060DF;
color: var(--newtab-link-primary-color);
display: inline-block;
outline: 0;
}
@ -4181,16 +4144,10 @@ main.has-snippet {
text-decoration: underline;
}
.ds-chevron-link:active {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:active::after {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
background-color: #0A84FF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:focus {
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);
}
.ds-chevron-link::after {
background-color: var(--newtab-link-primary-color);
content: " ";
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
background-color: #0060DF;
margin: 0 0 0 4px;
width: 5px;
height: 8px;
text-decoration: none;
display: inline-block;
}
[lwt-newtab-brighttext] .ds-chevron-link::after {
background-color: #45A1FF;
}
.ds-signup {
max-width: 300px;
@ -4267,7 +4221,7 @@ main.has-snippet {
margin: 0 0 8px;
border: 0;
padding: 0;
color: #0060DF;
color: var(--newtab-link-primary-color);
width: max-content;
}
.ds-privacy-modal .modal-link:hover {
@ -4276,7 +4230,7 @@ main.has-snippet {
}
.ds-privacy-modal .modal-link::before {
-moz-context-properties: fill;
fill: #0060DF;
fill: var(--newtab-link-primary-color);
content: "";
display: inline-block;
width: 16px;

100
browser/components/newtab/css/activity-stream-windows.css
Просмотреть файл

@ -44,6 +44,7 @@ body {
--newtab-icon-secondary-color: rgba(12, 12, 13, 0.6);
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
--newtab-link-primary-color: #0060DF;
--newtab-link-primary-active-color: #003EAA;
--newtab-link-secondary-color: #008EA4;
--newtab-text-conditional-color: #4A4A4F;
--newtab-text-primary-color: #15141a;
@ -117,6 +118,7 @@ body[lwt-newtab-brighttext] {
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4);
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2);
--newtab-link-primary-color: #45A1FF;
--newtab-link-primary-active-color: #0060DF;
--newtab-link-secondary-color: #50BCB6;
--newtab-text-conditional-color: #F9F9FA;
--newtab-text-primary-color: #fbfbfe;
@ -2948,16 +2950,10 @@ main.has-snippet {
}
.ds-hero .wrapper:hover .meta header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:hover .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-hero .wrapper:active .meta header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-hero .wrapper:active .meta header {
color: #45A1FF;
color: var(--newtab-link-primary-active-color);
}
.ds-hero .wrapper .img-wrapper {
width: 100%;
@ -2993,10 +2989,7 @@ main.has-snippet {
margin: 0 0 4px;
}
.ds-hero .wrapper .meta .context {
color: #008EA4;
}
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .context {
color: #A7FFFE;
color: var(--newtab-link-secondary-color);
}
.ds-hero .wrapper .meta .source {
font-size: 13px;
@ -3090,10 +3083,10 @@ main.has-snippet {
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 {
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 {
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 {
font-size: 14px;
@ -3101,7 +3094,7 @@ main.has-snippet {
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 {
color: #FFF;
color: var(--newtab-text-primary-color);
}
.ds-hero.empty {
grid-template-columns: auto;
@ -3206,7 +3199,7 @@ main.has-snippet {
padding-inline-start: 41px;
}
.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;
color: #FFF;
content: counter(list);
@ -3219,20 +3212,11 @@ main.has-snippet {
text-align: center;
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 {
background-color: #45A1FF;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:hover::before {
background-color: #45A1FF;
background-color: var(--newtab-link-primary-color);
}
.ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-list-numbers .ds-list-item:not(.placeholder) > .ds-list-item-link:active::before {
background-color: #0060DF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-list-borders {
@ -3352,10 +3336,10 @@ main.has-snippet {
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.ds-list-item:hover .ds-list-item-title {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-list-item:active .ds-list-item-title {
color: #003EAA;
color: var(--newtab-link-primary-active-color);
}
.ds-navigation {
@ -3653,10 +3637,7 @@ main.has-snippet {
flex-direction: column;
}
.ds-card .ds-card-link:hover header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:focus {
border: 0;
@ -3665,16 +3646,10 @@ main.has-snippet {
transition: none;
}
.ds-card .ds-card-link:focus header {
color: #0060DF;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:focus header {
color: #45A1FF;
color: var(--newtab-link-primary-color);
}
.ds-card .ds-card-link:active header {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-card .ds-card-link:active header {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-card.video-card .meta {
margin-top: 4px;
@ -3746,6 +3721,8 @@ main.has-snippet {
background: rgba(12, 12, 13, 0.7);
}
.ds-card .meta .cta-link {
color: var(--newtab-link-primary-color);
fill: var(--newtab-link-primary-color);
font-size: 15px;
font-weight: 600;
line-height: 24px;
@ -3754,29 +3731,15 @@ main.has-snippet {
background-size: auto;
background-position: right 1.5px;
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 {
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;
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 {
color: #003EAA;
fill: #003EAA;
box-shadow: none;
}
[lwt-newtab-brighttext] .ds-card .meta .cta-link:active {
color: #0A84FF;
fill: #0A84FF;
color: var(--newtab-link-primary-active-color);
fill: var(--newtab-link-primary-active-color);
box-shadow: none;
}
.ds-card .meta .cta-link:hover {
@ -4169,7 +4132,7 @@ main.has-snippet {
}
.ds-chevron-link {
color: #0060DF;
color: var(--newtab-link-primary-color);
display: inline-block;
outline: 0;
}
@ -4177,16 +4140,10 @@ main.has-snippet {
text-decoration: underline;
}
.ds-chevron-link:active {
color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active {
color: #0A84FF;
color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:active::after {
background-color: #003EAA;
}
[lwt-newtab-brighttext] .ds-chevron-link:active::after {
background-color: #0A84FF;
background-color: var(--newtab-link-primary-active-color);
}
.ds-chevron-link:focus {
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);
}
.ds-chevron-link::after {
background-color: var(--newtab-link-primary-color);
content: " ";
mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
background-color: #0060DF;
margin: 0 0 0 4px;
width: 5px;
height: 8px;
text-decoration: none;
display: inline-block;
}
[lwt-newtab-brighttext] .ds-chevron-link::after {
background-color: #45A1FF;
}
.ds-signup {
max-width: 300px;
@ -4263,7 +4217,7 @@ main.has-snippet {
margin: 0 0 8px;
border: 0;
padding: 0;
color: #0060DF;
color: var(--newtab-link-primary-color);
width: max-content;
}
.ds-privacy-modal .modal-link:hover {
@ -4272,7 +4226,7 @@ main.has-snippet {
}
.ds-privacy-modal .modal-link::before {
-moz-context-properties: fill;
fill: #0060DF;
fill: var(--newtab-link-primary-color);
content: "";
display: inline-block;
width: 16px;