Difference between revisions of "Team:Cambridge-JIC/Assets/Gallery.css"

Line 1: Line 1:
−
/* Preload images */
+
/* SLIMBOX */
−
body:after {
+
−
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
+
−
  display: none;
+
−
}
+
−
 
+
−
.lightboxOverlay {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  z-index: 9999;
+
−
  background-color: black;
+
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+
−
  opacity: 0.8;
+
−
  display: none;
+
−
}
+
−
 
+
−
.lightbox {
+
−
  position: absolute;
+
−
  left: 0;
+
−
  width: 100%;
+
−
  z-index: 10000;
+
−
  text-align: center;
+
−
  line-height: 0;
+
−
  font-weight: normal;
+
−
}
+
−
 
+
−
.lightbox .lb-image {
+
−
  display: block;
+
−
  height: auto;
+
−
  max-width: inherit;
+
−
  -webkit-border-radius: 3px;
+
−
  -moz-border-radius: 3px;
+
−
  -ms-border-radius: 3px;
+
−
  -o-border-radius: 3px;
+
−
  border-radius: 3px;
+
−
}
+
−
 
+
−
.lightbox a img {
+
−
  border: none;
+
−
}
+
−
 
+
−
.lb-outerContainer {
+
−
  position: relative;
+
−
  background-color: white;
+
−
  *zoom: 1;
+
−
  width: 250px;
+
−
  height: 250px;
+
−
  margin: 0 auto;
+
−
  -webkit-border-radius: 4px;
+
−
  -moz-border-radius: 4px;
+
−
  -ms-border-radius: 4px;
+
−
  -o-border-radius: 4px;
+
−
  border-radius: 4px;
+
−
}
+
−
 
+
−
.lb-outerContainer:after {
+
−
  content: "";
+
−
  display: table;
+
−
  clear: both;
+
−
}
+
−
 
+
−
.lb-container {
+
−
  padding: 4px;
+
−
}
+
−
 
+
−
.lb-loader {
+
−
  position: absolute;
+
−
  top: 43%;
+
−
  left: 0;
+
−
  height: 25%;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  line-height: 0;
+
−
}
+
−
 
+
−
.lb-cancel {
+
−
  display: block;
+
−
  width: 32px;
+
−
  height: 32px;
+
−
  margin: 0 auto;
+
−
  background: url(../images/loading.gif) no-repeat;
+
−
}
+
−
 
+
−
.lb-nav {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  height: 100%;
+
−
  width: 100%;
+
−
  z-index: 10;
+
−
}
+
−
 
+
−
.lb-container > .nav {
+
−
  left: 0;
+
−
}
+
−
 
+
−
.lb-nav a {
+
−
  outline: none;
+
−
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+
−
}
+
  
−
.lb-prev, .lb-next {
+
#lbOverlay {
−
  height: 100%;
+
position: fixed;
−
  cursor: pointer;
+
z-index: 9999;
−
  display: block;
+
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #000;
 +
cursor: pointer;
 
}
 
}
  
−
.lb-nav a.lb-prev {
+
#lbCenter, #lbBottomContainer {
−
  width: 34%;
+
position: absolute;
−
  left: 0;
+
z-index: 9999;
−
  float: left;
+
overflow: hidden;
−
  background: url(../images/prev.png) left 48% no-repeat;
+
background-color: #fff;
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+
−
  opacity: 0;
+
−
  -webkit-transition: opacity 0.6s;
+
−
  -moz-transition: opacity 0.6s;
+
−
  -o-transition: opacity 0.6s;
+
−
  transition: opacity 0.6s;
+
 
}
 
}
  
−
.lb-nav a.lb-prev:hover {
+
.lbLoading {
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+
background: #fff url(loading.gif) no-repeat center;
−
  opacity: 1;
+
 
}
 
}
  
−
.lb-nav a.lb-next {
+
#lbImage {
−
  width: 64%;
+
position: absolute;
−
  right: 0;
+
left: 0;
−
  float: right;
+
top: 0;
−
  background: url(../images/next.png) right 48% no-repeat;
+
border: 10px solid #fff;
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+
background-repeat: no-repeat;
−
  opacity: 0;
+
−
  -webkit-transition: opacity 0.6s;
+
−
  -moz-transition: opacity 0.6s;
+
−
  -o-transition: opacity 0.6s;
+
−
  transition: opacity 0.6s;
+
 
}
 
}
  
