vidjil.less 33.9 KB
Newer Older
1
2
3
4

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

5
6
@infoContainerHeight : 32px;
@locusSpacingMargin : 12px;
7

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


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

27
28
body, svg {
  font-family: @default-font;
29
  font-size: 13px;
30
31
32
  height : 100%;
  margin:0px;
  color : @default;
33
  background : @border;
34
35
}

Mathieu Giraud's avatar
Mathieu Giraud committed
36
.cloneName {
37
  font-family: @bold-font;
Mathieu Giraud's avatar
Mathieu Giraud committed
38
39
40
}

.seq-fixed .cloneName, .listElem .cloneName {
Mathieu Giraud's avatar
Mathieu Giraud committed
41
42
  bottom: 1px;
}
43

44
45
/* for FF override */
textarea {
46
  font-family: @default-font;
47
48
49
  font-size: 100%;
}

50
51
/* texts that are not sequences nor identifiers */

52
#info, .popup_msg, .menu, .menu a
53
54
55
56
{
}


57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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%;
75
76
  margin : auto;
  overflow : hidden;
77
  background : @background;
78
79
80
}

#top-container {
Marc Duez's avatar
Marc Duez committed
81
  height: @top_container_height;
82
  width: 100%;
83
  background: @background;
Marc Duez's avatar
Marc Duez committed
84
85
  position : fixed;
  z-index:1;
86
87
}

88
89
90
91
92
93
94
95
96
97
#upload_summary {
  float: right;
  display:none;
  margin-right: 200px;
  position: relative;
  right: 200px;
  z-index: 10;
  background-color: @background;
}

HERBERT Ryan's avatar
HERBERT Ryan committed
98
99
100
101
.upload_field {
  width: 100%;
}

102
103
104
105
#menu-container {
    background: inherit;
}

106
107
108
109
110
111
112
113
114
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

115
#mid-container {
Marc Duez's avatar
Marc Duez committed
116
  position : fixed;
Marc Duez's avatar
Marc Duez committed
117
  top : @top_container_height;
Marc Duez's avatar
Marc Duez committed
118
  bottom : 125px ;
119
120
121
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
122
123
  overflow: hidden;
  background: @background;
124
  margin: @margin;
125
126
}

127
128
129
130
131
132
133
134
#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;
135
136
137
138
139
140
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
141
  overflow-y : none;
142
143
144
145
146
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
147
  display : table;
148
149
150
151
}

#visu, #visu2 {
  height : 50%;
152
  width : 100%;
153
154
}

155
156
157
158
#visu2 {
max-height: calc(~"100%" - @margin)
}

159
160
161
162
163
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

164
165
                        /* left-container - info */

166
167
168
169
170
#info-row{
    height : 200px;
    display : table-row;
}

171
#info{
172
  font-size: 13px;
173
  padding:3px;
174
  background : @background;
175
  display : table-cell;
176
177
}

178
179
180
181
182
183
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
184
185
186
187
.locus_line {
  text-align: center;
}

188
189
190
191
192
.info_row {
    min-width: 100px;
    display: inline-block;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
193
194
195
196
197
198
.locus_row {
  margin: 0 10px;
  display: inline-block;
  text-align: left;
}

199
.info_row_content {
200
    width: 100%;
201
202
203
    display: inline-block;
}

204
205
206
207
#info_data_file
{
  font-size: 200%;
}
208
209
210
211
212
213
214
215

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
216
  fill : @background
217
218
219
220
221
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
222
  stroke: @default;
223
224
}

Marc Duez's avatar
Marc Duez committed
225
226
227
228
229
230
231
232
233
234
235
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

236
237
238
239
240
241
242
243
244
245
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
246
  stroke: @default;
247
248
249
250
251
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
252
  stroke: @select;
253
254
}

Marc Duez's avatar
Marc Duez committed
255
.axis_m{
Marc Duez's avatar
Marc Duez committed
256
  stroke : @default ;
257
258
259
260
  opacity : 0.5 ;
  stroke-width : 20px;
}

261
262
263
264
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
265
  display: none;
266
267
}

268
.axis_h{
Marc Duez's avatar
Marc Duez committed
269
  stroke : @default ;
270
271
272
}

.axis_v{
273
 display: none;
274
275
}

276
.axis_v_hidden, .axis_h_hidden{
Marc Duez's avatar
Marc Duez committed
277
278
279
 display: none;
}

