150 lines
4.0 KiB
CSS
150 lines
4.0 KiB
CSS
/**
|
|
* WP jQuery Lightbox
|
|
* Version 1.4.6.1 - 2015-03-21
|
|
* http://wordpress.org/extend/plugins/wp-jquery-lightbox/
|
|
*
|
|
* WP jQuery Lightbox uses the minified version of this stylesheet (lightbox.min.css).
|
|
* This file is provided only for you to base your modification on. Edits will not be reflected on the site!
|
|
*
|
|
* To minify your stylesheet after modifying it, use http://refresh-sf.com/ and save the compressed code to
|
|
* lightbox.min.css or lightbox.min.{locale}.css (for translations)
|
|
*
|
|
* If you activate the "Use custom stylesheet"-setting, WP jQuery Lightbox will try and grab its CSS files
|
|
* from your theme's style-folder. Ergo: move your lightbox.min.css to the theme style folder to avoid having
|
|
* your changes reverted whenever the plugin updates.
|
|
*/
|
|
.clearfix:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
* html>body .clearfix {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
* html .clearfix {
|
|
/* Hides from IE-mac \*/
|
|
height: 1%;
|
|
/* End hide from IE-mac */
|
|
}
|
|
#lightboxIframe {
|
|
display: none;
|
|
}
|
|
#overlay{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10090;
|
|
width: 100%;
|
|
height: 500px;
|
|
background-color: #000;
|
|
filter:alpha(opacity=60);
|
|
-moz-opacity: 0.6;
|
|
opacity: 0.6;
|
|
display: none;
|
|
}
|
|
#lightbox{
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 10100;/*twentyeleven keeps the header at 999...*/
|
|
line-height: 0;
|
|
}
|
|
#jqlb_spinner{
|
|
height:32px;
|
|
background-image:url('./images/loading.gif');
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
}
|
|
#jqlb_closelabel{
|
|
height:22px;
|
|
width:66px;
|
|
background-image:url('./images/closelabel.gif');
|
|
background-repeat:no-repeat;
|
|
background-position:center center;
|
|
}
|
|
#lightbox a img{ border: none; }
|
|
#outerImageContainer{
|
|
position: relative;
|
|
background-color: #fff;
|
|
width: 300px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
#imageContainer{
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
#lightboxImage {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#jqlb_loading{
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 0%;
|
|
height: 25%;
|
|
width: 100%;
|
|
line-height: 0;
|
|
}
|
|
#hoverNav{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
#imageContainer>#hoverNav{ left: 0; }
|
|
#hoverNav a{ outline: none; }
|
|
|
|
/*** START : next / previous image links ***/
|
|
#prevLink, #nextLink{
|
|
width: 45%;
|
|
height: 100%;
|
|
background: transparent url('./images/blank.gif') no-repeat; /* Trick IE into showing hover */
|
|
display: block;
|
|
}
|
|
#prevLink { left: 0; float: left;}
|
|
#nextLink { right: 0; float: right;}
|
|
#prevLink:hover, #prevLink:visited:hover { background: url('./images/prev.gif') left 50% no-repeat; }
|
|
#nextLink:hover, #nextLink:visited:hover { background: url('./images/next.gif') right 50% no-repeat; }
|
|
/*** END : next / previous image links ***/
|
|
|
|
/** Text styling goes below.
|
|
I've written out the entire selector hierarchy so you can decide how specific you want your selectors to be.**/
|
|
#imageDataContainer{
|
|
font: 10px Verdana, Helvetica, sans-serif;
|
|
background-color: #fff;
|
|
color: #000;
|
|
margin: 0 auto;
|
|
line-height: 1.4em;
|
|
}
|
|
#imageData{
|
|
padding:0 10px;
|
|
}
|
|
.ontop #imageData {
|
|
padding-top: 5px; /* add padding when title and caption are on top */
|
|
}
|
|
#imageData #imageDetails{
|
|
float: left;
|
|
text-align: left;
|
|
margin-bottom: 10px;
|
|
width: 80%; /* make room for the CLOSE-button. */
|
|
width: -moz-calc(100% - 80px); /* Firefox */
|
|
width: -webkit-calc(100% - 80px);/* WebKit */
|
|
width: -o-calc(100% - 80px); /* Opera */
|
|
width: calc(100% - 80px); /* Standard */
|
|
}
|
|
#imageData #imageDetails #titleAndCaption{ } /*previously: #caption*/
|
|
#imageData #imageDetails #titleAndCaption #titleText { font-weight: bold; }
|
|
#imageData #imageDetails #titleAndCaption #captionText { font-weight: normal; }
|
|
#imageData #imageDetails #controls{ margin:0px; white-space: nowrap;}
|
|
#imageData #imageDetails #controls #playPause{}
|
|
#imageData #imageDetails #controls #numberDisplay{}
|
|
#imageData #imageDetails #controls #downloadLink{}
|
|
#imageData #bottomNav #bottomNavClose{ height:22px; width: 66px; float: right; margin-bottom: 10px; }
|
|
|