Team:Shenzhen BGIC ATCG/css/gallary.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
/*
-
.gallery {
+
GalleryView Stylesheet
-
display:block;
+
 +
Use the CSS rules below to modify the look of your gallery.
 +
 +
To create additional rules, use the markup below as a guide to GalleryView's architecture.
 +
*/
 +
 
 +
/* GALLERY LIST */
 +
/* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */
 +
#myGallery { display: none; position: relative;}
 +
 
 +
.gv_galleryWrap { position: relative; background: #333; font-size: 10pt;  top:0px; left: 0px; }
 +
 
 +
/* GALLERY DIV */
 +
.gv_gallery { overflow: hidden; position: relative; }
 +
 
 +
.gv_imageStore { visibility: hidden; position: absolute; top: -10000px; left: -10000px; }
 +
 
 +
 
 +
/*************************************************/
 +
/**  PANEL STYLES **/
 +
/*************************************************/
 +
 
 +
.gv_panelWrap { filter: inherit; position: absolute; overflow: hidden;  left:0px; top:0px; background: #666; }
 +
 
 +
.gv_panel-loading { background: url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-loader.gif') 50% 50% no-repeat #aaa; }
 +
.gv_frame-loading { background: url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-loader.gif') 50% 50% no-repeat #aaa; }
 +
 
 +
/* GALLERY PANELS */
 +
.gv_panel { filter: inherit; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 100; }
 +
.gv_panel img { position: absolute; }
 +
 
 +
.gv_overlay { position: absolute; background: #333; color: white; z-index: 200; opacity:0.8; }
 +
.gv_showOverlay {
 +
 
 +
position: absolute;
 +
width: 20px;
 +
height: 20px;
 +
background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Info.png') #333;
 +
cursor: pointer;
 +
z-index: 200;
 +
        opacity:0.8;
 +
}
 +
.gv_overlay h4 { color: white; margin: 1em; font-weight: bold; }
 +
.gv_overlay p { color: white; margin: 1em; }
 +
 
 +
.gv_infobar {
 +
background: #333;
 +
padding: 0 0.5em;
 +
line-height: 1.5em;
 +
height: 1.5em;
 +
font-size: 10pt;
 +
font-weight: bold;
 +
color: white;
 +
 +
position: absolute;
 +
bottom: 0;
 +
right: 0;
 +
display: none;
 +
vertical-align: middle;
 +
z-index: 2000;
 +
 +
}
 +
 
 +
 
 +
/*************************************************/
 +
/**  FILMSTRIP STYLES **/
 +
/*************************************************/
 +
 
 +
.gv_filmstripWrap { overflow: hidden; position: absolute; }
 +
 
 +
 
 +
/* FILMSTRIP */
 +
.gv_filmstrip { margin: 0; padding: 0; position: absolute; top: 0; left: 0; }
 +
 
 +
/* FILMSTRIP FRAMES (contains both images and captions) */
 +
.gv_frame {
 +
cursor: pointer;
 +
float: left;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
/* WRAPPER FOR FILMSTRIP IMAGES */
 +
.gv_frame .gv_thumbnail { position: relative;overflow: hidden !important; }
 +
 
 +
/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
 +
.gv_frame.current .gv_thumbnail {}
 +
 
 +
/* FRAME IMAGES */
 +
.gv_frame img { border: none; position: absolute; }
 +
 
 +
/* FRAME CAPTION */
 +
.gv_frame .gv_caption { height: 14px; line-height: 14px; font-size: 10px; text-align: center; color:white; }
 +
 
 +
/* CURRENT FRAME CAPTION */
 +
.gv_frame.current .gv_caption { }
 +
 
 +
/* POINTER FOR CURRENT FRAME */
 +
.gv_pointer {
 +
border-color: #333;
 +
}
 +
 
 +
/* NAVIGATION BUTTONS */
 +
.gv_navWrap {
 +
text-align: center;
 +
position: absolute;
 +
}
 +
.gv_navPlay,
 +
.gv_navPause,
 +
.gv_navNext,
 +
.gv_navPrev {
 +
 +
opacity: 0.3;
 +
-moz-opacity: 0.3;
 +
-khtml-opacity: 0.3;
 +
filter:alpha(opacity=30);
 +
display:-moz-inline-stack;
 +
display:inline-block;
 +
zoom:1;
 +
*display:inline;
 +
vertical-align: middle;
 +
}
 +
.gv_navPlay:hover,
 +
.gv_navPause:hover,
 +
.gv_navNext:hover,
 +
.gv_navPrev:hover {
 +
opacity: 0.8;
 +
-moz-opacity: 0.8;
 +
-khtml-opacity: 0.8;
 +
filter:alpha(opacity=80);
 +
}
 +
 
 +
.gv_panelNavPrev,
 +
.gv_panelNavNext {
 +
position: absolute;
 +
display: none;
 +
opacity: 0.50;
 +
-moz-opacity: 0.50;
 +
-khtml-opacity: 0.50;
 +
filter:alpha(opacity=50);
 +
z-index: 200;
 +
}
 +
 
 +
.gv_panelNavPrev:hover,
 +
.gv_panelNavNext:hover {
 +
opacity: 0.9;
 +
-moz-opacity: 0.9;
 +
-khtml-opacity: 0.9;
 +
filter:alpha(opacity=90);
 +
}
 +
 
 +
.gv_navPlay {
 +
height: 30px;
 +
width: 30px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/f/ff/UTD_Play-big.png') top left no-repeat;
 +
}
 +
.gv_navPause {
 +
height: 30px;
 +
width: 30px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/5/50/UTD_Pause-big.png') top left no-repeat;
 +
}
 +
.gv_navNext {
 +
height: 20px;
 +
width: 20px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Next.png') top left no-repeat;
 +
}
 +
.gv_navPrev {
 +
height: 20px;
 +
width: 20px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/d/da/UTD_Prev.png') top right no-repeat;
 +
}
 +
.gv_panelNavNext {
 +
height: 20px;
 +
width: 20px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Next.png') top left no-repeat;
 +
}
 +
.gv_panelNavPrev {
 +
height: 20px;
 +
width: 20px;
 +
cursor: pointer;
 +
background: url('https://static.igem.org/mediawiki/2012/d/da/UTD_Prev.png') top right no-repeat;
}
}

Revision as of 14:03, 26 September 2013

/*

GalleryView Stylesheet

Use the CSS rules below to modify the look of your gallery.

To create additional rules, use the markup below as a guide to GalleryView's architecture.

  • /

/* GALLERY LIST */ /* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */

  1. myGallery { display: none; position: relative;}

.gv_galleryWrap { position: relative; background: #333; font-size: 10pt; top:0px; left: 0px; }

/* GALLERY DIV */ .gv_gallery { overflow: hidden; position: relative; }

.gv_imageStore { visibility: hidden; position: absolute; top: -10000px; left: -10000px; }


/*************************************************/ /** PANEL STYLES **/ /*************************************************/

.gv_panelWrap { filter: inherit; position: absolute; overflow: hidden; left:0px; top:0px; background: #666; }

.gv_panel-loading { background: url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-loader.gif') 50% 50% no-repeat #aaa; } .gv_frame-loading { background: url('https://static.igem.org/mediawiki/2012/d/d0/UTD_Img-loader.gif') 50% 50% no-repeat #aaa; }

/* GALLERY PANELS */ .gv_panel { filter: inherit; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 100; } .gv_panel img { position: absolute; }

.gv_overlay { position: absolute; background: #333; color: white; z-index: 200; opacity:0.8; } .gv_showOverlay {

position: absolute; width: 20px; height: 20px; background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Info.png') #333; cursor: pointer; z-index: 200;

       opacity:0.8; 

} .gv_overlay h4 { color: white; margin: 1em; font-weight: bold; } .gv_overlay p { color: white; margin: 1em; }

.gv_infobar { background: #333; padding: 0 0.5em; line-height: 1.5em; height: 1.5em; font-size: 10pt; font-weight: bold; color: white;

position: absolute; bottom: 0; right: 0; display: none; vertical-align: middle; z-index: 2000;

}


/*************************************************/ /** FILMSTRIP STYLES **/ /*************************************************/

.gv_filmstripWrap { overflow: hidden; position: absolute; }


/* FILMSTRIP */ .gv_filmstrip { margin: 0; padding: 0; position: absolute; top: 0; left: 0; }

/* FILMSTRIP FRAMES (contains both images and captions) */ .gv_frame { cursor: pointer; float: left; position: relative; margin: 0; padding: 0; }

/* WRAPPER FOR FILMSTRIP IMAGES */ .gv_frame .gv_thumbnail { position: relative;overflow: hidden !important; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */ .gv_frame.current .gv_thumbnail {}

/* FRAME IMAGES */ .gv_frame img { border: none; position: absolute; }

/* FRAME CAPTION */ .gv_frame .gv_caption { height: 14px; line-height: 14px; font-size: 10px; text-align: center; color:white; }

/* CURRENT FRAME CAPTION */ .gv_frame.current .gv_caption { }

/* POINTER FOR CURRENT FRAME */ .gv_pointer { border-color: #333; }

/* NAVIGATION BUTTONS */ .gv_navWrap { text-align: center; position: absolute; } .gv_navPlay, .gv_navPause, .gv_navNext, .gv_navPrev {

opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; filter:alpha(opacity=30); display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align: middle; } .gv_navPlay:hover, .gv_navPause:hover, .gv_navNext:hover, .gv_navPrev:hover { opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter:alpha(opacity=80); }

.gv_panelNavPrev, .gv_panelNavNext { position: absolute; display: none; opacity: 0.50; -moz-opacity: 0.50; -khtml-opacity: 0.50; filter:alpha(opacity=50); z-index: 200; }

.gv_panelNavPrev:hover, .gv_panelNavNext:hover { opacity: 0.9; -moz-opacity: 0.9; -khtml-opacity: 0.9; filter:alpha(opacity=90); }

.gv_navPlay { height: 30px; width: 30px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/f/ff/UTD_Play-big.png') top left no-repeat; } .gv_navPause { height: 30px; width: 30px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/5/50/UTD_Pause-big.png') top left no-repeat; } .gv_navNext { height: 20px; width: 20px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Next.png') top left no-repeat; } .gv_navPrev { height: 20px; width: 20px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/d/da/UTD_Prev.png') top right no-repeat; } .gv_panelNavNext { height: 20px; width: 20px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Next.png') top left no-repeat; } .gv_panelNavPrev { height: 20px; width: 20px; cursor: pointer; background: url('https://static.igem.org/mediawiki/2012/d/da/UTD_Prev.png') top right no-repeat; }