From 324ea1d743987f1987ff2633d9ea575991064815 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 11 Apr 2012 16:12:51 -0700 Subject: [PATCH] first mockup, loads tracemonkey pages OK --- web/images/texture.png | Bin 0 -> 2459 bytes web/images/toolbarButton-bookmark.png | Bin 0 -> 244 bytes web/images/toolbarButton-download.png | Bin 0 -> 334 bytes web/images/toolbarButton-menuArrows.png | Bin 0 -> 237 bytes web/images/toolbarButton-pageDown.png | Bin 0 -> 353 bytes web/images/toolbarButton-pageUp.png | Bin 0 -> 344 bytes web/images/toolbarButton-print.png | Bin 0 -> 474 bytes web/images/toolbarButton-sidebarToggle.png | Bin 0 -> 349 bytes web/images/toolbarButton-viewOutline.png | Bin 0 -> 300 bytes web/images/toolbarButton-viewThumbnail.png | Bin 0 -> 211 bytes web/images/toolbarButton-zoomIn.png | Bin 0 -> 228 bytes web/images/toolbarButton-zoomOut.png | Bin 0 -> 143 bytes web/viewer.css | 876 +++++++++++---------- web/viewer.html | 152 +++- 14 files changed, 569 insertions(+), 459 deletions(-) create mode 100644 web/images/texture.png create mode 100644 web/images/toolbarButton-bookmark.png create mode 100644 web/images/toolbarButton-download.png create mode 100644 web/images/toolbarButton-menuArrows.png create mode 100644 web/images/toolbarButton-pageDown.png create mode 100644 web/images/toolbarButton-pageUp.png create mode 100644 web/images/toolbarButton-print.png create mode 100644 web/images/toolbarButton-sidebarToggle.png create mode 100644 web/images/toolbarButton-viewOutline.png create mode 100644 web/images/toolbarButton-viewThumbnail.png create mode 100644 web/images/toolbarButton-zoomIn.png create mode 100644 web/images/toolbarButton-zoomOut.png diff --git a/web/images/texture.png b/web/images/texture.png new file mode 100644 index 0000000000000000000000000000000000000000..df00864932368d75024b46b3a1993d0f51f1d59a GIT binary patch literal 2459 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 O5r8?-l2B*lk?>!&x?|k{ literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-bookmark.png b/web/images/toolbarButton-bookmark.png new file mode 100644 index 0000000000000000000000000000000000000000..1e5259a97ae3b79f7ea01ced902e0c43798dbc2d GIT binary patch literal 244 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`yFFbTLn?0dPPXMb+v(^&c9yfp;>!C z`yk7ix`lgj&0zuYI7|}jbIT6QfUz^ z>Oks6r=eWyo;1N6*7twq{!dk?jQ_7bLpg6wvGo&O3C*=vmZ%$lnc>8deT3~wf=0%@ qjDERb)?>R2G`?iUWv@R~e($|o)93%X-@1U_VDNPHb6Mw<&;$V3Ut?_m literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-download.png b/web/images/toolbarButton-download.png new file mode 100644 index 0000000000000000000000000000000000000000..a0a9ce3e00581a3a2bd395ca25b554eb9c80394e GIT binary patch literal 334 zcmV-U0kQsxP)P6Fi0>kh$p6hZ~Ko0erXF& zWDo;|pk6@1*ZTix@MFDOF3=KSh%z#8Gw6BdeyaLkiGc5_9J7F~-~!4rK$Pe@XMHI7 zUkrh7ORO`1x}nlAB|5elZwvnC{m*-qZ=S}W3A7q64N=0yply+IJ?CnUX(FaHLDkDn+0QuIaD$uLUrvLx|07*qoM6N<$g276H{r~^~ literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-menuArrows.png b/web/images/toolbarButton-menuArrows.png new file mode 100644 index 0000000000000000000000000000000000000000..31b06b5af9e548b15e274677b8ecaac1c1d06e77 GIT binary patch literal 237 zcmeAS@N?(olHy`uVBq!ia0vp^>_9BQ!2%=;I@VSLDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9Mg5*Gjv*Y;$q5RA21W%&988AFF7neS9({Y$O^hc-fzNvT zy{kX}UyqMIu=e3{csed~)S6b>9XaCpJd2PXwsj@)uEyTHN9Cd}ro z5XP`c@(2I(zwen392I~4ZeZ0+OPe6@{r)uVcjpxtQN)i16KOjF~A%cy9L}N?{*aRypMbKt#Y{Wu@^dWzc zB43gw@m?5VSf4XKI1uvgxkJb(Jp(WVYhVPnHDj;=mcX2{j2A`GW>r;L-}l82ZQFh| zO*2i?^oZrQ5>KD9SC-`y?f{*0oaG|B7xlwaLz8mj}qKT!aP_teqVs_y##kUGoqtiwOACzF#-<;cM@iX z4qc!Yz$DM}D=cpR1G99rt30p*4zet}M&QNP=Y&2{#AlocLCwd zgzqHz&yp|CdBw$>ph$U z)hTRj6#q=2*TFhKHzx|6MzWGs8Z{*folGT{Oft!nX+2TscPHu_w7sJZOjQKt!iL$+`E7GKObZu1M&0Q qn}h0!&|(*d3p}p4q{kr^2K)fvg`AtvZ>v!N0000R2Ufr!B0z*aR30|=ePH_&CN9b zGN^_S5((O&!lLLBgeMOj6rwNSAv$&FSRbGusH=zQ0~B`t^> zpB)1Fs#D*~H_PunS@$ytit4NLmr{cOfV~gJ%dc(f25{V@8oB_8*zr}9|K~7)w!vn| QtpET307*qoM6N<$g4lo5;s5{u literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-sidebarToggle.png b/web/images/toolbarButton-sidebarToggle.png new file mode 100644 index 0000000000000000000000000000000000000000..5a937c712b054defb99910aa8884e5a8e426f26e GIT binary patch literal 349 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6BuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrH1%{r7Zn43UszJ!tC}5-7oN;q!xH1;GqArn>^|FHPP#a!Xx% zV3)ICNs{aokqa{eqB0qEBO+h8F#Skq_-!nHp7Zp*h|LTP4a>@9&DQZ9d(FUb;QapE z@rMfbB(X6t^n~*qc1X(K`rkIzI_s|a{sXJ;epeUfaawL*{lBKt#;EKed&lMK=od^g z6aPQFe?9%?V(SY#rz%be6hFP^6hoYeBvWV5)F4%c2?`T3eRF-;7?1=`xSn)nV&G(& z+5T?j)tx*E2OZiRo_)Rj_vX_!b>;5~na}6)EYy^_C$Vskj}OCD9^EhLZy(>0eIUhf o&PjgR{C&4Y7#LRkoAHmGL7HL7NZJOXS)XL_>Q+(9#k#HnsNx;vxi^`wkeeE@AMj(2^v%5-EeHiadiL2+m;`o}~kg;LFgGbsKGZJ59kX1xFE y?>+E+e@CR94=VC|VB5CkIF2Rlyj4-jJ@^0&o=tDjU66bL0000;0 literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-viewThumbnail.png b/web/images/toolbarButton-viewThumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..3a27f043939942d23aa6cb9992c35a6b526c449f GIT binary patch literal 211 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`vpiiKLn>}9y|j>vDNv;4;bmU4 z-%Yu!vp3|*ADX@)!bk1?!3?8Foih1%R?L&9HSTviSpk+Ka&^`vn5+K)IU-oAe*-xp*r a > img { - margin: 4px; - height: 16px; -} - -#controls > button { - line-height: 16px; -} - -#controls > button > img { - width: 16px; - height: 16px; -} - -#controls > button[disabled] > img { - opacity: 0.5; -} - -#pageNumber { - text-align: right; -} - -#fileInput { - line-height: 16px; -} - -/* === 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; -} - -#pinIcon { - 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; -} - -#pinIcon:hover { - background-color: rgba(255,255,255,0.35); -} - -#sidebar.pinned #pinIcon { - background-image: url('images/pin-down.svg'); - background-size: 15px 15px; -} - -#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; + background-color: #404040; + background-image: url(images/texture.png); + font-family: Segoe UI, Verdana, sans-serif; } -#sidebarScrollView { - position: absolute; - overflow: hidden; - overflow-y: auto; - top: 20px; - bottom: 10px; - left: 10px; - width: 280px; +#outerContainer { + display: -moz-box; + -moz-box-orient: horizontal; + width: 100%; + height: 100%; + -moz-user-select:none; + cursor: default; +} + +#sidebarContainer { + width: 200px; + height: 100%; + background-color: hsla(0,0%,0%,.1); + box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25); + overflow: auto; +} + +#viewerContainer { + -moz-box-flex: 1; + height: 100%; + box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); +} + +.toolbar { + position: fixed; + width: 100%; + height: 32px; + z-index: 9999; + -moz-user-select:none; + cursor: default; +} + +#toolbarContainer { + display: -moz-box; + width: 100%; +} + +#toolbarSidebar { + display: -moz-box; + width: 200px; + height: 32px; + background-image: url(images/texture.png), + -moz-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 { + display: -moz-box; + -moz-box-flex: 1; + margin-left: -1px; + height: 32px; + background-image: url(images/texture.png), + -moz-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); +} + +.splitToolbarButton { + margin: 4px 2px 4px 0; + display: -moz-box; +} +.splitToolbarButton > .toolbarButton { + position: relative; + margin: 0 -1px; + padding: 3px 6px; + border-radius: 0; +} +.splitToolbarButton:hover > .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-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; +} +.splitToolbarButton > .toolbarButton:hover, +.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; +} +.splitToolbarButton > .toolbarButton:first-child { + position: relative; + margin: 0; + margin-right: -1px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + border-right-color: transparent; +} +.splitToolbarButton > .toolbarButton:last-child { + position: relative; + margin: 0; + margin-left: -1px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-left-color: transparent; +} +.splitToolbarButtonSeparator { + margin: 4px 0; + width: 1px; + background-color: hsla(0,0%,00%,.5); + z-index: 99; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.08); +} +.splitToolbarButton:hover > .splitToolbarButtonSeparator, +.splitToolbarButton.toggled > .splitToolbarButtonSeparator { + margin: 1px 0; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.03); + -moz-transition-property: margin; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: ease; +} + +.toolbarButton, +.dropdownToolbarButton { + -moz-box-flex: 0; + min-width: 16px; + padding: 3px 7px; + margin: 4px 2px 4px 0; + border: 1px solid transparent; + border-radius: 2px; + color: hsl(0,0%,95%); + font-size: 12px; + line-height: 14px; + -moz-user-select:none; + cursor: default; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; +} + +.toolbarButton:hover, +.dropdownToolbarButton { + background-color: hsla(0,0%,0%,.12); + 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%,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)); + 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; +} + +.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)); + 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; +} + +.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: 124px; +} +.dropdownToolbarButton::after { + display: inline-block; + float: right; + content: url(images/toolbarButton-menuArrows.png); +} + +.splitToolbarButton:first-child, +.toolbarButton:first-child { + margin-left: 4px; +} +.splitToolbarButton:last-child, +.toolbarButton:last-child { + margin-right: 4px; +} + +.toolbarButtonSpacer { + width: 30px; +} + +.toolbarButtonFlexibleSpacer { + -moz-box-flex: 1; + min-width: 30px; +} + +.toolbarButton.sidebarToggle::before { + display: inline-block; + content: url(images/toolbarButton-sidebarToggle.png); +} + +.toolbarButton.pageUp::before { + display: inline-block; + content: url(images/toolbarButton-pageUp.png); +} + +.toolbarButton.pageDown::before { + display: inline-block; + content: url(images/toolbarButton-pageDown.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::before { + display: inline-block; + content: url(images/toolbarButton-bookmark.png); +} + +.toolbarButton.viewThumbnail::before { + display: inline-block; + content: url(images/toolbarButton-viewThumbnail.png); +} + +.toolbarButton.viewOutline::before { + display: inline-block; + content: url(images/toolbarButton-viewOutline.png); +} + +.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-user-select:none; + cursor: default; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; +} + +.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; + cursor: default; +} + +.viewer { + width: 100%; + height: 100%; + margin-top: -27px; + -moz-user-select:none; + cursor: default; +} + +.viewerImage { +/* width: 50%; */ + margin: 80px 20px 20px; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + +} + + +#thumbnailView { + position: fixed; + width: 120px; + height: 100%; + padding: 51px 40px 0; + overflow: auto; } .thumbnail { - width: 134px; - height: 134px; - margin-top: 5px; - margin-bottom: 5px; - margin-left:auto; - margin-right:auto; - line-height: 134px; - text-align: center; - overflow: hidden; + position: relative; + float: left; + width: 120px; + height: 150px; + +/* + width: 98px; + height: 128px; + margin: 0 10px 20px; + background-color: white; + background-image: url(images/thumbnail.png); + border: 1px solid transparent; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + opacity: .8; + -moz-transition-duration: 150ms; +*/ } -.thumbnail:not([data-loaded]) { - background-color: gray; -} - -.thumbnail > canvas { - vertical-align: middle; - display: inline-block; -} - -#outlineScrollView { +.thumbnailImage { position: absolute; - background-color: #fff; - overflow: auto; - top: 20px; - bottom: 10px; + top: 10px; left: 10px; - width: 280px; + width: 98px; + height: 128px; +/* background-image: url(images/thumbnail.png);*/ + border: 1px solid transparent; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + opacity: .8; + z-index: 99; + -moz-transition-duration: 150ms; +} +.thumbnailSelectionRing { + position: absolute; + width: 112px; + height: 142px; + margin: 4px; + border-radius: 2px; + -moz-transition-duration: 150ms; +} + +.thumbnail:hover > .thumbnailImage { + opacity: .9; +} + +.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 > .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 { - padding-top: 4px; - padding-bottom: 100px; - padding-left: 6px; - padding-right: 6px; - font-size: smaller; + position: fixed; + width: 188px; + height: 100%; + padding: 52px 4px 0; + overflow: auto; } -.outlineItem > .outlineItems { - margin-left: 20px; +.outlineEntry { + width: -moz-calc(100% - 8px); + height: 20px; + padding: 2px 0 0 10px; + margin-bottom: 1px; + border-radius: 2px; + color: hsla(0,0%,100%,.8); + font-size: 13px; + line-height: 15px; + -moz-user-select:none; + cursor: default; } -.outlineItem > a { - text-decoration: none; - color: black; +.outlineEntry: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; + 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); } -.outlineItem > a:hover { - background: #ff0; - box-shadow: 0px 2px 10px #ff0; +.outlineEntry.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 { - position:absolute; - width: 120px; - height: 32px; - left: 15px; - bottom: 35px; -} - -#sidebarControls > button { - box-shadow: 0px 4px 10px #000; - -moz-box-shadow: 0px 4px 10px #000; - -webkit-box-shadow: 0px 4px 10px #000; -} - -#sidebarControls > button > img { - width: 32px; - height: 32px; -} - -#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; @@ -245,230 +504,3 @@ canvas { -moz-box-shadow: 0px 2px 10px #ff0; -webkit-box-shadow: 0px 2px 10px #ff0; } - -.loadingIcon { - position: absolute; - display: block; - left: 0; - top: 0; - right: 0; - bottom: 0; - background: url('images/loading-icon.gif') center no-repeat; -} - -.textLayer { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - color: #000; - font-family: sans-serif; -} - -.textLayer > div { - color: transparent; - position: absolute; - line-height:1.3; -} - -.annotComment > div { - position: absolute; -} - -.annotComment > img { - position: absolute; -} - -.annotComment > img:hover { - cursor: pointer; - opacity: 0.7; -} - -.annotComment > div { - padding: 0.2em; - max-width: 20em; - background-color: #F1E47B; - box-shadow: 0px 2px 10px #333; - -moz-box-shadow: 0px 2px 10px #333; - -webkit-box-shadow: 0px 2px 10px #333; -} - -.annotComment > div > h1 { - font-weight: normal; - font-size: 1.2em; - border-bottom: 1px solid #000000; - margin: 0px; -} - -/* 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 */ -::selection { background:rgba(0,0,255,0.3); } -::-moz-selection { background:rgba(0,0,255,0.3); } - -#viewer { - margin: 44px 0px 0px; - padding: 8px 0px; -} - -#sidebarView canvas:hover { - background: #ff0; - box-shadow: 0px 2px 10px #ff0; - -moz-box-shadow: 0px 2px 10px #ff0; - -webkit-box-shadow: 0px 2px 10px #ff0; -} - -#pageWidthOption { - border-top: 1px solid black; -} - -#customScaleOption { - display: none; -} - -#errorWrapper { - background: none repeat scroll 0 0 #FF5555; - color: white; - left: 0; - position: fixed; - right: 0; - top: 30px; - z-index: 1000; - padding: 3px; - font-size: 0.8em; -} - -#errorMessageLeft { - float: left; -} - -#errorMessageRight { - float: right; -} - -#errorMoreInfo { - background-color: #FFFFFF; - color: black; - padding: 3px; - margin: 3px; - width: 98%; -} - -.clearBoth { - clear: both; -} - -/* === Printed media overrides === */ -@media print { - #sidebar { - display: none; - } - - #controls { - display: none; - } - - #viewer { - margin: 0; - padding: 0; - } - - .page { - display: none; - margin: 0; - } - - .page canvas { - box-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - } - - .page[data-loaded] { - display: block; - page-break-after: always; - } -} - -#loadingBox { - margin: 100px 0; - text-align: center; -} - -#loadingBar { - background-color: #333; - display: inline-block; - border: 1px solid black; - clear: both; - margin:0px; - line-height: 0; - border-radius: 4px; - width: 15em; - height: 1.5em; -} - -#loadingBar .progress { - background-color: green; - display: inline-block; - float: left; - - background: #b4e391; - background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); - background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - - width: 0%; - height: 100%; -} - -#PDFBug { - font-size: 10px; - position: fixed; - top: 35px; - bottom: 5px; - right: 2px; - width: 300px; - background: white; - border: 1px solid #666; - padding: 0; -} -#PDFBug .controls { - border-bottom: 1px solid #666; - padding: 3px; - background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%); -} -#PDFBug .panels { - overflow: auto; - position: absolute; - top: 27px; - left: 0; - right: 0; - bottom: 0; -} -#PDFBug button.active { - font-weight: bold; -} -.debuggerShowText { - background: yellow; - color: blue; - opacity: 0.3; -} -.debuggerHideText:hover { - background: yellow; - opacity: 0.3; -} -#PDFBug .stats { - font-size: 10px; - white-space: pre; - font-family: courier; -} -#PDFBug .stats .title { - font-weight: bold; -} diff --git a/web/viewer.html b/web/viewer.html index d275f77c1..001b0b04f 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -1,44 +1,120 @@ - - - Simple pdf.js page viewer - + + PDF viewer + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
+
+
+
+
+
+
+
Auto
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Page 1
+
Page 2
+
Page 3
+
Page 4
+
Page 5
+
+
+ +
+
+
+ +
+ + +
+
-
+ +
+