vidjil.less 33.5 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
#menu-container {
    background: inherit;
}

92
93
94
95
96
97
98
99
100
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

101
#mid-container {
Marc Duez's avatar
Marc Duez committed
102
  position : fixed;
Marc Duez's avatar
Marc Duez committed
103
  top : @top_container_height;
Marc Duez's avatar
Marc Duez committed
104
  bottom : 125px ;
105
106
107
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
108
109
  overflow: hidden;
  background: @background;
110
  margin: @margin;
111
112
}

113
114
115
116
117
118
119
120
#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;
121
122
123
124
125
126
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
127
  overflow-y : none;
128
129
130
131
132
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
133
  display : table;
134
135
136
137
}

#visu, #visu2 {
  height : 50%;
138
  width : 100%;
139
140
}

141
142
143
144
#visu2 {
max-height: calc(~"100%" - @margin)
}

145
146
147
148
149
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

150
151
                        /* left-container - info */

152
153
154
155
156
#info-row{
    height : 200px;
    display : table-row;
}

157
#info{
158
  font-size: 13px;
159
  padding:3px;
160
  background : @background;
161
  display : table-cell;
162
163
}

164
165
166
167
168
169
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
170
171
172
173
.locus_line {
  text-align: center;
}

174
175
176
177
178
.info_row {
    min-width: 100px;
    display: inline-block;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
179
180
181
182
183
184
.locus_row {
  margin: 0 10px;
  display: inline-block;
  text-align: left;
}

185
.info_row_content {
186
    width: 100%;
187
188
189
    display: inline-block;
}

190
191
192
193
#info_data_file
{
  font-size: 200%;
}
194
195
196
197
198
199
200
201

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
202
  fill : @background
203
204
205
206
207
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
208
  stroke: @default;
209
210
}

Marc Duez's avatar
Marc Duez committed
211
212
213
214
215
216
217
218
219
220
221
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

222
223
224
225
226
227
228
229
230
231
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
232
  stroke: @default;
233
234
235
236
237
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
238
  stroke: @select;
239
240
}

Marc Duez's avatar
Marc Duez committed
241
.axis_m{
Marc Duez's avatar
Marc Duez committed
242
  stroke : @default ;
243
244
245
246
  opacity : 0.5 ;
  stroke-width : 20px;
}

247
248
249
250
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
251
  display: none;
252
253
}

254
.axis_h{
Marc Duez's avatar
Marc Duez committed
255
  stroke : @default ;
256
257
258
}

.axis_v{
259
 display: none;
260
261
}

262
.axis_v_hidden, .axis_h_hidden{
Marc Duez's avatar
Marc Duez committed
263
264
265
 display: none;
}

266
267
268
269
270
271
272
273
274
275
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
276
277
    fill: @border;
    opacity: 0.6;
278
279
}

280
.graph_time{
281
282
283
284
285
286
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
287
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
288
  fill : @default ;
289
  text-anchor:middle;
290
  font-size : 120%;
291
292
}

293
294
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
295
  fill : @default ;
296
  text-anchor:end;
297
  dominant-baseline: middle;
298
299
}

300
301
302
303
304
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

305
306
307
308
309
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

310
311
.graph_menu{
  position: absolute;
312
313
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
314
315
  min-width: 22px;
  min-height: 18px;
316
  text-align: center;
317
318
  border-bottom: solid;
  border-left: solid;
319
320
321
  border-color: @border;
  background : @background;
}
322
323
324
325
326
327

.graph_list{
  display: none;
}

.graph_listElem:hover{
328
  background : @border;
329
  width: 100%;
Marc Duez's avatar
Marc Duez committed
330
  cursor: move;
331
  cursor: webkit-grab;
332
333
}

334

335
336
337
338
339
340
341
342
343
344
345
346
							  /*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;
347
  fill : @default;
348
  stroke-width:4px;
349
350
351
352
353
354
355
356
357
358
359
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
360
  fill : @default;
361
362
363
364
}

.circle_focus{
  cursor:pointer;
365
  fill : @select;
366
367
368
369
370
371
372
}

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

373
374
375
376
377
378
379
380
381
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

382
.sp_legend{
Marc Duez's avatar
Marc Duez committed
383
  fill : @default ;
384
385
  font-weight : bold;
  text-anchor : middle;
386
  dominant-baseline: middle;
387
388
}

389
390
391
392
393
394
395
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
396
397
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
398
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
399
400
}

Marc Duez's avatar
Marc Duez committed
401
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
402
403
404
  color : @default ;
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
405
406
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
407
408
409
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
410
  color : @select ;
Marc Duez's avatar
Marc Duez committed
411
412
413
  cursor: pointer;
}

414
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
415
  fill : @default ;
416
417
418
419
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
420
421
422
423
424
425
426
427
428
429
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

430
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
431
  stroke : @default ;
432
433
434
435
436
437
438
439
440
441
442
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

443
							  /*style list/data element*/
444
445
446
447


/*Metric*/

Marc Duez's avatar
Marc Duez committed
448
@top_container_height : 32px;
449
@width_left_container : 475px;
450
@width_highlight : 300px;
Mathieu Giraud's avatar
Mathieu Giraud committed
451
@width_stats: 350px;
452
453
454
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
455
@width_thumbBox : 16px;
456
457
@width_sizeBox : 60px;
@width_infoBox : 20px;
458
@width_systemBox : 12px;
459
@width_listElem : (@width_left_container - @width_scrollbar);
460
@margin : 6px;
461
@margin_nameBox : 10px;
462
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
463
464


Marc Duez's avatar
Marc Duez committed
465
.list:hover, .tagElem:hover, .data:hover{
466
  background :@border;
467
468
}

Marc Duez's avatar
Marc Duez committed
469
470
471
472
473
474
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

475
476
477
478
479
480
481
482
483
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
484
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
485
486
487
488
489
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
490
  height : calc(~"100% - 30px");  /*100% - list_menu height */
491
492
493
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
494
#list_data{
495
496
497
498
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
499
500
501
502
503
504
505
506
507
508
509
510
}

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

.data_value{
}

511
512
513
514
.data {
    padding-right: 30px;
}

515
.list{
516
  width : 	445px;
517
518
519
520
521
522
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
523
  font-size: 13px;
524
525
526
527
528
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
529
  padding: 1px 4px 4px 1px;
530
531
532
533
534
535
536
  height :14px;
}

.selected{
  color : @select;
}

537
.nameBox {
538
  width: 300px;
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
  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;
563
  overflow: hidden;
564
565
}

566
567
568
569
570
571
572
573
574
575

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

576
.infoBox{
Mathieu Giraud's avatar
Mathieu Giraud committed
577
578
  font-size: 90%;
  width: 16px;
579
  float: right;
Marc Duez's avatar
Marc Duez committed
580
  height: 15px;
581
  display: inline-block;
582
  user-select: none;
583
  text-align: center;
584
585
  border: solid;
  border-width: 1px;
586
  border-color: @background;
587
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
588
  margin: 0px 1px;
589
}
Marc Duez's avatar
Marc Duez committed
590
.infoBox:hover{
591
592
593
594
  background: @highlight;
}
.infoBox-open{
  background: @border;
595
596
}

597
.systemBox, .systemBoxMenu {
598
599
    display: inline-block;
    width: @width_systemBox;
600
601
602
    height: @width_systemBox;
    line-height: @width_systemBox;
    vertical-align: middle;
603
604
605
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
Mathieu Giraud's avatar
Mathieu Giraud committed
606
    margin: 2px 4px 4px 2px;
607
608
609
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    font-size: 70%;
610
    background: @border;
611
612
}

613
614
615
616
617
618
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Mathieu Giraud's avatar
Mathieu Giraud committed
619
620
    min-width: 60px;
    padding: 2px 2px 1px 2px;
Marc Duez's avatar
Marc Duez committed
621
    cursor : pointer;
622
623
}	      

Marc Duez's avatar
Marc Duez committed
624
625
626
.hiddenCheckBox {
    display : none;
}
627

628
629
630
631
632
633
634
635
636
637
638
639
.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
640
641
642
643
  float: left;
  user-select: none;
  margin-right: 8px;
  margin-left: 2px;
644
645
646
647
648
}



#new_name{
649
  font-family: @monospace-font;
650
651
652
  font-weight:bold;
}

653
654
655
656
657
.list_sort{
    margin-right : 30px;
    float: right;
}

658
659
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
660
  width : 445px;
661
662
663
664
665
666
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
667
.list_focus{
Marc Duez's avatar
Marc Duez committed
668
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
669
}
670
671

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
672
    white-space: nowrap;
673
}
Marc Duez's avatar
Marc Duez committed
674
.sequence-line:hover { 
675
676
677
    font-weight: bold;
}

678
.seq-fixed {
679
680
  position: relative;
  display: inline-block;
681
  width: (@width_left_container - @width_scrollbar);
682
683
  margin: -2px;
  padding: 2px;
684
685
686
687
688
689
690
691
692
  padding-left: 5px;
  left:0px;
  cursor:pointer;
  z-index:1;
}

.seq-mobil {
  margin-left: @width_left_container;
  letter-spacing: 0.12em;
693
  font-family : @monospace-font; 
Marc Duez's avatar
Marc Duez committed
694
  position: relative;
695
  bottom: 3px;
696
  font-size:1em;
697
698
}

699
700
701
.seq-marge {
  word-spacing: normal;
}
702
703

.V {
704
705
  color: #000;
  background-color: #efe;
706
}
Marc Duez's avatar
Marc Duez committed
707
.D {
708
709
  color: #000;
  background-color: #fee;
710
711
}
.J {
712
713
  color: #000;
  background-color: #ffffe2;
Marc Duez's avatar
Marc Duez committed
714
}
Mathieu Giraud's avatar
Mathieu Giraud committed
715
716

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
717
718
719
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
720
721
722
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
723
    margin: -1px;
724
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
725
726
727
728
729
730
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
731
732
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
733
}
Mathieu Giraud's avatar
Mathieu Giraud committed
734
735
736
737
738
739
740
741
742
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
743
744
745
746
747
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Mathieu Giraud's avatar
Mathieu Giraud committed
748
749
750
span .substitution {
  font-weight: bold;
  color: #800;
Marc Duez's avatar
Marc Duez committed
751
}
Marc Duez's avatar
Marc Duez committed
752

753
754
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
755
.tagSelector{
756
757
758
759
760
761
762
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
763
  background: @background;
764
765
}

Marc Duez's avatar
Marc Duez committed
766
.dataMenu{
767
768
769
770
771
772
773
774
775
776
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

777
778
779
780
781
782
783
784
785
786
787
788
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
789
790
791
  margin-right: 5px;
  height: 14px;
  width: 14px;
792
793
794
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
795
796
  margin-bottom: -3px;
  margin-top: 3px;
797
798
}

799
800
801
802
#normalized_size {
    width: 80px;
}

803
804
805
806
807
808
809
810
							  /*menu*/

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

813
814
815
816
817
818

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

819
820
821
822
823
824
825
826
827
828
829
830
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
832
833
.submenu{
    width: 200px;
834
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
835
836
837
838
839
840
841
842
843
844
}

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

Marc Duez's avatar
Marc Duez committed
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
.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;
}

861
#file_menu, #axis_choice{
862
863
864
865
866
867
868
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
869
  font-size: 13px; 
870
  padding: 10px;
871
  background:@background;
872
873
874
875
876
877
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
878
  font-size: 13px;
879
880
881
882
883
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
884
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
885
  background : @border;
886
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
887
  cursor: pointer;
888
889
890
891
892
893
}


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


894
.popup_container{
895
  z-index:20;
896
897
898
899
900
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
901
  font-size: 13px; 
902
903
904
905
906
907
908
909
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

910
/* 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
911
912
913
914


a {
  color: @default;
915
916
}

Vidjil Team's avatar
Vidjil Team committed
917
918
a:hover {
  color: @select;
919
}
Vidjil Team's avatar
Vidjil Team committed
920
/* ----------------- */
921

922
.data-container, .info-container{
923
924
925
926
927
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
928
  font-size: 13px; 
929
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
930
  background: @background;
931
932
933
934
  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
935
936
937
  height: -moz-calc(~"100%" - 215px);
  height: -webkit-calc(~"100%" - 215px);
  height: calc(~"100%" - 215px);
938
939
}

940
941
.data-msg, .info-msg{
  overflow-x: hidden;
942
943
944
945
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
946
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
947
948
949
950
951
 background : @background;
}

.closeButton{
  position: absolute;
marc's avatar
marc committed
952
953
  top: 0px;
  right: 0px;
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
  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;
}

971
.button, .button_right, .button_left{
972
  cursor:pointer;
973
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
974
  padding: 0px 3px;
975
976
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
977
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
978
  color: @default;
Marc Duez's avatar
Marc Duez committed
979
980
}

981
982
983
984
.button_next {
    margin-left: -8px ;
}

985
986
987
988
.button_right{
    float: right;
}

989
990
.button_left {
    float: left;
991
    margin-right: -27px;
992
993
}

Marc Duez's avatar
Marc Duez committed
994
995
996
997
998
999
1000
1001
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
1002
    width: auto;
Marc Duez's avatar
Marc Duez committed
1003
    text-align: center;
Marc Duez's avatar
Marc Duez committed
1004
1005
    padding-left: 10px;
    padding-right: 10px;
1006
1007
1008
1009
}

.smallbutton {
    cursor:pointer;
1010
    font-size: 13px;
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
    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
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
.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
1044
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
1045
1046
    position: relative;
    float: left;
1047
    width: @width_left_container +200;
Marc Duez's avatar
Marc Duez committed
1048
1049
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1050
1051
1052
1053
1054
1055
#toIMGTSeg {
    width: 12px;
    display: inline-block;
    text-align: center;
}

1056
1057
1058
.menu-highlight {
    position: relative;
    float: left;
1059
    width: eval(@width_highlight);
1060
1061
}

1062
.devel-mode, .beta-mode {
1063
1064
1065
    display: none;
}

Marc Duez's avatar
Marc Duez committed
1066
1067
1068
.focus {
    position: relative;
    text-align: center;
1069
    float: left;
1070
1071
1072
    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));
1073
    overflow: hidden;
Mathieu Giraud's avatar
Mathieu Giraud committed
1074
    height: 1.1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
1075
1076
1077
1078
1079
1080
1081
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
1082
1083
}

1084
.segmenter {
1085
    overflow-x: scroll !important; 
1086
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1087
    height : 100px;
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
}

.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
1101
1102
1103
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1104
  z-index:5;
1105
  overflow: hidden;
1106
1107
1108
1109
}

#bot-container {
  position: fixed;
1110
  bottom: 0px;
1111
1112
  left: 0px;
  width: 100%;
1113
1114
1115
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1116
1117
1118
1119
1120
1121
1122
}

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

Marc Duez's avatar
Marc Duez committed
1123
#list_menu{
1124
1125
1126
1127
1128
1129
1130
1131
  -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
1132
  border-bottom-width: 2px;
1133
1134
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1135
1136
1137
1138
1139
#filter_input
{
  width: 200px;
}

1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
.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
1159
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1160
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1161
1162
  height: 8px;
  margin-top: 4px;
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
  display: inline-block;
}

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

#test_result{
1175
  font-family : @monospace-font;
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
  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
1186
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
{
  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
1203
#info_timepoint td{
1204
1205
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1206
1207
1208
1209
1210
1211
1212
1213
1214
  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{
1215
1216
1217
1218
1219
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1220
#info_window table .header, #info_timepoint table .header{
1221
  border-width : 2px;
1222
  background-color: @border;
1223
1224
}

1225
1226
1227
1228
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1229

1230
1231
1232
1233
1234
1235
1236
span.warningReads {
                  margin-left: .5em;
                  display:inline-block;
                  width: 1em;
                  text-align:center;
                  cursor: help}

1237
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1238
1239
1240
1241
1242
1243
1244
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1245
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1256
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1267
1268
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
    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;
}

1306
1307
1308
1309
1310
1311
1312
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1313
1314
1315
1316
1317
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1318
1319

.axis_select select {
1320
    background: @background;
1321
    color: @default;
Marc Duez's avatar
Marc Duez committed
1322
1323
    height: 20px;
    width: 120px;
1324
    -webkit-appearance: none;
1325
    border: solid;
Marc Duez's avatar
Marc Duez committed
1326
1327
1328
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1329
1330
1331
1332
1333
}

.axis_select_graph {
    top: 0px;
    display: none;
1334
1335
1336
1337
1338
}

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

#visu-separator {
1341
    height: @margin;
1342
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1343
    cursor: -webkit-grab;
1344
    background: @border;
Marc Duez's avatar
Marc Duez committed
1345
}
1346

1347
1348
1349
1350
1351
1352
1353
1354
1355
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1356
1357
1358
1359
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1360
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1361
    line-height: calc(~"100% - 1px");
1362
    background : @border;
Marc Duez's avatar
Marc Duez committed
1363
    cursor: pointer;
1364
1365
}

1366
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1367
    background: @highlight;
1368
}
Marc Duez's avatar
Marc Duez committed
1369
1370
1371
1372
1373
1374

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

1376
.db_div{
Marc Duez's avatar
Marc Duez committed
1377
  z-index:5;
1378
  position: fixed; 
marc's avatar
marc committed
1379
1380
1381
  top: 35px;
  width:100%;
  height: calc(~"100% - 35px");
1382
1383
1384
  font-size: 14px; 
  background: @background;
  display:none;
marc's avatar
marc committed
1385
  left: 0%;
1386
}
1387

1388
.db_msg{
Marc Duez's avatar
Marc Duez committed
1389
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1390
1391
1392
1393
    height : calc(~"100% - 30px")
}

#db_content{
1394
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1395
}
Marc Duez's avatar
Marc Duez committed
1396

1397
1398
1399
.db_table{
    width: 100%;
    border-collapse: collapse;
1400
1401
1402
    table-layout: fixed;
}

1403
1404
.db_table td {
    .ellipsis;
1405
1406
}

1407
1408
1409
1410
.db_table td:hover {
    .ellipsisOverflow;
}

marc's avatar
marc committed
1411
1412
1413
1414
1415
.db_table_split{
    text-align:center;
    background-color: @highlight;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1416
1417
1418
.db_table .column_200{    width: 200px;   }
.db_table .column_150{    width: 150px;   }
.db_table .column_100{    width: 100px;   }