rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2044 - Use color-mix for confirmation page background on Firefox 89+.

Browse source
This commit is contained in:
Harry Twyford 2021-05-06 14:57:23 -04:00
parent 4b56a2f0bb
commit 7e4f836072
1 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/css/confirm-page.css
View file

@ -45,8 +45,27 @@ html {
word-break: break-all;
}
/* Fallbacks for Firefox < 89. In Firefox 89+, content pages like the
confirmation page follow the Firefox theme instead of the system theme.
That requires the -moz-toolbar-prefers-color-scheme media query. Instead
of supporting that query as well, we use color-mix for the background-color,
which is also supported in Firefox 89+. */
/* stylelint-disable media-feature-name-no-unknown */
@media (prefers-color-scheme: dark) {
#redirect-url {
background-color: #38383d; /* Grey 70 */
}
}
@media (prefers-color-scheme: light) {
#redirect-url {
background-color: #efedf0;
}
}
/* stylelint-enable */
#redirect-url {
background: #efedf0; /* Grey 20 */
background-color: color-mix(in sRGB, currentColor 10%, transparent);
border-radius: 2px;
line-height: 1.5;
padding-block-end: 0.5rem;
@ -55,15 +74,6 @@ html {
padding-inline-start: 0.5rem;
}
/* stylelint-disable media-feature-name-no-unknown */
@media (prefers-color-scheme: dark) {
#redirect-url {
background: #38383d; /* Grey 70 */
color: #eee; /* White 20 */
}
}
/* stylelint-enable */
#redirect-url img {
block-size: 16px;
inline-size: 16px;