Difference between revisions of "Template:SMMU-China/CSS notebook lightbox"

 
Line 4: Line 4:
 
}
 
}
 
body:after{
 
body:after{
     content:url(https://static.igem.org/mediawiki/2019/a/a8/T--SMMU-China--Notebook_closebutton.png) url(https://static.igem.org/mediawiki/2019/e/e3/T--SMMU-China--Notebook_loadingicon.gif) url(https://static.igem.org/mediawiki/2019/4/43/T--SMMU-China--Notebook_prevbutton.gif) url(https://static.igem.org/mediawiki/2019/6/6f/T--SMMU-China--Notebook_nextbutton.png);display:inline-block}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;border-radius:3px}.lightbox a img{border:none}.lb-outerContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;border-radius:4px}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-container{padding:4px}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;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{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
+
     content:url(https://static.igem.org/mediawiki/2019/a/a8/T--SMMU-China--Notebook_closebutton.png)
 +
    url(https://static.igem.org/mediawiki/2019/e/e3/T--SMMU-China--Notebook_loadingicon.gif)
 +
    url(https://static.igem.org/mediawiki/2019/4/43/T--SMMU-China--Notebook_prevbutton.gif)
 +
    url(https://static.igem.org/mediawiki/2019/6/6f/T--SMMU-China--Notebook_nextbutton.png);
 +
    display:none
 +
}
 +
.lb-dataContainer:after, .lb-outerContainer:after{
 +
    content:"";
 +
    clear:both
 +
}
 +
body.lb-disable-scrolling {
 +
    overflow:hidden
 +
}
 +
.lightboxOverlay {
 +
    position:absolute;
 +
    top:0;
 +
    left:0;
 +
    z-index:9999;
 +
    background-color:#000;
 +
    filter:alpha(Opacity=80);
 +
    opacity:.8;
 +
    display:none
 +
}
 +
.lightbox{
 +
    position:absolute;
 +
    left:0;
 +
    width:100%;
 +
    z-index:10000;
 +
    font-weight:400
 +
}
 +
.lightbox .lb-image{
 +
    display:block;
 +
    height:auto;
 +
    max-width:inherit;
 +
    border-radius:3px
 +
}
 +
.lightbox a img{
 +
    border:none
 +
}
 +
.lb-outerContainer {
 +
    position:relative;
 +
    background-color:#fff;
 +
    width:250px;
 +
    height:250px;
 +
    margin:0 auto;
 +
    border-radius:4px
 +
}
 +
.lb-loader,.lb-nav{
 +
    position:absolute;
 +
    left:0
 +
}
 +
.lb-outerContainer:after{
 +
    display:table
 +
}
 +
.lb-container{
 +
    padding:4px
 +
}
 +
.lb-loader{
 +
    top:43%;
 +
    height:25%;
 +
    width:100%
 +
}
 +
.lb-cancel{
 +
    display:block;
 +
    width:32px;
 +
    height:32px;
 +
    margin:0 auto;
 +
    background:url(https://static.igem.org/mediawiki/2019/e/e3/T--SMMU-China--Notebook_loadingicon.gif) no-repeat
 +
}
 +
.lb-nav{
 +
    top:0;
 +
    height:100%;
 +
    width:100%;
 +
    z-index:10
 +
}
 +
.lb-container>.nav{
 +
    left:0
 +
}
 +
.lb-nav a{
 +
    outline:0;
 +
    background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
 +
}
 +
.lb-next,.lb-prev {
 +
    height: 100%;
 +
    cursor: pointer;
 +
    display: block
 +
}
 +
.lb-nav a.lb-prev{
 +
    width:34%;
 +
    left:0;
 +
    float:left;
 +
    background:url(https://static.igem.org/mediawiki/2019/4/43/T--SMMU-China--Notebook_prevbutton.gif) left 48% no-repeat;
 +
    filter:alpha(Opacity=0);
 +
    opacity:0;
 +
    -webkit-transition:opacity .6s;
 +
    -moz-transition:opacity .6s;
 +
    -o-transition:opacity .6s;
 +
    transition:opacity .6s
 +
}
 +
.lb-nav a.lb-prev:hover{
 +
    filter:alpha(Opacity=100);
 +
    opacity:1
 +
}
 +
.lb-nav a.lb-next{
 +
    width:64%;
 +
    right:0;
 +
    float:right;
 +
    background:url(https://static.igem.org/mediawiki/2019/6/6f/T--SMMU-China--Notebook_nextbutton.png) right 48% no-repeat;
 +
    filter:alpha(Opacity=0);
 +
    opacity:0;
 +
    -webkit-transition:opacity .6s;
 +
    -moz-transition:opacity .6s;
 +
    -o-transition:opacity .6s;
 +
    transition:opacity .6s
 +
}
 +
.lb-nav a.lb-next:hover{
 +
    filter:alpha(Opacity=100);
 +
    opacity:1
 +
}
 +
.lb-dataContainer{
 +
    margin:0 auto;
 +
    padding-top:5px;
 +
    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{
 +
    display:table
 +
}
 +
.lb-data{
 +
    padding:0 4px;
 +
    color:#ccc
 +
}
 +
.lb-data .lb-details{
 +
    width:85%;
 +
    float:left;
 +
    text-align:left;
 +
    line-height:1.1em
 +
}
 +
.lb-data .lb-caption{
 +
    font-size:13px;
 +
    font-weight:700;
 +
    line-height:1em
 +
}
 +
.lb-data .lb-number{
 +
    display:block;
 +
    clear:left;
 +
    padding-bottom:1em;
 +
    font-size:12px;
 +
    color:#999
 +
}
 +
.lb-data .lb-close{
 +
    display:block;
 +
    float:right;
 +
    width:30px;
 +
    height:30px;
 +
    background:url(https://static.igem.org/mediawiki/2019/a/a8/T--SMMU-China--Notebook_closebutton.png) top right no-repeat;
 +
    text-align:right;
 +
    outline:0;
 +
    filter:alpha(Opacity=70);
 +
    opacity:.7;
 +
    -webkit-transition:opacity .2s;
 +
    -moz-transition:opacity .2s;-o-transition:opacity .2s;
 +
    transition:opacity .2s
 +
}
 +
.lb-data .lb-close:hover{
 +
    cursor:pointer;
 +
    filter:alpha(Opacity=100);
 +
    opacity:1
 +
}

Latest revision as of 05:57, 20 October 2019

.lb-loader,.lightbox{

   text-align:center;
   line-height:0

} body:after{

   content:url(T--SMMU-China--Notebook_closebutton.png)
   url(T--SMMU-China--Notebook_loadingicon.gif)
   url(T--SMMU-China--Notebook_prevbutton.gif)
   url(T--SMMU-China--Notebook_nextbutton.png);
   display:none

} .lb-dataContainer:after, .lb-outerContainer:after{

   content:"";
   clear:both

} body.lb-disable-scrolling {

   overflow:hidden

} .lightboxOverlay {

   position:absolute;
   top:0;
   left:0;
   z-index:9999;
   background-color:#000;
   filter:alpha(Opacity=80);
   opacity:.8;
   display:none

} .lightbox{

   position:absolute;
   left:0;
   width:100%;
   z-index:10000;
   font-weight:400

} .lightbox .lb-image{

   display:block;
   height:auto;
   max-width:inherit;
   border-radius:3px

} .lightbox a img{

   border:none

} .lb-outerContainer {

   position:relative;
   background-color:#fff;
   width:250px;
   height:250px;
   margin:0 auto;
   border-radius:4px

} .lb-loader,.lb-nav{

   position:absolute;
   left:0

} .lb-outerContainer:after{

   display:table

} .lb-container{

   padding:4px

} .lb-loader{

   top:43%;
   height:25%;
   width:100%

} .lb-cancel{

   display:block;
   width:32px;
   height:32px;
   margin:0 auto;
   background:url(T--SMMU-China--Notebook_loadingicon.gif) no-repeat

} .lb-nav{

   top:0;
   height:100%;
   width:100%;
   z-index:10

} .lb-container>.nav{

   left:0

} .lb-nav a{

   outline:0;
   background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)

} .lb-next,.lb-prev {

   height: 100%;
   cursor: pointer;
   display: block

} .lb-nav a.lb-prev{

   width:34%;
   left:0;
   float:left;
   background:url(T--SMMU-China--Notebook_prevbutton.gif) left 48% no-repeat;
   filter:alpha(Opacity=0);
   opacity:0;
   -webkit-transition:opacity .6s;
   -moz-transition:opacity .6s;
   -o-transition:opacity .6s;
   transition:opacity .6s

} .lb-nav a.lb-prev:hover{

   filter:alpha(Opacity=100);
   opacity:1

} .lb-nav a.lb-next{

   width:64%;
   right:0;
   float:right;
   background:url(T--SMMU-China--Notebook_nextbutton.png) right 48% no-repeat;
   filter:alpha(Opacity=0);
   opacity:0;
   -webkit-transition:opacity .6s;
   -moz-transition:opacity .6s;
   -o-transition:opacity .6s;
   transition:opacity .6s

} .lb-nav a.lb-next:hover{

   filter:alpha(Opacity=100);
   opacity:1

} .lb-dataContainer{

   margin:0 auto;
   padding-top:5px;
   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{

   display:table

} .lb-data{

   padding:0 4px;
   color:#ccc

} .lb-data .lb-details{

   width:85%;
   float:left;
   text-align:left;
   line-height:1.1em

} .lb-data .lb-caption{

   font-size:13px;
   font-weight:700;
   line-height:1em

} .lb-data .lb-number{

   display:block;
   clear:left;
   padding-bottom:1em;
   font-size:12px;
   color:#999

} .lb-data .lb-close{

   display:block;
   float:right;
   width:30px;
   height:30px;
   background:url(T--SMMU-China--Notebook_closebutton.png) top right no-repeat;
   text-align:right;
   outline:0;
   filter:alpha(Opacity=70);
   opacity:.7;
   -webkit-transition:opacity .2s;
   -moz-transition:opacity .2s;-o-transition:opacity .2s;
   transition:opacity .2s

} .lb-data .lb-close:hover{

   cursor:pointer;
   filter:alpha(Opacity=100);
   opacity:1

}