2014-10-01 00:48:29 +09:00
|
|
|
/* Copyright 2014 Mozilla Foundation
|
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.
|
|
|
|
|
*/
|
|
|
|
|
|
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;
|
2020-07-30 01:31:58 +09:00
|
|
|
|
|
|
|
|
--toolbar-icon-opacity: 0.7;
|
|
|
|
|
--doorhanger-icon-opacity: 0.9;
|
|
|
|
|
|
|
|
|
|
--main-color: rgba(12, 12, 13, 1);
|
|
|
|
|
--body-bg-color: rgba(237, 237, 240, 1);
|
|
|
|
|
--errorWrapper-bg-color: rgba(255, 74, 74, 1);
|
|
|
|
|
--progressBar-color: rgba(10, 132, 255, 1);
|
2020-08-28 23:04:43 +09:00
|
|
|
--progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
|
|
|
|
|
--progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
|
2020-07-30 01:31:58 +09:00
|
|
|
--scrollbar-color: auto;
|
|
|
|
|
--scrollbar-bg-color: auto;
|
|
|
|
|
|
|
|
|
|
--sidebar-bg-color: rgba(245, 246, 247, 1);
|
|
|
|
|
--toolbar-bg-color: rgba(249, 249, 250, 1);
|
|
|
|
|
--toolbar-border-color: rgba(204, 204, 204, 1);
|
|
|
|
|
--button-hover-color: rgba(221, 222, 223, 1);
|
|
|
|
|
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
--dropdown-btn-bg-color: rgba(215, 215, 219, 1);
|
|
|
|
|
--separator-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
--field-color: rgba(6, 6, 6, 1);
|
|
|
|
|
--field-bg-color: rgba(255, 255, 255, 1);
|
|
|
|
|
--field-border-color: rgba(187, 187, 188, 1);
|
|
|
|
|
--findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
|
|
|
|
|
--outline-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
--outline-hover-color: rgba(0, 0, 0, 0.9);
|
|
|
|
|
--outline-active-color: rgba(0, 0, 0, 0.08);
|
|
|
|
|
--outline-active-bg-color: rgba(0, 0, 0, 1);
|
|
|
|
|
--sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
|
|
|
|
|
--doorhanger-bg-color: rgba(255, 255, 255, 1);
|
|
|
|
|
--doorhanger-border-color: rgba(12, 12, 13, 0.2);
|
|
|
|
|
--doorhanger-hover-color: rgba(237, 237, 237, 1);
|
|
|
|
|
--doorhanger-separator-color: rgba(222, 222, 222, 1);
|
|
|
|
|
--overlay-button-bg-color: rgba(12, 12, 13, 0.1);
|
|
|
|
|
--overlay-button-hover-color: rgba(12, 12, 13, 0.3);
|
|
|
|
|
|
|
|
|
|
--loading-icon: url(images/loading.svg);
|
|
|
|
|
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
|
|
|
|
|
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
|
|
|
|
|
--toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
|
|
|
|
|
--toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
|
|
|
|
|
--toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
|
|
|
|
|
--toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
|
|
|
|
|
--toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
|
|
|
|
|
--toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
|
|
|
|
|
--toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
|
|
|
|
|
--toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
|
|
|
|
|
--toolbarButton-print-icon: url(images/toolbarButton-print.svg);
|
|
|
|
|
--toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
|
|
|
|
|
--toolbarButton-download-icon: url(images/toolbarButton-download.svg);
|
|
|
|
|
--toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
|
|
|
|
|
--toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
|
|
|
|
|
--toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
|
|
|
|
|
--toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
|
[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)
By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.
Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)
Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.
To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
- Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
- Uses a slightly different formatting, compared to the "regular" headings.
- Is localizable.
Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-07 04:01:03 +09:00
|
|
|
--toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
|
2020-07-30 01:31:58 +09:00
|
|
|
--toolbarButton-search-icon: url(images/toolbarButton-search.svg);
|
|
|
|
|
--findbarButton-previous-icon: url(images/findbarButton-previous.svg);
|
|
|
|
|
--findbarButton-next-icon: url(images/findbarButton-next.svg);
|
|
|
|
|
--secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
|
|
|
|
|
--secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
|
|
|
|
|
--secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
|
|
|
|
|
--secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
|
|
|
|
|
--secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
|
|
|
|
|
--secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
|
|
|
|
|
--secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
:root {
|
|
|
|
|
--main-color: rgba(249, 249, 250, 1);
|
|
|
|
|
--body-bg-color: rgba(42, 42, 46, 1);
|
|
|
|
|
--errorWrapper-bg-color: rgba(199, 17, 17, 1);
|
|
|
|
|
--progressBar-color: rgba(0, 96, 223, 1);
|
2020-08-28 23:04:43 +09:00
|
|
|
--progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
|
|
|
|
|
--progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
|
2020-07-30 01:31:58 +09:00
|
|
|
--scrollbar-color: rgba(121, 121, 123, 1);
|
|
|
|
|
--scrollbar-bg-color: rgba(35, 35, 39, 1);
|
|
|
|
|
|
|
|
|
|
--sidebar-bg-color: rgba(50, 50, 52, 1);
|
|
|
|
|
--toolbar-bg-color: rgba(56, 56, 61, 1);
|
|
|
|
|
--toolbar-border-color: rgba(12, 12, 13, 1);
|
|
|
|
|
--button-hover-color: rgba(102, 102, 103, 1);
|
|
|
|
|
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
--dropdown-btn-bg-color: rgba(74, 74, 79, 1);
|
|
|
|
|
--separator-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
--field-color: rgba(250, 250, 250, 1);
|
|
|
|
|
--field-bg-color: rgba(64, 64, 68, 1);
|
|
|
|
|
--field-border-color: rgba(115, 115, 115, 1);
|
|
|
|
|
--findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
|
|
|
|
|
--outline-color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
--outline-hover-color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
--outline-active-color: rgba(255, 255, 255, 0.08);
|
|
|
|
|
--outline-active-bg-color: rgba(255, 255, 255, 1);
|
|
|
|
|
--sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
|
|
|
|
|
--doorhanger-bg-color: rgba(74, 74, 79, 1);
|
|
|
|
|
--doorhanger-border-color: rgba(39, 39, 43, 1);
|
|
|
|
|
--doorhanger-hover-color: rgba(93, 94, 98, 1);
|
|
|
|
|
--doorhanger-separator-color: rgba(92, 92, 97, 1);
|
|
|
|
|
--overlay-button-bg-color: rgba(92, 92, 97, 1);
|
|
|
|
|
--overlay-button-hover-color: rgba(115, 115, 115, 1);
|
|
|
|
|
|
|
|
|
|
--loading-icon: url(images/loading-dark.svg);
|
|
|
|
|
--treeitem-expanded-icon: url(images/treeitem-expanded-dark.svg);
|
|
|
|
|
--treeitem-collapsed-icon: url(images/treeitem-collapsed-dark.svg);
|
|
|
|
|
--toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow-dark.svg);
|
|
|
|
|
--toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle-dark.svg);
|
|
|
|
|
--toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle-dark.svg);
|
|
|
|
|
--toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp-dark.svg);
|
|
|
|
|
--toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown-dark.svg);
|
|
|
|
|
--toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut-dark.svg);
|
|
|
|
|
--toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn-dark.svg);
|
|
|
|
|
--toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode-dark.svg);
|
|
|
|
|
--toolbarButton-print-icon: url(images/toolbarButton-print-dark.svg);
|
|
|
|
|
--toolbarButton-openFile-icon: url(images/toolbarButton-openFile-dark.svg);
|
|
|
|
|
--toolbarButton-download-icon: url(images/toolbarButton-download-dark.svg);
|
|
|
|
|
--toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark-dark.svg);
|
|
|
|
|
--toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail-dark.svg);
|
|
|
|
|
--toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline-dark.svg);
|
|
|
|
|
--toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments-dark.svg);
|
[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)
By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.
Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)
Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.
To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
- Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
- Uses a slightly different formatting, compared to the "regular" headings.
- Is localizable.
Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-07 04:01:03 +09:00
|
|
|
--toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers-dark.svg);
|
2020-07-30 01:31:58 +09:00
|
|
|
--toolbarButton-search-icon: url(images/toolbarButton-search-dark.svg);
|
|
|
|
|
--findbarButton-previous-icon: url(images/findbarButton-previous-dark.svg);
|
|
|
|
|
--findbarButton-next-icon: url(images/findbarButton-next-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven-dark.svg);
|
|
|
|
|
--secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties-dark.svg);
|
|
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
* {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2011-05-26 23:02:52 +09:00
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
html {
|
|
|
|
|
height: 100%;
|
2016-02-11 06:10:03 +09:00
|
|
|
width: 100%;
|
2013-12-15 07:01:49 +09:00
|
|
|
/* Font size is needed to make the activity bar the correct size. */
|
2013-10-10 07:04:58 +09:00
|
|
|
font-size: 10px;
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
2012-04-12 08:12:51 +09:00
|
|
|
height: 100%;
|
2016-02-11 06:10:03 +09:00
|
|
|
width: 100%;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--body-bg-color);
|
2012-06-13 18:15:31 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body,
|
|
|
|
|
input,
|
2012-06-13 18:27:22 +09:00
|
|
|
button,
|
2012-06-13 18:15:31 +09:00
|
|
|
select {
|
2012-06-14 02:47:46 +09:00
|
|
|
font: message-box;
|
2014-01-27 19:57:33 +09:00
|
|
|
outline: none;
|
2020-07-30 01:31:58 +09:00
|
|
|
scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-26 09:20:13 +09:00
|
|
|
.hidden {
|
2013-09-05 06:48:31 +09:00
|
|
|
display: none !important;
|
2012-04-26 09:20:13 +09:00
|
|
|
}
|
2011-10-19 04:40:59 +09:00
|
|
|
[hidden] {
|
2012-01-25 08:13:50 +09:00
|
|
|
display: none !important;
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2015-02-04 22:10:45 +09:00
|
|
|
#viewerContainer.pdfPresentationMode:-ms-fullscreen {
|
2013-09-11 04:40:14 +09:00
|
|
|
top: 0px !important;
|
2013-09-11 05:17:40 +09:00
|
|
|
overflow: hidden !important;
|
2013-09-11 04:40:14 +09:00
|
|
|
}
|
|
|
|
|
|
2015-02-04 22:10:45 +09:00
|
|
|
#viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
|
2019-12-26 00:16:13 +09:00
|
|
|
background-color: rgba(0, 0, 0, 1);
|
2013-09-11 04:40:14 +09:00
|
|
|
}
|
|
|
|
|
|
2015-02-04 22:10:45 +09:00
|
|
|
#viewerContainer.pdfPresentationMode:fullscreen {
|
2012-07-31 00:12:49 +09:00
|
|
|
top: 0px;
|
2019-12-25 22:44:05 +09:00
|
|
|
border-top: 2px solid rgba(0, 0, 0, 0);
|
2019-12-26 00:16:13 +09:00
|
|
|
background-color: rgba(0, 0, 0, 1);
|
2012-07-31 00:12:49 +09:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2012-10-11 09:32:48 +09:00
|
|
|
overflow: hidden;
|
|
|
|
|
cursor: none;
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2013-09-11 04:40:14 +09:00
|
|
|
}
|
|
|
|
|
|
2015-02-04 22:10:45 +09:00
|
|
|
.pdfPresentationMode:fullscreen a:not(.internalLink) {
|
2013-03-26 01:50:49 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2018-11-18 23:54:08 +09:00
|
|
|
.pdfPresentationMode:fullscreen .textLayer > span {
|
2015-02-04 22:10:45 +09:00
|
|
|
cursor: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfPresentationMode.pdfPresentationModeControls > *,
|
2018-11-18 23:54:08 +09:00
|
|
|
.pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
|
2012-10-11 09:32:48 +09:00
|
|
|
cursor: default;
|
2012-07-31 00:12:49 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#outerContainer {
|
2011-07-29 02:48:05 +09:00
|
|
|
width: 100%;
|
2012-04-12 08:12:51 +09:00
|
|
|
height: 100%;
|
2013-10-10 07:04:58 +09:00
|
|
|
position: relative;
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#sidebarContainer {
|
2012-04-26 03:34:28 +09:00
|
|
|
position: absolute;
|
2017-09-30 23:41:46 +09:00
|
|
|
top: 32px;
|
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);
|
2012-05-02 01:43:48 +09:00
|
|
|
visibility: hidden;
|
2017-09-30 23:41:46 +09:00
|
|
|
z-index: 100;
|
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);
|
2012-04-26 03:34:28 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] #sidebarContainer {
|
2012-06-11 18:03:15 +09:00
|
|
|
transition-property: left;
|
2020-02-05 08:34:44 +09:00
|
|
|
left: calc(0px - var(--sidebar-width));
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #sidebarContainer {
|
2012-06-11 18:03:15 +09:00
|
|
|
transition-property: right;
|
2020-02-05 08:34:44 +09:00
|
|
|
right: calc(0px - var(--sidebar-width));
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
|
|
|
|
|
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. */
|
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
|
|
|
}
|
|
|
|
|
|
2017-09-30 23:41:46 +09:00
|
|
|
#outerContainer.sidebarMoving #sidebarContainer,
|
|
|
|
|
#outerContainer.sidebarOpen #sidebarContainer {
|
2012-05-02 01:43:48 +09:00
|
|
|
visibility: visible;
|
2012-05-02 07:19:02 +09:00
|
|
|
}
|
2017-09-30 23:41:46 +09:00
|
|
|
html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
|
2012-04-26 05:46:17 +09:00
|
|
|
left: 0px;
|
2012-04-26 03:34:28 +09:00
|
|
|
}
|
2017-09-30 23:41:46 +09:00
|
|
|
html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
|
2012-05-02 07:08:30 +09:00
|
|
|
right: 0px;
|
2011-10-15 11:05:57 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-26 03:34:28 +09:00
|
|
|
#mainContainer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2013-02-26 09:53:54 +09:00
|
|
|
min-width: 320px;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
2012-04-26 03:34:28 +09:00
|
|
|
|
|
|
|
|
#sidebarContent {
|
2012-04-26 04:14:09 +09:00
|
|
|
top: 32px;
|
2012-04-26 03:34:28 +09:00
|
|
|
bottom: 0;
|
|
|
|
|
overflow: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-04-26 03:34:28 +09:00
|
|
|
position: absolute;
|
2017-09-30 23:41:46 +09:00
|
|
|
width: 100%;
|
2019-12-25 22:15:39 +09:00
|
|
|
background-color: rgba(0, 0, 0, 0.1);
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] #sidebarContent {
|
|
|
|
|
left: 0;
|
2019-12-25 22:15:39 +09:00
|
|
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #sidebarContent {
|
|
|
|
|
right: 0;
|
2019-12-25 22:15:39 +09:00
|
|
|
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
|
2011-08-29 05:10:14 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#viewerContainer {
|
2012-04-26 03:34:28 +09:00
|
|
|
overflow: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-04-26 03:34:28 +09:00
|
|
|
position: absolute;
|
|
|
|
|
top: 32px;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2013-07-06 22:37:03 +09:00
|
|
|
outline: none;
|
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);
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2018-06-14 23:09:22 +09:00
|
|
|
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
|
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);
|
2017-09-30 23:41:46 +09:00
|
|
|
}
|
2018-06-14 23:09:22 +09:00
|
|
|
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
|
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);
|
2017-09-30 23:41:46 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbar {
|
2013-02-07 08:19:29 +09:00
|
|
|
position: relative;
|
2012-04-26 03:34:28 +09:00
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
2012-04-12 08:12:51 +09:00
|
|
|
z-index: 9999;
|
|
|
|
|
cursor: default;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#toolbarContainer {
|
|
|
|
|
width: 100%;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#toolbarSidebar {
|
2017-09-30 23:41:46 +09:00
|
|
|
width: 100%;
|
2012-10-30 06:35:07 +09:00
|
|
|
height: 32px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--sidebar-bg-color);
|
2014-01-22 06:56:19 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] #toolbarSidebar {
|
2020-08-20 16:36:35 +09:00
|
|
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
|
2020-07-30 01:31:58 +09:00
|
|
|
0 1px 0 rgba(0, 0, 0, 0.15),
|
|
|
|
|
0 0 1px rgba(0, 0, 0, 0.1);
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
2014-01-22 06:56:19 +09:00
|
|
|
html[dir='rtl'] #toolbarSidebar {
|
|
|
|
|
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
|
2020-07-30 01:31:58 +09:00
|
|
|
0 1px 0 rgba(0, 0, 0, 0.15),
|
|
|
|
|
0 0 1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] #toolbarSidebar .toolbarButton {
|
|
|
|
|
margin-right: 2px !important;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #toolbarSidebar .toolbarButton {
|
|
|
|
|
margin-left: 2px !important;
|
2014-01-22 06:56:19 +09:00
|
|
|
}
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
#toolbarContainer, .findbar, .secondaryToolbar {
|
2012-04-26 03:34:28 +09:00
|
|
|
position: relative;
|
2012-04-12 08:12:51 +09:00
|
|
|
height: 32px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--toolbar-bg-color);
|
2014-01-22 06:56:19 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
|
2020-07-30 01:31:58 +09:00
|
|
|
box-shadow: 0 1px 0 var(--toolbar-border-color);
|
2011-05-26 23:02:52 +09:00
|
|
|
}
|
2014-01-22 06:56:19 +09:00
|
|
|
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
|
2020-07-30 01:31:58 +09:00
|
|
|
box-shadow: 0 1px 0 var(--toolbar-border-color);
|
2014-01-22 06:56:19 +09:00
|
|
|
}
|
2012-09-12 01:30:44 +09:00
|
|
|
|
2013-02-07 08:19:29 +09:00
|
|
|
#toolbarViewer {
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#loadingBar {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
2014-08-12 13:09:38 +09:00
|
|
|
height: 4px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--body-bg-color);
|
2020-08-28 23:04:43 +09:00
|
|
|
border-bottom: 1px solid var(--toolbar-border-color);
|
2013-02-07 08:19:29 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#loadingBar .progress {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 0%;
|
|
|
|
|
height: 100%;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--progressBar-color);
|
2013-02-07 08:19:29 +09:00
|
|
|
overflow: hidden;
|
|
|
|
|
transition: width 200ms;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes progressIndeterminate {
|
2015-11-01 22:19:59 +09:00
|
|
|
0% { left: -142px; }
|
|
|
|
|
100% { left: 0; }
|
2013-02-07 08:19:29 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#loadingBar .progress.indeterminate {
|
2020-08-28 23:04:43 +09:00
|
|
|
background-color: var(--progressBar-indeterminate-bg-color);
|
2013-02-07 08:19:29 +09:00
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-11-01 22:19:59 +09:00
|
|
|
#loadingBar .progress.indeterminate .glimmer {
|
2013-02-07 08:19:29 +09:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100%;
|
2015-11-01 22:19:59 +09:00
|
|
|
width: calc(100% + 150px);
|
|
|
|
|
background: repeating-linear-gradient(135deg,
|
2020-08-28 23:04:43 +09:00
|
|
|
var(--progressBar-indeterminate-blend-color) 0, var(--progressBar-indeterminate-bg-color) 5px,
|
|
|
|
|
var(--progressBar-indeterminate-bg-color) 45px, var(--progressBar-color) 55px,
|
|
|
|
|
var(--progressBar-color) 95px, var(--progressBar-indeterminate-blend-color) 100px);
|
|
|
|
|
animation: progressIndeterminate 1s linear infinite;
|
2013-02-07 08:19:29 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.findbar, .secondaryToolbar {
|
2012-09-29 04:30:07 +09:00
|
|
|
top: 32px;
|
2012-09-12 01:30:44 +09:00
|
|
|
position: absolute;
|
2012-09-29 04:30:07 +09:00
|
|
|
z-index: 10000;
|
2017-03-09 07:54:28 +09:00
|
|
|
height: auto;
|
2012-09-12 01:30:44 +09:00
|
|
|
min-width: 16px;
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 0px 4px 0px 4px;
|
2012-10-06 09:15:06 +09:00
|
|
|
margin: 4px 2px 4px 2px;
|
2019-12-25 21:28:04 +09:00
|
|
|
color: rgba(217, 217, 217, 1);
|
2012-09-12 01:30:44 +09:00
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
text-align: left;
|
2012-09-29 03:18:45 +09:00
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-09 07:54:28 +09:00
|
|
|
.findbar {
|
|
|
|
|
min-width: 300px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--toolbar-bg-color);
|
2017-03-09 07:54:28 +09:00
|
|
|
}
|
|
|
|
|
.findbar > div {
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
2017-03-09 07:54:57 +09:00
|
|
|
.findbar.wrapContainers > div {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
.findbar.wrapContainers > div#findbarMessageContainer {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
2012-10-06 09:15:06 +09:00
|
|
|
html[dir='ltr'] .findbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
left: 64px;
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .findbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
right: 64px;
|
2020-07-30 01:31:58 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] .findbar .splitToolbarButton {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] .findbar .splitToolbarButton {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.findbar .splitToolbarButton .findNext {
|
|
|
|
|
width: 29px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] .findbar .splitToolbarButton .findNext {
|
|
|
|
|
border-right: 1px solid var(--field-border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] .findbar .splitToolbarButton .findNext {
|
|
|
|
|
border-left: 1px solid var(--field-border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.findbar .splitToolbarButton .toolbarButton {
|
|
|
|
|
background-color: var(--findbar-nextprevious-btn-bg-color);
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
border-top: 1px solid var(--field-border-color);
|
|
|
|
|
border-bottom: 1px solid var(--field-border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.findbar .splitToolbarButton .toolbarButton::before {
|
|
|
|
|
top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] .findbar .splitToolbarButton > .findPrevious {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
html[dir='ltr'] .findbar .splitToolbarButton > .findNext {
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
border-bottom-right-radius: 2px;
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-top-right-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] .findbar .splitToolbarButton > .findPrevious {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .findbar .splitToolbarButton > .findNext {
|
|
|
|
|
border-bottom-left-radius: 2px;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
border-top-left-radius: 2px;
|
|
|
|
|
border-top-right-radius: 0;
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
|
2020-08-29 22:27:00 +09:00
|
|
|
.findbar input[type="checkbox"] {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-29 03:18:45 +09:00
|
|
|
.findbar label {
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2012-09-29 03:18:45 +09:00
|
|
|
}
|
|
|
|
|
|
2020-08-29 22:27:00 +09:00
|
|
|
.findbar label:hover,
|
2020-07-30 01:31:58 +09:00
|
|
|
.findbar input:focus + label {
|
|
|
|
|
background-color: var(--button-hover-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] #findInput {
|
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] #findInput {
|
|
|
|
|
border-top-left-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
|
|
|
|
|
background-color: var(--toggled-btn-bg-color) !important;
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-09 07:53:59 +09:00
|
|
|
#findInput {
|
|
|
|
|
width: 200px;
|
|
|
|
|
}
|
|
|
|
|
#findInput::-webkit-input-placeholder {
|
2019-12-25 21:28:04 +09:00
|
|
|
color: rgba(191, 191, 191, 1);
|
2017-03-09 07:53:59 +09:00
|
|
|
}
|
|
|
|
|
#findInput::placeholder {
|
2020-07-30 01:31:58 +09:00
|
|
|
font-style: normal;
|
2017-03-09 07:53:59 +09:00
|
|
|
}
|
2012-10-11 07:46:04 +09:00
|
|
|
#findInput[data-status="pending"] {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-image: var(--loading-icon);
|
2012-10-11 05:58:14 +09:00
|
|
|
background-repeat: no-repeat;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-position: 98%;
|
2012-10-11 05:58:14 +09:00
|
|
|
}
|
2014-08-26 05:58:44 +09:00
|
|
|
html[dir='rtl'] #findInput[data-status="pending"] {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-position: 3px;
|
2014-08-26 05:58:44 +09:00
|
|
|
}
|
2012-10-11 05:58:14 +09:00
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.secondaryToolbar {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 6px 0 10px 0;
|
2013-09-05 06:48:31 +09:00
|
|
|
height: auto;
|
|
|
|
|
z-index: 30000;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--doorhanger-bg-color);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] .secondaryToolbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
right: 4px;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .secondaryToolbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
left: 4px;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#secondaryToolbarButtonContainer {
|
2020-07-30 01:31:58 +09:00
|
|
|
max-width: 220px;
|
2013-09-05 06:48:31 +09:00
|
|
|
max-height: 400px;
|
|
|
|
|
overflow-y: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2013-09-27 18:44:45 +09:00
|
|
|
margin-bottom: -4px;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
2018-07-08 17:56:01 +09:00
|
|
|
#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
|
|
|
|
|
#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.doorHanger,
|
|
|
|
|
.doorHangerRight {
|
2012-09-29 04:30:07 +09:00
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
box-shadow: 0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
|
2012-09-29 04:30:07 +09:00
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
.doorHanger:after, .doorHanger:before,
|
|
|
|
|
.doorHangerRight:after, .doorHangerRight:before {
|
2012-09-29 04:30:07 +09:00
|
|
|
bottom: 100%;
|
2019-12-25 22:44:05 +09:00
|
|
|
border: solid rgba(0, 0, 0, 0);
|
2012-09-29 04:30:07 +09:00
|
|
|
content: " ";
|
|
|
|
|
height: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
.doorHanger:after,
|
|
|
|
|
.doorHangerRight:after {
|
2012-09-29 04:30:07 +09:00
|
|
|
border-width: 8px;
|
|
|
|
|
}
|
2020-07-30 01:31:58 +09:00
|
|
|
.doorHanger:after {
|
|
|
|
|
border-bottom-color: var(--toolbar-bg-color);
|
|
|
|
|
}
|
|
|
|
|
.doorHangerRight:after {
|
|
|
|
|
border-bottom-color: var(--doorhanger-bg-color);
|
|
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
.doorHanger:before,
|
|
|
|
|
.doorHangerRight:before {
|
2020-07-30 01:31:58 +09:00
|
|
|
border-bottom-color: var(--doorhanger-border-color);
|
2012-09-29 04:30:07 +09:00
|
|
|
border-width: 9px;
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
html[dir='ltr'] .doorHanger:after,
|
|
|
|
|
html[dir='rtl'] .doorHangerRight:after {
|
2020-07-30 01:31:58 +09:00
|
|
|
left: 10px;
|
2012-10-06 09:15:06 +09:00
|
|
|
margin-left: -8px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
html[dir='ltr'] .doorHanger:before,
|
|
|
|
|
html[dir='rtl'] .doorHangerRight:before {
|
2020-07-30 01:31:58 +09:00
|
|
|
left: 10px;
|
2012-09-29 04:30:07 +09:00
|
|
|
margin-left: -9px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
html[dir='rtl'] .doorHanger:after,
|
|
|
|
|
html[dir='ltr'] .doorHangerRight:after {
|
2020-07-30 01:31:58 +09:00
|
|
|
right: 10px;
|
2012-10-06 09:15:06 +09:00
|
|
|
margin-right: -8px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
html[dir='rtl'] .doorHanger:before,
|
|
|
|
|
html[dir='ltr'] .doorHangerRight:before {
|
2020-07-30 01:31:58 +09:00
|
|
|
right: 10px;
|
2012-10-06 09:15:06 +09:00
|
|
|
margin-right: -9px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-16 23:39:34 +09:00
|
|
|
#findResultsCount {
|
2019-12-25 21:28:04 +09:00
|
|
|
background-color: rgba(217, 217, 217, 1);
|
|
|
|
|
color: rgba(82, 82, 82, 1);
|
2014-07-16 23:39:34 +09:00
|
|
|
text-align: center;
|
|
|
|
|
padding: 3px 4px;
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 5px;
|
2014-07-16 23:39:34 +09:00
|
|
|
}
|
|
|
|
|
|
2012-09-29 03:18:45 +09:00
|
|
|
#findMsg {
|
2020-07-30 01:31:58 +09:00
|
|
|
color: rgba(251, 0, 0, 1);
|
2012-09-12 01:30:44 +09:00
|
|
|
}
|
2017-03-09 07:54:28 +09:00
|
|
|
#findMsg:empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2012-09-12 01:30:44 +09:00
|
|
|
|
2014-11-02 02:08:13 +09:00
|
|
|
#findInput.notFound {
|
2019-12-25 22:19:09 +09:00
|
|
|
background-color: rgba(255, 102, 102, 1);
|
2012-09-12 01:30:44 +09:00
|
|
|
}
|
|
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
#toolbarViewerMiddle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] #toolbarViewerLeft,
|
|
|
|
|
html[dir='rtl'] #toolbarViewerRight {
|
2016-11-04 00:56:57 +09:00
|
|
|
float: left;
|
2012-04-26 03:34:28 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] #toolbarViewerRight,
|
|
|
|
|
html[dir='rtl'] #toolbarViewerLeft {
|
2016-11-04 00:56:57 +09:00
|
|
|
float: right;
|
2012-04-26 03:34:28 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] #toolbarViewerLeft > *,
|
|
|
|
|
html[dir='ltr'] #toolbarViewerMiddle > *,
|
2012-10-06 09:15:06 +09:00
|
|
|
html[dir='ltr'] #toolbarViewerRight > *,
|
2017-03-09 07:54:28 +09:00
|
|
|
html[dir='ltr'] .findbar * {
|
2013-04-04 00:31:58 +09:00
|
|
|
position: relative;
|
2012-04-26 03:34:28 +09:00
|
|
|
float: left;
|
|
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='rtl'] #toolbarViewerLeft > *,
|
|
|
|
|
html[dir='rtl'] #toolbarViewerMiddle > *,
|
2012-10-06 09:15:06 +09:00
|
|
|
html[dir='rtl'] #toolbarViewerRight > *,
|
2017-03-09 07:54:28 +09:00
|
|
|
html[dir='rtl'] .findbar * {
|
2013-04-04 00:31:58 +09:00
|
|
|
position: relative;
|
2012-05-02 07:08:30 +09:00
|
|
|
float: right;
|
2012-02-07 17:23:23 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .splitToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 2px 2px 0;
|
2012-04-26 03:34:28 +09:00
|
|
|
display: inline-block;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='rtl'] .splitToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 2px 2px 0;
|
2012-05-02 07:08:30 +09:00
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
html[dir='ltr'] .splitToolbarButton > .toolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
border-radius: 2px;
|
2012-04-26 03:34:28 +09:00
|
|
|
float: left;
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='rtl'] .splitToolbarButton > .toolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
border-radius: 2px;
|
2012-05-02 07:08:30 +09:00
|
|
|
float: right;
|
2012-02-05 05:13:12 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton,
|
2014-05-12 22:50:13 +09:00
|
|
|
.secondaryToolbarButton,
|
|
|
|
|
.overlayButton {
|
2012-04-26 03:34:28 +09:00
|
|
|
border: 0 none;
|
2014-05-19 00:32:26 +09:00
|
|
|
background: none;
|
2020-07-30 01:31:58 +09:00
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
}
|
|
|
|
|
.overlayButton {
|
|
|
|
|
background-color: var(--overlay-button-bg-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.overlayButton:hover,
|
|
|
|
|
.overlayButton:focus {
|
|
|
|
|
background-color: var(--overlay-button-hover-color);
|
2012-02-05 05:13:12 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-04 23:51:21 +09:00
|
|
|
.toolbarButton > span {
|
2012-05-05 02:34:18 +09:00
|
|
|
display: inline-block;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
2011-07-29 02:48:05 +09:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton[disabled],
|
2014-05-12 22:50:13 +09:00
|
|
|
.secondaryToolbarButton[disabled],
|
|
|
|
|
.overlayButton[disabled] {
|
2012-04-26 08:48:01 +09:00
|
|
|
opacity: .5;
|
|
|
|
|
}
|
|
|
|
|
|
2012-06-08 05:51:29 +09:00
|
|
|
.splitToolbarButton.toggled .toolbarButton {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.splitToolbarButton > .toolbarButton:hover,
|
2012-05-02 01:43:48 +09:00
|
|
|
.splitToolbarButton > .toolbarButton:focus,
|
2012-06-08 05:51:29 +09:00
|
|
|
.dropdownToolbarButton:hover,
|
|
|
|
|
.toolbarButton.textButton:hover,
|
|
|
|
|
.toolbarButton.textButton:focus {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--button-hover-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
z-index: 199;
|
|
|
|
|
}
|
2014-03-19 05:32:47 +09:00
|
|
|
.splitToolbarButton > .toolbarButton {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
|
|
|
|
|
html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
|
2012-04-12 08:12:51 +09:00
|
|
|
position: relative;
|
|
|
|
|
margin: 0;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
|
|
|
|
|
html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
|
2012-04-12 08:12:51 +09:00
|
|
|
position: relative;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.splitToolbarButtonSeparator {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 10px 0;
|
2012-04-12 08:12:51 +09:00
|
|
|
width: 1px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--separator-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
z-index: 99;
|
2012-04-26 03:34:28 +09:00
|
|
|
display: inline-block;
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 4px 0;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
2020-07-30 01:31:58 +09:00
|
|
|
|
|
|
|
|
.findbar .splitToolbarButtonSeparator {
|
|
|
|
|
background-color: var(--field-border-color);
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 13px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .splitToolbarButtonSeparator {
|
2013-02-27 05:06:53 +09:00
|
|
|
float: left;
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='rtl'] .splitToolbarButtonSeparator {
|
2013-02-27 05:06:53 +09:00
|
|
|
float: right;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
2012-04-12 08:12:51 +09:00
|
|
|
|
|
|
|
|
.toolbarButton,
|
2013-09-05 06:48:31 +09:00
|
|
|
.dropdownToolbarButton,
|
2014-05-12 22:50:13 +09:00
|
|
|
.secondaryToolbarButton,
|
|
|
|
|
.overlayButton {
|
2012-04-12 08:12:51 +09:00
|
|
|
min-width: 16px;
|
2012-04-27 06:38:41 +09:00
|
|
|
padding: 2px 6px 0;
|
2020-07-30 01:31:58 +09:00
|
|
|
border: none;
|
2012-04-12 08:12:51 +09:00
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--main-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 14px;
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2012-06-11 18:03:15 +09:00
|
|
|
/* Opera does not support user-select, use <... unselectable="on"> instead */
|
2012-04-12 08:12:51 +09:00
|
|
|
cursor: default;
|
2020-07-30 01:31:58 +09:00
|
|
|
box-sizing: border-box;
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .toolbarButton,
|
2014-01-22 08:07:07 +09:00
|
|
|
html[dir='ltr'] .overlayButton,
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='ltr'] .dropdownToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 2px 1px;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .toolbarButton,
|
2014-01-22 08:07:07 +09:00
|
|
|
html[dir='rtl'] .overlayButton,
|
2012-05-02 07:08:30 +09:00
|
|
|
html[dir='rtl'] .dropdownToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 2px 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] #toolbarViewerLeft > .toolbarButton:first-child,
|
|
|
|
|
html[dir='rtl'] #toolbarViewerRight > .toolbarButton:last-child {
|
|
|
|
|
margin-left: 2px;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
|
|
|
|
|
2020-07-30 01:31:58 +09:00
|
|
|
html[dir='ltr'] #toolbarViewerRight > .toolbarButton:last-child,
|
|
|
|
|
html[dir='rtl'] #toolbarViewerLeft > .toolbarButton:first-child {
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarButton:hover,
|
2020-07-30 01:31:58 +09:00
|
|
|
.toolbarButton:focus {
|
|
|
|
|
background-color: var(--button-hover-color);
|
|
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
.secondaryToolbarButton:hover,
|
|
|
|
|
.secondaryToolbarButton:focus {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--doorhanger-hover-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toolbarButton.toggled,
|
2013-09-05 06:48:31 +09:00
|
|
|
.splitToolbarButton.toggled > .toolbarButton.toggled,
|
|
|
|
|
.secondaryToolbarButton.toggled {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--toggled-btn-bg-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toolbarButton.toggled:hover:active,
|
2013-09-05 06:48:31 +09:00
|
|
|
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
|
|
|
|
|
.secondaryToolbarButton.toggled:hover:active {
|
2019-12-25 22:15:39 +09:00
|
|
|
background-color: rgba(0, 0, 0, 0.4);
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdownToolbarButton {
|
2020-02-06 22:22:14 +09:00
|
|
|
width: 140px;
|
2015-06-04 04:03:10 +09:00
|
|
|
padding: 0;
|
2011-09-22 07:32:36 +09:00
|
|
|
overflow: hidden;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--dropdown-btn-bg-color);
|
|
|
|
|
margin-top: 2px !important;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
2020-03-04 23:56:08 +09:00
|
|
|
.dropdownToolbarButton::after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: inline-block;
|
2020-07-30 01:31:58 +09:00
|
|
|
top: 6px;
|
|
|
|
|
content: var(--toolbarButton-menuArrow-icon);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
max-width: 16px;
|
2012-05-02 07:08:30 +09:00
|
|
|
}
|
2020-03-04 23:56:08 +09:00
|
|
|
html[dir='ltr'] .dropdownToolbarButton::after {
|
2020-08-20 16:36:35 +09:00
|
|
|
right: 7px;
|
2020-03-04 23:56:08 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .dropdownToolbarButton::after {
|
2020-08-20 16:36:35 +09:00
|
|
|
left: 7px;
|
2011-08-31 21:22:48 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-18 03:10:52 +09:00
|
|
|
.dropdownToolbarButton > select {
|
2020-02-06 22:22:14 +09:00
|
|
|
width: 162px;
|
2020-07-30 01:31:58 +09:00
|
|
|
height: 28px;
|
2012-04-14 03:13:53 +09:00
|
|
|
font-size: 12px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--main-color);
|
2013-02-27 05:06:53 +09:00
|
|
|
margin: 0;
|
2020-08-20 16:36:35 +09:00
|
|
|
padding: 1px 0 2px;
|
2013-02-27 05:06:53 +09:00
|
|
|
border: none;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--dropdown-btn-bg-color);
|
|
|
|
|
}
|
2020-08-20 16:36:35 +09:00
|
|
|
html[dir='ltr'] .dropdownToolbarButton > select {
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .dropdownToolbarButton > select {
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
2020-07-30 01:31:58 +09:00
|
|
|
.dropdownToolbarButton > select:hover {
|
|
|
|
|
background-color: var(--button-hover-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropdownToolbarButton > select:focus {
|
|
|
|
|
background-color: var(--button-hover-color);
|
2012-02-07 17:23:23 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-17 10:19:38 +09:00
|
|
|
.dropdownToolbarButton > select > option {
|
2020-07-30 01:31:58 +09:00
|
|
|
background: var(--doorhanger-bg-color);
|
2012-05-17 10:19:38 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-26 07:55:11 +09:00
|
|
|
#customScaleOption {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#pageWidthOption {
|
2019-12-25 22:23:22 +09:00
|
|
|
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
|
2012-04-26 07:55:11 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarButtonSpacer {
|
|
|
|
|
width: 30px;
|
2011-08-31 21:22:48 +09:00
|
|
|
display: inline-block;
|
2012-04-26 03:34:28 +09:00
|
|
|
height: 1px;
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2013-02-23 02:52:05 +09:00
|
|
|
html[dir='ltr'] #findPrevious {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin-left: 0;
|
2013-02-23 02:52:05 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] #findNext {
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] #findPrevious {
|
2020-07-30 01:31:58 +09:00
|
|
|
margin-right: 0;
|
2013-02-23 02:52:05 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #findNext {
|
|
|
|
|
margin-left: 3px;
|
|
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
|
2020-07-30 01:31:58 +09:00
|
|
|
.toolbarButton::before {
|
|
|
|
|
opacity: var(--toolbar-icon-opacity);
|
|
|
|
|
top: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton::before {
|
|
|
|
|
opacity: var(--doorhanger-icon-opacity);
|
|
|
|
|
top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton::before,
|
|
|
|
|
.secondaryToolbarButton::before {
|
2013-04-04 00:31:58 +09:00
|
|
|
/* All matching images have a size of 16x16
|
2020-07-30 01:31:58 +09:00
|
|
|
* All relevant containers have a size of 28x28 */
|
2013-04-04 00:31:58 +09:00
|
|
|
position: absolute;
|
2013-09-05 06:48:31 +09:00
|
|
|
display: inline-block;
|
2020-07-30 01:31:58 +09:00
|
|
|
left: 6px;
|
|
|
|
|
max-width: 16px;
|
2013-04-04 00:31:58 +09:00
|
|
|
}
|
2013-09-15 02:33:00 +09:00
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
html[dir="ltr"] .secondaryToolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
left: 12px;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
html[dir="rtl"] .secondaryToolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
right: 12px;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton#sidebarToggle::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-sidebarToggle-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
2013-09-15 02:33:00 +09:00
|
|
|
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2013-09-15 02:33:00 +09:00
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton#secondaryToolbarToggle::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-secondaryToolbarToggle-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
2013-09-15 02:33:00 +09:00
|
|
|
html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2013-09-15 02:33:00 +09:00
|
|
|
}
|
2013-02-23 02:52:05 +09:00
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton.findPrevious::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--findbarButton-previous-icon);
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .toolbarButton.findPrevious::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton.findNext::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--findbarButton-next-icon);
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .toolbarButton.findNext::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton.pageUp::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-pageUp-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
2012-05-02 09:39:24 +09:00
|
|
|
html[dir='rtl'] .toolbarButton.pageUp::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2012-05-02 09:39:24 +09:00
|
|
|
}
|
2012-09-13 03:05:34 +09:00
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
.toolbarButton.pageDown::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-pageDown-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
2012-05-02 09:39:24 +09:00
|
|
|
html[dir='rtl'] .toolbarButton.pageDown::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2012-05-02 09:39:24 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarButton.zoomOut::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-zoomOut-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
2012-09-13 03:05:34 +09:00
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarButton.zoomIn::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-zoomIn-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton.presentationMode::before,
|
|
|
|
|
.secondaryToolbarButton.presentationMode::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-presentationMode-icon);
|
2012-07-31 00:12:49 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton.print::before,
|
|
|
|
|
.secondaryToolbarButton.print::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-print-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
2011-08-22 11:05:10 +09:00
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton.openFile::before,
|
|
|
|
|
.secondaryToolbarButton.openFile::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-openFile-icon);
|
2012-05-21 07:12:58 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.toolbarButton.download::before,
|
|
|
|
|
.secondaryToolbarButton.download::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-download-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-27 18:44:45 +09:00
|
|
|
.secondaryToolbarButton.bookmark {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding-top: 6px;
|
2013-09-27 18:44:45 +09:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
2012-04-17 04:41:55 +09:00
|
|
|
|
2013-09-27 18:44:45 +09:00
|
|
|
.bookmark[href='#'] {
|
2013-03-19 07:53:45 +09:00
|
|
|
opacity: .5;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-27 18:44:45 +09:00
|
|
|
.toolbarButton.bookmark::before,
|
|
|
|
|
.secondaryToolbarButton.bookmark::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-bookmark-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
2012-09-13 03:05:34 +09:00
|
|
|
|
2012-04-13 08:29:15 +09:00
|
|
|
#viewThumbnail.toolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-viewThumbnail-icon);
|
2012-04-12 08:12:51 +09:00
|
|
|
}
|
2012-09-13 03:05:34 +09:00
|
|
|
|
2020-03-31 05:32:07 +09:00
|
|
|
#viewOutline.toolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-viewOutline-icon);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
2013-09-15 02:33:00 +09:00
|
|
|
html[dir="rtl"] #viewOutline.toolbarButton::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2013-09-15 02:33:00 +09:00
|
|
|
}
|
2011-08-22 11:05:10 +09:00
|
|
|
|
2014-03-19 05:32:47 +09:00
|
|
|
#viewAttachments.toolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-viewAttachments-icon);
|
2014-03-19 05:32:47 +09:00
|
|
|
}
|
|
|
|
|
|
[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)
By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.
Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)
Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.
To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
- Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
- Uses a slightly different formatting, compared to the "regular" headings.
- Is localizable.
Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-07 04:01:03 +09:00
|
|
|
#viewLayers.toolbarButton::before {
|
|
|
|
|
content: var(--toolbarButton-viewLayers-icon);
|
|
|
|
|
}
|
|
|
|
|
|
2012-09-26 05:17:27 +09:00
|
|
|
#viewFind.toolbarButton::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--toolbarButton-search-icon);
|
2012-05-09 06:22:48 +09:00
|
|
|
}
|
|
|
|
|
|
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: '';
|
2019-12-26 00:19:14 +09:00
|
|
|
background-color: rgba(112, 219, 85, 1);
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.secondaryToolbarButton {
|
|
|
|
|
position: relative;
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0 0 1px 0;
|
2013-09-05 06:48:31 +09:00
|
|
|
height: auto;
|
2020-07-30 01:31:58 +09:00
|
|
|
min-height: 26px;
|
2013-09-05 06:48:31 +09:00
|
|
|
width: auto;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
white-space: normal;
|
2020-07-30 01:31:58 +09:00
|
|
|
border-radius: 0;
|
|
|
|
|
box-sizing: border-box;
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
html[dir="ltr"] .secondaryToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding-left: 36px;
|
2013-09-05 06:48:31 +09:00
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
html[dir="rtl"] .secondaryToolbarButton {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding-right: 36px;
|
2013-09-05 06:48:31 +09:00
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir="ltr"] .secondaryToolbarButton > span {
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
html[dir="rtl"] .secondaryToolbarButton > span {
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.firstPage::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-firstPage-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.lastPage::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-lastPage-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.rotateCcw::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-rotateCcw-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.rotateCw::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-rotateCw-icon);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
|
2016-09-07 20:30:26 +09:00
|
|
|
.secondaryToolbarButton.selectTool::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-selectTool-icon);
|
2016-09-07 20:30:26 +09:00
|
|
|
}
|
|
|
|
|
|
2013-10-03 05:09:43 +09:00
|
|
|
.secondaryToolbarButton.handTool::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-handTool-icon);
|
2013-10-03 05:09:43 +09:00
|
|
|
}
|
|
|
|
|
|
2018-05-15 12:10:32 +09:00
|
|
|
.secondaryToolbarButton.scrollVertical::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-scrollVertical-icon);
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.scrollHorizontal::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-scrollHorizontal-icon)
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.scrollWrapped::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-scrollWrapped-icon);
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
2018-05-15 12:10:32 +09:00
|
|
|
.secondaryToolbarButton.spreadNone::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-spreadNone-icon);
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.spreadOdd::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-spreadOdd-icon);
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.secondaryToolbarButton.spreadEven::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-spreadEven-icon);
|
2018-05-15 12:10:32 +09:00
|
|
|
}
|
|
|
|
|
|
2014-01-22 08:07:07 +09:00
|
|
|
.secondaryToolbarButton.documentProperties::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--secondaryToolbarButton-documentProperties-icon);
|
2014-01-22 08:07:07 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.verticalToolbarSeparator {
|
|
|
|
|
display: block;
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 11px 0;
|
|
|
|
|
margin: 5px 2px;
|
2013-09-05 06:48:31 +09:00
|
|
|
width: 1px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--separator-color);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] .verticalToolbarSeparator {
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .verticalToolbarSeparator {
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.horizontalToolbarSeparator {
|
2014-08-19 04:56:15 +09:00
|
|
|
display: block;
|
2020-07-30 01:31:58 +09:00
|
|
|
margin: 6px 0 5px 0;
|
2013-09-05 06:48:31 +09:00
|
|
|
height: 1px;
|
|
|
|
|
width: 100%;
|
2020-07-30 01:31:58 +09:00
|
|
|
border-top: 1px solid var(--doorhanger-separator-color);
|
2013-09-05 06:48:31 +09:00
|
|
|
}
|
2012-05-09 06:22:48 +09:00
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarField {
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 4px 7px;
|
|
|
|
|
margin: 3px 0 3px 0;
|
2012-04-12 08:12:51 +09:00
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--field-bg-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
background-clip: padding-box;
|
2019-10-22 21:25:42 +09:00
|
|
|
border-width: 1px;
|
|
|
|
|
border-style: solid;
|
2020-07-30 01:31:58 +09:00
|
|
|
border-color: var(--field-border-color);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: var(--field-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
font-size: 12px;
|
2020-07-30 01:31:58 +09:00
|
|
|
line-height: 16px;
|
2012-04-12 08:12:51 +09:00
|
|
|
outline-style: none;
|
2011-08-29 05:10:14 +09:00
|
|
|
}
|
|
|
|
|
|
2012-10-06 09:15:06 +09:00
|
|
|
.toolbarField[type=checkbox] {
|
2020-07-30 01:31:58 +09:00
|
|
|
opacity: 0;
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='ltr'] .toolbarField[type=checkbox] {
|
|
|
|
|
margin: 10px 0 3px 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[dir='rtl'] .toolbarField[type=checkbox] {
|
|
|
|
|
margin: 10px 7px 3px 0;
|
2012-10-06 09:15:06 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-26 00:32:37 +09:00
|
|
|
.toolbarField.pageNumber {
|
2013-12-11 00:15:22 +09:00
|
|
|
-moz-appearance: textfield; /* hides the spinner in moz */
|
2012-06-08 05:51:29 +09:00
|
|
|
min-width: 16px;
|
|
|
|
|
text-align: right;
|
2012-04-26 03:21:10 +09:00
|
|
|
width: 40px;
|
2012-04-26 00:32:37 +09:00
|
|
|
}
|
|
|
|
|
|
2014-07-18 20:53:04 +09:00
|
|
|
.toolbarField.pageNumber.visiblePageIsLoading {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-image: var(--loading-icon);
|
2014-07-18 20:53:04 +09:00
|
|
|
background-repeat: no-repeat;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-position: 3px;
|
2014-07-18 20:53:04 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-26 03:10:53 +09:00
|
|
|
.toolbarField.pageNumber::-webkit-inner-spin-button,
|
|
|
|
|
.toolbarField.pageNumber::-webkit-outer-spin-button {
|
2020-07-30 01:31:58 +09:00
|
|
|
-webkit-appearance: none;
|
|
|
|
|
margin: 0;
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarField:focus {
|
2020-07-30 01:31:58 +09:00
|
|
|
border-color: #0a84ff;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.toolbarLabel {
|
|
|
|
|
min-width: 16px;
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 6px;
|
|
|
|
|
margin: 2px;
|
2019-12-25 22:44:05 +09:00
|
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
2012-04-12 08:12:51 +09:00
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--main-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
text-align: left;
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2012-04-12 08:12:51 +09:00
|
|
|
cursor: default;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2020-08-23 23:21:07 +09:00
|
|
|
html[dir='ltr'] #numPages.toolbarLabel {
|
|
|
|
|
padding-left: 2px;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #numPages.toolbarLabel {
|
|
|
|
|
padding-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
#thumbnailView {
|
2012-09-06 00:31:23 +09:00
|
|
|
position: absolute;
|
2017-09-30 23:41:46 +09:00
|
|
|
width: calc(100% - 60px);
|
2012-09-06 00:31:23 +09:00
|
|
|
top: 0;
|
2012-04-13 07:13:58 +09:00
|
|
|
bottom: 0;
|
2017-09-30 23:41:46 +09:00
|
|
|
padding: 10px 30px 0;
|
2011-08-22 11:05:10 +09:00
|
|
|
overflow: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2011-10-29 01:16:17 +09:00
|
|
|
}
|
|
|
|
|
|
2018-12-19 06:48:26 +09:00
|
|
|
#thumbnailView > a:active,
|
|
|
|
|
#thumbnailView > a:focus {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.thumbnail {
|
2017-09-30 23:41:46 +09:00
|
|
|
margin: 0 10px 5px 10px;
|
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;
|
|
|
|
|
}
|
2013-10-10 03:40:21 +09:00
|
|
|
|
|
|
|
|
#thumbnailView > a:last-of-type > .thumbnail {
|
|
|
|
|
margin-bottom: 10px;
|
2012-04-14 06:14:05 +09:00
|
|
|
}
|
|
|
|
|
|
2014-12-30 23:05:39 +09:00
|
|
|
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
|
|
|
|
|
margin-bottom: 9px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-26 03:34:28 +09:00
|
|
|
.thumbnail:not([data-loaded]) {
|
2020-07-30 01:31:58 +09:00
|
|
|
border: 1px dashed rgba(132, 132, 132, 1);
|
2017-09-30 23:41:46 +09:00
|
|
|
margin: -1px 9px 4px 9px;
|
2012-04-14 06:14:05 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.thumbnailImage {
|
2019-12-25 22:44:05 +09:00
|
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
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;
|
2019-12-25 22:44:05 +09:00
|
|
|
background-color: rgba(255, 255, 255, 1);
|
2015-01-20 05:39:38 +09:00
|
|
|
background-clip: content-box;
|
2011-12-22 07:22:07 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.thumbnailSelectionRing {
|
|
|
|
|
border-radius: 2px;
|
2012-04-14 06:14:05 +09:00
|
|
|
padding: 7px;
|
2011-12-22 07:22:07 +09:00
|
|
|
}
|
2012-09-13 03:05:34 +09:00
|
|
|
|
2012-05-02 01:43:48 +09:00
|
|
|
a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
|
2012-04-14 06:14:05 +09:00
|
|
|
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
|
2012-04-12 08:12:51 +09:00
|
|
|
opacity: .9;
|
2011-12-22 07:22:07 +09:00
|
|
|
}
|
|
|
|
|
|
2012-05-02 01:43:48 +09:00
|
|
|
a:focus > .thumbnail > .thumbnailSelectionRing,
|
2012-04-12 08:12:51 +09:00
|
|
|
.thumbnail:hover > .thumbnailSelectionRing {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--sidebaritem-bg-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
background-clip: padding-box;
|
2019-12-25 22:15:39 +09:00
|
|
|
color: rgba(255, 255, 255, 0.9);
|
2011-12-22 07:22:07 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-14 06:14:05 +09:00
|
|
|
.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
|
2012-04-12 08:12:51 +09:00
|
|
|
opacity: 1;
|
2011-07-29 02:48:05 +09:00
|
|
|
}
|
|
|
|
|
|
2012-04-12 08:12:51 +09:00
|
|
|
.thumbnail.selected > .thumbnailSelectionRing {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--sidebaritem-bg-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
background-clip: padding-box;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: rgba(255, 255, 255, 1);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2014-03-19 05:32:47 +09:00
|
|
|
#outlineView,
|
[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)
By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.
Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)
Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.
To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
- Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
- Uses a slightly different formatting, compared to the "regular" headings.
- Is localizable.
Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-07 04:01:03 +09:00
|
|
|
#attachmentsView,
|
|
|
|
|
#layersView {
|
2012-09-06 00:31:23 +09:00
|
|
|
position: absolute;
|
2017-09-30 23:41:46 +09:00
|
|
|
width: calc(100% - 8px);
|
2012-09-06 00:31:23 +09:00
|
|
|
top: 0;
|
2012-04-13 07:13:58 +09:00
|
|
|
bottom: 0;
|
2020-08-04 19:40:59 +09:00
|
|
|
padding: 4px 4px 0;
|
2012-04-12 08:12:51 +09:00
|
|
|
overflow: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='ltr'] .treeWithDeepNesting > .treeItem,
|
|
|
|
|
html[dir='ltr'] .treeItem > .treeItems {
|
2011-08-22 11:05:10 +09:00
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='rtl'] .treeWithDeepNesting > .treeItem,
|
|
|
|
|
html[dir='rtl'] .treeItem > .treeItems {
|
2012-12-28 21:26:30 +09:00
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItem > a {
|
2011-08-22 11:05:10 +09:00
|
|
|
text-decoration: none;
|
2012-06-08 05:51:29 +09:00
|
|
|
display: inline-block;
|
|
|
|
|
min-width: 95%;
|
2020-08-29 23:35:27 +09:00
|
|
|
/* Subtract the right padding (left, in RTL mode) of the container: */
|
|
|
|
|
min-width: calc(100% - 4px);
|
2012-12-28 02:58:09 +09:00
|
|
|
height: auto;
|
2012-04-12 08:12:51 +09:00
|
|
|
margin-bottom: 1px;
|
|
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--outline-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 15px;
|
2018-04-04 07:18:57 +09:00
|
|
|
user-select: none;
|
2012-12-28 02:58:09 +09:00
|
|
|
white-space: normal;
|
2014-04-26 05:42:19 +09:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='ltr'] .treeItem > a {
|
2015-07-22 02:52:49 +09:00
|
|
|
padding: 2px 0 5px 4px;
|
2012-12-28 21:26:30 +09:00
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='rtl'] .treeItem > a {
|
2015-07-22 02:52:49 +09:00
|
|
|
padding: 2px 4px 5px 0;
|
2012-12-28 21:26:30 +09:00
|
|
|
}
|
|
|
|
|
|
[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)
By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.
Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)
Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.
To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
- Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
- Uses a slightly different formatting, compared to the "regular" headings.
- Is localizable.
Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
2020-08-07 04:01:03 +09:00
|
|
|
#layersView .treeItem > a > * {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
html[dir='ltr'] #layersView .treeItem > a > label {
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #layersView .treesItem > a > label {
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItemToggler {
|
2015-07-22 02:52:49 +09:00
|
|
|
position: relative;
|
|
|
|
|
height: 0;
|
|
|
|
|
width: 0;
|
2019-12-25 22:15:39 +09:00
|
|
|
color: rgba(255, 255, 255, 0.5);
|
2015-07-22 02:52:49 +09:00
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItemToggler::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--treeitem-expanded-icon);
|
2015-07-22 02:52:49 +09:00
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
2020-07-30 01:31:58 +09:00
|
|
|
max-width: 16px;
|
2015-07-22 02:52:49 +09:00
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItemToggler.treeItemsHidden::before {
|
2020-07-30 01:31:58 +09:00
|
|
|
content: var(--treeitem-collapsed-icon);
|
|
|
|
|
max-width: 16px;
|
2015-07-22 02:52:49 +09:00
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='rtl'] .treeItemToggler.treeItemsHidden::before {
|
2020-03-31 05:32:07 +09:00
|
|
|
transform: scaleX(-1);
|
2015-09-06 22:34:02 +09:00
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItemToggler.treeItemsHidden ~ .treeItems {
|
2015-07-22 02:52:49 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='ltr'] .treeItemToggler {
|
2015-07-22 02:52:49 +09:00
|
|
|
float: left;
|
|
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='rtl'] .treeItemToggler {
|
2015-07-22 02:52:49 +09:00
|
|
|
float: right;
|
|
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='ltr'] .treeItemToggler::before {
|
2015-07-22 02:52:49 +09:00
|
|
|
right: 4px;
|
|
|
|
|
}
|
2020-08-04 19:40:59 +09:00
|
|
|
html[dir='rtl'] .treeItemToggler::before {
|
2015-07-22 02:52:49 +09:00
|
|
|
left: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItemToggler:hover,
|
|
|
|
|
.treeItemToggler:hover + a,
|
|
|
|
|
.treeItemToggler:hover ~ .treeItems,
|
|
|
|
|
.treeItem > a:hover {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--sidebaritem-bg-color);
|
2012-04-12 08:12:51 +09:00
|
|
|
background-clip: padding-box;
|
2015-09-03 22:22:48 +09:00
|
|
|
border-radius: 2px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--outline-hover-color);
|
2011-08-22 11:05:10 +09:00
|
|
|
}
|
|
|
|
|
|
2020-08-04 19:40:59 +09:00
|
|
|
.treeItem.selected {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--outline-active-bg-color);
|
2012-06-08 05:51:29 +09:00
|
|
|
background-clip: padding-box;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--outline-active-color);
|
2012-06-08 05:51:29 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noResults {
|
|
|
|
|
font-size: 12px;
|
2019-12-25 22:15:39 +09:00
|
|
|
color: rgba(255, 255, 255, 0.8);
|
2012-06-08 05:51:29 +09:00
|
|
|
font-style: italic;
|
2013-03-01 03:02:11 +09:00
|
|
|
cursor: default;
|
2012-06-08 05:51:29 +09:00
|
|
|
}
|
|
|
|
|
|
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 */
|
2019-12-25 22:23:22 +09:00
|
|
|
::selection {
|
|
|
|
|
background: rgba(0, 0, 255, 0.3);
|
|
|
|
|
}
|
2014-09-09 16:09:23 +09:00
|
|
|
|
2011-11-29 09:55:09 +09:00
|
|
|
#errorWrapper {
|
2020-07-30 01:31:58 +09:00
|
|
|
background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
|
|
|
|
|
color: var(--main-color);
|
2011-11-29 09:55:09 +09:00
|
|
|
left: 0;
|
2012-04-26 09:20:13 +09:00
|
|
|
position: absolute;
|
2011-11-29 09:55:09 +09:00
|
|
|
right: 0;
|
|
|
|
|
z-index: 1000;
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 3px 6px;
|
2011-11-29 09:55:09 +09:00
|
|
|
}
|
2013-07-29 19:43:42 +09:00
|
|
|
.loadingInProgress #errorWrapper {
|
2014-08-12 13:09:38 +09:00
|
|
|
top: 37px;
|
2013-07-29 19:43:42 +09:00
|
|
|
}
|
2011-11-29 09:55:09 +09:00
|
|
|
|
|
|
|
|
#errorMessageLeft {
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#errorMessageRight {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#errorMoreInfo {
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--field-bg-color);
|
|
|
|
|
color: var(--field-color);
|
|
|
|
|
border: 1px solid var(--field-border-color);
|
2011-11-29 09:55:09 +09:00
|
|
|
padding: 3px;
|
|
|
|
|
margin: 3px;
|
2012-01-05 07:43:17 +09:00
|
|
|
width: 98%;
|
2011-11-29 09:55:09 +09:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.overlayButton {
|
|
|
|
|
width: auto;
|
|
|
|
|
margin: 3px 4px 2px 4px !important;
|
2020-07-30 01:31:58 +09:00
|
|
|
padding: 2px 11px 2px 11px;
|
2014-05-12 22:50:13 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-25 00:46:54 +09:00
|
|
|
#overlayContainer {
|
|
|
|
|
display: table;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2019-12-25 22:15:39 +09:00
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
2014-05-12 22:50:13 +09:00
|
|
|
z-index: 40000;
|
2013-09-25 00:46:54 +09:00
|
|
|
}
|
2014-03-31 23:27:36 +09:00
|
|
|
#overlayContainer > * {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
}
|
2013-09-25 00:46:54 +09:00
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
#overlayContainer > .container {
|
2013-09-25 00:46:54 +09:00
|
|
|
display: table-cell;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
#overlayContainer > .container > .dialog {
|
2013-09-25 00:46:54 +09:00
|
|
|
display: inline-block;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-spacing: 4px;
|
2020-07-30 01:31:58 +09:00
|
|
|
color: var(--main-color);
|
2014-05-12 22:50:13 +09:00
|
|
|
font-size: 12px;
|
2013-09-25 00:46:54 +09:00
|
|
|
line-height: 14px;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--doorhanger-bg-color);
|
2019-12-25 22:15:39 +09:00
|
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
2014-05-12 22:50:13 +09:00
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
2013-09-25 00:46:54 +09:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.dialog > .row {
|
2013-09-25 00:46:54 +09:00
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.dialog > .row > * {
|
2013-09-25 00:46:54 +09:00
|
|
|
display: table-cell;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.dialog .toolbarField {
|
2013-09-25 00:46:54 +09:00
|
|
|
margin: 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.dialog .separator {
|
2014-08-19 04:56:15 +09:00
|
|
|
display: block;
|
2014-01-22 08:07:07 +09:00
|
|
|
margin: 4px 0 4px 0;
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 100%;
|
2020-07-30 01:31:58 +09:00
|
|
|
background-color: var(--separator-color);
|
2014-01-22 08:07:07 +09:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
.dialog .buttonRow {
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
2014-01-22 08:07:07 +09:00
|
|
|
}
|
|
|
|
|
|
2015-07-19 00:11:33 +09:00
|
|
|
.dialog :link {
|
2019-12-25 22:44:05 +09:00
|
|
|
color: rgba(255, 255, 255, 1);
|
2015-07-19 00:11:33 +09:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
#passwordOverlay > .dialog {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
#passwordOverlay .toolbarField {
|
|
|
|
|
width: 200px;
|
2014-01-22 08:07:07 +09:00
|
|
|
}
|
|
|
|
|
|
2014-05-12 22:50:13 +09:00
|
|
|
#documentPropertiesOverlay > .dialog {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
#documentPropertiesOverlay .row > * {
|
2014-01-22 08:07:07 +09:00
|
|
|
min-width: 100px;
|
2014-05-12 22:50:13 +09:00
|
|
|
}
|
|
|
|
|
html[dir='ltr'] #documentPropertiesOverlay .row > * {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
html[dir='rtl'] #documentPropertiesOverlay .row > * {
|
2014-01-22 08:07:07 +09:00
|
|
|
text-align: right;
|
|
|
|
|
}
|
2014-05-12 22:50:13 +09:00
|
|
|
#documentPropertiesOverlay .row > span {
|
2014-01-23 08:30:48 +09:00
|
|
|
width: 125px;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
}
|
2014-05-12 22:50:13 +09:00
|
|
|
#documentPropertiesOverlay .row > p {
|
2014-01-23 08:30:48 +09:00
|
|
|
max-width: 225px;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
}
|
2014-05-12 22:50:13 +09:00
|
|
|
#documentPropertiesOverlay .buttonRow {
|
2014-01-22 08:07:07 +09:00
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2011-11-29 09:55:09 +09:00
|
|
|
.clearBoth {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-18 03:10:52 +09:00
|
|
|
.fileInput {
|
2019-12-25 22:44:05 +09:00
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(0, 0, 0, 1);
|
2012-05-01 06:23:26 +09:00
|
|
|
margin-top: 5px;
|
2014-01-14 06:04:36 +09:00
|
|
|
visibility: hidden;
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
2012-03-22 07:36:10 +09:00
|
|
|
}
|
|
|
|
|
|
2012-02-16 07:12:58 +09:00
|
|
|
#PDFBug {
|
2019-12-25 22:44:05 +09:00
|
|
|
background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
|
2019-12-26 00:19:14 +09:00
|
|
|
border: 1px solid rgba(102, 102, 102, 1);
|
2012-02-14 10:35:58 +09:00
|
|
|
position: fixed;
|
2012-04-27 04:35:52 +09:00
|
|
|
top: 32px;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
font-size: 10px;
|
2012-02-14 10:35:58 +09:00
|
|
|
padding: 0;
|
2012-04-27 04:35:52 +09:00
|
|
|
width: 300px;
|
2012-02-14 10:35:58 +09:00
|
|
|
}
|
2012-02-16 07:12:58 +09:00
|
|
|
#PDFBug .controls {
|
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;
|
2012-02-14 10:35:58 +09:00
|
|
|
}
|
2012-02-16 07:12:58 +09:00
|
|
|
#PDFBug .panels {
|
2012-04-27 04:35:52 +09:00
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2012-02-14 10:35:58 +09:00
|
|
|
overflow: auto;
|
2014-03-31 23:27:36 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2012-02-14 10:35:58 +09:00
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
2012-04-27 04:35:52 +09:00
|
|
|
top: 27px;
|
2012-02-14 10:35:58 +09:00
|
|
|
}
|
2020-02-06 06:02:13 +09:00
|
|
|
#PDFBug .panels > div {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
2012-02-16 07:12:58 +09:00
|
|
|
#PDFBug button.active {
|
2012-02-14 10:35:58 +09:00
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.debuggerShowText {
|
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);
|
2012-02-14 10:35:58 +09:00
|
|
|
}
|
|
|
|
|
.debuggerHideText:hover {
|
2019-12-25 22:44:05 +09:00
|
|
|
background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
|
2011-09-21 13:49:09 +09:00
|
|
|
}
|
2012-02-22 02:52:09 +09:00
|
|
|
#PDFBug .stats {
|
2012-04-27 04:35:52 +09:00
|
|
|
font-family: courier;
|
2012-02-22 02:52:09 +09:00
|
|
|
font-size: 10px;
|
|
|
|
|
white-space: pre;
|
|
|
|
|
}
|
|
|
|
|
#PDFBug .stats .title {
|
2020-07-30 01:31:58 +09:00
|
|
|
font-weight: bold;
|
2012-04-27 04:35:52 +09:00
|
|
|
}
|
|
|
|
|
#PDFBug table {
|
|
|
|
|
font-size: 10px;
|
2011-09-21 13:49:09 +09:00
|
|
|
}
|
2012-05-16 04:47:33 +09:00
|
|
|
|
2015-11-20 02:03:52 +09:00
|
|
|
#viewer.textLayer-visible .textLayer {
|
|
|
|
|
opacity: 1.0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#viewer.textLayer-visible .canvasWrapper {
|
2019-12-25 22:19:09 +09:00
|
|
|
background-color: rgba(128, 255, 128, 1);
|
2015-11-20 02:03:52 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#viewer.textLayer-visible .canvasWrapper canvas {
|
|
|
|
|
mix-blend-mode: screen;
|
|
|
|
|
}
|
|
|
|
|
|
2018-11-18 23:54:08 +09:00
|
|
|
#viewer.textLayer-visible .textLayer > span {
|
2015-11-20 02:03:52 +09:00
|
|
|
background-color: rgba(255, 255, 0, 0.1);
|
2019-12-25 22:44:05 +09:00
|
|
|
color: rgba(0, 0, 0, 1);
|
2015-11-20 02:03:52 +09:00
|
|
|
border: solid 1px rgba(255, 0, 0, 0.5);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2018-11-18 23:54:08 +09:00
|
|
|
#viewer.textLayer-hover .textLayer > span:hover {
|
2019-12-25 22:44:05 +09:00
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
color: rgba(0, 0, 0, 1);
|
2012-08-20 10:02:12 +09:00
|
|
|
}
|
|
|
|
|
|
2018-11-18 23:54:08 +09:00
|
|
|
#viewer.textLayer-shadow .textLayer > span {
|
2019-12-25 22:23:22 +09:00
|
|
|
background-color: rgba(255, 255, 255, 0.6);
|
2019-12-25 22:44:05 +09:00
|
|
|
color: rgba(0, 0, 0, 1);
|
2012-08-20 10:02:12 +09:00
|
|
|
}
|
|
|
|
|
|
2014-01-29 01:05:30 +09:00
|
|
|
.grab-to-pan-grab {
|
2013-10-03 05:09:43 +09:00
|
|
|
cursor: url("images/grab.cur"), move !important;
|
2013-12-17 03:01:59 +09:00
|
|
|
cursor: grab !important;
|
2013-10-03 05:09:43 +09:00
|
|
|
}
|
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 {
|
2013-10-03 05:09:43 +09:00
|
|
|
cursor: url("images/grabbing.cur"), move !important;
|
2013-12-17 03:01:59 +09:00
|
|
|
cursor: grabbing !important;
|
2014-01-29 01:05:30 +09:00
|
|
|
position: fixed;
|
2019-12-25 22:44:05 +09:00
|
|
|
background: rgba(0, 0, 0, 0);
|
2014-01-29 01:05:30 +09:00
|
|
|
display: block;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
2014-01-30 23:06:04 +09:00
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2014-01-29 01:05:30 +09:00
|
|
|
overflow: hidden;
|
|
|
|
|
z-index: 50000; /* should be higher than anything else in PDF.js! */
|
2013-10-03 05:09:43 +09:00
|
|
|
}
|
|
|
|
|
|
2012-06-29 01:50:25 +09:00
|
|
|
@page {
|
|
|
|
|
margin: 0;
|
2012-09-13 03:05:34 +09:00
|
|
|
}
|
2012-05-16 04:47:33 +09:00
|
|
|
|
2012-06-29 01:50:25 +09:00
|
|
|
#printContainer {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2012-05-25 21:38:50 +09:00
|
|
|
|
2012-06-29 01:50:25 +09:00
|
|
|
@media print {
|
2013-05-01 06:39:57 +09:00
|
|
|
/* General rules for printing. */
|
|
|
|
|
body {
|
2019-12-25 22:44:05 +09:00
|
|
|
background: rgba(0, 0, 0, 0) none;
|
2013-05-01 06:39:57 +09:00
|
|
|
}
|
|
|
|
|
|
2012-07-13 02:31:20 +09:00
|
|
|
/* Rules for browsers that don't support mozPrintCallback. */
|
2013-09-05 06:48:31 +09:00
|
|
|
#sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
|
2012-05-25 21:38:50 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
2013-07-15 23:23:43 +09:00
|
|
|
#viewerContainer {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
2012-07-13 02:31:20 +09:00
|
|
|
|
|
|
|
|
#mainContainer, #viewerContainer, .page, .page canvas {
|
|
|
|
|
position: static;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
float: left;
|
|
|
|
|
display: none;
|
2013-07-15 23:23:43 +09:00
|
|
|
border: none;
|
2012-07-13 02:31:20 +09:00
|
|
|
box-shadow: none;
|
2014-10-01 08:01:30 +09:00
|
|
|
background-clip: content-box;
|
2019-12-25 22:44:05 +09:00
|
|
|
background-color: rgba(255, 255, 255, 1);
|
2012-07-13 02:31:20 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page[data-loaded] {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-21 08:01:34 +09:00
|
|
|
.fileInput {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2016-10-07 06:46:30 +09:00
|
|
|
/* Rules for browsers that support PDF.js printing */
|
|
|
|
|
body[data-pdfjsprinting] #outerContainer {
|
2012-07-13 02:31:20 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
2016-10-07 06:46:30 +09:00
|
|
|
body[data-pdfjsprinting] #printContainer {
|
2012-05-25 21:38:50 +09:00
|
|
|
display: block;
|
|
|
|
|
}
|
2016-02-11 06:10:03 +09:00
|
|
|
#printContainer {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2015-03-19 07:15:43 +09:00
|
|
|
/* wrapper around (scaled) print canvas elements */
|
|
|
|
|
#printContainer > div {
|
2012-06-29 01:50:25 +09:00
|
|
|
position: relative;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
2016-10-06 21:51:45 +09:00
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
page-break-inside: avoid;
|
2015-03-19 07:15:43 +09:00
|
|
|
}
|
2016-10-08 21:36:55 +09:00
|
|
|
#printContainer canvas,
|
|
|
|
|
#printContainer img {
|
2020-08-11 01:31:07 +09:00
|
|
|
direction: ltr;
|
2014-10-01 08:01:30 +09:00
|
|
|
display: block;
|
2012-06-29 01:50:25 +09:00
|
|
|
}
|
2012-05-25 21:38:50 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
.visibleLargeView,
|
|
|
|
|
.visibleMediumView,
|
|
|
|
|
.visibleSmallView {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
2012-05-22 00:59:43 +09:00
|
|
|
}
|
2012-05-16 04:47:33 +09:00
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
@media all and (max-width: 840px) {
|
2012-05-16 04:47:33 +09:00
|
|
|
#sidebarContent {
|
2019-12-25 22:15:39 +09:00
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
2012-05-16 04:47:33 +09:00
|
|
|
}
|
|
|
|
|
|
2017-09-30 23:41:46 +09:00
|
|
|
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {
|
2018-06-16 03:07:51 +09:00
|
|
|
left: 0px !important;
|
2012-05-16 04:47:33 +09:00
|
|
|
}
|
2017-09-30 23:41:46 +09:00
|
|
|
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer {
|
2018-06-16 03:07:51 +09:00
|
|
|
right: 0px !important;
|
2012-05-16 04:47:33 +09:00
|
|
|
}
|
|
|
|
|
|
2013-09-05 06:48:31 +09:00
|
|
|
#outerContainer .hiddenLargeView,
|
|
|
|
|
#outerContainer .hiddenMediumView {
|
|
|
|
|
display: inherit;
|
|
|
|
|
}
|
|
|
|
|
#outerContainer .visibleLargeView,
|
|
|
|
|
#outerContainer .visibleMediumView {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
@media all and (max-width: 770px) {
|
2013-09-05 06:48:31 +09:00
|
|
|
#outerContainer .hiddenLargeView {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#outerContainer .visibleLargeView {
|
|
|
|
|
display: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
@media all and (max-width: 700px) {
|
2013-09-05 06:48:31 +09:00
|
|
|
#outerContainer .hiddenMediumView {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#outerContainer .visibleMediumView {
|
|
|
|
|
display: inherit;
|
2012-05-16 04:47:33 +09:00
|
|
|
}
|
|
|
|
|
}
|
2012-05-22 03:08:42 +09:00
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
@media all and (max-width: 640px) {
|
2017-03-09 07:54:28 +09:00
|
|
|
.hiddenSmallView, .hiddenSmallView * {
|
2012-05-22 03:08:42 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
2013-09-05 06:48:31 +09:00
|
|
|
.visibleSmallView {
|
|
|
|
|
display: inherit;
|
|
|
|
|
}
|
2013-02-26 09:53:54 +09:00
|
|
|
.toolbarButtonSpacer {
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
2017-03-09 07:54:28 +09:00
|
|
|
html[dir='ltr'] .findbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
left: 34px;
|
2017-03-09 07:54:28 +09:00
|
|
|
}
|
|
|
|
|
html[dir='rtl'] .findbar {
|
2020-08-28 20:00:07 +09:00
|
|
|
right: 34px;
|
2017-03-09 07:54:28 +09:00
|
|
|
}
|
2012-05-22 03:08:42 +09:00
|
|
|
}
|
2012-05-24 07:10:53 +09:00
|
|
|
|
2016-11-04 00:56:57 +09:00
|
|
|
@media all and (max-width: 535px) {
|
2016-01-28 21:02:17 +09:00
|
|
|
#scaleSelectContainer {
|
2012-05-24 07:10:53 +09:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
