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:
Jonas Jenwald 2023-04-07 13:36:06 +02:00
parent 08c8d310d3
commit 6419e59036

View File

@ -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(