diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties index 66f4a43e8..de6fd95db 100644 --- a/l10n/en-US/viewer.properties +++ b/l10n/en-US/viewer.properties @@ -78,8 +78,6 @@ page_scale_auto=Automatic Zoom page_scale_actual=Actual Size # Loading indicator messages -# LOCALIZATION NOTE (error_line): "{{percent}}" will be replaced with a percentage -loading=Loading… {{percent}}% loading_error_indicator=Error loading_error=An error occurred while loading the PDF. diff --git a/web/images/toolbarButton-openFile.png b/web/images/toolbarButton-openFile.png index 12ce45f87..fc7023f2a 100644 Binary files a/web/images/toolbarButton-openFile.png and b/web/images/toolbarButton-openFile.png differ diff --git a/web/images/toolbarButton-search.png b/web/images/toolbarButton-search.png index 78878b417..604e652e5 100644 Binary files a/web/images/toolbarButton-search.png and b/web/images/toolbarButton-search.png differ diff --git a/web/viewer.css b/web/viewer.css index 329bff2d5..7c7d4f684 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -146,7 +146,7 @@ html[dir='rtl'] #sidebarContent { #toolbarSidebar { width: 200px; - height: 32px; + height: 29px; background-image: url(images/texture.png), -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); background-image: url(images/texture.png), @@ -242,9 +242,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { margin-right:0; } +.splitToolbarButton.toggled .toolbarButton { + margin: 0; +} + .splitToolbarButton:hover > .toolbarButton, .splitToolbarButton:focus > .toolbarButton, -.splitToolbarButton.toggled > .toolbarButton { +.splitToolbarButton.toggled > .toolbarButton, +.toolbarButton.textButton { background-color: hsla(0,0%,0%,.12); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); @@ -263,7 +268,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton { } .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus, -.dropdownToolbarButton:hover { +.dropdownToolbarButton:hover, +.toolbarButton.textButton:hover, +.toolbarButton.textButton:focus { background-color: hsla(0,0%,0%,.2); box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 0 1px hsla(0,0%,100%,.15) inset, @@ -544,8 +551,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { .toolbarField { - min-width: 16px; - width: 32px; padding: 3px 6px; margin: 4px 0 4px 0; border: 1px solid transparent; @@ -560,7 +565,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before { color: hsl(0,0%,95%); font-size: 12px; line-height: 14px; - text-align: right; outline-style: none; -moz-transition-property: background-color, border-color, box-shadow; -moz-transition-duration: 150ms; @@ -568,6 +572,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before { } .toolbarField.pageNumber { + min-width: 16px; + text-align: right; width: 40px; } @@ -682,9 +688,11 @@ a:focus > .thumbnail > .thumbnailSelectionRing, margin-left: 20px; } -.outlineItem > a { +.outlineItem > a, +#searchResults > a { text-decoration: none; - display: block; + display: inline-block; + min-width: 95%; height: 20px; padding: 2px 0 0 10px; margin-bottom: 1px; @@ -697,7 +705,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing, white-space: nowrap; } -.outlineItem > a:hover { +.outlineItem > a:hover, +#searchResults > a:hover { background-color: hsla(0,0%,100%,.02); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); background-clip: padding-box; @@ -707,6 +716,23 @@ a:focus > .thumbnail > .thumbnailSelectionRing, color: hsla(0,0%,100%,.9); } +.outlineItem.selected { + background-color: hsla(0,0%,100%,.08); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,1); +} + +.noOutline, +.noResults { + font-size: 12px; + color: hsla(0,0%,100%,.8); + font-style: italic; +} + #searchScrollView { position: absolute; top: 10px; @@ -723,27 +749,26 @@ a:focus > .thumbnail > .thumbnailSelectionRing, } #searchToolbar > input { - margin-left: 8px; - width: 130px; + margin-left: 4px; + width: 124px; +} + +#searchToolbar button { + width: auto; + margin: 0; + padding: 0 6px; + height: 22px; } #searchResults { overflow: auto; - background-color: #fff; position: absolute; top: 30px; bottom: 0px; left: 0px; right: 0; + padding: 4px 4px 0; font-size: smaller; - opacity: 0.7; -} - -#searchResults a { - display: block; - white-space: pre; - text-decoration: none; - color: black; } #sidebarControls { @@ -754,24 +779,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing, bottom: 35px; } -.outlineItem.selected { - background-color: hsla(0,0%,100%,.08); - background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); - background-clip: padding-box; - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, - 0 0 1px hsla(0,0%,100%,.1) inset, - 0 0 1px hsla(0,0%,0%,.2); - color: hsla(0,0%,100%,1); -} - -.noOutline { - font-size: 12px; - color: hsla(0,0%,100%,.8); - font-style: italic; -} - - - canvas { margin: auto; display: block; @@ -814,23 +821,33 @@ canvas { } #loadingBox { - margin: 100px 0; + position: absolute; + top: 50%; + margin-top: -25px; + left: 0; + right: 0; text-align: center; color: #ddd; font-size: 14px; } #loadingBar { - background-color: #333; display: inline-block; - border: 1px solid black; clear: both; margin: 0px; margin-top: 5px; line-height: 0; - border-radius: 4px; + border-radius: 2px; width: 200px; height: 25px; + + background-color: hsla(0,0%,0%,.3); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + border: 1px solid #000; + box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2) inset, + 0 0 1px 1px rgba(255, 255, 255, 0.1); } #loadingBar .progress { @@ -838,23 +855,22 @@ canvas { float: left; background: #666; - background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999)); - background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%); - background: linear-gradient(top, #999 0%,#666 50%,#999 100%); - - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + background: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989)); + background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%); + background: linear-gradient(top, #b2b2b2 0%,#898989 100%); + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; width: 0%; height: 100%; } #loadingBar .progress.full { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } .textLayer { diff --git a/web/viewer.html b/web/viewer.html index f76c3665f..4edf6ce1a 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -45,7 +45,7 @@
-
+
@@ -63,8 +63,8 @@
@@ -150,8 +150,8 @@
-
Loading... 0%
-
+
+