280
281
282
283
284
285
286
287
288
289
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
290
291
    fill: @border;
    opacity: 0.6;
292
293
}

294
.graph_time{
295
296
297
298
299
300
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
301
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
302
  fill : @default ;
303
  text-anchor:middle;
304
  font-size : 120%;
305
306
}

307
308
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
309
  fill : @default ;
310
  text-anchor:end;
311
  dominant-baseline: middle;
312
313
}

314
315
316
317
318
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

319
320
321
322
323
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

324
325
.graph_menu{
  position: absolute;
326
327
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
328
329
  min-width: 22px;
  min-height: 18px;
330
  text-align: center;
331
332
  border-bottom: solid;
  border-left: solid;
333
334
335
  border-color: @border;
  background : @background;
}
336
337
338
339
340
341

.graph_list{
  display: none;
}

.graph_listElem:hover{
342
  background : @border;
343
  width: 100%;
Marc Duez's avatar
Marc Duez committed
344
  cursor: move;
345
  cursor: webkit-grab;
346
347
}

348

349
350
351
352
353
354
355
356
357
358
359
360
							  /*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;
361
  fill : @default;
362
  stroke-width:4px;
363
364
365
366
367
368
369
370
371
372
373
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
374
  fill : @default;
375
376
377
378
}

.circle_focus{
  cursor:pointer;
379
  fill : @select;
380
381
382
383
384
385
386
}

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

387
388
389
390
391
392
393
394
395
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

396
.sp_legend{
Marc Duez's avatar
Marc Duez committed
397
  fill : @default ;
398
399
  font-weight : bold;
  text-anchor : middle;
400
  dominant-baseline: middle;
401
402
}

403
404
405
406
407
408
409
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
410
411
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
412
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
413
414
}

Marc Duez's avatar
Marc Duez committed
415
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
416
417
418
  color : @default ;
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
419
420
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
421
422
423
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
424
  color : @select ;
Marc Duez's avatar
Marc Duez committed
425
426
427
  cursor: pointer;
}

428
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
429
  fill : @default ;
430
431
432
433
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
434
435
436
437
438
439
440
441
442
443
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

444
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
445
  stroke : @default ;
446
447
448
449
450
451
452
453
454
455
456
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

457
							  /*style list/data element*/
458
459
460
461


/*Metric*/

Marc Duez's avatar
Marc Duez committed
462
@top_container_height : 32px;
463
@width_left_container : 475px;
464
@width_highlight : 300px;
Mathieu Giraud's avatar
Mathieu Giraud committed
465
@width_stats: 350px;
466
467
468
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
469
@width_thumbBox : 16px;
470
@width_sizeBox : 52px;
471
@width_infoBox : 20px;
472
@width_systemBox : 12px;
473
@width_listElem : (@width_left_container - @width_scrollbar);
474
@margin : 6px;
475
476
@margin_nameBox : 10px;

Marc Duez's avatar
Marc Duez committed
477
.list:hover, .tagElem:hover, .data:hover{
478
  background :@border;
479
480
}

Marc Duez's avatar
Marc Duez committed
481
482
483
484
485
486
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

487
488
489
490
491
492
493
494
495
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
496
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
497
498
499
500
501
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
502
  height : calc(~"100% - 30px");  /*100% - list_menu height */
503
504
505
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
506
#list_data{
507
508
509
510
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
511
512
513
514
515
516
517
518
519
520
521
522
}

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

.data_value{
}

523
524
525
526
.data {
    padding-right: 30px;
}

527
.list{
528
  width : 	445px;
529
530
531
532
533
534
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
535
  font-size: 13px;
536
537
538
539
540
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
541
  padding: 1px 4px 4px 1px;
542
543
544
545
546
547
548
  height :14px;
}

.selected{
  color : @select;
}

549
.nameBox {
550
  width: 300px;
551
552
553
554
555
556
557
558
559
  margin-right: @margin_nameBox;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
  float:left;
  white-space:nowrap;
}

560
561
562
563
.seq-fixed .nameBox {
  width: 250px;
}

564
.sizeBox, .mutationBox {
565
566
567
568
569
570
571
572
  width: @width_sizeBox;
  float: right;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
}

573
574
575
576
.mutationBox {
  padding-right: 5px;
}

577
578
579
580
581
582
.starBox{
  width: @width_starBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
583
  overflow: hidden;
584
585
}

586
587
588
589
590
591
592
593
594
595

