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

588 lines 23.0 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=3.04'); 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 #baguetteBox-overlay #photonic-social { margin-top: 1rem; margin-left: 1rem; }
17
18 #bp_container #photonic-social { top: 10px; right: 60px; }
19
20 .ginner-container #photonic-social { top: 1rem; left: 1rem; display: block; position: absolute; }
21
22 .lg-toolbar #photonic-social { float: right; margin-top: 8px; background: transparent; }
23
24 #spotlight #photonic-social { width: 120px; padding: 0.6em; opacity: 1; }
25 #spotlight #photonic-social a:hover div { opacity: 1; }
26
27 #cboxContent #photonic-social { position: absolute; top: 14px; left: 14px; }
28 #cboxContent button { padding: 0; }
29
30 .fancybox-title #photonic-social {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
31 .fancybox-title-inside-wrap { margin-top: 10px !important; padding-top: 0 !important; }
32 .fancybox-title-over-wrap { display: block; width: 100%; box-sizing: border-box; }
33 .fancybox-caption #photonic-social { float: right; }
34 .fancybox-toolbar #photonic-social { margin: auto 0; height: 44px; padding: 0 8px; border-radius: 0; background: rgba(30,30,30,.6); }
35 .fancybox-toolbar #photonic-social a { margin: 8px 0.2em; }
36 .fancybox-slide--html .fancybox-content { overflow: hidden; padding: 0; }
37
38 #fancybox-right, #fancybox-left { width: 15%; }
39 #fancybox-wrap, #fancybox-content { box-sizing: content-box; }
40
41 .fancybox-inner { overflow: auto !important; }
42 .photonic-fancybox .fancybox-inner { overflow: hidden !important; }
43
44 #pp_full_res #photonic-social { position: absolute; top: 14px; left: 28px;}
45
46 #imagelightbox-overlay #photonic-social { position: absolute; top: 2.5em; left: 2.5em; }
47
48 .photonic-featherlight #photonic-social { position: absolute; top: 5%; left: 5%; }
49
50 #lightcase-content { background: transparent; }
51 @media screen and (min-width: 641px) {
52 #lightcase-case:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 0; overflow: hidden; }
53 }
54
55 #swipebox-arrows {text-align: center; }
56 #swipebox-arrows #photonic-social { background: none; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
57
58 #TB_overlay { z-index: 1050 !important; }
59 #TB_window { z-index: 1060 !important; }
60
61 video.photonic { margin: 0; padding: 0; }
62
63 .photonic-slideshow-adapt-height-width img { width: 100%; vertical-align: middle; }
64 .photonic-slideshow-side-white li img { /*height: 100%;*/ width: auto; vertical-align: middle; }
65
66 .modal-gallery a { display: inline-block; }
67
68 .photonic-standard-layout {
69 width: 100%;
70 margin: 0;
71 padding: 0;
72
73 display: flex;
74 flex-wrap: wrap;
75 }
76 .photonic-standard-layout .photonic-level-1 { float: left; position: relative; }
77 .photonic-standard-layout .photonic-level-1:after { content: ''; visibility: hidden; display: block; height: 0; clear: both; }
78
79 .photonic-gallery-1c .photonic-thumb { width: 98%; }
80 .photonic-gallery-2c .photonic-thumb { width: 49%; }
81 .photonic-gallery-3c .photonic-thumb { width: 32%; }
82 .photonic-gallery-4c .photonic-thumb { width: 24%; }
83 .photonic-gallery-5c .photonic-thumb { width: 19%; }
84 .photonic-gallery-6c .photonic-thumb { width: 16%; }
85 .photonic-gallery-7c .photonic-thumb { width: 14%; }
86 .photonic-gallery-8c .photonic-thumb { width: 12%; }
87 .photonic-gallery-9c .photonic-thumb { width: 10.5%; }
88 .photonic-gallery-10c .photonic-thumb { width: 9.5%; }
89
90 .photonic-tree { margin: 0; padding: 0 }
91 .photonic-tree .photonic-tree .photonic-tree { margin-left: 1.5rem; }
92
93 .photonic-panel ul { padding: 0; margin: 10px auto; }
94 .photonic-panel { display: none; text-align: center; width: 800px; z-index: 5; padding: 10px; border-radius:10px; }
95
96 .sizes-missing .photonic-thumb { display: none; }
97
98 .photonic-thumb {
99 display: inline-block;
100 list-style: none;
101 vertical-align: top;
102 text-align: center;
103 background: transparent !important;
104 line-height: 1.1em;
105 zoom: 1;
106 box-sizing: border-box;
107 padding: 5px;
108 margin: 0;
109 }
110
111 .photonic-auto-padded .photonic-level-1 { padding: 5px 8px; }
112 .photonic-auto-padded .photonic-level-2 { margin: 10px; }
113 .modal-gallery .photonic-thumb { padding: 10px; box-sizing: border-box; }
114
115 .photonic-stream ul.photonic-level-1-container, .photonic-stream ul.photonic-level-2-container { padding: 0 !important; margin: 0 auto !important;}
116
117 .photonic-masonry-layout, .photonic-masonry-horizontal-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; column-gap: 0; }
118 .photonic-masonry-layout .photonic-thumb, .photonic-masonry-horizontal-layout .photonic-thumb { width: 100%; display: block; }
119 .photonic-masonry-layout .photonic-thumb a, .photonic-masonry-horizontal-layout .photonic-thumb a { padding: 0; width: 100%; }
120 .photonic-masonry-layout.title-display-below .photonic-title, .photonic-masonry-horizontal-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;}
121 .photonic-masonry-layout .photonic-thumb a img, .photonic-masonry-horizontal-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; /*display: none; */}
122 .photonic-stream .photonic-masonry-layout .photonic-thumb, .photonic-stream .photonic-masonry-horizontal-layout .photonic-thumb { margin: 0; position: relative; }
123
124 .photonic-mosaic-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; overflow: hidden; }
125 .photonic-mosaic-layout .photonic-thumb { display: inline-block; margin: 0; position: absolute; padding: 0; }
126 .photonic-mosaic-layout .photonic-thumb a { padding: 0; width: 100%; height: 100%; }
127 .photonic-mosaic-layout .photonic-thumb a img { width: 100%; height: 100%; padding: 0; /*display: none;*/ }
128 .photonic-stream .photonic-mosaic-layout .photonic-thumb { margin: 0; }
129
130 .photonic-random-layout { width: 100% !important; position: relative; clear: both; margin: 0 auto; overflow: hidden; }
131 .photonic-random-layout .photonic-thumb { margin: 0; position: relative; padding: 2px; float: left; }
132 .photonic-random-layout .photonic-thumb a { box-sizing: border-box; padding: 0; width: 100%; height: 100%; color: transparent; }
133 .photonic-random-layout .photonic-thumb a img { width: 100% !important; height: 100% !important; padding: 0; }
134 .photonic-stream .photonic-random-layout .photonic-thumb { margin: 0; }
135
136 .sizes-present .photonic-thumb img { visibility: hidden; }
137 .photonic-masonry-layout.sizes-missing .photonic-thumb a img, .photonic-masonry-horizontal-layout.sizes-missing .photonic-thumb a img, .photonic-mosaic-layout.sizes-missing .photonic-thumb a img, .photonic-random-layout.sizes-missing .photonic-thumb a img { display: none; }
138
139 /* The Justified Grid CSS is based on the solution provided here: https://stackoverflow.com/a/49107319 */
140 .photonic-random-layout.sizes-present { display: flex !important; flex-wrap: wrap }
141 .photonic-random-layout.sizes-present .photonic-thumb, .photonic-random-layout.sizes-present::after { --ratio: calc(var(--dw) / var(--dh)); flex-basis: calc(var(--ratio) * var(--tile-min-height)) }
142 .photonic-stream .photonic-random-layout.sizes-present .photonic-thumb { flex-grow:calc(var(--ratio) * 100) }
143 .photonic-random-layout.sizes-present .photonic-thumb a img { max-width:100%; }
144 .photonic-random-layout.sizes-present::after { --dw: 2; --dh: 1; content: ''; flex-grow: 1000000 }
145
146 .photonic-standard-layout:after, .photonic-random-layout:after, .photonic-mosaic-layout:after, .photonic-masonry-layout:after, .photonic-masonry-horizontal-layout:after {
147 clear: both;
148 display: table;
149 content: "";
150 }
151
152 a.photonic-level-3-expand {
153 float: right;
154 text-decoration: none;
155 box-shadow: none;
156 width: 1.5em;
157 height: 1.5em;
158 border-radius: 50%;
159 background: #fff url('../../../images/Icons.svg?v=3.04') no-repeat;
160 background-size: 100%;
161 }
162 a.photonic-level-3-expand-plus {
163 background-position: 0 -7.5em;
164 }
165 a.photonic-level-3-expand-down {
166 background-position: 0 -9em;
167 }
168 a.photonic-level-3-expand-up {
169 background-position: 0 -10.5em;
170 }
171 a.photonic-level-3-expand:hover {
172 text-decoration: none;
173 background-color: #6af;
174 }
175
176 .photonic-stream { clear: both; display: inline-block; width: 100%; margin: 1.6em 0;}
177
178 .photonic-stream img.circle {
179 border-radius: 50%;
180 }
181
182 .photonic-title-info { position: relative; }
183 .photonic-standard-layout .photonic-title-info { margin: 0 auto; }
184 .title-display-hover-slidedown-show .photonic-title-info { margin-top: -100%; }
185 .title-display-hover-slideup-show .photonic-thumb a img, .title-display-slideup-stick .photonic-thumb a img { padding: 0; }
186 .title-display-hover-slideup-show a .photonic-title, .photonic-slideshow.title-display-hover-slideup-show li .photonic-title,
187 .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title {
188 background: #111;
189 background: rgba(33, 33, 33, 0.8);
190 height: 0;
191 /*transition: height 0.4s, padding-top 0.4s, padding-bottom 0.4s;*/
192 transition: height 0.4s, padding 0.4s;
193 overflow: hidden;
194 width: 100%;
195 font-size: 0.7em;
196 color: #ddd;
197 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
198 position: absolute;
199 /*padding: 0;*/
200 padding: 0 3px;
201 text-align: left;
202 box-sizing: border-box;
203 }
204
205 .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; }
206 .photonic-slideshow.title-display-hover-slideup-show li .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { font-size: 1rem; }
207 .photonic-standard-layout.title-display-slideup-stick a .photonic-title, .modal-gallery.title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { display: block; }
208 .photonic-slideshow.title-display-below li .photonic-title {
209 background-color: rgba(0, 0, 0, 0.75);
210 position: absolute;
211 bottom: 0;
212 left: 0;
213 padding: 20px;
214 color: white;
215 width: 100%;
216 }
217
218 .title-display-hover-slideup-show a .photonic-title.slideup-show, .title-display-hover-slideup-show li .photonic-title.slideup-show, .title-display-slideup-stick a .photonic-title, .photonic-slideshow.title-display-slideup-stick li .photonic-title { height: auto; padding: 3px; }
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-thumb a img { padding: 5px; display: block; margin: 0 auto; }
224 .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; }
225 .photonic-thumb a span { display: block; padding: 3px; width: 100%; }
226
227 .photonic-thumbnail-effect-zoom a img { transition: transform 2s ease; }
228 .photonic-thumbnail-effect-zoom a:hover img { transform: scale(1.2); }
229 .photonic-thumbnail-effect-zoom a, .photonic-thumbnail-effect-zoom a:hover { overflow: hidden; }
230 .photonic-standard-layout.photonic-thumbnail-effect-zoom a, .photonic-standard-layout.photonic-thumbnail-effect-zoom a:hover { width: auto; }
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-thumb a.photonic-image-loading {
255 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cstyle%3E.spinner%7Btransform-origin:center;stroke:%2393BFEC;fill:%2393BFEC;animation:spinner_irSm .75s infinite linear%7D@keyframes spinner_irSm%7B100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z' class='spinner'/%3E%3C/svg%3E");
256 background-size: 32px;
257 background-position: center;
258 background-repeat: no-repeat;
259 cursor: pointer;
260 }
261
262 .photonic-more-button, .photonic-more-button:visited,
263 .photonic-show-gallery-button, .photonic-show-gallery-button:visited {
264 padding: 10px 15px;
265 display: inline-block;
266 text-align: center;
267 text-decoration: none;
268 min-width: 120px;
269 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
270 font-size: 14px;
271 margin: 20px 0 0;
272 background: #6af;
273 background: linear-gradient(#336699 20%, #224477 100%);
274 color: #fff;
275 float: none;
276 border-radius: 3px;
277 }
278
279 .photonic-more-button:hover, .photonic-more-button:active, .photonic-more-button:focus,
280 .photonic-show-gallery-button:hover, .photonic-show-gallery-button:active, .photonic-show-gallery-button:focus {
281 text-decoration: none;
282 color: #fff;
283 background: #48d;
284 background: linear-gradient(#224477 20%, #336699 100%);
285 }
286
287 .photonic-more-button {
288 margin: 0 auto;
289 text-align: center;
290 }
291
292 .photonic-js-load-button {
293 display: none !important;
294 visibility: hidden !important;
295 }
296
297 .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; }
298 .photonic-panel-header div { vertical-align: middle; margin: 0 5px; }
299 .photonic-panel-header a { text-decoration: none; font-size: 100%; }
300
301 .photonic-password-prompter {
302 display: none;
303 }
304 .photonic-password-prompter {
305 background: transparent;
306 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
307 font-size: 14px;
308 width: 100%;
309 height: 100%;
310 position: fixed;
311 top: 0;
312 left: 0;
313 z-index: 1000 !important ;
314 }
315 .photonic-password-prompter-content {
316 width: 400px;
317 position: relative;
318 margin: -150px auto 0;
319 top: 50%;
320 background: #fff;
321 border: 1px solid #ccc;
322 border-radius: 3px;
323 }
324 .photonic-password-prompter h3 {
325 background: #6af;
326 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
327 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
328 color: #fff;
329 font-size: 16px;
330 font-weight: normal;
331 padding: 0.5em;
332 margin: 0;
333 display: inline-block;
334 width: 100%;
335 }
336 .photonic-password-prompter h3 .title {
337 float: left;
338 }
339 .photonic-password-prompter h3 .close {
340 float: right;
341 padding: 0;
342 margin: 0;
343 line-height: inherit;
344 font-size: inherit;
345 background: none;
346 }
347 .photonic-prompt-body {
348 padding: 1em;
349 text-align: left;
350 }
351 .photonic-prompt-body input[type="password"] {
352 width: 100%;
353 padding: 0 0.5em;
354 }
355 .photonic-password-submit {
356 background: #6af;
357 background: linear-gradient(to bottom right, #336699 20%, #224477 100%);
358 display: inline-block;
359 box-sizing: border-box;
360 margin-top: 0.5em;
361 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
362 font-size: 14px;
363 padding: 0.2em 1em;
364 line-height: 24px;
365 text-transform: none;
366 font-weight: normal;
367 }
368
369 /** Modal */
370 .photonicModalOverlay {
371 width: 100%;
372 height: 100%;
373 top: 0;
374 left: 0;
375 position: fixed;
376 background: #333;
377 background: rgba(33, 33, 33, 0.8);
378 text-align: center;
379 }
380
381 .photonicModalOverlayScrollable {
382 display: inline-block;
383 width: 100%;
384 text-align: center;
385 transition: height 1s ease-out;
386 }
387
388 .photonicModal { margin: 0 auto; }
389
390 .photonicModal.photonic-panel { border-radius: 0 0 10px 10px; }
391
392 a.photonicModalClose {
393 position: absolute;
394 float: right;
395 border: none;
396 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
397 font-size: 30px;
398 width: 30px;
399 height: 30px;
400 line-height: 30px;
401 color: #bbb;
402 top: 0;
403 z-index: 10000;
404 }
405
406 .photonic-icon {
407 background-image: url("../../../images/Icons.svg?v=2.3.04");
408 background-size: 100%;
409 width: 96px;
410 height: 96px;
411 display: block;
412 position: relative;
413 }
414 .photonic-error-icon { background-position: 0 -768px; }
415 .photonic-error .photonic-icon { float: left; }
416 .photonic-error .photonic-message { margin-left: 100px; display: block; }
417 .photonic-error { display: inline-block; width: 100%; box-sizing: border-box; position: relative; padding: 1em 0; }
418
419 .photonic-html5-external { display: none; }
420
421 .pswp__item .photonic-video { text-align: center; position: relative; height: 100%; width: 100%; }
422 .pswp__item .photonic-video video, .pswp__item .photonic-video iframe { position: absolute; top: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; }
423
424 .pswp__custom-caption {
425 background: rgba(33, 33, 33, 0.75);
426 font-size: 16px;
427 color: #fff;
428 width: calc(100% - 32px);
429 max-width: 400px;
430 padding: 0 8px;
431 border-radius: 4px;
432 position: absolute;
433 left: 50%;
434 bottom: 16px;
435 transform: translateX(-50%);
436 text-align: center;
437 }
438 .pswp__custom-caption a {
439 color: #fff;
440 text-decoration: underline;
441 }
442 .photonic-pswp-caption {
443 padding: 0.5em 1em;
444 }
445 .photonic-pswp-social { display: flex; height: 60px; align-items: center; }
446 .photonic-pswp-social #photonic-social { background: rgba(0, 0, 0, 0); }
447
448 .mfp-inline-holder .mfp-content { text-align: center; }
449 .mfp-close-btn-in .mfp-inline-holder .mfp-close { color: #eee; }
450 .mfp-content #photonic-social { position: absolute; top: 45px; left: 5px; }
451
452 .photonic-stream.alignwide { }
453 .photonic-stream.alignfull { }
454
455 .photonic-helper {
456 width: 100%;
457 box-sizing: border-box;
458 }
459
460 [data-photonic-platform='flickr'] [data-photonic-media-type='video']:hover:before,
461 [data-photonic-platform='smug'] [data-photonic-media-type='video']:hover:before,
462 [data-photonic-platform='zenfolio'] [data-photonic-media-type='video']:hover:before,
463 [data-photonic-platform='instagram'] [data-photonic-media-type='video']:hover:before {
464 content: '';
465 background-image: url("../../../images/Icons.svg?v=3.04");
466 background-size: 100%;
467 background-position-y: -480px;
468 width: 48px;
469 height: 48px;
470 display: block;
471 position: absolute;
472 top: 50%;
473 left: 50%;
474 margin-top: -24px;
475 margin-left: -24px;
476 z-index: 1;
477 }
478
479 /** Tooltip */
480 .photonic-tooltip-container {
481 transform: translateZ(0);
482 position: absolute;
483 max-width: 300px;
484 padding: 8px 10px 10px;
485 font-family: "Noto Sans", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
486 font-size: 14px;
487 font-weight: normal;
488 box-shadow: 0 0 5px #aaa;
489 background: #2d2d2d;
490 color: #eee;
491 border-radius: 4px;
492 opacity: 1;
493 z-index: 9999;
494 }
495 .photonic-tooltip-container[class*=" tooltip-"] {
496 animation: tooltip-anim 0.8s;
497 }
498 .photonic-tooltip-container::after {
499 position: absolute;
500 display: block;
501 content: "";
502 }
503 .photonic-tooltip-container.tooltip-left::after {
504 right: -8px;
505 top: 50%;
506 transform: translateY(-50%);
507 border-style: solid;
508 border-width: 6px 0 6px 8px;
509 border-color: transparent transparent transparent #2d2d2d;
510 }
511 .photonic-tooltip-container.tooltip-right::after {
512 left: -8px;
513 top: 50%;
514 transform: translateY(-50%);
515 border-style: solid;
516 border-width: 6px 8px 6px 0;
517 border-color: transparent #2d2d2d transparent transparent;
518 }
519 .photonic-tooltip-container.tooltip-center::after {
520 top: -8px;
521 left: 50%;
522 transform: translateX(-50%);
523 border-style: solid;
524 border-width: 0 6px 8px 6px;
525 border-color: transparent transparent #2d2d2d transparent;
526 }
527 .photonic-tooltip-container.no-display {
528 display: none;
529 }
530
531 .photonic-show-gallery-button { display: block; margin: 1rem 0; border-width: 0; }
532
533 /** Slideshow */
534 .photonic-slideshow, .photonic-slideshow-thumbs { position: relative; width: 100%; }
535 .photonic-slideshow-content { margin: 1em 0; }
536 .photonic-slideshow-adapt-height .splide__track { transition: height 1000ms ease-in-out; }
537 .photonic-slideshow-adapt-height .splide__slide { vertical-align: top; }
538 .photonic-slideshow .splide__slide__container { text-align: center; }
539 .photonic-slideshow-thumbs.js-thumbnails { text-align: center; }
540 .photonic-slideshow-thumbs .thumbnails__list { list-style: none; margin: 0.5em 0; padding: 0; }
541 .photonic-slideshow-thumbs .thumbnails__item { display: inline-block; }
542 .photonic-slideshow-thumbs .thumbnails__item img { opacity: 70%; }
543 .photonic-slideshow-thumbs .thumbnails__item.is-active img, .photonic-slideshow-thumbs .thumbnails__item:hover img { opacity: 100%; }
544
545 .photonic-slideshow-thumbs.js-thumbnails { padding: 0 75px; }
546 .photonic-slideshow-thumbs .splide__track { margin: 0.5em 0; }
547 .photonic-slideshow-thumbs .splide__slide { opacity: 50%; transition: opacity .2s cubic-bezier(.54,.01,.1,1); display: inline-block; }
548 .photonic-slideshow-thumbs .splide__slide.is-active, .photonic-slideshow-thumbs .splide__slide:hover { opacity: 100%; }
549 .splide--nav>.splide__track>.splide__list>.splide__slide.is-active { border: none; }
550 .splide--draggable>.splide__track>.splide__list>.splide__slide { display: inline-block; }
551
552 .photonic-slideshow-img img { display: none; }
553 .photonic-slideshow-thumbs img { display: none; }
554
555 .is-visible {
556 display: block;
557 height: auto;
558 opacity: 1;
559 }
560
561 .fade-in {
562 animation: fadeIn ease 1s;
563 }
564
565 @keyframes fadeIn {
566 0% {opacity:0;}
567 100% {opacity:1;}
568 }
569
570 .photonic-can-slide {
571 overflow: hidden;
572 transition: height .5s, padding-top .5s, padding-bottom .5s, margin-top 0.5s, margin-bottom 0.5s;
573 height: auto;
574 }
575 .photonic-can-slide-hide {
576 height: 0;
577 padding-top: 0;
578 padding-bottom: 0;
579 margin-top: 0;
580 margin-bottom: 0;
581 }
582
583 .no-scroll .vbox-content { min-height: auto; height: 100%; }
584 .no-scroll .vbox-child { height: 100%; box-shadow: none; background-color: transparent !important; display: flex; align-items: center; }
585 .no-scroll .vbox-container { overflow-y: hidden; }
586 .no-scroll .vbox-container img { max-height: 90%; }
587 .vbox-content video.photonic { margin: 0 auto; }
588