Merge pull request #16261 from Snuffleupagus/loadingBar-rtl

Tweak the `loadingBar` CSS to better support RTL locales
This commit is contained in:
Jonas Jenwald 2023-04-08 20:17:09 +02:00 committed by GitHub
commit c95a09047a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -397,10 +397,10 @@ body {
#loadingBar .progress { #loadingBar .progress {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
transform: scaleX(var(--progressBar-percent)); transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0; transform-origin: calc(50% - 50% * var(--dir-factor)) 0;
height: 100%; height: 100%;
background-color: var(--progressBar-color); background-color: var(--progressBar-color);
overflow: hidden; overflow: hidden;
@ -409,7 +409,7 @@ body {
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
0% { 0% {
transform: translateX(-142px); transform: translateX(calc(-142px * var(--dir-factor)));
} }
100% { 100% {
transform: translateX(0); transform: translateX(0);
@ -425,7 +425,7 @@ body {
#loadingBar.indeterminate .progress .glimmer { #loadingBar.indeterminate .progress .glimmer {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
height: 100%; height: 100%;
width: calc(100% + 150px); width: calc(100% + 150px);
background: repeating-linear-gradient( background: repeating-linear-gradient(