nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1849362 - [High Contrast] The "Privacy policy" and "Terms of use" links from the Fakespot onboarding sidebar disappear when clicked r=omc-reviewers,aminomancer

Browse source 
Removes the link overrides and adds the design system token link styles.

Differential Revision: https://phabricator.services.mozilla.com/D189017
This commit is contained in:
negin 2023-09-22 20:30:28 +00:00
parent 154c1ac997
commit f8fab594db
2 changed files with 31 additions and 9 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

30
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View file

@ -1,6 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@import 'chrome://global/skin/design-system/tokens-brand.css';
#feature-callout {
--fc-background: var(--fc-background-light, #fff);
--fc-color: var(--fc-color-light, rgb(21, 20, 26));
@ -938,10 +939,6 @@ html {
height: 100%;
min-height: 500px;
overflow: hidden;
--link-color: var(--in-content-primary-button-background);
--link-color-hover: var(--in-content-primary-button-background-hover);
--link-color-active: var(--in-content-primary-button-background-active);
--link-color-visited: var(--link-color);
}
.onboardingContainer .screen.light-text {
--in-content-page-color: rgb(251, 251, 254);
@ -1104,6 +1101,11 @@ html {
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
text-decoration: none;
}
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover {
background-color: var(--in-content-button-background-hover);
}
@ -1187,6 +1189,11 @@ html {
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
text-decoration: none;
}
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button {
color: #FFF;
}
@ -1307,6 +1314,11 @@ html {
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta.cta-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta.cta-link:active {
text-decoration: none;
}
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta.secondary:hover {
background-color: var(--in-content-button-background-hover);
}
@ -1680,6 +1692,11 @@ html {
.onboardingContainer .text-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .text-link:active {
text-decoration: none;
}
}
.onboardingContainer .welcome-text {
display: flex;
flex-direction: column;
@ -1956,6 +1973,11 @@ html {
.onboardingContainer .mobile-downloads .email-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .mobile-downloads .email-link:active {
text-decoration: none;
}
}
.onboardingContainer .mobile-downloads .email-link:hover {
background: none;
}

10
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View file

@ -2,6 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@use 'sass:math';
@import 'chrome://global/skin/design-system/tokens-brand.css';
@import '../styles/feature-callout';
@import '../styles/shopping';
@ -234,6 +235,10 @@ html {
&:active {
color: var(--link-color-active);
@media (prefers-contrast) {
text-decoration: none;
}
}
}
@ -245,11 +250,6 @@ html {
min-height: 500px;
overflow: hidden;
--link-color: var(--in-content-primary-button-background);
--link-color-hover: var(--in-content-primary-button-background-hover);
--link-color-active: var(--in-content-primary-button-background-active);
--link-color-visited: var(--link-color);
&.light-text {
--in-content-page-color: rgb(251, 251, 254);
--in-content-primary-button-text-color: rgb(43, 42, 51);