vidjil.less 33.1 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
}

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

36
37
38

/* texts that are not sequences nor identifiers */

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

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



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

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

82
83
84
85
86
87
88
89
90
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

91
#mid-container {
Marc Duez's avatar
Marc Duez committed
92
  position : fixed;
Marc Duez's avatar
Marc Duez committed
93
  top : @top_container_height;
Marc Duez's avatar
Marc Duez committed
94
  bottom : 125px ;
95
96
97
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
98
99
  overflow: hidden;
  background: @background;
100
  margin: @margin;
101
102
}

103
104
105
106
107
108
109
110
#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;
111
112
113
114
115
116
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
117
  overflow-y : none;
118
119
120
121
122
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
123
  display : table;
124
125
126
127
}

#visu, #visu2 {
  height : 50%;
128
  width : 100%;
129
130
}

131
132
133
134
#visu2 {
max-height: calc(~"100%" - @margin)
}

135
136
137
138
139
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

140
141
                        /* left-container - info */

142
143
144
145
146
#info-row{
    height : 200px;
    display : table-row;
}

147
#info{
148
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
149
  font-size: 13px;
150
  padding:3px;
151
  background : @background;
152
  display : table-cell;
153
154
}

155
156
157
158
159
160
161
162
163
164
165
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

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

166
.info_row_content {
167
    width: 100%;
168
169
170
    display: inline-block;
}

171
172
173
174
#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
  opacity : 0.5 ;
  stroke-width : 20px;
}

228
229
230
231
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
232
  display: none;
233
234
}

235
.axis_h{
Marc Duez's avatar
Marc Duez committed
236
  stroke : @default ;
237
238
239
}

.axis_v{
240
 display: none;
241
242
}

Marc Duez's avatar
Marc Duez committed
243
244
245
246
.axis_v_hidden{
 display: none;
}

247
248
249
250
251
252
253
254
255
256
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
257
258
    fill: @border;
    opacity: 0.6;
259
260
}

261
.graph_time{
262
263
264
265
266
267
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
268
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
269
  fill : @default ;
270
  text-anchor:middle;
271
  font-size : 120%;
272
273
}

274
275
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
276
  fill : @default ;
277
  text-anchor:end;
278
  dominant-baseline: middle;
279
280
}

281
282
283
284
285
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

286
287
288
289
290
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

291
292
.graph_menu{
  position: absolute;
293
294
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
295
296
  min-width: 22px;
  min-height: 18px;
297
  text-align: center;
298
299
  border-bottom: solid;
  border-left: solid;
300
301
302
  border-color: @border;
  background : @background;
}
303
304
305
306
307
308

.graph_list{
  display: none;
}

.graph_listElem:hover{
309
  background : @border;
310
  width: 100%;
Marc Duez's avatar
Marc Duez committed
311
  cursor: move;
312
  cursor: webkit-grab;
313
314
}

315

316
317
318
319
320
321
322
323
324
325
326
327
							  /*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;
328
  fill : @default;
329
  stroke-width:4px;
330
331
332
333
334
335
336
337
338
339
340
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
341
  fill : @default;
342
343
344
345
}

.circle_focus{
  cursor:pointer;
346
  fill : @select;
347
348
349
350
351
352
353
}

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

354
355
356
357
358
359
360
361
362
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

363
.sp_legend{
Marc Duez's avatar
Marc Duez committed
364
  fill : @default ;
365
366
  font-weight : bold;
  text-anchor : middle;
367
  dominant-baseline: middle;
368
369
}

370
371
372
373
374
375
376
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
377
378
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
379
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
380
381
}

Marc Duez's avatar
Marc Duez committed
382
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
383
  color : @default ;
Marc Duez's avatar
Marc Duez committed
384
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
385
386
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
387
388
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
389
390
391
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
392
  color : @select ;
Marc Duez's avatar
Marc Duez committed
393
394
395
  cursor: pointer;
}

396
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
397
  fill : @default ;
398
399
400
401
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
402
403
404
405
406
407
408
409
410
411
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

412
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
413
  stroke : @default ;
414
415
416
417
418
419
420
421
422
423
424
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

425
							  /*style list/data element*/
426
427
428
429


/*Metric*/

Marc Duez's avatar
Marc Duez committed
430
@top_container_height : 32px;
431
@width_left_container : 475px;
432
@width_highlight : 300px;
Mathieu Giraud's avatar
Mathieu Giraud committed
433
@width_stats: 350px;
434
435
436
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
437
@width_thumbBox : 16px;
438
439
@width_sizeBox : 60px;
@width_infoBox : 20px;
440
@width_systemBox : 12px;
441
@width_listElem : (@width_left_container - @width_scrollbar);
442
@margin : 6px;
443
@margin_nameBox : 10px;
444
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
445
446


Marc Duez's avatar
Marc Duez committed
447
.list:hover, .tagElem:hover, .data:hover{
448
  background :@border;
449
450
}

Marc Duez's avatar
Marc Duez committed
451
452
453
454
455
456
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

457
458
459
460
461
462
463
464
465
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
466
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
467
468
469
470
471
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
472
  height : calc(~"100% - 30px");  /*100% - list_menu height */
473
474
475
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
476
#list_data{
477
478
479
480
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
481
482
483
484
485
486
487
488
489
490
491
492
}

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

.data_value{
}

493
494
495
496
.data {
    padding-right: 30px;
}

497
.list{
498
  width : 	445px;
499
500
501
502
503
504
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
505
  font-size: 13px;
506
507
508
509
510
511
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
512
  padding: 1px 4px 4px 1px;
513
514
515
516
517
518
519
  height :14px;
}

.selected{
  color : @select;
}

520
.nameBox {
521
  width: 300px;
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
  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;
546
  overflow: hidden;
547
548
}

549
550
551
552
553
554
555
556
557
558

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

559
.infoBox{
Marc Duez's avatar
Marc Duez committed
560
  width: 15px;
561
  float: right;
Marc Duez's avatar
Marc Duez committed
562
  height: 15px;
563
  display: inline-block;
564
  user-select: none;
565
  text-align: center;
566
567
  border: solid;
  border-width: 1px;
568
  border-color: @background;
569
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
570
  margin: 0px 1px;
571
}
Marc Duez's avatar
Marc Duez committed
572
.infoBox:hover{
573
574
575
576
  background: @highlight;
}
.infoBox-open{
  background: @border;
577
578
}

579
.systemBox, .systemBoxMenu {
580
581
    display: inline-block;
    width: @width_systemBox;
582
583
584
    height: @width_systemBox;
    line-height: @width_systemBox;
    vertical-align: middle;
585
586
587
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
588
589
    margin: 4px;
    margin-top: 2px;
590
591
592
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    font-size: 70%;
593
    background: @border;
594
595
}

596
597
598
599
600
601
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Vidjil Team's avatar
Vidjil Team committed
602
    min-width: 67px;
Marc Duez's avatar
Marc Duez committed
603
    height: 20px;
Marc Duez's avatar
Marc Duez committed
604
    cursor : pointer;
605
606
}	      

Marc Duez's avatar
Marc Duez committed
607
608
609
.hiddenCheckBox {
    display : none;
}
610

611
612
613
614
615
616
617
618
619
620
621
622
.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
623
624
625
626
  float: left;
  user-select: none;
  margin-right: 8px;
  margin-left: 2px;
627
628
629
630
631
632
633
634
635
}



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

636
637
638
639
640
.list_sort{
    margin-right : 30px;
    float: right;
}

641
642
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
643
  width : 445px;
644
645
646
647
648
649
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
650
.list_focus{
Marc Duez's avatar
Marc Duez committed
651
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
652
}
653
654

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
655
    white-space: nowrap;
656
}
Marc Duez's avatar
Marc Duez committed
657
.sequence-line:hover { 
658
659
660
    font-weight: bold;
}

661
.seq-fixed {
Marc Duez's avatar
Marc Duez committed
662
  font-weight: bold;
663
664
  position: relative;
  display: inline-block;
665
  width: (@width_left_container - @width_scrollbar);
666
667
  margin: -2px;
  padding: 2px;
668
669
670
671
672
673
674
675
676
  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
677
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
678
  position: relative;
679
  bottom: 3px;
680
  font-size:1em;
681
682
}

683
684
685
.seq-marge {
  word-spacing: normal;
}
686
687
688
689

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
690
.D {
691
692
693
694
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
695
}
Mathieu Giraud's avatar
Mathieu Giraud committed
696
697

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
698
699
700
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
701
702
703
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
704
    margin: -1px;
