Created
April 13, 2015 17:40
-
-
Save ericakfranz/e705804057215e2673e2 to your computer and use it in GitHub Desktop.
Modify Soliloquy Lightbox Style
This file contains hidden or 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
.soliloquybox-overlay-fixed, .soliloquybox-wrap, .soliloquybox-skin, .soliloquybox-outer, soliloquybox-inner { height: 100% !important; width: auto !important; } | |
.soliloquybox-wrap { | |
top: 0 !important; | |
bottom: 0 !important; | |
left: 0 !important; | |
width: 60% !important; | |
height: 100% !important; | |
padding: 20px 0 20px 20px !important | |
} | |
.soliloquybox-skin { | |
background: none !important; | |
border-radius: 0 !important; | |
-webkit-box-shadow: none !important; | |
-moz-box-shadow: none !important; | |
box-shadow: none !important; | |
padding: 0 !important; | |
} | |
.soliloquybox-outer { background: #000 !important; } | |
.soliloquybox-inner { | |
height: 100% !important; | |
width: auto !important; | |
margin: auto !important; | |
text-align: center !important; | |
} | |
.soliloquybox-image { | |
height: auto !important; | |
width: auto !important; | |
max-width: -webkit-calc(100% - 109px) !important; | |
max-width: -moz-calc(100% - 109px) !important; | |
max-width: -o-calc(100% - 109px) !important; | |
max-width: calc(100% - 109px) !important; | |
margin: auto !important; | |
} | |
/* Thumbnails */ | |
#soliloquybox-thumbs { | |
top: auto !important; | |
right: 0 !important; | |
left: auto !important; | |
bottom: 0 !important; | |
width: 40% !important; | |
height: 100% !important; | |
padding: 20px 20px 20px 0 !important; | |
} | |
#soliloquybox-thumbs ul { | |
width: 100% !important; | |
height: 100% !important; | |
left: 0 !important; | |
text-align: center !important; | |
padding: 15px !important; | |
background: #fff !important; | |
overflow: scroll; | |
} | |
#soliloquybox-thumbs ul li { | |
float: none !important; | |
display: inline-block !important; | |
border: none !important; | |
border-radius: 3px !important; | |
padding: 2px !important; | |
background: #fff !important; | |
} | |
#soliloquybox-thumbs ul li a { | |
border: none !important; | |
background: none !important; | |
} | |
#soliloquybox-thumbs ul li.active { | |
border: 1px solid #000 !important; | |
} | |
/* Close Icon */ | |
a.soliloquybox-close { | |
top: 0 !important; | |
right: 0 !important; | |
background-color: #333 !important; | |
height: 55px !important; | |
width: 55px !important; | |
background-image: none !important; | |
opacity: 1; | |
display: table !important; | |
text-align: center !important; | |
} | |
a.soliloquybox-close:before { | |
content: '\00d7'; | |
color: #666; | |
font-size: 40px; | |
font-family: serif; | |
vertical-align: middle; | |
display: table-cell; | |
} | |
/* Navigation */ | |
.soliloquybox-nav span { | |
visibility: visible !important; | |
width: 55px !important; | |
top: 0 !important; | |
margin: auto !important; | |
background-color: #aa8420 !important; | |
background-image: none !important; | |
height: 100% !important; | |
display: table; | |
text-align: center; | |
opacity: 1; | |
} | |
.soliloquybox-next span { | |
right: 0 !important; | |
height: -webkit-calc(100% - 55px) !important; | |
height: -moz-calc(100% - 55px) !important; | |
height: -o-calc(100% - 55px) !important; | |
height: calc(100% - 55px) !important; | |
top: 55px !important; | |
} | |
.soliloquybox-prev span { left: 0 !important; } | |
a.soliloquybox-close:hover, | |
.soliloquybox-nav:hover span { | |
opacity: 0.7; | |
} | |
.soliloquybox-next span:before, | |
.soliloquybox-next span:after, | |
.soliloquybox-prev span:before, | |
.soliloquybox-prev span:after { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.soliloquybox-next span:after { | |
content: '\2192'; | |
width: 100%; | |
left: 0; | |
font-size: 45px; | |
color: rgba(255,255,255,0.5); | |
} | |
.soliloquybox-prev span:after { | |
content: '\2190'; | |
width: 100%; | |
left: 0; | |
padding-top: 55px; | |
font-size: 45px; | |
color: rgba(255,255,255,0.5); | |
} | |
/* Lightbox Title / Caption */ | |
.soliloquybox-title.soliloquybox-title-over-wrap { | |
width: -webkit-calc(100% - 109px); | |
width: -moz-calc(100% - 109px); | |
width: -o-calc(100% - 109px); | |
width: calc(100% - 109px); | |
left: 55px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment