vidjil.less 28.7 KB
Newer Older
1
2
3
4
5

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


6
7
8
9
10
11
12
13
14
15
16
/* default tag color */
@tagColor0 : #DC322F;
@tagColor1 : #cb4b16;
@tagColor2 : #b58900;
@tagColor3 : #268bd2;
@tagColor4 : #6c71c4;
@tagColor5 : #2aa198;
@tagColor6 : #d33682;
@tagColor7 : #859900;


17
18
19
20
21
html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
Marc Duez's avatar
Marc Duez committed
22
  min-height: 250px
23
24
25
}

body {
Marc Duez's avatar
Marc Duez committed
26
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
27
  font-size: 13px;
28
29
30
  height : 100%;
  margin:0px;
  color : @default;
31
  background : @border;
32
33
}

34
35
36

/* texts that are not sequences nor identifiers */

37
#info, .popup_msg, .menu, .menu a
38
39
40
41
42
43
44
45
46
47
48
{
  font-family: ubuntulight, Arial, Helvetica, Sans-serif;
}

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



49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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%;
67
68
  margin : auto;
  overflow : hidden;
69
  background : @background;
70
71
72
73
74
}

#top-container {
  height: 28px;
  width: 100%;
75
  background: @background;
Marc Duez's avatar
Marc Duez committed
76
77
  position : fixed;
  z-index:1;
78
79
80
}

#mid-container {
Marc Duez's avatar
Marc Duez committed
81
  position : fixed;
82
  top : 28px;
Marc Duez's avatar
Marc Duez committed
83
  bottom : 125px ;
84
85
86
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
87
88
  overflow: hidden;
  background: @background;
89
90
91
92
93
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
94
  margin: @margin;
95
96
}

97
98
99
100
101
102
103
104
#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;
105
106
107
108
109
110
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
111
  overflow-y : none;
112
113
114
115
116
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
117
  display : table;
118
119
120
121
}

#visu, #visu2 {
  height : 50%;
122
  width : 100%;
123
124
125
  overflow:hidden;
}

126
127
128
129
#visu2 {
max-height: calc(~"100%" - @margin)
}

130
131
132
133
134
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

135
136
                        /* left-container - info */

137
138
139
140
141
#info-row{
    height : 200px;
    display : table-row;
}

142
#info{
143
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
144
  font-size: 13px;
145
  padding:3px;
146
  background : @background;
147
  display : table-cell;
148
149
}

150
151
152
153
154
155
156
157
158
159
160
161
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

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

162
163
.info_row_content {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
164
    width : 345px;
165
166
}

167
168
169
170
171
172
173
174
#info_point {
    margin-top: 15px;
}

#info_data_file
{
  font-size: 200%;
}
175
176
177
178
179
180
181
182

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
183
  fill : @background
184
185
186
187
188
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
189
  stroke: @default;
190
191
}

Marc Duez's avatar
Marc Duez committed
192
193
194
195
196
197
198
199
200
201
202
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

203
204
205
206
207
208
209
210
211
212
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
213
  stroke: @default;
214
215
216
217
218
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
219
  stroke: @select;
220
221
}

Marc Duez's avatar
Marc Duez committed
222
.axis_m{
Marc Duez's avatar
Marc Duez committed
223
  stroke : @default ;
224
225
226
227
228
  opacity : 0.5 ;
  stroke-width : 20px;
}

.axis_h{
Marc Duez's avatar
Marc Duez committed
229
  stroke : @default ;
230
231
232
}

.axis_v{
233
 display: none;
234
235
}

Marc Duez's avatar
Marc Duez committed
236
237
238
239
.axis_v_hidden{
 display: none;
}

240
241
242
243
244
245
246
247
248
249
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
250
251
    fill: @border;
    opacity: 0.6;
252
253
}

254
.graph_time{
255
256
257
258
259
260
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
261
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
262
  fill : @default ;
263
  text-anchor:middle;
264
  font-size : 120%;
265
266
}

267
268
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
269
  fill : @default ;
270
  text-anchor:end;
271
  dominant-baseline: middle;
272
273
}

274
275
276
277
278
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

279
280
281
282
283
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

284
285
.graph_menu{
  position: absolute;
286
287
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
288
289
  min-width: 22px;
  min-height: 18px;
290
  text-align: center;
291
292
  border-bottom: solid;
  border-left: solid;
293
294
295
  border-color: @border;
  background : @background;
}
296
297
298
299
300
301

.graph_list{
  display: none;
}

.graph_listElem:hover{
302
  background : @border;
303
  width: 100%;
Marc Duez's avatar
Marc Duez committed
304
  cursor: move;
305
  cursor: webkit-grab;
306
307
}

308

309
310
311
312
313
314
315
316
317
318
319
320
							  /*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;
321
  fill : @default;
322
  stroke-width:4px;
323
324
325
326
327
328
329
330
331
332
333
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
334
  fill : @default;
335
336
337
338
}

.circle_focus{
  cursor:pointer;
339
  fill : @select;
340
341
342
343
344
345
346
}

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

347
348
349
350
351
352
353
354
355
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

356
.sp_legend{
Marc Duez's avatar
Marc Duez committed
357
  fill : @default ;
358
359
  font-weight : bold;
  text-anchor : middle;
360
  dominant-baseline: middle;
361
362
}

Marc Duez's avatar
Marc Duez committed
363
364
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
365
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
366
367
}

Marc Duez's avatar
Marc Duez committed
368
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
369
  color : @default ;
Marc Duez's avatar
Marc Duez committed
370
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
371
372
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
373
374
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
375
376
377
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
378
  color : @select ;
Marc Duez's avatar
Marc Duez committed
379
380
381
  cursor: pointer;
}

382
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
383
  fill : @default ;
384
385
386
387
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
388
389
390
391
392
393
394
395
396
397
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

398
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
399
  stroke : @default ;
400
401
402
403
404
405
406
407
408
409
410
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

411
							  /*style list/data element*/
412
413
414
415
416


/*Metric*/

@width_left_container : 475px;
417
@width_highlight : 250px;
Mathieu Giraud's avatar
Mathieu Giraud committed
418
@width_stats: 250px;
419
420
421
422
423
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
424
@width_systemBox : 13px;
425
@width_listElem : (@width_left_container - @width_scrollbar);
426
@margin : 6px;
427
@margin_nameBox : 10px;
428
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
429
430


Marc Duez's avatar
Marc Duez committed
431
.list:hover, .tagElem:hover, .data:hover{
432
  background :@border;
433
434
}

Marc Duez's avatar
Marc Duez committed
435
436
437
438
439
440
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

441
442
443
444
445
446
447
448
449
#list-row, #data-row{
  display: table-row;
}

#list, #data{
  display:table-cell;
}

#data-row{
Marc Duez's avatar
Marc Duez committed
450
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
451
452
453
454
455
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
456
  height : calc(~"100% - 30px");  /*100% - list_menu height */
457
458
459
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
460
#list_data{
461
462
463
464
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
465
466
467
468
469
470
471
472
473
474
475
476
}

.data_name{
  margin-left : 40px;
  width: 300px;
  margin-right : 10px;
  display : inline-block;
}

.data_value{
}

477
478
479
480
.data {
    padding-right: 30px;
}

481
.list{
482
  width : 	445px;
483
484
485
486
487
488
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
489
  font-size: 13px;
490
491
492
493
494
495
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
496
  padding: 1px 4px 4px 1px;
497
498
499
500
501
502
503
  height :14px;
}

.selected{
  color : @select;
}

504
.nameBox {
505
  width: 300px;
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
  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;
530
  overflow: hidden;
531
532
533
534
535
536
537
538
539
}

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

541
542
}

543
.systemBox, .systemBoxMenu {
544
545
    display: inline-block;
    width: @width_systemBox;
546
    height: 13px;
547
548
549
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
550
551
    margin: 4px;
    margin-top: 2px;
552
553
    color: @select;
    font-family: monospace;
554
    font-size: 80%;
555
    background: @border;
556
557
}

558
559
560
561
562
563
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
564
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
565
    height: 20px;
Marc Duez's avatar
Marc Duez committed
566
    cursor : pointer;
567
568
}	      

Marc Duez's avatar
Marc Duez committed
569
570
571
.hiddenCheckBox {
    display : none;
}
572

573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
.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;
}

600
601
602
603
604
.list_sort{
    margin-right : 30px;
    float: right;
}

605
606
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
607
  width : 445px;
608
609
610
611
612
613
614
615
616
617
618
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

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

619
620
621
622
.sequence-line:hover{
    font-weight: bold;
}

623
.seq-fixed {
624
625
  position: relative;
  display: inline-block;
626
  width: (@width_left_container - @width_scrollbar);
627
628
  margin: -2px;
  padding: 2px;
629
630
631
632
633
634
635
636
637
  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
638
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
639
  position: relative;
640
  bottom: 3px;
641
  font-size:1em;
642
643
}

644
645
646
.seq-marge {
  word-spacing: normal;
}
647
648
649
650

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
651
.D {
652
653
654
655
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
656
}
Mathieu Giraud's avatar
Mathieu Giraud committed
657
658

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
659
660
661
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
662
663
664
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
665
    margin: -1px;
666
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
667
668
669
670
671
672
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
673
674
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
675
}
Mathieu Giraud's avatar
Mathieu Giraud committed
676
677
678
679
680
681
682
683
684
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
685
686
687
688
689
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
690
span .substitution{
Marc Duez's avatar
Marc Duez committed
691
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
692
}
Marc Duez's avatar
Marc Duez committed
693

694
695
696
697
698
699
700
701
702
703
704
705
							  /*tag*/

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

706
707
708
709
710
711
712
713
714
715
716
#dataMenu{
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

717
718
719
720
721
722
723
724
725
726
727
728
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
729
730
731
  margin-right: 5px;
  height: 14px;
  width: 14px;
732
733
734
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
735
736
  margin-bottom: -3px;
  margin-top: 3px;
737
738
}

739
740
741
742
#normalized_size {
    width: 80px;
}

743
744
745
746
747
748
749
750
							  /*menu*/

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

753
754
755
756
757
758

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

759
760
761
762
763
764
765
766
767
768
769
770
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
772
773
.submenu{
    width: 200px;
774
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
775
776
777
778
779
780
781
782
783
784
}

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

785
#file_menu, #axis_choice{
786
787
788
789
790
791
792
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
793
  font-size: 13px; 
794
  padding: 10px;
795
  background:@background;
796
797
798
799
800
801
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
802
  font-size: 13px;
803
804
805
806
807
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
808
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
809
  background : @border;
810
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
811
  cursor: pointer;
812
813
814
815
816
817
}


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


818
.popup_container{
819
  z-index:20;
820
821
822
823
824
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
825
  font-size: 13px; 
826
827
828
829
830
831
832
833
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

834
.popup_container a {
835
836
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
837
  color: @default ;
838
839
}

840
.popup_container a:hover{
841
842
843
844
845
846
847
848
849
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
850
  font-size: 13px; 
851
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
852
  background: @background;
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
  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
868
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
 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;
}

893
.button, .button_right{
894
  cursor:pointer;
895
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
896
  padding: 0px 3px;
897
898
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
899
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
900
  color: @default;
Marc Duez's avatar
Marc Duez committed
901
902
}

903
904
905
906
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
907
908
909
910
911
912
913
914
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
915
    width: auto;
Marc Duez's avatar
Marc Duez committed
916
    text-align: center;
Marc Duez's avatar
Marc Duez committed
917
918
    padding-left: 10px;
    padding-right: 10px;
919
920
921
922
}

.smallbutton {
    cursor:pointer;
923
    font-size: 13px;
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
    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
945
946
947
948
949
950
951
952
953
954
955
956
.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
957
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
958
959
960
961
962
    position: relative;
    float: left;
    width: @width_left_container;
}

