second part of syncing LCARStrek with Firefox 55 browser windows theme changes

[themes.git] / LCARStrek / browser / privatebrowsing / aboutPrivateBrowsing.css

diff --git a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
index bd3ee919ded35ac7afdd49274ff9ee420d5573d6..716415f5083e5cc7eac4d49684f8ffd0c26cc0a1 100644 (file)
--- a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
+++ b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
@@ -5,14 +5,7 @@
 @import url("chrome://global/skin/in-content/info-pages.css");
 
 :root {
-  --color-grey-lightest: #FFCF00;
   --color-grey: #A09090;
-
-  --color-blue: #336699;
-  --color-blue-dark: #FFCF00;
-  --color-blue-darker: #6000CF;
-
-  --icon-margin: 64px;
 }
 
 html.private {
@@ -21,36 +14,20 @@ html.private {
   --in-content-page-background: #000000;
 }
 
-body {
-  padding: 40px;
-}
-
 a:link {
-  color: var(--color-blue);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--color-blue-dark);
   text-decoration: underline;
 }
 
-a:hover:active {
-  color: var(--color-blue-darker);
-}
-
-a:visited {
-  color: var(--color-blue-darker);
-}
-
 .about-content-container {
   max-width: 780px;
 }
 
+.container {
+  max-width: 48em;
+}
+
 .section-main {
   margin-bottom: 48px;
-  -moz-margin-start: var(--icon-margin);
-  -moz-padding-start: 24px;
 }
 
 .section-main:last-child {
@@ -67,29 +44,27 @@ p {
 
 .list-row > ul > li {
   float: left;
-  width: 220px;
-  line-height: 1.5em;
-  -moz-margin-start: 1em;
+  width: 16em;
+  line-height: 2em;
+  margin-inline-start: 1em;
   margin-bottom: 0;
 }
 
-.list-row > ul > li:-moz-dir(rtl) {
+.list-row > ul > li:dir(rtl) {
   float: right;
 }
 
 .title {
   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
-  background-size: 64px;
-  background-position: left, center;
-  font-weight: lighter;
-  line-height: 1.5em;
-  min-height: 64px;
-  -moz-margin-start: 0;
-  -moz-padding-start: calc(var(--icon-margin) + 24px);
+  background-position: left center;
+  background-size: 2em;
+  line-height: 2em;
+  margin-inline-start: calc(-2em - 10px);
+  padding-inline-start: calc(2em + 10px);
 }
 
-.title:-moz-dir(rtl) {
-  background-position: right, center;
+.title:dir(rtl) {
+  background-position: right center;
 }
 
 .about-subheader {
@@ -97,15 +72,16 @@ p {
   align-items: center;
   font-size: 1.5em;
   font-weight: lighter;
-  min-height: 32px;
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
   background-repeat: no-repeat;
-  background-size: 32px;
-  -moz-margin-start: calc(var(--icon-margin) - 32px);
-  -moz-padding-start: 56px;
+  background-position: left center;
+  background-size: 1.5em;
+  line-height: 1.5em;
+  margin-inline-start: calc(-1.5em - 10px);
+  padding-inline-start: calc(1.5em + 10px);
 }
 
-.about-subheader:-moz-dir(rtl) {
+.about-subheader:dir(rtl) {
   background-position: right;
 }
 
@@ -114,20 +90,15 @@ p {
 }
 
 .about-info {
-  font-size: .875em;
+  font-size: .9em;
 }
 
 .tpTitle {
   margin-inline-end: 12px;
 }
 
-.private strong {
-  color: var(--color-grey-lightest);
-  font-weight: normal;
-}
-
 a.button {
-  padding: 5px 40px;
+  padding: 3px 20px;
   background-color: #C09070;
   color: #000000;
   border: 0px solid #C09070;
@@ -144,72 +115,62 @@ a.button:active {
   background-color: #FF9F00;
 }
 
+/**
+ * We want to hide the checkbox in lieu of the toggle-btn
+ * "slider toggle". We need to make the toggle keyboard
+ * focusable, however, which is not possible if it's
+ * display:none. We work around this by making the toggle
+ * invisible but still present in the display list, allowing
+ * it to receive keyboard events. When it is focused by keyboard,
+ * we use the -moz-focusring selector on the invisible checkbox
+ * to show a focus ring around the slider toggle.
+ */
+.toggle-input {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
-  min-width: 60px;
-  height: 24px;
-  border-radius: 24px;
+  min-width: 42px;
+  height: 26px;
+  border-radius: 13px;
   background-color: var(--color-grey);
-  border: 0px var(--color-grey) solid;
-  padding: 2px;
+  padding: 1px;
 }
 
-.toggle + .toggle-btn::after,
-.toggle + .toggle-btn::before {
+.toggle + .toggle-btn::after {
   position: relative;
   display: block;
   content: "";
-  width: 19px;
+  width: 24px;
   height: 100%;
-}
-
-.toggle + .toggle-btn::after {
   left: 0;
-/*  box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
-              0 1px 0 hsla(0, 0%, 0%, .2);*/
   border-radius: 50%;
   background: #000000;
   transition: left .2s ease;
 }
 
-.toggle + .toggle-btn::before {
-  float: left;
-  left: 9px;
-  visibility: hidden;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
-}
-
-.toggle + .toggle-btn:-moz-dir(rtl)::after {
+.toggle + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
-.toggle + .toggle-btn:-moz-dir(rtl)::before {
-  float: right;
-  left: auto;
-  right: 9px;
-}
-
 .toggle:checked + .toggle-btn {
   background: #008484;
-  border: 0px solid #008484;
 }
 
 .toggle:checked + .toggle-btn::after {
-  left: 35px;
-}
-
-.toggle:checked + .toggle-btn:-moz-dir(rtl)::after {
-  right: 35px;
+  left: 16px;
 }
 
-.toggle:checked + .toggle-btn::before {
-  visibility: visible;
+.toggle:checked + .toggle-btn:dir(rtl)::after {
+  left: auto;
+  right: 16px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {