Skip to content

Instantly share code, notes, and snippets.

@ghooghe
Created June 11, 2013 15:26
Show Gist options
  • Select an option

  • Save ghooghe/5757808 to your computer and use it in GitHub Desktop.

Select an option

Save ghooghe/5757808 to your computer and use it in GitHub Desktop.
Epaper styles
.fullscreen {
background-color: #e3e3e3;
position: absolute;
width: 100%;
height: 100%;
top: 0 ;
left: 0;
z-index: 10;
overflow-x: hidden;
}
.epaper {
background-color: #ffffff;
font-weight: normal;
width: 58em;
margin: 0 auto;
height: 100%;
position: relative;
}
.epaper.fullwidth {
height: 82em;
position: absolute;
}
.fullscreen .epaper img {
z-index: auto;
}
.up, .down, .fullscreen .next, .fullscreen .previous, .close, .print, .openas, .zoom {
background: transparent url("../img/epaper-icons.png") no-repeat left top;
width: 34px;
height: 34px;
display: block;
text-indent: -9999px;
}
.up, .down, .fullscreen .next, .fullscreen .previous, .tools {
position: fixed;
z-index: 3;
}
.close, .print, .openas, .zoom {
margin: 8px auto;
}
.tools {
height: 100%;
width: 60px;
top: 0;
padding-top: 8px;
box-shadow: 0 0 3px #444444;
background-color: #141414;
}
.up, .down {
left: 50%;
}
.up {
background-position: -120px 0;
top: 25px;
}
.up:hover {
background-position: -120px -40px;
}
.up:active {
background-position: -120px -80px;
}
.down {
background-position: -40px 0;
bottom: 25px;
}
.down:hover {
background-position: -40px -40px;
}
.down:active {
background-position: -40px -80px;
}
.fullscreen .previous, .fullscreen .next {
top: 40%;
}
.fullscreen .next, .fullscreen .previous {
left: 12px;
}
.fullscreen .next {
background-position: -80px 0;
top: 50%;
}
.fullscreen .next:hover {
background-position: -80px -40px;
}
.fullscreen .next:active {
background-position: -80px -80px;
}
.fullscreen .previous:hover {
background-position: 0px -40px;
}
.fullscreen .previous:active {
background-position: 0px -80px;
}
.close {
background-position: -320px 0;
}
.close:hover {
background-position: -320px -40px;
}
.close:active {
background-position: -320px -80px;
}
.openas {
background-position: -360px 0;
}
.openas:hover {
background-position: -360px -40px;
}
.openas:active {
background-position: -360px -80px;
}
.zoom {
background-position: -240px 0;
}
.zoom:hover {
background-position: -240px -40px;
}
.zoom:active, .zoom.active {
background-position: -240px -80px;
}
.print {
background-position: -160px 0;
}
.print:hover {
background-position: -160px -40px;
}
.print:active {
background-position: -160px -80px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment