alula-plugins 0.4.25 → 0.4.26

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. data/lib/alula/plugins/version.rb +1 -1
  2. data/plugins/fresco/assets/images/skins/IE6/sprite.png +0 -0
  3. data/plugins/fresco/assets/images/skins/fresco/sprite.png +0 -0
  4. data/plugins/fresco/assets/images/skins/fresco/sprite@x2.png +0 -0
  5. data/plugins/fresco/assets/javascripts/fresco.js +59 -86
  6. data/plugins/fresco/assets/stylesheets/fresco.css.erb +1040 -992
  7. metadata +3 -3
data/plugins/fresco/assets/stylesheets/fresco.css.erb CHANGED
@@ -1,993 +1,1041 @@
1
- /* Overlay */
2
- .fr-overlay {
3
- z-index: 99999;
4
- position: fixed;
5
- top: 0;
6
- left: 0;
7
- height: 100%;
8
- width: 100%;
9
- zoom: 1;
10
- overlay: hidden;
11
- }
12
- .fr-overlay-background {
13
- background: #000;
14
- filter: alpha(opacity=90);
15
- opacity: .9;
16
- float: left;
17
- width: 100%;
18
- height: 100%;
19
- position: relative;
20
- }
21
-
22
- /* Window */
23
- .fr-window {
24
- z-index: 100000;
25
- position: fixed;
26
- top:0;
27
- left: 0;
28
- width: 100%;
29
- height: 100%;
30
- min-height: 100%;
31
- }
32
-
33
- /* z-index */
34
- .fr-ui-outside .fr-info { z-index: 100001; }
35
-
36
- /* Loading icon */
37
- .fr-loading {
38
- z-index: 100001;
39
- position: fixed;
40
- top: 50%;
41
- left: 50%;
42
- width: 52px;
43
- height: 52px;
44
- margin-top: -26px;
45
- margin-left: -26px;
46
- overflow: visible;
47
- }
48
- .fr-loading-offset {
49
- position: absolute;
50
- width: 100%;
51
- height: 100%;
52
- top: 0;
53
- left: 0;
54
- }
55
- .fr-loading-background, .fr-loading-icon {
56
- position: absolute;
57
- top: 0;
58
- left: 0;
59
- width: 100%;
60
- height: 100%;
61
- }
62
- .fr-loading-background {
63
- background: #000 url('<%= asset_url("skins/loading.gif") %>') 50% 50% no-repeat;
64
- opacity: .8;
65
- -webkit-border-radius: 3px;
66
- border-radius: 3px;
67
- position: relative;
68
- float: left;
69
- }
70
- .fr-loading-icon { display: none; }
71
-
72
-
73
- /* Bubble (holds everything) */
74
- .fr-bubble {
75
- float: left;
76
- width: 100%;
77
- height: 100%;
78
- position: relative;
79
- }
80
-
81
- /* Fonts */
82
- .fr-ui,
83
- .fr-info {
84
- font: normal 13px/21px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
85
- }
86
-
87
- /* Frames / UI */
88
- .fr-frames {
89
- height: 100%;
90
- width: 100%;
91
- position: absolute;
92
- display:inline;
93
- top: 0;
94
- left: 0;
95
- overflow: hidden;
96
- }
97
- .fr-frame, .fr-ui {
98
- position: absolute;
99
- top: 0;
100
- left: 0;
101
- width: 100%;
102
- height: 100%;
103
- overflow: hidden;
104
- }
105
-
106
- .fr-window *:not(.fr-caption)::selection,
107
- .fr-window *:not(.fr-caption)::-moz-selection,
108
- .fr-window *:not(.fr-caption)::-webkit-selection {
109
- background: transparent;
110
- }
111
-
112
- .fr-touch-enabled .fr-frame .fr-box {
113
- overflow: scroll !important;
114
- -webkit-overflow-scrolling: touch;
115
- overflow-scrolling: touch;
116
- position: absolute;
117
- top: 0;
118
- left: 0;
119
- width: 100%;
120
- height: 100%;
121
- }
122
-
123
- .fr-touch-enabled .fr-ui,
124
- .fr-touch-enabled .fr-ui-spacer,
125
- .fr-touch-enabled .fr-ui-wrapper,
126
- .fr-touch-enabled .fr-ui-padder,
127
- .fr-touch-enabled .fr-ui-toggle,
128
- .fr-touch-enabled .fr-ui-outer-border,
129
- .fr-touch-enabled .fr-side { pointer-events: none; }
130
-
131
- /* Content */
132
- .fr-box { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
133
- .fr-box-has-ui-outside { overflow: hidden; }
134
- .fr-box-spacer, .fr-ui-spacer {
135
- position: absolute;
136
- -webkit-user-select: none;
137
- -khtml-user-select: none;
138
- -moz-user-select: none;
139
- -ms-user-select: none;
140
- user-select: none;
141
- }
142
- .fr-box-wrapper, .fr-ui-wrapper { position: relative; background: url('<%= asset_url("skins/blank.gif") %>'); }
143
-
144
- .fr-box-padder, .fr-ui-padder {
145
- position: absolute;
146
- top: 0;
147
- left: 0;
148
- zoom: 1;
149
- border-color: transparent;
150
- border-style: solid;
151
- border-width: 0;
152
- background: url('<%= asset_url("skins/blank.gif") %>');
153
- }
154
-
155
- .fr-box-padder, .fr-ui-padder {
156
- position: absolute;
157
- top: 0;
158
- left: 0;
159
- }
160
- .fr-ui-padder { zoom: 1; }
161
-
162
- .fr-box-wrapper, .fr-ui-wrapper, .fr-ui-toggle {
163
- position: relative;
164
- float: left;
165
- display: inline;
166
- zoom: 1;
167
- -webkit-user-select: none;
168
- -khtml-user-select: none;
169
- -moz-user-select: none;
170
- -ms-user-select: none;
171
- user-select: none;
172
- }
173
- .fr-box-wrapper { background: #101010; }
174
-
175
- .fr-ui-wrapper-outside {
176
- float: left;
177
- height: 100%;
178
- width: 100%;
179
- }
180
-
181
- /* outer-border */
182
- .fr-box-outer-border,
183
- .fr-ui-outer-border {
184
- position: relative;
185
- float: left;
186
- display: inline;
187
- height: 100%;
188
- width: 100%;
189
- zoom: 1;
190
- }
191
- /* IE < 8 has a bug where dimensions are ignored without a border */
192
- .fr-ltIE9 .fr-box-outer-border,
193
- .fr-ltIE9 .fr-ui-outer-border { border: 0px solid transparent; }
194
-
195
- .fr-content {
196
- height: 100%;
197
- width: 100%;
198
- zoom:1;
199
- *display:inline;
200
- margin: 0;
201
- padding: 0;
202
- }
203
-
204
- .fr-content-image {
205
- position: absolute;
206
- top: 0;
207
- left: 0;
208
- image-rendering: optimizeQuality;
209
- }
210
-
211
- .fr-content-image-overlay {
212
- position: absolute;
213
- top: 0;
214
- left: 0;
215
- width: 100%;
216
- height: 100%;
217
- -webkit-user-select: none;
218
- -khtml-user-select: none;
219
- -moz-user-select: none;
220
- -ms-user-select: none;
221
- user-select: none;
222
- }
223
-
224
- /* onClick inside ui-outside */
225
- .fr-onclick-side {
226
- position: absolute;
227
- top: 0;
228
- width: 100%;
229
- height: 100%;
230
- background: url('<%= asset_url("skins/blank.gif") %>');
231
- cursor: pointer;
232
- }
233
- .fr-onclick-previous { left: 0; width: 50px; }
234
- .fr-onclick-next { right: 0; }
235
-
236
- /* TODO: fix */
237
- .fr-frame-touch .fr-content { position: absolute; }
238
-
239
- .fr-side {
240
- position: absolute;
241
- top: 0;
242
- height: 100%;
243
- cursor: pointer;
244
- background: url('<%= asset_url("skins/blank.gif") %>') 0 0 repeat;
245
- -webkit-user-select: none;
246
- -khtml-user-select: none;
247
- -moz-user-select: none;
248
- -ms-user-select: none;
249
- user-select: none;
250
- zoom: 1;
251
- }
252
- .fr-side-disabled { cursor: default; }
253
-
254
- .fr-side-button {
255
- position: absolute;
256
- top: 50%;
257
- width: 54px;
258
- height: 72px;
259
- margin: 0 9px;
260
- margin-top: -36px;
261
- pointer-events: auto;
262
- }
263
- .fr-side-button-icon {
264
- float: left;
265
- position: relative;
266
- height: 100%;
267
- width: 100%;
268
- zoom: 1;
269
- }
270
-
271
- .fr-side-previous { left: 0; width: 50%; }
272
- .fr-side-next { right: 0; width: 50%;}
273
-
274
- .fr-side-previous .fr-side-button { left: 0; }
275
- .fr-side-next .fr-side-button { right: 0; }
276
-
277
-
278
- /* sides (UI outside), smaller area */
279
- .fr-ui-outside .fr-side {
280
- width: 72px;
281
- height: 72px;
282
- top: 50%;
283
- margin-top: -36px;
284
- }
285
- .fr-ui-outside .fr-side-button { margin-top: 0; top: 0; }
286
-
287
-
288
- /*
289
- * Info
290
- */
291
- .fr-info {
292
- position: absolute;
293
- bottom: 0px;
294
- left: 0px;
295
- width: 100%;
296
- color: #efefef;
297
- pointer-events: auto;
298
- }
299
- .fr-info-background {
300
- position: absolute;
301
- top: 0;
302
- left: 0;
303
- height: 100%;
304
- width: 100%;
305
- background: #000;
306
- line-height: 1%;
307
- filter: alpha(opacity=80);
308
- opacity: .8;
309
- zoom: 1;
310
- -moz-box-sizing: border-box;
311
- -webkit-box-sizing: border-box;
312
- box-sizing: border-box;
313
- background: #000;
314
- }
315
- .fr-info-outside .fr-info-background { background: #0d0d0d; filter: none; opacity: 1; }
316
-
317
-
318
- .fr-info-padder {
319
- padding: 12px;
320
- display: block;
321
- filter: alpha(opacity=99);
322
- overflow: hidden;
323
- width: auto;
324
- position: relative;
325
- }
326
- .fr-caption {
327
- position: relative;
328
- filter: alpha(opacity=99);
329
- opacity: .99;
330
- width: auto;
331
- word-wrap: no-wrap;
332
- }
333
- .fr-position-text { position: relative; }
334
-
335
- /* UI inside */
336
- .fr-has-position .fr-info-inside .fr-caption { margin-right: 75px; }
337
- .fr-info-inside .fr-position {
338
- filter: alpha(opacity=99);
339
- opacity: .99;
340
- position: relative;
341
- text-align: right;
342
- word-wrap: no-wrap;
343
- line-height: 21px;
344
- color: #b3b3b3;
345
- float: right;
346
- width: 75px;
347
- }
348
- .fr-no-caption .fr-info-inside .fr-position {
349
- width: auto;
350
- margin: 0 1px 1px 0;
351
- color: #b9b9b9;
352
- filter: alpha(opacity=99);
353
- }
354
-
355
- .fr-info-inside .fr-position-background {
356
- position: absolute;
357
- top: 0;
358
- left: 0;
359
- width: 100%;
360
- height: 100%;
361
- }
362
- .fr-no-caption .fr-info-inside .fr-position-background {
363
- border-radius: 12px;
364
- background: #101010;
365
- filter: alpha(opacity=80);
366
- opacity: .8;
367
- -moz-box-sizing: border-box;
368
- -webkit-box-sizing: border-box;
369
- box-sizing: border-box;
370
- }
371
-
372
- .fr-info-inside .fr-position-text { position: relative; }
373
- .fr-no-caption .fr-info-inside .fr-position-text {
374
- float: left;
375
- height: 13px;
376
- line-height: 13px;
377
- padding: 6px 10px;
378
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
379
- }
380
-
381
- /* UI outside */
382
- .fr-ui-outside .fr-position {
383
- position: absolute;
384
- bottom: 15px;
385
- right: 15px;
386
- display: inline;
387
- width: auto;
388
- margin: 0 1px 1px 0;
389
- color: #b9b9b9;
390
- }
391
- .fr-ui-outside .fr-position-background {
392
- position: absolute;
393
- top: 0;
394
- left: 0;
395
- width: 100%;
396
- height: 100%;
397
- border-radius: 12px;
398
- filter: alpha(opacity=80);
399
- opacity: .8;
400
- -moz-box-sizing: border-box;
401
- -webkit-box-sizing: border-box;
402
- box-sizing: border-box;
403
- background: #1e1e1e;
404
- border: 1px solid rgba(180,180,180,.2);
405
- }
406
- .fr-ui-outside .fr-position-text {
407
- position: relative;
408
- float: left;
409
- width: auto;
410
- text-align: right;
411
- word-wrap: no-wrap;
412
- color: #b3b3b3;
413
- -webkit-user-select: none;
414
- -khtml-user-select: none;
415
- -moz-user-select: none;
416
- -ms-user-select: none;
417
- user-select: none;
418
- word-wrap: no-wrap;
419
- padding: 6px 10px;
420
- height: 13px;
421
- line-height: 13px;
422
-
423
- }
424
-
425
-
426
- .fr-ui-outside .fr-position-background {
427
- position: absolute;
428
- top: 0;
429
- left: 0;
430
- width: 100%;
431
- height: 100%;
432
- }
433
-
434
- /* Info without caption */
435
- .fr-no-caption .fr-info-outside { display: none; }
436
- .fr-no-caption .fr-info-padder { pointer-events: none; }
437
- .fr-no-caption .fr-info-background { pointer-events: none; opacity: 0; filter: none; display: none;}
438
-
439
-
440
- /* 1/5 */
441
- .fr-no-caption .fr-position-text,
442
- .fr-ui-outside .fr-position-text {
443
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
444
- }
445
-
446
- /* outside position */
447
- .fr-ui-outside .fr-position {
448
- float: none;
449
- position: absolute;
450
- bottom: 0;
451
- right: 0;
452
- margin: 15px;
453
- }
454
-
455
-
456
-
457
- /* IE 7 */
458
- .fr-ltIE8 .fr-info * { zoom: 1; filter: alpha(opacity=99); }
459
- .fr-ltIE8 .fr-box * { zoom: 1; filter: alpha(opacity=99); }
460
-
461
- /* Info (UI outside) */
462
- .fr-info-outside { bottom: auto; }
463
- .fr-no-caption .fr-info-outside .fr-info-padder { padding: 10px 5px; }
464
- .fr-ui-outside .fr-no-caption .fr-position { margin: 0; }
465
-
466
- /* X */
467
- .fr-close {
468
- position: absolute;
469
- top: 0px;
470
- right: 0px;
471
- padding: 12px;
472
- width: 23px;
473
- height: 23px;
474
- cursor: pointer;
475
- pointer-events: auto;
476
- }
477
-
478
- .fr-close-background {
479
- position: absolute;
480
- top: 12px;
481
- left: 12px;
482
- height: 23px;
483
- width: 23px;
484
- filter: alpha(opacity=80);
485
- opacity: .8;
486
- -moz-transition: background-color .2s ease-in;
487
- -webkit-transition: background-color .2s ease-in;
488
- transition: background-color .2s ease-in;
489
- background-color: #282828;
490
- cursor: pointer;
491
- }
492
- .fr-close:hover .fr-close-background { background-color: #333; }
493
-
494
- .fr-ui-outside .fr-close-background { background-color: #363636; }
495
- .fr-ui-outside .fr-close:hover .fr-close-background { background-color: #434343; }
496
-
497
- .fr-close-icon {
498
- position: relative;
499
- float: left;
500
- width: 100%;
501
- height: 100%;
502
- }
503
-
504
-
505
- /*
506
- * Thumbnails
507
- */
508
- .fr-thumbnails {
509
- position: absolute;
510
- bottom: 0;
511
- left: 0;
512
- width: 100%;
513
- height: 9%;
514
- min-height: 40px;
515
- max-height: 120px;
516
- height: 9%;
517
- padding: 20px 0;
518
- -webkit-tap-highlight-color: rgba(0,0,0,0);
519
- zoom: 1;
520
- }
521
-
522
- .fr-thumbnails,
523
- .fr-thumbnails * {
524
- -webkit-user-select: none;
525
- -khtml-user-select: none;
526
- -moz-user-select: none;
527
- -ms-user-select: none;
528
- user-select: none;
529
- }
530
-
531
-
532
- .fr-thumbnails-slider {
533
- position: relative;
534
- width: 100%;
535
- height: 100%;
536
- float: left;
537
- zoom: 1;
538
- }
539
-
540
- .fr-thumbnails-slider-slide {
541
- position: absolute;
542
- top: 0;
543
- left: 0;
544
- height: 100%;
545
- }
546
-
547
- .fr-thumbnails-wrapper {
548
- position: absolute;
549
- top: 0;
550
- left: 50%;
551
- height: 100%;
552
- padding: 20px 0;
553
- }
554
-
555
- .fr-thumbnails-thumbs {
556
- float: left;
557
- height: 100%;
558
- overflow-x: hidden;
559
- position: relative;
560
- top: 0;
561
- left: 0;
562
- }
563
- .fr-ltIE9 .fr-thumbnails-thumbs {
564
- overflow: hidden;
565
- }
566
- .fr-thumbnails-slide {
567
- position: absolute;
568
- top: 0;
569
- height: 100%;
570
- width: 100%;
571
- }
572
-
573
- .fr-thumbnail {
574
- position: relative;
575
- width: 30px;
576
- height: 100%;
577
- float: left;
578
- margin: 0 10px;
579
- display: inline;
580
- zoom: 1;
581
- cursor: pointer;
582
- }
583
- .fr-ltIE9 .fr-thumbnail * {
584
- overflow: hidden; /* IE6 */
585
- z-index: 1;
586
- zoom: 1;
587
- }
588
-
589
- .fr-thumbnail-wrapper {
590
- position: relative;
591
- background: #161616;
592
- width: 100%;
593
- height: 100%;
594
- float: left;
595
- overflow: hidden;
596
- display: inline; /* IE6 */
597
- z-index: 0; /* IE8 */
598
- }
599
-
600
- .fr-thumbnail-wrapper img { position: absolute; }
601
-
602
- .lv_thumbnail_icon {
603
- width: 36px;
604
- height: 36px;
605
- position: absolute;
606
- top: 50%;
607
- left: 50%;
608
- margin-left: -18px;
609
- margin-top: -18px;
610
- background-position: 99px 99px;
611
- background-repeat: no-repeat;
612
- display: block !important;
613
- }
614
-
615
- .fr-thumbnail-overlay { cursor: pointer; }
616
- .fr-thumbnail-active .fr-thumbnail-overlay { cursor: default; }
617
- .fr-thumbnail-overlay,
618
- .fr-thumbnail-overlay-background,
619
- .fr-thumbnail-overlay-border {
620
- position: absolute;
621
- top: 0;
622
- left: 0;
623
- width: 100%;
624
- height: 100%;
625
- }
626
- .fr-thumbnail-overlay-border {
627
- -moz-box-sizing: border-box;
628
- -webkit-box-sizing: border-box;
629
- box-sizing: border-box;
630
- border-width: 0;
631
- overflow: hidden;
632
- border-style: solid;
633
- border-color: transparent;
634
-
635
- }
636
- .fr-thumbnail img {
637
- filter: alpha(opacity=85);
638
- opacity: .85;
639
- }
640
- .fr-thumbnail:hover img,
641
- .fr-thumbnail-active:hover img {
642
- filter: alpha(opacity=99);
643
- opacity: .99;
644
- }
645
- .fr-thumbnail-active img,
646
- .fr-thumbnail-active:hover img {
647
- filter: alpha(opacity=35);
648
- opacity: .35;
649
- }
650
- .fr-thumbnail-active { cursor: default; }
651
-
652
- /* Thumbnails loading */
653
- .fr-thumbnail-loading,
654
- .fr-thumbnail-loading-background,
655
- .fr-thumbnail-loading-icon {
656
- position: absolute;
657
- top: 0;
658
- left: 0;
659
- width: 100%;
660
- height: 100%;
661
- }
662
- .fr-thumbnail-loading-background {
663
- background-color: #101010;
664
- background-image: url('<%= asset_url("skins/loading.gif") %>');
665
- background-position: 50% 50%;
666
- background-repeat: no-repeat;
667
- opacity: .8;
668
- position: relative;
669
- float: left;
670
- }
671
- /* this element is there as an alternative to putting the loading image on the background */
672
- .fr-thumbnail-loading-icon { display: none; }
673
-
674
-
675
- /* Thumbnail < > */
676
- .fr-thumbnails-side {
677
- float: left;
678
- height: 100%;
679
- width: 28px;
680
- margin: 0 10px;
681
- position: relative;
682
- overflow: hidden;
683
- }
684
- .fr-thumbnails-side-previous { margin-left: 20px; }
685
- .fr-thumbnails-side-next { margin-right: 20px; }
686
-
687
- .fr-thumbnails-side-button {
688
- position: absolute;
689
- top: 50%;
690
- left: 0;
691
- margin-top: -15px;
692
- width: 28px;
693
- height: 28px;
694
- cursor: pointer;
695
- }
696
-
697
- .fr-thumbnails-side-button-background {
698
- position: absolute;
699
- top: 0;
700
- left: 0;
701
- height: 100%;
702
- width: 100%;
703
- filter: alpha(opacity=80);
704
- opacity: .8;
705
- -moz-transition: background-color .2s ease-in;
706
- -webkit-transition: background-color .2s ease-in;
707
- transition: background-color .2s ease-in;
708
- background-color: #333;
709
- cursor: pointer;
710
- border-radius: 4px;
711
- }
712
- .fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background { background-color: #3b3b3b; }
713
-
714
- .fr-thumbnails-side-button-disabled * { cursor: default; }
715
- .fr-thumbnails-side-button-disabled:hover .fr-thumbnails-side-button-background { background-color: #333; }
716
-
717
- .fr-thumbnails-side-button-icon {
718
- height: 42px;
719
- width: 42px;
720
- position: absolute;
721
- top: -7px;
722
- left: -7px;
723
- width: 100%;
724
- height: 100%;
725
- }
726
-
727
-
728
- /* we can improve things on browsers that support media queries */
729
- @media all and (min-height: 0px) {
730
- .fr-thumbnails,
731
- .fr-thumbnails-wrapper { padding: 10px 0; }
732
- .fr-thumbnail,
733
- .fr-thumbnails-side { margin: 0 4px; }
734
- .fr-thumbnails-side-previous { margin-left: 8px; }
735
- .fr-thumbnails-side-next { margin-right: 8px; }
736
- .fr-thumbnail-loading-background { background-image: url('<%= asset_url("skins/loading-small.gif") %>'); }
737
- }
738
- @media all and (min-height: 200px) {
739
- .fr-thumbnails,
740
- .fr-thumbnails-wrapper { padding: 12px 0; }
741
- .fr-thumbnail,
742
- .fr-thumbnails-side { margin: 0 6px; }
743
- .fr-thumbnails-side-previous { margin-left: 12px; }
744
- .fr-thumbnails-side-next { margin-right: 12px; }
745
- }
746
-
747
- @media all and (min-height: 350px) {
748
- .fr-thumbnail-loading-background { background-image: url('<%= asset_url("skins/loading-medium.gif") %>'); }
749
- }
750
-
751
- @media all and (min-height: 500px) {
752
- .fr-thumbnails,
753
- .fr-thumbnails-wrapper { padding: 14px 0; }
754
- .fr-thumbnail,
755
- .fr-thumbnails-side { margin: 0 7px; }
756
- .fr-thumbnails-side-previous { margin-left: 14px; }
757
- .fr-thumbnails-side-next { margin-right: 14px; }
758
- }
759
-
760
- @media all and (min-height: 700px) {
761
- .fr-thumbnails,
762
- .fr-thumbnails-wrapper { padding: 20px 0; }
763
- .fr-thumbnail,
764
- .fr-thumbnails-side { margin: 0 10px; }
765
- .fr-thumbnails-side-previous { margin-left: 20px; }
766
- .fr-thumbnails-side-next { margin-right: 20px; }
767
- .fr-thumbnail-loading-background { background-image: url('<%= asset_url("skins/loading.gif") %>'); }
768
- }
769
-
770
- /* IE specific resets */
771
- .fr-ltIE8 * { zoom: 1; z-index: 1;}
772
- .fr-ltIE9 .fr-content-image-overlay,
773
- .fr-ltIE9 .fr-has-caption .fr-info-outside .fr-info-background { border: 0; }
774
-
775
-
776
-
777
- /*
778
- * ===== Skin: Fresco =====
779
- */
780
- /* Sprite */
781
- .fr-window-fresco .fr-side-button-icon,
782
- .fr-window-fresco .fr-close-icon,
783
- .fr-window-fresco .fr-thumbnails-side-button-icon {
784
- background-image: url('<%= asset_url("skins/fresco/sprite.png") %>');
785
- }
786
- /* High-res sprite */
787
- @media only screen and (-webkit-min-device-pixel-ratio: 2),
788
- only screen and (min-device-pixel-ratio: 2) {
789
- .fr-window-fresco .fr-side-button-icon,
790
- .fr-window-fresco .fr-close-icon,
791
- .fr-window-fresco .fr-side-button-icon {
792
- background-image: url('<%= asset_url("skins/fresco/sprite@x2.png") %>');
793
- background-size: 500px 500px; /* downscaled 50%, size of original sprite */
794
- }
795
- }
796
-
797
- .fr-window-fresco .fr-box-outer-border { box-shadow: 0 0 5px rgba(0,0,0,.4); }
798
- /* outer-border instead of inner-border example (box and ui px should be the same) */
799
- /*
800
- .fr-window-fresco .fr-box-outer-border { border: 10px solid #fff; }
801
- .fr-window-fresco .fr-ui-outer-border { padding: 10px; }
802
- .fr-window-fresco .fr-content-image-overlay { border-width: 0; }
803
- */
804
-
805
- .fr-window-fresco .fr-box-wrapper {
806
- background: #101010;
807
- border-color: transparent;
808
- border-style: solid;
809
- border-width: 0;
810
- }
811
-
812
- .fr-window-fresco .fr-content-image-overlay {
813
- -moz-box-sizing: border-box;
814
- -webkit-box-sizing: border-box;
815
- box-sizing: border-box;
816
- border-width: 1px;
817
- border-style: solid;
818
- border-color: transparent;
819
- border-color: rgba(255, 255, 255, .08);
820
- }
821
- /* remove bottom border if the image has a caption */
822
- .fr-has-caption .fr-box-has-ui-outside .fr-content-image-overlay { border-bottom-width: 0px; }
823
-
824
- .fr-window-fresco .fr-ui-outside .fr-position-text {
825
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
826
- }
827
- .fr-window-fresco .fr-no-caption .fr-info-inside .fr-position-background {
828
- border: 1px solid rgba(180,180,180,.15);
829
- }
830
- .fr-window-fresco .fr-has-caption .fr-info-inside .fr-info-background {
831
- border: 1px solid rgba(68,68,68,.1);
832
- border-top-width: 0;
833
- }
834
- .fr-window-fresco .fr-has-caption .fr-info-outside .fr-info-background {
835
- border: 1px solid rgba(80,80,80,.25);
836
- border-top-width: 0;
837
- }
838
-
839
- .fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
840
- .fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1); }
841
-
842
-
843
- /* < > */
844
- .fr-window-fresco .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -14px; }
845
- .fr-window-fresco .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -14px; }
846
-
847
- .fr-window-fresco .fr-side-previous:hover .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
848
- .fr-window-fresco .fr-side-next:hover .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
849
-
850
- /* disabled state (IE < 9) */
851
- .fr-window-fresco .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
852
- .fr-window-fresco .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
853
- .fr-window-fresco .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
854
- .fr-window-fresco .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }
855
-
856
- /* < > transition */
857
- .fr-window-fresco:not(.fr-ltIE9) .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
858
- .fr-window-fresco:not(.fr-ltIE9) .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
859
- .fr-window-fresco:not(.fr-ltIE9) .fr-side .fr-side-button .fr-side-button-icon {
860
- -moz-transition: opacity .2s ease-in;
861
- -webkit-transition: opacity .2s ease-in;
862
- transition: opacity .2s ease-in;
863
- opacity: .5;
864
- }
865
- .fr-window-fresco .fr-side:hover .fr-side-button .fr-side-button-icon,
866
- .fr-window-fresco .fr-frame .fr-side .fr-side-button-active .fr-side-button-icon {
867
- opacity: 1;
868
- }
869
-
870
- /* disabled side */
871
- .fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled .fr-side-button-icon,
872
- .fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled:hover .fr-side-button-icon { opacity: .2; }
873
- /* on the inside we hide disabled sides */
874
- .fr-window-fresco .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { background-image: none; }
875
-
876
- /* 1/5 */
877
-
878
-
879
- /* X */
880
- .fr-window-fresco .fr-close .fr-close-icon { background-position: -169px -9px;}
881
- .fr-window-fresco .fr-close:hover .fr-close-icon { background-position: -210px -9px; }
882
-
883
- /* X transition */
884
- .fr-window-fresco:not(.fr-ltIE9) .fr-close .fr-close-icon {
885
- background-position: -210px -9px;
886
- -moz-transition: opacity .2s ease-in;
887
- -webkit-transition: opacity .2s ease-in;
888
- transition: opacity .2s ease-in;
889
- opacity: .8;
890
- }
891
- .fr-window-fresco .fr-close:hover .fr-close-icon { opacity: 1; }
892
-
893
- /* Thumbnails */
894
- .fr-window-fresco .fr-thumbnail-wrapper {
895
- border-color: transparent;
896
- border-style: solid;
897
- border-width: 0;
898
- }
899
- .fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
900
- .fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1); }
901
- .fr-window-fresco .fr-thumbnail-wrapper {
902
- box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
903
- }
904
- .fr-window-fresco .fr-thumbnail-overlay-border {
905
- border-width: 1px;
906
- border-color: rgba(255, 255, 255, .08); /* should remain rgba */
907
- }
908
- /* no inner border on active thumbnail */
909
- .fr-thumbnail-active .fr-thumbnail-overlay-border,
910
- .fr-thumbnail-active:hover .fr-thumbnail-overlay-border { border: 0px; }
911
-
912
- /* Thumbnails < > */
913
- .fr-window-fresco .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -160px -41px;}
914
- .fr-window-fresco .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -202px -41px; }
915
- .fr-window-fresco .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -160px -83px;}
916
- .fr-window-fresco .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -202px -83px; }
917
-
918
- /* Thumbnails < > transition */
919
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-icon {
920
- -moz-transition: opacity .2s ease-in;
921
- -webkit-transition: opacity .2s ease-in;
922
- transition: opacity .2s ease-in;
923
- opacity: .8;
924
- }
925
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon,
926
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -160px -41px; }
927
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-icon,
928
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -202px -83px; }
929
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-icon { opacity: 1; }
930
-
931
- /* lower opacity on disabled states */
932
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-disabled,
933
- .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled { opacity: .5; }
934
-
935
- /* lower opacity IE < 9 using images */
936
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
937
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon {
938
- background-position: -244px -41px;
939
- }
940
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
941
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon {
942
- background-position: -244px -83px;
943
- }
944
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background,
945
- .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background {
946
- filter: alpha(opacity=50);
947
- }
948
-
949
-
950
-
951
- /*
952
- * ===== Skin: IE6 (always used there as a fallback) =====
953
- */
954
- .fr-window-IE6 * { zoom: 1; }
955
-
956
- /* Sprite */
957
- .fr-window-IE6 .fr-side-button-icon,
958
- .fr-window-IE6 .fr-close-icon,
959
- .fr-window-IE6 .fr-thumbnails-side-button-icon {
960
- background-image: url('<%= asset_url("skins/ie6/sprite.png") %>');
961
- }
962
-
963
- /* < >
964
- .fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -14px; }
965
- .fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -14px; }*/
966
-
967
- .fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
968
- .fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
969
-
970
- /* disabled */
971
- .fr-window-IE6 .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
972
- .fr-window-IE6 .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
973
- .fr-window-IE6 .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
974
- .fr-window-IE6 .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }
975
- .fr-window-IE6 .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { display: none; }
976
-
977
- /* X */
978
- .fr-window-IE6 .fr-close .fr-close-icon { background-position: -169px -9px;}
979
- .fr-window-IE6 .fr-close:hover .fr-close-icon { background-position: -210px -9px; }
980
-
981
- .fr-window-IE6 .fr-info { filter: alpha(opacity=99); }
982
- .fr-window-IE6 .fr-ui-outside .fr-info { background: red; }
983
- .fr-window-IE6 .fr-close-icon { background-color: #232323; }
984
- .fr-window-IE6 .fr-close .fr-close-background { display: none; }
985
-
986
- .fr-window-IE6 .fr-info-background { display: none; }
987
- .fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-info,
988
- .fr-window-IE6 .fr-info-outside { background: #0d0d0d; }
989
-
990
-
991
- .fr-window-IE6 .fr-position { background: #101010; }
992
- .fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-position { background: none; }
1
+ /* Overlay */
2
+ .fr-overlay {
3
+ z-index: 99999;
4
+ position: fixed;
5
+ top: 0;
6
+ left: 0;
7
+ height: 100%;
8
+ width: 100%;
9
+ zoom: 1;
10
+ overlay: hidden;
11
+ }
12
+ .fr-overlay-background {
13
+ background: #000;
14
+ filter: alpha(opacity=90);
15
+ opacity: .9;
16
+ float: left;
17
+ width: 100%;
18
+ height: 100%;
19
+ position: relative;
20
+ }
21
+
22
+ /* Window */
23
+ .fr-window {
24
+ z-index: 100000;
25
+ position: fixed;
26
+ top:0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ min-height: 100%;
31
+ }
32
+
33
+ /* z-index */
34
+ .fr-ui-outside .fr-info { z-index: 100001; }
35
+
36
+ /* Loading icon */
37
+ .fr-loading {
38
+ z-index: 100001;
39
+ position: fixed;
40
+ top: 50%;
41
+ left: 50%;
42
+ width: 52px;
43
+ height: 52px;
44
+ margin-top: -26px;
45
+ margin-left: -26px;
46
+ overflow: visible;
47
+ }
48
+ .fr-loading-offset {
49
+ position: absolute;
50
+ width: 100%;
51
+ height: 100%;
52
+ top: 0;
53
+ left: 0;
54
+ }
55
+ .fr-loading-background, .fr-loading-icon {
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ width: 100%;
60
+ height: 100%;
61
+ }
62
+ .fr-loading-background {
63
+ background: #0d0d0d url('<%= asset_url("skins/loading.gif") %>') 50% 50% no-repeat;
64
+ opacity: .8;
65
+ -webkit-border-radius: 3px;
66
+ border-radius: 3px;
67
+ position: relative;
68
+ float: left;
69
+ -moz-box-sizing: border-box;
70
+ -webkit-box-sizing: border-box;
71
+ box-sizing: border-box;
72
+ border: 1px solid rgba(80,80,80,.2);
73
+ }
74
+ .fr-loading-icon { display: none; }
75
+
76
+
77
+ /* Bubble (holds everything) */
78
+ .fr-bubble {
79
+ float: left;
80
+ width: 100%;
81
+ height: 100%;
82
+ position: relative;
83
+ }
84
+
85
+ /* Fonts */
86
+ .fr-ui,
87
+ .fr-info {
88
+ font: normal 13px/21px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
89
+ }
90
+
91
+ /* Frames / UI */
92
+ .fr-frames {
93
+ height: 100%;
94
+ width: 100%;
95
+ position: absolute;
96
+ display:inline;
97
+ top: 0;
98
+ left: 0;
99
+ overflow: hidden;
100
+ }
101
+ .fr-frame, .fr-ui {
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ width: 100%;
106
+ height: 100%;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .fr-window *:not(.fr-caption)::selection,
111
+ .fr-window *:not(.fr-caption)::-moz-selection,
112
+ .fr-window *:not(.fr-caption)::-webkit-selection {
113
+ background: transparent;
114
+ }
115
+
116
+ .fr-mobile-touch-enabled .fr-frame .fr-box {
117
+ overflow: scroll !important;
118
+ -webkit-overflow-scrolling: touch;
119
+ overflow-scrolling: touch;
120
+ position: absolute;
121
+ top: 0;
122
+ left: 0;
123
+ width: 100%;
124
+ height: 100%;
125
+ }
126
+
127
+ .fr-mobile-touch-enabled .fr-ui,
128
+ .fr-mobile-touch-enabled .fr-ui-spacer,
129
+ .fr-mobile-touch-enabled .fr-ui-wrapper,
130
+ .fr-mobile-touch-enabled .fr-ui-padder,
131
+ .fr-mobile-touch-enabled .fr-ui-toggle,
132
+ .fr-mobile-touch-enabled .fr-ui-outer-border,
133
+ .fr-mobile-touch-enabled .fr-side { pointer-events: none; }
134
+
135
+ /* Content */
136
+ .fr-box { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
137
+ .fr-box-has-ui-outside { overflow: hidden; }
138
+ .fr-box-spacer, .fr-ui-spacer {
139
+ position: absolute;
140
+ -webkit-user-select: none;
141
+ -khtml-user-select: none;
142
+ -moz-user-select: none;
143
+ -ms-user-select: none;
144
+ user-select: none;
145
+ }
146
+ .fr-box-wrapper, .fr-ui-wrapper { position: relative; background: url('<%= asset_url("skins/blank.gif") %>'); }
147
+
148
+ .fr-box-padder, .fr-ui-padder {
149
+ position: absolute;
150
+ top: 0;
151
+ left: 0;
152
+ zoom: 1;
153
+ border-color: transparent;
154
+ border-style: solid;
155
+ border-width: 0;
156
+ background: url('<%= asset_url("skins/blank.gif") %>');
157
+ }
158
+
159
+ .fr-box-padder, .fr-ui-padder {
160
+ position: absolute;
161
+ top: 0;
162
+ left: 0;
163
+ }
164
+ .fr-ui-padder { zoom: 1; }
165
+
166
+ .fr-box-wrapper, .fr-ui-wrapper, .fr-ui-toggle {
167
+ position: relative;
168
+ float: left;
169
+ display: inline;
170
+ zoom: 1;
171
+ -webkit-user-select: none;
172
+ -khtml-user-select: none;
173
+ -moz-user-select: none;
174
+ -ms-user-select: none;
175
+ user-select: none;
176
+ }
177
+ .fr-box-wrapper { background: #101010; }
178
+
179
+ .fr-ui-wrapper-outside {
180
+ float: left;
181
+ height: 100%;
182
+ width: 100%;
183
+ }
184
+
185
+ /* outer-border */
186
+ .fr-box-outer-border,
187
+ .fr-ui-outer-border {
188
+ position: relative;
189
+ float: left;
190
+ display: inline;
191
+ height: 100%;
192
+ width: 100%;
193
+ zoom: 1;
194
+ }
195
+ /* IE < 8 has a bug where dimensions are ignored without a border */
196
+ .fr-ltIE9 .fr-box-outer-border,
197
+ .fr-ltIE9 .fr-ui-outer-border { border: 0px solid transparent; }
198
+
199
+ .fr-content {
200
+ height: 100%;
201
+ width: 100%;
202
+ zoom:1;
203
+ *display:inline;
204
+ margin: 0;
205
+ padding: 0;
206
+ }
207
+
208
+ .fr-content-image {
209
+ position: absolute;
210
+ top: 0;
211
+ left: 0;
212
+ image-rendering: optimizeQuality;
213
+ max-width: none;
214
+ }
215
+
216
+ .fr-content-image-overlay {
217
+ position: absolute;
218
+ top: 0;
219
+ left: 0;
220
+ width: 100%;
221
+ height: 100%;
222
+ -webkit-user-select: none;
223
+ -khtml-user-select: none;
224
+ -moz-user-select: none;
225
+ -ms-user-select: none;
226
+ user-select: none;
227
+ }
228
+
229
+ /* onClick inside ui-outside */
230
+ .fr-onclick-side {
231
+ position: absolute;
232
+ top: 0;
233
+ width: 100%;
234
+ height: 100%;
235
+ background: url(skins/blank.gif);
236
+ cursor: pointer;
237
+ }
238
+ .fr-onclick-previous { left: 0; width: 50px; }
239
+ .fr-onclick-next { right: 0; }
240
+
241
+ .fr-frame-touch .fr-content { position: absolute; }
242
+
243
+ .fr-side {
244
+ position: absolute;
245
+ top: 0;
246
+ height: 100%;
247
+ cursor: pointer;
248
+ background: url('<%= asset_url("skins/blank.gif") %>') 0 0 repeat;
249
+ -webkit-user-select: none;
250
+ -khtml-user-select: none;
251
+ -moz-user-select: none;
252
+ -ms-user-select: none;
253
+ user-select: none;
254
+ zoom: 1;
255
+ }
256
+ .fr-side-disabled { cursor: default; }
257
+
258
+ .fr-side-button {
259
+ position: absolute;
260
+ top: 50%;
261
+ width: 54px;
262
+ height: 72px;
263
+ margin: 0 9px;
264
+ margin-top: -36px;
265
+ pointer-events: auto;
266
+ }
267
+ .fr-side-button-icon {
268
+ float: left;
269
+ position: relative;
270
+ height: 100%;
271
+ width: 100%;
272
+ zoom: 1;
273
+ }
274
+
275
+ .fr-side-previous { left: 0; width: 50%; }
276
+ .fr-side-next { right: 0; width: 50%;}
277
+
278
+ .fr-side-previous .fr-side-button { left: 0; }
279
+ .fr-side-next .fr-side-button { right: 0; }
280
+
281
+
282
+ /* sides (UI outside), smaller area */
283
+ .fr-ui-outside .fr-side {
284
+ width: 72px;
285
+ height: 72px;
286
+ top: 50%;
287
+ margin-top: -36px;
288
+ }
289
+ .fr-ui-outside .fr-side-button { margin-top: 0; top: 0; }
290
+
291
+
292
+ /*
293
+ * Info
294
+ */
295
+ .fr-info {
296
+ position: absolute;
297
+ bottom: 0px;
298
+ left: 0px;
299
+ width: 100%;
300
+ color: #efefef;
301
+ pointer-events: auto;
302
+ }
303
+ .fr-info-background {
304
+ position: absolute;
305
+ top: 0;
306
+ left: 0;
307
+ height: 100%;
308
+ width: 100%;
309
+ background: #000;
310
+ line-height: 1%;
311
+ filter: alpha(opacity=80);
312
+ opacity: .8;
313
+ zoom: 1;
314
+ -moz-box-sizing: border-box;
315
+ -webkit-box-sizing: border-box;
316
+ box-sizing: border-box;
317
+ background: #000;
318
+ }
319
+ .fr-info-outside .fr-info-background { background: #0d0d0d; filter: none; opacity: 1; }
320
+
321
+
322
+ .fr-info-padder {
323
+ padding: 12px;
324
+ display: block;
325
+ filter: alpha(opacity=99);
326
+ overflow: hidden;
327
+ width: auto;
328
+ position: relative;
329
+ }
330
+ .fr-caption {
331
+ position: relative;
332
+ filter: alpha(opacity=99);
333
+ opacity: .99;
334
+ width: auto;
335
+ word-wrap: no-wrap;
336
+ }
337
+ .fr-position-text { position: relative; }
338
+
339
+ /* UI inside */
340
+ .fr-has-position .fr-info-inside .fr-caption { margin-right: 75px; }
341
+ .fr-info-inside .fr-position {
342
+ filter: alpha(opacity=99);
343
+ opacity: .99;
344
+ position: relative;
345
+ text-align: right;
346
+ word-wrap: no-wrap;
347
+ line-height: 21px;
348
+ color: #b3b3b3;
349
+ float: right;
350
+ width: 75px;
351
+ }
352
+ .fr-no-caption .fr-info-inside .fr-position {
353
+ width: auto;
354
+ margin: 0 1px 1px 0;
355
+ color: #b9b9b9;
356
+ filter: alpha(opacity=99);
357
+ }
358
+
359
+ .fr-info-inside .fr-position-background {
360
+ position: absolute;
361
+ top: 0;
362
+ left: 0;
363
+ width: 100%;
364
+ height: 100%;
365
+ }
366
+ .fr-no-caption .fr-info-inside .fr-position-background {
367
+ border-radius: 12px;
368
+ background: #101010;
369
+ filter: alpha(opacity=80);
370
+ opacity: .8;
371
+ -moz-box-sizing: border-box;
372
+ -webkit-box-sizing: border-box;
373
+ box-sizing: border-box;
374
+ }
375
+
376
+ .fr-info-inside .fr-position-text { position: relative; }
377
+ .fr-no-caption .fr-info-inside .fr-position-text {
378
+ float: left;
379
+ height: 13px;
380
+ line-height: 13px;
381
+ padding: 6px 10px;
382
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
383
+ }
384
+
385
+ /* hide the position on small screens */
386
+ @media all and (max-width: 568px) and (max-height: 320px),
387
+ all and (max-width: 320px) and (max-height: 568px) {
388
+ .fr-has-position .fr-info-inside .fr-caption { margin-right: 0; }
389
+ .fr-position { display: none !important; }
390
+
391
+ /* smaller side buttons */
392
+ .fr-ui-outside .fr-side {
393
+ width: 54px;
394
+ height: 50px;
395
+ margin-top: -25px;
396
+ }
397
+ .fr-side-button {
398
+ width: 40px;
399
+ height: 50px;
400
+ margin: 0 6px;
401
+ margin-top: -25px;
402
+ }
403
+ }
404
+
405
+
406
+ /* UI outside */
407
+ .fr-ui-outside .fr-position {
408
+ position: absolute;
409
+ bottom: 15px;
410
+ right: 15px;
411
+ display: inline;
412
+ width: auto;
413
+ margin: 0 1px 1px 0;
414
+ color: #b9b9b9;
415
+ }
416
+ .fr-ui-outside .fr-position-background {
417
+ position: absolute;
418
+ top: 0;
419
+ left: 0;
420
+ width: 100%;
421
+ height: 100%;
422
+ border-radius: 12px;
423
+ filter: alpha(opacity=80);
424
+ opacity: .8;
425
+ -moz-box-sizing: border-box;
426
+ -webkit-box-sizing: border-box;
427
+ box-sizing: border-box;
428
+ background: #1e1e1e;
429
+ border: 1px solid rgba(180,180,180,.2);
430
+ }
431
+ .fr-ui-outside .fr-position-text {
432
+ position: relative;
433
+ float: left;
434
+ width: auto;
435
+ text-align: right;
436
+ word-wrap: no-wrap;
437
+ color: #b3b3b3;
438
+ -webkit-user-select: none;
439
+ -khtml-user-select: none;
440
+ -moz-user-select: none;
441
+ -ms-user-select: none;
442
+ user-select: none;
443
+ word-wrap: no-wrap;
444
+ padding: 6px 10px;
445
+ height: 13px;
446
+ line-height: 13px;
447
+
448
+ }
449
+
450
+
451
+ .fr-ui-outside .fr-position-background {
452
+ position: absolute;
453
+ top: 0;
454
+ left: 0;
455
+ width: 100%;
456
+ height: 100%;
457
+ }
458
+
459
+ /* Info without caption */
460
+ .fr-no-caption .fr-info-outside { display: none; }
461
+ .fr-no-caption .fr-info-padder { pointer-events: none; }
462
+ .fr-no-caption .fr-info-background { pointer-events: none; opacity: 0; filter: none; display: none;}
463
+
464
+
465
+ /* 1/5 */
466
+ .fr-no-caption .fr-position-text,
467
+ .fr-ui-outside .fr-position-text {
468
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
469
+ }
470
+
471
+ /* outside position */
472
+ .fr-ui-outside .fr-position {
473
+ float: none;
474
+ position: absolute;
475
+ bottom: 0;
476
+ right: 0;
477
+ margin: 15px;
478
+ }
479
+
480
+
481
+
482
+ /* IE 7 */
483
+ .fr-ltIE8 .fr-info * { zoom: 1; filter: alpha(opacity=99); }
484
+ .fr-ltIE8 .fr-box * { zoom: 1; filter: alpha(opacity=99); }
485
+
486
+ /* Info (UI outside) */
487
+ .fr-info-outside { bottom: auto; }
488
+ .fr-no-caption .fr-info-outside .fr-info-padder { padding: 10px 5px; }
489
+ .fr-ui-outside .fr-no-caption .fr-position { margin: 0; }
490
+
491
+ /* X */
492
+ .fr-close {
493
+ position: absolute;
494
+ top: 0px;
495
+ right: 0px;
496
+ padding: 12px;
497
+ width: 23px;
498
+ height: 23px;
499
+ cursor: pointer;
500
+ pointer-events: auto;
501
+ }
502
+
503
+ .fr-close-background {
504
+ position: absolute;
505
+ top: 12px;
506
+ left: 12px;
507
+ height: 23px;
508
+ width: 23px;
509
+ filter: alpha(opacity=80);
510
+ opacity: .8;
511
+ -moz-transition: background-color .2s ease-in;
512
+ -webkit-transition: background-color .2s ease-in;
513
+ transition: background-color .2s ease-in;
514
+ background-color: #282828;
515
+ cursor: pointer;
516
+ }
517
+ .fr-close:hover .fr-close-background { background-color: #333; }
518
+
519
+ .fr-ui-outside .fr-close-background { background-color: #363636; }
520
+ .fr-ui-outside .fr-close:hover .fr-close-background { background-color: #434343; }
521
+
522
+ .fr-close-icon {
523
+ position: relative;
524
+ float: left;
525
+ width: 100%;
526
+ height: 100%;
527
+ }
528
+
529
+
530
+ /*
531
+ * Thumbnails
532
+ */
533
+ .fr-thumbnails {
534
+ position: absolute;
535
+ bottom: 0;
536
+ left: 0;
537
+ width: 100%;
538
+ height: 9%;
539
+ min-height: 40px;
540
+ max-height: 120px;
541
+ height: 9%;
542
+ padding: 20px 0;
543
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
544
+ zoom: 1;
545
+ }
546
+
547
+ .fr-thumbnails,
548
+ .fr-thumbnails * {
549
+ -webkit-user-select: none;
550
+ -khtml-user-select: none;
551
+ -moz-user-select: none;
552
+ -ms-user-select: none;
553
+ user-select: none;
554
+ }
555
+
556
+
557
+ .fr-thumbnails-slider {
558
+ position: relative;
559
+ width: 100%;
560
+ height: 100%;
561
+ float: left;
562
+ zoom: 1;
563
+ }
564
+
565
+ .fr-thumbnails-slider-slide {
566
+ position: absolute;
567
+ top: 0;
568
+ left: 0;
569
+ height: 100%;
570
+ }
571
+
572
+ .fr-thumbnails-wrapper {
573
+ position: absolute;
574
+ top: 0;
575
+ left: 50%;
576
+ height: 100%;
577
+ padding: 20px 0;
578
+ }
579
+
580
+ .fr-thumbnails-thumbs {
581
+ float: left;
582
+ height: 100%;
583
+ overflow-x: hidden;
584
+ position: relative;
585
+ top: 0;
586
+ left: 0;
587
+ }
588
+ .fr-ltIE9 .fr-thumbnails-thumbs {
589
+ overflow: hidden;
590
+ }
591
+ .fr-thumbnails-slide {
592
+ position: absolute;
593
+ top: 0;
594
+ height: 100%;
595
+ width: 100%;
596
+ }
597
+
598
+ .fr-thumbnail {
599
+ position: relative;
600
+ width: 30px;
601
+ height: 100%;
602
+ float: left;
603
+ margin: 0 10px;
604
+ display: inline;
605
+ zoom: 1;
606
+ cursor: pointer;
607
+ }
608
+ .fr-ltIE9 .fr-thumbnail * {
609
+ overflow: hidden; /* IE6 */
610
+ z-index: 1;
611
+ zoom: 1;
612
+ }
613
+
614
+ .fr-thumbnail-wrapper {
615
+ position: relative;
616
+ background: #161616;
617
+ width: 100%;
618
+ height: 100%;
619
+ float: left;
620
+ overflow: hidden;
621
+ display: inline; /* IE6 */
622
+ z-index: 0; /* IE8 */
623
+ }
624
+
625
+ .lv_thumbnail_icon {
626
+ width: 36px;
627
+ height: 36px;
628
+ position: absolute;
629
+ top: 50%;
630
+ left: 50%;
631
+ margin-left: -18px;
632
+ margin-top: -18px;
633
+ background-position: 99px 99px;
634
+ background-repeat: no-repeat;
635
+ display: block !important;
636
+ }
637
+
638
+ .fr-thumbnail-overlay { cursor: pointer; }
639
+ .fr-thumbnail-active .fr-thumbnail-overlay { cursor: default; }
640
+ .fr-thumbnail-overlay,
641
+ .fr-thumbnail-overlay-background,
642
+ .fr-thumbnail-overlay-border {
643
+ position: absolute;
644
+ top: 0;
645
+ left: 0;
646
+ width: 100%;
647
+ height: 100%;
648
+ }
649
+ .fr-thumbnail-overlay-border {
650
+ -moz-box-sizing: border-box;
651
+ -webkit-box-sizing: border-box;
652
+ box-sizing: border-box;
653
+ border-width: 0;
654
+ overflow: hidden;
655
+ border-style: solid;
656
+ border-color: transparent;
657
+
658
+ }
659
+ .fr-thumbnail img {
660
+ position: absolute;
661
+ filter: alpha(opacity=85);
662
+ opacity: .85;
663
+ max-width: none;
664
+ }
665
+ .fr-thumbnail:hover img,
666
+ .fr-thumbnail-active:hover img {
667
+ filter: alpha(opacity=99);
668
+ opacity: .99;
669
+ }
670
+ .fr-thumbnail-active img,
671
+ .fr-thumbnail-active:hover img {
672
+ filter: alpha(opacity=35);
673
+ opacity: .35;
674
+ }
675
+ .fr-thumbnail-active { cursor: default; }
676
+
677
+ /* Thumbnails loading */
678
+ .fr-thumbnail-loading,
679
+ .fr-thumbnail-loading-background,
680
+ .fr-thumbnail-loading-icon {
681
+ position: absolute;
682
+ top: 0;
683
+ left: 0;
684
+ width: 100%;
685
+ height: 100%;
686
+ }
687
+ .fr-thumbnail-loading-background {
688
+ background-color: #101010;
689
+ background-image: url('<%= asset_url("skins/loading.gif") %>');
690
+ background-position: 50% 50%;
691
+ background-repeat: no-repeat;
692
+ opacity: .8;
693
+ position: relative;
694
+ float: left;
695
+ }
696
+ /* this element is there as an alternative to putting the loading image on the background */
697
+ .fr-thumbnail-loading-icon { display: none; }
698
+
699
+
700
+ /* Thumbnail < > */
701
+ .fr-thumbnails-side {
702
+ float: left;
703
+ height: 100%;
704
+ width: 28px;
705
+ margin: 0 10px;
706
+ position: relative;
707
+ overflow: hidden;
708
+ }
709
+ .fr-thumbnails-side-previous { margin-left: 20px; }
710
+ .fr-thumbnails-side-next { margin-right: 20px; }
711
+
712
+ .fr-thumbnails-side-button {
713
+ position: absolute;
714
+ top: 50%;
715
+ left: 0;
716
+ margin-top: -15px;
717
+ width: 28px;
718
+ height: 28px;
719
+ cursor: pointer;
720
+ }
721
+
722
+ .fr-thumbnails-side-button-background {
723
+ position: absolute;
724
+ top: 0;
725
+ left: 0;
726
+ height: 100%;
727
+ width: 100%;
728
+ filter: alpha(opacity=80);
729
+ opacity: .8;
730
+ -moz-transition: background-color .2s ease-in;
731
+ -webkit-transition: background-color .2s ease-in;
732
+ transition: background-color .2s ease-in;
733
+ background-color: #333;
734
+ cursor: pointer;
735
+ border-radius: 4px;
736
+ }
737
+ .fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background { background-color: #3b3b3b; }
738
+
739
+ .fr-thumbnails-side-button-disabled * { cursor: default; }
740
+ .fr-thumbnails-side-button-disabled:hover .fr-thumbnails-side-button-background { background-color: #333; }
741
+
742
+ .fr-thumbnails-side-button-icon {
743
+ height: 42px;
744
+ width: 42px;
745
+ position: absolute;
746
+ top: -7px;
747
+ left: -7px;
748
+ width: 100%;
749
+ height: 100%;
750
+ }
751
+
752
+
753
+ /* we can improve things on browsers that support media queries */
754
+ @media all and (min-height: 0px) {
755
+ .fr-thumbnails,
756
+ .fr-thumbnails-wrapper { padding: 10px 0; }
757
+ .fr-thumbnail,
758
+ .fr-thumbnails-side { margin: 0 4px; }
759
+ .fr-thumbnails-side-previous { margin-left: 8px; }
760
+ .fr-thumbnails-side-next { margin-right: 8px; }
761
+ .fr-thumbnail-loading-background { background-image: url('<%= asset_url("skins/loading-small.gif") %>'); }
762
+ }
763
+ @media all and (min-height: 200px) {
764
+ .fr-thumbnails,
765
+ .fr-thumbnails-wrapper { padding: 12px 0; }
766
+ .fr-thumbnail,
767
+ .fr-thumbnails-side { margin: 0 6px; }
768
+ .fr-thumbnails-side-previous { margin-left: 12px; }
769
+ .fr-thumbnails-side-next { margin-right: 12px; }
770
+ }
771
+
772
+ @media all and (min-height: 350px) {
773
+ .fr-thumbnail-loading-background { background-image: url('<%= asset_url("<%= asset_url("skins/loading-medium.gif") %>") %>'); }
774
+ }
775
+
776
+ @media all and (min-height: 500px) {
777
+ .fr-thumbnails,
778
+ .fr-thumbnails-wrapper { padding: 14px 0; }
779
+ .fr-thumbnail,
780
+ .fr-thumbnails-side { margin: 0 7px; }
781
+ .fr-thumbnails-side-previous { margin-left: 14px; }
782
+ .fr-thumbnails-side-next { margin-right: 14px; }
783
+ }
784
+
785
+ @media all and (min-height: 700px) {
786
+ .fr-thumbnails,
787
+ .fr-thumbnails-wrapper { padding: 20px 0; }
788
+ .fr-thumbnail,
789
+ .fr-thumbnails-side { margin: 0 10px; }
790
+ .fr-thumbnails-side-previous { margin-left: 20px; }
791
+ .fr-thumbnails-side-next { margin-right: 20px; }
792
+ .fr-thumbnail-loading-background { background-image: url('<%= asset_url("<%= asset_url("skins/loading.gif") %>") %>'); }
793
+ }
794
+
795
+ /* IE specific resets */
796
+ .fr-ltIE8 * { zoom: 1; z-index: 1;}
797
+ .fr-ltIE9 .fr-content-image-overlay,
798
+ .fr-ltIE9 .fr-has-caption .fr-info-outside .fr-info-background { border: 0; }
799
+
800
+
801
+
802
+ /*
803
+ * ===== Skin: Fresco =====
804
+ */
805
+ /* Sprite */
806
+ .fr-window-fresco .fr-side-button-icon,
807
+ .fr-window-fresco .fr-close-icon,
808
+ .fr-window-fresco .fr-thumbnails-side-button-icon {
809
+ background-image: url('<%= asset_url("<%= asset_url("skins/fresco/sprite.png") %>") %>');
810
+ }
811
+ /* High-res sprite */
812
+ @media only screen and (-webkit-min-device-pixel-ratio: 2),
813
+ only screen and (min-device-pixel-ratio: 2) {
814
+ .fr-window-fresco .fr-side-button-icon,
815
+ .fr-window-fresco .fr-close-icon,
816
+ .fr-window-fresco .fr-side-button-icon {
817
+ background-image: url('<%= asset_url("skins/fresco/sprite@x2.png") %>');
818
+ background-size: 500px 500px; /* downscaled 50%, size of original sprite */
819
+ }
820
+ }
821
+
822
+ .fr-window-fresco .fr-box-outer-border { box-shadow: 0 0 5px rgba(0,0,0,.4); }
823
+ /* outer-border instead of inner-border example (box and ui px should be the same) */
824
+ /*
825
+ .fr-window-fresco .fr-box-outer-border { border: 10px solid #fff; }
826
+ .fr-window-fresco .fr-ui-outer-border { padding: 10px; }
827
+ .fr-window-fresco .fr-content-image-overlay { border-width: 0; }
828
+ */
829
+
830
+ .fr-window-fresco .fr-box-wrapper {
831
+ background: #101010;
832
+ border-color: transparent;
833
+ border-style: solid;
834
+ border-width: 0;
835
+ }
836
+
837
+ .fr-window-fresco .fr-content-image-overlay {
838
+ -moz-box-sizing: border-box;
839
+ -webkit-box-sizing: border-box;
840
+ box-sizing: border-box;
841
+ border-width: 1px;
842
+ border-style: solid;
843
+ border-color: transparent;
844
+ border-color: rgba(255, 255, 255, .08);
845
+ }
846
+ /* remove bottom border if the image has a caption, or add it when it has a caption */
847
+ .fr-window-fresco .fr-has-caption .fr-box-has-ui-outside .fr-content-image-overlay { border-bottom-width: 0px; }
848
+ .fr-window-fresco .fr-no-caption .fr-box-has-ui-outside .fr-content-image-overlay { border-bottom-width: 1px; }
849
+
850
+ .fr-window-fresco .fr-ui-outside .fr-position-text {
851
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
852
+ }
853
+ .fr-window-fresco .fr-no-caption .fr-info-inside .fr-position-background {
854
+ border: 1px solid rgba(180,180,180,.15);
855
+ }
856
+ .fr-window-fresco .fr-has-caption .fr-info-inside .fr-info-background {
857
+ border: 1px solid rgba(68,68,68,.1);
858
+ border-top-width: 0;
859
+ }
860
+ .fr-window-fresco .fr-has-caption .fr-info-outside .fr-info-background {
861
+ border: 1px solid rgba(80,80,80,.25);
862
+ border-top-width: 0;
863
+ }
864
+
865
+ .fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
866
+ .fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1); }
867
+
868
+
869
+ /* < > */
870
+ .fr-window-fresco .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -14px; }
871
+ .fr-window-fresco .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -14px; }
872
+
873
+ .fr-window-fresco .fr-side-previous:hover .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
874
+ .fr-window-fresco .fr-side-next:hover .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
875
+
876
+ /* disabled state (IE < 9) */
877
+ .fr-window-fresco .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
878
+ .fr-window-fresco .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
879
+ .fr-window-fresco .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
880
+ .fr-window-fresco .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }
881
+
882
+ /* < > transition */
883
+ .fr-window-fresco:not(.fr-ltIE9) .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
884
+ .fr-window-fresco:not(.fr-ltIE9) .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
885
+ .fr-window-fresco:not(.fr-ltIE9) .fr-side .fr-side-button .fr-side-button-icon {
886
+ -moz-transition: opacity .2s ease-in;
887
+ -webkit-transition: opacity .2s ease-in;
888
+ transition: opacity .2s ease-in;
889
+ opacity: .5;
890
+ }
891
+ .fr-window-fresco .fr-side:hover .fr-side-button .fr-side-button-icon,
892
+ .fr-window-fresco .fr-frame .fr-side .fr-side-button-active .fr-side-button-icon {
893
+ opacity: 1;
894
+ }
895
+
896
+ /* disabled side */
897
+ .fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled .fr-side-button-icon,
898
+ .fr-window-fresco:not(.fr-ltIE9) .fr-ui-outside .fr-side .fr-side-button-disabled:hover .fr-side-button-icon { opacity: .2; }
899
+ /* on the inside we hide disabled sides */
900
+ .fr-window-fresco .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { background-image: none; }
901
+
902
+
903
+ /* responsive < > */
904
+ @media all and (max-width: 568px) and (max-height: 320px),
905
+ all and (max-width: 320px) and (max-height: 568px) {
906
+ .fr-window-fresco .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -300px; }
907
+ .fr-window-fresco .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -300px; }
908
+
909
+ .fr-window-fresco .fr-side-previous:hover .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
910
+ .fr-window-fresco .fr-side-next:hover .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }
911
+
912
+ .fr-window-fresco:not(.fr-ltIE9) .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
913
+ .fr-window-fresco:not(.fr-ltIE9) .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }
914
+ }
915
+
916
+ /* X */
917
+ .fr-window-fresco .fr-close .fr-close-icon { background-position: -169px -9px;}
918
+ .fr-window-fresco .fr-close:hover .fr-close-icon { background-position: -210px -9px; }
919
+
920
+ /* X transition */
921
+ .fr-window-fresco:not(.fr-ltIE9) .fr-close .fr-close-icon {
922
+ background-position: -210px -9px;
923
+ -moz-transition: opacity .2s ease-in;
924
+ -webkit-transition: opacity .2s ease-in;
925
+ transition: opacity .2s ease-in;
926
+ opacity: .8;
927
+ }
928
+ .fr-window-fresco .fr-close:hover .fr-close-icon { opacity: 1; }
929
+
930
+ /* Thumbnails */
931
+ .fr-window-fresco .fr-thumbnail-wrapper {
932
+ border-color: transparent;
933
+ border-style: solid;
934
+ border-width: 0;
935
+ }
936
+ .fr-window-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
937
+ .fr-window-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, .1); }
938
+ .fr-window-fresco .fr-thumbnail-wrapper {
939
+ box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
940
+ }
941
+ .fr-window-fresco .fr-thumbnail-overlay-border {
942
+ border-width: 1px;
943
+ border-color: rgba(255, 255, 255, .08); /* should remain rgba */
944
+ }
945
+ /* no inner border on active thumbnail */
946
+ .fr-thumbnail-active .fr-thumbnail-overlay-border,
947
+ .fr-thumbnail-active:hover .fr-thumbnail-overlay-border { border: 0px; }
948
+
949
+ /* Thumbnails < > */
950
+ .fr-window-fresco .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -160px -41px;}
951
+ .fr-window-fresco .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -202px -41px; }
952
+ .fr-window-fresco .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -160px -83px;}
953
+ .fr-window-fresco .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -202px -83px; }
954
+
955
+ /* Thumbnails < > transition */
956
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-icon {
957
+ -moz-transition: opacity .2s ease-in;
958
+ -webkit-transition: opacity .2s ease-in;
959
+ transition: opacity .2s ease-in;
960
+ opacity: .8;
961
+ }
962
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon,
963
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -160px -41px; }
964
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-icon,
965
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -202px -83px; }
966
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-icon { opacity: 1; }
967
+
968
+ /* lower opacity on disabled states */
969
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side .fr-thumbnails-side-button-disabled,
970
+ .fr-window-fresco:not(.fr-ltIE9) .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled { opacity: .5; }
971
+
972
+ /* lower opacity IE < 9 using images */
973
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
974
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon {
975
+ background-position: -244px -41px;
976
+ }
977
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon,
978
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon {
979
+ background-position: -244px -83px;
980
+ }
981
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background,
982
+ .fr-window-fresco.fr-ltIE9 .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background {
983
+ filter: alpha(opacity=50);
984
+ }
985
+
986
+
987
+
988
+ /*
989
+ * ===== Skin: IE6 (always used there as a fallback) =====
990
+ */
991
+ .fr-window-IE6 * { zoom: 1; }
992
+
993
+ /* Sprite */
994
+ .fr-window-IE6 .fr-side-button-icon,
995
+ .fr-window-IE6 .fr-close-icon,
996
+ .fr-window-IE6 .fr-thumbnails-side-button-icon {
997
+ background-image: url('<%= asset_url("skins/ie6/sprite.png") %>');
998
+ }
999
+
1000
+ /* < > */
1001
+ .fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: -13px -114px; }
1002
+ .fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -93px -114px; }
1003
+
1004
+ /* disabled */
1005
+ .fr-window-IE6 .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
1006
+ .fr-window-IE6 .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -13px -214px; }
1007
+ .fr-window-IE6 .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
1008
+ .fr-window-IE6 .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -93px -214px; }
1009
+ .fr-window-IE6 .fr-ui-inside .fr-side-button-disabled .fr-side-button-icon { display: none; }
1010
+
1011
+
1012
+ /* responsive < > */
1013
+ @media all and (max-width: 568px) and (max-height: 320px),
1014
+ all and (max-width: 320px) and (max-height: 568px) {
1015
+ .fr-window-IE6 .fr-side-previous .fr-side-button .fr-side-button-icon { background-position: 0px -350px; }
1016
+ .fr-window-IE6 .fr-side-next .fr-side-button .fr-side-button-icon { background-position: -40px -350px; }
1017
+
1018
+ .fr-window-IE6 .fr-side-previous .fr-side-button-disabled .fr-side-button-icon,
1019
+ .fr-window-IE6 .fr-side-previous:hover .fr-side-button-disabled .fr-side-button-icon { background-position: 0px -400px; }
1020
+ .fr-window-IE6 .fr-side-next .fr-side-button-disabled .fr-side-button-icon,
1021
+ .fr-window-IE6 .fr-side-next:hover .fr-side-button-disabled .fr-side-button-icon { background-position: -40px -400px; }
1022
+ }
1023
+
1024
+
1025
+ /* X */
1026
+ .fr-window-IE6 .fr-close .fr-close-icon { background-position: -169px -9px;}
1027
+ .fr-window-IE6 .fr-close:hover .fr-close-icon { background-position: -210px -9px; }
1028
+
1029
+ .fr-window-IE6 .fr-info { filter: alpha(opacity=99); }
1030
+ .fr-window-IE6 .fr-ui-outside .fr-info { background: red; }
1031
+ .fr-window-IE6 .fr-close-icon { background-color: #232323; }
1032
+ .fr-window-IE6 .fr-close .fr-close-background { display: none; }
1033
+
1034
+ .fr-window-IE6 .fr-info-background { display: none; }
1035
+ .fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-info,
1036
+ .fr-window-IE6 .fr-info-outside { background: #0d0d0d; }
1037
+
1038
+
1039
+ .fr-window-IE6 .fr-position { background: #101010; }
1040
+ .fr-window-IE6 .fr-has-caption .fr-ui-inside .fr-position { background: none; }
993
1041
  .fr-window-IE6 .fr-position .fr-position-background { display: none; }