forked from bmalnad/btcjamhelper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
featherlight.css
130 lines (106 loc) · 2.8 KB
/
featherlight.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/**
* Featherlight – ultra slim jQuery lightbox
* Version 1.2.0 - http://noelboss.github.io/featherlight/
*
* Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
* MIT Licensed.
**/
@media all {
.featherlight {
display: none;
/* dimensions: spanning the background from edge to edge */
position:fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2;
/* 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;
margin-right: -0.25em;
}
.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 small or empty content */
min-width: 30%;
/* 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;
}
.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: Arial, sans-serif;
background: #fff; /* Set the background in case it overlaps the content */
background: rgba(255, 255, 255, 0.3);
color: #000;
}
.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;
}
.featherlight iframe {
/* styling */
border: none;
}
}
/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-content {
/* dimensions: maximize lightbox with for small screens */
margin-left: 10px;
margin-right: 10px;
max-height: 98%;
padding: 10px 10px 0;
border-bottom: 10px solid transparent;
}
}