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

#top-container {
Marc Duez's avatar
Marc Duez committed
73
  height: @top_container_height;
74
  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;
Marc Duez's avatar
Marc Duez committed
91
  top : @top_container_height;
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


/*Metric*/

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


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

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

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

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

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

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

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

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

.data_value{
}

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

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

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

.selected{
  color : @select;
}

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

.infoBox{
Marc Duez's avatar
Marc Duez committed
545
  width: 15px;
546
  float: right;
Marc Duez's avatar
Marc Duez committed
547
  height: 15px;
548
  display: inline-block;
549
  user-select: none;
550
  text-align: center;
551
552
  border: solid;
  border-width: 1px;
553
  border-color: @background;
554
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
555
  margin: 0px 1px;
556
}
Marc Duez's avatar
Marc Duez committed
557
.infoBox:hover{
558
559
560
561
  background: @highlight;
}
.infoBox-open{
  background: @border;
562
563
}

564
.systemBox, .systemBoxMenu {
565
566
    display: inline-block;
    width: @width_systemBox;
567
    height: 13px;
568
569
570
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
571
572
    margin: 4px;
    margin-top: 2px;
573
574
    color: @select;
    font-family: monospace;
575
    font-size: 80%;
576
    background: @border;
577
578
}

579
580
581
582
583
584
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
585
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
586
    height: 20px;
Marc Duez's avatar
Marc Duez committed
587
    cursor : pointer;
588
589
}	      

Marc Duez's avatar
Marc Duez committed
590
591
592
.hiddenCheckBox {
    display : none;
}
593

594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
.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;
}

621
622
623
624
625
.list_sort{
    margin-right : 30px;
    float: right;
}

626
627
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
628
  width : 445px;
629
630
631
632
633
634
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
635
636
637
.list_focus{
    background : @border;
}
638
639
640
641
642

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

643
644
645
646
.sequence-line:hover{
    font-weight: bold;
}

647
.seq-fixed {
648
649
  position: relative;
  display: inline-block;
650
  width: (@width_left_container - @width_scrollbar);
651
652
  margin: -2px;
  padding: 2px;
653
654
655
656
657
658
659
660
661
  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
662
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
663
  position: relative;
664
  bottom: 3px;
665
  font-size:1em;
666
667
}

668
669
670
.seq-marge {
  word-spacing: normal;
}
671
672
673
674

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
675
.D {
676
677
678
679
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
680
}
Mathieu Giraud's avatar
Mathieu Giraud committed
681
682

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
683
684
685
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
686
687
688
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
689
    margin: -1px;
690
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
691
692
693
694
695
696
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
697
698
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
699
}
Mathieu Giraud's avatar
Mathieu Giraud committed
700
701
702
703
704
705
706
707
708
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
709
710
711
712
713
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
714
span .substitution{
Marc Duez's avatar
Marc Duez committed
715
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
716
}
Marc Duez's avatar
Marc Duez committed
717

718
719
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
720
.tagSelector{
721
722
723
724
725
726
727
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
728
  background: @background;
729
730
}

Marc Duez's avatar
Marc Duez committed
731
.dataMenu{
732
733
734
735
736
737
738
739
740
741
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

742
743
744
745
746
747
748
749
750
751
752
753
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
754
755
756
  margin-right: 5px;
  height: 14px;
  width: 14px;
757
758
759
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
760
761
  margin-bottom: -3px;
  margin-top: 3px;
762
763
}

764
765
766
767
#normalized_size {
    width: 80px;
}

768
769
770
771
772
773
774
775
							  /*menu*/

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

778
779
780
781
782
783

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

784
785
786
787
788
789
790
791
792
793
794
795
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
797
798
.submenu{
    width: 200px;
799
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
800
801
802
803
804
805
806
807
808
809
}

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

Marc Duez's avatar
Marc Duez committed
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
.div-menu-selector{
    float: right;
    margin: -2px 0px 0px 5px;
}

.menu-selector {
    background: @background;
    color: #657B83;
    height: 18px;
    width: 60px;
    -webkit-appearance: none;
    border: solid;
    border-width: 1px;
    border-radius: 2px;
}

826
#file_menu, #axis_choice{
827
828
829
830
831
832
833
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
834
  font-size: 13px; 
835
  padding: 10px;
836
  background:@background;
837
838
839
840
841
842
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
843
  font-size: 13px;
844
845
846
847
848
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
849
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
850
  background : @border;
851
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
852
  cursor: pointer;
853
854
855
856
857
858
}


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


859
.popup_container{
860
  z-index:20;
861
862
863
864
865
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
866
  font-size: 13px; 
867
868
869
870
871
872
873
874
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

875
.popup_container a {
876
877
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
878
  color: @default ;
879
880
}

881
.popup_container a:hover{
882
883
884
  color : @select;
}

885
.data-container, .info-container{
886
887
888
889
890
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
891
  font-size: 13px; 
892
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
893
  background: @background;
894
895
896
897
898
899
900
901
902
  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);
}

903
904
.data-msg, .info-msg{
  overflow-x: hidden;
905
906
907
908
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
909
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
 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;
}

934
.button, .button_right{
935
  cursor:pointer;
936
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
937
  padding: 0px 3px;
938
939
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
940
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
941
  color: @default;
Marc Duez's avatar
Marc Duez committed
942
943
}

944
945
946
947
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
948
949
950
951
952
953
954
955
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
956
    width: auto;
Marc Duez's avatar
Marc Duez committed
957
    text-align: center;
Marc Duez's avatar
Marc Duez committed
958
959
    padding-left: 10px;
    padding-right: 10px;
960
961
962
963
}

.smallbutton {
    cursor:pointer;
964
    font-size: 13px;
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
    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
986
987
988
989
990
991
992
993
994
995
996
997
.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
998
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
999
1000
1001
1002
1003
    position: relative;
    float: left;
    width: @width_left_container;
}

1004
.menu-highlight {
Mathieu Giraud's avatar
Mathieu Giraud committed
1005
    display: none;
1006
1007
1008
1009
1010
    position: relative;
    float: left;
    width: @width_highlight;
}

Marc Duez's avatar
Marc Duez committed
1011
1012
1013
.focus {
    position: relative;
    text-align: center;
1014
    float: left;
1015
1016
1017
    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));
1018
1019
    overflow: hidden;
    height: 1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
1020
1021
1022
1023
1024
1025
1026
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
1027
1028
}

1029
.segmenter {
1030
    overflow-x: scroll !important; 
1031
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1032
    height : 100px;
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
}

.selector{
  display: none;
  position: fixed;
  margin-right: -5px;
  padding: 3px;
  border: solid;
  background: inherit;
  text-center: left;
  min-width: 150px;
  margin-left: -6px;
  border-top: none;
Marc Duez's avatar
Marc Duez committed
1046
1047
1048
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1049
  z-index:5;
1050
  overflow: hidden;
1051
1052
1053
1054
}

#bot-container {
  position: fixed;
1055
  bottom: 0px;
1056
1057
  left: 0px;
  width: 100%;
1058
1059
1060
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1061
1062
1063
1064
1065
1066
1067
}

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

Marc Duez's avatar
Marc Duez committed
1068
#list_menu{
1069
1070
1071
1072
1073
1074
1075
1076
  -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
1077
  border-bottom-width: 2px;
1078
1079
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1080
1081
1082
1083
1084
#filter_input
{
  width: 200px;
}

1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
.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
1104
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1105
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1106
1107
  height: 8px;
  margin-top: 4px;
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
  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
1131
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
{
  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
1148
#info_timepoint td{
1149
1150
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1151
1152
1153
1154
1155
1156
1157
1158
1159
  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{
1160
1161
1162
1163
1164
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1165
#info_window table .header, #info_timepoint table .header{
1166
  border-width : 2px;
1167
  background-color: @border;
1168
1169
}

1170
1171
1172
1173
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1174

1175
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1176
1177
1178
1179
1180
1181
1182
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1183
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1194
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1205
1206
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
    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;
}

1244
1245
1246
1247
1248
1249
1250
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1251
1252
1253
1254
1255
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1256
1257

.axis_select select {
1258
    background: @background;
1259
    color: @default;
Marc Duez's avatar
Marc Duez committed
1260
1261
    height: 20px;
    width: 120px;
1262
    -webkit-appearance: none;
1263
    border: solid;
Marc Duez's avatar
Marc Duez committed
1264
1265
1266
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1267
1268
1269
1270
1271
}

.axis_select_graph {
    top: 0px;
    display: none;
1272
1273
1274
1275
1276
}

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

#visu-separator {
1279
    height: @margin;
1280
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1281
    cursor: -webkit-grab;
1282
    background: @border;
Marc Duez's avatar
Marc Duez committed
1283
}
1284

1285
1286
1287
1288
1289
1290
1291
1292
1293
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1294
1295
1296
1297
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1298
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1299
    line-height: calc(~"100% - 1px");
1300
    background : @border;
Marc Duez's avatar
Marc Duez committed
1301
    cursor: pointer;
1302
1303
}

1304
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1305
    background: @highlight;
1306
}
Marc Duez's avatar
Marc Duez committed
1307
1308
1309
1310
1311
1312

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

1314
.db_div{
Marc Duez's avatar
Marc Duez committed
1315
  z-index:5;
1316
1317
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1318
  top: 20px;
1319
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1320
1321
  width:80%;
  height: calc(~"100% - 50px");
1322
1323
1324
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1325
  left: 10%;
1326
}
1327

1328
.db_msg{
Marc Duez's avatar
Marc Duez committed
1329
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1330
1331
1332
1333
    height : calc(~"100% - 30px")
}

#db_content{
1334
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1335
}
Marc Duez's avatar
Marc Duez committed
1336

1337
1338
1339
.db_table{
    width: 100%;
    border-collapse: collapse;
1340
1341
1342
1343
1344
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1345
1346
    text-overflow: ellipsis;
    white-space: nowrap;
1347
1348
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1349
1350
1351
.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
1352
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1353

1354
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1355
    width: 100px;
1356
1357
1358
}

.db_table .column2{
1359
    width: 150px;
1360
1361
1362
1363
1364
1365
1366
1367
1368
}

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

1369
.db_table .column_sep {
1370
1371
1372
1373
1374
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1375
1376
}

Marc Duez's avatar
Marc Duez committed
1377
.db_block {
1378
1379
1380
1381
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1382
1383
1384
1385
1386
1387
1388
1389
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1390
.db_block_left {
1391
1392
1393
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1394
.db_block_right {
1395
1396
1397
    float : right;
}

1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
.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
1408
1409
1410
1411
}

.pointer
{
1412
1413
1414
1415
    cursor: pointer;
} 

.db_table tr:hover{
1416
    background: @border;
1417
1418
1419
1420
1421
1422
}

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

Marc Duez's avatar
Marc Duez committed
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1436
    overflow-y: scroll;
1437
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1438
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1439
1440
1441
    position: relative;
}

1442
1443
1444
1445
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
Marc Duez's avatar
Marc Duez committed
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
}

.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
1460
1461
}

Marc Duez's avatar
Marc Duez committed
1462
1463
1464
1465
1466
1467
.summary_filename {
    width: 200px;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    overflow-wrap: break-word;
1468
    margin-right:5px;
Marc Duez's avatar
Marc Duez committed
1469
1470
1471
1472
1473
1474
1475
1476
}

.loading_gauge {
    height: 13px;
    width: 98px;
    display: inline-block;
    border: solid;
    border-width: 1px;
1477
    margin: 0px 5px;