mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 21:01:08 +00:00
Bug 1727321 - Part 4 - Stop using color variables elsewhere in newtab. r=thecount
Differential Revision: https://phabricator.services.mozilla.com/D124401
This commit is contained in:
Harry Twyford
parent
f2159ae4bb
commit
35a9338ef1
@ -49,7 +49,7 @@ $modal-scrollbar-z-index: 1100;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $grey-60;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
margin-top: 30px;
|
||||
@ -67,7 +67,7 @@ $modal-scrollbar-z-index: 1100;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid $grey-30;
|
||||
border-top: $border-secondary;
|
||||
border-radius: 4px;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
|
||||
@ -84,8 +84,8 @@
|
||||
.snippets-preview-banner {
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
color: $grey-60-70;
|
||||
background: $grey-30-60;
|
||||
color: var(--newtab-text-primary-color);
|
||||
background: var(--newtab-background-color-secondary);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -7,9 +7,9 @@ $icon-width: 54px; // width of primary icon + margin
|
||||
}
|
||||
|
||||
p em {
|
||||
color: $grey-90;
|
||||
color: var(--newtab-text-empahsis-text-color);
|
||||
font-style: normal;
|
||||
background: $yellow-50;
|
||||
background: var(--newtab-text-emphasis-background);
|
||||
}
|
||||
|
||||
&.bold,
|
||||
|
||||
@ -159,7 +159,7 @@
|
||||
|
||||
&.isDisabled {
|
||||
background: $email-input-invalid;
|
||||
color: $red-60;
|
||||
color: var(--newtab-status-error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +227,7 @@
|
||||
}
|
||||
|
||||
.errorState {
|
||||
border: 1px solid $red-60;
|
||||
border: $input-error-border;
|
||||
}
|
||||
|
||||
.helpLink {
|
||||
|
||||
@ -79,16 +79,12 @@
|
||||
}
|
||||
|
||||
.card-preview-image-outer {
|
||||
background-color: $grey-30;
|
||||
background-color: var(--newtab-card-placeholder-color);
|
||||
border-radius: $border-radius-new $border-radius-new 0 0;
|
||||
height: $card-preview-image-height;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
[lwt-newtab-brighttext] & {
|
||||
background-color: $grey-60;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom: 1px solid var(--newtab-card-hairline-color);
|
||||
bottom: 0;
|
||||
|
||||
@ -40,11 +40,7 @@ $ds-width: 936px;
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
@include dark-theme-only {
|
||||
color: $grey-30;
|
||||
}
|
||||
|
||||
color: $grey-50;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
font-size: $section-title-font-size;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
||||
@ -22,22 +22,14 @@
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title {
|
||||
@include dark-theme-only {
|
||||
color: $grey-30;
|
||||
}
|
||||
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.ds-context {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
|
||||
@ -121,14 +121,10 @@ $excerpt-line-height: 20;
|
||||
}
|
||||
|
||||
.source {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
@ -181,23 +177,15 @@ $excerpt-line-height: 20;
|
||||
}
|
||||
|
||||
header {
|
||||
@include dark-theme-only {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
line-height: $header-line-height * 1px;
|
||||
font-size: $header-font-size * 1px;
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
|
||||
p {
|
||||
@include dark-theme-only {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
font-size: $excerpt-font-size * 1px;
|
||||
line-height: $excerpt-line-height * 1px;
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
$status-green: #058B00;
|
||||
$status-dark-green: #7C6;
|
||||
|
||||
.story-footer {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
inset-inline-start: 0;
|
||||
@ -10,14 +7,10 @@ $status-dark-green: #7C6;
|
||||
.story-sponsored-label,
|
||||
.story-view-count,
|
||||
.status-message {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
|
||||
.status-message {
|
||||
@ -26,11 +19,7 @@ $status-dark-green: #7C6;
|
||||
height: 24px;
|
||||
|
||||
.story-badge-icon {
|
||||
@include dark-theme-only {
|
||||
fill: $grey-40;
|
||||
}
|
||||
|
||||
fill: $grey-50;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
height: 16px;
|
||||
margin-inline-end: 6px;
|
||||
|
||||
@ -40,11 +29,7 @@ $status-dark-green: #7C6;
|
||||
}
|
||||
|
||||
.story-context-label {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
flex-grow: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@ -65,33 +50,17 @@ $status-dark-green: #7C6;
|
||||
|
||||
.story-badge-icon,
|
||||
.story-context-label {
|
||||
@include dark-theme-only {
|
||||
animation: dark-color 3s ease-out 0.3s;
|
||||
}
|
||||
|
||||
animation: color 3s ease-out 0.3s;
|
||||
|
||||
@keyframes color {
|
||||
0% {
|
||||
color: $status-green;
|
||||
fill: $status-green;
|
||||
color: var(--newtab-status-success);
|
||||
fill: var(--newtab-status-success);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: $grey-50;
|
||||
fill: $grey-50;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dark-color {
|
||||
0% {
|
||||
color: $status-dark-green;
|
||||
fill: $status-dark-green;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: $grey-40;
|
||||
fill: $grey-40;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,11 +35,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include ds-fade-in($grey-30);
|
||||
|
||||
@include dark-theme-only {
|
||||
@include ds-fade-in($grey-60);
|
||||
}
|
||||
@include ds-fade-in(var(--newtab-card-placeholder-color));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,28 +6,20 @@
|
||||
align-items: center;
|
||||
|
||||
.glyph {
|
||||
@include dark-theme-only {
|
||||
fill: $grey-30;
|
||||
}
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
-moz-context-properties: fill;
|
||||
fill: $grey-50;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
@include dark-theme-only {
|
||||
color: $grey-30;
|
||||
}
|
||||
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: 600;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-inline-end: 8px;
|
||||
fill: #{$grey-40};
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-size: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -4,11 +4,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
&.hovering {
|
||||
@include dark-theme-only {
|
||||
background: $grey-90-30;
|
||||
}
|
||||
|
||||
background: $grey-90-10;
|
||||
background: var(--newtab-element-hover-color);
|
||||
}
|
||||
|
||||
.ds-dismiss-button {
|
||||
@ -48,23 +44,16 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include dark-theme-only {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,11 +15,7 @@ $card-header-in-hero-line-height: 20;
|
||||
|
||||
.excerpt {
|
||||
@include limit-visible-lines(3, 24, 15);
|
||||
@include dark-theme-only {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
@ -59,11 +55,7 @@ $card-header-in-hero-line-height: 20;
|
||||
// "1/3 width layout" (aka "Mobile First")
|
||||
.wrapper {
|
||||
@include ds-border-top;
|
||||
@include dark-theme-only {
|
||||
color: $grey-30;
|
||||
}
|
||||
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
display: block;
|
||||
margin: 12px 0 16px;
|
||||
padding-top: 16px;
|
||||
@ -111,12 +103,8 @@ $card-header-in-hero-line-height: 20;
|
||||
}
|
||||
|
||||
header {
|
||||
@include dark-theme-only {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@include limit-visible-lines(4, 28, 22);
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -130,12 +118,8 @@ $card-header-in-hero-line-height: 20;
|
||||
}
|
||||
|
||||
.source {
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -80,11 +80,7 @@ $item-line-height: 20;
|
||||
}
|
||||
|
||||
a {
|
||||
@include dark-theme-only {
|
||||
color: $grey-10;
|
||||
}
|
||||
|
||||
color: $grey-90;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -196,10 +192,7 @@ $item-line-height: 20;
|
||||
|
||||
.ds-list-item-excerpt {
|
||||
@include limit-visible-lines(2, $item-line-height, $item-font-size);
|
||||
@include dark-theme-only {
|
||||
color: $grey-10-80;
|
||||
}
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-primary-color);
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
@ -211,11 +204,8 @@ $item-line-height: 20;
|
||||
|
||||
.ds-list-item-info {
|
||||
@include limit-visible-lines(1, $item-line-height, $item-font-size);
|
||||
@include dark-theme-only {
|
||||
color: $grey-40;
|
||||
}
|
||||
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $blue-70;
|
||||
color: var(--newtab-link-primary-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,24 +3,16 @@
|
||||
margin-top: 24px;
|
||||
|
||||
.title {
|
||||
@include dark-theme-only {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
color: var(--newtab-section-header-text-color);
|
||||
line-height: 48px;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
color: $grey-90;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include dark-theme-only {
|
||||
color: $grey-30;
|
||||
}
|
||||
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,12 +7,7 @@
|
||||
}
|
||||
|
||||
.top-site-inner > a:is(:hover) .top-site-inner {
|
||||
|
||||
@include ds-fade-in($grey-30);
|
||||
|
||||
@include dark-theme-only {
|
||||
@include ds-fade-in($grey-60);
|
||||
}
|
||||
@include ds-fade-in(var(--newtab-topsites-background-color));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -262,7 +262,7 @@ $letter-fallback-color: $white;
|
||||
}
|
||||
|
||||
.sponsored-label {
|
||||
color: $grey-50;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@ -284,9 +284,6 @@ $letter-fallback-color: $white;
|
||||
|
||||
&.dragged {
|
||||
.tile {
|
||||
background: $grey-20;
|
||||
box-shadow: none;
|
||||
|
||||
*,
|
||||
&::before {
|
||||
display: none;
|
||||
@ -431,7 +428,7 @@ $letter-fallback-color: $white;
|
||||
width: 960px;
|
||||
height: 16px;
|
||||
-moz-context-properties: fill;
|
||||
fill: $blue-50;
|
||||
fill: var(--newtab-link-primary-color);
|
||||
background-image: url('chrome://browser/skin/tabbrowser/loading.svg');
|
||||
animation: tab-throbber-animation 1.05s steps(60) infinite;
|
||||
|
||||
@ -470,7 +467,7 @@ $letter-fallback-color: $white;
|
||||
|
||||
.error-tooltip {
|
||||
animation: fade-up-tt 450ms;
|
||||
background: $red-60;
|
||||
background: var(--newtab-status-error);
|
||||
border-radius: 2px;
|
||||
color: $white;
|
||||
inset-inline-start: 3px;
|
||||
@ -481,7 +478,7 @@ $letter-fallback-color: $white;
|
||||
|
||||
// tooltip caret
|
||||
&::before {
|
||||
background: $red-60;
|
||||
background: var(--newtab-status-error);
|
||||
bottom: -8px;
|
||||
content: '.';
|
||||
height: 16px;
|
||||
|
||||
@ -13,8 +13,8 @@ $border-secondary: 1px solid var(--newtab-border-secondary-color);
|
||||
$inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color);
|
||||
$input-border: 1px solid var(--newtab-textbox-border);
|
||||
$input-border-active: 1px solid var(--newtab-textbox-focus-color);
|
||||
$input-error-border: 1px solid $red-60;
|
||||
$input-error-boxshadow: textbox-shadow($red-60);
|
||||
$input-error-border: 1px solid var(--newtab-status-error);
|
||||
$input-error-boxshadow: textbox-shadow(var(--newtab-status-error));
|
||||
$shadow-primary: 0 0 0 5px var(--newtab-card-active-outline-color);
|
||||
$shadow-secondary: 0 1px 4px 0 $grey-90-20;
|
||||
$shadow-large: 0 1px 15px 0 $black-30;
|
||||
@ -40,8 +40,12 @@ body {
|
||||
--newtab-text-conditional-color: #{$grey-60};
|
||||
--newtab-text-primary-color: #{$in-content-page-color};
|
||||
--newtab-text-secondary-color: #{$grey-50};
|
||||
--newtab-text-emphasis-background: #{$yellow-50};
|
||||
--newtab-text-empahsis-text-color: #{$grey-90};
|
||||
--newtab-textbox-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-textbox-border: #{$grey-90-20};
|
||||
--newtab-status-success: #{$status-green};
|
||||
--newtab-status-error: #{$red-60};
|
||||
@include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations
|
||||
|
||||
// Background buttons
|
||||
@ -89,6 +93,7 @@ body {
|
||||
--newtab-card-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-card-placeholder-color: #{$grey-30};
|
||||
--newtab-card-shadow: 0 1px 4px 0 #{$grey-90-10};
|
||||
--newtab-card-header-color: #{$grey-90};
|
||||
|
||||
// Snippets
|
||||
--newtab-snippets-background-color: var(--newtab-background-color-secondary);
|
||||
@ -138,6 +143,7 @@ body {
|
||||
--newtab-text-primary-color: #{$in-content-page-color-dark};
|
||||
--newtab-text-secondary-color: #{$grey-10-80};
|
||||
--newtab-textbox-border: #{$grey-10-20};
|
||||
--newtab-status-success: #{$status-dark-green};
|
||||
@include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations
|
||||
|
||||
// Background buttons.
|
||||
@ -176,6 +182,7 @@ body {
|
||||
--newtab-card-active-outline-color: #{$grey-60};
|
||||
--newtab-card-placeholder-color: #{$grey-60};
|
||||
--newtab-card-shadow: 0 1px 8px 0 #{$grey-90-20};
|
||||
--newtab-card-header-color: #{$grey-10};
|
||||
|
||||
// Snippets
|
||||
--newtab-snippets-hairline-color: #{$white-10};
|
||||
|
||||
@ -74,6 +74,8 @@ $white-0: rgba($white, 0);
|
||||
$white-10: rgba($white, 0.1);
|
||||
$pocket-teal: #50BCB6;
|
||||
$shadow-10: rgba(12, 12, 13, 0.1);
|
||||
$status-green: #058B00;
|
||||
$status-dark-green: #7C6;
|
||||
$bookmark-icon-fill: #0A84FF;
|
||||
$download-icon-fill: #12BC00;
|
||||
$pocket-icon-fill: #D70022;
|
||||
|
||||
@ -49,8 +49,12 @@ body {
|
||||
--newtab-text-conditional-color: #4A4A4F;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-text-secondary-color: #737373;
|
||||
--newtab-text-emphasis-background: #FFE900;
|
||||
--newtab-text-empahsis-text-color: #0C0C0D;
|
||||
--newtab-textbox-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-textbox-focus-color: #0060DF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
|
||||
@ -81,6 +85,7 @@ body {
|
||||
--newtab-card-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-card-placeholder-color: #D7D7DB;
|
||||
--newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
|
||||
--newtab-card-header-color: #0C0C0D;
|
||||
--newtab-snippets-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-snippets-hairline-color: transparent;
|
||||
--newtab-background-primary-text-color: #151515;
|
||||
@ -125,6 +130,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-text-secondary-color: rgba(249, 249, 250, 0.8);
|
||||
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-textbox-focus-color: #45A1FF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
|
||||
@ -148,6 +154,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-card-active-outline-color: #4A4A4F;
|
||||
--newtab-card-placeholder-color: #4A4A4F;
|
||||
--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
|
||||
--newtab-card-header-color: #F9F9FA;
|
||||
--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
|
||||
--newtab-background-primary-text-color: #CDCDD4;
|
||||
--newtab-focus-outline: rgba(80, 145, 241, 0.5);
|
||||
@ -836,7 +843,7 @@ main.has-snippet {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -848,10 +855,6 @@ main.has-snippet {
|
||||
.top-site-outer .edit-button {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg");
|
||||
}
|
||||
.top-site-outer.dragged .tile {
|
||||
background: #EDEDF0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before {
|
||||
display: none;
|
||||
}
|
||||
@ -959,7 +962,7 @@ main.has-snippet {
|
||||
width: 960px;
|
||||
height: 16px;
|
||||
-moz-context-properties: fill;
|
||||
fill: #0A84FF;
|
||||
fill: var(--newtab-link-primary-color);
|
||||
background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
|
||||
animation: tab-throbber-animation 1.05s steps(60) infinite;
|
||||
}
|
||||
@ -991,12 +994,12 @@ main.has-snippet {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.topsite-form .form-wrapper .invalid input[type=text] {
|
||||
border: 1px solid #D70022;
|
||||
box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3);
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip {
|
||||
animation: fade-up-tt 450ms;
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
inset-inline-start: 3px;
|
||||
@ -1006,7 +1009,7 @@ main.has-snippet {
|
||||
z-index: 1;
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip::before {
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
bottom: -8px;
|
||||
content: ".";
|
||||
height: 16px;
|
||||
@ -2091,15 +2094,12 @@ main.has-snippet {
|
||||
display: block;
|
||||
}
|
||||
.card-outer .card-preview-image-outer {
|
||||
background-color: #D7D7DB;
|
||||
background-color: var(--newtab-card-placeholder-color);
|
||||
border-radius: 8px 8px 0 0;
|
||||
height: 122px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
[lwt-newtab-brighttext] .card-outer .card-preview-image-outer {
|
||||
background-color: #4A4A4F;
|
||||
}
|
||||
.card-outer .card-preview-image-outer::after {
|
||||
border-bottom: 1px solid var(--newtab-card-hairline-color);
|
||||
bottom: 0;
|
||||
@ -2488,7 +2488,7 @@ main.has-snippet {
|
||||
}
|
||||
.asrouter-admin .sourceLabel.isDisabled {
|
||||
background: rgba(215, 0, 34, 0.3);
|
||||
color: #D70022;
|
||||
color: var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .message-item:first-child td {
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
@ -2538,7 +2538,7 @@ main.has-snippet {
|
||||
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
|
||||
}
|
||||
.asrouter-admin .errorState {
|
||||
border: 1px solid #D70022;
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .helpLink {
|
||||
padding: 10px;
|
||||
@ -2701,15 +2701,11 @@ main.has-snippet {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: #737373;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-header,
|
||||
[lwt-newtab-brighttext] .ds-layout .section-title span {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -2856,23 +2852,17 @@ main.has-snippet {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .title {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .title {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.ds-hero {
|
||||
position: relative;
|
||||
@ -2888,12 +2878,9 @@ main.has-snippet {
|
||||
font-size: 15px;
|
||||
-webkit-line-clamp: 3;
|
||||
line-height: 24px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .excerpt {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-hero .ds-card:not(.placeholder) {
|
||||
border: 0;
|
||||
padding-bottom: 20px;
|
||||
@ -2922,7 +2909,7 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
display: block;
|
||||
margin: 12px 0 16px;
|
||||
padding-top: 16px;
|
||||
@ -2931,9 +2918,6 @@ main.has-snippet {
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
border-top: 1px solid #4A4A4F;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-hero .wrapper:focus {
|
||||
box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3);
|
||||
transition: box-shadow 150ms;
|
||||
@ -2975,12 +2959,9 @@ main.has-snippet {
|
||||
font-size: 22px;
|
||||
-webkit-line-clamp: 4;
|
||||
line-height: 28px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta header {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-hero .wrapper .meta .context,
|
||||
.ds-hero .wrapper .meta .source {
|
||||
margin: 0 0 4px;
|
||||
@ -2990,13 +2971,10 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper .meta .source {
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .source {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-column-5 .ds-hero .wrapper, .ds-column-6 .ds-hero .wrapper, .ds-column-7 .ds-hero .wrapper, .ds-column-8 .ds-hero .wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -3176,10 +3154,7 @@ main.has-snippet {
|
||||
display: none;
|
||||
}
|
||||
.ds-list a {
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list a {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
|
||||
.ds-list-item-link:focus {
|
||||
@ -3290,12 +3265,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-primary-color);
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-excerpt {
|
||||
color: rgba(249, 249, 250, 0.8);
|
||||
}
|
||||
.ds-list-item p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -3305,12 +3277,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 1;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-info {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-list-item .ds-list-item-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
@ -3377,7 +3346,7 @@ main.has-snippet {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ds-navigation ul li a:active {
|
||||
color: #003EAA;
|
||||
color: var(--newtab-link-primary-active-color);
|
||||
}
|
||||
.ds-navigation .ds-navigation-header {
|
||||
padding-inline-end: 6px;
|
||||
@ -3395,23 +3364,17 @@ main.has-snippet {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ds-section-title .title {
|
||||
color: var(--newtab-section-header-text-color);
|
||||
line-height: 48px;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .title {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-section-title .subtitle {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .subtitle {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
|
||||
border: 0;
|
||||
@ -3419,13 +3382,7 @@ main.has-snippet {
|
||||
box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
|
||||
}
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-topsites-background-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -3675,10 +3632,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card .meta .source {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card .meta .cta-button {
|
||||
background-color: var(--newtab-button-secondary-color);
|
||||
@ -3723,20 +3677,14 @@ main.has-snippet {
|
||||
.ds-card header {
|
||||
line-height: 24px;
|
||||
font-size: 17px;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card header {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
.ds-card p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card p {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
|
||||
.story-footer {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
@ -3750,12 +3698,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .story-sponsored-label,
|
||||
[lwt-newtab-brighttext] .story-footer .story-view-count,
|
||||
[lwt-newtab-brighttext] .story-footer .status-message {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.story-footer .status-message {
|
||||
display: flex;
|
||||
@ -3763,18 +3706,15 @@ main.has-snippet {
|
||||
height: 24px;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon {
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
height: 16px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-badge-icon {
|
||||
fill: #B1B1B3;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon.icon-bookmark-removed {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg");
|
||||
}
|
||||
.story-footer .status-message .story-context-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
flex-grow: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@ -3782,9 +3722,6 @@ main.has-snippet {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-context-label {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.story-animate-enter {
|
||||
opacity: 0;
|
||||
@ -3798,28 +3735,14 @@ main.has-snippet {
|
||||
.story-animate-enter-active .story-context-label {
|
||||
animation: color 3s ease-out 0.3s;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-badge-icon,
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-context-label {
|
||||
animation: dark-color 3s ease-out 0.3s;
|
||||
}
|
||||
@keyframes color {
|
||||
0% {
|
||||
color: #058B00;
|
||||
fill: #058B00;
|
||||
color: var(--newtab-status-success);
|
||||
fill: var(--newtab-status-success);
|
||||
}
|
||||
100% {
|
||||
color: #737373;
|
||||
fill: #737373;
|
||||
}
|
||||
}
|
||||
@keyframes dark-color {
|
||||
0% {
|
||||
color: #7C6;
|
||||
fill: #7C6;
|
||||
}
|
||||
100% {
|
||||
color: #B1B1B3;
|
||||
fill: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3904,24 +3827,18 @@ main.has-snippet {
|
||||
height: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
-moz-context-properties: fill;
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .glyph {
|
||||
fill: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .title-text {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: 600;
|
||||
padding-right: 12px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .title-text {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .link {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
@ -3977,13 +3894,7 @@ main.has-snippet {
|
||||
outline: none;
|
||||
}
|
||||
.section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-card-placeholder-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -4032,10 +3943,7 @@ main.has-snippet {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
background: var(--newtab-element-hover-color);
|
||||
}
|
||||
.ds-dismiss-ds-text-promo .ds-dismiss-button {
|
||||
margin-inline: 0 18px;
|
||||
@ -4072,20 +3980,15 @@ main.has-snippet {
|
||||
line-height: 24px;
|
||||
}
|
||||
.ds-text-promo h3 {
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo h3 {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-text-promo .subtitle {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo .subtitle {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-primary-color);
|
||||
}
|
||||
|
||||
.ds-chevron-link {
|
||||
@ -4134,7 +4037,7 @@ main.has-snippet {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-inline-end: 8px;
|
||||
fill: #B1B1B3;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-size: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -4327,8 +4230,8 @@ main.has-snippet {
|
||||
.snippets-preview-banner {
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
color: rgba(74, 74, 79, 0.7);
|
||||
background: rgba(215, 215, 219, 0.6);
|
||||
color: var(--newtab-text-primary-color);
|
||||
background: var(--newtab-background-color-secondary);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -4393,7 +4296,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
display: block;
|
||||
}
|
||||
.modalOverlayInner h2 {
|
||||
color: #4A4A4F;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
margin-top: 30px;
|
||||
@ -4412,7 +4315,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
}
|
||||
}
|
||||
.modalOverlayInner .footer {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
border-radius: 4px;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
@ -4623,9 +4526,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
padding: 27px 0;
|
||||
}
|
||||
.SimpleSnippet p em {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-text-empahsis-text-color);
|
||||
font-style: normal;
|
||||
background: #FFE900;
|
||||
background: var(--newtab-text-emphasis-background);
|
||||
}
|
||||
.SimpleSnippet.bold .donation-form-url,
|
||||
.SimpleSnippet.bold .donation-amount, .SimpleSnippet.takeover .donation-form-url,
|
||||
|
||||
@ -53,8 +53,12 @@ body {
|
||||
--newtab-text-conditional-color: #4A4A4F;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-text-secondary-color: #737373;
|
||||
--newtab-text-emphasis-background: #FFE900;
|
||||
--newtab-text-empahsis-text-color: #0C0C0D;
|
||||
--newtab-textbox-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-textbox-focus-color: #0060DF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
|
||||
@ -85,6 +89,7 @@ body {
|
||||
--newtab-card-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-card-placeholder-color: #D7D7DB;
|
||||
--newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
|
||||
--newtab-card-header-color: #0C0C0D;
|
||||
--newtab-snippets-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-snippets-hairline-color: transparent;
|
||||
--newtab-background-primary-text-color: #151515;
|
||||
@ -129,6 +134,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-text-secondary-color: rgba(249, 249, 250, 0.8);
|
||||
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-textbox-focus-color: #45A1FF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
|
||||
@ -152,6 +158,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-card-active-outline-color: #4A4A4F;
|
||||
--newtab-card-placeholder-color: #4A4A4F;
|
||||
--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
|
||||
--newtab-card-header-color: #F9F9FA;
|
||||
--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
|
||||
--newtab-background-primary-text-color: #CDCDD4;
|
||||
--newtab-focus-outline: rgba(80, 145, 241, 0.5);
|
||||
@ -840,7 +847,7 @@ main.has-snippet {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -852,10 +859,6 @@ main.has-snippet {
|
||||
.top-site-outer .edit-button {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg");
|
||||
}
|
||||
.top-site-outer.dragged .tile {
|
||||
background: #EDEDF0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before {
|
||||
display: none;
|
||||
}
|
||||
@ -963,7 +966,7 @@ main.has-snippet {
|
||||
width: 960px;
|
||||
height: 16px;
|
||||
-moz-context-properties: fill;
|
||||
fill: #0A84FF;
|
||||
fill: var(--newtab-link-primary-color);
|
||||
background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
|
||||
animation: tab-throbber-animation 1.05s steps(60) infinite;
|
||||
}
|
||||
@ -995,12 +998,12 @@ main.has-snippet {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.topsite-form .form-wrapper .invalid input[type=text] {
|
||||
border: 1px solid #D70022;
|
||||
box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3);
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip {
|
||||
animation: fade-up-tt 450ms;
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
inset-inline-start: 3px;
|
||||
@ -1010,7 +1013,7 @@ main.has-snippet {
|
||||
z-index: 1;
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip::before {
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
bottom: -8px;
|
||||
content: ".";
|
||||
height: 16px;
|
||||
@ -2095,15 +2098,12 @@ main.has-snippet {
|
||||
display: block;
|
||||
}
|
||||
.card-outer .card-preview-image-outer {
|
||||
background-color: #D7D7DB;
|
||||
background-color: var(--newtab-card-placeholder-color);
|
||||
border-radius: 8px 8px 0 0;
|
||||
height: 122px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
[lwt-newtab-brighttext] .card-outer .card-preview-image-outer {
|
||||
background-color: #4A4A4F;
|
||||
}
|
||||
.card-outer .card-preview-image-outer::after {
|
||||
border-bottom: 1px solid var(--newtab-card-hairline-color);
|
||||
bottom: 0;
|
||||
@ -2492,7 +2492,7 @@ main.has-snippet {
|
||||
}
|
||||
.asrouter-admin .sourceLabel.isDisabled {
|
||||
background: rgba(215, 0, 34, 0.3);
|
||||
color: #D70022;
|
||||
color: var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .message-item:first-child td {
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
@ -2542,7 +2542,7 @@ main.has-snippet {
|
||||
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
|
||||
}
|
||||
.asrouter-admin .errorState {
|
||||
border: 1px solid #D70022;
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .helpLink {
|
||||
padding: 10px;
|
||||
@ -2705,15 +2705,11 @@ main.has-snippet {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: #737373;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-header,
|
||||
[lwt-newtab-brighttext] .ds-layout .section-title span {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -2860,23 +2856,17 @@ main.has-snippet {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .title {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .title {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.ds-hero {
|
||||
position: relative;
|
||||
@ -2892,12 +2882,9 @@ main.has-snippet {
|
||||
font-size: 15px;
|
||||
-webkit-line-clamp: 3;
|
||||
line-height: 24px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .excerpt {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-hero .ds-card:not(.placeholder) {
|
||||
border: 0;
|
||||
padding-bottom: 20px;
|
||||
@ -2926,7 +2913,7 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
display: block;
|
||||
margin: 12px 0 16px;
|
||||
padding-top: 16px;
|
||||
@ -2935,9 +2922,6 @@ main.has-snippet {
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
border-top: 1px solid #4A4A4F;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-hero .wrapper:focus {
|
||||
box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3);
|
||||
transition: box-shadow 150ms;
|
||||
@ -2979,12 +2963,9 @@ main.has-snippet {
|
||||
font-size: 22px;
|
||||
-webkit-line-clamp: 4;
|
||||
line-height: 28px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta header {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-hero .wrapper .meta .context,
|
||||
.ds-hero .wrapper .meta .source {
|
||||
margin: 0 0 4px;
|
||||
@ -2994,13 +2975,10 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper .meta .source {
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .source {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-column-5 .ds-hero .wrapper, .ds-column-6 .ds-hero .wrapper, .ds-column-7 .ds-hero .wrapper, .ds-column-8 .ds-hero .wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -3180,10 +3158,7 @@ main.has-snippet {
|
||||
display: none;
|
||||
}
|
||||
.ds-list a {
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list a {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
|
||||
.ds-list-item-link:focus {
|
||||
@ -3294,12 +3269,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-primary-color);
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-excerpt {
|
||||
color: rgba(249, 249, 250, 0.8);
|
||||
}
|
||||
.ds-list-item p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -3309,12 +3281,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 1;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-info {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-list-item .ds-list-item-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
@ -3381,7 +3350,7 @@ main.has-snippet {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ds-navigation ul li a:active {
|
||||
color: #003EAA;
|
||||
color: var(--newtab-link-primary-active-color);
|
||||
}
|
||||
.ds-navigation .ds-navigation-header {
|
||||
padding-inline-end: 6px;
|
||||
@ -3399,23 +3368,17 @@ main.has-snippet {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ds-section-title .title {
|
||||
color: var(--newtab-section-header-text-color);
|
||||
line-height: 48px;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .title {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-section-title .subtitle {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .subtitle {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
|
||||
border: 0;
|
||||
@ -3423,13 +3386,7 @@ main.has-snippet {
|
||||
box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
|
||||
}
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-topsites-background-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -3679,10 +3636,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card .meta .source {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card .meta .cta-button {
|
||||
background-color: var(--newtab-button-secondary-color);
|
||||
@ -3727,20 +3681,14 @@ main.has-snippet {
|
||||
.ds-card header {
|
||||
line-height: 24px;
|
||||
font-size: 17px;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card header {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
.ds-card p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card p {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
|
||||
.story-footer {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
@ -3754,12 +3702,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .story-sponsored-label,
|
||||
[lwt-newtab-brighttext] .story-footer .story-view-count,
|
||||
[lwt-newtab-brighttext] .story-footer .status-message {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.story-footer .status-message {
|
||||
display: flex;
|
||||
@ -3767,18 +3710,15 @@ main.has-snippet {
|
||||
height: 24px;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon {
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
height: 16px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-badge-icon {
|
||||
fill: #B1B1B3;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon.icon-bookmark-removed {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg");
|
||||
}
|
||||
.story-footer .status-message .story-context-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
flex-grow: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@ -3786,9 +3726,6 @@ main.has-snippet {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-context-label {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.story-animate-enter {
|
||||
opacity: 0;
|
||||
@ -3802,28 +3739,14 @@ main.has-snippet {
|
||||
.story-animate-enter-active .story-context-label {
|
||||
animation: color 3s ease-out 0.3s;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-badge-icon,
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-context-label {
|
||||
animation: dark-color 3s ease-out 0.3s;
|
||||
}
|
||||
@keyframes color {
|
||||
0% {
|
||||
color: #058B00;
|
||||
fill: #058B00;
|
||||
color: var(--newtab-status-success);
|
||||
fill: var(--newtab-status-success);
|
||||
}
|
||||
100% {
|
||||
color: #737373;
|
||||
fill: #737373;
|
||||
}
|
||||
}
|
||||
@keyframes dark-color {
|
||||
0% {
|
||||
color: #7C6;
|
||||
fill: #7C6;
|
||||
}
|
||||
100% {
|
||||
color: #B1B1B3;
|
||||
fill: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3908,24 +3831,18 @@ main.has-snippet {
|
||||
height: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
-moz-context-properties: fill;
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .glyph {
|
||||
fill: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .title-text {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: 600;
|
||||
padding-right: 12px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .title-text {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .link {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
@ -3981,13 +3898,7 @@ main.has-snippet {
|
||||
outline: none;
|
||||
}
|
||||
.section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-card-placeholder-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -4036,10 +3947,7 @@ main.has-snippet {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
background: var(--newtab-element-hover-color);
|
||||
}
|
||||
.ds-dismiss-ds-text-promo .ds-dismiss-button {
|
||||
margin-inline: 0 18px;
|
||||
@ -4076,20 +3984,15 @@ main.has-snippet {
|
||||
line-height: 24px;
|
||||
}
|
||||
.ds-text-promo h3 {
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo h3 {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-text-promo .subtitle {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo .subtitle {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-primary-color);
|
||||
}
|
||||
|
||||
.ds-chevron-link {
|
||||
@ -4138,7 +4041,7 @@ main.has-snippet {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-inline-end: 8px;
|
||||
fill: #B1B1B3;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-size: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -4331,8 +4234,8 @@ main.has-snippet {
|
||||
.snippets-preview-banner {
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
color: rgba(74, 74, 79, 0.7);
|
||||
background: rgba(215, 215, 219, 0.6);
|
||||
color: var(--newtab-text-primary-color);
|
||||
background: var(--newtab-background-color-secondary);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -4397,7 +4300,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
display: block;
|
||||
}
|
||||
.modalOverlayInner h2 {
|
||||
color: #4A4A4F;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
margin-top: 30px;
|
||||
@ -4416,7 +4319,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
}
|
||||
}
|
||||
.modalOverlayInner .footer {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
border-radius: 4px;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
@ -4627,9 +4530,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
padding: 27px 0;
|
||||
}
|
||||
.SimpleSnippet p em {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-text-empahsis-text-color);
|
||||
font-style: normal;
|
||||
background: #FFE900;
|
||||
background: var(--newtab-text-emphasis-background);
|
||||
}
|
||||
.SimpleSnippet.bold .donation-form-url,
|
||||
.SimpleSnippet.bold .donation-amount, .SimpleSnippet.takeover .donation-form-url,
|
||||
|
||||
@ -49,8 +49,12 @@ body {
|
||||
--newtab-text-conditional-color: #4A4A4F;
|
||||
--newtab-text-primary-color: #15141a;
|
||||
--newtab-text-secondary-color: #737373;
|
||||
--newtab-text-emphasis-background: #FFE900;
|
||||
--newtab-text-empahsis-text-color: #0C0C0D;
|
||||
--newtab-textbox-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
|
||||
--newtab-status-success: #058B00;
|
||||
--newtab-status-error: #D70022;
|
||||
--newtab-textbox-focus-color: #0060DF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
|
||||
@ -81,6 +85,7 @@ body {
|
||||
--newtab-card-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-card-placeholder-color: #D7D7DB;
|
||||
--newtab-card-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
|
||||
--newtab-card-header-color: #0C0C0D;
|
||||
--newtab-snippets-background-color: var(--newtab-background-color-secondary);
|
||||
--newtab-snippets-hairline-color: transparent;
|
||||
--newtab-background-primary-text-color: #151515;
|
||||
@ -125,6 +130,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-text-primary-color: #fbfbfe;
|
||||
--newtab-text-secondary-color: rgba(249, 249, 250, 0.8);
|
||||
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
|
||||
--newtab-status-success: #7C6;
|
||||
--newtab-textbox-focus-color: #45A1FF;
|
||||
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
|
||||
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
|
||||
@ -148,6 +154,7 @@ body[lwt-newtab-brighttext] {
|
||||
--newtab-card-active-outline-color: #4A4A4F;
|
||||
--newtab-card-placeholder-color: #4A4A4F;
|
||||
--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2);
|
||||
--newtab-card-header-color: #F9F9FA;
|
||||
--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1);
|
||||
--newtab-background-primary-text-color: #CDCDD4;
|
||||
--newtab-focus-outline: rgba(80, 145, 241, 0.5);
|
||||
@ -836,7 +843,7 @@ main.has-snippet {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-site-outer .title .sponsored-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.top-site-outer .title:not(.sponsored) .sponsored-label {
|
||||
@ -848,10 +855,6 @@ main.has-snippet {
|
||||
.top-site-outer .edit-button {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg");
|
||||
}
|
||||
.top-site-outer.dragged .tile {
|
||||
background: #EDEDF0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before {
|
||||
display: none;
|
||||
}
|
||||
@ -959,7 +962,7 @@ main.has-snippet {
|
||||
width: 960px;
|
||||
height: 16px;
|
||||
-moz-context-properties: fill;
|
||||
fill: #0A84FF;
|
||||
fill: var(--newtab-link-primary-color);
|
||||
background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
|
||||
animation: tab-throbber-animation 1.05s steps(60) infinite;
|
||||
}
|
||||
@ -991,12 +994,12 @@ main.has-snippet {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.topsite-form .form-wrapper .invalid input[type=text] {
|
||||
border: 1px solid #D70022;
|
||||
box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3);
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip {
|
||||
animation: fade-up-tt 450ms;
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
inset-inline-start: 3px;
|
||||
@ -1006,7 +1009,7 @@ main.has-snippet {
|
||||
z-index: 1;
|
||||
}
|
||||
.topsite-form .form-wrapper .error-tooltip::before {
|
||||
background: #D70022;
|
||||
background: var(--newtab-status-error);
|
||||
bottom: -8px;
|
||||
content: ".";
|
||||
height: 16px;
|
||||
@ -2091,15 +2094,12 @@ main.has-snippet {
|
||||
display: block;
|
||||
}
|
||||
.card-outer .card-preview-image-outer {
|
||||
background-color: #D7D7DB;
|
||||
background-color: var(--newtab-card-placeholder-color);
|
||||
border-radius: 8px 8px 0 0;
|
||||
height: 122px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
[lwt-newtab-brighttext] .card-outer .card-preview-image-outer {
|
||||
background-color: #4A4A4F;
|
||||
}
|
||||
.card-outer .card-preview-image-outer::after {
|
||||
border-bottom: 1px solid var(--newtab-card-hairline-color);
|
||||
bottom: 0;
|
||||
@ -2488,7 +2488,7 @@ main.has-snippet {
|
||||
}
|
||||
.asrouter-admin .sourceLabel.isDisabled {
|
||||
background: rgba(215, 0, 34, 0.3);
|
||||
color: #D70022;
|
||||
color: var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .message-item:first-child td {
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
@ -2538,7 +2538,7 @@ main.has-snippet {
|
||||
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
|
||||
}
|
||||
.asrouter-admin .errorState {
|
||||
border: 1px solid #D70022;
|
||||
border: 1px solid var(--newtab-status-error);
|
||||
}
|
||||
.asrouter-admin .helpLink {
|
||||
padding: 10px;
|
||||
@ -2701,15 +2701,11 @@ main.has-snippet {
|
||||
|
||||
.ds-header,
|
||||
.ds-layout .section-title span {
|
||||
color: #737373;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-header,
|
||||
[lwt-newtab-brighttext] .ds-layout .section-title span {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-header .icon,
|
||||
.ds-layout .section-title span .icon {
|
||||
fill: var(--newtab-text-secondary-color);
|
||||
@ -2856,23 +2852,17 @@ main.has-snippet {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .title {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .title {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-collection-card-grid .ds-header .ds-context {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.ds-hero {
|
||||
position: relative;
|
||||
@ -2888,12 +2878,9 @@ main.has-snippet {
|
||||
font-size: 15px;
|
||||
-webkit-line-clamp: 3;
|
||||
line-height: 24px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .excerpt {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-hero .ds-card:not(.placeholder) {
|
||||
border: 0;
|
||||
padding-bottom: 20px;
|
||||
@ -2922,7 +2909,7 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
display: block;
|
||||
margin: 12px 0 16px;
|
||||
padding-top: 16px;
|
||||
@ -2931,9 +2918,6 @@ main.has-snippet {
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
border-top: 1px solid #4A4A4F;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-hero .wrapper:focus {
|
||||
box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3);
|
||||
transition: box-shadow 150ms;
|
||||
@ -2975,12 +2959,9 @@ main.has-snippet {
|
||||
font-size: 22px;
|
||||
-webkit-line-clamp: 4;
|
||||
line-height: 28px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta header {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-hero .wrapper .meta .context,
|
||||
.ds-hero .wrapper .meta .source {
|
||||
margin: 0 0 4px;
|
||||
@ -2990,13 +2971,10 @@ main.has-snippet {
|
||||
}
|
||||
.ds-hero .wrapper .meta .source {
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-hero .wrapper .meta .source {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-column-5 .ds-hero .wrapper, .ds-column-6 .ds-hero .wrapper, .ds-column-7 .ds-hero .wrapper, .ds-column-8 .ds-hero .wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -3176,10 +3154,7 @@ main.has-snippet {
|
||||
display: none;
|
||||
}
|
||||
.ds-list a {
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list a {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
|
||||
.ds-list-item-link:focus {
|
||||
@ -3290,12 +3265,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-primary-color);
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-excerpt {
|
||||
color: rgba(249, 249, 250, 0.8);
|
||||
}
|
||||
.ds-list-item p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -3305,12 +3277,9 @@ main.has-snippet {
|
||||
font-size: 14px;
|
||||
-webkit-line-clamp: 1;
|
||||
line-height: 20px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-list-item .ds-list-item-info {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
.ds-list-item .ds-list-item-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
@ -3377,7 +3346,7 @@ main.has-snippet {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ds-navigation ul li a:active {
|
||||
color: #003EAA;
|
||||
color: var(--newtab-link-primary-active-color);
|
||||
}
|
||||
.ds-navigation .ds-navigation-header {
|
||||
padding-inline-end: 6px;
|
||||
@ -3395,23 +3364,17 @@ main.has-snippet {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ds-section-title .title {
|
||||
color: var(--newtab-section-header-text-color);
|
||||
line-height: 48px;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .title {
|
||||
color: #FFF;
|
||||
}
|
||||
.ds-section-title .subtitle {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-section-title .subtitle {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
|
||||
border: 0;
|
||||
@ -3419,13 +3382,7 @@ main.has-snippet {
|
||||
box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
|
||||
}
|
||||
.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-topsites-background-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -3675,10 +3632,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card .meta .source {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card .meta .cta-button {
|
||||
background-color: var(--newtab-button-secondary-color);
|
||||
@ -3723,20 +3677,14 @@ main.has-snippet {
|
||||
.ds-card header {
|
||||
line-height: 24px;
|
||||
font-size: 17px;
|
||||
color: #0C0C0D;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card header {
|
||||
color: #F9F9FA;
|
||||
color: var(--newtab-card-header-color);
|
||||
}
|
||||
.ds-card p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-card p {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
|
||||
.story-footer {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
@ -3750,12 +3698,7 @@ main.has-snippet {
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .story-sponsored-label,
|
||||
[lwt-newtab-brighttext] .story-footer .story-view-count,
|
||||
[lwt-newtab-brighttext] .story-footer .status-message {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.story-footer .status-message {
|
||||
display: flex;
|
||||
@ -3763,18 +3706,15 @@ main.has-snippet {
|
||||
height: 24px;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon {
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
height: 16px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-badge-icon {
|
||||
fill: #B1B1B3;
|
||||
}
|
||||
.story-footer .status-message .story-badge-icon.icon-bookmark-removed {
|
||||
background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg");
|
||||
}
|
||||
.story-footer .status-message .story-context-label {
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
flex-grow: 1;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@ -3782,9 +3722,6 @@ main.has-snippet {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-footer .status-message .story-context-label {
|
||||
color: #B1B1B3;
|
||||
}
|
||||
|
||||
.story-animate-enter {
|
||||
opacity: 0;
|
||||
@ -3798,28 +3735,14 @@ main.has-snippet {
|
||||
.story-animate-enter-active .story-context-label {
|
||||
animation: color 3s ease-out 0.3s;
|
||||
}
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-badge-icon,
|
||||
[lwt-newtab-brighttext] .story-animate-enter-active .story-context-label {
|
||||
animation: dark-color 3s ease-out 0.3s;
|
||||
}
|
||||
@keyframes color {
|
||||
0% {
|
||||
color: #058B00;
|
||||
fill: #058B00;
|
||||
color: var(--newtab-status-success);
|
||||
fill: var(--newtab-status-success);
|
||||
}
|
||||
100% {
|
||||
color: #737373;
|
||||
fill: #737373;
|
||||
}
|
||||
}
|
||||
@keyframes dark-color {
|
||||
0% {
|
||||
color: #7C6;
|
||||
fill: #7C6;
|
||||
}
|
||||
100% {
|
||||
color: #B1B1B3;
|
||||
fill: #B1B1B3;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3904,24 +3827,18 @@ main.has-snippet {
|
||||
height: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
-moz-context-properties: fill;
|
||||
fill: #737373;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .glyph {
|
||||
fill: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .title-text {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
color: #737373;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
font-weight: 600;
|
||||
padding-right: 12px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-message .title .title-text {
|
||||
color: #D7D7DB;
|
||||
}
|
||||
.ds-message .title .link {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
@ -3977,13 +3894,7 @@ main.has-snippet {
|
||||
outline: none;
|
||||
}
|
||||
.section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #D7D7DB;
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
[lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):hover {
|
||||
box-shadow: 0 0 0 5px #4A4A4F;
|
||||
box-shadow: 0 0 0 5px var(--newtab-card-placeholder-color);
|
||||
transition: box-shadow 150ms;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
@ -4032,10 +3943,7 @@ main.has-snippet {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.1);
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-dismiss-ds-text-promo.hovering {
|
||||
background: rgba(12, 12, 13, 0.3);
|
||||
background: var(--newtab-element-hover-color);
|
||||
}
|
||||
.ds-dismiss-ds-text-promo .ds-dismiss-button {
|
||||
margin-inline: 0 18px;
|
||||
@ -4072,20 +3980,15 @@ main.has-snippet {
|
||||
line-height: 24px;
|
||||
}
|
||||
.ds-text-promo h3 {
|
||||
color: var(--newtab-card-header-color);
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo h3 {
|
||||
color: #F9F9FA;
|
||||
}
|
||||
.ds-text-promo .subtitle {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
color: #737373;
|
||||
}
|
||||
[lwt-newtab-brighttext] .ds-text-promo .subtitle {
|
||||
color: #B1B1B3;
|
||||
color: var(--newtab-text-primary-color);
|
||||
}
|
||||
|
||||
.ds-chevron-link {
|
||||
@ -4134,7 +4037,7 @@ main.has-snippet {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-inline-end: 8px;
|
||||
fill: #B1B1B3;
|
||||
fill: var(--newtab-icon-secondary-color);
|
||||
background-size: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -4327,8 +4230,8 @@ main.has-snippet {
|
||||
.snippets-preview-banner {
|
||||
font-size: 15px;
|
||||
line-height: 42px;
|
||||
color: rgba(74, 74, 79, 0.7);
|
||||
background: rgba(215, 215, 219, 0.6);
|
||||
color: var(--newtab-text-primary-color);
|
||||
background: var(--newtab-background-color-secondary);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -4393,7 +4296,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
display: block;
|
||||
}
|
||||
.modalOverlayInner h2 {
|
||||
color: #4A4A4F;
|
||||
color: var(--newtab-section-header-text-color);
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
margin-top: 30px;
|
||||
@ -4412,7 +4315,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
}
|
||||
}
|
||||
.modalOverlayInner .footer {
|
||||
border-top: 1px solid #D7D7DB;
|
||||
border-top: 1px solid var(--newtab-border-secondary-color);
|
||||
border-radius: 4px;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
@ -4623,9 +4526,9 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
|
||||
padding: 27px 0;
|
||||
}
|
||||
.SimpleSnippet p em {
|
||||
color: #0C0C0D;
|
||||
color: var(--newtab-text-empahsis-text-color);
|
||||
font-style: normal;
|
||||
background: #FFE900;
|
||||
background: var(--newtab-text-emphasis-background);
|
||||
}
|
||||
.SimpleSnippet.bold .donation-form-url,
|
||||
.SimpleSnippet.bold .donation-amount, .SimpleSnippet.takeover .donation-form-url,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user