vidjil.less 28.9 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
  opacity : 0.5 ;
  stroke-width : 20px;
}

231
232
233
234
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
235
  display: none;
236
237
}

238
.axis_h{
Marc Duez's avatar
Marc Duez committed
239
  stroke : @default ;
240
241
242
}

.axis_v{
243
 display: none;
244
245
}

Marc Duez's avatar
Marc Duez committed
246
247
248
249
.axis_v_hidden{
 display: none;
}

250
251
252
253
254
255
256
257
258
259
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
260
261
    fill: @border;
    opacity: 0.6;
262
263
}

264
.graph_time{
265
266
267
268
269
270
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

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

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

284
285
286
287
288
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

289
290
291
292
293
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

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

.graph_list{
  display: none;
}

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

318

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

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
344
  fill : @default;
345
346
347
348
}

.circle_focus{
  cursor:pointer;
349
  fill : @select;
350
351
352
353
354
355
356
}

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

357
358
359
360
361
362
363
364
365
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

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

Marc Duez's avatar
Marc Duez committed
373
374
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
375
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
376
377
}

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

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
388
  color : @select ;
Marc Duez's avatar
Marc Duez committed
389
390
391
  cursor: pointer;
}

392
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
393
  fill : @default ;
394
395
396
397
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
398
399
400
401
402
403
404
405
406
407
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

408
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
409
  stroke : @default ;
410
411
412
413
414
415
416
417
418
419
420
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

421
							  /*style list/data element*/
422
423
424
425
426


/*Metric*/

@width_left_container : 475px;
427
@width_highlight : 250px;
Mathieu Giraud's avatar
Mathieu Giraud committed
428
@width_stats: 250px;
429
430
431
432
433
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
434
@width_systemBox : 13px;
435
@width_listElem : (@width_left_container - @width_scrollbar);
436
@margin : 6px;
437
@margin_nameBox : 10px;
438
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
439
440


Marc Duez's avatar
Marc Duez committed
441
.list:hover, .tagElem:hover, .data:hover{
442
  background :@border;
443
444
}

Marc Duez's avatar
Marc Duez committed
445
446
447
448
449
450
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

451
452
453
454
455
456
457
458
459
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
460
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
461
462
463
464
465
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
466
  height : calc(~"100% - 30px");  /*100% - list_menu height */
467
468
469
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
470
#list_data{
471
472
473
474
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
475
476
477
478
479
480
481
482
483
484
485
486
}

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

.data_value{
}

487
488
489
490
.data {
    padding-right: 30px;
}

491
.list{
492
  width : 	445px;
493
494
495
496
497
498
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
499
  font-size: 13px;
500
501
502
503
504
505
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
506
  padding: 1px 4px 4px 1px;
507
508
509
510
511
512
513
  height :14px;
}

.selected{
  color : @select;
}

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

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

551
552
}

553
.systemBox, .systemBoxMenu {
554
555
    display: inline-block;
    width: @width_systemBox;
556
    height: 13px;
557
558
559
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
560
561
    margin: 4px;
    margin-top: 2px;
562
563
    color: @select;
    font-family: monospace;
564
    font-size: 80%;
565
    background: @border;
566
567
}

568
569
570
571
572
573
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
574
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
575
    height: 20px;
Marc Duez's avatar
Marc Duez committed
576
    cursor : pointer;
577
578
}	      

Marc Duez's avatar
Marc Duez committed
579
580
581
.hiddenCheckBox {
    display : none;
}
582

583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
.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;
}

610
611
612
613
614
.list_sort{
    margin-right : 30px;
    float: right;
}

615
616
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
617
  width : 445px;
618
619
620
621
622
623
624
625
626
627
628
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

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

629
630
631
632
.sequence-line:hover{
    font-weight: bold;
}

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

654
655
656
.seq-marge {
  word-spacing: normal;
}
657
658
659
660

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
661
.D {
662
663
664
665
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
666
}
Mathieu Giraud's avatar
Mathieu Giraud committed
667
668

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

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
695
696
697
698
699
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
700
span .substitution{
Marc Duez's avatar
Marc Duez committed
701
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
702
}
Marc Duez's avatar
Marc Duez committed
703

704
705
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
706
.tagSelector{
707
708
709
710
711
712
713
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
714
  background: @background;
715
716
}

Marc Duez's avatar
Marc Duez committed
717
.dataMenu{
718
719
720
721
722
723
724
725
726
727
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

728
729
730
731
732
733
734
735
736
737
738
739
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
740
741
742
  margin-right: 5px;
  height: 14px;
  width: 14px;
743
744
745
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
746
747
  margin-bottom: -3px;
  margin-top: 3px;
748
749
}

750
751
752
753
#normalized_size {
    width: 80px;
}

754
755
756
757
758
759
760
761
							  /*menu*/

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

764
765
766
767
768
769

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

770
771
772
773
774
775
776
777
778
779
780
781
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
783
784
.submenu{
    width: 200px;
785
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
786
787
788
789
790
791
792
793
794
795
}

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

796
#file_menu, #axis_choice{
797
798
799
800
801
802
803
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
804
  font-size: 13px; 
805
  padding: 10px;
806
  background:@background;
807
808
809
810
811
812
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
813
  font-size: 13px;
814
815
816
817
818
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
819
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
820
  background : @border;
821
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
822
  cursor: pointer;
823
824
825
826
827
828
}


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


829
.popup_container{
830
  z-index:20;
831
832
833
834
835
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
836
  font-size: 13px; 
837
838
839
840
841
842
843
844
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

845
.popup_container a {
846
847
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
848
  color: @default ;
849
850
}

851
.popup_container a:hover{
852
853
854
855
856
857
858
859
860
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
861
  font-size: 13px; 
862
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
863
  background: @background;
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
  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
879
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
 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;
}

904
.button, .button_right{
905
  cursor:pointer;
906
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
907
  padding: 0px 3px;
908
909
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
910
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
911
  color: @default;
Marc Duez's avatar
Marc Duez committed
912
913
}

914
915
916
917
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
918
919
920
921
922
923
924
925
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
926
    width: auto;
Marc Duez's avatar
Marc Duez committed
927
    text-align: center;
Marc Duez's avatar
Marc Duez committed
928
929
    padding-left: 10px;
    padding-right: 10px;
930
931
932
933
}

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

974
.menu-highlight {
Mathieu Giraud's avatar
Mathieu Giraud committed
975
    display: none;
976
977
978
979
980
    position: relative;
    float: left;
    width: @width_highlight;
}

Marc Duez's avatar
Marc Duez committed
981
982
983
.focus {
    position: relative;
    text-align: center;
984
    float: left;
985
986
987
    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));
988
989
    overflow: hidden;
    height: 1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
990
991
992
993
994
995
996
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
997
998
}

999
.segmenter {
1000
    overflow-x: scroll !important; 
1001
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1002
    height : 100px;
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
}

.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;
1018
  overflow: hidden;
1019
1020
1021
1022
}

#bot-container {
  position: fixed;
1023
  bottom: 0px;
1024
1025
  left: 0px;
  width: 100%;
1026
1027
1028
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1029
1030
1031
1032
1033
1034
1035
}

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

Marc Duez's avatar
Marc Duez committed
1036
#list_menu{
1037
1038
1039
1040
1041
1042
1043
1044
  -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
1045
  border-bottom-width: 2px;
1046
1047
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1048
1049
1050
1051
1052
#filter_input
{
  width: 200px;
}

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

Marc Duez's avatar
Marc Duez committed
1133
#info_window table .header, #info_timepoint table .header{
1134
  border-width : 2px;
1135
  background-color: @border;
1136
1137
}

1138
1139
1140
1141
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1142

1143
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1144
1145
1146
1147
1148
1149
1150
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1151
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1162
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1173
1174
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
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
1205
1206
1207
1208
1209
1210
1211
    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;
}

1212
1213
1214
1215
1216
1217
1218
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1219
1220
1221
1222
1223
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1224
1225

.axis_select select {
1226
    background: @background;
1227
    color: @default;
Marc Duez's avatar
Marc Duez committed
1228
1229
    height: 20px;
    width: 120px;
1230
    -webkit-appearance: none;
1231
    border: solid;
Marc Duez's avatar
Marc Duez committed
1232
1233
1234
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1235
1236
1237
1238
1239
}

