Last active
December 13, 2015 20:19
-
-
Save tribulant/f578ddd36338a478fc19 to your computer and use it in GitHub Desktop.
Colorbox FontAwesome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
ColorBox Core Style: | |
The following CSS is consistent between example themes and should not be altered. | |
*/ | |
#colorbox, #cboxOverlay, #cboxWrapper{position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 9999; | |
overflow: hidden; | |
border-bottom: 21px white solid; } | |
#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:50%;left:45%;width:auto;} | |
#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:#000;} | |
#colorbox{outline:0;} | |
#cboxContent{margin-top: 40px; | |
background: white; | |
padding: 21px 0 0 0;} | |
.cboxIframe{background:#fff;} | |
#cboxError{padding:50px; border:1px solid #ccc;} | |
#cboxLoadedContent{ } | |
#cboxTitle{position: absolute; | |
top: -34px; | |
left: -11px; | |
color: #ccc; | |
font-size: 100%; | |
font-weight: bold; | |
} | |
#cboxCurrent{position: absolute; | |
top: -34px; | |
right: 11px; | |
color: #ccc; | |
font-size: 100%; | |
} | |
#cboxLoadingGraphic { | |
color: #333; | |
-webkit-animation: fa-spin 2s infinite linear; | |
animation: fa-spin 2s infinite linear; | |
} | |
@keyframes fa-spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(359deg); | |
transform: rotate(359deg); | |
} | |
} | |
#cboxLoadingGraphic:before { | |
font-family: FontAwesome; | |
content: "\f1ce"; | |
font-size: 24px; | |
} | |
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ | |
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } | |
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ | |
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} | |
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} | |
#cboxPrevious, #cboxNext{ | |
visibility: hidden; | |
position:absolute; | |
margin-top: -30px; | |
top:50%; | |
width:50%; | |
height:100px; | |
padding: 10px; | |
color: #ccc; | |
outline: none; | |
overflow: hidden; | |
vertical-align: middle; | |
} | |
#cboxPrevious{ | |
left: 5px; | |
text-align: left; | |
} | |
#cboxPrevious:before{ | |
visibility: visible; | |
font-size: 72px; | |
font-family: FontAwesome; | |
content: "\f104"; | |
vertical-align: middle; | |
} | |
#cboxPrevious:hover{color: #fff;} | |
#cboxNext{ | |
right: 15px; | |
text-align: right; | |
} | |
#cboxNext:before{ | |
visibility: visible; | |
font-size: 72px; | |
font-family: FontAwesome; | |
content: "\f105"; | |
vertical-align: middle; | |
} | |
#cboxNext:hover{color: #fff;} | |
#cboxClose{ | |
visibility: hidden; | |
position:absolute; | |
top: -30px; | |
right: -21px; | |
display:block; | |
width: 24px; | |
height:24px; | |
color: #ccc; | |
outline: 0; | |
} | |
#cboxClose:before{ | |
visibility: visible; | |
font-family: FontAwesome; | |
font-size: 24px; | |
content: "\f00d"; | |
margin: 0 99999px 0 0; | |
} | |
#cboxClose:hover{ | |
color: #fff; | |
} | |
#cboxTopLeft{/* width: 21px; */ | |
/* height: 21px; */ | |
/* background: white; */} | |
#cboxTopRight{/* width: 21px; */ | |
/* height: 21px; */ | |
/* background: white; */} | |
#cboxBottomLeft{width:21px; height:21px; background:white;} | |
#cboxBottomRight{width:21px; height:21px; background:white;} | |
#cboxMiddleLeft{width: 21px; | |
background: white; | |
margin-top: 40px; | |
padding-bottom: 21px;} | |
#cboxMiddleRight{width: 21px; | |
background: white; | |
margin-top: 40px; | |
padding-bottom: 21px;} | |
#cboxTopCenter{/* height: 21px; */ | |
/* background: white; */} | |
#cboxBottomCenter{height:21px; background:white;} | |
/*#cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0;} | |
#colorbox{} | |
#cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px 0;} | |
#cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px 0;} | |
#cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -100px -29px;} | |
#cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -129px -29px;} | |
#cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;} | |
#cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;} | |
#cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;} | |
#cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;} | |
#cboxContent{background:#fff; overflow:hidden;} | |
#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(../images/colorbox/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(../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} | |
#cboxNext.hover{background-position:-50px -25px;} | |
#cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;} | |
#cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;} | |
#cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/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 IE9. | |
*/ | |
.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); | |
} | |
/* | |
The following provides PNG transparency support for IE6 | |
*/ | |
.cboxIE6 #cboxTopLeft{background:url(../images/colorbox/ie6/borderTopLeft.png);} | |
.cboxIE6 #cboxTopCenter{background:url(../images/colorbox/ie6/borderTopCenter.png);} | |
.cboxIE6 #cboxTopRight{background:url(../images/colorbox/ie6/borderTopRight.png);} | |
.cboxIE6 #cboxBottomLeft{background:url(../images/colorbox/ie6/borderBottomLeft.png);} | |
.cboxIE6 #cboxBottomCenter{background:url(../images/colorbox/ie6/borderBottomCenter.png);} | |
.cboxIE6 #cboxBottomRight{background:url(../images/colorbox/ie6/borderBottomRight.png);} | |
.cboxIE6 #cboxMiddleLeft{background:url(../images/colorbox/ie6/borderMiddleLeft.png);} | |
.cboxIE6 #cboxMiddleRight{background:url(../images/colorbox/ie6/borderMiddleRight.png);} | |
.cboxIE6 #cboxTopLeft, | |
.cboxIE6 #cboxTopCenter, | |
.cboxIE6 #cboxTopRight, | |
.cboxIE6 #cboxBottomLeft, | |
.cboxIE6 #cboxBottomCenter, | |
.cboxIE6 #cboxBottomRight, | |
.cboxIE6 #cboxMiddleLeft, | |
.cboxIE6 #cboxMiddleRight { | |
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment