PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.22
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.22
3.36 3.35 3.34 3.33 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 2.33 2.34 2.40 2.41 2.42 2.43 2.44 All 141 releases
photonic / include / scripts / third-party / lightcase / lightcase.css

lightcase.css in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 2.22, at include/scripts/third-party/lightcase/lightcase.css

498 lines 15.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Lightcase - jQuery Plugin
3 * The smart and flexible Lightbox Plugin.
4 *
5 * @author Cornel Boppart <cornel@bopp-art.com>
6 * @copyright Author
7 *
8 * @version 2.3.6 (20/12/2016)
9 */
10 [class*='lightcase-icon-']:before {
11 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
12 font-style: normal;
13 font-weight: normal;
14 display: inline-block;
15 text-decoration: inherit;
16 width: 1em;
17 text-align: center;
18 font-variant: normal;
19 text-transform: none;
20 line-height: 1em;
21 }
22
23 .lightcase-icon-close, .lightcase-icon-prev, .lightcase-icon-next, .lightcase-icon-play, .lightcase-icon-pause {
24 width: 2em;
25 height: 2em;
26 text-align: left;
27 border-radius: 50%;
28 position: fixed;
29 z-index: 10002;
30 -webkit-transition: color .3s ease;
31 transition: color .3s ease;
32 border-width: 2px;
33 border-color: rgba(255,255,255,0.6);
34 border-style: solid;
35 box-sizing: content-box;
36 }
37 .lightcase-icon-close:before, .lightcase-icon-close:after, .lightcase-icon-prev:before, .lightcase-icon-next:before, .lightcase-icon-prev:after, .lightcase-icon-next:after, .lightcase-icon-pause:before, .lightcase-icon-pause:after {
38 width: 2px;
39 background-color: #fff;
40 background-color: rgba(255,255,255,0.6);
41 content: '';
42 position: absolute;
43 top: 20%;
44 bottom: 20%;
45 left: 50%;
46 margin-left: -1px;
47 }
48 .lightcase-icon-close:hover:before, .lightcase-icon-close:hover:after, .lightcase-icon-prev:hover:before, .lightcase-icon-next:hover:before, .lightcase-icon-prev:hover:after, .lightcase-icon-next:hover:after, .lightcase-icon-pause:hover:before, .lightcase-icon-pause:hover:after,
49 .lightcase-icon-close:focus:before, .lightcase-icon-close:focus:after, .lightcase-icon-prev:focus:before, .lightcase-icon-next:focus:before, .lightcase-icon-prev:focus:after, .lightcase-icon-next:focus:after, .lightcase-icon-pause:focus:before, .lightcase-icon-pause:focus:after {
50 background-color: #fff;
51 }
52 .lightcase-icon-close:hover, .lightcase-icon-close:focus, .lightcase-icon-close:hover:before, .lightcase-icon-close:focus:before, .lightcase-icon-close:hover:after, .lightcase-icon-close:focus:after,
53 .lightcase-icon-prev:hover, .lightcase-icon-prev:focus, .lightcase-icon-prev:hover:before, .lightcase-icon-prev:focus:before, .lightcase-icon-prev:hover:after, .lightcase-icon-prev:focus:after,
54 .lightcase-icon-next:hover, .lightcase-icon-next:focus, .lightcase-icon-next:hover:before, .lightcase-icon-next:focus:before, .lightcase-icon-next:hover:after, .lightcase-icon-next:focus:after,
55 .lightcase-icon-play:hover, .lightcase-icon-play:focus,
56 .lightcase-icon-pause:hover, .lightcase-icon-pause:focus, .lightcase-icon-pause:hover:before, .lightcase-icon-pause:focus:before, .lightcase-icon-pause:hover:after, .lightcase-icon-pause:focus:after {
57 color: #fff;
58 border-color: #fff;
59 box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
60 }
61
62 .lightcase-icon-close {top: 2.5em; right: 2.5em; text-indent: -9999px; }
63 .lightcase-icon-close:before { -webkit-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); transform: rotate( 45deg ); }
64 .lightcase-icon-close:after { -webkit-transform: rotate( -45deg ); -ms-transform: rotate( -45deg ); transform: rotate( -45deg ); }
65
66 .lightcase-icon-next:before { width: 4px; transform: rotate(-45deg) translate(0.075em,-0.075em) scale(0.5); }
67 .lightcase-icon-next:after { width: 4px; transform: rotate(45deg) translate(0.075em,0.075em) scale(0.5); }
68
69 .lightcase-icon-prev:before { width: 4px; transform: rotate(45deg) translate(-0.075em,-0.075em) scale(0.5); margin-left: -0.06em;}
70 .lightcase-icon-prev:after { width: 4px; transform: rotate(-45deg) translate(-0.075em,0.075em) scale(0.5); margin-left: -0.06em;}
71
72 .lightcase-icon-play, .lightcase-icon-pause {
73 height: 1em !important;
74 vertical-align: middle;
75 display: none;
76 position: fixed;
77 z-index: 10001;
78 }
79 .lightcase-icon-play:before {
80 width: 0;
81 height: 0;
82 border: 0.25em solid transparent;
83 content: '';
84 display: inline-block;
85 border-right: none;
86 border-left-color: rgba(255, 255, 255, 0.6);
87 -webkit-transform: translate(0.1em, -0.1em);
88 -moz-transform: translate(0.1em, -0.1em);
89 -ms-transform: translate(0.1em, -0.1em);
90 -o-transform: translate(0.1em, -0.1em);
91 transform: translate(0.1em, -0.1em);
92 }
93 .lightcase-icon-play:hover:before, .lightcase-icon-play:hover:after { border-left-color: #fff; }
94 .lightcase-icon-pause:before {
95 width: 4px;
96 -webkit-transform: translate(-0.15em) scale(0.75);
97 -moz-transform: translate(-0.15em) scale(0.75);
98 -ms-transform: translate(-0.15em) scale(0.75);
99 -o-transform: translate(-0.15em) scale(0.75);
100 transform: translate(-0.15em) scale(0.75);
101 }
102 .lightcase-icon-pause:after {
103 width: 4px;
104 -webkit-transform: translate(0.15em) scale(0.75);
105 -moz-transform: translate(0.15em) scale(0.75);
106 -ms-transform: translate(0.15em) scale(0.75);
107 -o-transform: translate(0.15em) scale(0.75);
108 transform: translate(0.15em) scale(0.75);
109 }
110
111
112
113 .lightcase-icon-spin, .lightcase-icon-spin:after {
114 border-radius: 50%;
115 width: 5em;
116 height: 5em;
117 }
118 .lightcase-icon-spin {
119 margin: 60px auto;
120 font-size: 10px;
121 position: relative;
122 text-indent: -9999em;
123 border-top: 0.8em solid rgba(255, 255, 255, 0.2);
124 border-right: 0.8em solid rgba(255, 255, 255, 0.2);
125 border-bottom: 0.8em solid rgba(255, 255, 255, 0.2);
126 border-left: 0.8em solid #ffffff;
127 border-left: 0.8em solid rgba(255,255,255,0.8);
128 -webkit-transform: translateZ(0);
129 -ms-transform: translateZ(0);
130 transform: translateZ(0);
131 -webkit-animation: lightcase-spin 1.1s infinite linear;
132 animation: lightcase-spin 1.1s infinite linear;
133 }
134 @-webkit-keyframes lightcase-spin {
135 0% {
136 -webkit-transform: rotate(0deg);
137 transform: rotate(0deg);
138 }
139 100% {
140 -webkit-transform: rotate(360deg);
141 transform: rotate(360deg);
142 }
143 }
144 @keyframes lightcase-spin {
145 0% {
146 -webkit-transform: rotate(0deg);
147 transform: rotate(0deg);
148 }
149 100% {
150 -webkit-transform: rotate(360deg);
151 transform: rotate(360deg);
152 }
153 }
154
155 #lightcase-case {
156 display: none;
157 position: fixed;
158 z-index: 2002;
159 top: 50%;
160 left: 50%;
161 font-family: arial, sans-serif;
162 font-size: 13px;
163 line-height: 1.5;
164 text-align: left;
165 text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
166 }
167 @media screen and (max-width: 640px) {
168 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) {
169 position: relative !important;
170 top: auto !important;
171 left: auto !important;
172 width: auto !important;
173 height: auto !important;
174 margin: 0 !important;
175 padding: 0 !important;
176 border: none !important;
177 background: none !important;
178 }
179 }
180
181 @media screen and (min-width: 641px) {
182 #lightcase-case:not([data-lc-type=error]) #lightcase-content {
183 position: relative;
184 z-index: 1;
185 overflow: hidden;
186 text-shadow: none;
187 background-color: #fff;
188 -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
189 -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
190 -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
191 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
192 -webkit-backface-visibility: hidden;
193 }
194 }
195 @media screen and (min-width: 641px) {
196 #lightcase-case[data-lc-type=image] #lightcase-content, #lightcase-case[data-lc-type=video] #lightcase-content {
197 background-color: #333;
198 }
199 }
200 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content {
201 -webkit-box-shadow: none;
202 -moz-box-shadow: none;
203 -o-box-shadow: none;
204 box-shadow: none;
205 }
206 @media screen and (max-width: 640px) {
207 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content {
208 position: relative !important;
209 top: auto !important;
210 left: auto !important;
211 width: auto !important;
212 height: auto !important;
213 margin: 0 !important;
214 padding: 0 !important;
215 border: none !important;
216 background: none !important;
217 }
218 }
219 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner {
220 -webkit-box-sizing: border-box;
221 -moz-box-sizing: border-box;
222 -o-box-sizing: border-box;
223 box-sizing: border-box;
224 }
225 @media screen and (max-width: 640px) {
226 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner {
227 padding: 15px;
228 }
229 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner, #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner > * {
230 width: 100% !important;
231 max-width: none !important;
232 }
233 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner > *:not(iframe) {
234 height: auto !important;
235 max-height: none !important;
236 }
237 }
238 @media screen and (max-width: 640px) {
239 .lightcase-isMobileDevice #lightcase-case[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe {
240 overflow: auto;
241 -webkit-overflow-scrolling: touch;
242 }
243 }
244 @media screen and (max-width: 640px) and (min-width: 641px) {
245 [data-lc-type=image] #lightcase-content .lightcase-contentInner, [data-lc-type=video] #lightcase-content .lightcase-contentInner {
246 line-height: 0.75;
247 }
248 }
249
250 @media screen and (max-width: 640px) {
251 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
252 position: relative !important;
253 top: auto !important;
254 left: auto !important;
255 width: auto !important;
256 height: auto !important;
257 margin: 0 !important;
258 padding: 0 !important;
259 border: none !important;
260 background: none !important;
261 }
262 }
263 @media screen and (min-width: 641px) {
264 #lightcase-case:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap {
265 padding: 30px;
266 overflow: auto;
267 -webkit-box-sizing: border-box;
268 -moz-box-sizing: border-box;
269 -o-box-sizing: border-box;
270 box-sizing: border-box;
271 }
272 }
273 @media screen and (max-width: 640px) {
274 #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p {
275 color: #aaa;
276 }
277 }
278 @media screen and (min-width: 641px) {
279 #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p {
280 color: #333;
281 }
282 }
283
284 #lightcase-case p.lightcase-error {
285 margin: 0;
286 font-size: 17px;
287 text-align: center;
288 white-space: nowrap;
289 overflow: hidden;
290 text-overflow: ellipsis;
291 color: #aaa;
292 }
293 @media screen and (max-width: 640px) {
294 #lightcase-case p.lightcase-error {
295 padding: 30px 0;
296 }
297 }
298 @media screen and (min-width: 641px) {
299 #lightcase-case p.lightcase-error {
300 padding: 0;
301 }
302 }
303
304 .lightcase-isMobileDevice .lightcase-open body {
305 max-width: 100%;
306 max-height: 100%;
307 overflow: hidden;
308 }
309 @media screen and (max-width: 640px) {
310 .lightcase-open body {
311 padding: 55px 0 70px 0;
312 }
313 .lightcase-open body > *:not([id*='lightcase-']) {
314 position: fixed !important;
315 top: -9999px !important;
316 width: 0 !important;
317 height: 0 !important;
318 overflow: hidden !important;
319 }
320 }
321
322 #lightcase-info {
323 position: absolute;
324 padding-top: 15px;
325 }
326
327 #lightcase-info #lightcase-title,
328 #lightcase-info #lightcase-caption {
329 margin: 0;
330 padding: 0;
331 line-height: 1.5;
332 font-weight: normal;
333 text-overflow: ellipsis;
334 }
335 #lightcase-info #lightcase-title {
336 font-size: 17px;
337 color: #aaa;
338 }
339 @media screen and (max-width: 640px) {
340 #lightcase-info #lightcase-title {
341 position: fixed;
342 top: 10px;
343 left: 0;
344 max-width: 87.5%;
345 padding: 5px 15px;
346 background: #333;
347 }
348 }
349 #lightcase-info #lightcase-caption {
350 clear: both;
351 font-size: 13px;
352 color: #aaa;
353 }
354 #lightcase-info #lightcase-sequenceInfo {
355 font-size: 11px;
356 color: #aaa;
357 }
358 @media screen and (max-width: 640px) {
359 .lightcase-fullScreenMode #lightcase-info {
360 padding-left: 15px;
361 padding-right: 15px;
362 }
363 #lightcase-case:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info {
364 position: static;
365 }
366 }
367
368 #lightcase-loading {
369 position: fixed;
370 z-index: 9999;
371 text-align: center;
372 text-shadow: none;
373 position: fixed;
374 z-index: 2001;
375 top: 50%;
376 left: 50%;
377 margin-top: -0.5em;
378 margin-left: -0.5em;
379 opacity: 1;
380 -moz-transform-origin: 50% 53%;
381 content: '';
382 }
383 #lightcase-loading, #lightcase-loading:focus {
384 text-decoration: none;
385 color: #fff;
386 -webkit-tap-highlight-color: transparent;
387 -webkit-transition: color, opacity, ease-in-out 0.25s;
388 -moz-transition: color, opacity, ease-in-out 0.25s;
389 -o-transition: color, opacity, ease-in-out 0.25s;
390 transition: color, opacity, ease-in-out 0.25s;
391 }
392
393 #lightcase-loading > span {
394 display: inline-block;
395 text-indent: -9999px;
396 }
397
398 #lightcase-nav a[class*='lightcase-icon-'] {
399 position: fixed;
400 z-index: 9999;
401 /*width: 1.123em;*/
402 width: 1em;
403 height: auto;
404 font-size: 38px;
405 /*line-height: 1;*/
406 line-height: 1em;
407 text-align: center;
408 text-shadow: none;
409 outline: none;
410 cursor: pointer;
411 }
412
413 #lightcase-nav a[class*='lightcase-icon-'], #lightcase-nav a[class*='lightcase-icon-']:focus {
414 text-decoration: none;
415 color: rgba(255, 255, 255, 0.6);
416 -webkit-tap-highlight-color: transparent;
417 -webkit-transition: color, opacity, ease-in-out 0.25s;
418 -moz-transition: color, opacity, ease-in-out 0.25s;
419 -o-transition: color, opacity, ease-in-out 0.25s;
420 transition: color, opacity, ease-in-out 0.25s;
421 }
422 #lightcase-nav a[class*='lightcase-icon-'] > span {
423 display: inline-block;
424 text-indent: -9999px;
425 }
426 #lightcase-nav a[class*='lightcase-icon-']:hover {
427 color: white;
428 text-shadow: 0 0 15px white;
429 }
430 .lightcase-isMobileDevice #lightcase-nav a[class*='lightcase-icon-']:hover {
431 color: #aaa;
432 text-shadow: none;
433 }
434 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-prev {
435 left: 15px;
436 }
437 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-next {
438 right: 15px;
439 }
440 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-pause, #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-play {
441 left: 50%;
442 margin-left: -0.5em;
443 }
444 @media screen and (min-width: 641px) {
445 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-pause, #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-play {
446 opacity: 0;
447 }
448 }
449 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close {
450 top: 15px;
451 right: 15px;
452 bottom: auto;
453 margin: 0;
454 opacity: 0;
455 outline: none;
456 }
457 @media screen and (max-width: 640px) {
458 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close {
459 position: absolute;
460 }
461 }
462 @media screen and (min-width: 641px) {
463 #lightcase-nav a[class*='lightcase-icon-'].lightcase-icon-close {
464 position: fixed;
465 }
466 }
467 @media screen and (max-width: 640px) {
468 #lightcase-nav a[class*='lightcase-icon-'] {
469 bottom: 15px;
470 font-size: 24px;
471 }
472 }
473 @media screen and (min-width: 641px) {
474 #lightcase-nav a[class*='lightcase-icon-'] {
475 bottom: 50%;
476 margin-bottom: -0.5em;
477 }
478 #lightcase-nav a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ #lightcase-nav a[class*='lightcase-icon-'] {
479 opacity: 1;
480 }
481 }
482
483 #lightcase-overlay {
484 display: none;
485 width: 100%;
486 min-height: 100%;
487 position: fixed;
488 z-index: 2000;
489 top: -9999px;
490 bottom: -9999px;
491 left: 0;
492 background: #333;
493 }
494 @media screen and (max-width: 640px) {
495 #lightcase-overlay {
496 opacity: 1 !important;
497 }
498 }