Tweak the loadingBar
CSS to better support RTL locales
This effectively implements some of the changes from https://phabricator.services.mozilla.com/D170496, but using our existing "direction aware" CSS-variable to limit the amount of code changes needed.
This commit is contained in:
parent
08c8d310d3
commit
6419e59036
@ -397,10 +397,10 @@ body {
|
||||
#loadingBar .progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
transform: scaleX(var(--progressBar-percent));
|
||||
transform-origin: 0 0;
|
||||
transform-origin: calc(50% - 50% * var(--dir-factor)) 0;
|
||||
height: 100%;
|
||||
background-color: var(--progressBar-color);
|
||||
overflow: hidden;
|
||||
@ -409,7 +409,7 @@ body {
|
||||
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
transform: translateX(-142px);
|
||||
transform: translateX(calc(-142px * var(--dir-factor)));
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
@ -425,7 +425,7 @@ body {
|
||||
#loadingBar.indeterminate .progress .glimmer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: calc(100% + 150px);
|
||||
background: repeating-linear-gradient(
|
||||
|
Loading…
Reference in New Issue
Block a user