705
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
706
707
708
709
710
711
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
712
713
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
714
}
Mathieu Giraud's avatar
Mathieu Giraud committed
715
716
717
718
719
720
721
722
723
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
724
725
726
727
728
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
729
span .substitution{
Marc Duez's avatar
Marc Duez committed
730
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
731
}
Marc Duez's avatar
Marc Duez committed
732

733
734
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
735
.tagSelector{
736
737
738
739
740
741
742
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
743
  background: @background;
744
745
}

Marc Duez's avatar
Marc Duez committed
746
.dataMenu{
747
748
749
750
751
752
753
754
755
756
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

757
758
759
760
761
762
763
764
765
766
767
768
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
769
770
771
  margin-right: 5px;
  height: 14px;
  width: 14px;
772
773
774
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
775
776
  margin-bottom: -3px;
  margin-top: 3px;
777
778
}

779
780
781
782
#normalized_size {
    width: 80px;
}

783
784
785
786
787
788
789
790
							  /*menu*/

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

793
794
795
796
797
798

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

799
800
801
802
803
804
805
806
807
808
809
810
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
812
813
.submenu{
    width: 200px;
814
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
815
816
817
818
819
820
821
822
823
824
}

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

Marc Duez's avatar
Marc Duez committed
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
.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;
}

841
#file_menu, #axis_choice{
842
843
844
845
846
847
848
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
849
  font-size: 13px; 
850
  padding: 10px;
851
  background:@background;
852
853
854
855
856
857
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
858
  font-size: 13px;
859
860
861
862
863
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
864
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
865
  background : @border;
866
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
867
  cursor: pointer;
868
869
870
871
872
873
}


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


874
.popup_container{
875
  z-index:20;
876
877
878
879
880
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
881
  font-size: 13px; 
882
883
884
885
886
887
888
889
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

Vidjil Team's avatar
Vidjil Team committed
890
891
892
893
894
895

/* 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)  */

a {
  color: @default;
896
897
}

Vidjil Team's avatar
Vidjil Team committed
898
899
a:hover {
  color: @select;
900
}
Vidjil Team's avatar
Vidjil Team committed
901
/* ----------------- */
902

903
.data-container, .info-container{
904
905
906
907
908
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
909
  font-size: 13px; 
910
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
911
  background: @background;
912
913
914
915
  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
916
917
918
  height: -moz-calc(~"100%" - 215px);
  height: -webkit-calc(~"100%" - 215px);
  height: calc(~"100%" - 215px);
919
920
}

921
922
.data-msg, .info-msg{
  overflow-x: hidden;
923
924
925
926
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
927
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
928
929
930
931
932
 background : @background;
}

.closeButton{
  position: absolute;
marc's avatar
marc committed
933
934
  top: 0px;
  right: 0px;
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
  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;
}

952
.button, .button_right, .button_left{
953
  cursor:pointer;
954
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
955
  padding: 0px 3px;
956
957
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
958
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
959
  color: @default;
Marc Duez's avatar
Marc Duez committed
960
961
}

962
963
964
965
.button_next {
    margin-left: -8px ;
}

966
967
968
969
.button_right{
    float: right;
}

970
971
.button_left {
    float: left;
972
    margin-right: -27px;
973
974
}

Marc Duez's avatar
Marc Duez committed
975
976
977
978
979
980
981
982
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
983
    width: auto;
Marc Duez's avatar
Marc Duez committed
984
    text-align: center;
Marc Duez's avatar
Marc Duez committed
985
986
    padding-left: 10px;
    padding-right: 10px;
987
988
989
990
}

.smallbutton {
    cursor:pointer;
991
    font-size: 13px;
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
    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
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
.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
1025
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
1026
1027
    position: relative;
    float: left;
1028
    width: @width_left_container +200;
Marc Duez's avatar
Marc Duez committed
1029
1030
}

1031
1032
1033
.menu-highlight {
    position: relative;
    float: left;
1034
    width: eval(@width_highlight);
1035
1036
}

1037
1038
1039
1040
.devel-mode {
    display: none;
}

Marc Duez's avatar
Marc Duez committed
1041
1042
1043
.focus {
    position: relative;
    text-align: center;
1044
    float: left;
1045
1046
1047
    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));
1048
    overflow: hidden;
Mathieu Giraud's avatar
Mathieu Giraud committed
1049
    height: 1.1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
1050
1051
1052
1053
1054
1055
1056
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
1057
1058
}

1059
.segmenter {
1060
    overflow-x: scroll !important; 
1061
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1062
    height : 100px;
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
}

.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
1076
1077
1078
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1079
  z-index:5;
