You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
4.5 KiB
230 lines
4.5 KiB
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- / |
|
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ |
|
|
|
body { |
|
background-color: #929292; |
|
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; |
|
margin: 0px; |
|
padding: 0px; |
|
} |
|
|
|
canvas { |
|
box-shadow: 0px 4px 10px #000; |
|
-moz-box-shadow: 0px 4px 10px #000; |
|
-webkit-box-shadow: 0px 4px 10px #000; |
|
} |
|
|
|
span { |
|
font-size: 0.8em; |
|
} |
|
|
|
.control { |
|
display: inline-block; |
|
float: left; |
|
margin: 0px 20px 0px 0px; |
|
padding: 0px 4px 0px 0px; |
|
} |
|
|
|
.control > input { |
|
float: left; |
|
border: 1px solid #4d4d4d; |
|
height: 20px; |
|
padding: 0px; |
|
margin: 0px 2px 0px 0px; |
|
border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
-webkit-border-radius: 4px; |
|
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
} |
|
|
|
.control > select { |
|
float: left; |
|
border: 1px solid #4d4d4d; |
|
height: 22px; |
|
padding: 2px 0px 0px; |
|
margin: 0px 0px 1px; |
|
border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
-webkit-border-radius: 4px; |
|
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); |
|
} |
|
|
|
.control > span { |
|
cursor: default; |
|
float: left; |
|
height: 18px; |
|
margin: 5px 2px 0px; |
|
padding: 0px; |
|
user-select: none; |
|
-moz-user-select: none; |
|
-webkit-user-select: none; |
|
} |
|
|
|
.control .label { |
|
clear: both; |
|
float: left; |
|
font-size: 0.65em; |
|
margin: 2px 0px 0px; |
|
position: relative; |
|
text-align: center; |
|
width: 100%; |
|
} |
|
|
|
.thumbnailPageNumber { |
|
color: #fff; |
|
font-size: 0.55em; |
|
text-align: right; |
|
margin: -6px 2px 6px 0px; |
|
width: 102px; |
|
} |
|
|
|
.thumbnail { |
|
width: 104px; |
|
height: 134px; |
|
margin: 0px auto 10px; |
|
} |
|
|
|
.page { |
|
width: 816px; |
|
height: 1056px; |
|
margin: 10px auto; |
|
} |
|
|
|
#controls { |
|
background-color: #eee; |
|
border-bottom: 1px solid #666; |
|
padding: 4px 0px 0px 8px; |
|
position: fixed; |
|
left: 0px; |
|
top: 0px; |
|
height: 40px; |
|
width: 100%; |
|
box-shadow: 0px 2px 8px #000; |
|
-moz-box-shadow: 0px 2px 8px #000; |
|
-webkit-box-shadow: 0px 2px 8px #000; |
|
} |
|
|
|
#controls input { |
|
user-select: text; |
|
-moz-user-select: text; |
|
-webkit-user-select: text; |
|
} |
|
|
|
#previousPageButton { |
|
background: url('images/buttons.png') no-repeat 0px -23px; |
|
cursor: default; |
|
display: inline-block; |
|
float: left; |
|
margin: 0px; |
|
width: 28px; |
|
height: 23px; |
|
} |
|
|
|
#previousPageButton.down { |
|
background: url('images/buttons.png') no-repeat 0px -46px; |
|
} |
|
|
|
#previousPageButton.disabled { |
|
background: url('images/buttons.png') no-repeat 0px 0px; |
|
} |
|
|
|
#nextPageButton { |
|
background: url('images/buttons.png') no-repeat -28px -23px; |
|
cursor: default; |
|
display: inline-block; |
|
float: left; |
|
margin: 0px; |
|
width: 28px; |
|
height: 23px; |
|
} |
|
|
|
#nextPageButton.down { |
|
background: url('images/buttons.png') no-repeat -28px -46px; |
|
} |
|
|
|
#nextPageButton.disabled { |
|
background: url('images/buttons.png') no-repeat -28px 0px; |
|
} |
|
|
|
#openFileButton { |
|
background: url('images/buttons.png') no-repeat -56px -23px; |
|
cursor: default; |
|
display: inline-block; |
|
float: left; |
|
margin: 0px 0px 0px 3px; |
|
width: 29px; |
|
height: 23px; |
|
} |
|
|
|
#openFileButton.down { |
|
background: url('images/buttons.png') no-repeat -56px -46px; |
|
} |
|
|
|
#openFileButton.disabled { |
|
background: url('images/buttons.png') no-repeat -56px 0px; |
|
} |
|
|
|
#fileInput { |
|
display: none; |
|
} |
|
|
|
#pageNumber { |
|
text-align: right; |
|
} |
|
|
|
#sidebar { |
|
position: fixed; |
|
width: 200px; |
|
top: 62px; |
|
bottom: 18px; |
|
left: -140px; |
|
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; |
|
} |
|
|
|
#sidebar:hover { |
|
left: 0px; |
|
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; |
|
} |
|
|
|
#sidebarBox { |
|
background-color: rgba(0, 0, 0, 0.7); |
|
width: 150px; |
|
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; |
|
overflow: hidden; |
|
overflow-y: auto; |
|
top: 10px; |
|
bottom: 10px; |
|
left: 10px; |
|
width: 130px; |
|
} |
|
|
|
#sidebarContentView { |
|
height: auto; |
|
width: 100px; |
|
} |
|
|
|
#viewer { |
|
margin: 44px 0px 0px; |
|
padding: 8px 0px; |
|
}
|
|
|