.thumbBox{
  width: @width_thumbBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
  overflow: hidden;
}

596
.infoBox{
Mathieu Giraud's avatar
Mathieu Giraud committed
597
598
  font-size: 90%;
  width: 16px;
599
  float: right;
Marc Duez's avatar
Marc Duez committed
600
  height: 15px;
601
  display: inline-block;
602
  user-select: none;
603
  text-align: center;
604
605
  border: solid;
  border-width: 1px;
606
  border-color: @background;
607
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
608
  margin: 0px 1px;
609
}
Marc Duez's avatar
Marc Duez committed
610
.infoBox:hover{
611
612
613
614
  background: @highlight;
}
.infoBox-open{
  background: @border;
615
616
}

617
.systemBox, .systemBoxMenu {
618
619
    display: inline-block;
    width: @width_systemBox;
620
621
622
    height: @width_systemBox;
    line-height: @width_systemBox;
    vertical-align: middle;
623
624
625
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
Mathieu Giraud's avatar
Mathieu Giraud committed
626
    margin: 2px 4px 4px 2px;
627
628
629
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    font-size: 70%;
630
    background: @border;
631
632
}

633
634
635
636
637
638
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Mathieu Giraud's avatar
Mathieu Giraud committed
639
640
    min-width: 60px;
    padding: 2px 2px 1px 2px;
Marc Duez's avatar
Marc Duez committed
641
    cursor : pointer;
642
643
}	      

Marc Duez's avatar
Marc Duez committed
644
645
646
.hiddenCheckBox {
    display : none;
}
647

648
649
650
651
652
653
654
655
656
657
658
659
.clusterBox{
  width: @width_clusterBox;
  float: left;
  height: 12px;
  display: inline-block;
  text-align :center
}

.delBox{
  height: 12px;
  width: 12px;
  display: inline-block;
Mathieu Giraud's avatar
Mathieu Giraud committed
660
661
662
663
  float: left;
  user-select: none;
  margin-right: 8px;
  margin-left: 2px;
664
665
666
667
668
}



#new_name{
669
  font-family: @monospace-font;
670
671
672
  font-weight:bold;
}

673
674
675
676
677
.list_sort{
    margin-right : 30px;
    float: right;
}

678
679
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
680
  width : 445px;
681
682
683
684
685
686
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
687
.list_focus{
Marc Duez's avatar
Marc Duez committed
688
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
689
}
690
691

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
692
    white-space: nowrap;
693
}
Marc Duez's avatar
Marc Duez committed
694
.sequence-line:hover { 
695
696
697
    font-weight: bold;
}

698
.seq-fixed {
699
700
  position: relative;
  display: inline-block;
701
  width: (@width_left_container - @width_scrollbar);
702
703
  margin: -2px;
  padding: 2px;
704
705
706
707
708
709
710
711
712
  padding-left: 5px;
  left:0px;
  cursor:pointer;
  z-index:1;
}

.seq-mobil {
  margin-left: @width_left_container;
  letter-spacing: 0.12em;
713
  font-family : @monospace-font; 
Marc Duez's avatar
Marc Duez committed
714
  position: relative;
715
  bottom: 3px;
716
  font-size:1em;
717
718
}

719
720
721
.seq-marge {
  word-spacing: normal;
}
722
723

.V {
724
725
  color: #000;
  background-color: #efe;
726
}
Marc Duez's avatar
Marc Duez committed
727
.D {
728
729
  color: #000;
  background-color: #fee;
730
731
}
.J {
732
733
  color: #000;
  background-color: #ffffe2;
Mikaël Salson's avatar
Mikaël Salson committed
734
735
736
}
.N, .N + .J, .N + .D {
  box-shadow: -1px 0 0 @default;
Marc Duez's avatar
Marc Duez committed
737
}
Mathieu Giraud's avatar
Mathieu Giraud committed
738
739

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
740
741
742
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
743
744
745
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
746
    margin: -1px;
747
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
748
749
750
751
752
753
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
754
755
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
756
}
Mathieu Giraud's avatar
Mathieu Giraud committed
757
758
759
760
761
762
763
764
765
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
766
767
768
769
770
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
771
span .substitution, span .indel {
Mathieu Giraud's avatar
Mathieu Giraud committed
772
773
  font-weight: bold;
  color: #800;
Marc Duez's avatar
Marc Duez committed
774
}
775
776
777
span .substitution {
  border-bottom: 1px solid #800;
}
Marc Duez's avatar
Marc Duez committed
778

