igv-rails 0.0.1.12 → 0.9.3.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,42 +1,770 @@
1
1
 
2
+ /* prevent unwanted translucent blue overlay when user selects anywhere in ENCODE table */
3
+ div[id="igvEncodeModal"] {
4
+ -webkit-user-select: none;
5
+ -khtml-user-select: none;
6
+ -moz-user-select: none;
7
+ -o-user-select: none;
8
+ user-select: none;
9
+ }
10
+
11
+ [class*='igv-'], [class*='igv-']:after, [class*='igv-']:before {
12
+ -webkit-box-sizing: border-box;
13
+ -moz-box-sizing: border-box;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ .igv-encode-spinner-container {
18
+ /*width: 256px;*/
19
+ /*margin: 0 auto 0 auto;*/
20
+ }
21
+
22
+ .igv-grid-container-dialog {
23
+
24
+ position: absolute;
25
+ top: 0;
26
+ left:0;
27
+
28
+ /*width:256px;*/
29
+ width:300px;
30
+
31
+ border-color: rgb(127, 127, 127);
32
+ border-radius: 4px;
33
+ border-style: solid;
34
+ border-width: thin;
35
+
36
+ z-index: 1999;
37
+
38
+ background-color: white;
39
+ }
40
+
41
+ .igv-grid-container-colorpicker {
42
+
43
+ position: absolute;
44
+ top: 0;
45
+ left:0;
46
+
47
+ width:256px;
48
+
49
+ border-color: rgb(127, 127, 127);
50
+ border-radius: 4px;
51
+ border-style: solid;
52
+ border-width: thin;
53
+
54
+ z-index: 1999;
55
+
56
+ background-color: white;
57
+ }
58
+
59
+ .igv-grid-header {
60
+
61
+ cursor: move;
62
+
63
+ border-color: rgb(196, 196, 196);
64
+ border-top-left-radius: 4px;
65
+ border-top-right-radius: 4px;
66
+ border-style: solid;
67
+ border-width: thin;
68
+
69
+ position: relative;
70
+ top: 0;
71
+ left: 0;
72
+
73
+ height: 24px;
74
+
75
+ background-color: rgb(196, 196, 196);
76
+ }
77
+
78
+ .igv-grid-header-blurb {
79
+
80
+ margin-top: 4px;
81
+ text-align: center;
82
+ vertical-align: middle;
83
+
84
+ font-family: 'PT Sans', sans-serif;
85
+ font-size: medium;
86
+ font-weight: 200;
87
+
88
+ /*color: #575757;*/
89
+
90
+ }
91
+
92
+ .igv-grid-dividing-line {
93
+
94
+ display: block;
95
+
96
+ height: 1px;
97
+
98
+ border: 0;
99
+ border-top: 1px solid rgb(196, 196, 196);
100
+
101
+ margin: 8px;
102
+ }
103
+
104
+ .igv-grid-rect {
105
+
106
+ border-radius: 4px;
107
+ border-style: solid;
108
+ border-width: thin;
109
+ border-color: rgb(255, 255, 255);
110
+
111
+ padding-left: 4px;
112
+ padding-right: 4px;
113
+
114
+ background-color: rgb(255, 255, 255);
115
+ }
116
+
117
+ .igv-grid-rect-hidden {
118
+ display: none;
119
+ }
120
+
121
+ .igv-grid-colorpicker {
122
+ height: 32px;
123
+ }
124
+
125
+ .igv-grid-colorpicker:after {
126
+ content: "";
127
+ display: table;
128
+ clear: both;
129
+ }
130
+
131
+ .igv-grid-colorpicker-user-error {
132
+
133
+ height: 16px;
134
+
135
+ color: #55aeff;
136
+ font-family: 'PT Sans', sans-serif;
137
+ font-size: small;
138
+ font-weight: 400;
139
+
140
+ background-color: white;
141
+ }
142
+
143
+ .igv-grid-dialog {
144
+ height: 40px;
145
+ }
146
+
147
+ [class*='igv-col-'] {
148
+ float: left;
149
+ }
150
+
151
+ .igv-col {
152
+ height: 100%;
153
+ padding: 2px;
154
+ }
155
+
156
+ .igv-data-range-input-label {
157
+
158
+ /*padding-top: 8px;*/
159
+ padding-left: 8px;
160
+
161
+ text-align: right;
162
+
163
+ font-family: 'PT Sans', sans-serif;
164
+ font-size: medium;
165
+ font-weight: 200;
166
+
167
+ color: #575757;
168
+
169
+ }
170
+
171
+ .igv-data-range-input {
172
+
173
+ outline: none;
174
+
175
+ border-style: solid;
176
+ border-radius: 4px;
177
+ border-width: thin;
178
+ border-color: rgb(127, 127, 127);
179
+
180
+ width: 100%;
181
+
182
+ padding-left: 8px;
183
+
184
+ vertical-align: middle;
185
+ text-align: left;
186
+
187
+ font-family: 'PT Sans', sans-serif;
188
+ font-size: medium;
189
+ font-weight: 200;
190
+
191
+ color: #575757;
192
+
193
+ }
194
+
195
+ .igv-user-input-colorpicker {
196
+
197
+ outline: none;
198
+
199
+ border-style: solid;
200
+ border-radius: 4px;
201
+ border-width: thin;
202
+ border-color: rgb(127, 127, 127);
203
+
204
+ width: 100%;
205
+ margin-top: 2px;
206
+
207
+ font-family: 'PT Sans', sans-serif;
208
+ font-size: medium;
209
+ font-weight: 200;
210
+
211
+ color: #575757;
212
+
213
+ }
214
+
215
+ .igv-user-input-dialog {
216
+
217
+ outline: none;
218
+
219
+ border-style: solid;
220
+ border-radius: 4px;
221
+ border-width: thin;
222
+ border-color: rgb(127, 127, 127);
223
+
224
+ width: 100%;
225
+
226
+ padding-left: 8px;
227
+
228
+ vertical-align: middle;
229
+ text-align: left;
230
+
231
+ font-family: 'PT Sans', sans-serif;
232
+ font-size: medium;
233
+ font-weight: 200;
234
+
235
+ color: #575757;
236
+
237
+ }
238
+
239
+ .igv-user-input-label {
240
+
241
+ padding-top: 8px;
242
+ padding-left: 8px;
243
+
244
+ text-align: left;
245
+
246
+ font-family: 'PT Sans', sans-serif;
247
+ font-size: medium;
248
+ font-weight: 200;
249
+
250
+ color: #575757;
251
+
252
+ }
253
+
254
+ .igv-col-label {
255
+
256
+ padding-left: 8px;
257
+ padding-top: 6px;
258
+
259
+ font-family: 'PT Sans', sans-serif;
260
+ font-size: medium;
261
+ font-weight: 200;
262
+
263
+ color: #575757;
264
+ }
265
+
266
+ .igv-col-filler {
267
+
268
+ width: 100%;
269
+ height: 100%;
270
+
271
+ border-color: rgb(255, 255, 255);
272
+ border-style: solid;
273
+ border-width: thin;
274
+ border-radius: 4px;
275
+
276
+ }
277
+
278
+ .igv-col-filler:hover,
279
+ .igv-col-filler:focus,
280
+ .igv-col-filler:active {
281
+
282
+ border-width: medium;
283
+ border-color: rgb(71, 71, 71);
284
+
285
+ }
286
+
287
+ .igv-col-filler-no-color {
288
+
289
+ width: 100%;
290
+ height: 100%;
291
+
292
+ border-color: rgb(255, 255, 255);
293
+ border-style: solid;
294
+ border-width: thin;
295
+ border-radius: 4px;
296
+
297
+ }
298
+
299
+ .igv-col-filler-user-color {
300
+
301
+ width: 100%;
302
+ height: 100%;
303
+
304
+ border-color: rgb(255, 255, 255);
305
+ border-style: solid;
306
+ border-width: thin;
307
+ border-radius: 4px;
308
+
309
+ }
310
+
311
+ .igv-col-filler-cancel-button {
312
+
313
+ margin-left: 8px;
314
+ padding-left: 1px;
315
+ padding-top: 5px;
316
+ width: 90%;
317
+ height: 90%;
318
+
319
+ border-color: rgb(255, 255, 255);
320
+ border-style: solid;
321
+ border-width: thin;
322
+ border-radius: 4px;
323
+
324
+ color: white;
325
+ text-align: center;
326
+ vertical-align: middle;
327
+
328
+ font-family: 'PT Sans', sans-serif;
329
+ font-size: medium;
330
+ font-weight: 200;
331
+
332
+ background-color: #c4c4c4;
333
+ }
334
+
335
+ .igv-col-filler-cancel-button:hover,
336
+ .igv-col-filler-cancel-button:focus,
337
+ .igv-col-filler-cancel-button:active {
338
+ background-color: #7e7e7e;
339
+ }
340
+
341
+ .igv-col-fa {
342
+
343
+ color: white;
344
+ font-size: medium;
345
+ line-height: 50px;
346
+
347
+ text-align: center;
348
+ vertical-align: bottom;
349
+
350
+ }
351
+
352
+ /* 3 columns */
353
+ .igv-col-1-3 {
354
+ width: 33.33%;
355
+ }
356
+
357
+ .igv-col-2-3 {
358
+ width: 66.66%;
359
+ }
360
+
361
+ /* 4 columns */
362
+ .igv-col-1-4 {
363
+ width: 25%;
364
+ }
365
+
366
+ .igv-col-2-4 {
367
+ width: 50%;
368
+ }
369
+
370
+ .igv-col-3-4 {
371
+ width: 75%;
372
+ }
373
+
374
+ .igv-col-4-4 {
375
+ width: 100%;
376
+ }
377
+
378
+ /* 8 columns */
379
+ .igv-col-1-8 {
380
+ width: 12.5%;
381
+ }
382
+
383
+ .igv-col-2-8 {
384
+ width: 25%;
385
+ }
386
+
387
+ .igv-col-3-8 {
388
+ width: 37.5%;
389
+ }
390
+
391
+ .igv-col-4-8 {
392
+ width: 50%;
393
+ }
394
+
395
+ .igv-col-5-8 {
396
+ width: 62.5%;
397
+ }
398
+
399
+ .igv-col-6-8 {
400
+ width: 75%;
401
+ }
402
+
403
+ .igv-col-7-8 {
404
+ width: 87.5%;
405
+ }
406
+
407
+ .igv-col-8-8 {
408
+ width: 100%;
409
+ }
410
+
411
+ /* end grid.css */
412
+
413
+ .fa-12px {
414
+ font-size: 12px;
415
+ }
416
+
417
+ .fa-16px {
418
+ font-size: 16px;
419
+ }
420
+
421
+ .fa-18px {
422
+ font-size: 18px;
423
+ }
424
+
425
+ .fa-20px {
426
+ font-size: 20px;
427
+ }
428
+
429
+ .fa-24px {
430
+ font-size: 24px;
431
+ }
432
+
433
+ .fa-28px {
434
+ font-size: 28px;
435
+ }
436
+
437
+ .fa-32px {
438
+ font-size: 32px;
439
+ }
440
+
441
+ .fa-check-shim {
442
+ padding-right: 2px;
443
+ }
444
+
445
+ .fa-check-hidden {
446
+ color: rgba(255, 255, 255, 0);
447
+ }
448
+
449
+ /* Bend jQuery UI to my will*/
450
+ .ui-widget {
451
+
452
+ font-family: 'PT Sans', sans-serif;
453
+ /*font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;*/
454
+ /*font-size: 1.1em;*/
455
+ font-size: medium;
456
+ font-weight: 400;
457
+ }
458
+ .ui-widget .ui-widget {
459
+ /*font-size: 1em;*/
460
+ font-size: medium;
461
+ font-weight: 400;
462
+ }
463
+ .ui-widget input,
464
+ .ui-widget select,
465
+ .ui-widget textarea,
466
+ .ui-widget button {
467
+ font-family: 'PT Sans', sans-serif;
468
+ /*font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;*/
469
+ /*font-size: 1em;*/
470
+ font-size: medium;
471
+ font-weight: 400;
472
+ }
473
+
474
+ .ui-widget-header {
475
+ font-weight: 400;
476
+ }
477
+
478
+ /* IGV classes */
479
+ div.ui-dialog fieldset {
480
+ border: 0;
481
+ }
482
+
483
+ .igv-ruler-sweeper-div {
484
+
485
+ display: none;
486
+
487
+ pointer-events: none;
488
+
489
+ position: absolute;
490
+ top: 0;
491
+ left: 0;
492
+ width: 0;
493
+ height:100%;
494
+
495
+ z-index:99999;
496
+
497
+ background-color: rgba(68, 134, 247, 0.25);
498
+ }
499
+
500
+ .validateTips {
501
+ border: 1px solid transparent;
502
+ padding: 0.3em;
503
+ }
504
+
2
505
  /* navigation bar */
3
506
  .igvNavigation {
4
507
 
5
508
  position: relative;
6
509
  top: 0;
7
- left: 0;
510
+ left: 0;
511
+
512
+ height: 24px;
513
+ width: auto;
514
+
515
+ margin-left: 48px;
516
+ margin-right: 32px;
517
+ /*margin-bottom: 5px;*/
518
+ }
519
+
520
+ .igv-logo-nonav {
521
+
522
+ margin-left: 4px;
523
+ margin-top: 12px;
524
+
525
+ position: absolute;
526
+ top: 0;
527
+ left: 0;
528
+
529
+ width: 34px;
530
+ height: 16px;
531
+
532
+ background: url(img/igv_logo_letters_paths.svg);
533
+ background-size: 34px 16px;
534
+ background-repeat:no-repeat;
535
+ background-position: 0 0;
536
+
537
+ }
538
+
539
+ .igv-logo {
540
+
541
+ float: left;
542
+
543
+ margin-right: 8px;
544
+
545
+ position: relative;
546
+ top: 4px;
547
+ left: 0;
548
+
549
+ width: 34px;
550
+ height: 16px;
551
+
552
+ background: url(img/igv_logo_letters_paths.svg);
553
+ background-size: 34px 16px;
554
+ background-repeat:no-repeat;
555
+ background-position: 0 0;
556
+
557
+ }
558
+
559
+ .igvNavigationSearch {
560
+
561
+ float: left;
562
+
563
+ position: relative;
564
+ top: 0;
8
565
 
9
- height: 32px;
10
- width: auto;
566
+ /*margin-left: auto;*/
567
+ /*margin-right: auto;*/
568
+
569
+ width: 260px;
11
570
 
12
- margin-left: 48px;
13
- margin-right: 32px;
14
- margin-bottom: 32px;
15
- /*background-color: lawngreen;*/
16
571
  }
17
572
 
18
- .igvNavigationSearch {
573
+ .igvNavigationSearchInput {
19
574
 
20
575
  position: relative;
21
- top: 0;
22
- left: 0;
23
576
 
24
- height: 100%;
25
- width: 220px;
577
+ height: 24px;
578
+ width: 80%;
579
+ padding-left: 8px;
26
580
 
27
- float: left;
581
+ outline: none;
582
+
583
+ border-style: solid;
584
+ border-radius: 4px;
585
+ border-width: thin;
586
+ border-color: rgb(127, 127, 127);
587
+
588
+ font-family: 'Open Sans', sans-serif;
589
+ font-size: small;
590
+ font-weight: 400;
591
+ color: #444;
592
+
593
+ }
594
+
595
+ .igvNavigationSearchResults {
596
+
597
+ position: absolute;
598
+ top: 32px;
599
+ left: 2px;
600
+
601
+ height: 320px;
602
+ width: 213px;
603
+
604
+ background-color: white;
605
+
606
+ border-color: rgb(127, 127, 127);
607
+ border-style: solid;
608
+ border-width: thin;
609
+
610
+ overflow-x: hidden;
611
+ overflow-y: auto;
612
+
613
+ z-index: 9999;
614
+ }
615
+
616
+ .igvNavigationSearchResultsTable {
617
+
618
+ }
619
+
620
+ .igvNavigationSearchResultsTableRow {
621
+ font-family: 'Open Sans', sans-serif;
622
+ font-size: small;
623
+ font-weight: 400;
624
+ color: #444;
625
+ }
626
+
627
+ .igvNavigationSearchResultsTableRow:hover,
628
+ .igvNavigationSearchResultsTableRow:focus,
629
+ .igvNavigationSearchResultsTableRow:active {
630
+ cursor: pointer;
631
+ font-weight: 700;
632
+ color: #141414;
633
+ }
28
634
 
29
- /*background-color: deepskyblue;*/
635
+ .shim-left-6 {
636
+ padding-left: 6px;
30
637
  }
31
638
 
32
639
  .igvNavigationZoom {
33
640
 
34
641
  position: relative;
642
+ float: right;
643
+ }
35
644
 
36
- height: 100%;
645
+ .igvNavigationToggleTrackLabels {
646
+
647
+ position: relative;
37
648
  float: right;
38
649
 
39
- /*background-color: lightcoral;*/
650
+ border-style: solid;
651
+ border-radius: 4px;
652
+ border-width: thin;
653
+ border-color: rgb(127, 127, 127);
654
+
655
+ margin-right: 64px;
656
+
657
+ padding-left: 4px;
658
+ padding-right: 4px;
659
+ padding-top: 1px;
660
+ padding-bottom: 2px;
661
+
662
+ font-family: 'Open Sans', sans-serif;
663
+ font-size: small;
664
+ font-weight: 400;
665
+ color: #444;
666
+
667
+ }
668
+
669
+ .igvNavigationToggleTrackLabels:hover,
670
+ .igvNavigationToggleTrackLabels:focus,
671
+ .igvNavigationToggleTrackLabels:active {
672
+
673
+ cursor: pointer;
674
+ border-color: #444;
675
+
676
+ }
677
+
678
+ .igvNavigationMarginLeft12 {
679
+
680
+ margin-left: 12px;
681
+ }
682
+
683
+ .igvNavigationMarginLeft8 {
684
+
685
+ margin-left: 8px;
686
+ }
687
+
688
+ .igvUserFeedback {
689
+
690
+ position:fixed;
691
+ top: 50%;
692
+ left: 50%;
693
+
694
+ width:36em;
695
+ height:27em;
696
+
697
+ margin-top: -9em; /*set to a negative number 1/2 of your height*/
698
+ margin-left: -15em; /*set to a negative number 1/2 of your width*/
699
+
700
+ background-color: white;
701
+
702
+ border-color: #a2a2a2;
703
+ border-style: solid;
704
+ border-width: thin;
705
+
706
+ font-family: 'Open Sans', sans-serif;
707
+ font-size: medium;
708
+ font-weight: 400;
709
+ color: #444;
710
+
711
+ }
712
+
713
+ .igvUserFeedbackHeader {
714
+ position: absolute;
715
+ top: 0;
716
+ left: 0;
717
+ right: 0;
718
+ width: 100%;
719
+ height: 32px;
720
+
721
+ border-bottom-color: #a2a2a2;
722
+ border-bottom-style: solid;
723
+ border-bottom-width: thin;
724
+
725
+ background-color: white;
726
+ }
727
+
728
+ .igvUserFeedbackBodyCopy {
729
+
730
+ padding-left: 48px;
731
+ padding-top: 8px;
732
+ padding-right: 48px;
733
+ padding-bottom: 8px;
734
+ position: absolute;
735
+ top: 33px;
736
+ left: 0;
737
+ right: 0;
738
+ bottom: 0;
739
+ background-color: white;
740
+ }
741
+
742
+ .igvUserFeedbackAlert {
743
+
744
+ position: absolute;
745
+ top: 0;
746
+ left: 0;
747
+ padding: 8px;
748
+
749
+ color: red;
750
+ }
751
+
752
+ .igvUserFeedbackDismiss {
753
+
754
+ position: absolute;
755
+ top: 0;
756
+ right: 0;
757
+ padding: 8px;
758
+
759
+ cursor: pointer;
760
+ color: grey;
761
+
762
+ }
763
+
764
+ .igvUserFeedbackDismiss:hover,
765
+ .igvUserFeedbackDismiss:focus,
766
+ .igvUserFeedbackDismiss:active {
767
+ color: rgba(51, 51, 51, 1);
40
768
  }
41
769
 
42
770
  .igvNavigationPadding {
@@ -52,21 +780,19 @@
52
780
  top: 0;
53
781
  left: 0;
54
782
 
55
- overflow-y: hidden;
56
- /*width: 100%;*/
57
- height: auto;
783
+ min-width: 128px;
58
784
 
59
785
  z-index: 1000;
60
786
 
61
787
  font-family: 'PT Sans', sans-serif;
62
- /*font-size: small;*/
63
788
  font-size: small;
64
789
  font-weight: 400;
65
790
  color: #444;
66
791
 
67
792
  background: #fff;
68
793
 
69
- border-color: #a2a2a2;
794
+ border-radius: 4px;
795
+ border-color: rgb(127, 127, 127);
70
796
  border-style: solid;
71
797
  border-width: thin;
72
798
 
@@ -80,9 +806,11 @@
80
806
  left: 0;
81
807
 
82
808
  width: 100%;
83
- height: 24px;
809
+ height: 20px;
84
810
 
85
- border-bottom-color: #a2a2a2;
811
+ border-top-left-radius: 4px;
812
+ border-top-right-radius: 4px;
813
+ border-bottom-color: rgb(127, 127, 127);
86
814
  border-bottom-style: solid;
87
815
  border-bottom-width: thin;
88
816
 
@@ -90,57 +818,73 @@
90
818
 
91
819
  }
92
820
 
93
- .igv-popoverClose {
821
+ .igv-dialog-close-container {
94
822
 
95
823
  position: absolute;
96
- top: 0;
97
- right: 0;
824
+ top: 3px;
825
+ right: 3px;
98
826
 
99
827
  height: 100%;
100
- width: 24px;
828
+ width: 16px;
101
829
 
102
830
  text-align: center;
103
- line-height: 24px;
104
-
831
+ line-height: 100%;
105
832
 
106
833
  color: #444;
107
834
 
108
- /*background-color: greenyellow;*/
109
835
  }
110
836
 
111
- .igv-popoverCloseFontAwesome {
837
+ .igv-dialog-close-fa {
112
838
 
113
839
  cursor: pointer;
114
840
  color: #888;
841
+ font-size: small;
115
842
  }
116
843
 
117
- .igv-popoverClose:hover {
844
+ .igv-dialog-close-container:hover {
118
845
  color: #fff;
119
846
  }
120
847
 
121
- .igv-popoverContent {
848
+ .igv-popoverTrackPopupContent {
849
+ position: relative;
850
+ top: 0;
851
+ left: 0;
122
852
 
123
- width: auto;
124
- height:auto;
853
+ /*width: 100%;*/
854
+ /*max-width: 384px;*/
855
+ max-height: 384px;
856
+
857
+ overflow-x: hidden;
858
+ overflow-y: auto;
859
+
860
+ /*text-overflow: ellipsis;*/
125
861
 
126
- padding: 4px;
862
+ /*margin-right: 24px;*/
127
863
 
128
- /*background-color: hotpink;*/
129
864
  }
130
865
 
131
866
  .igv-popoverBorderTop {
132
- border-top-color: #a2a2a2;
133
- /*border-top-color: #f00;*/
867
+ border-top-color: rgb(127, 127, 127);
134
868
  border-top-style: solid;
135
869
  border-top-width: thin;
136
870
  }
137
871
 
138
872
  .igv-popoverBorderBottom {
139
- border-bottom-color: #eee;
873
+ border-bottom-color: rgb(127, 127, 127);
140
874
  border-bottom-style: solid;
141
875
  border-bottom-width: thin;
142
876
  }
143
877
 
878
+ .igv-popoverNameValue {
879
+
880
+ cursor: default;
881
+ text-wrap: none;
882
+ white-space:nowrap;
883
+
884
+ max-width: 384px;
885
+
886
+ }
887
+
144
888
  .igv-popoverName {
145
889
  font-weight: bold;
146
890
  padding-right: 4px;
@@ -149,25 +893,24 @@
149
893
 
150
894
  .igv-popoverValue {
151
895
  padding-left: 4px;
152
- float: left;
896
+
897
+ overflow: hidden;
898
+ white-space:nowrap;
899
+ text-overflow:ellipsis;
900
+ max-width:256px;
901
+ display:inline-block;
153
902
  }
154
903
 
155
- /* spinner */
156
- .igv-spinner-fa-start {
904
+ .igv-spinner-container {
905
+
906
+ color: grey;
907
+ font-size: 24px;
157
908
 
158
909
  position: absolute;
159
- left:50%;
160
910
  top:50%;
161
- z-index: 256;
162
- display: inline;
163
- }
164
-
165
- .igv-spinner-fa-stop {
166
- position: relative;
167
911
  left:50%;
168
- top:50%;
169
- z-index: -256;
170
- display: none;
912
+ z-index: 256;
913
+ /*display: inline;*/
171
914
  }
172
915
 
173
916
  .igv-root-div {
@@ -175,7 +918,7 @@
175
918
  position: relative;
176
919
  margin-left: 10px;
177
920
  margin-right: 10px;
178
- padding-top:50px;
921
+ /*padding-top:50px;*/
179
922
  left: 0;
180
923
  right: 0;
181
924
  height: auto;
@@ -215,66 +958,46 @@
215
958
  height:100%;
216
959
  }
217
960
 
218
- .igv-header-div {
219
- position: relative;
220
- left: 0;
221
- right: 0;
222
- }
961
+ .igv-ideogram-content-div {
223
962
 
224
- /* ideogram */
225
- .igv-ideogram-div {
226
- position: relative;
227
- top: 0;
228
- left: 0;
229
963
  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
964
 
241
- padding-left: 12px;
242
-
243
- font-size: small;
244
- font-weight: 400;
245
-
246
- float: left;
965
+ margin-left: 50px;
966
+ margin-right: 50px;
967
+ }
247
968
 
969
+ .igv-ideogram-canvas {
970
+ /*left:0;*/
971
+ /*top:0;*/
972
+ width:100%;
973
+ height:100%;
248
974
  }
249
975
 
250
- .igv-ideogram-content-div {
976
+ .igv-windowsizepanel-content-div {
251
977
 
252
- position: absolute;
253
- top: 0;
254
- left:50px;
255
- right: 48px;
978
+ position: relative;
979
+ top: 7px;
256
980
 
257
981
  height: 100%;
258
982
 
259
- float: right;
983
+ float: left;
260
984
 
261
- }
985
+ text-align: center;
986
+ vertical-align: middle;
987
+ line-height: 100%;
262
988
 
263
- .igv-ideogram-canvas {
264
- left:0;
265
- top:0;
266
- width:100%;
267
- height:100%;
989
+ font-family: 'Open Sans', sans-serif;
990
+ font-size: small;
991
+ font-weight: 400;
992
+ color: #444;
993
+
994
+ /*display: none;*/
268
995
  }
269
996
 
270
997
  .igv-track-container-div {
271
998
  position: relative;
272
999
  left: 0;
273
1000
  right: 0;
274
- padding-top: 8px;
275
- padding-bottom: 8px;
276
- /*font-size: medium;*/
277
- height: auto;
278
1001
  overflow: hidden;
279
1002
  }
280
1003
 
@@ -282,7 +1005,7 @@
282
1005
  position: relative;
283
1006
  width: 100%;
284
1007
  overflow:hidden;
285
- margin-bottom:10px;
1008
+ margin-bottom:4px;
286
1009
  }
287
1010
 
288
1011
  .igv-fa-vertical-center-shim {
@@ -292,15 +1015,25 @@
292
1015
  .igv-track-label-span-base {
293
1016
 
294
1017
  font-family: 'PT Sans', sans-serif;
295
- /*font-size: small;*/
296
1018
  font-size: small;
297
1019
  font-weight: 400;
298
1020
  color: #444;
299
1021
 
300
- margin-left: 2px;
301
- margin-right: 2px;
1022
+ margin-left: 4px;
1023
+ margin-right: 4px;
302
1024
  position: relative;
303
- /*cursor: pointer;*/
1025
+ cursor: default;
1026
+ }
1027
+
1028
+ .igv-track-label-span-base:hover,
1029
+ .igv-track-label-span-base:focus,
1030
+ .igv-track-label-span-base:active {
1031
+ border-radius: 4px;
1032
+ border-color: #444;
1033
+ border-style: solid;
1034
+ border-width: thin;
1035
+ cursor: pointer;
1036
+ background-color: rgba(224, 224, 224, 1);
304
1037
  }
305
1038
 
306
1039
  .igv-track-label-span-highlighted {
@@ -326,15 +1059,11 @@
326
1059
  .igv-right-hand-gutter {
327
1060
  position: absolute;
328
1061
  right: 0;
329
- width: 48px;
1062
+ width: 36px;
330
1063
  height: 100%;
331
1064
 
332
1065
  background: white;
333
1066
  text-align: center;
334
-
335
- /*border-left-width: thin;*/
336
- /*border-left-color: #444;*/
337
- /*border-left-style: solid;*/
338
1067
  }
339
1068
 
340
1069
  .igv-app-icon-box {
@@ -355,6 +1084,7 @@
355
1084
  }
356
1085
 
357
1086
  .igv-app-icon {
1087
+ cursor: pointer;
358
1088
  color: grey;
359
1089
  background-color: white;
360
1090
  }
@@ -366,14 +1096,23 @@
366
1096
  }
367
1097
 
368
1098
  .igv-track-menu-gear {
1099
+
369
1100
  position: absolute;
370
- left: 20px;
371
1101
  top: 0;
1102
+ right: 0;
1103
+
1104
+ /*padding-top: 4px;*/
1105
+ padding-right: 6px;
1106
+
1107
+ cursor: pointer;
1108
+
372
1109
  }
373
1110
 
374
1111
  .igv-track-menu-container {
375
- padding-left: 2px;
376
- padding-right: 2px;
1112
+
1113
+ background-color: white;
1114
+ border-bottom-left-radius: 4px;
1115
+ border-bottom-right-radius: 4px;
377
1116
  }
378
1117
 
379
1118
  .igv-track-menu-container a {
@@ -382,14 +1121,29 @@
382
1121
  }
383
1122
 
384
1123
  .igv-track-menu-item {
385
- /* nuthin */
1124
+
1125
+ cursor: pointer;
1126
+ padding-left: 4px;
1127
+ padding-right: 4px;
1128
+
1129
+ padding-top: 2px;
1130
+ padding-bottom: 2px;
1131
+
1132
+ /*background-color: white;*/
1133
+ }
1134
+
1135
+ .igv-track-menu-border-top {
1136
+ border-top-color: #a2a2a2;
1137
+ border-top-style: solid;
1138
+ border-top-width: thin;
386
1139
  }
387
1140
 
388
1141
  .igv-track-menu-item:hover,
389
1142
  .igv-track-menu-item:focus,
390
1143
  .igv-track-menu-item:active {
391
- font-weight: bolder;
392
- color: rgba(51, 51, 51, 1);
1144
+
1145
+ color: white;
1146
+ background-color: rgba(49, 106, 246, 1);
393
1147
  }
394
1148
 
395
1149
  .igv-track-menu-discard {
@@ -406,40 +1160,104 @@
406
1160
  color: rgba(51, 51, 51, 1);
407
1161
  }
408
1162
 
409
- .igv-left-hand-gutter {
1163
+ .igv-track-drag-scrim {
1164
+
410
1165
  position: absolute;
411
1166
  left: 0;
412
- width: 50px;
1167
+ top: 0;
1168
+
1169
+ width: 100%;
413
1170
  height: 100%;
1171
+
1172
+ z-index: 256;
1173
+ background-color: rgba(68, 134, 247, 0.25);
1174
+
414
1175
  }
415
1176
 
416
- .igv-app-icon-container {
1177
+ .igv-track-manipulation-handle {
1178
+
1179
+ cursor: pointer;
1180
+
417
1181
  position: absolute;
418
- left: 10px;
419
- top: 4px;
420
- width: auto;
421
- height:auto;
422
- background: rgb(255, 255, 255);
423
- display: inline-block;
1182
+ right: 36px;
1183
+ width: 12px;
1184
+
1185
+ margin-left: 2px;
1186
+
1187
+ height: 100%;
1188
+
1189
+ box-sizing: border-box;
1190
+
1191
+ font-size: medium;
1192
+
1193
+ border-color: #c4c4c4;
1194
+ border-style: solid;
1195
+ border-width: thin;
1196
+ border-top-right-radius: 6px;
1197
+ border-bottom-right-radius: 6px;
1198
+
1199
+ z-index: 512;
1200
+
1201
+ background-color: #c4c4c4;
1202
+
424
1203
  }
425
1204
 
426
- .igv-track-control-canvas {
1205
+ .igv-track-manipulation-handle:hover,
1206
+ .igv-track-manipulation-handle:focus,
1207
+ .igv-track-manipulation-handle:active {
1208
+
1209
+ border-color: #7e7e7e;
1210
+ background-color: #7e7e7e;
1211
+
1212
+ }
1213
+
1214
+ .igv-left-hand-gutter {
427
1215
  position: absolute;
1216
+ left: 0;
1217
+ width: 50px;
1218
+ height: 100%;
428
1219
  }
429
1220
 
430
1221
  .igv-viewport-div {
431
1222
  position: absolute;
432
1223
  left: 50px;
433
- right: 48px;
1224
+ right: 50px;
434
1225
  height: 100%;
435
1226
  overflow-x: hidden;
436
- overflow-y: auto;
1227
+ overflow-y: hidden;
1228
+ }
1229
+
1230
+ .igv-app-icon-container {
1231
+
1232
+ border-radius: 4px;
1233
+ border-color: #444;
1234
+ border-style: solid;
1235
+ border-width: thin;
1236
+
1237
+ background: rgb(255, 255, 255);
1238
+
1239
+ /*display: inline-block;*/
1240
+
1241
+ position: absolute;
1242
+ left: 0;
1243
+ top: 0;
1244
+ width: auto;
1245
+ height:auto;
1246
+
1247
+ max-width: 200px;
1248
+
1249
+ /*margin-top: 4px;*/
1250
+
1251
+ }
1252
+
1253
+ .igv-track-control-canvas {
1254
+ position: absolute;
437
1255
  }
438
1256
 
439
1257
  .igv-content-div {
440
1258
  position: relative;
441
- margin-left: 10px;
442
- margin-right: 10px;
1259
+ /*margin-left: 10px;*/
1260
+ /*margin-right: 10px;*/
443
1261
  left: 0;
444
1262
  right: 0;
445
1263
  height:100%;
@@ -451,6 +1269,54 @@
451
1269
  height: 100%;
452
1270
  }
453
1271
 
1272
+ .igv-scrollbar-outer-div {
1273
+ position: absolute;
1274
+ top: 0;
1275
+ right: 0;
1276
+ width: 14px;
1277
+ height: 100%;
1278
+ /*background-color: rgba(223, 223, 223, 0.51);*/
1279
+ background-color: rgb(255, 255, 255);
1280
+
1281
+ /*border-left-style: solid;*/
1282
+ /*border-left-width: thin;*/
1283
+ /*border-left-color: rgb(223, 223, 223);*/
1284
+
1285
+ }
1286
+
1287
+ .igv-scrollbar-inner-div {
1288
+
1289
+ position:absolute;
1290
+ top: 0;
1291
+ left: 3px;
1292
+
1293
+ width:8px;
1294
+
1295
+ border-style: solid;
1296
+ border-width: thin;
1297
+ border-color: #c4c4c4;
1298
+
1299
+ border-top-left-radius: 4px;
1300
+ border-top-right-radius: 4px;
1301
+
1302
+ border-bottom-left-radius: 4px;
1303
+ border-bottom-right-radius: 4px;
1304
+
1305
+ /*background-color: #c4c4c4;*/
1306
+ background-color: #ffffff;
1307
+ }
1308
+
1309
+ .igv-scrollbar-inner-div:hover,
1310
+ .igv-scrollbar-inner-div:focus,
1311
+ .igv-scrollbar-inner-div:active {
1312
+
1313
+ cursor: pointer;
1314
+
1315
+ background-color: #c4c4c4;
1316
+
1317
+ /*background-color: #7e7e7e;*/
1318
+ /*border-color: #7e7e7e;*/
1319
+ }
454
1320
 
455
1321
  .spacer5 {
456
1322
  height: 5px;
@@ -579,573 +1445,3 @@
579
1445
  position: relative;
580
1446
  left: 50px;
581
1447
  }
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
-