Bug 1378799 - Adjust the tracking protection toggle colors and dimensions for Photon. r=nhnt11
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 20 Jul 2017 17:31:37 +0200
changeset 419167 46246d4a56a1a0448ce9b5d19d2d40acf9f7e888
parent 419166 b1e6304c5427104fdd351b0c0960e803d3b3cda0
child 419168 6ebe13962237030e0965bb65f0848026c3f7e097
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1378799
milestone56.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 1378799 - Adjust the tracking protection toggle colors and dimensions for Photon. r=nhnt11 MozReview-Commit-ID: G2XnkUuKz9r
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -1,16 +1,16 @@
 /* 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 url("chrome://global/skin/in-content/info-pages.css");
 
 :root {
-  --color-grey: #b1b1b1;
+  --color-grey: #505473;
 }
 
 html.private {
   --in-content-page-color: white;
   --in-content-text-color: white;
   --in-content-page-background: #25003e;
 }
 
@@ -117,47 +117,48 @@ a.button {
   width: 0;
   pointer-events: none;
   position: absolute;
 }
 
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
-  min-width: 42px;
-  height: 26px;
+  min-width: 48px;
+  height: 27px;
   border-radius: 13px;
   background-color: var(--color-grey);
-  padding: 1px;
+  border: 1px solid #202340;
 }
 
 .toggle + .toggle-btn::after {
   position: relative;
   display: block;
   content: "";
-  width: 24px;
+  width: 25px;
   height: 100%;
   left: 0;
   border-radius: 50%;
   background: white;
   transition: left .2s ease;
 }
 
 .toggle + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
 .toggle:checked + .toggle-btn {
   background: #16da00;
+  border-color: #0CA700;
 }
 
 .toggle:checked + .toggle-btn::after {
-  left: 16px;
+  left: 21px;
 }
 
 .toggle:checked + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 16px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {