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

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