PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.24
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.24
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 / css / photonic.css

photonic.css in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 2.24, at include/css/photonic.css

515 lines 18.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Social Media, Buy Button*/
2 #photonic-social { padding: 0.2em; border: none; border-radius: 4px;background: #111;background: rgba(0, 0, 0, 0.5); display: inline-block; }
3 #photonic-social a { width: 28px; height: 28px; display: block; float: left; color: inherit; text-decoration: none; margin: 0 0.2em; cursor: pointer; }
4 a.photonic-buy-link { width: 28px; height: 28px; display: inline-block; color: inherit; text-decoration: none; margin: 0 0.4em; cursor: pointer; vertical-align: middle; }
5 #photonic-social div, .photonic-buy-link .icon-buy { font-size: 28px; float: left; position: relative; width: 100%; height: 100%; background-image: url('../images/Icons.svg?v=2.19'); background-color: #bbb; background-size: 100%; background-repeat: no-repeat; border-radius: 3px; }
6 #photonic-social a:hover div { background-color: #6af; }
7 #photonic-social a:first-child {margin-left: 0; }
8 #photonic-social a:last-child {margin-right: 0; }
9 #photonic-social .icon-facebook { background-position: 0 0; }
10 #photonic-social .icon-twitter { background-position: 0 -112px; }
11 #photonic-social .icon-pinterest { background-position: 0 -56px; }
12 .photonic-buy-link .icon-buy { background-position: 0 -252px; background-color: transparent; }
13 #photonic-social .icon-twitter:before, #photonic-social .icon-facebook:before, #photonic-social .icon-twitter:after, #photonic-social .icon-facebook:after { content: '' !important; }
14
15 /* Lightboxes */
16 #swipebox-arrows {text-align: center; }
17 #swipebox-arrows #photonic-social { background: none; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
18
19 #cboxContent #photonic-social { position: absolute; top: 14px; left: 14px; }
20
21 .fancybox-title #photonic-social {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
22 .fancybox-title-inside-wrap { margin-top: 10px !important; padding-top: 0 !important; }
23 .fancybox-title-over-wrap { display: block; width: 100%; box-sizing: border-box; }
24
25 #pp_full_res #photonic-social { position: absolute; top: 14px; left: 28px;}
26
27 #imagelightbox-overlay #photonic-social { position: absolute; top: 2.5em; left: 2.5em; }
28
29 .lg-toolbar #photonic-social { float: right; margin-top: 8px; background: transparent; }
30
31 .photonic-featherlight #photonic-social { position: absolute; top: 5%; left: 5%; }
32 .fancybox-caption #photonic-social { float: right; }
33
34 #lightcase-content { background: transparent; }
35 .fancybox-slide--html .fancybox-content { overflow: hidden; padding: 0; }
36 @media screen and (min-width: 641px) {
37 #lightcase-case:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 0; overflow: hidden; }
38 }
39 video.photonic { margin: 0; padding: 0; }
40
41
42 div.photonic-slideshow {
43 width: 100%;
44 clear: both;
45 display: -ms-flexbox;
46
47 display: -webkit-box;
48 display: -moz-box;
49 -webkit-box-orient: horizontal;
50 -moz-box-orient: horizontal;
51
52 display: -webkit-flex;
53 display: -moz-flex;
54 display: -ms-flex;
55 display: flex;
56 }
57 div.photonic-slideshow .lSSlideOuter { width: 100%; }
58 .photonic-slideshow-adapt-height-width img { width: 100%; }
59 .lSAction > .lSNext, .lSAction > .lSPrev { color: transparent; }
60 .lightSlider li {position: relative; }
61 .photonic-slide-center .lightSlider li { text-align: center; }
62 .lSSlideOuter .lSPager.lSGallery { margin-bottom: 5px; margin-top: 0 !important; }
63 .photonic-slideshow-img { display: none; }
64 .lSSlideOuter .photonic-slideshow-img { display: list-item; }
65 ul.slideshow-grid-panel { float: left; width: 100% !important; position: relative; display: inline-block; }
66 li.slideshow-grid { width: 100% !important; }
67 li.slideshow-grid li { display: inline-block; }
68 .slideshow-grid-panel a { display: inline-block; }
69
70 .photonic-standard-layout {
71 float: left;
72 width: 100%;
73 margin: 0;
74 padding: 0;
75
76 display: -ms-flexbox;
77 display: -webkit-box;
78 display: -moz-box;
79 -webkit-box-orient: horizontal;
80 -moz-box-orient: horizontal;
81
82 display: -webkit-flex;
83 display: -moz-flex;
84 display: -ms-flex;
85 display: flex;
86
87 -webkit-flex-wrap: wrap;
88 -ms-flex-wrap: wrap;
89 flex-wrap: wrap;
90 }
91 .photonic-standard-layout .photonic-level-1 { float: left; position: relative; }
92 .photonic-standard-layout .photonic-level-1:after { content: ''; visibility: hidden; display: block; height: 0; clear: both; }
93
94 .photonic-gallery-1c { width: 98%; }
95 .photonic-gallery-2c { width: 49%; }
96 .photonic-gallery-3c { width: 32%; }
97 .photonic-gallery-4c { width: 24%; }
98 .photonic-gallery-5c { width: 19%; }
99 .photonic-gallery-6c { width: 16%; }
100 .photonic-gallery-7c { width: 14%; }
101 .photonic-gallery-8c { width: 12%; }
102 .photonic-gallery-9c { width: 10.5%; }
103 .photonic-gallery-10c { width: 9.5%; }
104 .photonic-gallery-11c { width: 8.6%; }
105 .photonic-gallery-12c { width: 8%; }
106 .photonic-gallery-13c { width: 7.2%; }
107 .photonic-gallery-14c { width: 6.8%; }
108 .photonic-gallery-15c { width: 6.5%; }
109 .photonic-gallery-16c { width: 6.2%; }
110 .photonic-gallery-17c { width: 5.8%; }
111 .photonic-gallery-18c { width: 5.5%; }
112 .photonic-gallery-19c { width: 5.2%; }
113 .photonic-gallery-20c { width: 4.95%; }
114
115 .photonic-tree li { list-style: none; }
116
117 .photonic-panel ul { padding: 0; margin: 10px auto; }
118 .photonic-panel { display: none; text-align: center; width: 800px; z-index: 5; padding: 10px; border-radius:10px; }
119
120 .photonic-thumb {
121 /*display: inline-block;*/
122 display: none;
123 list-style: none;
124 vertical-align: top;
125 text-align: center;
126 background: transparent !important;
127 line-height: 1.1em;
128 zoom: 1;
129 box-sizing: border-box;
130 padding: 5px;
131 }
132
133 .slideshow-grid-panel .photonic-level-1 { display: inline-block; }
134
135 .photonic-masonry-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; }
136 .photonic-masonry-layout .photonic-thumb { width: 100%; display: block; }
137 .photonic-ie .photonic-masonry-layout .photonic-thumb { display: inline-block; }
138 .photonic-masonry-layout .photonic-thumb a { padding: 0; width: 100%; }
139 .photonic-masonry-layout.title-display-below .photonic-title { padding: 2px; overflow: hidden; font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em;}
140 .photonic-masonry-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; display: none; }
141 .photonic-stream .photonic-masonry-layout .photonic-thumb { margin: 0; position: relative; }
142 .photonic-masonry-layout { -moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0; }
143
144 .photonic-mosaic-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; overflow: hidden; }
145 .photonic-mosaic-layout .photonic-thumb { display: inline-block; margin: 0; position: absolute; padding: 0; }
146 .photonic-mosaic-layout .photonic-thumb a { padding: 0; width: 100%; height: 100%; }
147 .photonic-mosaic-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; display: none; }
148 .photonic-stream .photonic-mosaic-layout .photonic-thumb { margin: 0; }
149
150 .photonic-random-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; overflow: hidden; }
151 .photonic-random-layout .photonic-thumb { display: inline-block; margin: 0; position: relative; padding: 2px; float: left; }
152 .photonic-random-layout .photonic-thumb a { box-sizing: border-box; padding: 0; width: 100%; height: 100%; color: transparent; }
153 .photonic-random-layout .photonic-thumb a img { width: 100% !important; height: 100% !important; padding: 0; display: none; }
154 .photonic-stream .photonic-random-layout .photonic-thumb { margin: 0; }
155
156 a.photonic-level-3-expand {
157 float: right;
158 text-decoration: none;
159 -webkit-box-shadow: none;
160 -moz-box-shadow: none;
161 box-shadow: none;
162 width: 1.5em;
163 height: 1.5em;
164 border-radius: 50%;
165 background: #fff url('../images/Icons.svg?v=2.19') no-repeat;
166 background-size: 100%;
167 }
168 a.photonic-level-3-expand-plus {
169 background-position: 0 -7.5em;
170 }
171 a.photonic-level-3-expand-down {
172 background-position: 0 -9em;
173 }
174 a.photonic-level-3-expand-up {
175 background-position: 0 -10.5em;
176 }
177 a.photonic-level-3-expand:hover {
178 text-decoration: none;
179 background-color: #6af;
180 }
181
182 .photonic-stream { clear: both; display: inline-block; width: 100%; margin: 1.6em 0;}
183
184 .photonic-stream img.circle {
185 border-radius: 50%;
186 }
187
188 .photonic-title-info { position: relative; }
189 .title-display-hover-slidedown-show .photonic-title-info { margin-top: -100%; }
190 .title-display-hover-slideup-show .photonic-thumb a img, .title-display-slideup-stick .photonic-thumb a img { padding: 0; }
191 .title-display-hover-slideup-show a .photonic-title, .photonic-slideshow.title-display-hover-slideup-show li .photonic-title,
192 .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title {
193 background: #111;
194 background: rgba(33, 33, 33, 0.8);
195 display: none;
196 width: 100%;
197 font-size: 0.7em;
198 color: #ddd;
199 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
200 position: absolute;
201 padding: 3px;
202 text-align: left;
203 box-sizing: border-box;
204 }
205
206 .title-display-hover-slideup-show a .photonic-title, .photonic-slideshow.title-display-hover-slideup-show li .photonic-title, .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { bottom: 0; }
207 .photonic-slideshow.title-display-hover-slideup-show li .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { font-size: 1em; }
208 .photonic-standard-layout.title-display-slideup-stick a .photonic-title, .slideshow-grid-panel.title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { display: block; }
209 .photonic-slideshow.title-display-below li .photonic-title {
210 background-color: rgba(0, 0, 0, 0.75);
211 position: absolute;
212 bottom: 0;
213 left: 0;
214 padding: 20px;
215 color: white;
216 width: 100%;
217 }
218
219 .photonic-thumbnail-effect-opacity .photonic-thumb img { filter: alpha(opacity=75); opacity: 0.75; }
220 .photonic-thumbnail-effect-opacity .photonic-thumb a:hover img { filter: alpha(opacity=100); opacity: 1; }
221
222 .photonic-thumbnail-effect-zoom a img { -webkit-transition: transform 2s ease; -moz-transition: transform 2s ease; -ms-transition: transform 2s ease; -o-transition: transform 2s ease; transition: transform 2s ease; }
223 .photonic-thumbnail-effect-zoom a:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
224 .photonic-thumbnail-effect-zoom a, .photonic-thumbnail-effect-zoom a:hover { overflow: hidden; }
225
226 .photonic-thumb a img { padding: 5px; display: inline-block; }
227 .photonic-thumb a { display: inline-block; text-align: center; text-decoration: none; font-size: 0.9em; vertical-align: middle; border: none; /*padding: 5px;*/ box-shadow: none; width: 100%; position: relative; }
228 .photonic-thumb a span { display: block; padding: 3px; width: 100%; }
229
230 .photonic-object-header { list-style: none; display: inline-block; width: 100%; text-align: left; border-width: 1px 0 1px 0; border-style: dotted; border-color: #888; padding: 0.5em 0; margin: 0.5em 0; }
231 .photonic-header-thumb { float: left; margin: 0 1em 0 0; }
232 .photonic-header-details { overflow: hidden; }
233 .photonic-header-title { font-size: 120%; font-weight: bold; display: block; text-decoration: none; }
234 .photonic-header-info { font-size: 90%; font-style: italic; }
235
236 .photonic-title-photo-count { font-size: 85%; font-style: italic; display: block; }
237
238 .photonic-loading {
239 position: fixed;
240 top: 50%;
241 left: 50%;
242 width: 100px;
243 height: 100px;
244 margin-top: -50px;
245 margin-left: -50px;
246 overflow: hidden;
247 z-index: 1100;
248 display: none;
249 background: #fff url(../images/loading.gif) no-repeat center;
250 }
251
252 .photonic-more-button, .photonic-more-button:visited,
253 .photonic-login-box a.auth-button, .photonic-login-box a.auth-button:visited {
254 padding: 10px 15px;
255 display: inline-block;
256 text-align: center;
257 text-decoration: none;
258 min-width: 120px;
259 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
260 font-size: 14px;
261 margin: 20px 0 0;
262 background: #6af;
263 background: linear-gradient(#336699 20%, #224477 100%);
264 color: #fff;
265 float: none;
266 border-radius: 3px;
267 }
268
269 .photonic-more-button:hover, .photonic-more-button:active, .photonic-more-button:focus,
270 .photonic-login-box a.auth-button:hover, .photonic-login-box a.auth-button:active, .photonic-login-box a.auth-button:focus {
271 text-decoration: none;
272 color: #fff;
273 background: #48d;
274 background: linear-gradient(#224477 20%, #336699 100%);
275 }
276
277 .photonic-login-box {
278 border: 1px solid #888;
279 padding: 10px;
280 border-radius: 5px;
281 display: block;
282 clear: both;
283 }
284
285 .photonic-auth-button, .photonic-more-button {
286 margin: 0 auto;
287 text-align: center;
288 }
289 .photonic-more-link-container {
290 text-align: right;
291 display: inline-block;
292 width: 100%;
293 }
294
295 .photonic-panel-header { top: 0; left: 0; padding: 10px 0; text-align: left; font-weight: bold; border-bottom: 5px solid #787878; color: #787878; position: relative; display: table; width: 100%; border-top: none; margin: 0; }
296 .photonic-panel-header div { vertical-align: middle; margin: 0 5px; }
297 .photonic-panel-header a { text-decoration: none; font-size: 100%; }
298
299 .photonic-password-prompter {
300 display: none;
301 }
302 .photonic-password-prompter {
303 background: transparent;
304 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
305 font-size: 14px;
306 width: 100%;
307 height: 100%;
308 position: fixed;
309 top: 0;
310 left: 0;
311 z-index: 1000 !important ;
312 }
313 .photonic-password-prompter-content {
314 width: 400px;
315 position: relative;
316 margin: -150px auto 0;
317 top: 50%;
318 background: #fff;
319 border: 1px solid #ccc;
320 border-radius: 3px;
321 }
322 .photonic-password-prompter h3 {
323 background: #6af;
324 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
325 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
326 color: #fff;
327 font-size: 16px;
328 font-weight: normal;
329 padding: 0.5em;
330 margin: 0;
331 display: inline-block;
332 width: 100%;
333 }
334 .photonic-password-prompter h3 .title {
335 float: left;
336 }
337 .photonic-password-prompter h3 .close {
338 float: right;
339 padding: 0;
340 margin: 0;
341 line-height: inherit;
342 font-size: inherit;
343 background: none;
344 }
345 .photonic-prompt-body {
346 padding: 1em;
347 text-align: left;
348 }
349 .photonic-prompt-body input[type="password"] {
350 width: 100%;
351 padding: 0 0.5em;
352 }
353 .photonic-password-submit {
354 background: #6af;
355 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
356 display: inline-block;
357 box-sizing: border-box;
358 margin-top: 0.5em;
359 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
360 font-size: 14px;
361 padding: 0.2em 1em;
362 line-height: 24px;
363 text-transform: none;
364 font-weight: normal;
365 }
366
367 #TB_overlay { z-index: 1050 !important; }
368 #TB_window { z-index: 1060 !important; }
369
370 #fancybox-right, #fancybox-left { width: 15%; }
371 #fancybox-wrap, #fancybox-content { box-sizing: content-box; }
372
373 .fancybox-inner { overflow: auto !important; }
374 .photonic-fancybox .fancybox-inner { overflow: hidden !important; }
375
376 .photonicModalOverlay {
377 width: 100%;
378 height: 100%;
379 top: 0;
380 left: 0;
381 position: fixed;
382 background: #333;
383 background: rgba(33, 33, 33, 0.8);
384 text-align: center;
385 }
386
387 .photonicModalOverlayScrollable {
388 display: inline-block;
389 width: 100%;
390 text-align: center;
391 }
392
393 .photonicModal { margin: 0 auto; }
394
395 .photonicModal.photonic-panel { border-radius: 0 0 10px 10px; }
396
397 a.photonicModalClose {
398 position: absolute;
399 float: right;
400 border: none;
401 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
402 font-size: 30px;
403 width: 30px;
404 height: 30px;
405 line-height: 30px;
406 color: #bbb;
407 top: 0;
408 z-index: 10000;
409 }
410
411 .photonic-icon {
412 background-image: url("../images/Icons.svg?v=2.19");
413 background-size: 100%;
414 width: 96px;
415 height: 96px;
416 display: block;
417 position: relative;
418 }
419 .photonic-error-icon { background-position: 0 -768px; }
420 .photonic-error .photonic-icon { float: left; }
421 .photonic-error .photonic-message { margin-left: 100px; display: block; }
422 .photonic-error { display: block; width: 100%; box-sizing: border-box; position: relative; padding: 1em 0; }
423
424 .photonic-html5-external { display: none; }
425
426 .pswp__item .photonic-video { text-align: center; position: relative; top: 50%; transform: translateY(-50%); }
427
428 .mfp-inline-holder .mfp-content { text-align: center; }
429 .mfp-close-btn-in .mfp-inline-holder .mfp-close { color: #eee; }
430 .mfp-content #photonic-social { position: absolute; top: 45px; left: 5px; }
431
432 .photonic-stream.alignwide { }
433 .photonic-stream.alignfull { }
434
435 .photonic-helper {
436 width: 100%;
437 box-sizing: border-box;
438 }
439
440 [data-photonic-stream-provider='flickr'] [data-photonic-media-type='video']:hover:before,
441 [data-photonic-stream-provider='smug'] [data-photonic-media-type='video']:hover:before,
442 [data-photonic-stream-provider='zenfolio'] [data-photonic-media-type='video']:hover:before,
443 [data-photonic-stream-provider='instagram'] [data-photonic-media-type='video']:hover:before {
444 content: '';
445 background-image: url("../images/Icons.svg?v=2.19");
446 background-size: 100%;
447 -ms-background-position-y: -480px;
448 background-position-y: -480px;
449 width: 48px;
450 height: 48px;
451 display: block;
452 position: absolute;
453 top: 50%;
454 left: 50%;
455 margin-top: -24px;
456 margin-left: -24px;
457 z-index: 1;
458 }
459
460 .photonic-tooltip-container {
461 transform: translateZ(0);
462 position: absolute;
463 max-width: 300px;
464 padding: 8px 10px 10px;
465 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
466 font-size: 14px;
467 font-weight: normal;
468 -webkit-box-shadow: 0 0 5px #aaa;
469 box-shadow: 0 0 5px #aaa;
470 background: #2d2d2d;
471 color: #eee;
472 border-radius: 4px;
473 opacity: 1;
474 z-index: 9999;
475 }
476 .photonic-tooltip-container[class*=" tooltip-"] {
477 -webkit-animation: tooltip-anim 0.8s;
478 -moz-animation: tooltip-anim 0.8s;
479 -o-animation: tooltip-anim 0.8s;
480 animation: tooltip-anim 0.8s;
481 }
482 .photonic-tooltip-container::after {
483 position: absolute;
484 display: block;
485 content: "";
486 }
487 .photonic-tooltip-container.tooltip-left::after {
488 right: -8px;
489 top: 50%;
490 transform: translateY(-50%);
491 border-style: solid;
492 border-width: 6px 0 6px 8px;
493 border-color: transparent transparent transparent #2d2d2d;
494 }
495 .photonic-tooltip-container.tooltip-right::after {
496 left: -8px;
497 top: 50%;
498 transform: translateY(-50%);
499 border-style: solid;
500 border-width: 6px 8px 6px 0;
501 border-color: transparent #2d2d2d transparent transparent;
502 }
503 .photonic-tooltip-container.tooltip-center::after {
504 top: -8px;
505 left: 50%;
506 transform: translateX(-50%);
507 border-style: solid;
508 border-width: 0 6px 8px 6px;
509 border-color: transparent transparent #2d2d2d transparent;
510 }
511 .photonic-tooltip-container.no-display {
512 display: none;
513 }
514
515