vidjil.less 23.6 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */


html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
  min-height: 650px
}

body {
Marc Duez's avatar
Marc Duez committed
16
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
17
  font-size: 13px;
18
19
20
  height : 100%;
  margin:0px;
  color : @default;
21
  background : @border;
22
23
}

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/* texts that are not sequences nor identifiers */

#info, #popup-msg, .menu, .menu a
{
  font-family: ubuntulight, Arial, Helvetica, Sans-serif;
}

a 
{
  font-family: ubuntumedium,  Arial, Helvetica, Sans-serif;
}



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
h2
{
  margin-top: 2px;
}

ul{
  padding-left:2px;
  margin-top: 3px;
  list-style-type: none;
}

#visu-container{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  height :100%;
57
58
  margin : auto;
  overflow : hidden;
59
  background : @background;
60
61
62
63
64
}

#top-container {
  height: 28px;
  width: 100%;
65
  background: @background;
66
67
68
}

#mid-container {
Marc Duez's avatar
Marc Duez committed
69
  position : fixed;
70
  top : 28px;
Marc Duez's avatar
Marc Duez committed
71
  bottom : 125px ;
72
73
74
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
75
76
  overflow: hidden;
  background: @background;
77
78
79
80
81
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
82
  margin: @margin;
83
84
}

85
86
87
88
89
90
91
92
#right-container{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  float : right;
  width : 0px;
93
94
95
96
97
98
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
99
  overflow-y : none;
100
101
102
103
104
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
105
106
107
108
}

#visu, #visu2 {
  height : 50%;
109
  width : 100%;
110
111
112
  overflow:hidden;
}

113
114
115
116
#visu2 {
max-height: calc(~"100%" - @margin)
}

117
118
119
120
121
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

122
123
                        /* left-container - info */

124
#info{
125
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
126
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
127
  height :200px;
128
  padding:3px;
129
  background : @background;
130
131
}

132
133
134
135
136
137
138
139
140
141
142
143
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

.info_row {
    padding-left: 20px;
    min-width: 100px;
    display: inline-block;
}

144
145
146
147
.info_row_content {
    display: inline-block;
}

148
149
150
151
152
153
154
155
#info_point {
    margin-top: 15px;
}

#info_data_file
{
  font-size: 200%;
}
156
157
158
159
160
161
162
163

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
164
  fill : @background
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
}

.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
}

Marc Duez's avatar
Marc Duez committed
189
.axis_m{
Marc Duez's avatar
Marc Duez committed
190
  stroke : @default ;
191
192
193
194
195
  opacity : 0.5 ;
  stroke-width : 20px;
}

.axis_h{
Marc Duez's avatar
Marc Duez committed
196
  stroke : @default ;
197
198
199
200
  stroke-width : 2px ;
}

.axis_v{
Marc Duez's avatar
Marc Duez committed
201
 stroke : @default ;
202
203
204
205
 stroke-width : 2px;
 stroke-dasharray: 6,6;
}

Marc Duez's avatar
Marc Duez committed
206
207
208
209
.axis_v_hidden{
 display: none;
}

210
211
212
213
214
215
216
217
218
219
.axis_button, .axis_leg{
  fill : @default;
}

#resolution1{
  fill : @background;
  opacity : 1;
}

#resolution5{
220
221
    fill: @border;
    opacity: 0.6;
222
223
}

224
.graph_time{
225
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
226
  fill : @default ;
227
228
229
  text-anchor:middle;
}

230
231
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
232
  fill : @default ;
233
234
235
  text-anchor:end;
}

236
237
238
239
240
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

241
242
.graph_menu{
  position: absolute;
243
244
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
245
246
  min-width: 22px;
  min-height: 18px;
247
  text-align: center;
248
249
  border-bottom: solid;
  border-left: solid;
250
251
252
  border-color: @border;
  background : @background;
}
253
254
255
256
257
258

.graph_list{
  display: none;
}

.graph_listElem:hover{
259
  background : @border;
260
  width: 100%;
Marc Duez's avatar
Marc Duez committed
261
  cursor: move;
262
  cursor: webkit-grab;
263
264
}

265