963
.menu-highlight {
Mathieu Giraud's avatar
Mathieu Giraud committed
964
    display: none;
965
966
967
968
969
    position: relative;
    float: left;
    width: @width_highlight;
}

Marc Duez's avatar
Marc Duez committed
970
971
972
.focus {
    position: relative;
    text-align: center;
973
    float: left;
974
975
976
    width: -moz-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
    width: calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
977
978
    overflow: hidden;
    height: 1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
979
980
981
982
983
984
985
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
986
987
}

988
.segmenter {
989
    overflow-x: scroll !important; 
990
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
991
    height : 100px;
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
}

.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;
1007
  overflow: hidden;
1008
1009
1010
1011
}

#bot-container {
  position: fixed;
1012
  bottom: 0px;
1013
1014
  left: 0px;
  width: 100%;
1015
1016
1017
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1018
1019
1020
1021
1022
1023
1024
}

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

Marc Duez's avatar
Marc Duez committed
1025
#list_menu{
1026
1027
1028
1029
1030
1031
1032
1033
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  border-bottom:solid;
  padding:2px;
  width: 100%;
Marc Duez's avatar
Marc Duez committed
1034
  border-bottom-width: 2px;
1035
1036
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1037
1038
1039
1040
1041
#filter_input
{
  width: 200px;
}

1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
.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 */
Mathieu Giraud's avatar
Mathieu Giraud committed
1061
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1062
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1063
1064
  height: 8px;
  margin-top: 4px;
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
  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;
}

1088
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, #tagSelector, .closeButton, #axis_choice
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
{
  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
1105
#info_timepoint td{
1106
1107
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1108
1109
1110
1111
1112
1113
1114
1115
1116
  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{
1117
1118
1119
1120
1121
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1122
#info_window table .header, #info_timepoint table .header{
1123
  border-width : 2px;
1124
  background-color: @border;
1125
1126
}

1127
1128
1129
1130
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1131

1132
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1133
1134
1135
1136
1137
1138
1139
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1140
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1151
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1162
1163
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
    padding: 8px 0px 0px 0px;
    width: 180px; 
    height: 130px;
    font-size: 100%;
    opacity: 1;
}

.sp_menu_mode{
    display: flex;
}

.sp_menu_icon{
    width: 40px;
    padding: 2px 2px 0px 2px;
    border: solid;
    border-width: 2px;
    border-radius: 5px;
    margin: 5px auto;
    border-color : @background;
}

.sp_menu_icon:hover{
    background : @border;
}

.sp_selected_mode{
    border-color : @default;
}

.sp_menu_icon svg{
    fill: @default;
}

.sp_menu_icon svg:hover{
    fill: @highlight;
}

1201
1202
1203
1204
1205
1206
1207
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1208
1209
1210
1211
1212
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1213
1214

.axis_select select {
1215
    background: @background;
1216
    color: @default;
Marc Duez's avatar
Marc Duez committed
1217
1218
    height: 20px;
    width: 120px;
1219
    -webkit-appearance: none;
1220
    border: solid;
Marc Duez's avatar
Marc Duez committed
1221
1222
1223
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1224
1225
1226
1227
1228
}

.axis_select_graph {
    top: 0px;
    display: none;
1229
1230
1231
1232
1233
}

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

#visu-separator {
1236
    height: @margin;
1237
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1238
    cursor: -webkit-grab;
1239
    background: @border;
Marc Duez's avatar
Marc Duez committed
1240
}
1241

1242
1243
1244
1245
1246
1247
1248
1249
1250
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1251
1252
1253
1254
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1255
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1256
    line-height: calc(~"100% - 1px");
1257
    background : @border;
Marc Duez's avatar
Marc Duez committed
1258
    cursor: pointer;
1259
1260
}

1261
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1262
    background: @highlight;
1263
}
Marc Duez's avatar
Marc Duez committed
1264
1265
1266
1267
1268
1269

.edit_button {
    float: right;
    margin-right: 2px;
    cursor: pointer;
}
1270

