UNPKG

35.5 kBCSSView Raw
1/***************************/
2/* nanogallery2 - CSS */
3/***************************/
4
5.nGY2 {
6 box-sizing: content-box;
7 -webkit-box-sizing: content-box;
8 -moz-box-sizing: content-box;
9 -o-box-sizing: content-box;
10}
11
12.nGY2 .ngy2_container {
13 width: 100%;
14 min-width: 100px; /* to display something even if parent has display:inline-block */
15 font-size: 1.0em;
16 line-height: normal;
17 padding: 0px;
18 margin: 0 auto;
19 overflow: hidden;
20 visibility: visible;
21 -webkit-user-select: none;
22 user-select: none;
23 -webkit-touch-callout: none;
24}
25
26.nGY2_body_scrollbar {
27 overflow: hidden;
28}
29
30/*******************************************/
31/* NGY2 ICON FONT */
32/* generated with http://fontello.com */
33/* PARTIALLY BASED ON FONT AWESOME */
34/*******************************************/
35
36/* base64 encoder: http://jpillora.com/base64-encoder */
37
38@font-face {
39 font-family: 'ngy2_icon_font';
40 src: url('font/ngy2_icon_font.woff2?64889571') format('woff2'),
41 url('font/ngy2_icon_font.woff?64889571') format('woff');
42 font-weight: normal;
43 font-style: normal;
44}
45
46.nGY2Icon-star:before { content: '\e801'; } /* '?' */
47.nGY2Icon-search:before { content: '\e800'; } /* '?' */
48.nGY2Icon-star-empty:before { content: '\e802'; } /* '?' */
49.nGY2Icon-video:before { content: '\e803'; } /* '?' */
50.nGY2Icon-videocam:before { content: '\e804'; } /* '?' */
51.nGY2Icon-picture:before { content: '\e805'; } /* '?' */
52.nGY2Icon-camera:before { content: '\e806'; } /* '?' */
53.nGY2Icon-camera-alt:before { content: '\e807'; } /* '?' */
54.nGY2Icon-ok:before { content: '\e808'; } /* '?' */
55.nGY2Icon-help:before { content: '\e80a'; } /* '?' */
56.nGY2Icon-help-circled:before { content: '\e80b'; } /* '?' */
57.nGY2Icon-home:before { content: '\e80e'; } /* '?' */
58.nGY2Icon-link:before { content: '\e80f'; } /* '?' */
59.nGY2Icon-link-ext:before { content: '\e810'; } /* '?' */
60.nGY2Icon-heart:before { content: '\e811'; } /* '?' */
61.nGY2Icon-ngy2_chevron-right:before { content: '\e812'; } /* '?' */
62.nGY2Icon-upload:before { content: '\e814'; } /* '?' */
63.nGY2Icon-reply-all:before { content: '\e815'; } /* '?' */
64.nGY2Icon-export:before { content: '\e816'; } /* '?' */
65.nGY2Icon-chat:before { content: '\e818'; } /* '?' */
66.nGY2Icon-attention:before { content: '\e819'; } /* '?' */
67.nGY2Icon-location:before { content: '\e81a'; } /* '?' */
68.nGY2Icon-trash:before { content: '\e81b'; } /* '?' */
69.nGY2Icon-folder-empty:before { content: '\e81c'; } /* '?' */
70.nGY2Icon-folder-open-empty:before { content: '\e81d'; } /* '?' */
71.nGY2Icon-menu:before { content: '\e81e'; } /* '?' */
72.nGY2Icon-cog:before { content: '\e81f'; } /* '?' */
73.nGY2Icon-cog-alt:before { content: '\e820'; } /* '?' */
74.nGY2Icon-wrench:before { content: '\e821'; } /* '?' */
75.nGY2Icon-lightbulb:before { content: '\e822'; } /* '?' */
76.nGY2Icon-resize-full:before { content: '\e823'; } /* '?' */
77.nGY2Icon-resize-small:before { content: '\e824'; } /* '?' */
78.nGY2Icon-left-open:before { content: '\e827'; } /* '?' */
79.nGY2Icon-right-open:before { content: '\e828'; } /* '?' */
80.nGY2Icon-arrows-cw:before { content: '\e829'; } /* '?' */
81.nGY2Icon-level-up:before { content: '\e82a'; } /* '?' */
82.nGY2Icon-play:before { content: '\e82b'; } /* '?' */
83.nGY2Icon-pause:before { content: '\e82c'; } /* '?' */
84.nGY2Icon-ngy2_chevron-left:before { content: '\e82d'; } /* '?' */
85.nGY2Icon-ellipsis-vert:before { content: '\e82e'; } /* '?' */
86.nGY2Icon-toggle-off:before { content: '\e82f'; } /* '?' */
87.nGY2Icon-toggle-on:before { content: '\e830'; } /* '?' */
88.nGY2Icon-check:before { content: '\e831'; } /* '?' */
89.nGY2Icon-check-empty:before { content: '\e832'; } /* '?' */
90.nGY2Icon-rocket:before { content: '\e833'; } /* '?' */
91.nGY2Icon-filter:before { content: '\e834'; } /* '?' */
92.nGY2Icon-magic:before { content: '\e835'; } /* '?' */
93.nGY2Icon-pinterest-squared:before { content: '\e836'; } /* '?' */
94.nGY2Icon-gplus-squared:before { content: '\e837'; } /* '?' */
95.nGY2Icon-facebook-squared:before { content: '\e838'; } /* '?' */
96.nGY2Icon-basket:before { content: '\e839'; } /* '?' */
97.nGY2Icon-ok-circled:before { content: '\e83a'; } /* '?' */
98.nGY2Icon-user:before { content: '\e83b'; } /* '?' */
99.nGY2Icon-ngy2_chevron_left3:before { content: '\e83c'; } /* '?' */
100.nGY2Icon-ngy2_chevron_right3:before { content: '\e83d'; } /* '?' */
101.nGY2Icon-zoom-out-1:before { content: '\e83e'; } /* '?' */
102.nGY2Icon-ngy2_zoom_out2:before { content: '\e83f'; } /* '?' */
103.nGY2Icon-ngy2_zoom_in2:before { content: '\e840'; } /* '?' */
104.nGY2Icon-ngy2_share2:before { content: '\e841'; } /* '?' */
105.nGY2Icon-ngy2_external2:before { content: '\e842'; } /* '?' */
106.nGY2Icon-ngy2_close2:before { content: '\e843'; } /* '?' */
107.nGY2Icon-ngy2_info2:before { content: '\e844'; } /* '?' */
108.nGY2Icon-ngy2_chevron_up2:before { content: '\e845'; } /* '?' */
109.nGY2Icon-ngy2_download2:before { content: '\e846'; } /* '?' */
110.nGY2Icon-mail-alt:before { content: '\f0e0'; } /* '?' */
111.nGY2Icon-circle-empty:before { content: '\f10c'; } /* '?' */
112.nGY2Icon-tumblr-squared:before { content: '\f174'; } /* '?' */
113.nGY2Icon-twitter-squared:before { content: '\f304'; } /* '?' */
114.nGY2Icon-youtube-play:before { content: '\f16a'; } /* '?' */
115.nGY2Icon-vkontakte:before { content: '\f189'; } /* '?' */
116.nGY2Icon-cw:before { content: '\e809'; } /* '?' */
117.nGY2Icon-ccw:before { content: '\e80c'; } /* '?' */
118
119
120
121
122[class^="nGY2Icon-"] {
123 margin-left: .2em;
124 margin-right: .3em;
125 font-family: "ngy2_icon_font";
126 font-style: normal;
127 font-weight: normal;
128 speak: none;
129 display: inline-block;
130 text-decoration: inherit;
131 /* width: 1em; */
132 text-align: center;
133 font-variant: normal;
134 text-transform: none;
135 box-sizing: border-box;
136 -webkit-box-sizing: border-box;
137 -moz-box-sizing: border-box;
138 -o-box-sizing: border-box;
139}
140
141
142/**************************************/
143/* NAVIGATION BAR */
144/**************************************/
145
146.nGY2Navigationbar {
147 margin: 5px 0px;
148 padding: 5px 0px;
149 display: none;
150 box-sizing: border-box;
151 -webkit-box-sizing: border-box;
152 -moz-box-sizing: border-box;
153 -o-box-sizing: border-box;
154}
155
156.nGY2Navigationbar .nGY2NavigationbarItem {
157 margin: 5px 2px;
158 padding: 8px 10px;
159 white-space: nowrap;
160 cursor: pointer;
161 display: inline-block;
162 vertical-align: middle;
163 text-align: left;
164 visibility: 'hidden';
165 box-sizing: border-box;
166 -webkit-box-sizing: border-box;
167 -moz-box-sizing: border-box;
168 -o-box-sizing: border-box;
169}
170
171/**************************************/
172/* NAVIGATION BREADCRUMB */
173/**************************************/
174
175.nGY2Navigationbar .oneItem {
176 margin: 0px 5px;
177 white-space: nowrap;
178 vertical-align: middle;
179 display: inline-block;
180}
181
182
183/**************************************/
184/* GALLERY */
185/**************************************/
186
187.nGY2 .nGY2Gallery {
188 position: relative;
189 text-align: center;
190 margin: 0px auto;
191 overflow: hidden;
192 box-sizing: border-box;
193 -webkit-box-sizing: border-box;
194 -moz-box-sizing: border-box;
195 -o-box-sizing: border-box;
196}
197
198.nGY2 .nGY2GallerySub {
199 perspective: 900px;
200 text-align: left;
201 position: relative;
202 width: 100%;
203 height: 100%;
204 overflow: hidden;
205 display: inline-block;
206 z-index: 1;
207 /* touch-action: none !important; */
208 box-sizing: border-box;
209 -webkit-box-sizing: border-box;
210 -moz-box-sizing: border-box;
211 -o-box-sizing: border-box;
212}
213/*
214.nGY2 .nGY2GallerySub *{
215 touch-action: auto !important;
216}
217*/
218/**************************************/
219/* THUMBNAILS */
220/**************************************/
221.nGY2 .nGY2GThumbnail {
222 /* no margin allowed here */
223 cursor: pointer;
224 border: 0px solid #000;
225 /*margin: 1px;*/
226 padding: 0px; /* 5 */
227 background-color: #000;
228 display: inline-block;
229 position: absolute; /*relative;*/
230 box-sizing: border-box;
231 -webkit-box-sizing: border-box;
232 -moz-box-sizing: border-box;
233 -o-box-sizing: border-box;
234 overflow:hidden;
235}
236
237.nGY2 .nGY2GThumbnailStack {
238 /* no margin allowed here */
239 background-color: #888;
240 cursor: pointer;
241 border: 0px solid #000;
242 /*margin: 1px;*/
243 padding: 0px; /* 5 */
244 display: inline-block;
245 position: absolute; /*relative;*/
246 box-sizing: border-box;
247 -webkit-box-sizing: border-box;
248 -moz-box-sizing: border-box;
249 -o-box-sizing: border-box;
250 overflow:hidden;
251}
252.nGY2 .nGY2GThumbnailSub {
253 /* no border or padding allowed here */
254 width: 100%;
255 height: 100%;
256 display: block;
257 box-sizing: border-box;
258 -webkit-box-sizing: border-box;
259 -moz-box-sizing: border-box;
260 -o-box-sizing: border-box;
261 border: 0px solid #000;
262 margin: 0px;
263 padding: 0px;
264 overflow:hidden;
265}
266.nGY2 .nGY2GThumbnailSubSelected {
267 -webkit-transform: scale(0.90);
268 -ms-transform: scale(0.90);
269 transform: scale(0.90);
270 /*opacity: 0.8;*/
271}
272
273.nGY2 .nGY2GThumbnailImage {
274 position:relative;
275 overflow:hidden;
276 background:#000;
277 box-sizing: border-box;
278 -webkit-box-sizing: border-box;
279 -moz-box-sizing: border-box;
280 -o-box-sizing: border-box;
281}
282
283.nGY2 .nGY2GThumbnailImg {
284 /* no border or padding allowed here */
285 /* use empty image in background */
286 background:url('data:image/gif;base64,R0lGODlhEAAQAIAAAP///////yH5BAEKAAEALAAAAAAQABAAAAIOjI+py+0Po5y02ouzPgUAOw==') no-repeat center;
287 position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
288 display: block;
289 vertical-align: bottom;
290 box-sizing: border-box;
291 -webkit-box-sizing: border-box;
292 -moz-box-sizing: border-box;
293 -o-box-sizing: border-box;
294}
295
296
297.nGY2 .nGY2GThumbnailAnnotationOLD_NO_MORE_USED {
298 /* no padding allowed here */
299 background:rgba(34, 34, 34, 0.75); /*#222;*/
300 opacity: 1;
301 text-align: left;
302 /* top: 0; bottom: 0; left: 0; right: 0; */
303 left: 0; right: 0;
304 padding: 1px;
305 position: absolute;
306 min-height: 18px;
307 overflow: hidden;
308 box-sizing: border-box;
309 -webkit-box-sizing: border-box;
310 -moz-box-sizing: border-box;
311 -o-box-sizing: border-box;
312}
313
314.nGY2 .nGY2GThumbnailCustomLayer {
315 position: absolute;
316 display: block;
317 top: 0;
318 bottom: 0;
319 left: 0;
320 right: 0;
321 overflow:hidden;
322 box-sizing: border-box;
323 -webkit-box-sizing: border-box;
324 -moz-box-sizing: border-box;
325 -o-box-sizing: border-box;
326}
327
328
329.nGY2 .nGY2GThumbnailLabel {
330/* float:left; */
331 /*display: inline-block;*/
332 display: block;
333 background:rgba(34, 34, 34, 0.75); /*#222;*/
334 /* top: 0; bottom: 0; left: 0; right: 0; */
335 left: 0; right: 0;
336 padding: 4px;
337 margin: 0;
338 position: absolute;
339 box-sizing: border-box;
340 -webkit-box-sizing: border-box;
341 -moz-box-sizing: border-box;
342 -o-box-sizing: border-box;
343}
344
345.nGY2 .nGY2GThumbnailImageTitle,
346.nGY2 .nGY2GThumbnailAlbumTitle {
347 color:#fff;
348 margin: 5px 1px 1px 1px;
349 padding: 0px 0px;
350 left: 0; right: 0;
351 white-space: nowrap;
352 overflow:hidden;
353 display: inline-block;
354 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
355 box-sizing: border-box;
356 -webkit-box-sizing: border-box;
357 -moz-box-sizing: border-box;
358 -o-box-sizing: border-box;
359}
360
361.nGY2 .nGY2GThumbnailDescription {
362 clear:both;
363 margin: 1px 1px 3px 1px;
364 padding: 0px;
365 color:#aaa;
366 white-space: nowrap;
367 left: 0; right: 0;
368 font-size:0.8em;
369 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
370 box-sizing: border-box;
371 -webkit-box-sizing: border-box;
372 -moz-box-sizing: border-box;
373 -o-box-sizing: border-box;
374}
375
376.nGY2 .nGY2GThumbnailIcons {
377 /*margin: 5px 5px;*/
378 margin: 0;
379 position: absolute;
380 display: inline-block;
381 padding: 0;
382 box-sizing: border-box;
383 -webkit-box-sizing: border-box;
384 -moz-box-sizing: border-box;
385 -o-box-sizing: border-box;
386}
387
388.nGY2 .nGY2GThumbnailIconsFullThumbnail {
389 font-size: 1.8em;
390 color: #fff;
391 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
392 padding: 5px;
393 position: absolute;
394 top: 50%;
395 left: 50%;
396 -webkit-transform: translateX(-50%) translateY(-50%);
397 -ms-transform: translateX(-50%) translateY(-50%);
398 transform: translateX(-50%) translateY(-50%);
399 display: inline-block;
400 box-sizing: border-box;
401 -webkit-box-sizing: border-box;
402 -moz-box-sizing: border-box;
403 -o-box-sizing: border-box;
404}
405
406.nGY2 .nGY2GThumbnailIcon {
407 display: inline-block;
408 /*top: 0; bottom: 0; left: 0; right: 0;*/
409 padding: 4px;
410 margin: 0px;
411 /*position: absolute;*/
412 color:#fff;
413 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
414 box-sizing: border-box;
415 -webkit-box-sizing: border-box;
416 -moz-box-sizing: border-box;
417 -o-box-sizing: border-box;
418}
419
420.nGY2 .nGY2GThumbnailIconTextBadge{
421 background-color: #fff;
422 /*padding: 4px;*/
423 border-radius: 6px;
424 -moz-border-radius: 6px;
425 -webkit-border-radius: 6px;
426 position: relative;
427 margin: 0;
428 display: inline-block;
429 vertical-align: middle;
430 box-sizing: border-box;
431 -webkit-box-sizing: border-box;
432 -moz-box-sizing: border-box;
433 -o-box-sizing: border-box;
434}
435.nGY2 .nGY2GThumbnailIconText{
436 position: relative;
437 margin: 0;
438 display: inline-block;
439 vertical-align: middle;
440 box-sizing: border-box;
441 -webkit-box-sizing: border-box;
442 -moz-box-sizing: border-box;
443 -o-box-sizing: border-box;
444}
445
446
447.nGY2 .nGY2GThumbnailAlbumUp i{
448 position: absolute;
449 top: 50%;
450 left: 50%;
451 margin: 0;
452 -webkit-transform: translateY(-50%) translateX(-50%);
453 -ms-transform: translateY(-50%) translateX(-50%);
454 transform: translateY(-50%) translateX(-50%);
455}
456
457.nGY2 .nGY2GThumbnailAlbumUp {
458 color:#eee;
459 font-size: 1.2em;
460 top: 0; bottom: 0; left: 0; right: 0;
461 display: table;
462 width:100%;
463 text-align: center;
464 position: absolute;
465 margin: auto;
466 padding: 0;
467 box-sizing: border-box;
468 -webkit-box-sizing: border-box;
469 -moz-box-sizing: border-box;
470 -o-box-sizing: border-box;
471}
472
473
474
475/* spinner by https://codepen.io/fox_hover/pen/YZxGed */
476.nGY2 .nGY2GThumbnailLoaderDisplayed {
477 visibility: visible;
478 opacity: 0.8;
479 position: absolute;
480 top: 0;
481 bottom: 0;
482 left: 0;
483 right: 0;
484 margin: auto; /* never change this value */
485 zoom: 1;
486 user-drag: none;
487 user-select: none;
488 -moz-user-select: none;
489 -webkit-user-drag: none;
490 -webkit-user-select: none;
491 -ms-user-select: none;
492 width: 40px;
493 height: 40px;
494}
495
496.nGY2 .nGY2GThumbnailLoaderDisplayed:before { /* bigger circle */
497 top: 0;
498 bottom: 0;
499 left: 0;
500 right: 0;
501 margin: auto;
502 content: "";
503 display: block;
504 position: absolute;
505 border-width: 7px;
506 border-style: solid;
507 border-radius: 50%;
508 width: 24px;
509 height: 24px;
510 border-bottom-color: #000;
511 border-right-color: #000;
512 border-top-color: #888;
513 border-left-color: #888;
514 animation: nGY2-thumbnail-spinner-rotate-animation 1s linear 0s infinite;
515}
516
517 .nGY2 .nGY2GThumbnailLoaderDisplayed:after { /* smaller circle */
518 content: "";
519 display: block;
520 position: absolute;
521 border-width: 4px;
522 border-style: solid;
523 border-radius: 50%;
524 width: 16px;
525 height: 16px;
526 border-bottom-color: #111;
527 border-right-color: #111;
528 border-top-color: #666;
529 border-left-color: #666;
530 top: 0;
531 bottom: 0;
532 left: 0;
533 right: 0;
534 margin: auto;
535 animation: nGY2-thumbnail-spinner-anti-rotate-animation 0.80s linear 0s infinite;
536}
537@keyframes nGY2-thumbnail-spinner-rotate-animation {
538 0% { transform: rotate(0deg);}
539 100% { transform: rotate(360deg);}
540}
541@keyframes nGY2-thumbnail-spinner-anti-rotate-animation {
542 0% { transform: rotate(0deg); }
543 100% { transform: rotate(-360deg); }
544}
545
546/**************************************/
547/* GALLERY BOTTOM */
548/**************************************/
549
550.nGY2 .nGY2GalleryBottom {
551 /*color:#eee;*/
552 margin: 0px;
553 padding: 0px;
554 text-align:center;
555 position: relative;
556 overflow:hidden;
557 white-space: nowrap;
558}
559
560/**************************************/
561/* GALLERY MORE-BUTTON */
562/**************************************/
563
564.nGY2 .nGY2GalleryMoreButton {
565 /*color:#eee;*/
566 margin: 10px auto 5px auto;
567 padding: 4px;
568 text-align: center;
569 position: relative;
570 display:inline-block;
571 overflow:hidden;
572 white-space: nowrap;
573 cursor:pointer;
574}
575.nGY2 .nGY2GalleryMoreButtonAnnotation {
576 /*color:#eee;*/
577 margin: 10px auto 5px auto;
578 border: 1px solid #fff;
579 padding: 8px 20px;
580 text-align: center;
581 position: relative;
582 display:inline-block;
583 overflow:hidden;
584 white-space: nowrap;
585}
586
587/**************************************/
588/* GALLERY PAGINATION */
589/**************************************/
590
591.nGY2 .nGY2GalleryPagination,
592.nGY2 .nGY2GalleryPaginationDot {
593 /*color:#eee;*/
594 margin: 10px auto 5px auto;
595 padding: 4px;
596 text-align:center;
597 position: relative;
598 overflow:hidden;
599 white-space: nowrap;
600}
601
602.nGY2 .nGY2paginationItem,
603.nGY2 .nGY2paginationItemCurrentPage,
604.nGY2 .nGY2PaginationPrev,
605.nGY2 .nGY2PaginationNext {
606 margin: 10px 4px;
607 padding: 5px 8px;
608 -webkit-border-radius: 4px;
609 -moz-border-radius: 4px;
610 border-radius: 4px;
611 background: #111;
612 white-space: nowrap;
613 cursor:pointer;
614 vertical-align: middle;
615 display: inline-block;
616}
617
618.nGY2 .nGY2paginationItemCurrentPage{
619 background: #333;
620 /* text-decoration:underline; */
621}
622
623.nGY2 .nGY2paginationDot,
624.nGY2 .nGY2paginationDotCurrentPage{
625 width: 16px;
626 height: 16px;
627 border: 2px solid #fff;
628 background: #444;
629 border-radius: 50%;
630 margin: 12px 5px;
631 white-space: nowrap;
632 cursor:pointer;
633 vertical-align: middle;
634 display: inline-block;
635 opacity: 0.50;
636}
637.nGY2 .nGY2paginationDotCurrentPage{
638 background: #fff;
639 opacity: 1;
640}
641
642.nGY2 .nGY2paginationRectangle,
643.nGY2 .nGY2paginationRectangleCurrentPage{
644 width: 30px;
645 border: 1px solid #fff;
646 height: 0px;
647 background: #444;
648 margin: 5px 1px;
649 white-space: nowrap;
650 cursor: pointer;
651 vertical-align: middle;
652 display: inline-block;
653 opacity: 0.50;
654}
655.nGY2 .nGY2paginationRectangleCurrentPage{
656 background: #fff;
657 opacity: 1;
658}
659
660/**************************************/
661/* POPUP */
662/**************************************/
663.nGY2Popup {
664 position: fixed;
665 color: #000;
666 top: 0px;
667 left: 0px;
668 bottom: 0px;
669 right: 0px;
670 background: rgba(0,0,0,0.5);
671/* z-index: 2000;*/
672}
673.nGY2PopupContent,
674.nGY2PopupContentCenter,
675.nGY2PopupContentLeft,
676.nGY2PopupContentRight {
677 position: fixed;
678 text-align: left;
679 top: 50%;
680 left: 50%;
681 padding: 15px 30px;
682 height: auto;
683 width: 50%;
684 background: #fff;
685 -webkit-transform: translateX(-50%) translateY(-50%);
686 -moz-transform: translateX(-50%) translateY(-50%);
687 -ms-transform: translateX(-50%) translateY(-50%);
688 transform: translateX(-50%) translateY(-50%);
689}
690
691@media screen and (max-width: 992px) {
692 .nGY2PopupContent,
693 .nGY2PopupContentCenter,
694 .nGY2PopupContentLeft,
695 .nGY2PopupContentRight {
696 width: 95%;
697 padding: 5px 10px;
698 }
699}
700
701.nGY2PopupContentCenter {
702 text-align: center;
703}
704
705.nGY2PopupTitle {
706 font-size: 1.5em;
707 border-bottom: 4px solid #888;
708 padding: 0 0 5px 0;
709 margin-bottom: 10px;
710}
711.nGY2PopupCloseButton {
712 font-size: 1.5em;
713 cursor: pointer;
714 text-align: right;
715}
716
717.nGY2PopupOneItem {
718 padding : 10px 10px;
719 font-size: 2em;
720 cursor: pointer;
721 display:inline-block;
722}
723.nGY2PopupOneItemText{
724 padding : 10px 10px;
725 font-size: 1.2em;
726 cursor: pointer;
727 display:block;
728}
729
730
731/**************************************/
732/* INFO */
733/**************************************/
734.nGY2PortInfo {
735 padding: 3px !important;
736 font-size: 14px !important;
737 color: #FF0075 !important;
738 text-align: center !important;
739 z-index:0 !important;
740 text-transform: lowercase !important;
741 cursor: pointer !important;
742}
743
744.nGY2PortInfo a,
745.nGY2PortInfo > a:link,
746.nGY2PortInfo > a:visited,
747.nGY2PortInfo a:hover,
748.nGY2PortInfo a:active {
749 color: #FF0075 !important;
750 text-decoration: none !important;
751}
752
753
754/**************************************/
755/* IMAGE VIEWER */
756/**************************************/
757.nGY2 .nGY2ViewerContainer {
758 opacity: 0;
759 position: fixed;
760 top: 0px;
761 left: 0px;
762 height: 100%;
763 width: 100%;
764}
765.nGY2 .nGY2Viewer {
766 display:block;
767 visibility: visible;
768 position: fixed;
769 top: 0px;
770 left: 0px;
771 height: 100%;
772 width: 100%;
773 opacity: 1;
774 /*font-size:1em;*/
775 background-color: rgba(1, 1, 1, 0.85);
776 text-align: center;
777 clear: both;
778 user-drag: none;
779 user-select: none;
780 -moz-user-select: none;
781 -webkit-user-drag: none;
782 -webkit-user-select: none;
783 -ms-user-select: none;
784}
785.nGY2 .nGY2ViewerLogo {
786 text-align: center;
787 float: left;
788 position: relative;
789 top: 50px;
790 left: 5px;
791 padding: 2px;
792 background: url(nanogallery2_logo.png) RGBA(0,0,0,0) no-repeat center;
793 display: block;
794 height: 74px;
795 width: 147px;
796}
797
798.nGY2 .nGY2ViewerContent {
799 /* background:url('loading.gif') no-repeat center; */
800 min-width:40px;
801 min-height:40px;
802 position:absolute;
803 clear:both;
804 /*
805 cursor: -webkit-zoom-out;
806 cursor: -moz-zoom-out;
807 cursor: zoom-out;
808 */
809 user-drag: none;
810 user-select: none;
811 -moz-user-select: none;
812 -webkit-user-drag: none;
813 -webkit-user-select: none;
814 -ms-user-select: none;
815 box-sizing: border-box;
816 -webkit-box-sizing: border-box;
817 -moz-box-sizing: border-box;
818 -o-box-sizing: border-box;
819 overflow: hidden;
820}
821.nGY2 .nGY2ViewerMediaPan{
822 transform-origin: 50% 50% 0;
823 visibility: visible;
824 opacity: 1;
825 position: absolute;
826 display: inline-block;
827 padding:0px;
828 top: 0;
829 bottom: 0;
830 left: 0;
831 right: 0;
832 margin: auto; /* never change this value */
833 zoom: 1;
834 user-drag: none;
835 user-select: none;
836 -moz-user-select: none;
837 -webkit-user-drag: none;
838 -webkit-user-select: none;
839 -ms-user-select: none;
840 box-sizing: border-box;
841 -webkit-box-sizing: border-box;
842 -moz-box-sizing: border-box;
843 -o-box-sizing: border-box;
844}
845.nGY2 .nGY2ViewerMedia {
846 max-width: none;
847 visibility: visible;
848 opacity: 1;
849 will-change: transform;
850 transform: translateZ(0);
851 position: absolute;
852 top: 0;
853 bottom: 0;
854 left: 0;
855 right: 0;
856 margin: auto; /* never change this value */
857 zoom: 1;
858 user-drag: none;
859 user-select: none;
860 -moz-user-select: none;
861 -webkit-user-drag: none;
862 -webkit-user-select: none;
863 -ms-user-select: none;
864 pointer-events: none;
865 padding: 0px;
866 box-sizing: border-box;
867 -webkit-box-sizing: border-box;
868 -moz-box-sizing: border-box;
869 -o-box-sizing: border-box;
870}
871/*.nGY2 .nGY2ViewerMedia:not(img) {*/
872.nGY2 video.nGY2ViewerMedia {
873 /* allow pointer events for medias not displayed in an IMG (-> IFRAME, VIDEO...) */
874 pointer-events: auto;
875}
876.nGY2 iframe.nGY2ViewerMedia {
877 /* allow pointer events for medias not displayed in an IMG (-> IFRAME, VIDEO...) */
878 pointer-events: auto;
879}
880
881/* spinner by https://codepen.io/fox_hover/pen/YZxGed */
882.nGY2 .nGY2ViewerMediaLoaderDisplayed {
883 visibility: visible;
884 opacity: 1;
885 position: absolute;
886 top: 0;
887 bottom: 0;
888 left: 0;
889 right: 0;
890 margin: auto; /* never change this value */
891 zoom: 1;
892 user-drag: none;
893 user-select: none;
894 -moz-user-select: none;
895 -webkit-user-drag: none;
896 -webkit-user-select: none;
897 -ms-user-select: none;
898 width: 50px;
899 height: 50px;
900}
901
902.nGY2 .nGY2ViewerMediaLoaderDisplayed:before { /* bigger circle */
903 top: 0;
904 bottom: 0;
905 left: 0;
906 right: 0;
907 margin: auto;
908 content: "";
909 display: block;
910 position: absolute;
911 border-width: 7px;
912 border-style: solid;
913 border-radius: 50%;
914 width: 38px;
915 height: 38px;
916 border-bottom-color: #23CB99;
917 border-right-color: #23CB99;
918 border-top-color: #444;
919 border-left-color: #444;
920 animation: nGY2-spinner-rotate-animation 1s linear 0s infinite;
921 }
922
923 .nGY2 .nGY2ViewerMediaLoaderDisplayed:after { /* smaller circle */
924 content: "";
925 display: block;
926 position: absolute;
927 border-width: 4px;
928 border-style: solid;
929 border-radius: 50%;
930 width: 24px;
931 height: 24px;
932 border-bottom-color: #23CB99;
933 border-right-color: #23CB99;
934 border-top-color: #333;
935 border-left-color: #333;
936 top: 0;
937 bottom: 0;
938 left: 0;
939 right: 0;
940 margin: auto;
941 animation: nGY2-spinner-anti-rotate-animation 0.85s linear 0s infinite;
942}
943@keyframes nGY2-spinner-rotate-animation {
944 0% { transform: rotate(0deg);}
945 100% { transform: rotate(360deg);}
946}
947@keyframes nGY2-spinner-anti-rotate-animation {
948 0% { transform: rotate(0deg); }
949 100% { transform: rotate(-360deg); }
950}
951
952.nGY2 .nGY2ViewerMediaLoaderHidden {
953 visibility: visible;
954 opacity: 0;
955 position: absolute;
956 top: 0;
957 bottom: 0;
958 left: 0;
959 right: 0;
960 margin: auto; /* never change this value */
961 zoom: 1;
962 user-drag: none;
963 user-select: none;
964 -moz-user-select: none;
965 -webkit-user-drag: none;
966 -webkit-user-select: none;
967 -ms-user-select: none;
968 background-image: none;
969 /*display:block;*/
970 box-sizing: border-box;
971 -webkit-box-sizing: border-box;
972 -moz-box-sizing: border-box;
973 -o-box-sizing: border-box;
974}
975
976.nGY2 .nGY2ViewerContent .imgCurrent {
977 cursor: pointer;
978}
979
980.nGY2 .nGY2ViewerAreaPrevious {
981 color: #fff;
982 display: block;
983 position: absolute;
984 /*background: rgba(0,0,0,0.2);*/
985 top: 50%;
986 /*height:20px;*/
987 /*width:20px;*/
988 padding: 10px 0px 10px 5px;
989 margin-top: -25px;
990 left: 0px;
991 text-align: left;
992 cursor: pointer;
993 opacity: 1;
994 user-drag: none;
995 user-select: none;
996 -moz-user-select: none;
997 -webkit-user-drag: none;
998 -webkit-user-select: none;
999 -ms-user-select: none;
1000 transition: all 0.2s ease;
1001 -webkit-transition: all 0.2s ease;
1002 -moz-transition: all 0.2s ease;
1003 -o-transition: all 0.2s ease;
1004}
1005.nGY2 .nGY2ViewerAreaPrevious > i {
1006 margin-left: 0px;
1007 font-weight: bold !important;
1008 font-size: 2em;
1009 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
1010 background: rgba(0,0,0,0.2);
1011 margin:0px !important;
1012}
1013
1014.nGY2 .nGY2ViewerAreaNext {
1015 /*transform: scaleY(1);*/
1016 color: #fff;
1017 display: block;
1018 position: absolute;
1019 top: 50%;
1020 /*height:20px;*/
1021 /*width:20px;*/
1022 padding: 10px 5px 10px 0px;
1023 margin-top: -25px;
1024 right: 0px;
1025 text-align: right;
1026 cursor: pointer;
1027 opacity: 1;
1028 user-drag: none;
1029 user-select: none;
1030 -moz-user-select: none;
1031 -webkit-user-drag: none;
1032 -webkit-user-select: none;
1033 -ms-user-select: none;
1034 transition: all 0.2s ease;
1035 -webkit-transition: all 0.2s ease;
1036 -moz-transition: all 0.2s ease;
1037 -o-transition: all 0.2s ease;
1038}
1039.nGY2 .nGY2ViewerAreaNext > i {
1040 margin-right: 0px;
1041 font-weight: bold !important;
1042 font-size: 2em;
1043 Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;
1044 background: rgba(0,0,0,0.2);
1045 margin:0px !important;
1046}
1047
1048.nGY2 .toolbarContainer {
1049 /*bottom:0px;*/
1050 left: 0px;
1051 right: 0px;
1052 text-align: center;
1053 display: inline-block;
1054 position: absolute;
1055 width: 100%;
1056}
1057
1058.nGY2 .toolbar {
1059 display: inline-block;
1060 vertical-align: middle;
1061 overflow: hidden;
1062 padding: 2px 0px;
1063 margin: 1px;
1064}
1065.nGY2 .toolbarBackground {
1066 background:rgba(4,4,4,0.7);
1067}
1068
1069.nGY2 .nGY2ViewerToolsTopLeft {
1070 cursor:pointer;
1071 color: #ddd;
1072 /* background: rgba(0,0,0,0.2); */
1073 left: 5px;
1074 top: 5px;
1075 position:absolute;
1076 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
1077 /*Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;*/
1078 opacity:1;
1079 transition: all 0.2s ease;
1080 -webkit-transition: all 0.2s ease;
1081 -moz-transition: all 0.2s ease;
1082 -o-transition: all 0.2s ease;
1083}
1084.nGY2 .nGY2ViewerToolsTopRight {
1085 cursor: pointer;
1086 color: #ddd;
1087 /* background: rgba(0,0,0,0.2); */
1088 right: 5px;
1089 top: 5px;
1090 position:absolute;
1091 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
1092 /* Text-Shadow: #000000 1px 0px 0px, #000000 1px 1px 0px, #000000 1px -1px 0px, #000000 -1px 1px 0px, #000000 -1px 0px 0px, #000000 -1px -1px 0px, #000000 0px 1px 0px, #000000 0px -1px 0px;*/
1093 opacity:1;
1094 transition: all 0.2s ease;
1095 -webkit-transition: all 0.2s ease;
1096 -moz-transition: all 0.2s ease;
1097 -o-transition: all 0.2s ease;
1098}
1099
1100.nGY2 .toolbar .ngbt {
1101 font-size:1.2em;
1102 display: table-cell;
1103 cursor:pointer;
1104 padding: 2px 8px;
1105 vertical-align:middle;
1106
1107}
1108
1109.nGY2 .ngy2viewerToolAction {
1110 opacity: 1;
1111}
1112.nGY2 .ngy2viewerToolAction:hover {
1113 opacity: 0.8;
1114}
1115
1116.nGY2 .toolbar .pageCounter{
1117 display: table-cell;
1118 font-size:1.2em;
1119 margin:auto;
1120 vertical-align:middle;
1121 overflow: hidden;
1122}
1123
1124.nGY2 .toolbar .label{
1125 padding:3px 10px 3px 10px;
1126 border-left: 0px solid #000;
1127 overflow: hidden;
1128 display: table-cell;
1129 text-align: left;
1130 vertical-align:middle;
1131 font-size:1em;
1132 background-color:initial;
1133}
1134
1135.nGY2 .toolbar .label .title{
1136 font-size:1.2em;
1137 margin:auto;
1138 vertical-align:middle;
1139 overflow: hidden;
1140}
1141.nGY2 .toolbar .label .description{
1142 font-size:0.9em;
1143 display:table-row;
1144 vertical-align:middle;
1145 overflow: hidden;
1146 color:#eee;
1147}
1148
1149.nGY2 .nGY2viewerGallery {
1150 overflow: hidden;
1151 position: fixed;
1152 display: none; /* by default, no gallery on lightbox */
1153 opacity: 0;
1154 bottom: 5px;
1155}
1156.nGY2 .nGY2viewerGallery .nGY2VThumbnailContainer{
1157 overflow: hidden;
1158 display: inline-block;
1159 position: absolute;
1160 top: 0px;
1161}
1162.nGY2 .nGY2viewerGallery .nGY2VThumbnail {
1163 top: 0px;
1164 padding: 0px;
1165 border:1px solid #888;
1166 position: absolute;
1167 opacity: 1;
1168 background-position: center center;
1169 background-repeat: no-repeat;
1170 background-size: cover;
1171 overflow: hidden;
1172}
1173.nGY2 .nGY2viewerGallery .activeVThumbnail {
1174 border:2px solid #fff;
1175}
1176
1177
1178
1179/**************************************/
1180/* CONSOLE */
1181/**************************************/
1182
1183.nGY2ConsoleParent {
1184 visibility:hidden;
1185 height:0px;
1186 background:#111;
1187 color:#e00;
1188 padding:0px;
1189 margin:2px;
1190}
1191.nGY2ConsoleParent p {
1192 color:#e00;
1193 padding:1px;
1194 margin:0px;
1195}
1196
1197/**************************************/
1198/* AVOID TEXT SELECTION DURING DRAG */
1199/**************************************/
1200.nGY2.unselectable {
1201 -moz-user-select: none;
1202 -khtml-user-select: none;
1203 -webkit-user-select: none;
1204 user-select: none;
1205}
1206
1207/**************************************/
1208/* LOADING BAR */
1209/**************************************/
1210.nGY2 .nanoGalleryLBarOff{
1211 position:relative;
1212 width:100%;
1213 visibility: hidden;
1214 height:2px;
1215 margin:0 0 1px 0;
1216 background-color:#556;
1217}
1218.nGY2 .nanoGalleryLBar {
1219 position:relative;
1220 width:100%;
1221 visibility: visible;
1222 height:2px;
1223 margin:0 0 1px 0;
1224 background-color:#556;
1225}
1226.nGY2 .nanoGalleryLBar > div {
1227 position:absolute;
1228 width:50px;
1229 height:2px;
1230 top:0px;
1231 opacity:.7;
1232}
1233.nGY2 .nanoGalleryLBar > div:nth-child(1){
1234 -webkit-animation: nanoGalleryLBarAnim 2s -.2s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1235 -moz-animation: nanoGalleryLBarAnim 2s -.2s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1236 -ms-animation: nanoGalleryLBarAnim 2s -.2s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1237 -o-animation: nanoGalleryLBarAnim 2s -.2s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1238 animation: nanoGalleryLBarAnim 2s -.2s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1239 background: #111;
1240}
1241.nGY2 .nanoGalleryLBar > div:nth-child(2){
1242 -webkit-animation: nanoGalleryLBarAnim 2s -.4s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1243 -moz-animation: nanoGalleryLBarAnim 2s -.4s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1244 -ms-animation: nanoGalleryLBarAnim 2s -.4s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1245 -o-animation: nanoGalleryLBarAnim 2s -.4s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1246 animation: nanoGalleryLBarAnim 2s -.4s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1247 background: #333;
1248}
1249.nGY2 .nanoGalleryLBar > div:nth-child(3){
1250 -webkit-animation: nanoGalleryLBarAnim 2s -.6s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1251 -moz-animation: nanoGalleryLBarAnim 2s -.6s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1252 -ms-animation: nanoGalleryLBarAnim 2s -.6s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1253 -o-animation: nanoGalleryLBarAnim 2s -.6s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1254 animation: nanoGalleryLBarAnim 2s -.6s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1255 background: #ccd;
1256}
1257.nGY2 .nanoGalleryLBar > div:nth-child(4){
1258 -webkit-animation: nanoGalleryLBarAnim 2s -.8s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1259 -moz-animation: nanoGalleryLBarAnim 2s -.8s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1260 -ms-animation: nanoGalleryLBarAnim 2s -.8s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1261 -o-animation: nanoGalleryLBarAnim 2s -.8s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1262 animation: nanoGalleryLBarAnim 2s -.8s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1263 background: #777;
1264}
1265.nGY2 .nanoGalleryLBar > div:nth-child(5){
1266 -webkit-animation: nanoGalleryLBarAnim 2s -1s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1267 -moz-animation: nanoGalleryLBarAnim 2s -1s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1268 -ms-animation: nanoGalleryLBarAnim 2s -1s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1269 -o-animation: nanoGalleryLBarAnim 2s -1s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1270 animation: nanoGalleryLBarAnim 2s -1s infinite cubic-bezier(0, 0.6, 0.9, 0.0);
1271 background: #ddd;
1272}
1273@-webkit-keyframes nanoGalleryLBarAnim {
1274 0% { left:10%; }
1275 100%{ left:90%; }
1276}
1277@-moz-keyframes nanoGalleryLBarAnim {
1278 0% { left:10%; }
1279 100%{ left:90%; }
1280}
1281@-ms-keyframes nanoGalleryLBarAnim {
1282 0% { left:10%; }
1283 100%{ left:90%; }
1284}
1285@-o-keyframes nanoGalleryLBarAnim {
1286 0% { left:10%; }
1287 100%{ left:90%; }
1288}
1289@keyframes nanoGalleryLBarAnim {
1290 0% { left:10%; }
1291 100%{ left:90%; }
1292}
1293
1294
1295.NGY2ThumbnailLightbox {
1296 cursor: pointer;
1297}
\No newline at end of file