779
780
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
781
.tagSelector{
782
783
784
785
786
787
788
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
789
  background: @background;
790
791
}

Marc Duez's avatar
Marc Duez committed
792
.dataMenu{
793
794
795
796
797
798
799
800
801
802
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

803
804
805
806
807
808
809
810
811
812
813
814
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
815
816
817
  margin-right: 5px;
  height: 14px;
  width: 14px;
818
819
820
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
821
822
  margin-bottom: -3px;
  margin-top: 3px;
823
824
}

825
826
827
828
#normalized_size {
    width: 80px;
}

829
830
831
832
833
834
835
836
							  /*menu*/

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

839
840
841
842
843
844

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

845
846
847
848
849
850
851
852
853
854
855
856
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
858
859
.submenu{
    width: 200px;
860
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
861
862
863
864
865
866
867
868
869
870
}

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

Marc Duez's avatar
Marc Duez committed
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
.div-menu-selector{
    float: right;
    margin: -2px 0px 0px 5px;
}

.menu-selector {
    background: @background;
    color: #657B83;
    height: 18px;
    width: 60px;
    -webkit-appearance: none;
    border: solid;
    border-width: 1px;
    border-radius: 2px;
}

887
#file_menu, #axis_choice{
888
889
890
891
892
893
894
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
895
  font-size: 13px; 
896
  padding: 10px;
897
  background:@background;
898
899
900
901
902
903
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
904
  font-size: 13px;
905
906
907
908
909
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
910
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
911
  background : @border;
912
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
913
  cursor: pointer;
914
915
916
917
918
919
}


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


920
.popup_container{
921
  z-index:20;
922
923
924
925
926
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
927
  font-size: 13px; 
928
929
930
931
932
933
934
935
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

936
/* Main style for <a> Used in particular in .popup_container, on login screen, in news, in links to results (for patient list and patient info)  */
Vidjil Team's avatar
Vidjil Team committed
937
938
939
940


a {
  color: @default;
941
942
}

Vidjil Team's avatar
Vidjil Team committed
943
944
a:hover {
  color: @select;
945
}
Vidjil Team's avatar
Vidjil Team committed
946
/* ----------------- */
947

948
.data-container, .info-container{
949
950
951
952
953
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
954
  font-size: 13px; 
955
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
956
  background: @background;
957
958
959
960
  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);
Marc Duez's avatar
Marc Duez committed
961
962
963
  height: -moz-calc(~"100%" - 215px);
  height: -webkit-calc(~"100%" - 215px);
  height: calc(~"100%" - 215px);
964
965
}

966
967
.data-msg, .info-msg{
  overflow-x: hidden;
968
969
970
971
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
972
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
973
974
975
976
977
 background : @background;
}

.closeButton{
  position: absolute;
marc's avatar
marc committed
978
979
  top: 0px;
  right: 0px;
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
  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;
}

997
.button, .button_right, .button_left{
998
  cursor:pointer;
999
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
1000
  padding: 0px 3px;
1001
1002
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
1003
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
1004
  color: @default;
Marc Duez's avatar
Marc Duez committed
1005
1006
}

1007
1008
1009
1010
.button_next {
    margin-left: -8px ;
}

1011
1012
1013
1014
.button_right{
    float: right;
}

1015
1016
.button_left {
    float: left;
1017
    margin-right: -27px;
1018
1019
}

Marc Duez's avatar
Marc Duez committed
1020
1021
1022
1023
1024
1025
1026
1027
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
1028
    width: auto;
Marc Duez's avatar
Marc Duez committed
1029
    text-align: center;
Marc Duez's avatar
Marc Duez committed
1030
1031
    padding-left: 10px;
    padding-right: 10px;
1032
1033
1034
1035
}

.smallbutton {
    cursor:pointer;
1036
    font-size: 13px;
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
    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
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
.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
1070
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
1071
1072
    position: relative;
    float: left;
1073
    width: @width_left_container +200;
Marc Duez's avatar
Marc Duez committed
1074
1075
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1076
1077
1078
1079
1080
1081
#toIMGTSeg {
    width: 12px;
    display: inline-block;
    text-align: center;
}

1082
1083
1084
.menu-highlight {
    position: relative;
    float: left;
1085
    width: eval(@width_highlight);
1086
1087
}

