Team:Shenzhen/css/jquery.galleryview-3.0-dev.css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/*
 
-
 
-
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; }
 
/*
/*
Line 201: Line 187:
cursor: pointer;
cursor: pointer;
background: url('https://static.igem.org/mediawiki/2012/d/da/UTD_Prev.png') top right no-repeat;
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;
 
}
}

Revision as of 07:57, 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 */

  1. 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; }