Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
67c361b2f4
pdf.js/web/viewer.css

1887 lines
43 KiB
CSS
Raw Normal View History

Move text_layer_builder and pdf_viewer styles out
2014-10-01 00:48:29 +09:00
/* Copyright 2014 Mozilla Foundation
Change to the Apache v2 license.
2012-09-01 07:48:21 +09:00
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Move text_layer_builder and pdf_viewer styles out
2014-10-01 00:48:29 +09:00
@import url(pdf_viewer.css);
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
:root {
--sidebar-width: 200px;
Add support for CSS variables using the `PostCSS CSS Variables` package (issue 11462) Having thought *briefly* about using `css-vars-ponyfill`, I'm no longer convinced that it'd be a good idea. The reason is that if we actually want to properly support CSS variables, then that functionality should be available in *all* of our CSS files. Note in particular the `pdf_viewer.css` file that's built as part of the `COMPONENTS` target, in which case I really cannot see how a rewrite-at-the-client solution would ever be guaranteed to always work correctly and without accidentally touching other CSS in the surrounding application. All-in-all, simply re-writing the CSS variables at build-time seems much easier and is thus the approach taken in this patch; courtesy of https://github.com/MadLittleMods/postcss-css-variables By using its `preserve` option, the built files will thus include *both* a fallback and a modern `var(...)` format[1]. As a proof-of-concept this patch removes a couple of manually added fallback values, and converts an additional sidebar related property to use a CSS variable. --- [1] Comparing the `master` branch with this patch, when using `gulp generic`, produces the following diff for the built `web/viewer.css` file: ```diff @@ -408,6 +408,7 @@ :root { --sidebar-width: 200px; + --sidebar-transition-duration: 200ms; } * { @@ -550,27 +551,28 @@ position: absolute; top: 32px; bottom: 0; - width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility - with older browsers that lack support for CSS variables. */ + width: 200px; width: var(--sidebar-width); visibility: hidden; z-index: 100; border-top: 1px solid rgba(51, 51, 51, 1); -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } html[dir='ltr'] #sidebarContainer { -webkit-transition-property: left; transition-property: left; - left: -200px; + left: calc(-1 * 200px); left: calc(-1 * var(--sidebar-width)); } html[dir='rtl'] #sidebarContainer { -webkit-transition-property: right; transition-property: right; - right: -200px; + right: calc(-1 * 200px); right: calc(-1 * var(--sidebar-width)); } @@ -640,6 +642,8 @@ #viewerContainer:not(.pdfPresentationMode) { -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } ```
2020-02-05 06:28:38 +09:00
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
* {
padding: 0;
margin: 0;
}
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
html {
height: 100%;
Fix insertion of blank pages during printing due to non-matching page sizes
2016-02-11 06:10:03 +09:00
width: 100%;
Fix typo in viewer.css
2013-12-15 07:01:49 +09:00
/* Font size is needed to make the activity bar the correct size. */
Fix the B2G viewer and enable bot preview.
2013-10-10 07:04:58 +09:00
font-size: 10px;
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
body {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
height: 100%;
Fix insertion of blank pages during printing due to non-matching page sizes
2016-02-11 06:10:03 +09:00
width: 100%;
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(64, 64, 64, 1);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-image: url(images/texture.png);
Switch to using message-box for the body and form elements in the UI of PDF.js. This will use the system's native UI font for each platform as well as fix the current inconsistency between the font of the text label for total page count and the text inside of the input element for current page number.
2012-06-13 18:15:31 +09:00
}
body,
input,
Added |button| to the list of elements that message-box should be applied to.
2012-06-13 18:27:22 +09:00
button,
Switch to using message-box for the body and form elements in the UI of PDF.js. This will use the system's native UI font for each platform as well as fix the current inconsistency between the font of the text label for total page count and the text inside of the input element for current page number.
2012-06-13 18:15:31 +09:00
select {
message-box needs to use the font property, not the font-family property.
2012-06-14 02:47:46 +09:00
font: message-box;
Removes button outline as visible in Chrome
2014-01-27 19:57:33 +09:00
outline: none;
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
Fix the error box.
2012-04-26 09:20:13 +09:00
.hidden {
Secondary toolbar
2013-09-05 06:48:31 +09:00
display: none !important;
Fix the error box.
2012-04-26 09:20:13 +09:00
}
Use 'hidden' instead of display: none
2011-10-19 04:40:59 +09:00
[hidden] {
Hide the browse bar for the ff extension.
2012-01-25 08:13:50 +09:00
display: none !important;
Use 'hidden' instead of display: none
2011-10-19 04:40:59 +09:00
}
Add a new `pdfjs.enablePermissions` preference, off by default, to allow the PDF documents to disable copying in the viewer (bug 792816) *Please note:* Most of the necessary API work was done in PR 10033, and the only remaining thing to do here was to implement it in the viewer. The new preference should thus allow e.g. enterprise users to disable copying in the viewer, for PDF documents whose permissions specify that. In order to simplify things the "copy"-permission was implemented using CSS, as suggested in https://bugzilla.mozilla.org/show_bug.cgi?id=792816#c55, which should hopefully suffice.[1] The advantage of this approach, as opposed to e.g. disabling the `textLayer` completely, is first of all that it ensures that searching still works correctly even in copy-protected documents. Secondly this also greatly simplifies the overall implementation, since it doesn't require a lot of code for something that's disabled by default. --- [1] As the discussion in the bug shows, this kind of copy-protection is not very strong and is also generally easy to remove/circumvent in various ways. Hence a simple solution, targeting "regular"-users rather than "power"-users is hopefully deemed acceptable here.
2020-04-08 23:53:31 +09:00
.pdfViewer.enablePermissions .textLayer > span {
user-select: none !important;
cursor: not-allowed;
}
Preface all "fullscreen" CSS rules with a |pdfPresentationMode| class, and add it to the |viewerContainer| while Presentation Mode is active
2015-02-04 22:10:45 +09:00
#viewerContainer.pdfPresentationMode:-ms-fullscreen {
Squashed: Added basic support for presentationMode in IE11
2013-09-11 04:40:14 +09:00
top: 0px !important;
Fixed review notes: Adding specificity and removing redundant declaration
2013-09-11 05:17:40 +09:00
overflow: hidden !important;
Squashed: Added basic support for presentationMode in IE11
2013-09-11 04:40:14 +09:00
}
Preface all "fullscreen" CSS rules with a |pdfPresentationMode| class, and add it to the |viewerContainer| while Presentation Mode is active
2015-02-04 22:10:45 +09:00
#viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
background-color: rgba(0, 0, 0, 1);
Squashed: Added basic support for presentationMode in IE11
2013-09-11 04:40:14 +09:00
}
Preface all "fullscreen" CSS rules with a |pdfPresentationMode| class, and add it to the |viewerContainer| while Presentation Mode is active
2015-02-04 22:10:45 +09:00
#viewerContainer.pdfPresentationMode:fullscreen {
Initial support for Presentation Mode
2012-07-31 00:12:49 +09:00
top: 0px;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border-top: 2px solid rgba(0, 0, 0, 0);
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
background-color: rgba(0, 0, 0, 1);
Initial support for Presentation Mode
2012-07-31 00:12:49 +09:00
width: 100%;
height: 100%;
Hides cursor in presentation mode
2012-10-11 09:32:48 +09:00
overflow: hidden;
cursor: none;
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
Squashed: Added basic support for presentationMode in IE11
2013-09-11 04:40:14 +09:00
}
Preface all "fullscreen" CSS rules with a |pdfPresentationMode| class, and add it to the |viewerContainer| while Presentation Mode is active
2015-02-04 22:10:45 +09:00
.pdfPresentationMode:fullscreen a:not(.internalLink) {
Tweak external links in fullscreen mode - follow up on #2712
2013-03-26 01:50:49 +09:00
display: none;
}
Use `span` instead of `div` in the text layer This improves copy/pasting text content since it reduces the amount of unnecessary newlines.
2018-11-18 23:54:08 +09:00
.pdfPresentationMode:fullscreen .textLayer > span {
Preface all "fullscreen" CSS rules with a |pdfPresentationMode| class, and add it to the |viewerContainer| while Presentation Mode is active
2015-02-04 22:10:45 +09:00
cursor: none;
}
.pdfPresentationMode.pdfPresentationModeControls > *,
Use `span` instead of `div` in the text layer This improves copy/pasting text content since it reduces the amount of unnecessary newlines.
2018-11-18 23:54:08 +09:00
.pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
Hides cursor in presentation mode
2012-10-11 09:32:48 +09:00
cursor: default;
Initial support for Presentation Mode
2012-07-31 00:12:49 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#outerContainer {
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
width: 100%;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
height: 100%;
Fix the B2G viewer and enable bot preview.
2013-10-10 07:04:58 +09:00
position: relative;
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#sidebarContainer {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
position: absolute;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
top: 32px;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
bottom: 0;
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
width: var(--sidebar-width);
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
visibility: hidden;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
z-index: 100;
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
border-top: 1px solid rgba(51, 51, 51, 1);
Add support for CSS variables using the `PostCSS CSS Variables` package (issue 11462) Having thought *briefly* about using `css-vars-ponyfill`, I'm no longer convinced that it'd be a good idea. The reason is that if we actually want to properly support CSS variables, then that functionality should be available in *all* of our CSS files. Note in particular the `pdf_viewer.css` file that's built as part of the `COMPONENTS` target, in which case I really cannot see how a rewrite-at-the-client solution would ever be guaranteed to always work correctly and without accidentally touching other CSS in the surrounding application. All-in-all, simply re-writing the CSS variables at build-time seems much easier and is thus the approach taken in this patch; courtesy of https://github.com/MadLittleMods/postcss-css-variables By using its `preserve` option, the built files will thus include *both* a fallback and a modern `var(...)` format[1]. As a proof-of-concept this patch removes a couple of manually added fallback values, and converts an additional sidebar related property to use a CSS variable. --- [1] Comparing the `master` branch with this patch, when using `gulp generic`, produces the following diff for the built `web/viewer.css` file: ```diff @@ -408,6 +408,7 @@ :root { --sidebar-width: 200px; + --sidebar-transition-duration: 200ms; } * { @@ -550,27 +551,28 @@ position: absolute; top: 32px; bottom: 0; - width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility - with older browsers that lack support for CSS variables. */ + width: 200px; width: var(--sidebar-width); visibility: hidden; z-index: 100; border-top: 1px solid rgba(51, 51, 51, 1); -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } html[dir='ltr'] #sidebarContainer { -webkit-transition-property: left; transition-property: left; - left: -200px; + left: calc(-1 * 200px); left: calc(-1 * var(--sidebar-width)); } html[dir='rtl'] #sidebarContainer { -webkit-transition-property: right; transition-property: right; - right: -200px; + right: calc(-1 * 200px); right: calc(-1 * var(--sidebar-width)); } @@ -640,6 +642,8 @@ #viewerContainer:not(.pdfPresentationMode) { -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } ```
2020-02-05 06:28:38 +09:00
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] #sidebarContainer {
added missing css vendor prefixes and reordered some properties according to cascade
2012-06-11 18:03:15 +09:00
transition-property: left;
Update the left/right CSS calculation for the `sidebarContainer` HTML element to enable IE11 compatibility As gross as this hack is, it nonetheless seem necessary to allow using CSS variables; see also https://github.com/mozilla/pdf.js/pull/11567#issuecomment-582166160
2020-02-05 08:34:44 +09:00
left: calc(0px - var(--sidebar-width));
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
html[dir='rtl'] #sidebarContainer {
added missing css vendor prefixes and reordered some properties according to cascade
2012-06-11 18:03:15 +09:00
transition-property: right;
Update the left/right CSS calculation for the `sidebarContainer` HTML element to enable IE11 compatibility As gross as this hack is, it nonetheless seem necessary to allow using CSS variables; see also https://github.com/mozilla/pdf.js/pull/11567#issuecomment-582166160
2020-02-05 08:34:44 +09:00
right: calc(0px - var(--sidebar-width));
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
.loadingInProgress #sidebarContainer {
top: 36px;
}
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
#outerContainer.sidebarResizing #sidebarContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
/* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
#outerContainer.sidebarMoving #sidebarContainer,
#outerContainer.sidebarOpen #sidebarContainer {
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
visibility: visible;
Merge remote-tracking branch 'mozilla/master' into l10n Conflicts: web/viewer.css web/viewer.html
2012-05-02 07:19:02 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
Move sidebar open class.
2012-04-26 05:46:17 +09:00
left: 0px;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
Fixes rtl languages
2012-05-02 07:08:30 +09:00
right: 0px;
Add "bookmark" icon; and fixing scale/ current page number issues
2011-10-15 11:05:57 +09:00
}
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
#mainContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
Don't hide the download/print buttons when view is small.
2013-02-26 09:53:54 +09:00
min-width: 320px;
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
#sidebarContent {
Fix thumbnails/outline.
2012-04-26 04:14:09 +09:00
top: 32px;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
bottom: 0;
overflow: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
position: absolute;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
width: 100%;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.1);
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] #sidebarContent {
left: 0;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
html[dir='rtl'] #sidebarContent {
right: 0;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
Fixing font loading hack for IE9.. and some styles
2011-08-29 05:10:14 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#viewerContainer {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
overflow: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
position: absolute;
top: 32px;
right: 0;
bottom: 0;
left: 0;
Allow scrolling by keyboard in Chrome/Opera Set "tabindex" attribute to allow focus; Added "outline: none" to prevent focus ring from appearing. Fixes #3443
2013-07-06 22:37:03 +09:00
outline: none;
Fix regression causing the pages to be offset horizontally in Presentation Mode (PR 8993 follow-up) This is a regression from PR 8993; it causes the pages to be offset horizontally in Presentation Mode, if and only if the sidebar is currently open when the user triggers Presentation Mode. Please note that while this doesn't seem to affect Firefox, both Chrome and IE are however affected. Interestingly enough, despite the Chrome extension being affected as well, I cannot find any issue filed about this. (Either Presentation Mode isn't used much at all, or users don't open the sidebar before entering Presentation Mode.)
2018-06-14 23:09:22 +09:00
}
#viewerContainer:not(.pdfPresentationMode) {
Add support for CSS variables using the `PostCSS CSS Variables` package (issue 11462) Having thought *briefly* about using `css-vars-ponyfill`, I'm no longer convinced that it'd be a good idea. The reason is that if we actually want to properly support CSS variables, then that functionality should be available in *all* of our CSS files. Note in particular the `pdf_viewer.css` file that's built as part of the `COMPONENTS` target, in which case I really cannot see how a rewrite-at-the-client solution would ever be guaranteed to always work correctly and without accidentally touching other CSS in the surrounding application. All-in-all, simply re-writing the CSS variables at build-time seems much easier and is thus the approach taken in this patch; courtesy of https://github.com/MadLittleMods/postcss-css-variables By using its `preserve` option, the built files will thus include *both* a fallback and a modern `var(...)` format[1]. As a proof-of-concept this patch removes a couple of manually added fallback values, and converts an additional sidebar related property to use a CSS variable. --- [1] Comparing the `master` branch with this patch, when using `gulp generic`, produces the following diff for the built `web/viewer.css` file: ```diff @@ -408,6 +408,7 @@ :root { --sidebar-width: 200px; + --sidebar-transition-duration: 200ms; } * { @@ -550,27 +551,28 @@ position: absolute; top: 32px; bottom: 0; - width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility - with older browsers that lack support for CSS variables. */ + width: 200px; width: var(--sidebar-width); visibility: hidden; z-index: 100; border-top: 1px solid rgba(51, 51, 51, 1); -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } html[dir='ltr'] #sidebarContainer { -webkit-transition-property: left; transition-property: left; - left: -200px; + left: calc(-1 * 200px); left: calc(-1 * var(--sidebar-width)); } html[dir='rtl'] #sidebarContainer { -webkit-transition-property: right; transition-property: right; - right: -200px; + right: calc(-1 * 200px); right: calc(-1 * var(--sidebar-width)); } @@ -640,6 +642,8 @@ #viewerContainer:not(.pdfPresentationMode) { -webkit-transition-duration: 200ms; transition-duration: 200ms; + -webkit-transition-duration: var(--sidebar-transition-duration); + transition-duration: var(--sidebar-transition-duration); -webkit-transition-timing-function: ease; transition-timing-function: ease; } ```
2020-02-05 06:28:38 +09:00
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
RTL CSS improvements
2014-01-22 06:56:19 +09:00
html[dir='ltr'] #viewerContainer {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
html[dir='rtl'] #viewerContainer {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
#outerContainer.sidebarResizing #viewerContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
}
Fix regression causing the pages to be offset horizontally in Presentation Mode (PR 8993 follow-up) This is a regression from PR 8993; it causes the pages to be offset horizontally in Presentation Mode, if and only if the sidebar is currently open when the user triggers Presentation Mode. Please note that while this doesn't seem to affect Firefox, both Chrome and IE are however affected. Interestingly enough, despite the Chrome extension being affected as well, I cannot find any issue filed about this. (Either Presentation Mode isn't used much at all, or users don't open the sidebar before entering Presentation Mode.)
2018-06-14 23:09:22 +09:00
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
transition-property: left;
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
left: var(--sidebar-width);
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
}
Fix regression causing the pages to be offset horizontally in Presentation Mode (PR 8993 follow-up) This is a regression from PR 8993; it causes the pages to be offset horizontally in Presentation Mode, if and only if the sidebar is currently open when the user triggers Presentation Mode. Please note that while this doesn't seem to affect Firefox, both Chrome and IE are however affected. Interestingly enough, despite the Chrome extension being affected as well, I cannot find any issue filed about this. (Either Presentation Mode isn't used much at all, or users don't open the sidebar before entering Presentation Mode.)
2018-06-14 23:09:22 +09:00
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
transition-property: right;
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
right: var(--sidebar-width);
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbar {
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
position: relative;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
left: 0;
right: 0;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
z-index: 9999;
cursor: default;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#toolbarContainer {
width: 100%;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#toolbarSidebar {
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
width: 100%;
Minor css tweaks for small viewer and aligning borders.
2012-10-30 06:35:07 +09:00
height: 32px;
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(66, 66, 66, 1); /* fallback */
added missing css vendor prefixes and reordered some properties according to cascade
2012-06-11 18:03:15 +09:00
background-image: url(images/texture.png),
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
html[dir='ltr'] #toolbarSidebar {
Minor css tweaks for small viewer and aligning borders.
2012-10-30 06:35:07 +09:00
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
RTL CSS improvements
2014-01-22 06:56:19 +09:00
html[dir='rtl'] #toolbarSidebar {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
#sidebarResizer {
position: absolute;
top: 0;
bottom: 0;
width: 6px;
z-index: 200;
cursor: ew-resize;
}
html[dir='ltr'] #sidebarResizer {
right: -6px;
}
html[dir='rtl'] #sidebarResizer {
left: -6px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
#toolbarContainer, .findbar, .secondaryToolbar {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
position: relative;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
height: 32px;
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(71, 71, 71, 1); /* fallback */
added missing css vendor prefixes and reordered some properties according to cascade
2012-06-11 18:03:15 +09:00
background-image: url(images/texture.png),
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
Separate js and css from the test.html file
2011-05-26 23:02:52 +09:00
}
RTL CSS improvements
2014-01-22 06:56:19 +09:00
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
RTL CSS improvements
2014-01-22 06:56:19 +09:00
}
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
#toolbarViewer {
height: 32px;
}
#loadingBar {
position: relative;
width: 100%;
Reduce load progress bar’s height to 4 pixels
2014-08-12 13:09:38 +09:00
height: 4px;
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
background-color: rgba(51, 51, 51, 1);
border-bottom: 1px solid rgba(51, 51, 51, 1);
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
}
#loadingBar .progress {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
background-color: rgba(221, 221, 221, 1);
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
overflow: hidden;
transition: width 200ms;
}
@keyframes progressIndeterminate {
Create a new indeterminate loading bar animation for the default viewer This patch contains an alternative solution (see the referenced PRs in 4718), in order for the indeterminate loading bar to have a consistent speed regardless of width. Fixes 4718.
2015-11-01 22:19:59 +09:00
0% { left: -142px; }
100% { left: 0; }
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
}
#loadingBar .progress.indeterminate {
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
background-color: rgba(153, 153, 153, 1);
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
transition: none;
}
Create a new indeterminate loading bar animation for the default viewer This patch contains an alternative solution (see the referenced PRs in 4718), in order for the indeterminate loading bar to have a consistent speed regardless of width. Fixes 4718.
2015-11-01 22:19:59 +09:00
#loadingBar .progress.indeterminate .glimmer {
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
position: absolute;
top: 0;
left: 0;
height: 100%;
Create a new indeterminate loading bar animation for the default viewer This patch contains an alternative solution (see the referenced PRs in 4718), in order for the indeterminate loading bar to have a consistent speed regardless of width. Fixes 4718.
2015-11-01 22:19:59 +09:00
width: calc(100% + 150px);
background: repeating-linear-gradient(135deg,
Convert all three-digit HEX colors to RGBA colors
2019-12-26 00:16:13 +09:00
rgba(187, 187, 187, 1) 0, rgba(153, 153, 153, 1) 5px,
rgba(153, 153, 153, 1) 45px, rgba(221, 221, 221, 1) 55px,
rgba(221, 221, 221, 1) 95px, rgba(187, 187, 187, 1) 100px);
Create a new indeterminate loading bar animation for the default viewer This patch contains an alternative solution (see the referenced PRs in 4718), in order for the indeterminate loading bar to have a consistent speed regardless of width. Fixes 4718.
2015-11-01 22:19:59 +09:00
animation: progressIndeterminate 950ms linear infinite;
Implement progressive loading of PDFs
2013-02-07 08:19:29 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.findbar, .secondaryToolbar {
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
top: 32px;
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
position: absolute;
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
z-index: 10000;
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
height: auto;
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
min-width: 16px;
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
padding: 0px 6px 0px 6px;
margin: 4px 2px 4px 2px;
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(217, 217, 217, 1);
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
font-size: 12px;
line-height: 14px;
text-align: left;
Update the find bar ui status.
2012-09-29 03:18:45 +09:00
cursor: default;
}
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
.findbar {
min-width: 300px;
}
.findbar > div {
height: 32px;
}
Viewer: consistently wrap find bar elements for small screen sizes This patch ensures that the find bar is not extended to the window width when element wrapping occurs on small screens.
2017-03-09 07:54:57 +09:00
.findbar.wrapContainers > div {
clear: both;
}
.findbar.wrapContainers > div#findbarMessageContainer {
height: auto;
}
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
html[dir='ltr'] .findbar {
left: 68px;
}
html[dir='rtl'] .findbar {
right: 68px;
}
Update the find bar ui status.
2012-09-29 03:18:45 +09:00
.findbar label {
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
Update the find bar ui status.
2012-09-29 03:18:45 +09:00
}
Viewer: replace find label with placeholder/tooltip This is common in the rest of the UI and helps us prevent responsiveness issues for different length strings in different locales.
2017-03-09 07:53:59 +09:00
#findInput {
width: 200px;
}
#findInput::-webkit-input-placeholder {
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(191, 191, 191, 1);
Viewer: replace find label with placeholder/tooltip This is common in the rest of the UI and helps us prevent responsiveness issues for different length strings in different locales.
2017-03-09 07:53:59 +09:00
}
#findInput::placeholder {
font-style: italic;
}
Change status attribute name.
2012-10-11 07:46:04 +09:00
#findInput[data-status="pending"] {
Delay extracting text until first find event.
2012-10-11 05:58:14 +09:00
background-image: url(images/loading-small.png);
background-repeat: no-repeat;
background-position: right;
}
Fix the placement of the findInput loading indicator in RTL locales Currently in RTL locales, the loading indicator is placed such that it is in the way when entring a search term. Hence this patch moves it to the other side of the input field to fix this.
2014-08-26 05:58:44 +09:00
html[dir='rtl'] #findInput[data-status="pending"] {
background-position: left;
}
Delay extracting text until first find event.
2012-10-11 05:58:14 +09:00
Secondary toolbar
2013-09-05 06:48:31 +09:00
.secondaryToolbar {
padding: 6px;
height: auto;
z-index: 30000;
}
html[dir='ltr'] .secondaryToolbar {
right: 4px;
}
html[dir='rtl'] .secondaryToolbar {
left: 4px;
}
#secondaryToolbarButtonContainer {
max-width: 200px;
max-height: 400px;
overflow-y: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
margin-bottom: -4px;
Secondary toolbar
2013-09-05 06:48:31 +09:00
}
Hide the Scroll/Spread mode buttons when the viewer is a `PDFSinglePageViewer` instance If the current viewer is a `PDFSinglePageViewer` instance the Scroll/Spread modes are no-ops, hence displaying buttons that do *nothing* when clicked will probably do very little besides confuse users.
2018-07-08 17:56:01 +09:00
#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
display: none !important;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.doorHanger,
.doorHangerRight {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border: 1px solid rgba(0, 0, 0, 0.5);
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.doorHanger:after, .doorHanger:before,
.doorHangerRight:after, .doorHangerRight:before {
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
bottom: 100%;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border: solid rgba(0, 0, 0, 0);
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.doorHanger:after,
.doorHangerRight:after {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border-bottom-color: rgba(82, 82, 82, 0.99);
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
border-width: 8px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.doorHanger:before,
.doorHangerRight:before {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border-bottom-color: rgba(0, 0, 0, 0.5);
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
border-width: 9px;
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
html[dir='ltr'] .doorHanger:after,
html[dir='rtl'] .doorHangerRight:after {
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
left: 13px;
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
margin-left: -8px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
html[dir='ltr'] .doorHanger:before,
html[dir='rtl'] .doorHangerRight:before {
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
left: 13px;
Add some door hanger styling for the find bar
2012-09-29 04:30:07 +09:00
margin-left: -9px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
html[dir='rtl'] .doorHanger:after,
html[dir='ltr'] .doorHangerRight:after {
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
right: 13px;
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
margin-right: -8px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
html[dir='rtl'] .doorHanger:before,
html[dir='ltr'] .doorHangerRight:before {
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
right: 13px;
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
margin-right: -9px;
}
Added find match counter
2014-07-16 23:39:34 +09:00
#findResultsCount {
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
background-color: rgba(217, 217, 217, 1);
color: rgba(82, 82, 82, 1);
Added find match counter
2014-07-16 23:39:34 +09:00
text-align: center;
padding: 3px 4px;
}
Update the find bar ui status.
2012-09-29 03:18:45 +09:00
#findMsg {
font-style: italic;
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
color: rgba(166, 183, 208, 1);
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
}
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
#findMsg:empty {
display: none;
}
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
[GENERIC viewer] Fix the background color of the findInput when the search term is not found When a search term isn't found, the background color of the findInput is supposed to change (to red). This is currently not working as intended, because the CSS rule is not being applied correctly. (It seems that this broke in PR 2208.) This patch also changes the background color to match the one used in the native Firefox findbar, since the old color seemed a bit too pink.
2014-11-02 02:08:13 +09:00
#findInput.notFound {
Convert all RGB colors to RGBA colors
2019-12-25 22:19:09 +09:00
background-color: rgba(255, 102, 102, 1);
Julian's html-search-bar work
2012-09-12 01:30:44 +09:00
}
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
#toolbarViewerMiddle {
position: absolute;
left: 50%;
transform: translateX(-50%);
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] #toolbarViewerLeft,
html[dir='rtl'] #toolbarViewerRight {
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
float: left;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] #toolbarViewerRight,
html[dir='rtl'] #toolbarViewerLeft {
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
float: right;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] #toolbarViewerLeft > *,
html[dir='ltr'] #toolbarViewerMiddle > *,
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
html[dir='ltr'] #toolbarViewerRight > *,
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
html[dir='ltr'] .findbar * {
Explicitly define layout of toolbar buttons Before: - Firefox's buttons looks OK - Chrome (quirks mode): Buttons were aligned to the bottom (too much) - Chrome (standards mode): Buttons were aligned to the top (too much) - Opera/IE/Safari: Like Chrome (standards): Buttons too high (Too high = Compare the other buttons to the rightmost button) After: - Firefox's button positions didn't change at all - All buttons are aligned at the same level, across all browsers
2013-04-04 00:31:58 +09:00
position: relative;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
float: left;
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='rtl'] #toolbarViewerLeft > *,
html[dir='rtl'] #toolbarViewerMiddle > *,
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
html[dir='rtl'] #toolbarViewerRight > *,
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
html[dir='rtl'] .findbar * {
Explicitly define layout of toolbar buttons Before: - Firefox's buttons looks OK - Chrome (quirks mode): Buttons were aligned to the bottom (too much) - Chrome (standards mode): Buttons were aligned to the top (too much) - Opera/IE/Safari: Like Chrome (standards): Buttons too high (Too high = Compare the other buttons to the rightmost button) After: - Firefox's button positions didn't change at all - All buttons are aligned at the same level, across all browsers
2013-04-04 00:31:58 +09:00
position: relative;
Fixes rtl languages
2012-05-02 07:08:30 +09:00
float: right;
Move code to the right place and give it a better style. Highlight the background on hover.
2012-02-07 17:23:23 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .splitToolbarButton {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
margin: 3px 2px 4px 0;
display: inline-block;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='rtl'] .splitToolbarButton {
margin: 3px 0 4px 2px;
display: inline-block;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
border-radius: 0;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
float: left;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='rtl'] .splitToolbarButton > .toolbarButton {
border-radius: 0;
float: right;
Quick & dirty sidebar pinning.
2012-02-05 05:13:12 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton,
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.secondaryToolbarButton,
.overlayButton {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
border: 0 none;
fix buttons under android
2014-05-19 00:32:26 +09:00
background: none;
Fix buttons after doctype addition.
2012-04-27 06:38:41 +09:00
width: 32px;
height: 25px;
Quick & dirty sidebar pinning.
2012-02-05 05:13:12 +09:00
}
Addressing accessebility aspects
2012-05-04 23:51:21 +09:00
.toolbarButton > span {
Fixing display: none; title for zoom
2012-05-05 02:34:18 +09:00
display: inline-block;
width: 0;
height: 0;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
overflow: hidden;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton[disabled],
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.secondaryToolbarButton[disabled],
.overlayButton[disabled] {
Add disabled style for buttons.
2012-04-26 08:48:01 +09:00
opacity: .5;
}
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
.splitToolbarButton.toggled .toolbarButton {
margin: 0;
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.splitToolbarButton:hover > .toolbarButton,
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
.splitToolbarButton:focus > .toolbarButton,
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
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);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.splitToolbarButton > .toolbarButton:hover,
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
.splitToolbarButton > .toolbarButton:focus,
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
.dropdownToolbarButton:hover,
Document properties
2014-01-22 08:07:07 +09:00
.overlayButton:hover,
Apply hover style to .overlayButton not only when hovered, but also when focused (issue #6261)
2015-08-04 17:59:07 +09:00
.overlayButton:focus,
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 0 1px rgba(0, 0, 0, 0.05);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
z-index: 199;
}
Prevent the zoom dropdown icon from being overridden when the element is `:active` (bug 1619595) This changes the dropdown icon from being set using the `background` CSS property, to being set with `::after` which is *similar* to all the other toolbar button icons (which use `::before`). Also tweaks the dropdown `background-color` on `:hover` slightly, since the other changes made it too light.
2020-03-04 23:56:08 +09:00
.dropdownToolbarButton:hover {
background-color: rgba(0, 0, 0, 0.26);
}
Preliminary attachments support Added a partial Filespec support Added getAttachments in API Added a new attachments view in UI (with a new icon by @shorlander)
2014-03-19 05:32:47 +09:00
.splitToolbarButton > .toolbarButton {
position: relative;
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
position: relative;
margin: 0;
margin-right: -1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border-right-color: rgba(0, 0, 0, 0);
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
position: relative;
margin: 0;
margin-left: -1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border-left-color: rgba(0, 0, 0, 0);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.splitToolbarButtonSeparator {
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
padding: 8px 0;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
width: 1px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.5);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
z-index: 99;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
display: inline-block;
margin: 5px 0;
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
html[dir='ltr'] .splitToolbarButtonSeparator {
Spacing fixes.
2013-02-27 05:06:53 +09:00
float: left;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='rtl'] .splitToolbarButtonSeparator {
Spacing fixes.
2013-02-27 05:06:53 +09:00
float: right;
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.splitToolbarButton:hover > .splitToolbarButtonSeparator,
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
Fix buttons after doctype addition.
2012-04-27 06:38:41 +09:00
padding: 12px 0;
Fix margin on toolbar button separator to avoid changing height on hover, causing jittering
2012-12-15 06:24:28 +09:00
margin: 1px 0;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.toolbarButton,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.dropdownToolbarButton,
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.secondaryToolbarButton,
.overlayButton {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
min-width: 16px;
Fix buttons after doctype addition.
2012-04-27 06:38:41 +09:00
padding: 2px 6px 0;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border: 1px solid rgba(0, 0, 0, 0);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
border-radius: 2px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
color: rgba(255, 255, 255, 0.8);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
font-size: 12px;
line-height: 14px;
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
added missing css vendor prefixes and reordered some properties according to cascade
2012-06-11 18:03:15 +09:00
/* Opera does not support user-select, use <... unselectable="on"> instead */
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
cursor: default;
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .toolbarButton,
Document properties
2014-01-22 08:07:07 +09:00
html[dir='ltr'] .overlayButton,
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .dropdownToolbarButton {
margin: 3px 2px 4px 0;
}
html[dir='rtl'] .toolbarButton,
Document properties
2014-01-22 08:07:07 +09:00
html[dir='rtl'] .overlayButton,
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='rtl'] .dropdownToolbarButton {
margin: 3px 0 4px 2px;
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarButton:hover,
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
.toolbarButton:focus,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.dropdownToolbarButton,
Document properties
2014-01-22 08:07:07 +09:00
.overlayButton,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
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);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.toolbarButton:hover:active,
Document properties
2014-01-22 08:07:07 +09:00
.overlayButton:hover:active,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.dropdownToolbarButton:hover:active,
.secondaryToolbarButton:hover:active {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.2);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
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);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.toolbarButton.toggled,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
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);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.toolbarButton.toggled:hover:active,
Secondary toolbar
2013-09-05 06:48:31 +09:00
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.4);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.3) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
}
.dropdownToolbarButton {
Re-factor `Toolbar._adjustScaleWidth` to improve/simplify how the zoom dropdown width is calculated This patch contains some *much* needed clean-up of, and improvements to, this old code thus addressing a number of issues: - Set more reasonable *default* values for the widths, in `web/viewer.css`, since the current ones are actually too small even for the (default) `en-US` locale. This obviously result in a slightly larger zoom dropdown width for many locales, but the more consistent UI does look good to me. - Stop setting the `min-width`/`max-width` and just use `width` instead. - Set an explicit `height` of the zoom dropdown, in an attempt to get Google Chrome to display it with the same height as the toolbar buttons. - Remove additional `Element.setAttribute("style", ...)` usage. - Actually check *all* of the predefined l10n strings, since the old implementation (implicitly) assumed that the currently selected one was the longest (note e.g. the `ja-JP` locale where one string is considerably longer than the rest). - Stop invalidating the DOM multiple times when doing the measurements. This was achieved by using a temporary in-memory `canvas`, and we now only need to query the DOM once in order to get the current font properties of the zoom dropdown.
2020-02-06 22:22:14 +09:00
width: 140px;
Apply padding on <select> and not the button
2015-06-04 04:03:10 +09:00
padding: 0;
Support CropBox attribute
2011-09-22 07:32:36 +09:00
overflow: hidden;
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
Prevent the zoom dropdown icon from being overridden when the element is `:active` (bug 1619595) This changes the dropdown icon from being set using the `background` CSS property, to being set with `::after` which is *similar* to all the other toolbar button icons (which use `::before`). Also tweaks the dropdown `background-color` on `:hover` slightly, since the other changes made it too light.
2020-03-04 23:56:08 +09:00
.dropdownToolbarButton::after {
position: absolute;
display: inline-block;
top: 4px;
content: url(images/toolbarButton-menuArrows.png);
Fixes rtl languages
2012-05-02 07:08:30 +09:00
}
Prevent the zoom dropdown icon from being overridden when the element is `:active` (bug 1619595) This changes the dropdown icon from being set using the `background` CSS property, to being set with `::after` which is *similar* to all the other toolbar button icons (which use `::before`). Also tweaks the dropdown `background-color` on `:hover` slightly, since the other changes made it too light.
2020-03-04 23:56:08 +09:00
html[dir='ltr'] .dropdownToolbarButton::after {
right: 8px;
}
html[dir='rtl'] .dropdownToolbarButton::after {
left: 8px;
Scale images proportionally
2011-08-31 21:22:48 +09:00
}
fixing Chrome quirks
2012-04-18 03:10:52 +09:00
.dropdownToolbarButton > select {
Re-factor `Toolbar._adjustScaleWidth` to improve/simplify how the zoom dropdown width is calculated This patch contains some *much* needed clean-up of, and improvements to, this old code thus addressing a number of issues: - Set more reasonable *default* values for the widths, in `web/viewer.css`, since the current ones are actually too small even for the (default) `en-US` locale. This obviously result in a slightly larger zoom dropdown width for many locales, but the more consistent UI does look good to me. - Stop setting the `min-width`/`max-width` and just use `width` instead. - Set an explicit `height` of the zoom dropdown, in an attempt to get Google Chrome to display it with the same height as the toolbar buttons. - Remove additional `Element.setAttribute("style", ...)` usage. - Actually check *all* of the predefined l10n strings, since the old implementation (implicitly) assumed that the currently selected one was the longest (note e.g. the `ja-JP` locale where one string is considerably longer than the rest). - Stop invalidating the DOM multiple times when doing the measurements. This was achieved by using a temporary in-memory `canvas`, and we now only need to query the DOM once in order to get the current font properties of the zoom dropdown.
2020-02-06 22:22:14 +09:00
width: 162px;
height: 23px;
dropdown menu
2012-04-14 03:13:53 +09:00
font-size: 12px;
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(242, 242, 242, 1);
Spacing fixes.
2013-02-27 05:06:53 +09:00
margin: 0;
Apply padding on <select> and not the button
2015-06-04 04:03:10 +09:00
padding: 3px 2px 2px;
Spacing fixes.
2013-02-27 05:06:53 +09:00
border: none;
Workaround Opera not supporting 'transparent' background style in <select> element.
2012-07-31 17:48:52 +09:00
background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
Move code to the right place and give it a better style. Highlight the background on hover.
2012-02-07 17:23:23 +09:00
}
Fixes classList and dataset for IE9; background for option element
2012-05-17 10:19:38 +09:00
.dropdownToolbarButton > select > option {
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
background: rgba(61, 61, 61, 1);
Fixes classList and dataset for IE9; background for option element
2012-05-17 10:19:38 +09:00
}
Re-order the zoom options, add actual size option.
2012-04-26 07:55:11 +09:00
#customScaleOption {
display: none;
}
#pageWidthOption {
Normalize all RGBA colors This is not only useful to have one format for consistency, but also to be able to quickly search for colors for e.g., finding duplicates or when tweaking the CSS for custom deployments.
2019-12-25 22:23:22 +09:00
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
Re-order the zoom options, add actual size option.
2012-04-26 07:55:11 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .splitToolbarButton:first-child,
html[dir='ltr'] .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton:last-child,
html[dir='rtl'] .toolbarButton:last-child {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
margin-left: 4px;
Quick & dirty sidebar pinning.
2012-02-05 05:13:12 +09:00
}
Fixes rtl languages
2012-05-02 07:08:30 +09:00
html[dir='ltr'] .splitToolbarButton:last-child,
html[dir='ltr'] .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton:first-child,
html[dir='rtl'] .toolbarButton:first-child {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
margin-right: 4px;
Scale images proportionally
2011-08-31 21:22:48 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarButtonSpacer {
width: 30px;
Scale images proportionally
2011-08-31 21:22:48 +09:00
display: inline-block;
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
height: 1px;
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
html[dir='ltr'] #findPrevious {
margin-left: 3px;
}
html[dir='ltr'] #findNext {
margin-right: 3px;
}
html[dir='rtl'] #findPrevious {
margin-right: 3px;
}
html[dir='rtl'] #findNext {
margin-left: 3px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton::before,
.secondaryToolbarButton::before {
Explicitly define layout of toolbar buttons Before: - Firefox's buttons looks OK - Chrome (quirks mode): Buttons were aligned to the bottom (too much) - Chrome (standards mode): Buttons were aligned to the top (too much) - Opera/IE/Safari: Like Chrome (standards): Buttons too high (Too high = Compare the other buttons to the rightmost button) After: - Firefox's button positions didn't change at all - All buttons are aligned at the same level, across all browsers
2013-04-04 00:31:58 +09:00
/* All matching images have a size of 16x16
* All relevant containers have a size of 32x25 */
position: absolute;
Secondary toolbar
2013-09-05 06:48:31 +09:00
display: inline-block;
Explicitly define layout of toolbar buttons Before: - Firefox's buttons looks OK - Chrome (quirks mode): Buttons were aligned to the bottom (too much) - Chrome (standards mode): Buttons were aligned to the top (too much) - Opera/IE/Safari: Like Chrome (standards): Buttons too high (Too high = Compare the other buttons to the rightmost button) After: - Firefox's button positions didn't change at all - All buttons are aligned at the same level, across all browsers
2013-04-04 00:31:58 +09:00
top: 4px;
left: 7px;
}
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
Secondary toolbar
2013-09-05 06:48:31 +09:00
html[dir="ltr"] .secondaryToolbarButton::before {
left: 4px;
}
html[dir="rtl"] .secondaryToolbarButton::before {
right: 4px;
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton#sidebarToggle::before {
Secondary toolbar
2013-09-05 06:48:31 +09:00
content: url(images/toolbarButton-sidebarToggle.png);
}
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton#secondaryToolbarToggle::before {
Secondary toolbar
2013-09-05 06:48:31 +09:00
content: url(images/toolbarButton-secondaryToolbarToggle.png);
}
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
}
Fixes to findbar CSS.
2013-02-23 02:52:05 +09:00
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.findPrevious::before {
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
content: url(images/findbarButton-previous.png);
}
html[dir='rtl'] .toolbarButton.findPrevious::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.findNext::before {
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
content: url(images/findbarButton-next.png);
}
html[dir='rtl'] .toolbarButton.findNext::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.pageUp::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-pageUp.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Fixes rtl zoom and page up/down icons
2012-05-02 09:39:24 +09:00
html[dir='rtl'] .toolbarButton.pageUp::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Fixes rtl zoom and page up/down icons
2012-05-02 09:39:24 +09:00
}
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.pageDown::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-pageDown.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Fixes rtl zoom and page up/down icons
2012-05-02 09:39:24 +09:00
html[dir='rtl'] .toolbarButton.pageDown::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Fixes rtl zoom and page up/down icons
2012-05-02 09:39:24 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarButton.zoomOut::before {
content: url(images/toolbarButton-zoomOut.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarButton.zoomIn::before {
content: url(images/toolbarButton-zoomIn.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
Replace fullscreen with presentationMode
2013-03-02 05:54:02 +09:00
content: url(images/toolbarButton-presentationMode.png);
Initial support for Presentation Mode
2012-07-31 00:12:49 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-print.png);
Secondary toolbar
2013-09-05 06:48:31 +09:00
}
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
Replaces browse button with a icon
2012-05-21 07:12:58 +09:00
content: url(images/toolbarButton-openFile.png);
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-download.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
.toolbarButton.bookmark,
.secondaryToolbarButton.bookmark {
Fix buttons after doctype addition.
2012-04-27 06:38:41 +09:00
box-sizing: border-box;
Removes button outline as visible in Chrome
2014-01-27 19:57:33 +09:00
outline: none;
Fix the bookmark button alignment.
2012-05-01 06:58:12 +09:00
padding-top: 4px;
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
text-decoration: none;
}
.secondaryToolbarButton.bookmark {
padding-top: 5px;
removed all old elements; file input & dl work
2012-04-17 04:41:55 +09:00
}
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
.bookmark[href='#'] {
Fix bug 795225 - address comment
2013-03-19 07:53:45 +09:00
opacity: .5;
pointer-events: none;
}
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-bookmark.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
text selection OK, switch outline OK
2012-04-13 08:29:15 +09:00
#viewThumbnail.toolbarButton::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-viewThumbnail.png);
}
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
#viewOutline.toolbarButton::before {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
content: url(images/toolbarButton-viewOutline.png);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
html[dir="rtl"] #viewOutline.toolbarButton::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Improvements for RTL languages
2013-09-15 02:33:00 +09:00
}
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
Preliminary attachments support Added a partial Filespec support Added getAttachments in API Added a new attachments view in UI (with a new icon by @shorlander)
2014-03-19 05:32:47 +09:00
#viewAttachments.toolbarButton::before {
content: url(images/toolbarButton-viewAttachments.png);
}
Use "find" instead of both find & search
2012-09-26 05:17:27 +09:00
#viewFind.toolbarButton::before {
Fixes tab order, temp icon and localization
2012-05-22 01:23:12 +09:00
content: url(images/toolbarButton-search.png);
Merge branch 'refs/heads/master' into textsearch Conflicts: web/viewer.css web/viewer.html web/viewer.js
2012-05-09 06:22:48 +09:00
}
Display a notification on the `sidebarToggle` button for PDF documents with outline/attachments A longstanding issue with the viewer is that you cannot tell if a PDF document includes an outline and/or attachments without actually opening the sidebar. This patch contains a suggested solution for that, by displaying an hide-on-interaction notification on the `sidebarToggle` button (and the relevant sidebar view buttons). Note that this was inspired by e.g. the update notification that is displayed on the menu button in Firefox. For an initial implementation, I've tried to do this in such a way that the notification isn't too distracting. Without being an UX expert, I don't think that we'd want something too in-your-face, in order to keep the viewer toolbars reasonable clean. (We probably do *not* want e.g. an entire notification bar in these situations, since that would take up unnecessary screen space and require actions from the user to close.) However it's certainly possible that the current notification might simply be *too* inconspicuous to be truly helpful to users, but we could probably iterate on that if the feature itself is deemed useful.
2017-01-15 20:37:06 +09:00
.toolbarButton.pdfSidebarNotification::after {
position: absolute;
display: inline-block;
top: 1px;
/* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
content: '';
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(112, 219, 85, 1);
Display a notification on the `sidebarToggle` button for PDF documents with outline/attachments A longstanding issue with the viewer is that you cannot tell if a PDF document includes an outline and/or attachments without actually opening the sidebar. This patch contains a suggested solution for that, by displaying an hide-on-interaction notification on the `sidebarToggle` button (and the relevant sidebar view buttons). Note that this was inspired by e.g. the update notification that is displayed on the menu button in Firefox. For an initial implementation, I've tried to do this in such a way that the notification isn't too distracting. Without being an UX expert, I don't think that we'd want something too in-your-face, in order to keep the viewer toolbars reasonable clean. (We probably do *not* want e.g. an entire notification bar in these situations, since that would take up unnecessary screen space and require actions from the user to close.) However it's certainly possible that the current notification might simply be *too* inconspicuous to be truly helpful to users, but we could probably iterate on that if the feature itself is deemed useful.
2017-01-15 20:37:06 +09:00
height: 9px;
width: 9px;
border-radius: 50%;
}
html[dir='ltr'] .toolbarButton.pdfSidebarNotification::after {
left: 17px;
}
html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after {
right: 17px;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.secondaryToolbarButton {
position: relative;
margin: 0 0 4px 0;
padding: 3px 0 1px 0;
height: auto;
min-height: 25px;
width: auto;
min-width: 100%;
white-space: normal;
}
html[dir="ltr"] .secondaryToolbarButton {
padding-left: 24px;
text-align: left;
}
html[dir="rtl"] .secondaryToolbarButton {
padding-right: 24px;
text-align: right;
}
Add the viewBookmark button to the secondary toolbar
2013-09-27 18:44:45 +09:00
html[dir="ltr"] .secondaryToolbarButton.bookmark {
padding-left: 27px;
}
html[dir="rtl"] .secondaryToolbarButton.bookmark {
padding-right: 27px;
Secondary toolbar
2013-09-05 06:48:31 +09:00
}
html[dir="ltr"] .secondaryToolbarButton > span {
padding-right: 4px;
}
html[dir="rtl"] .secondaryToolbarButton > span {
padding-left: 4px;
}
.secondaryToolbarButton.firstPage::before {
content: url(images/secondaryToolbarButton-firstPage.png);
}
.secondaryToolbarButton.lastPage::before {
content: url(images/secondaryToolbarButton-lastPage.png);
}
.secondaryToolbarButton.rotateCcw::before {
content: url(images/secondaryToolbarButton-rotateCcw.png);
}
.secondaryToolbarButton.rotateCw::before {
content: url(images/secondaryToolbarButton-rotateCw.png);
}
Unify handling of various cursor tools, e.g. the current Hand Tool and a possible future Zoom Tool, in a new `PDFCursorTools` module With the current way that the `HandTool` is implemented, if someone would try to also add a Zoom tool (as issue 1260 asks for) that probably wouldn't work very well given that you'd then have two cursor tools which may not play nice together. Hence this patch, which attempts to refactor things so that it should be simpler to add e.g. a Zoom tool as well (given that that issue is marked as "good-beginner-bug", and I'm not sure if that really applies considering the current state of the code). Note that I personally have no interest in implementing a Zoom tool (similar to Adobe Reader) since I wouldn't use it, but I figured that it can't hurt to make this code a bit more future proof.
2016-09-07 20:30:26 +09:00
.secondaryToolbarButton.selectTool::before {
content: url(images/secondaryToolbarButton-selectTool.png);
}
Implement hand tool The logic for the hand tool is implemented in a separate project, maintained at https://github.com/Rob--W/grab-to-pan.js Integration notes - Added toggle as an entry under the Secondary toolbar - Added shortcut "h" to toggle hand tool (to-do: document this in wiki after merge). This shortcut is also used in Adobe's Acrobat Reader. To-do: localizations for: hand_tool_enable.title= hand_tool_enable_label= hand_tool_disable.title= hand_tool_disable_label= To-do (wish): persistence of hand tool preference, preferably a global setting. secondaryToolbarButton-handTool.png created by Stephen Horlander <shorlander@mozilla.com>
2013-10-03 05:09:43 +09:00
.secondaryToolbarButton.handTool::before {
content: url(images/secondaryToolbarButton-handTool.png);
}
Add scrolling modes to web viewer In addition to the default scrolling mode (vertical), this commit adds horizontal and wrapped scrolling, implemented primarily with CSS.
2018-05-15 12:10:32 +09:00
.secondaryToolbarButton.scrollVertical::before {
content: url(images/secondaryToolbarButton-scrollVertical.png);
}
.secondaryToolbarButton.scrollHorizontal::before {
content: url(images/secondaryToolbarButton-scrollHorizontal.png);
}
.secondaryToolbarButton.scrollWrapped::before {
content: url(images/secondaryToolbarButton-scrollWrapped.png);
}
Add spread modes to web viewer This builds on the scrolling mode work to add three buttons for joining page spreads together: one for the default view, with no page spreads, and two for spreads starting on odd-numbered or even-numbered pages.
2018-05-15 12:10:32 +09:00
.secondaryToolbarButton.spreadNone::before {
content: url(images/secondaryToolbarButton-spreadNone.png);
}
.secondaryToolbarButton.spreadOdd::before {
content: url(images/secondaryToolbarButton-spreadOdd.png);
}
.secondaryToolbarButton.spreadEven::before {
content: url(images/secondaryToolbarButton-spreadEven.png);
}
Document properties
2014-01-22 08:07:07 +09:00
.secondaryToolbarButton.documentProperties::before {
content: url(images/secondaryToolbarButton-documentProperties.png);
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.verticalToolbarSeparator {
display: block;
padding: 8px 0;
margin: 8px 4px;
width: 1px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
Secondary toolbar
2013-09-05 06:48:31 +09:00
}
html[dir='ltr'] .verticalToolbarSeparator {
margin-left: 2px;
}
html[dir='rtl'] .verticalToolbarSeparator {
margin-right: 2px;
}
.horizontalToolbarSeparator {
Set transformOrigin for text layer in css. transformOrigin is set to 0% 0% in all cases. This adds extra memory impact into the dom tree. It also involves the CustomStyles workaround to determine the correct css rule for the browser. By setting all vendor and standard variants in css, the rule is applied without the dom memory overhead and without the minor computation overhead to set the value.
2014-08-19 04:56:15 +09:00
display: block;
Secondary toolbar
2013-09-05 06:48:31 +09:00
margin: 0 0 4px 0;
height: 1px;
width: 100%;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
Secondary toolbar
2013-09-05 06:48:31 +09:00
}
Merge branch 'refs/heads/master' into textsearch Conflicts: web/viewer.css web/viewer.html web/viewer.js
2012-05-09 06:22:48 +09:00
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarField {
padding: 3px 6px;
margin: 4px 0 4px 0;
border-radius: 2px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.09);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
border & box-shadow duplications removed
2019-10-22 21:25:42 +09:00
border-width: 1px;
border-style: solid;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(242, 242, 242, 1);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
font-size: 12px;
line-height: 14px;
outline-style: none;
Fixing font loading hack for IE9.. and some styles
2011-08-29 05:10:14 +09:00
}
Add pilot find next/prev icons; localization
2012-10-06 09:15:06 +09:00
.toolbarField[type=checkbox] {
display: inline-block;
margin: 8px 0px;
}
"Page: 1 of 14"
2012-04-26 00:32:37 +09:00
.toolbarField.pageNumber {
Prevent the page number field from having a spinner (spin buttons) in mozilla now that it supports <input type=number>
2013-12-11 00:15:22 +09:00
-moz-appearance: textfield; /* hides the spinner in moz */
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
min-width: 16px;
text-align: right;
nit
2012-04-26 03:21:10 +09:00
width: 40px;
"Page: 1 of 14"
2012-04-26 00:32:37 +09:00
}
Add a page loading indicator to the page number input
2014-07-18 20:53:04 +09:00
.toolbarField.pageNumber.visiblePageIsLoading {
background-image: url(images/loading-small.png);
background-repeat: no-repeat;
background-position: 1px;
}
minor fixes
2012-04-26 03:10:53 +09:00
.toolbarField.pageNumber::-webkit-inner-spin-button,
.toolbarField.pageNumber::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarField:hover {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.11);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarField:focus {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.toolbarLabel {
min-width: 16px;
padding: 3px 6px 3px 2px;
margin: 4px 2px 4px 0;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border: 1px solid rgba(0, 0, 0, 0);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
border-radius: 2px;
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(217, 217, 217, 1);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
font-size: 12px;
line-height: 14px;
text-align: left;
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
cursor: default;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
#thumbnailView {
Changes thumbs and outline panels positioning to absolute
2012-09-06 00:31:23 +09:00
position: absolute;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
width: calc(100% - 60px);
Changes thumbs and outline panels positioning to absolute
2012-09-06 00:31:23 +09:00
top: 0;
fixing sidebarView scroll bar overflow
2012-04-13 07:13:58 +09:00
bottom: 0;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
padding: 10px 30px 0;
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
overflow: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
progress
2011-10-29 01:16:17 +09:00
}
Fix small visual quirk in thumbnail viewer
2018-12-19 06:48:26 +09:00
#thumbnailView > a:active,
#thumbnailView > a:focus {
outline: 0;
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.thumbnail {
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
margin: 0 10px 5px 10px;
Refactoring thumbnail scroll code to fix jumps
2013-10-10 03:40:21 +09:00
}
Implement sidebar resizing for modern browsers, by utilizing CSS variables (issue 2072) By making use of modern CSS features, in this case [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), implementing sidebar resizing is actually quite simple. Not only will the amount of added code be fairly small, but it should also be easy to maintain since there's no need for complicated JavaScript hacks in order to update the CSS. Another benefit is that the JavaScript code doesn't need to make detailed assumptions about the exact structure of the HTML/CSS code. Obviously this will not work in older browsers, such as IE, that lack support for CSS variables. In those cases sidebar resizing is simply disabled (via feature detection), and the resizing DOM element hidden, and the behaviour is thus *identical* to the current (fixed-width) sidebar. However, considering the simplicity of the implementation, I really don't see why limiting this feature to "modern" browsers is a problem. Finally, note that a few edge-cases meant that the patch is a bit larger than what the basic functionality would dictate. Among those is first of all proper RTL support, and secondly (automatic) resizing of the sidebar when the width of the *entire* viewer changes. Another, pre-existing, issue fixed here is the incomplete interface of `NullL10n`. *Please note:* This patch has been successfully tested in both LTR and RTL viewer locales, in recent versions of Firefox and Chrome. Fixes 2072.
2017-10-10 23:16:05 +09:00
html[dir='ltr'] .thumbnail {
float: left;
}
html[dir='rtl'] .thumbnail {
float: right;
}
Refactoring thumbnail scroll code to fix jumps
2013-10-10 03:40:21 +09:00
#thumbnailView > a:last-of-type > .thumbnail {
margin-bottom: 10px;
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
}
Make thumbnail CSS size independent of data-loaded tag
2014-12-30 23:05:39 +09:00
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
margin-bottom: 9px;
}
Remove flex box. Add side animation. Add dashed line around unload thumbnails.
2012-04-26 03:34:28 +09:00
.thumbnail:not([data-loaded]) {
border: 1px dashed rgba(255, 255, 255, 0.5);
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
margin: -1px 9px 4px 9px;
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
}
.thumbnailImage {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
border: 1px solid rgba(0, 0, 0, 0);
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0.8;
z-index: 99;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background-color: rgba(255, 255, 255, 1);
Fix thumbnail rendering regression, when using |draw|, for PDF files with blend modes (issue 5637)
2015-01-20 05:39:38 +09:00
background-clip: content-box;
Implemented Comment and Check annotation. Correcting some typos in last commit
2011-12-22 07:22:07 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.thumbnailSelectionRing {
border-radius: 2px;
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
padding: 7px;
Implemented Comment and Check annotation. Correcting some typos in last commit
2011-12-22 07:22:07 +09:00
}
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
opacity: .9;
Implemented Comment and Check annotation. Correcting some typos in last commit
2011-12-22 07:22:07 +09:00
}
Fixes tab order and focus highlight
2012-05-02 01:43:48 +09:00
a:focus > .thumbnail > .thumbnailSelectionRing,
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.thumbnail:hover > .thumbnailSelectionRing {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.9);
Implemented Comment and Check annotation. Correcting some typos in last commit
2011-12-22 07:22:07 +09:00
}
Add selection ring around thumbnails.
2012-04-14 06:14:05 +09:00
.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
opacity: 1;
Unify the multi_page_viewer and the basic viewer
2011-07-29 02:48:05 +09:00
}
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
.thumbnail.selected > .thumbnailSelectionRing {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255,1);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Preliminary attachments support Added a partial Filespec support Added getAttachments in API Added a new attachments view in UI (with a new icon by @shorlander)
2014-03-19 05:32:47 +09:00
#outlineView,
#attachmentsView {
Changes thumbs and outline panels positioning to absolute
2012-09-06 00:31:23 +09:00
position: absolute;
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
width: calc(100% - 8px);
Changes thumbs and outline panels positioning to absolute
2012-09-06 00:31:23 +09:00
top: 0;
fixing sidebarView scroll bar overflow
2012-04-13 07:13:58 +09:00
bottom: 0;
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
padding: 4px 4px 0;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
overflow: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='ltr'] .treeWithDeepNesting > .treeItem,
html[dir='ltr'] .treeItem > .treeItems {
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
margin-left: 20px;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeWithDeepNesting > .treeItem,
html[dir='rtl'] .treeItem > .treeItems {
Fixes the Outline view in RTL languages, follow up of #2510
2012-12-28 21:26:30 +09:00
margin-right: 20px;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItem > a {
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
text-decoration: none;
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
display: inline-block;
min-width: 95%;
Adjust the `min-width` of outline items and use more consistent `border-radius` (PR 6242 follow-up) Prior to PR 6242, the width of all outline items was set such that their right (or left, in RTL locales) edges lined up vertically. In my opinion that looked more consistent, therefore this patch adjusts the CSS to make sure that this will be the case again. The patch also makes the `border-radius` values of outline items a bit more consistent.
2015-09-03 22:22:48 +09:00
min-width: calc(100% - 4px); /* Subtract the right padding (left, in RTL mode)
of the container. */
Add word wrap of text in the Outline view to avoid horizontal scrolling
2012-12-28 02:58:09 +09:00
height: auto;
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
margin-bottom: 1px;
border-radius: 2px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
color: rgba(255, 255, 255, 0.8);
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
font-size: 13px;
line-height: 15px;
Clean up browser-specific CSS
2018-04-04 07:18:57 +09:00
user-select: none;
Add word wrap of text in the Outline view to avoid horizontal scrolling
2012-12-28 02:58:09 +09:00
white-space: normal;
Converts attachment items to buttons instead of links
2014-04-26 05:42:19 +09:00
cursor: pointer;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='ltr'] .treeItem > a {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
padding: 2px 0 5px 4px;
Fixes the Outline view in RTL languages, follow up of #2510
2012-12-28 21:26:30 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItem > a {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
padding: 2px 4px 5px 0;
Fixes the Outline view in RTL languages, follow up of #2510
2012-12-28 21:26:30 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
position: relative;
height: 0;
width: 0;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
color: rgba(255, 255, 255, 0.5);
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler::before {
Switch `expanded/collapsed` in the names of the `treeitem-*` assets It appears to me that the `expanded/collapsed` part of the names got switched around, since I'd expect the following convention: - `v` == expanded - `>` == collapsed
2015-08-28 06:09:00 +09:00
content: url(images/treeitem-expanded.png);
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
display: inline-block;
position: absolute;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler.treeItemsHidden::before {
Switch `expanded/collapsed` in the names of the `treeitem-*` assets It appears to me that the `expanded/collapsed` part of the names got switched around, since I'd expect the following convention: - `v` == expanded - `>` == collapsed
2015-08-28 06:09:00 +09:00
content: url(images/treeitem-collapsed.png);
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItemToggler.treeItemsHidden::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scaleX(-1);
Add mirrored triangle (TOC item icon)
2015-09-06 22:34:02 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler.treeItemsHidden ~ .treeItems {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
display: none;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='ltr'] .treeItemToggler {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
float: left;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItemToggler {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
float: right;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='ltr'] .treeItemToggler::before {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
right: 4px;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItemToggler::before {
Allow outline to be collapsed / shown via icon. - This commit adds a '>' before every outline item that has subitems. - Click on the '>' to collapse all subitems under that item (which turns the '>' in a 'v'). - Shift + click expands/collapses all descendant items under that tree. - Double-clicking on the "Show Document Outline" button in the toolbar expands/collapses all outline items.
2015-07-22 02:52:49 +09:00
left: 4px;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler:hover,
.treeItemToggler:hover + a,
.treeItemToggler:hover ~ .treeItems,
.treeItem > a:hover {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.02);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
first mockup, loads tracemonkey pages OK
2012-04-12 08:12:51 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
Adjust the `min-width` of outline items and use more consistent `border-radius` (PR 6242 follow-up) Prior to PR 6242, the width of all outline items was set such that their right (or left, in RTL locales) edges lined up vertically. In my opinion that looked more consistent, therefore this patch adjusts the CSS to make sure that this will be the case again. The patch also makes the `border-radius` values of outline items a bit more consistent.
2015-09-03 22:22:48 +09:00
border-radius: 2px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
color: rgba(255, 255, 255, 0.9);
Switching to the document outline view if the document structure is present
2011-08-22 11:05:10 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItem.selected {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(255, 255, 255, 0.08);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
background-clip: padding-box;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 1);
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
}
.noResults {
font-size: 12px;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
color: rgba(255, 255, 255, 0.8);
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
font-style: italic;
CSS fixes to the sidebar. No need for a 15px margin, and links should have a pointer cursor.
2013-03-01 03:02:11 +09:00
cursor: default;
UI update from shorlanders comments.
2012-06-08 05:51:29 +09:00
}
user-changes to pageNumber are working
2012-04-13 09:57:52 +09:00
/* TODO: file FF bug to support ::-moz-selection:window-inactive
so we can override the opaque grey background when the window is inactive;
see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
Normalize all RGBA colors This is not only useful to have one format for consistency, but also to be able to quickly search for colors for e.g., finding duplicates or when tweaking the CSS for custom deployments.
2019-12-25 22:23:22 +09:00
::selection {
background: rgba(0, 0, 255, 0.3);
}
TextLayer selection coloring improvement for overlap. As a consequence of merging #5221 it is more likely to have multiple overlapping selection divs inside the text layer. Because each individual element gets the selection style applied, the 30%opacity stacks, making a 60% bar visible where the overlap happens. As proposed by @rocallahan, this can be fixed by making the selection style solid and setting opacity for the overall layer. I assume also that this should make the work for the renderer easier, but was unable to bench it.
2014-09-09 16:09:23 +09:00
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
#errorWrapper {
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
color: rgba(255, 255, 255, 1);
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
left: 0;
Fix the error box.
2012-04-26 09:20:13 +09:00
position: absolute;
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
right: 0;
z-index: 1000;
padding: 3px;
Make the error a little smaller.
2011-11-30 02:36:50 +09:00
font-size: 0.8em;
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
}
Prevent the loadingBar from overlaying the errorWrapper
2013-07-29 19:43:42 +09:00
.loadingInProgress #errorWrapper {
Reduce load progress bar’s height to 4 pixels
2014-08-12 13:09:38 +09:00
top: 37px;
Prevent the loadingBar from overlaying the errorWrapper
2013-07-29 19:43:42 +09:00
}
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
#errorMessageLeft {
float: left;
}
#errorMessageRight {
float: right;
}
#errorMoreInfo {
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(255, 255, 255, 1);
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
color: rgba(0, 0, 0, 1);
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
padding: 3px;
margin: 3px;
Easier copy/paste error message.
2012-01-05 07:43:17 +09:00
width: 98%;
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.overlayButton {
width: auto;
margin: 3px 4px 2px 4px !important;
padding: 2px 6px 3px 6px;
}
Improved password prompt
2013-09-25 00:46:54 +09:00
#overlayContainer {
display: table;
position: absolute;
width: 100%;
height: 100%;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.2);
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
z-index: 40000;
Improved password prompt
2013-09-25 00:46:54 +09:00
}
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
#overlayContainer > * {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Improved password prompt
2013-09-25 00:46:54 +09:00
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#overlayContainer > .container {
Improved password prompt
2013-09-25 00:46:54 +09:00
display: table-cell;
vertical-align: middle;
text-align: center;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#overlayContainer > .container > .dialog {
Improved password prompt
2013-09-25 00:46:54 +09:00
display: inline-block;
padding: 15px;
border-spacing: 4px;
Convert all HSL colors to RGBA colors
2019-12-25 21:28:04 +09:00
color: rgba(217, 217, 217, 1);
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
font-size: 12px;
Improved password prompt
2013-09-25 00:46:54 +09:00
line-height: 14px;
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background-color: rgba(71, 71, 71, 1); /* fallback */
Improved password prompt
2013-09-25 00:46:54 +09:00
background-image: url(images/texture.png),
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
border: 1px solid rgba(0, 0, 0, 0.5);
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
Improved password prompt
2013-09-25 00:46:54 +09:00
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.dialog > .row {
Improved password prompt
2013-09-25 00:46:54 +09:00
display: table-row;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.dialog > .row > * {
Improved password prompt
2013-09-25 00:46:54 +09:00
display: table-cell;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.dialog .toolbarField {
Improved password prompt
2013-09-25 00:46:54 +09:00
margin: 5px 0;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.dialog .separator {
Set transformOrigin for text layer in css. transformOrigin is set to 0% 0% in all cases. This adds extra memory impact into the dom tree. It also involves the CustomStyles workaround to determine the correct css rule for the browser. By setting all vendor and standard variants in css, the rule is applied without the dom memory overhead and without the minor computation overhead to set the value.
2014-08-19 04:56:15 +09:00
display: block;
Document properties
2014-01-22 08:07:07 +09:00
margin: 4px 0 4px 0;
height: 1px;
width: 100%;
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
Document properties
2014-01-22 08:07:07 +09:00
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
.dialog .buttonRow {
text-align: center;
vertical-align: middle;
Document properties
2014-01-22 08:07:07 +09:00
}
Teach users how to enable access to local files.
2015-07-19 00:11:33 +09:00
.dialog :link {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
color: rgba(255, 255, 255, 1);
Teach users how to enable access to local files.
2015-07-19 00:11:33 +09:00
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#passwordOverlay > .dialog {
text-align: center;
}
#passwordOverlay .toolbarField {
width: 200px;
Document properties
2014-01-22 08:07:07 +09:00
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#documentPropertiesOverlay > .dialog {
text-align: left;
}
#documentPropertiesOverlay .row > * {
Document properties
2014-01-22 08:07:07 +09:00
min-width: 100px;
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
}
html[dir='ltr'] #documentPropertiesOverlay .row > * {
text-align: left;
}
html[dir='rtl'] #documentPropertiesOverlay .row > * {
Document properties
2014-01-22 08:07:07 +09:00
text-align: right;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#documentPropertiesOverlay .row > span {
Miscellaneous improvements for the document properties dialog
2014-01-23 08:30:48 +09:00
width: 125px;
word-wrap: break-word;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#documentPropertiesOverlay .row > p {
Miscellaneous improvements for the document properties dialog
2014-01-23 08:30:48 +09:00
max-width: 225px;
word-wrap: break-word;
}
Refactor the CSS rules for the overlayContainer
2014-05-12 22:50:13 +09:00
#documentPropertiesOverlay .buttonRow {
Document properties
2014-01-22 08:07:07 +09:00
margin-top: 10px;
}
Adding new errorback and code to display error messages.
2011-11-29 09:55:09 +09:00
.clearBoth {
clear: both;
}
fixing Chrome quirks
2012-04-18 03:10:52 +09:00
.fileInput {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
Add back the browse button for the web viewer.
2012-05-01 06:23:26 +09:00
margin-top: 5px;
De-inline CSS for the 'open file' button
2014-01-14 06:04:36 +09:00
visibility: hidden;
position: fixed;
right: 0;
top: 0;
Add a progressbar to the loading indicator, below the text.
2012-03-22 07:36:10 +09:00
}
Change name of debugger to stepper.
2012-02-16 07:12:58 +09:00
#PDFBug {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
border: 1px solid rgba(102, 102, 102, 1);
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
position: fixed;
Update pdfbug style.
2012-04-27 04:35:52 +09:00
top: 32px;
right: 0;
bottom: 0;
font-size: 10px;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
padding: 0;
Update pdfbug style.
2012-04-27 04:35:52 +09:00
width: 300px;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
}
Change name of debugger to stepper.
2012-02-16 07:12:58 +09:00
#PDFBug .controls {
Convert all six-digit HEX colors to RGBA colors
2019-12-26 00:19:14 +09:00
background: rgba(238, 238, 238, 1);
border-bottom: 1px solid rgba(102, 102, 102, 1);
padding: 3px;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
}
Change name of debugger to stepper.
2012-02-16 07:12:58 +09:00
#PDFBug .panels {
Update pdfbug style.
2012-04-27 04:35:52 +09:00
bottom: 0;
left: 0;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
overflow: auto;
Added CSS rules to allow smooth (momentum) scrolling on iOS devices
2014-03-31 23:27:36 +09:00
-webkit-overflow-scrolling: touch;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
position: absolute;
right: 0;
Update pdfbug style.
2012-04-27 04:35:52 +09:00
top: 27px;
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
}
Replace most remaining `Element.setAttribute("style", ...)` usage with `Element.style = ...` instead This should hopefully be useful in environments where restrictive CSPs are in effect. In most cases the replacement is entirely straighforward, and there's only a couple of special cases: - For the `src/display/font_loader.js` and `web/pdf_outline_viewer.js `cases, since the elements aren't appended to the document yet, it shouldn't matter if the style properties are set one-by-one rather than all at once. - For the `web/debugger.js` case, there's really no need to set the `padding` inline at all and the definition was simply moved to `web/viewer.css` instead. *Please note:* There's still *a single* case left, in `web/toolbar.js` for setting the width of the zoom dropdown, which is left intact for now. The reasons are that this particular case shouldn't matter for users of the general PDF.js library, and that it'd make a lot more sense to just try and re-factor that very old code anyway (thus fixing the `setAttribute` usage in the process).
2020-02-06 06:02:13 +09:00
#PDFBug .panels > div {
padding: 5px;
}
Change name of debugger to stepper.
2012-02-16 07:12:58 +09:00
#PDFBug button.active {
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
font-weight: bold;
}
.debuggerShowText {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
color: rgba(0, 0, 255, 1);
Combining Yury's and my debugging tools.
2012-02-14 10:35:58 +09:00
}
.debuggerHideText:hover {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
add loading status
2011-09-21 13:49:09 +09:00
}
Update stats to use the new pdfBug panel.
2012-02-22 02:52:09 +09:00
#PDFBug .stats {
Update pdfbug style.
2012-04-27 04:35:52 +09:00
font-family: courier;
Update stats to use the new pdfBug panel.
2012-02-22 02:52:09 +09:00
font-size: 10px;
white-space: pre;
}
#PDFBug .stats .title {
Update pdfbug style.
2012-04-27 04:35:52 +09:00
font-weight: bold;
}
#PDFBug table {
font-size: 10px;
add loading status
2011-09-21 13:49:09 +09:00
}
Adds styles for small screens
2012-05-16 04:47:33 +09:00
Better "text" testing.
2015-11-20 02:03:52 +09:00
#viewer.textLayer-visible .textLayer {
opacity: 1.0;
}
#viewer.textLayer-visible .canvasWrapper {
Convert all RGB colors to RGBA colors
2019-12-25 22:19:09 +09:00
background-color: rgba(128, 255, 128, 1);
Better "text" testing.
2015-11-20 02:03:52 +09:00
}
#viewer.textLayer-visible .canvasWrapper canvas {
mix-blend-mode: screen;
}
Use `span` instead of `div` in the text layer This improves copy/pasting text content since it reduces the amount of unnecessary newlines.
2018-11-18 23:54:08 +09:00
#viewer.textLayer-visible .textLayer > span {
Better "text" testing.
2015-11-20 02:03:52 +09:00
background-color: rgba(255, 255, 0, 0.1);
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
color: rgba(0, 0, 0, 1);
Better "text" testing.
2015-11-20 02:03:52 +09:00
border: solid 1px rgba(255, 0, 0, 0.5);
box-sizing: border-box;
}
Use `span` instead of `div` in the text layer This improves copy/pasting text content since it reduces the amount of unnecessary newlines.
2018-11-18 23:54:08 +09:00
#viewer.textLayer-hover .textLayer > span:hover {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
Adds textlayer debug modes
2012-08-20 10:02:12 +09:00
}
Use `span` instead of `div` in the text layer This improves copy/pasting text content since it reduces the amount of unnecessary newlines.
2018-11-18 23:54:08 +09:00
#viewer.textLayer-shadow .textLayer > span {
Normalize all RGBA colors This is not only useful to have one format for consistency, but also to be able to quickly search for colors for e.g., finding duplicates or when tweaking the CSS for custom deployments.
2019-12-25 22:23:22 +09:00
background-color: rgba(255, 255, 255, 0.6);
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
color: rgba(0, 0, 0, 1);
Adds textlayer debug modes
2012-08-20 10:02:12 +09:00
}
Update Grab to pan to fix performance issue Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme See also https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f Changes versus grab-to-pan.js: Moved inline style to viewer.css, lowered z-index from 2e9 to 50000 (note to future maintainers: make sure that all other z-index values stay below 50000!).
2014-01-29 01:05:30 +09:00
.grab-to-pan-grab {
Implement hand tool The logic for the hand tool is implemented in a separate project, maintained at https://github.com/Rob--W/grab-to-pan.js Integration notes - Added toggle as an entry under the Secondary toolbar - Added shortcut "h" to toggle hand tool (to-do: document this in wiki after merge). This shortcut is also used in Adobe's Acrobat Reader. To-do: localizations for: hand_tool_enable.title= hand_tool_enable_label= hand_tool_disable.title= hand_tool_disable_label= To-do (wish): persistence of hand tool preference, preferably a global setting. secondaryToolbarButton-handTool.png created by Stephen Horlander <shorlander@mozilla.com>
2013-10-03 05:09:43 +09:00
cursor: url("images/grab.cur"), move !important;
Add unprefixed grab/grabbing cursor Unprefixed "grab" / "grabbing" values of cursor will land in Firefox 27 (https://bugzilla.mozilla.org/show_bug.cgi?id=880672) (https://github.com/Rob--W/grab-to-pan.js/commit/fda961a3)
2013-12-17 03:01:59 +09:00
cursor: grab !important;
Implement hand tool The logic for the hand tool is implemented in a separate project, maintained at https://github.com/Rob--W/grab-to-pan.js Integration notes - Added toggle as an entry under the Secondary toolbar - Added shortcut "h" to toggle hand tool (to-do: document this in wiki after merge). This shortcut is also used in Adobe's Acrobat Reader. To-do: localizations for: hand_tool_enable.title= hand_tool_enable_label= hand_tool_disable.title= hand_tool_disable_label= To-do (wish): persistence of hand tool preference, preferably a global setting. secondaryToolbarButton-handTool.png created by Stephen Horlander <shorlander@mozilla.com>
2013-10-03 05:09:43 +09:00
}
Update Grab to pan to fix performance issue Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme See also https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f Changes versus grab-to-pan.js: Moved inline style to viewer.css, lowered z-index from 2e9 to 50000 (note to future maintainers: make sure that all other z-index values stay below 50000!).
2014-01-29 01:05:30 +09:00
.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
cursor: inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing {
Implement hand tool The logic for the hand tool is implemented in a separate project, maintained at https://github.com/Rob--W/grab-to-pan.js Integration notes - Added toggle as an entry under the Secondary toolbar - Added shortcut "h" to toggle hand tool (to-do: document this in wiki after merge). This shortcut is also used in Adobe's Acrobat Reader. To-do: localizations for: hand_tool_enable.title= hand_tool_enable_label= hand_tool_disable.title= hand_tool_disable_label= To-do (wish): persistence of hand tool preference, preferably a global setting. secondaryToolbarButton-handTool.png created by Stephen Horlander <shorlander@mozilla.com>
2013-10-03 05:09:43 +09:00
cursor: url("images/grabbing.cur"), move !important;
Add unprefixed grab/grabbing cursor Unprefixed "grab" / "grabbing" values of cursor will land in Firefox 27 (https://bugzilla.mozilla.org/show_bug.cgi?id=880672) (https://github.com/Rob--W/grab-to-pan.js/commit/fda961a3)
2013-12-17 03:01:59 +09:00
cursor: grabbing !important;
Update Grab to pan to fix performance issue Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme See also https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f Changes versus grab-to-pan.js: Moved inline style to viewer.css, lowered z-index from 2e9 to 50000 (note to future maintainers: make sure that all other z-index values stay below 50000!).
2014-01-29 01:05:30 +09:00
position: fixed;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: rgba(0, 0, 0, 0);
Update Grab to pan to fix performance issue Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme See also https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f Changes versus grab-to-pan.js: Moved inline style to viewer.css, lowered z-index from 2e9 to 50000 (note to future maintainers: make sure that all other z-index values stay below 50000!).
2014-01-29 01:05:30 +09:00
display: block;
top: 0;
left: 0;
Get rid of weird scrollbar on mouse down
2014-01-30 23:06:04 +09:00
right: 0;
bottom: 0;
Update Grab to pan to fix performance issue Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme See also https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f Changes versus grab-to-pan.js: Moved inline style to viewer.css, lowered z-index from 2e9 to 50000 (note to future maintainers: make sure that all other z-index values stay below 50000!).
2014-01-29 01:05:30 +09:00
overflow: hidden;
z-index: 50000; /* should be higher than anything else in PDF.js! */
Implement hand tool The logic for the hand tool is implemented in a separate project, maintained at https://github.com/Rob--W/grab-to-pan.js Integration notes - Added toggle as an entry under the Secondary toolbar - Added shortcut "h" to toggle hand tool (to-do: document this in wiki after merge). This shortcut is also used in Adobe's Acrobat Reader. To-do: localizations for: hand_tool_enable.title= hand_tool_enable_label= hand_tool_disable.title= hand_tool_disable_label= To-do (wish): persistence of hand tool preference, preferably a global setting. secondaryToolbarButton-handTool.png created by Stephen Horlander <shorlander@mozilla.com>
2013-10-03 05:09:43 +09:00
}
Adds support for the new mozPrintCallback api.
2012-06-29 01:50:25 +09:00
@page {
margin: 0;
Make the textLayer divs prevent whitespaces
2012-09-13 03:05:34 +09:00
}
Adds styles for small screens
2012-05-16 04:47:33 +09:00
Adds support for the new mozPrintCallback api.
2012-06-29 01:50:25 +09:00
#printContainer {
display: none;
}
Merge remote-tracking branch 'mozilla/master' into print-visible Conflicts: web/viewer.css
2012-05-25 21:38:50 +09:00
Use high DPI icons on semi-high DPI screens. The icons looks really fuzzy on a machine with a device pixel ratio of 1.5. Using the 2x icons looks much better.
2018-12-15 09:27:38 +09:00
@media screen and (min-resolution: 1.1dppx) {
Implement Retina assets
2014-02-27 06:22:38 +09:00
/* Rules for Retina screens */
.toolbarButton::before {
Fixes HiDPI icons of the secondary toolbar for Chrome
2014-03-18 01:25:50 +09:00
transform: scale(0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
top: -5px;
}
.secondaryToolbarButton::before {
transform: scale(0.5);
top: -4px;
}
html[dir='ltr'] .toolbarButton::before,
html[dir='rtl'] .toolbarButton::before {
left: -1px;
}
html[dir='ltr'] .secondaryToolbarButton::before {
left: -2px;
}
html[dir='rtl'] .secondaryToolbarButton::before {
left: 186px;
}
Add updated loading-small.png (and corresponding Retina) asset
2014-08-26 05:27:33 +09:00
.toolbarField.pageNumber.visiblePageIsLoading,
#findInput[data-status="pending"] {
background-image: url(images/loading-small@2x.png);
background-size: 16px 17px;
}
Prevent the zoom dropdown icon from being overridden when the element is `:active` (bug 1619595) This changes the dropdown icon from being set using the `background` CSS property, to being set with `::after` which is *similar* to all the other toolbar button icons (which use `::before`). Also tweaks the dropdown `background-color` on `:hover` slightly, since the other changes made it too light.
2020-03-04 23:56:08 +09:00
.dropdownToolbarButton::after {
transform: scale(0.5);
top: -5px;
content: url(images/toolbarButton-menuArrows@2x.png);
}
html[dir='ltr'] .dropdownToolbarButton::after {
right: 4px;
}
html[dir='rtl'] .dropdownToolbarButton::after {
left: 4px;
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
no need to set textlayer properties which are overwritten in individual styles.
2014-08-20 05:47:39 +09:00
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton#sidebarToggle::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/toolbarButton-sidebarToggle@2x.png);
}
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton#secondaryToolbarToggle::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/toolbarButton-secondaryToolbarToggle@2x.png);
}
html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.findPrevious::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/findbarButton-previous@2x.png);
}
html[dir='rtl'] .toolbarButton.findPrevious::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.findNext::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/findbarButton-next@2x.png);
}
html[dir='rtl'] .toolbarButton.findNext::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.pageUp::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/toolbarButton-pageUp@2x.png);
}
html[dir='rtl'] .toolbarButton.pageUp::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
.toolbarButton.pageDown::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/toolbarButton-pageDown@2x.png);
}
html[dir='rtl'] .toolbarButton.pageDown::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
.toolbarButton.zoomIn::before {
content: url(images/toolbarButton-zoomIn@2x.png);
}
.toolbarButton.zoomOut::before {
content: url(images/toolbarButton-zoomOut@2x.png);
}
.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
content: url(images/toolbarButton-presentationMode@2x.png);
}
.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
content: url(images/toolbarButton-print@2x.png);
}
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
content: url(images/toolbarButton-openFile@2x.png);
}
.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
content: url(images/toolbarButton-download@2x.png);
}
.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
content: url(images/toolbarButton-bookmark@2x.png);
}
#viewThumbnail.toolbarButton::before {
content: url(images/toolbarButton-viewThumbnail@2x.png);
}
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
#viewOutline.toolbarButton::before {
Implement Retina assets
2014-02-27 06:22:38 +09:00
content: url(images/toolbarButton-viewOutline@2x.png);
}
html[dir="rtl"] #viewOutline.toolbarButton::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Preliminary attachments support Added a partial Filespec support Added getAttachments in API Added a new attachments view in UI (with a new icon by @shorlander)
2014-03-19 05:32:47 +09:00
#viewAttachments.toolbarButton::before {
content: url(images/toolbarButton-viewAttachments@2x.png);
}
Implement Retina assets
2014-02-27 06:22:38 +09:00
#viewFind.toolbarButton::before {
content: url(images/toolbarButton-search@2x.png);
}
.secondaryToolbarButton.firstPage::before {
content: url(images/secondaryToolbarButton-firstPage@2x.png);
}
.secondaryToolbarButton.lastPage::before {
content: url(images/secondaryToolbarButton-lastPage@2x.png);
}
.secondaryToolbarButton.rotateCcw::before {
content: url(images/secondaryToolbarButton-rotateCcw@2x.png);
}
.secondaryToolbarButton.rotateCw::before {
content: url(images/secondaryToolbarButton-rotateCw@2x.png);
}
Unify handling of various cursor tools, e.g. the current Hand Tool and a possible future Zoom Tool, in a new `PDFCursorTools` module With the current way that the `HandTool` is implemented, if someone would try to also add a Zoom tool (as issue 1260 asks for) that probably wouldn't work very well given that you'd then have two cursor tools which may not play nice together. Hence this patch, which attempts to refactor things so that it should be simpler to add e.g. a Zoom tool as well (given that that issue is marked as "good-beginner-bug", and I'm not sure if that really applies considering the current state of the code). Note that I personally have no interest in implementing a Zoom tool (similar to Adobe Reader) since I wouldn't use it, but I figured that it can't hurt to make this code a bit more future proof.
2016-09-07 20:30:26 +09:00
.secondaryToolbarButton.selectTool::before {
content: url(images/secondaryToolbarButton-selectTool@2x.png);
}
Implement Retina assets
2014-02-27 06:22:38 +09:00
.secondaryToolbarButton.handTool::before {
content: url(images/secondaryToolbarButton-handTool@2x.png);
}
Add scrolling modes to web viewer In addition to the default scrolling mode (vertical), this commit adds horizontal and wrapped scrolling, implemented primarily with CSS.
2018-05-15 12:10:32 +09:00
.secondaryToolbarButton.scrollVertical::before {
content: url(images/secondaryToolbarButton-scrollVertical@2x.png);
}
.secondaryToolbarButton.scrollHorizontal::before {
content: url(images/secondaryToolbarButton-scrollHorizontal@2x.png);
}
.secondaryToolbarButton.scrollWrapped::before {
content: url(images/secondaryToolbarButton-scrollWrapped@2x.png);
}
Add spread modes to web viewer This builds on the scrolling mode work to add three buttons for joining page spreads together: one for the default view, with no page spreads, and two for spreads starting on odd-numbered or even-numbered pages.
2018-05-15 12:10:32 +09:00
.secondaryToolbarButton.spreadNone::before {
content: url(images/secondaryToolbarButton-spreadNone@2x.png);
}
.secondaryToolbarButton.spreadOdd::before {
content: url(images/secondaryToolbarButton-spreadOdd@2x.png);
}
.secondaryToolbarButton.spreadEven::before {
content: url(images/secondaryToolbarButton-spreadEven@2x.png);
}
Implement Retina assets
2014-02-27 06:22:38 +09:00
.secondaryToolbarButton.documentProperties::before {
content: url(images/secondaryToolbarButton-documentProperties@2x.png);
}
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler::before {
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
transform: scale(0.5);
top: -1px;
Switch `expanded/collapsed` in the names of the `treeitem-*` assets It appears to me that the `expanded/collapsed` part of the names got switched around, since I'd expect the following convention: - `v` == expanded - `>` == collapsed
2015-08-28 06:09:00 +09:00
content: url(images/treeitem-expanded@2x.png);
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
.treeItemToggler.treeItemsHidden::before {
Switch `expanded/collapsed` in the names of the `treeitem-*` assets It appears to me that the `expanded/collapsed` part of the names got switched around, since I'd expect the following convention: - `v` == expanded - `>` == collapsed
2015-08-28 06:09:00 +09:00
content: url(images/treeitem-collapsed@2x.png);
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItemToggler.treeItemsHidden::before {
Replace the RTL images with CSS transforms of the standard images (issue 11766) This avoids unnecessary duplication of many images, thus reducing the size of PDF.js image resources slightly. Note that since the images should only be flipped horizontally, this required specifying the horizontal/vertical scaling separately for the hiDPI-images.
2020-03-31 05:32:07 +09:00
transform: scale(-0.5, 0.5);
Add mirrored triangle (TOC item icon)
2015-09-06 22:34:02 +09:00
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='ltr'] .treeItemToggler::before {
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
right: 0;
}
Extract common methods from `PDFOutlineViewer`/`PDFAttachmentViewer` into a new abstract `BaseTreeViewer` class These two classes are unsurprisingly quite similar, and with upcoming changes[1] the amount of (essentially) duplicated code will increase even further. Notable changes: - Collect shared functionality in the `BaseTreeViewer` class, reducing both current and future code-duplication. - Reduce unnecessary duplication in the CSS rules, which will be particularly useful with upcoming changes. - Tweak the attachmentsView to use links, rather than buttons, to simplify (primarily) the CSS rules. --- [1] Once API support for "Optional Content" lands, I've got more-or-less finished patches to add viewer support as well.
2020-08-04 19:40:59 +09:00
html[dir='rtl'] .treeItemToggler::before {
Use the Retina assets for `outlineItemToggler` when in HiDPI mode
2015-08-28 00:06:40 +09:00
left: 0;
}
Implement Retina assets
2014-02-27 06:22:38 +09:00
}
Adds support for the new mozPrintCallback api.
2012-06-29 01:50:25 +09:00
@media print {
Remove background when printing.
2013-05-01 06:39:57 +09:00
/* General rules for printing. */
body {
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background: rgba(0, 0, 0, 0) none;
Remove background when printing.
2013-05-01 06:39:57 +09:00
}
Add back basic printing support for non-moz browsers. Shadow/cache supports browsing. Destroy pages on error and only abort if supported.
2012-07-13 02:31:20 +09:00
/* Rules for browsers that don't support mozPrintCallback. */
Secondary toolbar
2013-09-05 06:48:31 +09:00
#sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
Merge remote-tracking branch 'mozilla/master' into print-visible Conflicts: web/viewer.css
2012-05-25 21:38:50 +09:00
display: none;
}
Fix printing behaviour in Chrome Two major issues: 1. Border/shadow around every page. Removed by adding "border:none". 2. Added "overflow:visible" (overrides "overflow:auto") in #viewContainer. This solves two problems: - It prevents scrollbars from appearing. - Every "page" is automatically resized to fit on a printed page, just like the Firefox. To see what's wrong, here's a picture of how PDF.js rendered the pdf in Chrome (using "Print to PDF" feature of Chrome): https://robwu.nl/pdfjs/pdfjs-print-with-chromium-28.pdf Successfully tested with Chrome 28 and Firefox 22. Solves #3445
2013-07-15 23:23:43 +09:00
#viewerContainer {
overflow: visible;
}
Add back basic printing support for non-moz browsers. Shadow/cache supports browsing. Destroy pages on error and only abort if supported.
2012-07-13 02:31:20 +09:00
#mainContainer, #viewerContainer, .page, .page canvas {
position: static;
padding: 0;
margin: 0;
}
.page {
float: left;
display: none;
Fix printing behaviour in Chrome Two major issues: 1. Border/shadow around every page. Removed by adding "border:none". 2. Added "overflow:visible" (overrides "overflow:auto") in #viewContainer. This solves two problems: - It prevents scrollbars from appearing. - Every "page" is automatically resized to fit on a printed page, just like the Firefox. To see what's wrong, here's a picture of how PDF.js rendered the pdf in Chrome (using "Print to PDF" feature of Chrome): https://robwu.nl/pdfjs/pdfjs-print-with-chromium-28.pdf Successfully tested with Chrome 28 and Firefox 22. Solves #3445
2013-07-15 23:23:43 +09:00
border: none;
Add back basic printing support for non-moz browsers. Shadow/cache supports browsing. Destroy pages on error and only abort if supported.
2012-07-13 02:31:20 +09:00
box-shadow: none;
Fixes printing regression a10fde1
2014-10-01 08:01:30 +09:00
background-clip: content-box;
Convert all named colors to RGBA colors
2019-12-25 22:44:05 +09:00
background-color: rgba(255, 255, 255, 1);
Add back basic printing support for non-moz browsers. Shadow/cache supports browsing. Destroy pages on error and only abort if supported.
2012-07-13 02:31:20 +09:00
}
.page[data-loaded] {
display: block;
}
dont display file input when printing closes #2464
2013-09-21 08:01:34 +09:00
.fileInput {
display: none;
}
Moves mozPrintCallback specific code to firefox_printservice.js
2016-10-07 06:46:30 +09:00
/* Rules for browsers that support PDF.js printing */
body[data-pdfjsprinting] #outerContainer {
Add back basic printing support for non-moz browsers. Shadow/cache supports browsing. Destroy pages on error and only abort if supported.
2012-07-13 02:31:20 +09:00
display: none;
}
Moves mozPrintCallback specific code to firefox_printservice.js
2016-10-07 06:46:30 +09:00
body[data-pdfjsprinting] #printContainer {
Merge remote-tracking branch 'mozilla/master' into print-visible Conflicts: web/viewer.css
2012-05-25 21:38:50 +09:00
display: block;
}
Fix insertion of blank pages during printing due to non-matching page sizes
2016-02-11 06:10:03 +09:00
#printContainer {
height: 100%;
}
Set page size via @page + size In Blink-based browsers, there is a mismatch between document size and paper size. Even if exactly the same values and unit are used, it is possible that the printed results takes more pages than expected. To solve the issue, the page size is set via @page size, and the canvas and ancestor nodes are assigned a width+height of 100% (=relative to the page). This change resolves bugs such as blank pages and split pages.
2015-03-19 07:15:43 +09:00
/* wrapper around (scaled) print canvas elements */
#printContainer > div {
Adds support for the new mozPrintCallback api.
2012-06-29 01:50:25 +09:00
position: relative;
top: 0;
left: 0;
Printing canvases at PDF document size.
2016-10-06 21:51:45 +09:00
width: 1px;
height: 1px;
overflow: visible;
page-break-after: always;
page-break-inside: avoid;
Set page size via @page + size In Blink-based browsers, there is a mismatch between document size and paper size. Even if exactly the same values and unit are used, it is possible that the printed results takes more pages than expected. To solve the issue, the page size is set via @page size, and the canvas and ancestor nodes are assigned a width+height of 100% (=relative to the page). This change resolves bugs such as blank pages and split pages.
2015-03-19 07:15:43 +09:00
}
Removes mozPrintCallback polyfill, converts canvas to PNG.
2016-10-08 21:36:55 +09:00
#printContainer canvas,
#printContainer img {
Set `direction: ltr;` on the canvases used during printing (bug 1335712) This essentially mirrors the CSS rules used for the viewer itself, see `web/pdf_viewer.css`, and according to my very quick tests it seems to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1335712
2020-08-11 01:31:07 +09:00
direction: ltr;
Fixes printing regression a10fde1
2014-10-01 08:01:30 +09:00
display: block;
Adds support for the new mozPrintCallback api.
2012-06-29 01:50:25 +09:00
}
Merge remote-tracking branch 'mozilla/master' into print-visible Conflicts: web/viewer.css
2012-05-25 21:38:50 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.visibleLargeView,
.visibleMediumView,
.visibleSmallView {
display: none;
}
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 900px) {
#toolbarViewerMiddle {
display: table;
margin: auto;
left: auto;
position: inherit;
transform: none;
}
Simplify small screen CSS logic
2012-05-22 00:59:43 +09:00
}
Adds styles for small screens
2012-05-16 04:47:33 +09:00
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 840px) {
Adds styles for small screens
2012-05-16 04:47:33 +09:00
#sidebarContent {
Convert all HSLA colors to RGBA colors
2019-12-25 22:15:39 +09:00
background-color: rgba(0, 0, 0, 0.7);
Adds styles for small screens
2012-05-16 04:47:33 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {
Fix regression affecting the horizontal `viewerContainer` offset for small window widths (PR 9816 follow-up) *The danger of fixing one bug is that it can, sometimes too easily, cause another one in the process; sorry for not catching this when testing PR 9816 locally.* When the *entire* viewer becomes narrow enough, as controlled by the `@media all and (max-width: 840px)` media query, the sidebar should (semi-transparently) overlay the `viewerContainer` instead of moving it horizontally. Unfortunately the changes made in PR 9816 caused the relevant CSS rules to be skipped, because of how the inheritance model works in CSS. I'm well aware that `!important` is usually advised against, since it "breaks" the CSS inheritance model. However in this case it seemed reasonable to use it, to not only fix the bug at hand but to also prevent similar bugs from occurring in the future.
2018-06-16 03:07:51 +09:00
left: 0px !important;
Adds styles for small screens
2012-05-16 04:47:33 +09:00
}
Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591.
2017-09-30 23:41:46 +09:00
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer {
Fix regression affecting the horizontal `viewerContainer` offset for small window widths (PR 9816 follow-up) *The danger of fixing one bug is that it can, sometimes too easily, cause another one in the process; sorry for not catching this when testing PR 9816 locally.* When the *entire* viewer becomes narrow enough, as controlled by the `@media all and (max-width: 840px)` media query, the sidebar should (semi-transparently) overlay the `viewerContainer` instead of moving it horizontally. Unfortunately the changes made in PR 9816 caused the relevant CSS rules to be skipped, because of how the inheritance model works in CSS. I'm well aware that `!important` is usually advised against, since it "breaks" the CSS inheritance model. However in this case it seemed reasonable to use it, to not only fix the bug at hand but to also prevent similar bugs from occurring in the future.
2018-06-16 03:07:51 +09:00
right: 0px !important;
Adds styles for small screens
2012-05-16 04:47:33 +09:00
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
#outerContainer .hiddenLargeView,
#outerContainer .hiddenMediumView {
display: inherit;
}
#outerContainer .visibleLargeView,
#outerContainer .visibleMediumView {
display: none;
}
}
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 770px) {
Secondary toolbar
2013-09-05 06:48:31 +09:00
#outerContainer .hiddenLargeView {
display: none;
}
#outerContainer .visibleLargeView {
display: inherit;
}
}
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 700px) {
Secondary toolbar
2013-09-05 06:48:31 +09:00
#outerContainer .hiddenMediumView {
display: none;
}
#outerContainer .visibleMediumView {
display: inherit;
Adds styles for small screens
2012-05-16 04:47:33 +09:00
}
}
Don't print toolbar and not loaded pages
2012-05-22 03:08:42 +09:00
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 640px) {
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
.hiddenSmallView, .hiddenSmallView * {
Don't print toolbar and not loaded pages
2012-05-22 03:08:42 +09:00
display: none;
}
Secondary toolbar
2013-09-05 06:48:31 +09:00
.visibleSmallView {
display: inherit;
}
Don't hide the download/print buttons when view is small.
2013-02-26 09:53:54 +09:00
.toolbarButtonSpacer {
width: 0;
}
Viewer: enable find functionality for small devices The find functionality is currently not available for small devices because the find dialog is not responsive. This patch fixes that. To achieve this goal, the HTML is changed to always show the find button. To prevent issues because of the addition of an extra button for small views, the previous/next page buttons are hidden if the view becomes small. These buttons are not useful anyway because on small devices navigation is usually done via scrolling. The find functionality is much more useful to have in this case. Moreover, we wrap the existing elements into separate `div`s so that the browser can position the elements itself when the view becomes smaller and logically connected elements stay together when this happens. In the CSS, extra rules for the find bar have been added to ensure that the dialog's doorhanger is always below the find button. All findbar `div`s are forced to be 32 pixels high to prevent the find message text being aligned under the checkboxes. Finally, the find message is only visible when there is actually text to display. This prevents wrapping issues because, by default, the label has padding and margin even if there is no text.
2017-03-09 07:54:28 +09:00
html[dir='ltr'] .findbar {
left: 38px;
}
html[dir='rtl'] .findbar {
right: 38px;
}
Don't print toolbar and not loaded pages
2012-05-22 03:08:42 +09:00
}
Hide page label and zoom selector
2012-05-24 07:10:53 +09:00
Viewer: improve responsiveness and clean up CSS This patch resolves the responsiveness issues for the toolbar in the viewer. Depending on the language (for example the Dutch language), elements could overlap when the viewport size is reduced. The main issue here is that the CSS rules are unnecessarily complex and handle lots of different cases (LTR/RTL, displacements for specific viewport widths, et cetera). By removing this complexity and letting the browser handle the responsiveness, we not only get simpler CSS rules and HTML mark-up, but the responsiveness issues are mostly fixed at the same time. We no longer have to position the elements manually (by setting their `left` attribute value) anymore.
2016-11-04 00:56:57 +09:00
@media all and (max-width: 535px) {
Remove the "Page: " label and replace it with a tooltip The following reasoning was used for deciding to remove the "Page: " label, and replace it with a tooltip, from the main toolbar: - We have no other visible labels in the *main* toolbar (e.g. the Zoom dropdown doesn't have a label, but only a tooltip). - We already hide the "Page: " label when the viewer is narrow. - The varying width of the "Page: " label in different locales is already causing issues for many languages, with overlap in the main toolbar as a result. Trying to create responsive CSS styles that works well in all locales is already difficult, and if we add support for page labels that will only further compound the issues. - Some PDF viewers (e.g. Adobe Reader, pdfium in Chrome) doesn't show labels in the UI by default.
2016-01-28 21:02:17 +09:00
#scaleSelectContainer {
Hide page label and zoom selector
2012-05-24 07:10:53 +09:00
display: none;
}
}
Reference in New Issue Copy Permalink