display: none !important;
}
- /* === Toolbar === */
- #controls {
- background-color: #eee;
- background: -o-linear-gradient(bottom,#eee 0%,#fff 100%);
- background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%);
- background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff));
- border-bottom: 1px solid #666;
- padding: 3px;
- position: fixed;
- left: 0px;
- top: 0px;
- height: 24px;
+ /* outer/inner center provides horizontal center */
+ html[dir='ltr'] .outerCenter {
+ float: right;
+ position: relative;
+ right: 50%;
+ }
+ html[dir='rtl'] .outerCenter {
+ float: left;
+ position: relative;
+ left: 50%;
+ }
+ html[dir='ltr'] .innerCenter {
+ float: right;
+ position: relative;
+ right: -50%;
+ }
+ html[dir='rtl'] .innerCenter {
+ float: left;
+ position: relative;
+ left: -50%;
+ }
+
+ #outerContainer {
width: 100%;
- z-index: 1;
- white-space:nowrap;
- overflow: hidden;
+ height: 100%;
}
- .separator {
- display: inline;
- border-left: 1px solid #d3d3d3;
- border-right: 1px solid #fff;
- height: 16px;
- width:0px;
- margin: 4px;
+ #sidebarContainer {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 200px;
+ visibility: hidden;
+ -moz-transition-duration: 200ms;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-duration: 200ms;
+ -webkit-transition-timing-function: ease;
+ }
+ html[dir='ltr'] #sidebarContainer {
+ -moz-transition-property: left;
+ -webkit-transition-property: left;
+ left: -200px;
+ }
+ html[dir='rtl'] #sidebarContainer {
+ -moz-transition-property: right;
+ -webkit-transition-property: right;
+ right: -200px;
}
- #controls > a > img {
- margin: 4px;
- height: 16px;
+ #outerContainer.sidebarMoving > #sidebarContainer,
+ #outerContainer.sidebarOpen > #sidebarContainer {
+ visibility: visible;
+ }
+ html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer {
+ left: 0px;
+ }
+ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
+ right: 0px;
}
- #controls > button {
- line-height: 16px;
+ #mainContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ -moz-transition-duration: 200ms;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-duration: 200ms;
+ -webkit-transition-timing-function: ease;
}
+ html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
+ -moz-transition-property: left;
+ -webkit-transition-property: left;
+ left: 200px;
+ }
+ html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
+ -moz-transition-property: right;
+ -webkit-transition-property: right;
+ right: 200px;
+ }
+
+ #sidebarContent {
+ top: 32px;
+ bottom: 0;
+ overflow: auto;
+ position: absolute;
+ width: 200px;
- #controls > button > img {
- width: 16px;
- height: 16px;
+ background-color: hsla(0,0%,0%,.1);
+ box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+ }
+ html[dir='ltr'] #sidebarContent {
+ left: 0;
+ }
+ html[dir='rtl'] #sidebarContent {
+ right: 0;
}
- #controls > button[disabled] > img {
- opacity: 0.5;
+ #viewerContainer {
+ overflow: auto;
+ box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+ padding-top: 30px;
+ position: absolute;
+ top: 32px;
+ right: 0;
+ bottom: 0;
+ left: 0;
}
- #pageNumber {
- text-align: right;
+ .toolbar {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 32px;
+ z-index: 9999;
+ cursor: default;
}
- #fileInput {
- line-height: 16px;
+ #toolbarContainer {
+ width: 100%;
}
- /* === Sidebar === */
- #sidebar {
- position: fixed;
- width: 350px;
- top: 62px;
- bottom: 18px;
- left: -290px;
- transition: left 0.25s ease-in-out 1s;
- -o-transition: left 0.25s ease-in-out 1s;
- -moz-transition: left 0.25s ease-in-out 1s;
- -webkit-transition: left 0.25s ease-in-out 1s;
- z-index: 1;
- }
-
- #sidebar:hover,
- #sidebar.pinned {
- left: 0px;
- transition: left 0.25s ease-in-out 0s;
- -o-transition: left 0.25s ease-in-out 0s;
- -moz-transition: left 0.25s ease-in-out 0s;
- -webkit-transition: left 0.25s ease-in-out 0s;
+ #toolbarSidebar {
+ width: 200px;
+ height: 32px;
+ 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),
+ -webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
+ box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08),
+ inset 0 1px 1px hsla(0,0%,0%,.15),
+ inset 0 -1px 0 hsla(0,0%,100%,.05),
+ 0 1px 0 hsla(0,0%,0%,.15),
+ 0 1px 1px hsla(0,0%,0%,.1);
+ }
+
+ #toolbarViewer {
+ position: relative;
+ height: 32px;
+ background-image: url(images/texture.png),
+ -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);
+ box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
+ inset 0 1px 1px hsla(0,0%,0%,.15),
+ inset 0 -1px 0 hsla(0,0%,100%,.05),
+ 0 1px 0 hsla(0,0%,0%,.15),
+ 0 1px 1px hsla(0,0%,0%,.1);
+ }
+ html[dir='ltr'] #toolbarViewerLeft {
+ margin-left: -1px;
+ }
+ html[dir='rtl'] #toolbarViewerRight {
+ margin-left: -1px;
}
- #pinIcon {
+
+ html[dir='ltr'] #toolbarViewerLeft,
+ html[dir='rtl'] #toolbarViewerRight {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ html[dir='ltr'] #toolbarViewerRight,
+ html[dir='rtl'] #toolbarViewerLeft {
position: absolute;
- top: 4px;
- right: 55px;
- width: 15px;
- height: 15px;
- background: center no-repeat;
- background-image: url('images/pin-up.svg');
- background-size: 15px 15px;
+ top: 0;
+ right: 0;
+ }
+ html[dir='ltr'] #toolbarViewerLeft > *,
+ html[dir='ltr'] #toolbarViewerMiddle > *,
+ html[dir='ltr'] #toolbarViewerRight > * {
+ float: left;
+ }
+ html[dir='rtl'] #toolbarViewerLeft > *,
+ html[dir='rtl'] #toolbarViewerMiddle > *,
+ html[dir='rtl'] #toolbarViewerRight > * {
+ float: right;
}
- #pinIcon:hover {
- background-color: rgba(255,255,255,0.35);
+ html[dir='ltr'] .splitToolbarButton {
+ margin: 3px 2px 4px 0;
+ display: inline-block;
+ }
+ html[dir='rtl'] .splitToolbarButton {
+ margin: 3px 0 4px 2px;
+ display: inline-block;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton {
+ border-radius: 0;
+ float: left;
+ }
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
+ border-radius: 0;
+ float: right;
}
- #sidebar.pinned #pinIcon {
- background-image: url('images/pin-down.svg');
- background-size: 15px 15px;
+ .toolbarButton {
+ border: 0 none;
+ background-color: rgba(0, 0, 0, 0);
+ width: 32px;
+ height: 25px;
}
- #sidebarBox {
- background-color: rgba(0, 0, 0, 0.7);
- width: 300px;
- height: 100%;
- border-top-right-radius: 8px;
- border-bottom-right-radius: 8px;
- -moz-border-radius-topright: 8px;
- -moz-border-radius-bottomright: 8px;
- -webkit-border-top-right-radius: 8px;
- -webkit-border-bottom-right-radius: 8px;
- box-shadow: 0px 2px 8px #000;
- -moz-box-shadow: 0px 2px 8px #000;
- -webkit-box-shadow: 0px 2px 8px #000;
- }
-
- #sidebarScrollView {
- position: absolute;
+ .toolbarButton > span {
+ display: inline-block;
+ width: 0;
+ height: 0;
overflow: hidden;
- overflow-y: auto;
- top: 20px;
- bottom: 10px;
- left: 10px;
- width: 280px;
}
- .thumbnail {
- width: 134px;
- height: 134px;
- margin-top: 5px;
- margin-bottom: 5px;
- margin-left:auto;
- margin-right:auto;
- line-height: 134px;
- text-align: center;
+ .toolbarButton[disabled] {
+ opacity: .5;
+ }
+
++.toolbarButton.group {
++ margin-right:0;
++}
++
+ .splitToolbarButton:hover > .toolbarButton,
+ .splitToolbarButton:focus > .toolbarButton,
+ .splitToolbarButton.toggled > .toolbarButton {
+ 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));
+ background-clip: padding-box;
+ 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);
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+ 0 0 1px hsla(0,0%,100%,.15) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ -moz-transition-property: background-color, border-color, box-shadow;
+ -moz-transition-duration: 150ms;
+ -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:focus,
+ .dropdownToolbarButton:hover {
+ 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,
+ 0 0 1px hsla(0,0%,0%,.05);
+ z-index: 199;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
+ position: relative;
+ margin: 0;
+ margin-right: -1px;
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+ border-right-color: transparent;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
+ position: relative;
+ margin: 0;
+ margin-left: -1px;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-left-color: transparent;
+ }
+ .splitToolbarButtonSeparator {
+ padding: 8px 0;
+ width: 1px;
+ background-color: hsla(0,0%,00%,.5);
+ z-index: 99;
+ box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+ display: inline-block;
+ margin: 5px 0;
+ }
+ html[dir='ltr'] .splitToolbarButtonSeparator {
+ float:left;
+ }
+ html[dir='rtl'] .splitToolbarButtonSeparator {
+ float:right;
+ }
+ .splitToolbarButton:hover > .splitToolbarButtonSeparator,
+ .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
+ padding: 12px 0;
+ margin: 0;
+ box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
+ -moz-transition-property: padding;
+ -moz-transition-duration: 10ms;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-property: padding;
+ -webkit-transition-duration: 10ms;
+ -webkit-transition-timing-function: ease;
+ }
+
+ .toolbarButton,
+ .dropdownToolbarButton {
+ min-width: 16px;
+ padding: 2px 6px 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ color: hsl(0,0%,95%);
+ font-size: 12px;
+ line-height: 14px;
+ -moz-user-select:none;
+ -webkit-user-select:none;
+ cursor: default;
+ -moz-transition-property: background-color, border-color, box-shadow;
+ -moz-transition-duration: 150ms;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-property: background-color, border-color, box-shadow;
+ -webkit-transition-duration: 150ms;
+ -webkit-transition-timing-function: ease;
+ }
+
+ html[dir='ltr'] .toolbarButton,
+ html[dir='ltr'] .dropdownToolbarButton {
+ margin: 3px 2px 4px 0;
+ }
+ html[dir='rtl'] .toolbarButton,
+ html[dir='rtl'] .dropdownToolbarButton {
+ margin: 3px 0 4px 2px;
+ }
+
+ .toolbarButton:hover,
+ .toolbarButton:focus,
+ .dropdownToolbarButton {
+ 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));
+ background-clip: padding-box;
+ 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);
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+ 0 0 1px hsla(0,0%,100%,.15) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ }
+
+ .toolbarButton:hover:active,
+ .dropdownToolbarButton:hover:active {
+ background-color: hsla(0,0%,0%,.2);
+ 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);
+ box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
+ 0 0 1px hsla(0,0%,0%,.2) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ -moz-transition-property: background-color, border-color, box-shadow;
+ -moz-transition-duration: 10ms;
+ -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,
+ .splitToolbarButton.toggled > .toolbarButton.toggled {
+ 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-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,
+ 0 0 1px hsla(0,0%,0%,.2) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ -moz-transition-property: background-color, border-color, box-shadow;
+ -moz-transition-duration: 10ms;
+ -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,
+ .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
+ background-color: hsla(0,0%,0%,.4);
+ border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
+ box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
+ 0 0 1px hsla(0,0%,0%,.3) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ }
+
+ .dropdownToolbarButton {
+ min-width: 120px;
+ max-width: 120px;
+ padding: 3px 2px 2px;
overflow: hidden;
+ background: url(images/toolbarButton-menuArrows.png) no-repeat;
+ }
+ html[dir='ltr'] .dropdownToolbarButton {
+ background-position: 95%;
+ }
+ html[dir='rtl'] .dropdownToolbarButton {
+ background-position: 5%;
}
- .thumbnail:not([data-loaded]) {
- background-color: gray;
+ .dropdownToolbarButton > select {
+ -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
+ -webkit-appearance: none;
+ min-width: 140px;
+ font-size: 12px;
+ color: hsl(0,0%,95%);
+ margin:0;
+ padding:0;
+ border:none;
+ background: transparent;
+ }
+
+ #customScaleOption {
+ display: none;
+ }
+
+ #pageWidthOption {
+ border-bottom: 1px rgba(255, 255, 255, .5) solid;
+ }
+
+ html[dir='ltr'] .splitToolbarButton:first-child,
+ html[dir='ltr'] .toolbarButton:first-child,
+ html[dir='rtl'] .splitToolbarButton:last-child,
+ html[dir='rtl'] .toolbarButton:last-child {
+ margin-left: 4px;
+ }
+ html[dir='ltr'] .splitToolbarButton:last-child,
+ html[dir='ltr'] .toolbarButton:last-child,
+ html[dir='rtl'] .splitToolbarButton:first-child,
+ html[dir='rtl'] .toolbarButton:first-child {
+ margin-right: 4px;
}
- .thumbnail > canvas {
- vertical-align: middle;
+ .toolbarButtonSpacer {
+ width: 30px;
display: inline-block;
+ height: 1px;
}
- #outlineScrollView {
- position: absolute;
- background-color: #fff;
+ .toolbarButtonFlexibleSpacer {
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+ min-width: 30px;
+ }
+
+ .toolbarButton#sidebarToggle::before {
+ display: inline-block;
+ content: url(images/toolbarButton-sidebarToggle.png);
+ }
+
+ html[dir='ltr'] .toolbarButton.pageUp::before {
+ display: inline-block;
+ content: url(images/toolbarButton-pageUp.png);
+ }
+
+ html[dir='rtl'] .toolbarButton.pageUp::before {
+ display: inline-block;
+ content: url(images/toolbarButton-pageUp-rtl.png);
+ }
+
+ html[dir='ltr'] .toolbarButton.pageDown::before {
+ display: inline-block;
+ content: url(images/toolbarButton-pageDown.png);
+ }
+
+ html[dir='rtl'] .toolbarButton.pageDown::before {
+ display: inline-block;
+ content: url(images/toolbarButton-pageDown-rtl.png);
+ }
+
+ .toolbarButton.zoomOut::before {
+ display: inline-block;
+ content: url(images/toolbarButton-zoomOut.png);
+ }
+
+ .toolbarButton.zoomIn::before {
+ display: inline-block;
+ content: url(images/toolbarButton-zoomIn.png);
+ }
+
+ .toolbarButton.print::before {
+ display: inline-block;
+ content: url(images/toolbarButton-print.png);
+ }
+
+ .toolbarButton.download::before {
+ display: inline-block;
+ content: url(images/toolbarButton-download.png);
+ }
+
+ .toolbarButton.bookmark {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-top: 3px;
+ padding-top: 4px;
+ }
+
+ .toolbarButton.bookmark::before {
+ content: url(images/toolbarButton-bookmark.png);
+ }
+
+ #viewThumbnail.toolbarButton::before {
+ display: inline-block;
+ content: url(images/toolbarButton-viewThumbnail.png);
+ }
+
+ #viewOutline.toolbarButton::before {
+ display: inline-block;
+ content: url(images/toolbarButton-viewOutline.png);
+ }
+
++#viewSearch.toolbarButton::before {
++ display: inline-block;
++ font-size: 18px;
++ content: 'S';
++}
++
++
+ .toolbarField {
+ min-width: 16px;
+ width: 32px;
+ padding: 3px 6px;
+ margin: 4px 0 4px 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ background-color: hsla(0,0%,100%,.09);
+ background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+ background-clip: padding-box;
+ 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);
+ box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
+ 0 1px 0 hsla(0,0%,100%,.05);
+ 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;
+ -moz-transition-timing-function: ease;
+ }
+
+ .toolbarField.pageNumber {
+ width: 40px;
+ }
+
+ .toolbarField.pageNumber::-webkit-inner-spin-button,
+ .toolbarField.pageNumber::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ .toolbarField:hover {
+ background-color: hsla(0,0%,100%,.11);
+ border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
+ }
+
+ .toolbarField:focus {
+ background-color: hsla(0,0%,100%,.15);
+ border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
+ }
+
+ .toolbarLabel {
+ min-width: 16px;
+ padding: 3px 6px 3px 2px;
+ margin: 4px 2px 4px 0;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ color: hsl(0,0%,85%);
+ font-size: 12px;
+ line-height: 14px;
+ text-align: left;
+ -moz-user-select:none;
+ -webkit-user-select:none;
+ cursor: default;
+ }
+
+ #thumbnailView {
+ position: fixed;
+ width: 120px;
+ top: 33px;
+ bottom: 0;
+ padding: 10px 40px 0;
overflow: auto;
- top: 20px;
- bottom: 10px;
- left: 10px;
- width: 280px;
+ }
+
+ .thumbnail {
+ margin-bottom: 15px;
+ float: left;
+ width: 114px;
+ height: 142px;
+ }
+
+ .thumbnail:not([data-loaded]) {
+ border: 1px dashed rgba(255, 255, 255, 0.5);
+ }
+
+ .thumbnailImage {
+ -moz-transition-duration: 150ms;
+ border: 1px solid transparent;
+ 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;
+ }
+
+ .thumbnailSelectionRing {
+ border-radius: 2px;
+ padding: 7px;
+ -moz-transition-duration: 150ms;
+ }
+
+ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
+ .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
+ opacity: .9;
+ }
+
+ a:focus > .thumbnail > .thumbnailSelectionRing,
+ .thumbnail:hover > .thumbnailSelectionRing {
+ background-color: hsla(0,0%,100%,.15);
+ 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%,.2) inset,
+ 0 0 1px hsla(0,0%,0%,.2);
+ color: hsla(0,0%,100%,.9);
+ }
+
+ .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
+ box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
+ opacity: 1;
+ }
+
+ .thumbnail.selected > .thumbnailSelectionRing {
+ background-color: hsla(0,0%,100%,.3);
+ 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);
}
#outlineView {
}
.outlineItem > a:hover {
- background: #ff0;
- box-shadow: 0px 2px 10px #ff0;
+ 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;
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+ 0 0 1px hsla(0,0%,100%,.2) inset,
+ 0 0 1px hsla(0,0%,0%,.2);
+ color: hsla(0,0%,100%,.9);
}
- width: 210px;
+#searchScrollView {
+ position: absolute;
+ top: 10px;
+ bottom: 10px;
+ left: 10px;
+ width: 280px;
+}
+
+#searchToolbar {
+ padding-left: 0px;
+ right: 0px;
+ padding-top: 0px;
+ padding-bottom: 5px;
+}
+
+#searchToolbar > input {
- #sidebarControls > button {
- box-shadow: 0px 4px 10px #000;
- -moz-box-shadow: 0px 4px 10px #000;
- -webkit-box-shadow: 0px 4px 10px #000;
++ margin-left: 8px;
++ width: 130px;
+}
+
+#searchResults {
+ overflow: auto;
+ background-color: #fff;
+ position: absolute;
+ top: 30px;
+ bottom: 0px;
+ left: 0px;
+ right: 0;
+ font-size: smaller;
+ opacity: 0.7;
+}
+
+#searchResults a {
+ display: block;
+ white-space: pre;
+ text-decoration: none;
+ color: black;
+}
+
+#sidebarControls {
+ position:absolute;
+ width: 180px;
+ height: 32px;
+ left: 15px;
+ 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);
}
- #sidebarControls > button > img {
- width: 32px;
- height: 32px;
+ .noOutline {
+ font-size: 12px;
+ color: hsla(0,0%,100%,.8);
+ font-style: italic;
}
- #sidebarControls > button[disabled] > img {
- opacity: 0.5;
- }
- #sidebarControls > button[data-selected] {
- box-shadow: 0px 4px 10px #ff0;
- -moz-box-shadow: 0px 4px 10px #ff0;
- -webkit-box-shadow: 0px 4px 10px #ff0;
- }
- /* === Content view === */
canvas {
margin: auto;
display: block;
<!DOCTYPE html>
- <html>
- <head>
- <title>Simple pdf.js page viewer</title>
- <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
-
- <link rel="stylesheet" href="viewer.css"/>
-
- <script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION -->
-
- <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
- <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/api.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/metadata.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/stream.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../external/jpgjs/jpg.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/jpx.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="../src/bidi.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
- <script type="text/javascript" src="debugger.js"></script>
- <script type="text/javascript" src="viewer.js"></script>
-
-
- </head>
+ <html dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <title>PDF.js viewer</title>
+ <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
+
+ <link rel="stylesheet" href="viewer.css"/>
+ <link rel="resource" type="application/l10n" href="locale.properties"/><!-- PDFJSSCRIPT_REMOVE_CORE -->
+
+ <script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION -->
+ <script type="text/javascript" src="../external/webL10n/l10n.js"></script><!-- PDFJSSCRIPT_REMOVE_CORE -->
+
+ <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
+ <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/util.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/api.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/metadata.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/canvas.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/obj.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/charsets.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/cidmaps.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/colorspace.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/crypto.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/evaluator.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/fonts.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/glyphlist.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/image.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/metrics.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/parser.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/pattern.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/stream.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/worker.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../external/jpgjs/jpg.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/jpx.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="../src/bidi.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+ <script type="text/javascript" src="debugger.js"></script>
+ <script type="text/javascript" src="viewer.js"></script>
+ </head>
<body>
- <div id="controls">
- <button id="previous" onclick="PDFView.page--;" oncontextmenu="return false;">
- <img src="images/go-up.svg" align="top" height="16"/>
- Previous
- </button>
-
- <button id="next" onclick="PDFView.page++;" oncontextmenu="return false;">
- <img src="images/go-down.svg" align="top" height="16"/>
- Next
- </button>
-
- <div class="separator"></div>
-
- <input type="number" id="pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" />
-
- <span>/</span>
- <span id="numPages">--</span>
-
- <div class="separator"></div>
-
- <button id="zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" oncontextmenu="return false;">
- <img src="images/zoom-out.svg" align="top" height="16"/>
- </button>
- <button id="zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" oncontextmenu="return false;">
- <img src="images/zoom-in.svg" align="top" height="16"/>
- </button>
-
- <div class="separator"></div>
-
- <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
- <option id="customScaleOption" value="custom"></option>
- <option value="0.5">50%</option>
- <option value="0.75">75%</option>
- <option value="1">100%</option>
- <option value="1.25">125%</option>
- <option value="1.5">150%</option>
- <option value="2">200%</option>
- <option id="pageWidthOption" value="page-width">Page Width</option>
- <option id="pageFitOption" value="page-fit">Page Fit</option>
- <option id="pageAutoOption" value="auto" selected="selected">Auto</option>
- </select>
-
- <div class="separator"></div>
-
- <button id="print" onclick="window.print();" oncontextmenu="return false;">
- <img src="images/document-print.svg" align="top" height="16"/>
- Print
- </button>
-
- <button id="download" title="Download" onclick="PDFView.download();" oncontextmenu="return false;">
- <img src="images/download.svg" align="top" height="16"/>
- Download
- </button>
-
- <div class="separator"></div>
-
- <input id="fileInput" type="file" oncontextmenu="return false;"/>
-
- <div id="fileInputSeperator" class="separator"></div>
+ <div id="outerContainer">
- <a href="#" id="viewBookmark" title="Bookmark (or copy) current location">
- <img src="images/bookmark.svg" alt="Bookmark" align="top" height="16"/>
- </a>
-
- </div>
- <div id="errorWrapper" hidden='true'>
- <div id="errorMessageLeft">
- <span id="errorMessage"></span>
- <button id="errorShowMore" onclick="" oncontextmenu="return false;">
- More Information
- </button>
- <button id="errorShowLess" onclick="" oncontextmenu="return false;" hidden='true'>
- Less Information
- </button>
- </div>
- <div id="errorMessageRight">
- <button id="errorClose" oncontextmenu="return false;">
- Close
- </button>
- </div>
- <div class="clearBoth"></div>
- <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
- </div>
-
- <div id="sidebar">
- <div id="sidebarBox">
- <div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
- <div id="sidebarScrollView">
- <div id="sidebarView"></div>
+ <div id="sidebarContainer">
+ <div id="toolbarSidebar">
- <div class="splitToolbarButton toggled">
- <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
- <span data-l10n-id="thumbs_label">Thumbnails</span>
- </button>
- <button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline">
- <span data-l10n-id="outline_label">Document Outline</span>
- </button>
- </div>
++ <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
++ <span data-l10n-id="thumbs_label">Thumbnails</span>
++ </button>
++ <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline">
++ <span data-l10n-id="outline_label">Document Outline</span>
++ </button>
++ <button id="viewSearch" class="toolbarButton group" title="Search Document" onclick="PDFView.switchSidebarView('search')" tabindex="3" data-l10n-id="search">
++ <span data-l10n-id="search_label">Search Document</span>
++ </button>
</div>
- <div id="outlineScrollView" hidden='true'>
- <div id="outlineView"></div>
+ <div id="sidebarContent">
+ <div id="thumbnailView">
+ </div>
+ <div id="outlineView" class="hidden">
+ </div>
++ <div id="searchView" class="hidden">
++ <div id="searchToolbar">
++ <input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
++ <button id="searchButton" onclick='PDFView.search()'>Find</button>
++ </div>
++ <div id="searchResults"></div>
++ </div>
</div>
- <div id="searchScrollView" hidden='true'>
- <div id="searchToolbar">
- <input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
- <button id="searchButton" onclick='PDFView.search()'>Find</button>
+ </div> <!-- sidebarContainer -->
+
+ <div id="mainContainer">
+ <div class="toolbar">
+ <div id="toolbarContainer">
+
+ <div id="toolbarViewer">
+ <div id="toolbarViewerLeft">
+ <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="3" data-l10n-id="toggle_slider">
+ <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
+ </button>
+ <div class="toolbarButtonSpacer"></div>
+ <div class="splitToolbarButton">
+ <button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous" tabindex="4" data-l10n-id="previous">
+ <span data-l10n-id="previous_label">Previous</span>
+ </button>
+ <div class="splitToolbarButtonSeparator"></div>
+ <button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next" tabindex="5" data-l10n-id="next">
+ <span data-l10n-id="next_label">Next</span>
+ </button>
+ </div>
+ <label class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
+ <input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" tabindex="6">
+ </input>
+ <span id="numPages" class="toolbarLabel"></span>
+ </div>
+ <div id="toolbarViewerRight">
+ <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" tabindex="10" />
+
+ <!--
+ <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" style="visibility: hidden; position: fixed; right: 0; top: 0" />
+ <button id="openFile" class="toolbarButton print" title="Open File" tabindex="10" data-l10n-id="open_file" onclick="document.getElementById('fileInput').click()">
+ <span data-l10n-id="open_file_label">Open</span>
+ </button>
+ -->
+
+ <!--
+ <button id="print" class="toolbarButton print" title="Print" tabindex="11" data-l10n-id="print" onclick="window.print()">
+ <span data-l10n-id="print_label">Print</span>
+ </button>
+ -->
+
+ <button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();" tabindex="12" data-l10n-id="download">
+ <span data-l10n-id="download_label">Download</span>
+ </button>
+ <!-- <div class="toolbarButtonSpacer"></div> -->
+ <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Current view (copy or open in new window)" tabindex="13" data-l10n-id="bookmark"><span data-l10n-id="bookmark_label">Current View</span></a>
+ </div>
+ <div class="outerCenter">
+ <div class="innerCenter" id="toolbarViewerMiddle">
+ <div class="splitToolbarButton">
+ <button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" tabindex="7" data-l10n-id="zoom_out">
+ <span data-l10n-id="zoom_out_label">Zoom Out</span>
+ </button>
+ <div class="splitToolbarButtonSeparator"></div>
+ <button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" tabindex="8" data-l10n-id="zoom_in">
+ <span data-l10n-id="zoom_in_label">Zoom In</span>
+ </button>
+ </div>
+ <span class="dropdownToolbarButton">
+ <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" title="Zoom" oncontextmenu="return false;" tabindex="9" data-l10n-id="zoom">
+ <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
+ <option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
+ <option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
+ <option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
+ <option id="customScaleOption" value="custom"></option>
+ <option value="0.5">50%</option>
+ <option value="0.75">75%</option>
+ <option value="1">100%</option>
+ <option value="1.25">125%</option>
+ <option value="1.5">150%</option>
+ <option value="2">200%</option>
+ </select>
+ </span>
+ </div>
+ </div>
+ </div>
</div>
- <div id="searchResults"></div>
</div>
- <div id="sidebarControls">
- <button id="thumbsSwitch" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" data-selected>
- <img src="images/nav-thumbs.svg" align="top" height="16" alt="Thumbs" />
- </button>
- <button id="outlineSwitch" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled>
- <img src="images/nav-outline.svg" align="top" height="16" alt="Document Outline" />
- </button>
- <button id="searchSwitch" title="Show Search" onclick="PDFView.switchSidebarView('search')">
- <img src="images/edit-find.svg" align="top" height="16" alt="Search Document" />
- </button>
+
+ <div id="viewerContainer">
+ <div id="viewer"></div>
+ </div>
+
+ <div id="loadingBox">
+ <div id="loading" data-l10n-id="loading" data-l10n-args='{"percent": 0}'>Loading... 0%</div>
+ <div id="loadingBar"><div class="progress"></div></div>
+ </div>
+
+ <div id="errorWrapper" hidden='true'>
+ <div id="errorMessageLeft">
+ <span id="errorMessage"></span>
+ <button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
+ More Information
+ </button>
+ <button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
+ Less Information
+ </button>
+ </div>
+ <div id="errorMessageRight">
+ <button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close">
+ Close
+ </button>
+ </div>
+ <div class="clearBoth"></div>
+ <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
- </div>
- </div>
+ </div> <!-- mainContainer -->
- <div id="loadingBox">
- <div id="loading">Loading... 0%</div>
- <div id="loadingBar"><div class="progress"></div></div>
- </div>
- <div id="viewer"></div>
+ </div> <!-- outerContainer -->
</body>
</html>
projects / pdf.js.git / commitdiff