1271
.db_div{
Marc Duez's avatar
Marc Duez committed
1272
  z-index:5;
1273
1274
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1275
  top: 20px;
1276
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1277
1278
  width:80%;
  height: calc(~"100% - 50px");
1279
1280
1281
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1282
  left: 10%;
1283
}
1284

1285
.db_msg{
Marc Duez's avatar
Marc Duez committed
1286
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1287
1288
1289
1290
    height : calc(~"100% - 30px")
}

#db_content{
1291
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1292
}
Marc Duez's avatar
Marc Duez committed
1293

1294
1295
1296
.db_table{
    width: 100%;
    border-collapse: collapse;
1297
1298
1299
1300
1301
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1302
1303
    text-overflow: ellipsis;
    white-space: nowrap;
1304
1305
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1306
1307
1308
.db_table .column_200{    width: 200px;   }
.db_table .column_150{    width: 150px;   }
.db_table .column_100{    width: 100px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1309
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1310

1311
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1312
    width: 100px;
1313
1314
1315
}

.db_table .column2{
1316
    width: 150px;
1317
1318
1319
1320
1321
1322
1323
1324
1325
}

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

1326
.db_table .column_sep {
1327
1328
1329
1330
1331
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1332
1333
}

Marc Duez's avatar
Marc Duez committed
1334
.db_block {
1335
1336
1337
1338
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1339
1340
1341
1342
1343
1344
1345
1346
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1347
.db_block_left {
1348
1349
1350
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1351
.db_block_right {
1352
1353
1354
    float : right;
}

1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
.db_table th{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
} 

.db_table tr{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1365
1366
1367
1368
}

.pointer
{
1369
1370
1371
1372
    cursor: pointer;
} 

.db_table tr:hover{
1373
    background: @border;
1374
1375
1376
1377
1378
1379
}

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

Marc Duez's avatar
Marc Duez committed
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1393
    overflow-y: scroll;
1394
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1395
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1396
1397
1398
    position: relative;
}

1399
1400
1401
1402
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
Marc Duez's avatar
Marc Duez committed
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
}

.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
1417
1418
}

Marc Duez's avatar
Marc Duez committed
1419
1420
1421
1422
1423
1424
.summary_filename {
    width: 200px;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    overflow-wrap: break-word;
1425
    margin-right:5px;
Marc Duez's avatar
Marc Duez committed
1426
1427
1428
1429
1430
1431
1432
1433
}

.loading_gauge {
    height: 13px;
    width: 98px;
    display: inline-block;
    border: solid;
    border-width: 1px;
1434
    margin: 0px 5px;
Marc Duez's avatar
Marc Duez committed
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
}

.loading_bar {
    height: 100%;
    width: 0%;
    background-color: @default;
    display: inline-block;
    transition: width 0.2s;
}

1445
1446
1447
1448
1449
1450
1451
.loading_status{
    width: 100px;
    text-align: center;
    display: inline-block;
    margin: 0px 5px;
}

Marc Duez's avatar
Marc Duez committed
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
.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
1464
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
1465
    text-align:center;
1466
    margin: 0px 5px;
Marc Duez's avatar
Marc Duez committed
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
}

@-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
1483
1484
}

1485
.flash_container {
Marc Duez's avatar
Marc Duez committed
1486
1487
1488
1489
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
Marc Duez's avatar
Marc Duez committed
1490
    z-index: 100;
Marc Duez's avatar
Marc Duez committed
1491
1492
}

1493
.log_container {
Marc Duez's avatar
Marc Duez committed
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
    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
1513
1514
1515
    width: 350px;
    min-height: 20px;
    border: solid;
Marc Duez's avatar
Marc Duez committed
1516
    border-width: 2px;
Marc Duez's avatar
Marc Duez committed
1517
1518
1519
1520
1521
1522
    display: block;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    background: @background;
    border-color: @border;
1523
1524
1525
1526
1527
    -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
1528
1529
}

Marc Duez's avatar
Marc Duez committed
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
.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;
1544
    background-color: #DFF0D8;