164 lines
4 KiB
CSS
164 lines
4 KiB
CSS
|
/**
|
|||
|
* Featherlight – ultra slim jQuery lightbox
|
|||
|
* Version 1.7.14 - http://noelboss.github.io/featherlight/
|
|||
|
*
|
|||
|
* Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com)
|
|||
|
* MIT Licensed.
|
|||
|
**/
|
|||
|
|
|||
|
html.with-featherlight {
|
|||
|
/* disable global scrolling when featherlights are visible */
|
|||
|
overflow: hidden;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight {
|
|||
|
display: none;
|
|||
|
|
|||
|
/* dimensions: spanning the background from edge to edge */
|
|||
|
position: fixed;
|
|||
|
top: 0;
|
|||
|
right: 0;
|
|||
|
bottom: 0;
|
|||
|
left: 0;
|
|||
|
z-index: 2147483647;
|
|||
|
/* z-index needs to be >= elements on the site. */
|
|||
|
|
|||
|
/* position: centering content */
|
|||
|
text-align: center;
|
|||
|
|
|||
|
/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
|
|||
|
white-space: nowrap;
|
|||
|
|
|||
|
/* styling */
|
|||
|
cursor: pointer;
|
|||
|
background: #333;
|
|||
|
/* IE8 "hack" for nested featherlights */
|
|||
|
background: rgba(0, 0, 0, 0);
|
|||
|
}
|
|||
|
|
|||
|
/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
|
|||
|
.featherlight:last-of-type {
|
|||
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
}
|
|||
|
|
|||
|
.featherlight:before {
|
|||
|
/* position: trick to center content vertically */
|
|||
|
content: '';
|
|||
|
display: inline-block;
|
|||
|
height: 100%;
|
|||
|
vertical-align: middle;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight .featherlight-content {
|
|||
|
/* make content container for positioned elements (close button) */
|
|||
|
position: relative;
|
|||
|
|
|||
|
/* position: centering vertical and horizontal */
|
|||
|
text-align: left;
|
|||
|
vertical-align: middle;
|
|||
|
display: inline-block;
|
|||
|
|
|||
|
/* dimensions: cut off images */
|
|||
|
overflow: auto;
|
|||
|
padding: 25px 25px 0;
|
|||
|
border-bottom: 25px solid transparent;
|
|||
|
|
|||
|
/* dimensions: handling large content */
|
|||
|
margin-left: 5%;
|
|||
|
margin-right: 5%;
|
|||
|
max-height: 95%;
|
|||
|
|
|||
|
/* styling */
|
|||
|
background: #fff;
|
|||
|
cursor: auto;
|
|||
|
|
|||
|
/* reset white-space wrapping */
|
|||
|
white-space: normal;
|
|||
|
}
|
|||
|
|
|||
|
/* contains the content */
|
|||
|
.featherlight .featherlight-inner {
|
|||
|
/* make sure its visible */
|
|||
|
display: block;
|
|||
|
}
|
|||
|
|
|||
|
/* don't show these though */
|
|||
|
.featherlight script.featherlight-inner,
|
|||
|
.featherlight link.featherlight-inner,
|
|||
|
.featherlight style.featherlight-inner {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight .featherlight-close-icon {
|
|||
|
/* position: centering vertical and horizontal */
|
|||
|
position: absolute;
|
|||
|
z-index: 9999;
|
|||
|
top: 0;
|
|||
|
right: 0;
|
|||
|
|
|||
|
/* dimensions: 25px x 25px */
|
|||
|
line-height: 25px;
|
|||
|
width: 25px;
|
|||
|
|
|||
|
/* styling */
|
|||
|
cursor: pointer;
|
|||
|
text-align: center;
|
|||
|
font-family: Arial, sans-serif;
|
|||
|
background: #fff;
|
|||
|
/* Set the background in case it overlaps the content */
|
|||
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
color: #000;
|
|||
|
border: none;
|
|||
|
padding: 0;
|
|||
|
}
|
|||
|
|
|||
|
/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
|
|||
|
.featherlight .featherlight-close-icon::-moz-focus-inner {
|
|||
|
border: 0;
|
|||
|
padding: 0;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight .featherlight-image {
|
|||
|
/* styling */
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
.featherlight-iframe .featherlight-content {
|
|||
|
/* removed the border for image croping since iframe is edge to edge */
|
|||
|
border-bottom: 0;
|
|||
|
padding: 0;
|
|||
|
-webkit-overflow-scrolling: touch;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight iframe {
|
|||
|
/* styling */
|
|||
|
border: none;
|
|||
|
}
|
|||
|
|
|||
|
.featherlight * {
|
|||
|
/* See https://github.com/noelboss/featherlight/issues/42 */
|
|||
|
-webkit-box-sizing: border-box;
|
|||
|
-moz-box-sizing: border-box;
|
|||
|
box-sizing: border-box;
|
|||
|
}
|
|||
|
|
|||
|
/* handling phones and small screens */
|
|||
|
@media only screen and (max-width: 1024px) {
|
|||
|
.featherlight .featherlight-content {
|
|||
|
/* dimensions: maximize lightbox with for small screens */
|
|||
|
margin-left: 0;
|
|||
|
margin-right: 0;
|
|||
|
max-height: 98%;
|
|||
|
|
|||
|
padding: 10px 10px 0;
|
|||
|
border-bottom: 10px solid transparent;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/* hide non featherlight items when printing */
|
|||
|
@media print {
|
|||
|
html.with-featherlight>*> :not(.featherlight) {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
}
|