зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1576562 - Convert icons from background-image so they are displayed in high contrast mode. r=johannh
Differential Revision: https://phabricator.services.mozilla.com/D43669 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Erica Wright
Родитель
c7017dbe7d
Коммит
feb6feb835
|
|
@ -82,6 +82,7 @@ h2 {
|
|||
|
||||
|
||||
/* We want to hide certain components depending on its state. */
|
||||
.etp-card .icon.dark,
|
||||
a.hidden,
|
||||
.loading .card-body.hidden,
|
||||
.lockwise-card.hidden,
|
||||
|
|
@ -95,24 +96,18 @@ a.hidden,
|
|||
#monitor-body-content .monitor-breached-passwords.hidden,
|
||||
.loading a,
|
||||
.loading button,
|
||||
.loading .card-title,
|
||||
.loading .content,
|
||||
.loading .monitor-scanned-text {
|
||||
.loading .wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
height: auto;
|
||||
grid-column: 1;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.etp-card .icon {
|
||||
background: url("chrome://browser/content/logos/tracking-protection.svg") no-repeat center/contain;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("browser.in-content.dark-mode") {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
|
|
@ -123,20 +118,16 @@ a.hidden,
|
|||
--cryptominer-highlight-color: #BEBECA;
|
||||
}
|
||||
|
||||
.etp-card .icon {
|
||||
background: url("chrome://browser/content/logos/tracking-protection-dark-theme.svg") no-repeat center/contain;
|
||||
.etp-card .icon.dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.etp-card .icon.light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lockwise-card .icon {
|
||||
background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.monitor-card .icon {
|
||||
background: url("chrome://browser/content/logos/monitor.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
|
@ -167,8 +158,7 @@ a.hidden,
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#protection-details,
|
||||
.inline-text-icon {
|
||||
#protection-details {
|
||||
padding: 4px;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
|
|
@ -244,6 +234,7 @@ a.hidden,
|
|||
width: 100%;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.graph-bar:hover {
|
||||
|
|
@ -359,47 +350,50 @@ input[type="radio"] {
|
|||
}
|
||||
|
||||
#legend label {
|
||||
display: inline-block;
|
||||
margin-bottom: -1px;
|
||||
padding: 15px 23px;
|
||||
padding: 15px 0px;
|
||||
padding-inline-end: 5px;
|
||||
border: 3px solid transparent;
|
||||
-moz-context-properties: fill;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
[dir="rtl"] #legend label {
|
||||
background-position: right center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#legend label:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label[data-type="social"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
|
||||
.icon-small {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
|
||||
label span {
|
||||
margin-inline-start: 1px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label[data-type="social"] .icon-small {
|
||||
fill: var(--social-color);
|
||||
}
|
||||
|
||||
label[data-type="cookie"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
|
||||
label[data-type="cookie"] .icon-small {
|
||||
fill: var(--cookie-color);
|
||||
}
|
||||
|
||||
label[data-type="tracker"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
|
||||
label[data-type="tracker"] .icon-small {
|
||||
fill: var(--tracker-color);
|
||||
}
|
||||
|
||||
label[data-type="fingerprinter"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
|
||||
label[data-type="fingerprinter"] .icon-small {
|
||||
fill: var(--fingerprinter-color);
|
||||
}
|
||||
|
||||
label[data-type="cryptominer"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
|
||||
label[data-type="cryptominer"] .icon-small {
|
||||
fill: var(--cryptominer-color);
|
||||
}
|
||||
|
||||
|
|
@ -493,26 +487,9 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
|||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.inline-text-icon {
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
background-size: 16px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 3px;
|
||||
background-position-y: 5px;
|
||||
padding: 4px;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
|
||||
[dir="rtl"] #protection-details,
|
||||
[dir="rtl"] .inline-text-icon {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
.lockwise-mobile-app-icon {
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
background: url("chrome://browser/content/logos/lockwise-mobile-app.svg") no-repeat center/cover;
|
||||
width: 38px;
|
||||
height: 35px;
|
||||
}
|
||||
|
|
@ -520,14 +497,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
|||
.passwords-stored-text,
|
||||
.synced-devices-text {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.passwords-stored-text {
|
||||
background-image: url("chrome://browser/skin/login.svg");
|
||||
}
|
||||
|
||||
.synced-devices-text {
|
||||
background-image: url("chrome://browser/skin/sync.svg");
|
||||
padding-inline-start: 4px;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -567,7 +537,6 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
|||
}
|
||||
|
||||
.monitor-scanned-text {
|
||||
background-image: url("chrome://browser/skin/reload.svg");
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
|
|
@ -597,26 +566,14 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
|||
background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
|
||||
}
|
||||
|
||||
.email .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/mail.svg);
|
||||
}
|
||||
|
||||
.breaches {
|
||||
background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
|
||||
}
|
||||
|
||||
.breaches .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/fxa/avatar.svg);
|
||||
}
|
||||
|
||||
.passwords {
|
||||
background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
|
||||
}
|
||||
|
||||
.passwords .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/login.svg);
|
||||
}
|
||||
|
||||
.monitor-view-full-report {
|
||||
grid-row: 2;
|
||||
grid-column: span 2;
|
||||
|
|
@ -637,17 +594,16 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
|||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.monitor-stat .monitor-icon {
|
||||
background-size: 24px 24px;
|
||||
background-repeat: no-repeat;
|
||||
.icon-med {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-moz-context-properties: fill,fill-opacity;
|
||||
fill: white;
|
||||
fill-opacity: 0.65;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background-position: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
<h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
|
||||
<div class="card card-no-hover etp-card">
|
||||
<div class="card-header">
|
||||
<div class="icon"></div>
|
||||
<img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/>
|
||||
<img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/>
|
||||
<div class="wrapper">
|
||||
<h2 class="card-title" data-l10n-id="etp-card-title"></h2>
|
||||
<p class="content" data-l10n-id="etp-card-content"></p>
|
||||
|
|
@ -40,19 +41,34 @@
|
|||
<div id="legend">
|
||||
<label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label>
|
||||
<input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked>
|
||||
<label id="socialLabel" for="tab-social" data-type="social"></label>
|
||||
<label id="socialLabel" for="tab-social" data-type="social">
|
||||
<img class="icon-small" src="chrome://browser/skin/controlcenter/socialblock.svg" data-type="social"/>
|
||||
<span data-type="social"></span>
|
||||
</label>
|
||||
|
||||
<input id="tab-cookie" data-type="cookie" type="radio" name="tabs" aria-labelledby="cookieLabel cookieTitle" aria-describedby="cookieContent">
|
||||
<label id="cookieLabel" for="tab-cookie" data-type="cookie"></label>
|
||||
<label id="cookieLabel" for="tab-cookie" data-type="cookie">
|
||||
<img class="icon-small" src="chrome://browser/skin/controlcenter/3rdpartycookies.svg" data-type="cookie"/>
|
||||
<span data-type="cookie"></span>
|
||||
</label>
|
||||
|
||||
<input id="tab-tracker" data-type="tracker" type="radio" name="tabs" aria-labelledby="trackerLabel trackerTitle" aria-describedby="trackerContent">
|
||||
<label id="trackerLabel" for="tab-tracker" data-type="tracker"></label>
|
||||
<label id="trackerLabel" for="tab-tracker" data-type="tracker">
|
||||
<img class="icon-small" src="chrome://browser/skin/controlcenter/tracker-image.svg" data-type="tracker"/>
|
||||
<span data-type="tracker"></span>
|
||||
</label>
|
||||
|
||||
<input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs" aria-labelledby="fingerprinterLabel fingerprinterTitle" aria-describedby="fingerprinterContent">
|
||||
<label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter"></label>
|
||||
<label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter">
|
||||
<img class="icon-small" src="chrome://browser/skin/controlcenter/fingerprinters.svg" data-type="fingerprinter"/>
|
||||
<span data-type="fingerprinter"></span>
|
||||
</label>
|
||||
|
||||
<input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs" aria-labelledby="cryptominerLabel cryptominerTitle" aria-describedby="cryptominerContent">
|
||||
<label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer"></label>
|
||||
<label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer">
|
||||
<img class="icon-small" src="chrome://browser/skin/controlcenter/cryptominers.svg" data-type="cryptominer"/>
|
||||
<span data-type="cryptominer"></span>
|
||||
</label>
|
||||
<div id=highlight></div>
|
||||
<div id=highlight-hover></div>
|
||||
<div id="social" class="tab-content">
|
||||
|
|
@ -94,7 +110,7 @@
|
|||
<!-- Markup for Monitor card. -->
|
||||
<section class="card card-no-hover monitor-card hidden">
|
||||
<div class="card-header">
|
||||
<div class="icon"></div>
|
||||
<img class="icon" src="chrome://browser/content/logos/monitor.svg"/>
|
||||
<div class="wrapper">
|
||||
<h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
|
||||
<p id="monitor-header-content" class="content">
|
||||
|
|
@ -103,7 +119,8 @@
|
|||
</span>
|
||||
<a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
|
||||
</p>
|
||||
<span class="inline-text-icon monitor-scanned-text" data-l10n-id="auto-scan"></span>
|
||||
<img class="icon-small" src="chrome://browser/skin/reload.svg"/>
|
||||
<span class="monitor-scanned-text" data-l10n-id="auto-scan"></span>
|
||||
</div>
|
||||
<a target="_blank" id="sign-up-for-monitor-link">
|
||||
<!-- Insert Monitor link content here. -->
|
||||
|
|
@ -115,7 +132,7 @@
|
|||
<div class="monitor-info-wrapper">
|
||||
<div class="monitor-block email">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<img class="icon-med" src="chrome://browser/skin/mail.svg"/>
|
||||
<span data-type="stored-emails">
|
||||
<!-- Display number of stored emails here. -->
|
||||
</span>
|
||||
|
|
@ -124,7 +141,7 @@
|
|||
</div>
|
||||
<div class="monitor-block breaches">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/>
|
||||
<span data-type="known-breaches">
|
||||
<!-- Display number of known breaches here. -->
|
||||
</span>
|
||||
|
|
@ -133,7 +150,7 @@
|
|||
</div>
|
||||
<div class="monitor-block passwords">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<img class="icon-med" src="chrome://browser/skin/login.svg"/>
|
||||
<span data-type="exposed-passwords">
|
||||
<!-- Display number of exposed passwords here. -->
|
||||
</span>
|
||||
|
|
@ -159,7 +176,7 @@
|
|||
<!-- Markup for Lockwise card. -->
|
||||
<section class="card card-no-hover lockwise-card hidden">
|
||||
<div class="card-header">
|
||||
<div class="icon"></div>
|
||||
<img class="icon" src="chrome://browser/content/logos/lockwise.svg"/>
|
||||
<div class="wrapper">
|
||||
<h2 id="lockwise-title" class="card-title">
|
||||
<!-- Insert Lockwise card title here. -->
|
||||
|
|
@ -173,7 +190,7 @@
|
|||
<div class="card-body hidden">
|
||||
<div id="lockwise-body-content" class="body-wrapper">
|
||||
<div class="no-logins hidden">
|
||||
<div class="lockwise-mobile-app-icon"></div>
|
||||
<img class="lockwise-mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile-app.svg"/>
|
||||
<span data-l10n-id="lockwise-no-logins-content">
|
||||
<a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
|
||||
</span>
|
||||
|
|
@ -182,14 +199,18 @@
|
|||
<span class="number-of-logins block">
|
||||
<!-- Display number of stored logins here. -->
|
||||
</span>
|
||||
<span id="lockwise-passwords-stored" class="inline-text-icon passwords-stored-text">
|
||||
<span class="passwords-stored-text">
|
||||
<img class="icon-small" src= "chrome://browser/skin/login.svg"/>
|
||||
<span id="lockwise-passwords-stored">
|
||||
<!-- Display message for stored logins here. -->
|
||||
<a target="_blank" id="lockwise-how-it-works" data-l10n-name="lockwise-how-it-works" href=""></a>
|
||||
</span>
|
||||
</span>
|
||||
<span class="number-of-synced-devices block">
|
||||
<!-- Display number of synced devices here. -->
|
||||
</span>
|
||||
<span class="inline-text-icon synced-devices-text">
|
||||
<span class="synced-devices-text">
|
||||
<img class="icon-small" src="chrome://browser/skin/sync.svg"/>
|
||||
<span>
|
||||
<!-- Display message for status of synced devices here. -->
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ document.addEventListener("DOMContentLoaded", e => {
|
|||
// Set the total number of each type of tracker on the tabs as well as their
|
||||
// "Learn More" links
|
||||
for (let type of dataTypes) {
|
||||
document.querySelector(`label[data-type=${type}]`).textContent =
|
||||
document.querySelector(`label[data-type=${type}] span`).textContent =
|
||||
weekTypeCounts[type];
|
||||
const learnMoreLink = document.getElementById(`${type}-link`);
|
||||
learnMoreLink.href = RPMGetFormatURLPref(
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче