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

Remove transition effects from toolbar buttons/fields

Browse Source 
While Firefox originally used transition effects for browser UI toolbar buttons, that was removed years ago in https://bugzilla.mozilla.org/show_bug.cgi?id=1393057

Since the PDF.js viewer toolbar transitions were likely based on the Firefox ones, it seems reasonable that these transition effects are removed from PDF.js as well. Besides removing a bunch of CSS, this also makes the toolbar feel ever so slightly more "snappy" without these delays on mouse interaction.

(In order to make it more feasible to modernize/improve the viewer UI, trying to clean-up/simplify existing rules iteratively seems like the most reasonble way to make any progress here w.r.t. being able to test/review things.)
This commit is contained in:
Jonas Jenwald 2020-03-11 13:52:26 +01:00
parent af8d0b9597
commit 1dd617e091
1 changed files with 0 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/viewer.css
View File

@ -546,10 +546,6 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
@ -608,9 +604,6 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
padding: 12px 0;
margin: 1px 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
transition-property: padding;
transition-duration: 10ms;
transition-timing-function: ease;
}
.toolbarButton,
@ -627,9 +620,6 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
user-select: none;
/* Opera does not support user-select, use <... unselectable="on"> instead */
cursor: default;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
}
html[dir='ltr'] .toolbarButton,
@ -669,9 +659,6 @@ html[dir='rtl'] .dropdownToolbarButton {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 10ms;
transition-timing-function: linear;
}
.toolbarButton.toggled,
@ -683,9 +670,6 @@ html[dir='rtl'] .dropdownToolbarButton {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
transition-property: background-color, border-color, box-shadow;
transition-duration: 10ms;
transition-timing-function: linear;
}
.toolbarButton.toggled:hover:active,
@ -1041,9 +1025,6 @@ html[dir='rtl'] .verticalToolbarSeparator {
font-size: 12px;
line-height: 14px;
outline-style: none;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
}
.toolbarField[type=checkbox] {