PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.27
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.27
3.37 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 All 142 releases
photonic / include / css / front-end / core / photonic.css

photonic.css in Photonic Gallery & Lightbox for Flickr, SmugMug & Others 2.27, at include/css/front-end/core/photonic.css

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