PluginProbe
Photonic Gallery & Lightbox for Flickr, SmugMug & Others / 2.31
Photonic Gallery & Lightbox for Flickr, SmugMug & Others v2.31
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 / front-end / core / photonic.css

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

519 lines 18.5 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 .photonic-show-gallery-button, .photonic-show-gallery-button:visited {
256 padding: 10px 15px;
257 display: inline-block;
258 text-align: center;
259 text-decoration: none;
260 min-width: 120px;
261 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
262 font-size: 14px;
263 margin: 20px 0 0;
264 background: #6af;
265 background: linear-gradient(#336699 20%, #224477 100%);
266 color: #fff;
267 float: none;
268 border-radius: 3px;
269 }
270
271 .photonic-more-button:hover, .photonic-more-button:active, .photonic-more-button:focus,
272 .photonic-login-box a.auth-button:hover, .photonic-login-box a.auth-button:active, .photonic-login-box a.auth-button:focus,
273 .photonic-show-gallery-button:hover, .photonic-show-gallery-button:active, .photonic-show-gallery-button:focus {
274 text-decoration: none;
275 color: #fff;
276 background: #48d;
277 background: linear-gradient(#224477 20%, #336699 100%);
278 }
279
280 .photonic-login-box {
281 border: 1px solid #888;
282 padding: 10px;
283 border-radius: 5px;
284 display: block;
285 clear: both;
286 }
287
288 .photonic-auth-button, .photonic-more-button {
289 margin: 0 auto;
290 text-align: center;
291 }
292 .photonic-more-link-container {
293 text-align: right;
294 display: inline-block;
295 width: 100%;
296 }
297
298 .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; }
299 .photonic-panel-header div { vertical-align: middle; margin: 0 5px; }
300 .photonic-panel-header a { text-decoration: none; font-size: 100%; }
301
302 .photonic-password-prompter {
303 display: none;
304 }
305 .photonic-password-prompter {
306 background: transparent;
307 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
308 font-size: 14px;
309 width: 100%;
310 height: 100%;
311 position: fixed;
312 top: 0;
313 left: 0;
314 z-index: 1000 !important ;
315 }
316 .photonic-password-prompter-content {
317 width: 400px;
318 position: relative;
319 margin: -150px auto 0;
320 top: 50%;
321 background: #fff;
322 border: 1px solid #ccc;
323 border-radius: 3px;
324 }
325 .photonic-password-prompter h3 {
326 background: #6af;
327 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
328 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
329 color: #fff;
330 font-size: 16px;
331 font-weight: normal;
332 padding: 0.5em;
333 margin: 0;
334 display: inline-block;
335 width: 100%;
336 }
337 .photonic-password-prompter h3 .title {
338 float: left;
339 }
340 .photonic-password-prompter h3 .close {
341 float: right;
342 padding: 0;
343 margin: 0;
344 line-height: inherit;
345 font-size: inherit;
346 background: none;
347 }
348 .photonic-prompt-body {
349 padding: 1em;
350 text-align: left;
351 }
352 .photonic-prompt-body input[type="password"] {
353 width: 100%;
354 padding: 0 0.5em;
355 }
356 .photonic-password-submit {
357 background: #6af;
358 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
359 display: inline-block;
360 box-sizing: border-box;
361 margin-top: 0.5em;
362 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
363 font-size: 14px;
364 padding: 0.2em 1em;
365 line-height: 24px;
366 text-transform: none;
367 font-weight: normal;
368 }
369
370 #TB_overlay { z-index: 1050 !important; }
371 #TB_window { z-index: 1060 !important; }
372
373 #fancybox-right, #fancybox-left { width: 15%; }
374 #fancybox-wrap, #fancybox-content { box-sizing: content-box; }
375
376 .fancybox-inner { overflow: auto !important; }
377 .photonic-fancybox .fancybox-inner { overflow: hidden !important; }
378
379 .photonicModalOverlay {
380 width: 100%;
381 height: 100%;
382 top: 0;
383 left: 0;
384 position: fixed;
385 background: #333;
386 background: rgba(33, 33, 33, 0.8);
387 text-align: center;
388 }
389
390 .photonicModalOverlayScrollable {
391 display: inline-block;
392 width: 100%;
393 text-align: center;
394 }
395
396 .photonicModal { margin: 0 auto; }
397
398 .photonicModal.photonic-panel { border-radius: 0 0 10px 10px; }
399
400 a.photonicModalClose {
401 position: absolute;
402 float: right;
403 border: none;
404 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
405 font-size: 30px;
406 width: 30px;
407 height: 30px;
408 line-height: 30px;
409 color: #bbb;
410 top: 0;
411 z-index: 10000;
412 }
413
414 .photonic-icon {
415 background-image: url("../../../images/Icons.svg?v=2.19");
416 background-size: 100%;
417 width: 96px;
418 height: 96px;
419 display: block;
420 position: relative;
421 }
422 .photonic-error-icon { background-position: 0 -768px; }
423 .photonic-error .photonic-icon { float: left; }
424 .photonic-error .photonic-message { margin-left: 100px; display: block; }
425 .photonic-error { display: block; width: 100%; box-sizing: border-box; position: relative; padding: 1em 0; }
426
427 .photonic-html5-external { display: none; }
428
429 .pswp__item .photonic-video { text-align: center; position: relative; top: 50%; transform: translateY(-50%); }
430
431 .mfp-inline-holder .mfp-content { text-align: center; }
432 .mfp-close-btn-in .mfp-inline-holder .mfp-close { color: #eee; }
433 .mfp-content #photonic-social { position: absolute; top: 45px; left: 5px; }
434
435 .photonic-stream.alignwide { }
436 .photonic-stream.alignfull { }
437
438 .photonic-helper {
439 width: 100%;
440 box-sizing: border-box;
441 }
442
443 [data-photonic-stream-provider='flickr'] [data-photonic-media-type='video']:hover:before,
444 [data-photonic-stream-provider='smug'] [data-photonic-media-type='video']:hover:before,
445 [data-photonic-stream-provider='zenfolio'] [data-photonic-media-type='video']:hover:before,
446 [data-photonic-stream-provider='instagram'] [data-photonic-media-type='video']:hover:before {
447 content: '';
448 background-image: url("../../../images/Icons.svg?v=2.19");
449 background-size: 100%;
450 -ms-background-position-y: -480px;
451 background-position-y: -480px;
452 width: 48px;
453 height: 48px;
454 display: block;
455 position: absolute;
456 top: 50%;
457 left: 50%;
458 margin-top: -24px;
459 margin-left: -24px;
460 z-index: 1;
461 }
462
463 .photonic-tooltip-container {
464 transform: translateZ(0);
465 position: absolute;
466 max-width: 300px;
467 padding: 8px 10px 10px;
468 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
469 font-size: 14px;
470 font-weight: normal;
471 -webkit-box-shadow: 0 0 5px #aaa;
472 box-shadow: 0 0 5px #aaa;
473 background: #2d2d2d;
474 color: #eee;
475 border-radius: 4px;
476 opacity: 1;
477 z-index: 9999;
478 }
479 .photonic-tooltip-container[class*=" tooltip-"] {
480 -webkit-animation: tooltip-anim 0.8s;
481 -moz-animation: tooltip-anim 0.8s;
482 -o-animation: tooltip-anim 0.8s;
483 animation: tooltip-anim 0.8s;
484 }
485 .photonic-tooltip-container::after {
486 position: absolute;
487 display: block;
488 content: "";
489 }
490 .photonic-tooltip-container.tooltip-left::after {
491 right: -8px;
492 top: 50%;
493 transform: translateY(-50%);
494 border-style: solid;
495 border-width: 6px 0 6px 8px;
496 border-color: transparent transparent transparent #2d2d2d;
497 }
498 .photonic-tooltip-container.tooltip-right::after {
499 left: -8px;
500 top: 50%;
501 transform: translateY(-50%);
502 border-style: solid;
503 border-width: 6px 8px 6px 0;
504 border-color: transparent #2d2d2d transparent transparent;
505 }
506 .photonic-tooltip-container.tooltip-center::after {
507 top: -8px;
508 left: 50%;
509 transform: translateX(-50%);
510 border-style: solid;
511 border-width: 0 6px 8px 6px;
512 border-color: transparent transparent #2d2d2d transparent;
513 }
514 .photonic-tooltip-container.no-display {
515 display: none;
516 }
517
518 .photonic-show-gallery-button { display: block; margin: 1rem 0; border-width: 0; }
519