−
.lb-nav a.lb-next:hover {
+
#lbPrevLink, #lbNextLink {
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+
display: block;
−
  opacity: 1;
+
position: absolute;
 +
top: 0;
 +
width: 50%;
 +
outline: none;
 
}
 
}
  
−
.lb-dataContainer {
+
#lbPrevLink {
−
  margin: 0 auto;
+
left: 0;
−
  padding-top: 5px;
+
−
  *zoom: 1;
+
−
  width: 100%;
+
−
  -moz-border-radius-bottomleft: 4px;
+
−
  -webkit-border-bottom-left-radius: 4px;
+
−
  border-bottom-left-radius: 4px;
+
−
  -moz-border-radius-bottomright: 4px;
+
−
  -webkit-border-bottom-right-radius: 4px;
+
−
  border-bottom-right-radius: 4px;
+
 
}
 
}
  
−
.lb-dataContainer:after {
+
#lbPrevLink:hover {
−
  content: "";
+
background: transparent url(prevlabel.gif) no-repeat 0 15%;
−
  display: table;
+
−
  clear: both;
+
 
}
 
}
  
−
.lb-data {
+
#lbNextLink {
−
  padding: 0 4px;
+
right: 0;
−
  color: #ccc;
+
 
}
 
}
  
−
.lb-data .lb-details {
+
#lbNextLink:hover {
−
  width: 85%;
+
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
−
  float: left;
+
−
  text-align: left;
+
−
  line-height: 1.1em;
+
 
}
 
}
  
−
.lb-data .lb-caption {
+
#lbBottom {
−
  font-size: 13px;
+
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
−
  font-weight: bold;
+
font-size: 10px;
−
  line-height: 1em;
+
color: #666;
 +
line-height: 1.4em;
 +
text-align: left;
 +
border: 10px solid #fff;
 +
border-top-style: none;
 
}
 
}
  
−
.lb-data .lb-number {
+
#lbCloseLink {
−
  display: block;
+
display: block;
−
  clear: left;
+
float: right;
−
  padding-bottom: 1em;
+
width: 66px;
−
  font-size: 12px;
+
height: 22px;
−
  color: #999999;
+
background: transparent url(closelabel.gif) no-repeat center;
 +
margin: 5px 0;
 +
outline: none;
 
}
 
}
  
−
.lb-data .lb-close {
+
#lbCaption, #lbNumber {
−
  display: block;
+
margin-right: 71px;
−
  float: right;
+
−
  width: 30px;
+
−
  height: 30px;
+
−
  background: url(../images/close.png) top right no-repeat;
+
−
  text-align: right;
+
−
  outline: none;
+
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+
−
  opacity: 0.7;
+
−
  -webkit-transition: opacity 0.2s;
+
−
  -moz-transition: opacity 0.2s;
+
−
  -o-transition: opacity 0.2s;
+
−
  transition: opacity 0.2s;
+
 
}
 
}
  
−
.lb-data .lb-close:hover {
+
#lbCaption {
−
  cursor: pointer;
+
font-weight: bold;
−
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+
−
  opacity: 1;
+
 
}
 
}

Revision as of 14:18, 10 September 2015

/* SLIMBOX */

  1. lbOverlay {

position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; cursor: pointer; }

  1. lbCenter, #lbBottomContainer {

position: absolute; z-index: 9999; overflow: hidden; background-color: #fff; }

.lbLoading { background: #fff url(loading.gif) no-repeat center; }

  1. lbImage {

position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat; }

  1. lbPrevLink, #lbNextLink {

display: block; position: absolute; top: 0; width: 50%; outline: none; }

  1. lbPrevLink {

left: 0; }

  1. lbPrevLink:hover {

background: transparent url(prevlabel.gif) no-repeat 0 15%; }

  1. lbNextLink {

right: 0; }

  1. lbNextLink:hover {

background: transparent url(nextlabel.gif) no-repeat 100% 15%; }

  1. lbBottom {

font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; }

  1. lbCloseLink {

display: block; float: right; width: 66px; height: 22px; background: transparent url(closelabel.gif) no-repeat center; margin: 5px 0; outline: none; }

  1. lbCaption, #lbNumber {

margin-right: 71px; }

  1. lbCaption {

font-weight: bold; }