UNPKG

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