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

fixing Chrome quirks

Browse Source
This commit is contained in:
Artur Adib 2012-04-17 14:10:52 -04:00
parent 195efa404d
commit d9db7af4c8
2 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/viewer.css
View File

@ -17,6 +17,8 @@ body {
#outerContainer { #outerContainer {
display: -moz-box; display: -moz-box;
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
display: -webkit-box;
-webkit-box-orient: horizontal;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -34,6 +36,7 @@ body {
#viewerContainer { #viewerContainer {
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-box-flex: 1;
height: 100%; height: 100%;
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
padding-top: 30px; padding-top: 30px;
@ -49,15 +52,19 @@ body {
#toolbarContainer { #toolbarContainer {
display: -moz-box; display: -moz-box;
display: -webkit-box;
width: 100%; width: 100%;
} }
#toolbarSidebar { #toolbarSidebar {
display: -moz-box; display: -moz-box;
display: -webkit-box;
width: 200px; width: 200px;
height: 32px; height: 32px;
background-image: url(images/texture.png), background-image: url(images/texture.png),
-moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
background-image: url(images/texture.png),
-webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08), box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08),
inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 1px 1px hsla(0,0%,0%,.15),
inset 0 -1px 0 hsla(0,0%,100%,.05), inset 0 -1px 0 hsla(0,0%,100%,.05),
@ -71,10 +78,14 @@ body {
#toolbarViewer { #toolbarViewer {
display: -moz-box; display: -moz-box;
-moz-box-flex: 1; -moz-box-flex: 1;
display: -webkit-box;
-webkit-box-flex: 1;
margin-left: -1px; margin-left: -1px;
height: 32px; height: 32px;
background-image: url(images/texture.png), background-image: url(images/texture.png),
-moz-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); -moz-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
background-image: url(images/texture.png),
-webkit-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
border-left: 1px solid hsla(0,0%,0%,.5); border-left: 1px solid hsla(0,0%,0%,.5);
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 1px 1px hsla(0,0%,0%,.15),
@ -86,6 +97,7 @@ body {
.splitToolbarButton { .splitToolbarButton {
margin: 4px 2px 4px 0; margin: 4px 2px 4px 0;
display: -moz-box; display: -moz-box;
display: -webkit-box;
} }
.splitToolbarButton > .toolbarButton { .splitToolbarButton > .toolbarButton {
position: relative; position: relative;
@ -93,10 +105,18 @@ body {
padding: 3px 6px; padding: 3px 6px;
border-radius: 0; border-radius: 0;
} }
.toolbarButton {
margin: 4px 2px 4px 0;
display: -moz-box;
display: -webkit-box;
}
.splitToolbarButton:hover > .toolbarButton, .splitToolbarButton:hover > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton { .splitToolbarButton.toggled > .toolbarButton {
background-color: hsla(0,0%,0%,.12); background-color: hsla(0,0%,0%,.12);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); 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));
background-clip: padding-box; background-clip: padding-box;
border: 1px solid hsla(0,0%,0%,.35); border: 1px solid hsla(0,0%,0%,.35);
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
@ -106,6 +126,9 @@ body {
-moz-transition-property: background-color, border-color, box-shadow; -moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 150ms; -moz-transition-duration: 150ms;
-moz-transition-timing-function: ease; -moz-transition-timing-function: ease;
-webkit-transition-property: background-color, border-color, box-shadow;
-webkit-transition-duration: 150ms;
-webkit-transition-timing-function: ease;
} }
.splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:hover,
.dropdownToolbarButton:hover { .dropdownToolbarButton:hover {
@ -145,11 +168,15 @@ body {
-moz-transition-property: margin; -moz-transition-property: margin;
-moz-transition-duration: 10ms; -moz-transition-duration: 10ms;
-moz-transition-timing-function: ease; -moz-transition-timing-function: ease;
-webkit-transition-property: margin;
-webkit-transition-duration: 10ms;
-webkit-transition-timing-function: ease;
} }
.toolbarButton, .toolbarButton,
.dropdownToolbarButton { .dropdownToolbarButton {
-moz-box-flex: 0; -moz-box-flex: 0;
-webkit-box-flex: 1;
min-width: 16px; min-width: 16px;
padding: 3px 7px; padding: 3px 7px;
margin: 4px 2px 4px 0; margin: 4px 2px 4px 0;
@ -159,16 +186,21 @@ body {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
-moz-user-select:none; -moz-user-select:none;
-webkit-user-select:none;
cursor: default; cursor: default;
-moz-transition-property: background-color, border-color, box-shadow; -moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 150ms; -moz-transition-duration: 150ms;
-moz-transition-timing-function: ease; -moz-transition-timing-function: ease;
-webkit-transition-property: background-color, border-color, box-shadow;
-webkit-transition-duration: 150ms;
-webkit-transition-timing-function: ease;
} }
.toolbarButton:hover, .toolbarButton:hover,
.dropdownToolbarButton { .dropdownToolbarButton {
background-color: hsla(0,0%,0%,.12); background-color: hsla(0,0%,0%,.12);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); 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));
background-clip: padding-box; background-clip: padding-box;
border: 1px solid hsla(0,0%,0%,.35); border: 1px solid hsla(0,0%,0%,.35);
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
@ -181,6 +213,7 @@ body {
.dropdownToolbarButton:hover:active { .dropdownToolbarButton:hover:active {
background-color: hsla(0,0%,0%,.2); background-color: hsla(0,0%,0%,.2);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); 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-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45); border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
0 0 1px hsla(0,0%,0%,.2) inset, 0 0 1px hsla(0,0%,0%,.2) inset,
@ -188,12 +221,16 @@ body {
-moz-transition-property: background-color, border-color, box-shadow; -moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 10ms; -moz-transition-duration: 10ms;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
-webkit-transition-property: background-color, border-color, box-shadow;
-webkit-transition-duration: 10ms;
-webkit-transition-timing-function: linear;
} }
.toolbarButton.toggled, .toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled { .splitToolbarButton.toggled > .toolbarButton.toggled {
background-color: hsla(0,0%,0%,.3); background-color: hsla(0,0%,0%,.3);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); 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-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5); border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
0 0 1px hsla(0,0%,0%,.2) inset, 0 0 1px hsla(0,0%,0%,.2) inset,
@ -201,6 +238,9 @@ body {
-moz-transition-property: background-color, border-color, box-shadow; -moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 10ms; -moz-transition-duration: 10ms;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
-webkit-transition-property: background-color, border-color, box-shadow;
-webkit-transition-duration: 10ms;
-webkit-transition-timing-function: linear;
} }
.toolbarButton.toggled:hover:active, .toolbarButton.toggled:hover:active,
@ -219,7 +259,9 @@ body {
background: url(images/toolbarButton-menuArrows.png) no-repeat 95%; background: url(images/toolbarButton-menuArrows.png) no-repeat 95%;
} }
.dropdownToolbarButton select { .dropdownToolbarButton > select {
-moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
-webkit-appearance: none;
min-width: 120px; min-width: 120px;
font-size: 12px; font-size: 12px;
color: hsl(0,0%,95%); color: hsl(0,0%,95%);
@ -244,6 +286,7 @@ body {
.toolbarButtonFlexibleSpacer { .toolbarButtonFlexibleSpacer {
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-box-flex: 1;
min-width: 30px; min-width: 30px;
} }
@ -346,6 +389,7 @@ body {
line-height: 14px; line-height: 14px;
text-align: left; text-align: left;
-moz-user-select:none; -moz-user-select:none;
-webkit-user-select:none;
cursor: default; cursor: default;
} }
@ -417,6 +461,7 @@ body {
padding: 16px 4px 0; padding: 16px 4px 0;
overflow: auto; overflow: auto;
-moz-user-select:none; -moz-user-select:none;
-webkit-user-select:none;
} }
#outlineView.hidden { #outlineView.hidden {
display:none; display:none;
@ -633,3 +678,8 @@ canvas {
.clearBoth { .clearBoth {
clear: both; clear: both;
} }
.fileInput {
background: white;
color: black;
}

3
web/viewer.html
View File

@ -81,12 +81,13 @@
</div> </div>
<div class="toolbarButtonFlexibleSpacer"></div> <div class="toolbarButtonFlexibleSpacer"></div>
<input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;"/> <input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;"/>
<div class="toolbarButtonSpacer"></div> <div class="toolbarButtonSpacer"></div>
<!-- <div class="toolbarButton print" title="Print"></div> --> <!-- <div class="toolbarButton print" title="Print"></div> -->
<div class="toolbarButton download" title="Download" onclick="PDFView.download();"></div> <div id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></div>
<a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location"> <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
</a> </a>
</div> </div>