add missing messebnger stylesheets

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

diff --git a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
index bd3ee919ded35ac7afdd49274ff9ee420d5573d6..a617056961d8189fd640ba27e759776b42ea1aa3 100644 (file)
--- a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
+++ b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
@@ -49,8 +49,8 @@ a:visited {
 
 .section-main {
   margin-bottom: 48px;
-  -moz-margin-start: var(--icon-margin);
-  -moz-padding-start: 24px;
+  margin-inline-start: var(--icon-margin);
+  padding-inline-start: 24px;
 }
 
 .section-main:last-child {
@@ -69,11 +69,11 @@ p {
   float: left;
   width: 220px;
   line-height: 1.5em;
-  -moz-margin-start: 1em;
+  margin-inline-start: 1em;
   margin-bottom: 0;
 }
 
-.list-row > ul > li:-moz-dir(rtl) {
+.list-row > ul > li:dir(rtl) {
   float: right;
 }
 
@@ -84,11 +84,11 @@ p {
   font-weight: lighter;
   line-height: 1.5em;
   min-height: 64px;
-  -moz-margin-start: 0;
-  -moz-padding-start: calc(var(--icon-margin) + 24px);
+  margin-inline-start: 0;
+  padding-inline-start: calc(var(--icon-margin) + 24px);
 }
 
-.title:-moz-dir(rtl) {
+.title:dir(rtl) {
   background-position: right, center;
 }
 
@@ -101,11 +101,11 @@ p {
   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;
+  margin-inline-start: calc(var(--icon-margin) - 32px);
+  padding-inline-start: 56px;
 }
 
-.about-subheader:-moz-dir(rtl) {
+.about-subheader:dir(rtl) {
   background-position: right;
 }
 
@@ -144,6 +144,23 @@ 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;
@@ -183,13 +200,13 @@ a.button:active {
   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 {
+.toggle + .toggle-btn:dir(rtl)::before {
   float: right;
   left: auto;
   right: 9px;
@@ -204,7 +221,7 @@ a.button:active {
   left: 35px;
 }
 
-.toggle:checked + .toggle-btn:-moz-dir(rtl)::after {
+.toggle:checked + .toggle-btn:dir(rtl)::after {
   right: 35px;
 }