1080
  overflow: hidden;
1081
1082
1083
1084
}

#bot-container {
  position: fixed;
1085
  bottom: 0px;
1086
1087
  left: 0px;
  width: 100%;
1088
1089
1090
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1091
1092
1093
1094
1095
1096
1097
}

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

Marc Duez's avatar
Marc Duez committed
1098
#list_menu{
1099
1100
1101
1102
1103
1104
1105
1106
  -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
1107
  border-bottom-width: 2px;
1108
1109
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1110
1111
1112
1113
1114
#filter_input
{
  width: 200px;
}

1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
.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
1134
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1135
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1136
1137
  height: 8px;
  margin-top: 4px;
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
  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;
}

Marc Duez's avatar
Marc Duez committed
1161
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
{
  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
1178
#info_timepoint td{
1179
1180
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1181
1182
1183
1184
1185
1186
1187
1188
1189
  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{
1190
1191
1192
1193
1194
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1195
#info_window table .header, #info_timepoint table .header{
1196
  border-width : 2px;
1197
  background-color: @border;
1198
1199
}

1200
1201
1202
1203
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1204

1205
1206
1207
1208
1209
1210
1211
span.warningReads {
                  margin-left: .5em;
                  display:inline-block;
                  width: 1em;
                  text-align:center;
                  cursor: help}

1212
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1213
1214
1215
1216
1217
1218
1219
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1220
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1231
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1242
1243
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
    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;
}

1281
1282
1283
1284
1285
1286
1287
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1288
1289
1290
1291
1292
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1293
1294

.axis_select select {
1295
    background: @background;
1296
    color: @default;
Marc Duez's avatar
Marc Duez committed
1297
1298
    height: 20px;
    width: 120px;
1299
    -webkit-appearance: none;
1300
    border: solid;
Marc Duez's avatar
Marc Duez committed
1301
1302
1303
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1304
1305
1306
1307
1308
}

.axis_select_graph {
    top: 0px;
    display: none;
1309
1310
1311
1312
1313
}

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

#visu-separator {
1316
    height: @margin;
1317
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1318
    cursor: -webkit-grab;
1319
    background: @border;
Marc Duez's avatar
Marc Duez committed
1320
}
1321

1322
1323
1324
1325
1326
1327
1328
1329
1330
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1331
1332
1333
1334
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1335
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1336
    line-height: calc(~"100% - 1px");
1337
    background : @border;
Marc Duez's avatar
Marc Duez committed
1338
    cursor: pointer;
1339
1340
}

1341
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1342
    background: @highlight;
1343
}
Marc Duez's avatar
Marc Duez committed
1344
1345
1346
1347
1348
1349

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

1351
.db_div{
Marc Duez's avatar
Marc Duez committed
1352
  z-index:5;
1353
  position: fixed; 
marc's avatar
marc committed
1354
1355
1356
  top: 35px;
  width:100%;
  height: calc(~"100% - 35px");
1357
1358
1359
  font-size: 14px; 
  background: @background;
  display:none;
marc's avatar
marc committed
1360
  left: 0%;
1361
}
1362

1363
.db_msg{
Marc Duez's avatar
Marc Duez committed
1364
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1365
1366
1367
1368
    height : calc(~"100% - 30px")
}

#db_content{
1369
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1370
}
Marc Duez's avatar
Marc Duez committed
1371

1372
1373
1374
.db_table{
    width: 100%;
    border-collapse: collapse;
1375
1376
1377
1378
1379
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1380
1381
    text-overflow: ellipsis;
    white-space: nowrap;
1382
1383
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1384
1385
1386
.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
1387
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1388

1389
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1390
    width: 100px;
1391
1392
1393
}

.db_table .column2{
1394
    width: 150px;
1395
1396
1397
1398
1399
1400
1401
1402
1403
}

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

1404
.db_table .column_sep {
1405
1406
1407
1408
1409
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1410
1411
}

Marc Duez's avatar
Marc Duez committed
1412
.db_block {
1413
1414
1415
1416
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1417
1418
1419
1420
.db_footer{
    display: inline-block;
    position: absolute;
    bottom: 5px;
1421
    left:0px;
Marc Duez's avatar
Marc Duez committed
1422
1423
}

Marc Duez's avatar
Marc Duez committed
1424
.db_block_left {
1425
1426
1427
    float : left;
}

Marc Duez's avatar
Marc Duez committed