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

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


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


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

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

34
35
36

/* texts that are not sequences nor identifiers */

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

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



49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
h2
{
  margin-top: 2px;
}

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

#visu-container{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  height :100%;
67
68
  margin : auto;
  overflow : hidden;
69
  background : @background;
70
71
72
73
74
}

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

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

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

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

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

#visu, #visu2 {
  height : 50%;
126
  width : 100%;
127
128
}

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

133
134
135
136
137
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

138
139
                        /* left-container - info */

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

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

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

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

165
166
.info_row_content {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
167
    width : 345px;
168
169
}

170
171
172
173
174
175
176
177
#info_point {
    margin-top: 15px;
}

#info_data_file
{
  font-size: 200%;
}
178
179
180
181
182
183
184
185

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
186
  fill : @background
187
188
189
190
191
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
192
  stroke: @default;
193
194
}

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

.graph_data:hover{
    opacity:0.8;
}

206
207
208
209
210
211
212
213
214
215
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
216
  stroke: @default;
217
218
219
220
221
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
222
  stroke: @select;
223
224
}

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

.axis_h{
Marc Duez's avatar
Marc Duez committed
232
  stroke : @default ;
233
234
235
}

.axis_v{
236
 display: none;
237
238
}

Marc Duez's avatar
Marc Duez committed
239
240
241
242
.axis_v_hidden{
 display: none;
}

243
244
245
246
247
248
249
250
251
252
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
253
254
    fill: @border;
    opacity: 0.6;
255
256
}

257
.graph_time{
258
259
260
261
262
263
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

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

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

277
278
279
280
281
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

282
283
284
285
286
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

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

.graph_list{
  display: none;
}

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

311

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

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
337
  fill : @default;
338
339
340
341
}

.circle_focus{
  cursor:pointer;
342
  fill : @select;
343
344
345
346
347
348
349
}

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

350
351
352
353
354
355
356
357
358
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

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

Marc Duez's avatar
Marc Duez committed
366
367
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
368
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
369
370
}

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

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
381
  color : @select ;
Marc Duez's avatar
Marc Duez committed
382
383
384
  cursor: pointer;
}

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

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

.sp_hidden_legend{
  display : none;
}

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

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

.sp_subline_hidden{
  stroke-width : 0px;
}

414
							  /*style list/data element*/
415
416
417
418
419


/*Metric*/

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


Marc Duez's avatar
Marc Duez committed
434
.list:hover, .tagElem:hover, .data:hover{
435
  background :@border;
436
437
}

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

444
445
446
447
448
449
450
451
452
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
453
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
454
455
456
457
458
}

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

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

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

.data_value{
}

480
481
482
483
.data {
    padding-right: 30px;
}

484
.list{
485
  width : 	445px;
486
487
488
489
490
491
  display :	block;
  padding : 	2px;
}

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

.selected{
  color : @select;
}

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

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

544
545
}

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

561
562
563
564
565
566
.systemBox {
    float: left;
}

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

Marc Duez's avatar
Marc Duez committed
572
573
574
.hiddenCheckBox {
    display : none;
}
575

576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
.clusterBox{
  width: @width_clusterBox;
  float: left;
  height: 12px;
  display: inline-block;
  text-align :center
}

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



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

603
604
605
606
607
.list_sort{
    margin-right : 30px;
    float: right;
}

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

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

622
623
624
625
.sequence-line:hover{
    font-weight: bold;
}

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

647
648
649
.seq-marge {
  word-spacing: normal;
}
650
651
652
653

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

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

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

697
698
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
699
.tagSelector{
700
701
702
703
704
705
706
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
707
  background: @background;
708
709
}

Marc Duez's avatar
Marc Duez committed
710
.dataMenu{
711
712
713
714
715
716
717
718
719
720
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

721
722
723
724
725
726
727
728
729
730
731
732
.tagElem{
  margin:1px;
  height: 20px;
}

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

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

743
744
745
746
#normalized_size {
    width: 80px;
}

747
748
749
750
751
752
753
754
							  /*menu*/

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

757
758
759
760
761
762

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

763
764
765
766
767
768
769
770
771
772
773
774
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
776
777
.submenu{
    width: 200px;
778
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
779
780
781
782
783
784
785
786
787
788
}

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

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

.buttonSelector {
  background : @background;
  cursor:pointer;
806
  font-size: 13px;
807
808
809
810
811
  margin :2px;
  display:block;
  text-align:left;
}

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


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


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

838
.popup_container a {
839
840
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
841
  color: @default ;
842
843
}

844
.popup_container a:hover{
845
846
847
848
849
850
851
852
853
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
854
  font-size: 13px; 
855
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
856
  background: @background;
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
  display:none;
  max-width: -moz-calc(~"100%" - @width_left_container + 60px);
  max-width: -webkit-calc(~"100%" - @width_left_container + 60px);
  max-width: calc(~"100%" - @width_left_container + 60px);
  height: -moz-calc(~"100%" - 200px);
  height: -webkit-calc(~"100%" - 200px);
  height: calc(~"100%" - 200px);
}

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

Marc Duez's avatar
Marc Duez committed
872
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
 background : @background;
}

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

.closeButton:hover{
  color: @select;
}

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

907
908
909
910
.button_right{
    float: right;
}

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

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

967
.menu-highlight {
Mathieu Giraud's avatar
Mathieu Giraud committed
968
    display: none;
969
970
971
972
973
    position: relative;
    float: left;
    width: @width_highlight;
}

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

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

