@ -1,175 +1,558 @@
@@ -1,175 +1,558 @@
/ * - * - Mode : Java ; tab-width : 4 ; indent-tabs-mode : nil ; c-basic-offset : 4 - * - /
/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
* {
padding : 0 ;
margin : 0 ;
}
html {
height : 100 % ;
}
body {
background-color : # 929292 ;
font-family : 'Lucida Grande' , 'Lucida Sans Unicode' , Helvetica , Arial , Verdana , sans-serif ;
margin : 0px ;
padding : 0px ;
height : 100 % ;
background-color : # 404040 ;
background-image : url ( images / texture . png ) ;
font-family : Segoe UI , Verdana , sans-serif ;
}
. hidden {
display : none ;
}
[ hidden ] {
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 ;
/* outer/inner center provides horizontal center */
. outerCenter {
float : right ;
position : relative ;
right : 50 % ;
}
. innerCenter {
float : right ;
position : relative ;
right : -50 % ;
}
# outerContainer {
width : 100 % ;
height : 100 % ;
}
# sidebarContainer {
position : absolute ;
top : 0 ;
bottom : 0 ;
left : -200px ;
width : 200px ;
-moz-transition-property : left ;
-moz-transition-duration : 200ms ;
-moz-transition-timing-function : ease ;
-webkit-transition-property : left ;
-webkit-transition-duration : 200ms ;
-webkit-transition-timing-function : ease ;
}
# outerContainer . sidebarOpen > # sidebarContainer {
left : 0px ;
top : 0px ;
height : 24px ;
}
# mainContainer {
position : absolute ;
top : 0 ;
right : 0 ;
bottom : 0 ;
left : 0 ;
-moz-transition-property : left ;
-moz-transition-duration : 200ms ;
-moz-transition-timing-function : ease ;
-webkit-transition-property : left ;
-webkit-transition-duration : 200ms ;
-webkit-transition-timing-function : ease ;
}
# outerContainer . sidebarOpen > # mainContainer {
left : 200px ;
}
# sidebarContent {
top : 32px ;
left : 0 ;
bottom : 0 ;
overflow : auto ;
position : absolute ;
width : 200px ;
background-color : hsla ( 0 , 0 % , 0 % , . 1 ) ;
box-shadow : inset -1px 0 0 hsla ( 0 , 0 % , 0 % , . 25 ) ;
}
# 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 ;
}
. toolbar {
position : absolute ;
left : 0 ;
right : 0 ;
height : 32px ;
z-index : 9999 ;
cursor : default ;
}
# toolbarContainer {
width : 100 % ;
z-index : 1 ;
white-space : nowrap ;
}
# 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 ;
margin-left : -1px ;
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 ) ;
}
# toolbarViewerLeft {
position : absolute ;
top : 0 ;
left : 0 ;
}
# toolbarViewerRight {
position : absolute ;
top : 0 ;
right : 0 ;
}
# toolbarViewerLeft > * ,
# toolbarViewerMiddle > * ,
# toolbarViewerRight > * {
float : left ;
}
. splitToolbarButton {
margin : 3px 2px 4px 0 ;
display : inline-block ;
}
. splitToolbarButton > . toolbarButton {
border-radius : 0 ;
float : left ;
}
. toolbarButton {
border : 0 none ;
background-color : rgba ( 0 , 0 , 0 , 0 ) ;
width : 32px ;
height : 25px ;
}
. toolbarButton [ disabled ] {
opacity : . 5 ;
}
. 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-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 ,
. 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 {
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 ;
float : left ;
}
. 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 ;
margin : 3px 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 ;
-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 ;
}
. 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-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 95 % ;
}
. 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 ;
}
. splitToolbarButton : first-child ,
. toolbarButton : first-child {
margin-left : 4px ;
}
. splitToolbarButton : last-child ,
. toolbarButton : last-child {
margin-right : 4px ;
}
. toolbarButtonSpacer {
width : 30px ;
display : inline-block ;
height : 1px ;
}
. toolbarButtonFlexibleSpacer {
-moz-box-flex : 1 ;
-webkit-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 ) ;
}
. separator {
display : inline ;
border-left : 1px solid # d3d3d3 ;
border-right : 1px solid # fff ;
height : 16px ;
width : 0px ;
margin : 4px ;
. 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 ) ;
}
# controls > a > img {
margin : 4px ;
height : 16px ;
. toolbarButton . download :: before {
display : inline-block ;
content : url ( images / toolbarButton-download . png ) ;
}
# controls > button {
line-height : 16px ;
. toolbarButton . bookmark {
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
margin-top : 3px ;
padding-top : 4px ;
}
# controls > button > img {
width : 16px ;
height : 16px ;
. toolbarButton . bookmark :: before {
content : url ( images / toolbarButton-bookmark . png ) ;
}
# controls > button [ disabled ] > img {
opacity : 0 . 5 ;
# viewThumbnail . toolbarButton :: before {
display : inline-block ;
content : url ( images / toolbarButton-viewThumbnail . png ) ;
}
# pageNumber {
# viewOutline . toolbarButton :: 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-transition-property : background-color , border-color , box-shadow ;
-moz-transition-duration : 150ms ;
-moz-transition-timing-function : ease ;
}
# fileInput {
line-height : 16px ;
. toolbarField . pageNumber {
width : 40 px;
}
/* === 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 ;
. toolbarField . pageNumber :: -webkit-inner-spin-button ,
. toolbarField . pageNumber :: -webkit-outer-spin-button {
-webkit-appearance : none ;
margin : 0 ;
}
# 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 ;
. 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 ) ;
}
# pinIcon : hover {
background-color : rgba ( 255 , 255 , 255 , 0 . 35 ) ;
. 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 ) ;
}
# sidebar . pinned # pinIcon {
background-image : url ( 'images/pin-down.svg' ) ;
background-size : 15px 15px ;
. 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 ;
}
# 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 ;
overflow : hidden ;
overflow-y : auto ;
top : 20px ;
bottom : 10px ;
left : 10px ;
width : 280px ;
# thumbnailView {
position : fixed ;
width : 120px ;
top : 33px ;
bottom : 0 ;
padding : 10px 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 ;
margin-bottom : 15px ;
float : left ;
width : 114px ;
height : 142px ;
}
. thumbnail : not ( [ data-loaded ] ) {
background-color : gray ;
border : 1px dashed rgba ( 255 , 255 , 255 , 0 . 5 ) ;
}
. thumbnail > canvas {
vertical-align : middle ;
display : inline-block ;
. 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 ;
}
# outlineScrollView {
position : absolute ;
background-color : # fff ;
overflow : auto ;
top : 20px ;
bottom : 10px ;
left : 10px ;
width : 280px ;
. thumbnailSelectionRing {
border-radius : 2px ;
padding : 7px ;
-moz-transition-duration : 150ms ;
}
. thumbnail : hover > . thumbnailSelectionRing > . 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 > . 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 {
padding-top : 4px ;
padding-bottom : 100px ;
padding-left : 6px ;
padding-right : 6px ;
font-size : smaller ;
position : fixed ;
width : 192px ;
top : 33px ;
bottom : 0 ;
padding : 4px 4px 0 ;
overflow : auto ;
-moz-user-select : none ;
-webkit-user-select : none ;
}
. outlineItem > . outlineItems {
@ -178,44 +561,47 @@ body {
@@ -178,44 +561,47 @@ body {
. outlineItem > a {
text-decoration : none ;
color : black ;
display : block ;
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 ;
white-space : nowrap ;
}
. outlineItem > a : hover {
background : # ff0 ;
box-shadow : 0px 2px 10px # ff0 ;
}
# sidebarControls {
position : absolute ;
width : 120px ;
height : 32px ;
left : 15px ;
bottom : 35px ;
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 ) ;
}
# sidebarControls > button {
box-shadow : 0px 4px 10px # 000 ;
-moz-box-shadow : 0px 4px 10px # 000 ;
-webkit-box-shadow : 0px 4px 10px # 000 ;
. 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 ;
@ -256,6 +642,50 @@ canvas {
@@ -256,6 +642,50 @@ canvas {
background : url ( 'images/loading-icon.gif' ) center no-repeat ;
}
# loadingBox {
margin : 100px 0 ;
text-align : center ;
color : # ddd ;
font-size : 14px ;
}
# loadingBar {
background-color : # 333 ;
display : inline-block ;
border : 1px solid black ;
clear : both ;
margin : 0px ;
margin-top : 5px ;
line-height : 0 ;
border-radius : 4px ;
width : 200px ;
height : 25px ;
}
# loadingBar . progress {
display : inline-block ;
float : left ;
background : # 666 ;
background : -moz-linear-gradient ( top , # 999 0 % , # 666 50 % , # 999 100 % ) ;
background : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0 % , # 999 ) , color-stop ( 50 % , # 666 ) , color-stop ( 100 % , # 999 ) ) ;
background : -webkit-linear-gradient ( top , # 999 0 % , # 666 50 % , # 999 100 % ) ;
background : -o-linear-gradient ( top , # 999 0 % , # 666 50 % , # 999 100 % ) ;
background : -ms-linear-gradient ( top , # 999 0 % , # 666 50 % , # 999 100 % ) ;
background : linear-gradient ( top , # 999 0 % , # 666 50 % , # 999 100 % ) ;
border-top-left-radius : 3px ;
border-bottom-left-radius : 3px ;
width : 0 % ;
height : 100 % ;
}
# loadingBar . progress . full {
border-top-right-radius : 3px ;
border-bottom-right-radius : 3px ;
}
. textLayer {
position : absolute ;
left : 0 ;
@ -272,6 +702,12 @@ canvas {
@@ -272,6 +702,12 @@ canvas {
line-height : 1 . 3 ;
}
/ * 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 ) ; }
. annotComment > div {
position : absolute ;
}
@ -301,39 +737,13 @@ canvas {
@@ -301,39 +737,13 @@ canvas {
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 ;
position : absolute ;
right : 0 ;
top : 30 px ;
top : 32px ;
z-index : 1000 ;
padding : 3px ;
font-size : 0 . 8em ;
@ -359,116 +769,56 @@ canvas {
@@ -359,116 +769,56 @@ canvas {
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 % ;
. fileInput {
background : white ;
color : black ;
margin-top : 5px ;
}
# PDFBug {
font-size : 10px ;
background : none repeat scroll 0 0 white ;
border : 1px solid # 666666 ;
position : fixed ;
top : 35px ;
bottom : 5px ;
right : 2px ;
width : 300px ;
background : white ;
border : 1px solid # 666 ;
top : 32px ;
right : 0 ;
bottom : 0 ;
font-size : 10px ;
padding : 0 ;
width : 300px ;
}
# PDFBug . controls {
border-bottom : 1px solid # 666 ;
background : # EEEEEE ;
border-bottom : 1px solid # 666666 ;
padding : 3px ;
background : -moz-linear-gradient ( center bottom , # eee 0 % , # fff 100 % ) ;
}
# PDFBug . panels {
bottom : 0 ;
left : 0 ;
overflow : auto ;
position : absolute ;
top : 27px ;
left : 0 ;
right : 0 ;
bottom : 0 ;
top : 27px ;
}
# PDFBug button . active {
font-weight : bold ;
}
. debuggerShowText {
background : yellow ;
background : none repeat scroll 0 0 yellow ;
color : blue ;
opacity : 0 . 3 ;
}
. debuggerHideText : hover {
background : yellow ;
background : none repeat scroll 0 0 yellow ;
opacity : 0 . 3 ;
}
# PDFBug . stats {
font-family : courier ;
font-size : 10px ;
white-space : pre ;
font-family : courier ;
}
# PDFBug . stats . title {
font-weight : bold ;
}
# PDFBug table {
font-size : 10px ;
}
Yury Delendik
13 years ago
