Bug 1643003 - Fix the gradient color direction of the monitor blocks for RTL r=ewright
authorItiel <itiel_yn8@walla.com>
Fri, 05 Jun 2020 15:05:01 +0000
changeset 598232 cf239f5dad7a988c7d23de4eae2e5f9e807797ad
parent 598231 2ab35272d8c449c2437c0daa1651965770f9222d
child 598233 91fff3143be70425023fb59192ac9d63c3bec492
push id13310
push userffxbld-merge
push dateMon, 29 Jun 2020 14:50:06 +0000
treeherdermozilla-beta@15a59a0afa5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersewright
bugs1643003
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1643003 - Fix the gradient color direction of the monitor blocks for RTL r=ewright Differential Revision: https://phabricator.services.mozilla.com/D78085
browser/components/protections/content/protections.css
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -256,29 +256,29 @@ a.hidden,
 
 .custom-not-blocking #manage-protections {
   display: initial;
 }
 
 #protection-settings {
   -moz-context-properties: fill;
   fill: var(--gear-icon-fill);
-  background: url("chrome://global/skin/icons/settings.svg") no-repeat 0px;
+  background: url("chrome://global/skin/icons/settings.svg") no-repeat 0;
   font-size: 0.75em;
   cursor: pointer;
   width: max-content;
   color: var(--in-content-deemphasized-text);
-  margin-block: 6px 0px;
+  margin-block: 6px 0;
   font-size: 12px;
   padding-block: 4px;
   padding-inline: 24px 4px;
 }
 
 #protection-settings:dir(rtl) {
-  background-position-x: right 0px;
+  background-position-x: right;
 }
 
 #protection-settings:hover,
 #protection-settings:focus {
   text-decoration: underline;
   color: var(--hover-grey-link);
   fill: var(--hover-grey-link);
 }
@@ -832,38 +832,50 @@ label[for="tab-cryptominer"]:hover ~ #hi
   flex-direction: column;
   border-radius: 4px;
   text-align: center;
   margin-inline-end: 15px;
 }
 
 .monitor-block a {
   color: #FFFFFF;
-  padding: 19px 0px;
+  padding: 19px 0;
 }
 
 .monitor-block a:hover {
   text-decoration: none;
 }
 
 .email {
   background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
   grid-column: 1;
 }
 
+.email:dir(rtl) {
+  background: linear-gradient(197.67deg, #AB71FF 0%, #9059FF 100%);
+}
+
 .breaches {
   background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
   grid-column: 2;
 }
 
+.breaches:dir(rtl) {
+  background: linear-gradient(197.67deg, #9059FF 0%, #7542E5 100%)
+}
+
 .passwords {
   background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
   grid-column: 3;
 }
 
+.passwords:dir(rtl) {
+  background: linear-gradient(197.67deg, #7542E5 0%, #592ACB 100%)
+}
+
 .monitor-stat {
   display: flex;
   font-size: 1.75em;
   font-weight: bold;
   margin-block-end: 5px;
   word-break: break-all;
   justify-content: center;
   flex-wrap: wrap;
@@ -974,9 +986,8 @@ label[for="tab-cryptominer"]:hover ~ #hi
     background-position-x: right -300px;
   }
 
   100% {
     background-position-x: right 700px;
     opacity: 0.02;
   }
 }
-