.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 {
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;
}
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;
}
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;
}
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;
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;
left: 35px;
}
-.toggle:checked + .toggle-btn:-moz-dir(rtl)::after {
+.toggle:checked + .toggle-btn:dir(rtl)::after {
right: 35px;
}