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
235
236
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
}

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

.axis_v{
242
 display: none;
243
244
}

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

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

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

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

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

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

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

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

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

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

.graph_list{
  display: none;
}

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

317

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

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

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

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

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

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

.line_inactive {
  display: none;
}

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

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

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

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

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

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

.sp_hidden_legend{
  display : none;
}

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

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

.sp_subline_hidden{
  stroke-width : 0px;
}

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


/*Metric*/

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


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

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

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

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

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

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

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

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

.data_value{
}

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

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

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

.selected{
  color : @select;
}

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

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

550
551
}

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

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

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

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

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
.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;
}

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

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

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

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

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

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

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

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

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

703
704
							  /*tag*/

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

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

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

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

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

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

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

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

763
764
765
766
767
768

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

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

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

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

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

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

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

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

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

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

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

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