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 a617056961d8189fd640ba27e759776b42ea1aa3..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;
-  margin-inline-start: var(--icon-margin);
-  padding-inline-start: 24px;
 }
 
 .section-main:last-child {
@@ -67,8 +44,8 @@ p {
 
 .list-row > ul > li {
   float: left;
-  width: 220px;
-  line-height: 1.5em;
+  width: 16em;
+  line-height: 2em;
   margin-inline-start: 1em;
   margin-bottom: 0;
 }
@@ -79,17 +56,15 @@ p {
 
 .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;
-  margin-inline-start: 0;
-  padding-inline-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:dir(rtl) {
-  background-position: right, center;
+  background-position: right center;
 }
 
 .about-subheader {
@@ -97,12 +72,13 @@ 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;
-  margin-inline-start: calc(var(--icon-margin) - 32px);
-  padding-inline-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:dir(rtl) {
@@ -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;
@@ -164,69 +135,42 @@ a.button:active {
 .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:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
-.toggle + .toggle-btn: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;
+  left: 16px;
 }
 
 .toggle:checked + .toggle-btn:dir(rtl)::after {
-  right: 35px;
-}
-
-.toggle:checked + .toggle-btn::before {
-  visibility: visible;
+  left: auto;
+  right: 16px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {