Skip to content

Instantly share code, notes, and snippets.

@jacobdubail
Created May 25, 2012 19:59
Show Gist options
  • Save jacobdubail/2790242 to your computer and use it in GitHub Desktop.
Save jacobdubail/2790242 to your computer and use it in GitHub Desktop.
CSS: Colorbox
#colorbox,
#cboxOverlay,
#cboxWrapper { position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay { position:fixed; width:100%; height:100%;}
#cboxMiddleLeft,
#cboxBottomLeft {clear:left;}
#cboxContent { position:relative;}
#cboxLoadedContent { overflow:auto;}
#cboxTitle { margin:0;}
#cboxLoadingOverlay,
#cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%;}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow { cursor:pointer;}
.cboxPhoto { float:left; margin:auto; border:0; display:block;}
.cboxIframe { width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay { background: url( '../i/overlay.png' ) repeat 0 0;}
#colorbox { }
#cboxTopLeft { width:21px; height:21px; background:url(_/i/controls.png) no-repeat -101px 0;}
#cboxTopRight { width:21px; height:21px; background: url( '../i/controls.png' ) no-repeat -130px 0;}
#cboxBottomLeft { width:21px; height:21px; background: url( '../i/controls.png' ) no-repeat -101px -29px;}
#cboxBottomRight { width:21px; height:21px; background: url( '../i/controls.png' ) no-repeat -130px -29px;}
#cboxMiddleLeft { width:21px; background: url( '../i/controls.png' ) left top repeat-y;}
#cboxMiddleRight { width:21px; background: url( '../i/controls.png' ) right top repeat-y;}
#cboxTopCenter { height:21px; background: url( '../i/border.png' ) 0 0 repeat-x;}
#cboxBottomCenter { height:21px; background: url( '../i/border.png' ) 0 -29px repeat-x;}
#cboxContent { background:#fff; overflow:hidden;}
.cboxIframe { background:#fff;}
#cboxError { padding:50px; border:1px solid #ccc;}
#cboxLoadedContent { margin-bottom:28px;}
#cboxTitle { position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent { position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow { position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious { position:absolute; bottom:0; left:0; background: url( '../i/controls.png' ) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover { background-position:-75px -25px;}
#cboxNext { position:absolute; bottom:0; left:27px; background: url( '../i/controls.png' ) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover { background-position:-50px -25px;}
#cboxLoadingOverlay { background: url( '../i/loading_background.png' ) no-repeat center center;}
#cboxLoadingGraphic { background: url( _/i/loading.gif) no-repeat center center;}
#cboxClose { position:absolute; bottom:0; right:0; background: url( '../i/controls.png' ) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover { background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment