Bug 1412789 - fix tracking protection slider position in rtl r?johannh
Use logical properties for offset and float to avoid rtl-specific rules.
Note: background-position and transition property don't support logical
properties, so those rtl-specific rules must be kept for now.
MozReview-Commit-ID: BEiAcufOYAX
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -35,27 +35,23 @@ p {
line-height: 1.5em;
}
.list-row {
overflow: auto;
}
.list-row > ul > li {
- float: left;
+ float: inline-start;
width: 16em;
line-height: 2em;
margin-inline-start: 1em;
margin-bottom: 0;
}
-.list-row > ul > li:dir(rtl) {
- float: right;
-}
-
.title {
background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
background-position: left center;
background-size: 2em;
line-height: 2em;
margin-inline-start: calc(-2em - 10px);
padding-inline-start: calc(2em + 10px);
}
@@ -148,21 +144,16 @@ a.button {
}
.toggle:checked + .toggle-btn {
background: #16da00;
border-color: #0CA700;
}
.toggle:checked + .toggle-btn::after {
- left: 21px;
-}
-
-.toggle:checked + .toggle-btn:dir(rtl)::after {
- left: auto;
- right: 16px;
+ offset-inline-start: 21px;
}
.toggle:-moz-focusring + .toggle-btn {
outline: 2px solid rgba(0, 149, 221, 0.5);
outline-offset: 1px;
-moz-outline-radius: 2px;
}