You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.4 KiB
123 lines
2.4 KiB
4 years ago
|
/**
|
||
|
* Featherlight Gallery – an extension for the ultra slim jQuery lightbox
|
||
|
* Version 1.7.9 - http://noelboss.github.io/featherlight/
|
||
|
*
|
||
|
* Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com)
|
||
|
* MIT Licensed.
|
||
|
**/
|
||
|
@media all {
|
||
|
.featherlight-next,
|
||
|
.featherlight-previous {
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
top: 25px;
|
||
|
right: 25px;
|
||
|
bottom: 0;
|
||
|
left: 80%;
|
||
|
cursor: pointer;
|
||
|
/* preventing text selection */
|
||
|
-webkit-touch-callout: none;
|
||
|
-webkit-user-select: none;
|
||
|
-khtml-user-select: none;
|
||
|
-moz-user-select: none;
|
||
|
-ms-user-select: none;
|
||
|
user-select: none;
|
||
|
/* IE9 hack, otherwise navigation doesn't appear */
|
||
|
background: rgba(0,0,0,0);
|
||
|
}
|
||
|
|
||
|
.featherlight-previous {
|
||
|
left: 25px;
|
||
|
right: 80%;
|
||
|
}
|
||
|
|
||
|
.featherlight-next:hover,
|
||
|
.featherlight-previous:hover {
|
||
|
background: rgba(255,255,255,0.25);
|
||
|
}
|
||
|
|
||
|
|
||
|
.featherlight-next span,
|
||
|
.featherlight-previous span {
|
||
|
display: none;
|
||
|
position: absolute;
|
||
|
|
||
|
top: 50%;
|
||
|
left: 5%;
|
||
|
width: 82%;
|
||
|
|
||
|
/* center horizontally */
|
||
|
text-align: center;
|
||
|
|
||
|
font-size: 80px;
|
||
|
line-height: 80px;
|
||
|
|
||
|
/* center vertically */
|
||
|
margin-top: -40px;
|
||
|
|
||
|
text-shadow: 0px 0px 5px #fff;
|
||
|
color: #fff;
|
||
|
font-style: normal;
|
||
|
font-weight: normal;
|
||
|
}
|
||
|
.featherlight-next span {
|
||
|
right: 5%;
|
||
|
left: auto;
|
||
|
}
|
||
|
|
||
|
|
||
|
.featherlight-next:hover span,
|
||
|
.featherlight-previous:hover span {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.featherlight-swipe-aware .featherlight-next,
|
||
|
.featherlight-swipe-aware .featherlight-previous {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
/* Hide navigation while loading */
|
||
|
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
|
||
|
display:none;
|
||
|
}
|
||
|
|
||
|
/* Hide navigation in case of single image */
|
||
|
.featherlight-first-slide.featherlight-last-slide .featherlight-previous,
|
||
|
.featherlight-first-slide.featherlight-last-slide .featherlight-next {
|
||
|
display:none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* Always display arrows on touch devices */
|
||
|
@media only screen and (max-device-width: 1024px){
|
||
|
.featherlight-next:hover,
|
||
|
.featherlight-previous:hover {
|
||
|
background: none;
|
||
|
}
|
||
|
.featherlight-next span,
|
||
|
.featherlight-previous span {
|
||
|
display: block;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* handling phones and small screens */
|
||
|
@media only screen and (max-width: 1024px) {
|
||
|
.featherlight-next,
|
||
|
.featherlight-previous {
|
||
|
top: 10px;
|
||
|
right: 10px;
|
||
|
left: 85%;
|
||
|
}
|
||
|
|
||
|
.featherlight-previous {
|
||
|
left: 10px;
|
||
|
right: 85%;
|
||
|
}
|
||
|
|
||
|
.featherlight-next span,
|
||
|
.featherlight-previous span {
|
||
|
margin-top: -30px;
|
||
|
font-size: 40px;
|
||
|
}
|
||
|
}
|