266
267
268
269
270
271
272
273
274
275
276
277
							  /*style scatterPlot element*/

.background_sp{
  fill : @background
}

.circle{
  cursor:pointer;
  -webkit-transition: fill 0.2s;
  -o-transition: fill  0.2s;
  -ms-transition: fill 0.2s;
  transition: fill 0.2s;
278
  fill : @default;
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
}

.circle_focus{
  cursor:pointer;
}

.circle_hidden{
  -webkit-transition: fill 0.2s;
  display:none;
}

301
302
303
304
305
306
307
308
309
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

310
.sp_legend{
Marc Duez's avatar
Marc Duez committed
311
  fill : @default ;
312
313
314
315
  font-weight : bold;
  text-anchor : middle;
}

Marc Duez's avatar
Marc Duez committed
316
317
318
319
320
321
322
323
324
325
326
.sp_system_label{
  fill : @default ;
  font-weight : bold;
  text-anchor : middle;
}

.sp_system_label:hover{
  fill : @select ;
  cursor: pointer;
}

327
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
328
  fill : @default ;
329
330
331
332
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
333
334
335
336
337
338
339
340
341
342
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

343
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
344
  stroke : @default ;
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
  stroke-width : 0.7px;
}

.sp_subline{
  stroke-width : 0.5px;
  stroke-dasharray: 6,6;
}

.sp_subline_hidden{
  stroke-width : 0px;
}

							  /*style list element*/


/*Metric*/

@width_left_container : 475px;
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
368
@width_systemBox : 13px;
369
@width_listElem : (@width_left_container - @width_scrollbar);
370
@margin : 6px;
371
@margin_nameBox : 10px;
372
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
373
374
375


.list:hover, .tagElem:hover{
376
  background :@border;
377
378
}

Marc Duez's avatar
Marc Duez committed
379
#list{
Marc Duez's avatar
Marc Duez committed
380
381
382
  height: -moz-calc(~"100% - 240px");
  height: -webkit-calc(~"100% - 240px");
  height: calc(~"100% - 240px");
Marc Duez's avatar
Marc Duez committed
383
384
385
386
387
388
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
  height : 100%;
389
390
391
392
393
394
395
396
397
398
399
  padding:2px;
}

.list{
  width : 	@width_left_container;
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
400
  font-size: 13px;
401
402
403
404
405
406
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
407
  padding: 1px 4px 4px 1px;
408
409
410
411
412
413
414
  height :14px;
}

.selected{
  color : @select;
}

415
.nameBox {
416
  width: 300px;
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
  margin-right: @margin_nameBox;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
  float:left;
  white-space:nowrap;
}

.sizeBox{
  width: @width_sizeBox;
  float: right;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
}

.starBox{
  width: @width_starBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
441
  overflow: hidden;
442
443
444
445
446
447
448
449
450
}

.infoBox{
  width: @width_infoBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
  text-align: center;
451

452
453
}

454
.systemBox, .systemBoxMenu {
455
456
    display: inline-block;
    width: @width_systemBox;
457
    height: 13px;
458
459
460
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
461
462
    margin: 4px;
    margin-top: 2px;
463
464
    color: @select;
    font-family: monospace;
465
    font-size: 80%;
466
467
}

468
469
470
471
472
473
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
474
    min-width: 89px;
475
476
477
}	      


478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
.clusterBox{
  width: @width_clusterBox;
  float: left;
  height: 12px;
  display: inline-block;
  text-align :center
}

.delBox{
  margin:2px;
  height: 12px;
  width: 12px;
  display: inline-block;
  color: white;
  float:left;
  user-select :none;
  margin-right: 5px;
  margin-left: 15px;
}



#new_name{
  font-family: monospace;
  font-weight:bold;
}

							  /*style segmenter element*/
.list_select{
  width : @width_left_container;
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

.sequence-line { 
  white-space: nowrap;
}

.seq-fixed {
520
521
  position: relative;
  display: inline-block;
522
  width: (@width_left_container - @width_scrollbar);
523
524
  margin: -2px;
  padding: 2px;
525
526
527
528
529
530
531
532
533
  padding-left: 5px;
  left:0px;
  cursor:pointer;
  z-index:1;
}

.seq-mobil {
  margin-left: @width_left_container;
  letter-spacing: 0.12em;
Marc Duez's avatar
Marc Duez committed
534
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
535
  position: relative;
536
  bottom: 3px;
537
  word-spacing: -1em;
538
  font-size:1em;
539
540
}

541
542
543
.seq-marge {
  word-spacing: normal;
}
544
545
546
547

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
548
.D {
549
550
551
552
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
553
}
Marc Duez's avatar
Marc Duez committed
554
555
556
.window1{
    display: inline-block;
    width: 0px;
557
    word-spacing: normal;
Marc Duez's avatar
Marc Duez committed
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
}
.window2{
    border: solid;
    display: inline-flex;
    height: 1em;
    position: relative;
    margin: -1px;
    border-width: 1px;
    border-color: red;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
span .substitution{
Marc Duez's avatar
Marc Duez committed
575
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
576
}
Marc Duez's avatar
Marc Duez committed
577

578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
							  /*tag*/

#tagSelector{
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
}

.tagElem{
  margin:1px;
  height: 20px;
}

.tagElem:hover{
  border-color : white;
  cursor : pointer;
  color : @select;
}

.tagColorBox {
  margin-right:3px;
  height: 16px;
  width: 16px;
  display: inline-block;
  cursor:pointer;
  user-select :none;
  margin-bottom: -4px;
  margin-top: 2px;
}

612
613
614
615
#normalized_size {
    width: 80px;
}

616
617
618
619
620
621
622
623
							  /*menu*/

.menu{
  padding:3px;
  float:left;
  margin:5px;
  cursor:pointer;
  background:inherit;
624
625
}

626
627
628
629
630
631

.menu a {
  text-decoration: none;
  color: inherit ;
}

632
633
634
635
636
637
638
639
640
641
642
643
.submenu{
    width: 200px;
    display: inline-table;
}

.menu_box {
    margin: 0px;
    padding: 5px;
    border-top: solid;
    border-width: 1px;
    border-color:@border;
}
644

Marc Duez's avatar
Marc Duez committed
645
646
.submenu{
    width: 200px;
647
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
648
649
650
651
652
653
654
655
656
657
}

.menu_box {
    margin: 0px;
    padding: 5px;
    border-top: solid;
    border-width: 1px;
    border-color:@border;
}

658
659
660
661
662
663
664
665
#file_menu, #analysis_menu{
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
666
  font-size: 13px; 
667
  padding: 10px;
668
  background:@background;
669
670
671
672
673
674
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
675
  font-size: 13px;
676
677
678
679
680
  margin :2px;
  display:block;
  text-align:left;
}

681
.button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
682
  background : @border;
683
684
685
686
687
688
689
690
  color : @select;
}


/*	//////////////////////////////////////////////////////////////	*/


#popup-container{
Marc Duez's avatar
Marc Duez committed
691
  z-index:5;
692
693
694
695
696
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
697
  font-size: 13px; 
698
699
700
701
702
703
704
705
706
707
708
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

#popup-container a {
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
709
  color: @default ;
710
711
712
713
714
715
716
717
718
719
720
721
}

#popup-container a:hover{
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
722
  font-size: 13px; 
723
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
724
  background: @background;
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
  display:none;
  max-width: -moz-calc(~"100%" - @width_left_container + 60px);
  max-width: -webkit-calc(~"100%" - @width_left_container + 60px);
  max-width: calc(~"100%" - @width_left_container + 60px);
  height: -moz-calc(~"100%" - 200px);
  height: -webkit-calc(~"100%" - 200px);
  height: calc(~"100%" - 200px);
}

#data-msg{
  overflow: auto;
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
740
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
 background : @background;
}

.closeButton{
  position: absolute;
  top: -12px;
  right: -12px;
  border: solid;
  background: inherit;
  border-radius: 20px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-weight: bolder;
  cursor: pointer;
  padding: 1px;
  font-size: 90%; 
  color: @border;
}

.closeButton:hover{
  color: @select;
}

765
.button, .button_right{
766
  cursor:pointer;
767
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
768
  padding: 0px 3px;
769
770
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
771
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
772
  color: @default;
Marc Duez's avatar
Marc Duez committed
773
774
}

775
776
777
778
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
779
780
781
782
783
784
785
786
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
787
    width: auto;
Marc Duez's avatar
Marc Duez committed
788
    text-align: center;
Marc Duez's avatar
Marc Duez committed
789
790
    padding-left: 10px;
    padding-right: 10px;
791
792
793
794
}

.smallbutton {
    cursor:pointer;
795
    font-size: 13px;
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
    text-decoration:underline;
}

#logo
{
  font-size: 130%;
  font-weight: bold;
  opacity: 1;
  padding: 5px 20px ;
  cursor: pointer;
}

span.logo
{
  font-size: 60% ;
  font-weight: bold;
  vertical-align: super;
  opacity: .8;
  color: #f88;
}

Marc Duez's avatar
Marc Duez committed
817
818
819
820
821
822
823
824
825
826
827
828
.bot-bar {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    height: 20px;
    border-bottom: solid;
    width: 100%;
    padding-top: 2px;
}

Marc Duez's avatar
Marc Duez committed
829
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
830
831
832
833
834
835
836
837
    position: relative;
    float: left;
    width: @width_left_container;
}

.focus {
    position: relative;
    text-align: center;
838
839
840
841
    float: left;
    width: -moz-calc(~"100%" - @width_left_container);
    width: -webkit-calc(~"100%" - @width_left_container);
    width: calc(~"100%" - @width_left_container);
Marc Duez's avatar
Marc Duez committed
842
843
844
}

#segmenter {
845
    overflow-x: scroll !important; 
846
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
847
    height : 100px;
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
}

.selector{
  display: none;
  position: fixed;
  margin-right: -5px;
  padding: 3px;
  border: solid;
  background: inherit;
  text-center: left;
  min-width: 150px;
  margin-left: -6px;
  border-top: none;
  margin-top: 4px;
  z-index:5;
863
  overflow: hidden;
864
865
866
867
}

#bot-container {
  position: fixed;
868
  bottom: 0px;
869
870
  left: 0px;
  width: 100%;
871
872
873
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
874
875
876
877
878
879
880
}

.tn{
  width:120px;
  display:inline-table;
}

Marc Duez's avatar
Marc Duez committed
881
#list_menu{
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  border-top: solid;
  border-bottom:solid;
  padding:2px;
  width: 100%;
}

.tagD{
  margin-left: 15px;
  width: 25px;
  display : inline-block;
  float : right;
}

.center{
  text-align: center;
}

.gradient{
  background: rgb(61,36,182); 
  background: -moz-linear-gradient(left, rgb(61,36,182) 0%, rgb(36,72,181) 10%, rgb(36,135,184) 20%, rgb(36,183,171) 30%, rgb(36,184,110) 40%, rgb(36,183,48) 50%, rgb(85,184,36) 60%, rgb(146,183,36) 70%, rgb(184,159,36) 80%, rgb(178,95,35) 90%, rgb(184,36,36) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(61,36,182)), color-stop(10%,rgb(36,72,181)), color-stop(20%,rgb(36,135,184)), color-stop(30%,rgb(36,183,171)), color-stop(40%,rgb(36,184,110)), color-stop(50%,rgb(36,183,48)), color-stop(60%,rgb(85,184,36)), color-stop(70%,rgb(146,183,36)), color-stop(80%,rgb(184,159,36)), color-stop(90%,rgb(178,95,35)), color-stop(100%,rgb(184,36,36))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* IE10+ */
  background: linear-gradient(to right, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 ); /* IE6-9 */
  width :180px;
  height:16px;
  display: inline-block;
}

#fps{
  float: right;
  position: relative;
  margin: 5px ;
  height:0px;
  opacity:0.5;
}

#test_result{
  font-family : Courier New,monaco,terminal,courier,system; 
  font-weight: bold;
  position: absolute;
  width: 100%;
  top: 0px;
  height: 100%;
  background: rgba(0,0,0,0.5);
  padding: 25px;
  color: grey;
}

938
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, #popup-container, #file_menu, #tagSelector, .closeButton, #analysis_menu
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
{
  border-color: @border; 
}

#info_window td{
  width : 300px;
  max-width : 300px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border-style:solid;
  border-color: @border;
  border-width :1px;
  text-align: center;
  vertical-align: middle;
}

Marc Duez's avatar
Marc Duez committed
955
956
957
958
959
960
961
962
963
964
965
966
#info_timepoint td{
  min-width : 300px;
  max-width : 450px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border-style:solid;
  border-color: @border;
  border-width :1px;
  vertical-align: middle;
}

#info_window table, #info_timepoint table{
967
968
969
970
971
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
972
#info_window table .header, #info_timepoint table .header{
973
  border-width : 2px;
974
  background-color: @border;
975
976
977
978
979
980
981
982
983
984
985
}

.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}


.axis_select select {
986
    background: @background;
987
    color: @default;
988
989
    height: 16px;
    width: 110px;
990
    -webkit-appearance: none;
991
992
    border: solid;
    border-width: 1px
993
994
995
996
997
998
}

.axis_select {
    position: relative;
    float: left;
    height: 0px;
999
    top : 2px;
1000
1001
1002
}

.axis_select_x {
1003
    display: block;
1004
}
1005

1006
.axis_select_y {
1007
    top: 18px;
1008
1009
1010
1011
1012
1013
    display: block;
}

.axis_select_graph {
    top: 0px;
    display: none;
1014
1015
1016
1017
1018
}

.axis_select select[selected=selected] {
   color: @select;
}
Marc Duez's avatar
Marc Duez committed
1019
1020

#visu-separator {
1021
    height: @margin;
1022
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1023
    cursor: -webkit-grab;
1024
    background: @border;
Marc Duez's avatar
Marc Duez committed
1025
}
1026

1027
1028
1029
1030
1031
1032
1033
1034
1035
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1036
1037
1038
1039
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1040
    width: @margin;
1041
    line-height: calc(100% - 1px);
1042
    background : @border;
Marc Duez's avatar
Marc Duez committed
1043
    cursor: pointer;
1044
1045
}

1046
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1047
    background: @highlight;
1048
}
Marc Duez's avatar
Marc Duez committed
1049
1050
1051
1052
1053
1054

.edit_button {
    float: right;
    margin-right: 2px;
    cursor: pointer;
}
1055
1056
1057
1058
1059
1060
1061
1062

#db_div{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 150px; 
  left:50% ;
  width:960px;
Marc Duez's avatar
Marc Duez committed
1063
  height :450px;
1064
1065
1066
1067
1068
1069
  font-size: 14px; 
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 480px");
  left: -webkit-calc(~"50% - 480px");
  left: calc(~"50% - 480px");
1070
}
1071

Marc Duez's avatar
Marc Duez committed
1072
1073
1074
#db_msg{
    margin : 15px;
}
1075
1076
1077
.db_table{
    width: 100%;
    border-collapse: collapse;
1078
1079
1080
1081
1082
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1083
1084
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1085
1086
1087
1088
.db_table .column_200{    width: 200px;   }
.db_table .column_150{    width: 150px;   }
.db_table .column_100{    width: 100px;   }

1089
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1090
    width: 100px;
1091
1092
1093
}

.db_table .column2{
1094
    width: 150px;
1095
1096
1097
1098
1099
1100
1101
1102
1103
}

.db_table .column4{
    width: 50px;
}
.db_table .column5{
    width: 20px;
}

1104
.db_table .column_sep {
1105
1106
1107
1108
1109
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1110
1111
}

Marc Duez's avatar
Marc Duez committed
1112
.db_block {
1113
1114
1115
1116
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1117
1118
1119
1120
1121
1122
1123
1124
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1125
.db_block_left {
1126
1127
1128
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1129
.db_block_right {
1130
1131
1132
    float : right;
}

1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
.db_table th{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
} 

.db_table tr{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
    cursor: pointer;
} 

.db_table tr:hover{
1147
    background: @border;
1148
1149
1150
1151
1152
1153
}

.db_table td{
    border-width:0px;
}

Marc Duez's avatar
Marc Duez committed
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1167
    overflow-y: auto;
1168
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1169
    max-height: 275px;
Marc Duez's avatar
Marc Duez committed
1170
1171
1172
    position: relative;
}

1173
1174
1175
1176
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
Marc Duez's avatar
Marc Duez committed
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
}

.db_help_desc {
    margin-left: 150px;
}

.db_help_action {
    margin-left: 10px;
    font-weight: bold;
}

.db_help_p {
    margin-top: 20px;
    margin-left: 20px;
Marc Duez's avatar
Marc Duez committed
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
}

.loading_seq {
    height: 15px;
    width: 100px;
    background-image: -webkit-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%); 
    background-image: -moz-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -o-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-image: linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
Marc Duez's avatar
css:    
Marc Duez committed
1205
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
}

@-webkit-keyframes move {
    to { background-position: 50px 50px; }
}

@-moz-keyframes move {
    to { background-position: 50px 50px; }
}

@-o-keyframes move {
    to { background-position: 50px 50px; }
}

@-webkit-keyframes move {
    to { background-position: 50px 50px; }
Marc Duez's avatar
Marc Duez committed
1222
1223
}

Marc Duez's avatar
Marc Duez committed
1224
#flash_container {
Marc Duez's avatar
Marc Duez committed
1225
1226
1227
1228
1229
1230
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
}

Marc Duez's avatar
Marc Duez committed
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
#log_container {
    height : 500px;
    width : 400px;
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
    padding: 5px;
    margin: 5px;
    background: @highlight;
    border-color: @border;
    z-index: 15;
    border: solid;
    border-width: 1px;
    opacity: 0.85;
    overflow-y: scroll;
    display: none;
}

.flash_0, .flash_1, .flash_2 {
Marc Duez's avatar
Marc Duez committed
1251
1252
1253
    width: 350px;
    min-height: 20px;
    border: solid;
Marc Duez's avatar
Marc Duez committed
1254
    border-width: 2px;
Marc Duez's avatar
Marc Duez committed
1255
1256
1257
1258
1259
1260
    display: block;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    background: @background;
    border-color: @border;
Marc Duez's avatar
Marc Duez committed
1261
    z-index: -1;
1262
1263
1264
1265
1266
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
Marc Duez's avatar
Marc Duez committed
1267
1268
}

Marc Duez's avatar
Marc Duez committed
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
.log_0, .log_1, .log_2 {
    width: auto;
    min-height: 20px;
    display: block;
    margin: 5px;
    background: @background;
    border: solid;
    border-width: 2px;
    border-radius: 2px;
    border-color: @background;
}

.flash_1, .log_1 {
    font-weight: bold;
1283
    background-color: #DFF0D8;
Marc Duez's avatar
Marc Duez committed
1284
1285
1286
1287
1288
}

.flash_2, .log_2 {
    font-weight: bold;
    border-color: darkred;
1289
    background-color: #F2DEDE;
Marc Duez's avatar
Marc Duez committed
1290
1291
}

Marc Duez's avatar
Marc Duez committed
1292
1293
select>option:hover {
    background-color: @border;
1294
}
1295
1296
1297

.inactive {
    opacity: 0.5;
1298
1299
}

1300
1301
.suggest_box {
    height: 0px;
1302
    display: block;
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
    position: relative;
}

.suggest_list {
    border: solid;
    border-width: 1px;
    min-height: 20px;
    background: @background;
    border-color: @border;
    max-height: 100px;
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
    display: none;
    width : 250px;
}

.suggest_arrow {
    position : absolute;
    width : 12px;
    height : 16px;
    top : -22px;
    right : 0px;
    cursor : pointer;
    background: url("icon/arrow-down.png") 50% 50% no-repeat;
}

.suggestion {
    cursor : pointer;
}

.suggestion:hover {
    background : @highlight;
}

input:focus, textarea:focus {
    border-color: @border;
    -webkit-box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    -moz-box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    outline: 0;
    outline: thin dotted \9;
1342
}
1343
1344
1345
1346
1347
1348
1349
1350
1351

pre,
code,
kbd,
samp,
tt{
  font-family:monospace,monospace;
  font-size:1em;
}