Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak the loadingBar CSS to better support RTL locales

Browse Source 
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
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/viewer.css
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(