366 lines
6.9 KiB
CSS
366 lines
6.9 KiB
CSS
/**
|
|
* @file
|
|
* @brief boxplus: a lightweight pop-up window engine shipped with sigplus
|
|
* @author Levente Hunyadi
|
|
* @version 0.9.2
|
|
* @remarks Copyright (C) 2009-2010 Levente Hunyadi
|
|
* @remarks Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
|
|
* @see http://hunyadi.info.hu/projects/boxplus
|
|
*/
|
|
|
|
#boxplus .boxplus-background {
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
background-color:black; /* fallback for browsers that do not support rgba */
|
|
background-color:rgba(0,0,0,0.6);
|
|
cursor:default;
|
|
z-index:9999;
|
|
}
|
|
|
|
#boxplus .boxplus-dialog {
|
|
position:absolute;
|
|
min-width:100px;
|
|
min-height:100px;
|
|
left:0;
|
|
top:0;
|
|
margin:0;
|
|
border:0 solid gray;
|
|
padding:10px;
|
|
color:black;
|
|
z-index:10000;
|
|
background:transparent none no-repeat scroll center center;
|
|
}
|
|
|
|
#boxplus .boxplus-dialog div {
|
|
margin:0;
|
|
border:0 none transparent;
|
|
padding:0;
|
|
}
|
|
|
|
#boxplus .boxplus-dialog > .boxplus-title {
|
|
display:none;
|
|
position:absolute;
|
|
top:0;
|
|
}
|
|
|
|
/* Progress indicator */
|
|
#boxplus .boxplus-dialog .boxplus-progress {
|
|
position:absolute;
|
|
left:0;
|
|
right:0;
|
|
top:0;
|
|
bottom:0;
|
|
height:32px;
|
|
width:32px;
|
|
margin:auto;
|
|
background:transparent url(loading.png) no-repeat scroll 0 0;
|
|
}
|
|
|
|
/* Panels */
|
|
#boxplus .boxplus-main {
|
|
height:100%;
|
|
}
|
|
|
|
#boxplus .boxplus-sideways {
|
|
float:right;
|
|
width:250px;
|
|
overflow:auto;
|
|
}
|
|
|
|
#boxplus .boxplus-sideways > div {
|
|
margin:10px;
|
|
}
|
|
|
|
/* Image viewer */
|
|
#boxplus .boxplus-viewer {
|
|
direction:ltr;
|
|
position:relative;
|
|
width:600px;
|
|
height:400px;
|
|
overflow:hidden;
|
|
text-align:left; /* overridden for body by many templates */
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-content {
|
|
position:absolute;
|
|
height:100%;
|
|
width:100%;
|
|
overflow:auto;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > img {
|
|
display:block;
|
|
position:absolute;
|
|
margin:0;
|
|
border:0 none transparent;
|
|
padding:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > video,
|
|
#boxplus .boxplus-viewer > iframe {
|
|
position:absolute;
|
|
height:100%;
|
|
width:100%;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-object {
|
|
position:absolute;
|
|
width:100%;
|
|
}
|
|
|
|
/* Navigation controls in viewer */
|
|
#boxplus .boxplus-viewer > .boxplus-prev {
|
|
position:absolute;
|
|
width:57px;
|
|
left:0;
|
|
height:100%;
|
|
background:transparent none no-repeat scroll left center;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-prev:hover {
|
|
background:transparent url(navigation.png) no-repeat scroll -57px center;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-next {
|
|
position:absolute;
|
|
width:57px;
|
|
right:0;
|
|
height:100%;
|
|
background:transparent none no-repeat scroll left center;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-next:hover {
|
|
background:transparent url(navigation.png) no-repeat scroll 0 center;
|
|
}
|
|
|
|
/* Image resizer */
|
|
#boxplus .boxplus-viewer > .boxplus-resizer > * {
|
|
position:absolute;
|
|
top:6px;
|
|
right:6px;
|
|
width:20px;
|
|
height:20px;
|
|
background:transparent url(resize.png) no-repeat scroll 0 0;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-shrink {
|
|
background-position:0 0;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-shrink:hover {
|
|
background-position:0 -20px;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-enlarge {
|
|
background-position:-20px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-enlarge:hover {
|
|
background-position:-20px -20px;
|
|
}
|
|
|
|
/* Thumbnail navigation */
|
|
#boxplus .boxplus-thumbs {
|
|
display:block;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-thumbs {
|
|
position:absolute;
|
|
width:100%;
|
|
bottom:0;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-thumbs.boxplus-disabled {
|
|
display:block !important;
|
|
visibility:hidden !important;
|
|
}
|
|
|
|
#boxplus .boxplus-bottom > .boxplus-thumbs, #boxplus .boxplus-sideways > .boxplus-thumbs {
|
|
position:relative;
|
|
height:80px;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs {
|
|
height:80px;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > .boxplus-rewind {
|
|
position:absolute;
|
|
width:22px;
|
|
left:0;
|
|
height:100%;
|
|
background:transparent url(buttons.png) no-repeat scroll -22px center;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > .boxplus-forward {
|
|
position:absolute;
|
|
width:22px;
|
|
right:0;
|
|
height:100%;
|
|
background:transparent url(buttons.png) no-repeat scroll 0 center;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > ul {
|
|
display:table-row;
|
|
position:absolute;
|
|
bottom:0;
|
|
margin:0;
|
|
border:0 none transparent;
|
|
padding:4px 0;
|
|
list-style-type:none;
|
|
list-style-image:none;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-thumbs > ul {
|
|
visibility:hidden;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-thumbs:hover > ul {
|
|
visibility:visible;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > ul > li {
|
|
margin:0;
|
|
border:0 none transparent;
|
|
padding:0;
|
|
display:table-cell;
|
|
background:transparent none no-repeat scroll 0 0 !important;
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > ul > li > img {
|
|
margin:4px;
|
|
border:1px solid gray;
|
|
padding:1px;
|
|
max-width:60px;
|
|
max-height:60px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
#boxplus .boxplus-thumbs > ul > li.boxplus-active > img,
|
|
#boxplus .boxplus-thumbs > ul > li > img:hover {
|
|
border:1px solid red !important;
|
|
}
|
|
|
|
/* Image caption */
|
|
#boxplus .boxplus-bottom > .boxplus-caption {
|
|
position:relative;
|
|
margin:5px 0 0 0;
|
|
max-height:60px;
|
|
overflow:auto;
|
|
}
|
|
|
|
#boxplus .boxplus-title {
|
|
font-weight:bold;
|
|
}
|
|
|
|
/* Navigation controls under caption */
|
|
#boxplus .boxplus-dialog .boxplus-controls {
|
|
position:relative;
|
|
margin:3px 0 0 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > div {
|
|
display:inline-block;
|
|
height:22px;
|
|
width:22px;
|
|
margin:2px;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-hidden {
|
|
display:none;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-prev {
|
|
background:transparent url(buttons.png) no-repeat scroll -22px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-next {
|
|
background:transparent url(buttons.png) no-repeat scroll 0 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-close {
|
|
background:transparent url(buttons.png) no-repeat scroll -88px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-start {
|
|
background:transparent url(buttons.png) no-repeat scroll -110px 0;
|
|
}
|
|
|
|
|
|
|
|
#boxplus .boxplus-controls > .boxplus-stop {
|
|
background:transparent url(buttons.png) no-repeat scroll -132px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-download {
|
|
background:transparent url(buttons.png) no-repeat scroll -154px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-controls > .boxplus-metadata {
|
|
background:transparent url(buttons.png) no-repeat scroll -176px 0;
|
|
}
|
|
|
|
#boxplus .boxplus-viewer > .boxplus-prev,
|
|
#boxplus .boxplus-viewer > .boxplus-next,
|
|
#boxplus .boxplus-thumbs,
|
|
#boxplus .boxplus-thumbs > ul {
|
|
background-image:url(transparent.gif);
|
|
}
|
|
|
|
#boxplus div.boxplus-left {
|
|
text-align:left;
|
|
}
|
|
|
|
#boxplus div.boxplus-center {
|
|
text-align:center;
|
|
}
|
|
|
|
#boxplus div.boxplus-right {
|
|
text-align:right;
|
|
}
|
|
|
|
#boxplus .boxplus-hidden {
|
|
visibility:hidden;
|
|
}
|
|
|
|
#boxplus .boxplus-unavailable {
|
|
display:none !important;
|
|
}
|
|
|
|
#boxplus .boxplus-disabled {
|
|
display:none !important;
|
|
}
|
|
|
|
#boxplus > span {
|
|
display:none;
|
|
}
|
|
|
|
|
|
/* Phoca Edit */
|
|
#boxplus .boxplus-dialog .boxplus-controlsclose {
|
|
position:absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
margin:3px 0 0 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#boxplus .boxplus-controlsclose > div {
|
|
display:inline-block;
|
|
height:22px;
|
|
width:22px;
|
|
margin:2px;
|
|
}
|
|
|
|
#boxplus .boxplus-controlsclose > .boxplus-close {
|
|
background:transparent url(buttons.png) no-repeat scroll -88px 0;
|
|
} |