| 1 |
<html> |
|---|
| 2 |
<head> |
|---|
| 3 |
<style> |
|---|
| 4 |
body |
|---|
| 5 |
{ |
|---|
| 6 |
padding: 50px; |
|---|
| 7 |
background-color: #680519 #680519 #9d0627 #9d0627; |
|---|
| 8 |
} |
|---|
| 9 |
|
|---|
| 10 |
.pbutton {width: 16px; height: 16px; margin-right: 2px; cursor: pointer;} |
|---|
| 11 |
.pbutton:hover:not(:disabled) {background-image-transformation: contrast-brightness-gamma(0.6,0.5,1);} |
|---|
| 12 |
.pbutton:disabled {background-image-transformation: contrast-brightness-gamma(0.3,0.3,1.0);} |
|---|
| 13 |
|
|---|
| 14 |
#content_pdf |
|---|
| 15 |
{ |
|---|
| 16 |
display: none; |
|---|
| 17 |
width: 1*; height: 1*; |
|---|
| 18 |
} |
|---|
| 19 |
|
|---|
| 20 |
.cursor_hand {cursor: pointer;} |
|---|
| 21 |
.cursor_drag {cursor: url(images/dragcursor.cur);} |
|---|
| 22 |
|
|---|
| 23 |
.sumatra |
|---|
| 24 |
{ |
|---|
| 25 |
width:*; |
|---|
| 26 |
height:*; |
|---|
| 27 |
background-color: #bbbbbb #bbbbbb #cccccc #cccccc; |
|---|
| 28 |
flow:grid; |
|---|
| 29 |
} |
|---|
| 30 |
|
|---|
| 31 |
.sumatra > div:first-child |
|---|
| 32 |
{ |
|---|
| 33 |
width:*; |
|---|
| 34 |
height:*; |
|---|
| 35 |
top:1#; |
|---|
| 36 |
left:1#; |
|---|
| 37 |
} |
|---|
| 38 |
|
|---|
| 39 |
.sumatra > widget[type="vscrollbar"] |
|---|
| 40 |
{ |
|---|
| 41 |
top:1#; |
|---|
| 42 |
left:2#; |
|---|
| 43 |
height:*; |
|---|
| 44 |
} |
|---|
| 45 |
|
|---|
| 46 |
.sumatra > widget[type="hscrollbar"] |
|---|
| 47 |
{ |
|---|
| 48 |
top:2#; |
|---|
| 49 |
left:1#; |
|---|
| 50 |
width:*; |
|---|
| 51 |
} |
|---|
| 52 |
|
|---|
| 53 |
#toolbar {position: absolute; background-color: transparent; border-bottom: 1px solid transparent; padding: 4px 0 4px 0; width: 100%;} |
|---|
| 54 |
#toolbar:hover {background-color: #888888 #888888 #999999 #999999; border-bottom: 1px solid #888888;} |
|---|
| 55 |
.tools, #toolbar2 {flow: horizontal; width: min-intrinsic;} |
|---|
| 56 |
.tools {margin: 0 0.5* 0 0.5*; visibility: hidden;} |
|---|
| 57 |
#toolbar:hover > .tools {visibility: visible;} |
|---|
| 58 |
.tools .pbutton {margin: 1px 5px 0 5px;} |
|---|
| 59 |
.tools .pbutton:hover:not(:disabled) {background-image-transformation: contrast-brightness-gamma(0.6,0.6,1);} |
|---|
| 60 |
.tools hr {width: 1px; height: 1*; border: 0; padding: 0; background-color: #cecece; margin: 0;} |
|---|
| 61 |
.btn_back {background-image: url(icons/arrow_left.png);} |
|---|
| 62 |
.btn_forward {background-image: url(icons/arrow_right.png);} |
|---|
| 63 |
.btn_zoom {background-image: url(icons/zoom.png);} |
|---|
| 64 |
.btn_zoomwidth {background-image: url(icons/page_white_width.png);} |
|---|
| 65 |
.btn_zoompage {background-image: url(icons/page_white_magnify.png);} |
|---|
| 66 |
.btn_zoomin {background-image: url(icons/magnifier_zoom_in.png);} |
|---|
| 67 |
.btn_zoomout {background-image: url(icons/magnifier_zoom_out.png);} |
|---|
| 68 |
.btn_go {background-image: url(icons/page_go.png);} |
|---|
| 69 |
#currentpage {margin-left: 5px; width: 50px;} |
|---|
| 70 |
</style> |
|---|
| 71 |
</head> |
|---|
| 72 |
<body> |
|---|
| 73 |
<button id="open">Open...</button> |
|---|
| 74 |
<div id="content_pdf"> |
|---|
| 75 |
<div id="toolbar"> |
|---|
| 76 |
<div class="tools"> |
|---|
| 77 |
<div class="pbutton btn_back" id="back"></div> |
|---|
| 78 |
<div class="pbutton btn_forward" id="forward"></div> |
|---|
| 79 |
<div id="toolbar2"> |
|---|
| 80 |
<hr /> |
|---|
| 81 |
<!--<div class="pbutton btn_zoompage" id="zoompage"></div>--> |
|---|
| 82 |
<div class="pbutton btn_zoompage" id="zoom"></div> |
|---|
| 83 |
<div class="pbutton btn_zoomwidth" id="zoomwidth"></div> |
|---|
| 84 |
<hr /> |
|---|
| 85 |
<div class="pbutton btn_zoomout" id="zoomout"></div> |
|---|
| 86 |
<div class="pbutton btn_zoomin" id="zoomin"></div> |
|---|
| 87 |
<hr /> |
|---|
| 88 |
<input type="text" id="currentpage" /> |
|---|
| 89 |
<div class="pbutton btn_go" id="go"></div> |
|---|
| 90 |
</div> |
|---|
| 91 |
</div> |
|---|
| 92 |
</div> |
|---|
| 93 |
</div> |
|---|
| 94 |
</body> |
|---|
| 95 |
</html> |
|---|