1088
.devel-mode, .beta-mode {
1089
1090
1091
    display: none;
}

Marc Duez's avatar
Marc Duez committed
1092
1093
1094
.focus {
    position: relative;
    text-align: center;
1095
    float: left;
1096
1097
1098
    width: -moz-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight + 50));
    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight + 50));
    width: calc(~"100%" - (@width_left_container +  @width_stats + @width_highlight + 50));
1099
    overflow: hidden;
Mathieu Giraud's avatar
Mathieu Giraud committed
1100
    height: 1.1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
1101
1102
1103
1104
1105
1106
1107
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
1108
1109
}

1110
.segmenter {
1111
    overflow-x: scroll !important; 
1112
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1113
    height : 100px;
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
}

.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;
Marc Duez's avatar
Marc Duez committed
1127
1128
1129
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1130
  z-index:5;
1131
  overflow: hidden;
1132
1133
1134
1135
}

#bot-container {
  position: fixed;
1136
  bottom: 0px;
1137
1138
  left: 0px;
  width: 100%;
1139
1140
1141
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1142
1143
1144
1145
1146
1147
1148
}

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

Marc Duez's avatar
Marc Duez committed
1149
#list_menu{
1150
1151
1152
1153
1154
1155
1156
1157
  -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
1158
  border-bottom-width: 2px;
1159
1160
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1161
1162
1163
1164
1165
#filter_input
{
  width: 200px;
}

1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
.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
1185
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1186
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1187
1188
  height: 8px;
  margin-top: 4px;
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
  display: inline-block;
}

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

#test_result{
1201
  font-family : @monospace-font;
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
  font-weight: bold;
  position: absolute;
  width: 100%;
  top: 0px;
  height: 100%;
  background: rgba(0,0,0,0.5);
  padding: 25px;
  color: grey;
}

Marc Duez's avatar
Marc Duez committed
1212
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
{
  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
1229
#info_timepoint td{
1230
1231
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1232
1233
1234
1235
1236
1237
1238
1239
1240
  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{
1241
1242
1243
1244
1245
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1246
#info_window table .header, #info_timepoint table .header{
1247
  border-width : 2px;
1248
  background-color: @border;
1249
1250
}

1251
1252
1253
1254
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1255

1256
1257
1258
1259
1260
1261
1262
span.warningReads {
                  margin-left: .5em;
                  display:inline-block;
                  width: 1em;
                  text-align:center;
                  cursor: help}

1263
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1264
1265
1266
1267
1268
1269
1270
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1271
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1282
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1293
1294
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
    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;
}

1332
1333
1334
1335
1336
1337
1338
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1339
1340
1341
1342
1343
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1344
1345

.axis_select select {
1346
    background: @background;
1347
    color: @default;
Marc Duez's avatar
Marc Duez committed
1348
1349
    height: 20px;
    width: 120px;
1350
    -webkit-appearance: none;
1351
    border: solid;
Marc Duez's avatar
Marc Duez committed
1352
1353
1354
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1355
1356
1357
1358
1359
}

.axis_select_graph {
    top: 0px;
    display: none;
1360
1361
1362
1363
1364
}

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

#visu-separator {
1367
    height: @margin;
1368
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1369
    cursor: -webkit-grab;
1370
    background: @border;
Marc Duez's avatar
Marc Duez committed
1371
}
1372

1373
1374
1375
1376
1377
1378
1379
1380
1381
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1382
1383
1384
1385
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1386
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1387
    line-height: calc(~"100% - 1px");
1388
    background : @border;
Marc Duez's avatar
Marc Duez committed
1389
    cursor: pointer;
1390
1391
}

1392
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1393
    background: @highlight;
1394
}
Marc Duez's avatar
Marc Duez committed
1395
1396
1397
1398
1399
1400

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

1402
.db_div{
Marc Duez's avatar
Marc Duez committed
1403
  z-index:5;
1404
  position: fixed; 
marc's avatar
marc committed
1405
1406
1407
  top: 35px;
  width:100%;
  height: calc(~"100% - 35px");
1408
1409
1410
  font-size: 14px; 
  background: @background;
  display:none;
marc's avatar
marc committed
1411
  left: 0%;
1412
}
1413

1414
.db_msg{
Marc Duez's avatar
Marc Duez committed
1415
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1416
1417
1418
1419
    height : calc(~"100% - 30px")
}

#db_content{
1420