igv-rails 0.0.1.12

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,1151 @@
1
+
2
+ /* navigation bar */
3
+ .igvNavigation {
4
+
5
+ position: relative;
6
+ top: 0;
7
+ left: 0;
8
+
9
+ height: 32px;
10
+ width: auto;
11
+
12
+ margin-left: 48px;
13
+ margin-right: 32px;
14
+ margin-bottom: 32px;
15
+ /*background-color: lawngreen;*/
16
+ }
17
+
18
+ .igvNavigationSearch {
19
+
20
+ position: relative;
21
+ top: 0;
22
+ left: 0;
23
+
24
+ height: 100%;
25
+ width: 220px;
26
+
27
+ float: left;
28
+
29
+ /*background-color: deepskyblue;*/
30
+ }
31
+
32
+ .igvNavigationZoom {
33
+
34
+ position: relative;
35
+
36
+ height: 100%;
37
+ float: right;
38
+
39
+ /*background-color: lightcoral;*/
40
+ }
41
+
42
+ .igvNavigationPadding {
43
+
44
+ padding-left: 12px;
45
+ padding-right: 4px;
46
+ }
47
+
48
+ /* pop up menu */
49
+ .igv-popover {
50
+
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+
55
+ overflow-y: hidden;
56
+ /*width: 100%;*/
57
+ height: auto;
58
+
59
+ z-index: 1000;
60
+
61
+ font-family: 'PT Sans', sans-serif;
62
+ /*font-size: small;*/
63
+ font-size: small;
64
+ font-weight: 400;
65
+ color: #444;
66
+
67
+ background: #fff;
68
+
69
+ border-color: #a2a2a2;
70
+ border-style: solid;
71
+ border-width: thin;
72
+
73
+ display: none;
74
+ }
75
+
76
+ .igv-popoverHeader {
77
+
78
+ position: relative;
79
+ top: 0;
80
+ left: 0;
81
+
82
+ width: 100%;
83
+ height: 24px;
84
+
85
+ border-bottom-color: #a2a2a2;
86
+ border-bottom-style: solid;
87
+ border-bottom-width: thin;
88
+
89
+ background-color: #eee;
90
+
91
+ }
92
+
93
+ .igv-popoverClose {
94
+
95
+ position: absolute;
96
+ top: 0;
97
+ right: 0;
98
+
99
+ height: 100%;
100
+ width: 24px;
101
+
102
+ text-align: center;
103
+ line-height: 24px;
104
+
105
+
106
+ color: #444;
107
+
108
+ /*background-color: greenyellow;*/
109
+ }
110
+
111
+ .igv-popoverCloseFontAwesome {
112
+
113
+ cursor: pointer;
114
+ color: #888;
115
+ }
116
+
117
+ .igv-popoverClose:hover {
118
+ color: #fff;
119
+ }
120
+
121
+ .igv-popoverContent {
122
+
123
+ width: auto;
124
+ height:auto;
125
+
126
+ padding: 4px;
127
+
128
+ /*background-color: hotpink;*/
129
+ }
130
+
131
+ .igv-popoverBorderTop {
132
+ border-top-color: #a2a2a2;
133
+ /*border-top-color: #f00;*/
134
+ border-top-style: solid;
135
+ border-top-width: thin;
136
+ }
137
+
138
+ .igv-popoverBorderBottom {
139
+ border-bottom-color: #eee;
140
+ border-bottom-style: solid;
141
+ border-bottom-width: thin;
142
+ }
143
+
144
+ .igv-popoverName {
145
+ font-weight: bold;
146
+ padding-right: 4px;
147
+ float: left;
148
+ }
149
+
150
+ .igv-popoverValue {
151
+ padding-left: 4px;
152
+ float: left;
153
+ }
154
+
155
+ /* spinner */
156
+ .igv-spinner-fa-start {
157
+
158
+ position: absolute;
159
+ left:50%;
160
+ top:50%;
161
+ z-index: 256;
162
+ display: inline;
163
+ }
164
+
165
+ .igv-spinner-fa-stop {
166
+ position: relative;
167
+ left:50%;
168
+ top:50%;
169
+ z-index: -256;
170
+ display: none;
171
+ }
172
+
173
+ .igv-root-div {
174
+
175
+ position: relative;
176
+ margin-left: 10px;
177
+ margin-right: 10px;
178
+ padding-top:50px;
179
+ left: 0;
180
+ right: 0;
181
+ height: auto;
182
+
183
+ -webkit-box-sizing: border-box;
184
+ -moz-box-sizing: border-box;
185
+ box-sizing: border-box;
186
+
187
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
188
+
189
+ -webkit-touch-callout: none;
190
+
191
+ -webkit-user-select: none;
192
+ -moz-user-select: none;
193
+ -ms-user-select: none;
194
+ user-select: none;
195
+ }
196
+
197
+ .igv-karyo-div {
198
+ position: relative;
199
+ left: 0;
200
+ top: 0;
201
+ height:200px;
202
+ }
203
+
204
+ .igv-karyo-content-div {
205
+ left:0;
206
+ top:0;
207
+ width:100%;
208
+ height:100%;
209
+ }
210
+
211
+ .igv-karyo-canvas {
212
+ left:0;
213
+ top:0;
214
+ width:100%;
215
+ height:100%;
216
+ }
217
+
218
+ .igv-header-div {
219
+ position: relative;
220
+ left: 0;
221
+ right: 0;
222
+ }
223
+
224
+ /* ideogram */
225
+ .igv-ideogram-div {
226
+ position: relative;
227
+ top: 0;
228
+ left: 0;
229
+ height: 40px;
230
+ width : 100%;
231
+ }
232
+
233
+ .igv-ideogram-chr-div {
234
+
235
+ position: absolute;
236
+ left: 0;
237
+ top: 50%;
238
+
239
+ transform: translateY(-50%);
240
+
241
+ padding-left: 12px;
242
+
243
+ font-size: small;
244
+ font-weight: 400;
245
+
246
+ float: left;
247
+
248
+ }
249
+
250
+ .igv-ideogram-content-div {
251
+
252
+ position: absolute;
253
+ top: 0;
254
+ left:50px;
255
+ right: 48px;
256
+
257
+ height: 100%;
258
+
259
+ float: right;
260
+
261
+ }
262
+
263
+ .igv-ideogram-canvas {
264
+ left:0;
265
+ top:0;
266
+ width:100%;
267
+ height:100%;
268
+ }
269
+
270
+ .igv-track-container-div {
271
+ position: relative;
272
+ left: 0;
273
+ right: 0;
274
+ padding-top: 8px;
275
+ padding-bottom: 8px;
276
+ /*font-size: medium;*/
277
+ height: auto;
278
+ overflow: hidden;
279
+ }
280
+
281
+ .igv-track-div {
282
+ position: relative;
283
+ width: 100%;
284
+ overflow:hidden;
285
+ margin-bottom:10px;
286
+ }
287
+
288
+ .igv-fa-vertical-center-shim {
289
+ vertical-align: middle;
290
+ }
291
+
292
+ .igv-track-label-span-base {
293
+
294
+ font-family: 'PT Sans', sans-serif;
295
+ /*font-size: small;*/
296
+ font-size: small;
297
+ font-weight: 400;
298
+ color: #444;
299
+
300
+ margin-left: 2px;
301
+ margin-right: 2px;
302
+ position: relative;
303
+ /*cursor: pointer;*/
304
+ }
305
+
306
+ .igv-track-label-span-highlighted {
307
+ font-weight: bold;
308
+ color: rgba(204, 51, 0, 1);
309
+ }
310
+
311
+ .igv-track-label {
312
+ position: absolute;
313
+ top: 10px;
314
+ left: 96px;
315
+ cursor: pointer;
316
+ }
317
+
318
+ .igv-track-disable-button-fa {
319
+ position: absolute;
320
+ top: 8px;
321
+ right: 12px;
322
+ cursor: pointer;
323
+ color: #222;
324
+ }
325
+
326
+ .igv-right-hand-gutter {
327
+ position: absolute;
328
+ right: 0;
329
+ width: 48px;
330
+ height: 100%;
331
+
332
+ background: white;
333
+ text-align: center;
334
+
335
+ /*border-left-width: thin;*/
336
+ /*border-left-color: #444;*/
337
+ /*border-left-style: solid;*/
338
+ }
339
+
340
+ .igv-app-icon-box {
341
+
342
+ position: absolute;
343
+ left: 0;
344
+ right: 0;
345
+ top: 0;
346
+ bottom: 0;
347
+
348
+ width: 100%;
349
+ height: 30px;
350
+
351
+ margin: auto;
352
+
353
+ background: white;
354
+
355
+ }
356
+
357
+ .igv-app-icon {
358
+ color: grey;
359
+ background-color: white;
360
+ }
361
+
362
+ .igv-app-icon:hover,
363
+ .igv-app-icon:focus,
364
+ .igv-app-icon:active {
365
+ color: rgba(51, 51, 51, 1);
366
+ }
367
+
368
+ .igv-track-menu-gear {
369
+ position: absolute;
370
+ left: 20px;
371
+ top: 0;
372
+ }
373
+
374
+ .igv-track-menu-container {
375
+ padding-left: 2px;
376
+ padding-right: 2px;
377
+ }
378
+
379
+ .igv-track-menu-container a {
380
+ color: inherit;
381
+ text-decoration: none;
382
+ }
383
+
384
+ .igv-track-menu-item {
385
+ /* nuthin */
386
+ }
387
+
388
+ .igv-track-menu-item:hover,
389
+ .igv-track-menu-item:focus,
390
+ .igv-track-menu-item:active {
391
+ font-weight: bolder;
392
+ color: rgba(51, 51, 51, 1);
393
+ }
394
+
395
+ .igv-track-menu-discard {
396
+ position: absolute;
397
+ left: 20px;
398
+ top: 0;
399
+ color: grey;
400
+ background-color: white;
401
+ }
402
+
403
+ .igv-track-menu-discard:hover,
404
+ .igv-track-menu-discard:focus,
405
+ .igv-track-menu-discard:active {
406
+ color: rgba(51, 51, 51, 1);
407
+ }
408
+
409
+ .igv-left-hand-gutter {
410
+ position: absolute;
411
+ left: 0;
412
+ width: 50px;
413
+ height: 100%;
414
+ }
415
+
416
+ .igv-app-icon-container {
417
+ position: absolute;
418
+ left: 10px;
419
+ top: 4px;
420
+ width: auto;
421
+ height:auto;
422
+ background: rgb(255, 255, 255);
423
+ display: inline-block;
424
+ }
425
+
426
+ .igv-track-control-canvas {
427
+ position: absolute;
428
+ }
429
+
430
+ .igv-viewport-div {
431
+ position: absolute;
432
+ left: 50px;
433
+ right: 48px;
434
+ height: 100%;
435
+ overflow-x: hidden;
436
+ overflow-y: auto;
437
+ }
438
+
439
+ .igv-content-div {
440
+ position: relative;
441
+ margin-left: 10px;
442
+ margin-right: 10px;
443
+ left: 0;
444
+ right: 0;
445
+ height:100%;
446
+ }
447
+
448
+ .igv-content-canvas {
449
+ position: absolute;
450
+ width: 100%;
451
+ height: 100%;
452
+ }
453
+
454
+
455
+ .spacer5 {
456
+ height: 5px;
457
+ width: 100%;
458
+ font-size: 0;
459
+ margin: 0;
460
+ padding: 0;
461
+ border: 0;
462
+ display: block;
463
+ }
464
+
465
+ .spacer10 {
466
+ height: 10px;
467
+ width: 100%;
468
+ font-size: 0;
469
+ margin: 0;
470
+ padding: 0;
471
+ border: 0;
472
+ display: block;
473
+ }
474
+
475
+ .spacer15 {
476
+ height: 15px;
477
+ width: 100%;
478
+ font-size: 0;
479
+ margin: 0;
480
+ padding: 0;
481
+ border: 0;
482
+ display: block;
483
+ }
484
+
485
+ .spacer20 {
486
+ height: 20px;
487
+ width: 100%;
488
+ font-size: 0;
489
+ margin: 0;
490
+ padding: 0;
491
+ border: 0;
492
+ display: block;
493
+ }
494
+
495
+ .spacer25 {
496
+ height: 25px;
497
+ width: 100%;
498
+ font-size: 0;
499
+ margin: 0;
500
+ padding: 0;
501
+ border: 0;
502
+ display: block;
503
+ }
504
+
505
+ .spacer30 {
506
+ height: 30px;
507
+ width: 100%;
508
+ font-size: 0;
509
+ margin: 0;
510
+ padding: 0;
511
+ border: 0;
512
+ display: block;
513
+ }
514
+
515
+ .spacer35 {
516
+ height: 35px;
517
+ width: 100%;
518
+ font-size: 0;
519
+ margin: 0;
520
+ padding: 0;
521
+ border: 0;
522
+ display: block;
523
+ }
524
+
525
+ .spacer40 {
526
+ height: 40px;
527
+ width: 100%;
528
+ font-size: 0;
529
+ margin: 0;
530
+ padding: 0;
531
+ border: 0;
532
+ display: block;
533
+ }
534
+
535
+ .spacer45 {
536
+ height: 45px;
537
+ width: 100%;
538
+ font-size: 0;
539
+ margin: 0;
540
+ padding: 0;
541
+ border: 0;
542
+ display: block;
543
+ }
544
+
545
+ .spacer50 {
546
+ height: 50px;
547
+ width: 100%;
548
+ font-size: 0;
549
+ margin: 0;
550
+ padding: 0;
551
+ border: 0;
552
+ display: block;
553
+ }
554
+
555
+ .spacer100 {
556
+ height: 100px;
557
+ width: 100%;
558
+ font-size: 0;
559
+ margin: 0;
560
+ padding: 0;
561
+ border: 0;
562
+ display: block;
563
+ }
564
+
565
+ .spacer200 {
566
+ height: 200px;
567
+ width: 100%;
568
+ font-size: 0;
569
+ margin: 0;
570
+ padding: 0;
571
+ border: 0;
572
+ display: block;
573
+ }
574
+
575
+ #dropdown-list {
576
+ max-height: 200px;
577
+ overflow: auto;
578
+ top: 15px;
579
+ position: relative;
580
+ left: 50px;
581
+ }
582
+
583
+ /* Some experimental classes, */
584
+ .cursor-btn-default {
585
+ color: #333;
586
+ background-color: #fff;
587
+ border-color: #357ebd;
588
+ }
589
+
590
+ .cursor-btn-default:hover,
591
+ .cursor-btn-default:focus,
592
+ .cursor-btn-default:active,
593
+ .cursor-btn-default.active,
594
+ .open .dropdown-toggle.btn-default {
595
+ color: #333;
596
+ background-color: #ebebeb;
597
+ border-color: #357ebd;
598
+ }
599
+
600
+ .btn-cursor-selected {
601
+ color: #ffffff;
602
+ background-color: #E6E8EB;
603
+ border-color: #ffffff;
604
+ }
605
+
606
+ .btn-cursor-selected:hover,
607
+ .btn-cursor-selected:focus,
608
+ .btn-cursor-selected:active,
609
+ .btn-cursor-selected.active,
610
+ .open .dropdown-toggle.btn-cursor-selected {
611
+ color: #ffffff;
612
+ background-color: #E6E8EB;
613
+ border-color: #ffffff;
614
+ }
615
+
616
+ .btn-cursor-selected:active,
617
+ .btn-cursor-selected.active,
618
+ .open .dropdown-toggle.btn-cursor-selected {
619
+ background-image: none;
620
+ }
621
+
622
+ .btn-cursor-selected.disabled,
623
+ .btn-cursor-selected[disabled],
624
+ fieldset[disabled] .btn-cursor-selected,
625
+ .btn-cursor-selected.disabled:hover,
626
+ .btn-cursor-selected[disabled]:hover,
627
+ fieldset[disabled] .btn-cursor-selected:hover,
628
+ .btn-cursor-selected.disabled:focus,
629
+ .btn-cursor-selected[disabled]:focus,
630
+ fieldset[disabled] .btn-cursor-selected:focus,
631
+ .btn-cursor-selected.disabled:active,
632
+ .btn-cursor-selected[disabled]:active,
633
+ fieldset[disabled] .btn-cursor-selected:active,
634
+ .btn-cursor-selected.disabled.active,
635
+ .btn-cursor-selected[disabled].active,
636
+ fieldset[disabled] .btn-cursor-selected.active {
637
+ background-color: #E6E8EB;
638
+ border-color: #ffffff;
639
+ }
640
+
641
+ .btn-cursor-selected .badge {
642
+ color: #E6E8EB;
643
+ background-color: #ffffff;
644
+ }
645
+
646
+ .btn-cursor-deselected {
647
+ color: #000000;
648
+ background-color: #FFFFFF;
649
+ }
650
+
651
+ .btn-cursor-deselected:hover,
652
+ .btn-cursor-deselected:focus,
653
+ .btn-cursor-deselected:active,
654
+ .btn-cursor-deselected.active,
655
+ .open .dropdown-toggle.btn-cursor-deselected {
656
+ color: #000000;
657
+ background-color: #E6E8EB;
658
+ border-color: #000000;
659
+ }
660
+
661
+ .btn-cursor-deselected:active,
662
+ .btn-cursor-deselected.active,
663
+ .open .dropdown-toggle.btn-cursor-deselected {
664
+ background-image: none;
665
+ }
666
+
667
+ .btn-cursor-deselected.disabled,
668
+ .btn-cursor-deselected[disabled],
669
+ fieldset[disabled] .btn-cursor-deselected,
670
+ .btn-cursor-deselected.disabled:hover,
671
+ .btn-cursor-deselected[disabled]:hover,
672
+ fieldset[disabled] .btn-cursor-deselected:hover,
673
+ .btn-cursor-deselected.disabled:focus,
674
+ .btn-cursor-deselected[disabled]:focus,
675
+ fieldset[disabled] .btn-cursor-deselected:focus,
676
+ .btn-cursor-deselected.disabled:active,
677
+ .btn-cursor-deselected[disabled]:active,
678
+ fieldset[disabled] .btn-cursor-deselected:active,
679
+ .btn-cursor-deselected.disabled.active,
680
+ .btn-cursor-deselected[disabled].active,
681
+ fieldset[disabled] .btn-cursor-deselected.active {
682
+ background-color: #FFFFFF;
683
+ border-color: #000000;
684
+ }
685
+
686
+ .btn-cursor-deselected .badge {
687
+ color: #FFFFFF;
688
+ background-color: #000000;
689
+ }
690
+
691
+
692
+ .ui-colorpicker,
693
+ .ui-dialog.ui-colorpicker {
694
+ width: auto;
695
+ white-space: nowrap;
696
+
697
+ -webkit-touch-callout: none;
698
+ -webkit-user-select: none;
699
+ -khtml-user-select: none;
700
+ -ms-user-select: none;
701
+ user-select: none;
702
+ }
703
+
704
+ .ui-colorpicker-inline {
705
+ position: static;
706
+ }
707
+
708
+ .ui-colorpicker-buttonset {
709
+ float: left;
710
+ margin-left: .4em;
711
+ }
712
+
713
+ .ui-colorpicker-buttonset .ui-button {
714
+ margin: .5em 0 .5em 0;
715
+ cursor: pointer;
716
+ }
717
+
718
+ .ui-colorpicker-buttonpane {
719
+ background-image: none;
720
+ margin: .7em 0 0 0;
721
+ padding: 0 .2em;
722
+ border-left: 0;
723
+ border-right: 0;
724
+ border-bottom: 0;
725
+ }
726
+
727
+ .ui-colorpicker-buttonpane button {
728
+ float: right;
729
+ margin: .5em .2em .4em;
730
+ cursor: pointer;
731
+ padding: .2em .6em .3em .6em;
732
+ width: auto;
733
+ overflow: visible;
734
+ }
735
+
736
+ .ui-colorpicker-buttonpane button.ui-colorpicker-current {
737
+ float: left;
738
+ }
739
+
740
+ .ui-colorpicker table {
741
+ width: 100%;
742
+ font-size: 100%; /* Reset browser table font-size */
743
+ margin: 0;
744
+ }
745
+
746
+ .ui-colorpicker table td {
747
+ vertical-align: top;
748
+ }
749
+
750
+ .ui-colorpicker-padding-left {
751
+ padding-left: 10px;
752
+ }
753
+ .ui-colorpicker-padding-top {
754
+ padding-top: 10px;
755
+ }
756
+
757
+ .ui-colorpicker-border {
758
+ border: 1px inset;
759
+ display: inline-block;
760
+ }
761
+
762
+ /* Bar & map */
763
+ .ui-colorpicker-map > *,
764
+ .ui-colorpicker-bar > * {
765
+ position: absolute;
766
+ cursor: crosshair;
767
+ }
768
+
769
+ .ui-colorpicker-map-pointer,
770
+ .ui-colorpicker-bar-pointer {
771
+ position: absolute;
772
+ left: 0;
773
+ }
774
+ /* Map */
775
+ .ui-colorpicker-map,
776
+ .ui-colorpicker-map > * {
777
+ display: block;
778
+ width: 256px;
779
+ height: 256px;
780
+ overflow: hidden;
781
+ }
782
+
783
+ .ui-colorpicker-map-layer-1,
784
+ .ui-colorpicker-map-layer-2 {
785
+ background: url(images/map.png) no-repeat;
786
+ }
787
+
788
+ .ui-colorpicker-map-128,
789
+ .ui-colorpicker-map-128 > * {
790
+ width: 128px;
791
+ height: 128px;
792
+ }
793
+
794
+ .ui-colorpicker-map-128 .ui-colorpicker-map-layer-1,
795
+ .ui-colorpicker-map-128 .ui-colorpicker-map-layer-2 {
796
+ background: url(images/128/map.png) no-repeat;
797
+ }
798
+
799
+ .ui-colorpicker-map-layer-alpha {
800
+ background: url(images/map-opacity.png);
801
+ }
802
+
803
+ .ui-colorpicker-map-pointer {
804
+ display: inline-block;
805
+ width: 15px;
806
+ height: 15px;
807
+ background: url(images/map-pointer.png) no-repeat;
808
+ }
809
+
810
+ /* Bar */
811
+ .ui-colorpicker-bar,
812
+ .ui-colorpicker-bar > * {
813
+ display: block;
814
+ width: 20px;
815
+ height: 256px;
816
+ overflow: hidden;
817
+ background-repeat: repeat-x;
818
+ }
819
+
820
+ .ui-colorpicker-bar-128,
821
+ .ui-colorpicker-bar-128 > * {
822
+ height: 128px;
823
+ }
824
+
825
+ .ui-colorpicker-bar-layer-1,
826
+ .ui-colorpicker-bar-layer-2,
827
+ .ui-colorpicker-bar-layer-3,
828
+ .ui-colorpicker-bar-layer-4 {
829
+ background: url(images/bar.png) repeat-x;
830
+ }
831
+
832
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-1,
833
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-2,
834
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-3,
835
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-4 {
836
+ background: url(images/128/bar.png) repeat-x;
837
+ }
838
+
839
+ .ui-colorpicker-bar-layer-alpha {
840
+ background: url(images/bar-opacity.png);
841
+ }
842
+
843
+ .ui-colorpicker-bar-layer-alphabar {
844
+ background: url(images/bar-alpha.png);
845
+ }
846
+
847
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-alphabar {
848
+ background: url(images/128/bar-alpha.png);
849
+ }
850
+
851
+ .ui-colorpicker-bar-pointer {
852
+ display: inline-block;
853
+ width: 20px;
854
+ height: 7px;
855
+ background: url(images/bar-pointer.png) no-repeat;
856
+ }
857
+
858
+ /* Preview */
859
+ .ui-colorpicker-preview {
860
+ text-align: center;
861
+ height: 20px;
862
+ }
863
+
864
+ .ui-colorpicker-preview-initial {
865
+ cursor: pointer;
866
+ }
867
+
868
+ .ui-colorpicker-preview-initial,
869
+ .ui-colorpicker-preview-current {
870
+ width: 50px;
871
+ height: 20px;
872
+ display: inline-block;
873
+ }
874
+
875
+ .ui-colorpicker-preview-initial-alpha,
876
+ .ui-colorpicker-preview-current-alpha {
877
+ width: 50px;
878
+ height: 20px;
879
+ display: inline-block;
880
+ background: url(images/preview-opacity.png) repeat;
881
+ }
882
+
883
+ /* Inputs */
884
+ .ui-colorpicker-rgb label,
885
+ .ui-colorpicker-hsv label,
886
+ .ui-colorpicker-hsl label,
887
+ .ui-colorpicker-lab label,
888
+ .ui-colorpicker-cmyk label,
889
+ .ui-colorpicker-alpha label {
890
+ width: 1.5em;
891
+ display: inline-block;
892
+ }
893
+
894
+ .ui-colorpicker-number {
895
+ margin: .1em;
896
+ width: 4em;
897
+ }
898
+
899
+ /* Hex */
900
+ .ui-colorpicker-hex {
901
+ text-align: center;
902
+ }
903
+
904
+ /* Swatches */
905
+ .ui-colorpicker-swatches {
906
+ height: 256px;
907
+ overflow: auto;
908
+ background-color: #f8f8f8;
909
+ }
910
+
911
+ .ui-colorpicker-swatch {
912
+ cursor: pointer;
913
+ float: left;
914
+ width: 11px;
915
+ height: 11px;
916
+ border-right: 1px solid black;
917
+ border-bottom: 1px solid black;
918
+ }
919
+
920
+ /* jQuery Colorpicker*/
921
+ .ui-colorpicker,
922
+ .ui-dialog.ui-colorpicker {
923
+ width: auto;
924
+ white-space: nowrap;
925
+
926
+ -webkit-touch-callout: none;
927
+ -webkit-user-select: none;
928
+ -khtml-user-select: none;
929
+ -ms-user-select: none;
930
+ user-select: none;
931
+ }
932
+
933
+ .ui-colorpicker-inline {
934
+ position: static;
935
+ }
936
+
937
+ .ui-colorpicker-buttonset {
938
+ float: left;
939
+ margin-left: .4em;
940
+ }
941
+
942
+ .ui-colorpicker-buttonset .ui-button {
943
+ margin: .5em 0 .5em 0;
944
+ cursor: pointer;
945
+ }
946
+
947
+ .ui-colorpicker-buttonpane {
948
+ background-image: none;
949
+ margin: .7em 0 0 0;
950
+ padding: 0 .2em;
951
+ border-left: 0;
952
+ border-right: 0;
953
+ border-bottom: 0;
954
+ }
955
+
956
+ .ui-colorpicker-buttonpane button {
957
+ float: right;
958
+ margin: .5em .2em .4em;
959
+ cursor: pointer;
960
+ padding: .2em .6em .3em .6em;
961
+ width: auto;
962
+ overflow: visible;
963
+ }
964
+
965
+ .ui-colorpicker-buttonpane button.ui-colorpicker-current {
966
+ float: left;
967
+ }
968
+
969
+ .ui-colorpicker table {
970
+ width: 100%;
971
+ font-size: 100%; /* Reset browser table font-size */
972
+ margin: 0;
973
+ }
974
+
975
+ .ui-colorpicker table td {
976
+ vertical-align: top;
977
+ }
978
+
979
+ .ui-colorpicker-padding-left {
980
+ padding-left: 10px;
981
+ }
982
+ .ui-colorpicker-padding-top {
983
+ padding-top: 10px;
984
+ }
985
+
986
+ .ui-colorpicker-border {
987
+ border: 1px inset;
988
+ display: inline-block;
989
+ }
990
+
991
+ /* Bar & map */
992
+ .ui-colorpicker-map > *,
993
+ .ui-colorpicker-bar > * {
994
+ position: absolute;
995
+ cursor: crosshair;
996
+ }
997
+
998
+ .ui-colorpicker-map-pointer,
999
+ .ui-colorpicker-bar-pointer {
1000
+ position: absolute;
1001
+ left: 0;
1002
+ }
1003
+ /* Map */
1004
+ .ui-colorpicker-map,
1005
+ .ui-colorpicker-map > * {
1006
+ display: block;
1007
+ width: 256px;
1008
+ height: 256px;
1009
+ overflow: hidden;
1010
+ }
1011
+
1012
+ .ui-colorpicker-map-layer-1,
1013
+ .ui-colorpicker-map-layer-2 {
1014
+ background: url(images/map.png) no-repeat;
1015
+ }
1016
+
1017
+ .ui-colorpicker-map-128,
1018
+ .ui-colorpicker-map-128 > * {
1019
+ width: 128px;
1020
+ height: 128px;
1021
+ }
1022
+
1023
+ .ui-colorpicker-map-128 .ui-colorpicker-map-layer-1,
1024
+ .ui-colorpicker-map-128 .ui-colorpicker-map-layer-2 {
1025
+ background: url(images/128/map.png) no-repeat;
1026
+ }
1027
+
1028
+ .ui-colorpicker-map-layer-alpha {
1029
+ background: url(images/map-opacity.png);
1030
+ }
1031
+
1032
+ .ui-colorpicker-map-pointer {
1033
+ display: inline-block;
1034
+ width: 15px;
1035
+ height: 15px;
1036
+ background: url(images/map-pointer.png) no-repeat;
1037
+ }
1038
+
1039
+ /* Bar */
1040
+ .ui-colorpicker-bar,
1041
+ .ui-colorpicker-bar > * {
1042
+ display: block;
1043
+ width: 20px;
1044
+ height: 256px;
1045
+ overflow: hidden;
1046
+ background-repeat: repeat-x;
1047
+ }
1048
+
1049
+ .ui-colorpicker-bar-128,
1050
+ .ui-colorpicker-bar-128 > * {
1051
+ height: 128px;
1052
+ }
1053
+
1054
+ .ui-colorpicker-bar-layer-1,
1055
+ .ui-colorpicker-bar-layer-2,
1056
+ .ui-colorpicker-bar-layer-3,
1057
+ .ui-colorpicker-bar-layer-4 {
1058
+ background: url(images/bar.png) repeat-x;
1059
+ }
1060
+
1061
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-1,
1062
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-2,
1063
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-3,
1064
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-4 {
1065
+ background: url(images/128/bar.png) repeat-x;
1066
+ }
1067
+
1068
+ .ui-colorpicker-bar-layer-alpha {
1069
+ background: url(images/bar-opacity.png);
1070
+ }
1071
+
1072
+ .ui-colorpicker-bar-layer-alphabar {
1073
+ background: url(images/bar-alpha.png);
1074
+ }
1075
+
1076
+ .ui-colorpicker-bar-128 .ui-colorpicker-bar-layer-alphabar {
1077
+ background: url(images/128/bar-alpha.png);
1078
+ }
1079
+
1080
+ .ui-colorpicker-bar-pointer {
1081
+ display: inline-block;
1082
+ width: 20px;
1083
+ height: 7px;
1084
+ background: url(images/bar-pointer.png) no-repeat;
1085
+ }
1086
+
1087
+ /* Preview */
1088
+ .ui-colorpicker-preview {
1089
+ text-align: center;
1090
+ height: 20px;
1091
+ }
1092
+
1093
+ .ui-colorpicker-preview-initial {
1094
+ cursor: pointer;
1095
+ }
1096
+
1097
+ .ui-colorpicker-preview-initial,
1098
+ .ui-colorpicker-preview-current {
1099
+ width: 50px;
1100
+ height: 20px;
1101
+ display: inline-block;
1102
+ }
1103
+
1104
+ .ui-colorpicker-preview-initial-alpha,
1105
+ .ui-colorpicker-preview-current-alpha {
1106
+ width: 50px;
1107
+ height: 20px;
1108
+ display: inline-block;
1109
+ background: url(images/preview-opacity.png) repeat;
1110
+ }
1111
+
1112
+ /* Inputs */
1113
+ .ui-colorpicker-rgb label,
1114
+ .ui-colorpicker-hsv label,
1115
+ .ui-colorpicker-hsl label,
1116
+ .ui-colorpicker-lab label,
1117
+ .ui-colorpicker-cmyk label,
1118
+ .ui-colorpicker-alpha label {
1119
+ width: 1.5em;
1120
+ display: inline-block;
1121
+ }
1122
+
1123
+ .ui-colorpicker-number {
1124
+ margin: .1em;
1125
+ width: 4em;
1126
+ }
1127
+
1128
+ /* Hex */
1129
+ .ui-colorpicker-hex {
1130
+ text-align: center;
1131
+ }
1132
+
1133
+ /* Swatches */
1134
+ .ui-colorpicker-swatches {
1135
+ height: 256px;
1136
+ overflow: auto;
1137
+ background-color: #f8f8f8;
1138
+ }
1139
+
1140
+ .ui-colorpicker-swatch {
1141
+ cursor: pointer;
1142
+ float: left;
1143
+ width: 11px;
1144
+ height: 11px;
1145
+ border-right: 1px solid black;
1146
+ border-bottom: 1px solid black;
1147
+ }
1148
+
1149
+
1150
+
1151
+