// Colorbox Core Styles:
%color-box-core
#colorbox, #cboxOverlay, #cboxWrapper position: absolute top: 0 left: 0 z-index: 9999 overflow: hidden #cboxOverlay position: fixed width: 100% height: 100% +opacity(0.9) #cboxMiddleLeft, #cboxBottomLeft clear: left #cboxContent position: relative #cboxLoadedContent overflow: auto -webkit-overflow-scrolling: touch #cboxTitle margin: 0 #cboxLoadingOverlay, #cboxLoadingGraphic position: absolute top: 0 left: 0 width: 100% height: 100% // These elements are buttons, and may need to have additional // styles reset to avoid unwanted base styles. #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow border: 0 padding: 0 margin: 0 overflow: visible width: auto background: none cursor: pointer // Avoid outlines on :active (mouseclick), // but preserve outlines on :focus (tabbed navigating) #cboxPrevious:active, #cboxNext:active, #cboxClose:active, #cboxSlideshow:active outline: 0 .cboxPhoto float: left margin: auto border: 0 display: block max-width: none .cboxIframe width: 100% height: 100% display: block border: 0 // Reset box sizing to content-box if theme is using border-box. #colorbox, #cboxContent, #cboxLoadedContent +box-sizing(content-box)
//// Colorbox module default style: //// The styles are ordered & tabbed in a way that represents //// the nesting of the generated HTML. %colorbox-styles
#cboxOverlay background: #000 #colorbox outline: 0 #cboxWrapper #cboxTopLeft width: 15px height: 15px #cboxTopCenter height: 15px #cboxTopRight width: 15px height: 15px #cboxBottomLeft width: 15px height: 10px #cboxBottomCenter height: 10px #cboxBottomRight width: 15px height: 10px #cboxMiddleLeft width: 15px #cboxMiddleRight width: 15px #cboxContent overflow: hidden #cboxError padding: 50px border: 1px solid #ccc #cboxLoadedContent margin-bottom: 28px #cboxTitle position: absolute +text-style($size: 14px, $color: white, $lh: 16px) bottom: 28px left: 0 color: white width: 100% padding: 25px 10px 15px #cboxCurrent display: none //position: absolute //bottom: 4px //left: 60px //color: #949494 .cboxSlideshow_on #cboxSlideshow position: absolute bottom: 0px right: 30px background: url('images/controls.png') no-repeat -75px -50px width: 25px height: 25px text-indent: -9999px .cboxSlideshow_on #cboxSlideshow:hover background-position: -101px -50px .cboxSlideshow_off #cboxSlideshow position: absolute bottom: 0px right: 30px background: url('images/controls.png') no-repeat -25px -50px width: 25px height: 25px text-indent: -9999px .cboxSlideshow_off #cboxSlideshow:hover background-position: -49px -50px #cboxPrevious position: absolute bottom: 0 left: 0 background: url('images/controls.png') no-repeat -75px 0px width: 25px height: 25px text-indent: -9999px #cboxPrevious:hover background-position: -75px -25px #cboxNext position: absolute bottom: 0 left: 27px background: url('images/controls.png') no-repeat -50px 0px width: 25px height: 25px text-indent: -9999px #cboxNext:hover background-position: -50px -25px #cboxLoadingOverlay #cboxLoadingGraphic background: url('images/loading_animation.gif') no-repeat center center #cboxClose position: absolute bottom: 0 right: 0 background: url('images/controls.png') no-repeat -25px 0px width: 25px height: 25px text-indent: -9999px #cboxClose:hover background-position: -25px -25px