.selector{
  display: none;
  position: fixed;
  margin-right: -5px;
  padding: 3px;
  border: solid;
  background: inherit;
  text-center: left;
  min-width: 150px;
  margin-left: -6px;
  border-top: none;
  margin-top: 4px;
  z-index:5;
1011
  overflow: hidden;
1012
1013
1014
1015
}

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

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

Marc Duez's avatar
Marc Duez committed
1029
#list_menu{
1030
1031
1032
1033
1034
1035
1036
1037
  -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
1038
  border-bottom-width: 2px;
1039
1040
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1041
1042
1043
1044
1045
#filter_input
{
  width: 200px;
}

1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
.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
1065
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1066
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1067
1068
  height: 8px;
  margin-top: 4px;
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
  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
1092
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
{
  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
1109
#info_timepoint td{
1110
1111
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1112
1113
1114
1115
1116
1117
1118
1119
1120
  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{
1121
1122
1123
1124
1125
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1126
#info_window table .header, #info_timepoint table .header{
1127
  border-width : 2px;
1128
  background-color: @border;
1129
1130
}

1131
1132
1133
1134
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1135

1136
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1137
1138
1139
1140
1141
1142
1143
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

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

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

1166
1167
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
    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;
}

1205
1206
1207
1208
1209
1210
1211
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1212
1213
1214
1215
1216
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1217
1218

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

.axis_select_graph {
    top: 0px;
    display: none;
1233
1234
1235
1236
1237
}

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

#visu-separator {
1240
    height: @margin;
1241
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1242
    cursor: -webkit-grab;
1243
    background: @border;
Marc Duez's avatar
Marc Duez committed
1244
}
1245

1246
1247
1248
1249
1250
1251
1252
1253
1254
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

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

1265
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1266
    background: @highlight;
1267
}
Marc Duez's avatar
Marc Duez committed
1268
1269
1270
1271
1272
1273

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

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

1289
.db_msg{
Marc Duez's avatar
Marc Duez committed
1290
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1291
1292
1293
1294
    height : calc(~"100% - 30px")
}

#db_content{
1295
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1296
}
Marc Duez's avatar
Marc Duez committed
1297

1298
1299
1300
.db_table{
    width: 100%;
    border-collapse: collapse;
1301
1302
1303
1304
1305
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1306
1307
    text-overflow: ellipsis;
    white-space: nowrap;
1308
1309
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1310
1311
1312
.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
1313
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1314

1315
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1316
    width: 100px;
1317
1318
1319
}

.db_table .column2{
1320
    width: 150px;
1321
1322
1323
1324
1325
1326
1327
1328
1329
}

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

1330
.db_table .column_sep {
1331
1332
1333
1334
1335
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1336
1337
}

Marc Duez's avatar
Marc Duez committed
1338
.db_block {
1339
1340
1341
1342
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1343
1344
1345
1346
1347
1348
1349
1350
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

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

Marc Duez's avatar
Marc Duez committed
1355
.db_block_right {
1356
1357
1358
    float : right;
}

1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
.db_table th{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
} 

.db_table tr{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1369
1370
1371
1372
}

.pointer
{
1373
1374
1375
1376
    cursor: pointer;
} 

.db_table tr:hover{
1377
    background: @border;
1378
1379
1380
1381
1382
1383
}

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

Marc Duez's avatar
Marc Duez committed
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1397
    overflow-y: scroll;
1398
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1399
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1400
1401
1402
    position: relative;
}

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

.db_help_desc {
    margin-left: 150px;
}

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

.db_help_p {
    margin-top: 20px;
    margin-left: 20px;
Marc Duez's avatar
Marc Duez committed
1421
1422
}

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

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

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

1449
1450
1451
1452
1453
1454
1455
.loading_status{
    width: 100px;
    text-align: center;
    display: inline-block;
    margin: 0px 5px;
}

Marc Duez's avatar
Marc Duez committed
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
.loading_seq {
    height: 15px;
    width: 100px;
    background-image: -webkit-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%); 
    background-image: -moz-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -o-linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-image: linear-gradient(-45deg, @border 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, @border 50%, @border 75%, rgba(255, 154, 26, 0) 75%);
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
Marc Duez's avatar
css:    
Marc Duez committed
1468
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
1469
    text-align:center;
1470
    margin: 0px 5px;
Marc Duez's avatar
Marc Duez committed
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
}

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

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

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

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

1489
.flash_container {
Marc Duez's avatar
Marc Duez committed
1490
1491
1492
1493
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
Marc Duez's avatar
Marc Duez committed
1494
    z-index: 100;
Marc Duez's avatar
Marc Duez committed
1495
1496
}

1497
.log_container {
Marc Duez's avatar
Marc Duez committed
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
    height : 500px;
    width : 400px;
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
    padding: 5px;
    margin: 5px;
    background: @highlight;
    border-color: @border;
    z-index: 15;
    border: solid;
    border-width: 1px;
    opacity: 0.85;
    overflow-y: scroll;
    display: none;
}

.flash_0, .flash_1, .flash_2 {
Marc Duez's avatar
Marc Duez committed
1517
1518
1519
    width: 350px;
    min-height: 20px;
    border: solid;
Marc Duez's avatar
Marc Duez committed
1520
    border-width: 2px;
Marc Duez's avatar
Marc Duez committed
1521
1522
1523
1524
1525
1526
    display: block;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    background: @background;
    border-color: @border;
1527
1528
1529
1530
1531
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
Marc Duez's avatar