"
Team:Shenzhen/css/jquery.galleryview-3.0-dev.css
From 2012.igem.org
(Created page with "/* 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 archit...") |
|||
| Line 13: | Line 13: | ||
.gv_galleryWrap { position: relative; background: #222; font-size: 10pt; } | .gv_galleryWrap { position: relative; background: #222; font-size: 10pt; } | ||
| + | /* | ||
| + | |||
| + | 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 */ | ||
| + | #myGallery { display: none; } | ||
| + | |||
| + | .gv_galleryWrap { position: relative; background: #222; font-size: 10pt; } | ||
| + | |||
| + | /* 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; } | ||
| + | |||
| + | .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: #222; color: white; z-index: 200; } | ||
| + | .gv_showOverlay { | ||
| + | position: absolute; | ||
| + | width: 20px; | ||
| + | height: 20px; | ||
| + | background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Info.png') #222; | ||
| + | cursor: pointer; | ||
| + | z-index: 200; | ||
| + | } | ||
| + | .gv_overlay h4 { color: white; margin: 1em; font-weight: bold; } | ||
| + | .gv_overlay p { color: white; margin: 1em; } | ||
| + | |||
| + | .gv_infobar { | ||
| + | background: #222; | ||
| + | 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: black; | ||
| + | } | ||
| + | |||
| + | /* 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; | ||
| + | } | ||
/* GALLERY DIV */ | /* GALLERY DIV */ | ||
Revision as of 07:54, 11 September 2012
/*
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 */
- myGallery { display: none; }
.gv_galleryWrap { position: relative; background: #222; font-size: 10pt; } /*
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 */
- myGallery { display: none; }
.gv_galleryWrap { position: relative; background: #222; font-size: 10pt; }
/* 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; }
.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: #222; color: white; z-index: 200; } .gv_showOverlay { position: absolute; width: 20px; height: 20px; background: url('https://static.igem.org/mediawiki/2012/a/af/UTD_Info.png') #222; cursor: pointer; z-index: 200; } .gv_overlay h4 { color: white; margin: 1em; font-weight: bold; } .gv_overlay p { color: white; margin: 1em; }
.gv_infobar { background: #222; 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: black; }
/* 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; }
/* 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; }
.gv_panel-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa; } .gv_frame-loading { background: url(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: #222; color: white; z-index: 200; } .gv_showOverlay { position: absolute; width: 20px; height: 20px; background: url(themes/light/info.png) #222; cursor: pointer; z-index: 200; } .gv_overlay h4 { color: white; margin: 1em; font-weight: bold; } .gv_overlay p { color: white; margin: 1em; }
.gv_infobar { background: #222; 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: black; }
/* 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(themes/light/play-big.png) top left no-repeat; } .gv_navPause { height: 30px; width: 30px; cursor: pointer; background: url(themes/light/pause-big.png) top left no-repeat; } .gv_navNext { height: 20px; width: 20px; cursor: pointer; background: url(themes/light/next.png) top left no-repeat; } .gv_navPrev { height: 20px; width: 20px; cursor: pointer; background: url(themes/light/prev.png) top right no-repeat; } .gv_panelNavNext { height: 20px; width: 20px; cursor: pointer; background: url(themes/light/panel-next.png) top left no-repeat; } .gv_panelNavPrev { height: 20px; width: 20px; cursor: pointer; background: url(themes/light/panel-prev.png) top right no-repeat; }