.axis_select_graph {
    top: 0px;
    display: none;
1240
1241
1242
1243
1244
}

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

#visu-separator {
1247
    height: @margin;
1248
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1249
    cursor: -webkit-grab;
1250
    background: @border;
Marc Duez's avatar
Marc Duez committed
1251
}
1252

1253
1254
1255
1256
1257
1258
1259
1260
1261
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1262
1263
1264
1265
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1266
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1267
    line-height: calc(~"100% - 1px");
1268
    background : @border;
Marc Duez's avatar
Marc Duez committed
1269
    cursor: pointer;
1270
1271
}

1272
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1273
    background: @highlight;
1274
}
Marc Duez's avatar
Marc Duez committed
1275
1276
1277
1278
1279
1280

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

1282
.db_div{
Marc Duez's avatar
Marc Duez committed
1283
  z-index:5;
1284
1285
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1286
  top: 20px;
1287
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1288
1289
  width:80%;
  height: calc(~"100% - 50px");
1290
1291
1292
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1293
  left: 10%;
1294
}
1295

1296
.db_msg{
Marc Duez's avatar
Marc Duez committed
1297
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1298
1299
1300
1301
    height : calc(~"100% - 30px")
}

#db_content{
1302
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1303
}
Marc Duez's avatar
Marc Duez committed
1304

1305
1306
1307
.db_table{
    width: 100%;
    border-collapse: collapse;
1308
1309
1310
1311
1312
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1313
1314
    text-overflow: ellipsis;
    white-space: nowrap;
1315
1316
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1317
1318
1319
.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
1320
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1321

1322
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1323
    width: 100px;
1324
1325
1326
}

.db_table .column2{
1327
    width: 150px;
1328
1329
1330
1331
1332
1333
1334
1335
1336
}

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

1337
.db_table .column_sep {
1338
1339
1340
1341
1342
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1343
1344
}

Marc Duez's avatar
Marc Duez committed
1345
.db_block {
1346
1347
1348
1349
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1350
1351
1352
1353
1354
1355
1356
1357
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1358
.db_block_left {
1359
1360
1361
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1362
.db_block_right {
1363
1364
1365
    float : right;
}

1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
.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
1376
1377
1378
1379
}

.pointer
{
1380
1381
1382
1383
    cursor: pointer;
} 

.db_table tr:hover{
1384
    background: @border;
1385
1386
1387
1388
1389
1390
}

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

Marc Duez's avatar
Marc Duez committed
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1404
    overflow-y: scroll;
1405
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1406
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1407
1408
1409
    position: relative;
}

1410
1411
1412
1413
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
Marc Duez's avatar
Marc Duez committed
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
}

.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
1428
1429
}

Marc Duez's avatar
Marc Duez committed
1430
1431
1432
1433
1434
1435
.summary_filename {
    width: 200px;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    overflow-wrap: break-word;
1436
    margin-right:5px;
Marc Duez's avatar
Marc Duez committed
1437
1438
1439
1440
1441
1442
1443
1444
}

.loading_gauge {
    height: 13px;
    width: 98px;
    display: inline-block;
    border: solid;
    border-width: 1px;
1445
    margin: 0px 5px;
Marc Duez's avatar
Marc Duez committed
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
}

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

1456
1457
1458
1459
1460
1461
1462
.loading_status{
    width: 100px;
    text-align: center;
    display: inline-block;
    margin: 0px 5px;
}

Marc Duez's avatar
Marc Duez committed
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
.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
1475
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
1476
    text-align:center;
1477
    margin: 0px 5px;
Marc Duez's avatar
Marc Duez committed
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
}

@-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
1494
1495
}

1496
.flash_container {
Marc Duez's avatar
Marc Duez committed
1497
1498
1499
1500
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
Marc Duez's avatar
Marc Duez committed
1501
    z-index: 100;
Marc Duez's avatar
Marc Duez committed
1502
1503
}

1504
.log_container {
Marc Duez's avatar
Marc Duez committed
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
    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
1524
1525
1526
    width: 350px;
    min-height: 20px;
    border: solid;
Marc Duez's avatar