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

373
374
375
376
377
378
379
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
380
381
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
382
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
383
384
}

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

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
395
  color : @select ;
Marc Duez's avatar
Marc Duez committed
396
397
398
  cursor: pointer;
}

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

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

.sp_hidden_legend{
  display : none;
}

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

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

.sp_subline_hidden{
  stroke-width : 0px;
}

428
							  /*style list/data element*/
429
430
431
432


/*Metric*/

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


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

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

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

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

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

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

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

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

.data_value{
}

495
496
497
498
.data {
    padding-right: 30px;
}

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

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

.selected{
  color : @select;
}

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

.infoBox{
Marc Duez's avatar
Marc Duez committed
552
  width: 15px;
553
  float: right;
Marc Duez's avatar
Marc Duez committed
554
  height: 15px;
555
  display: inline-block;
556
  user-select: none;
557
  text-align: center;
558
559
  border: solid;
  border-width: 1px;
560
  border-color: @background;
561
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
562
  margin: 0px 1px;
563
}
Marc Duez's avatar
Marc Duez committed
564
.infoBox:hover{
565
566
567
568
  background: @highlight;
}
.infoBox-open{
  background: @border;
569
570
}

571
.systemBox, .systemBoxMenu {
572
573
    display: inline-block;
    width: @width_systemBox;
574
    height: 13px;
575
576
577
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
578
579
    margin: 4px;
    margin-top: 2px;
580
581
    color: @select;
    font-family: monospace;
582
    font-size: 80%;
583
    background: @border;
584
585
}

586
587
588
589
590
591
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
592
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
593
    height: 20px;
Marc Duez's avatar
Marc Duez committed
594
    cursor : pointer;
595
596
}	      

Marc Duez's avatar
Marc Duez committed
597
598
599
.hiddenCheckBox {
    display : none;
}
600

601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
.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;
Marc Duez's avatar
Marc Duez committed
618
  margin-left: 5px;
619
620
621
622
623
624
625
626
627
}



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

628
629
630
631
632
.list_sort{
    margin-right : 30px;
    float: right;
}

633
634
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
635
  width : 445px;
636
637
638
639
640
641
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
642
.list_focus{
Marc Duez's avatar
Marc Duez committed
643
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
644
}
645
646

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
647
    white-space: nowrap;
648
}
Marc Duez's avatar
Marc Duez committed
649
.sequence-line:hover { 
650
651
652
    font-weight: bold;
}

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

675
676
677
.seq-marge {
  word-spacing: normal;
}
678
679
680
681

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
682
.D {
683
684
685
686
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
687
}
Mathieu Giraud's avatar
Mathieu Giraud committed
688
689

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

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
716
717
718
719
720
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
721
span .substitution{
Marc Duez's avatar
Marc Duez committed
722
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
723
}
Marc Duez's avatar
Marc Duez committed
724

725
726
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
727
.tagSelector{
728
729
730
731
732
733
734
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
735
  background: @background;
736
737
}

Marc Duez's avatar
Marc Duez committed
738
.dataMenu{
739
740
741
742
743
744
745
746
747
748
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

749
750
751
752
753
754
755
756
757
758
759
760
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
761
762
763
  margin-right: 5px;
  height: 14px;
  width: 14px;
764
765
766
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
767
768
  margin-bottom: -3px;
  margin-top: 3px;
769
770
}

771
772
773
774
#normalized_size {
    width: 80px;
}

775
776
777
778
779
780
781
782
							  /*menu*/

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

785
786
787
788
789
790

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

791
792
793
794
795
796
797
798
799
800
801
802
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
804
805
.submenu{
    width: 200px;
806
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
807
808
809
810
811
812
813
814
815
816
}

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

Marc Duez's avatar
Marc Duez committed
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
.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;
}

833
#file_menu, #axis_choice{
834
835
836
837
838
839
840
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
841
  font-size: 13px; 
842
  padding: 10px;
843
  background:@background;
844
845
846
847
848
849
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
850
  font-size: 13px;
851
852
853
854
855
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
856
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
857
  background : @border;
858
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
859
  cursor: pointer;
860
861
862
863
864
865
}


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


866
.popup_container{
867
  z-index:20;
868
869
870
871
872
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
873
  font-size: 13px; 
874
875
876
877
878
879
880
881
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

882
.popup_container a {
883
884
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
885
  color: @default ;
886
887
}

888
.popup_container a:hover{
889
890
891
  color : @select;
}

892
.data-container, .info-container{
893
894
895
896
897
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
898
  font-size: 13px; 
899
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
900
  background: @background;
901
902
903
904
  display:none;
  max-width: -moz-calc(~"100%" - @width_left_container + 60px);
  max-width: -webkit-calc(~"100%" - @width_left_container + 60px);
  max-width: calc(~"100%" - @width_left_container + 60px);
Marc Duez's avatar
Marc Duez committed
905
906
907
  height: -moz-calc(~"100%" - 215px);
  height: -webkit-calc(~"100%" - 215px);
  height: calc(~"100%" - 215px);
908
909
}

910
911
.data-msg, .info-msg{
  overflow-x: hidden;
912
913
914
915
  height : 100%;
  width : 100%;
}

Marc Duez's avatar
Marc Duez committed
916
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
 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;
}

941
.button, .button_right{
942
  cursor:pointer;
943
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
944
  padding: 0px 3px;
945
946
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
947
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
948
  color: @default;
Marc Duez's avatar
Marc Duez committed
949
950
}

951
952
953
954
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
955
956
957
958
959
960
961
962
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
963
    width: auto;
Marc Duez's avatar
Marc Duez committed
964
    text-align: center;
Marc Duez's avatar
Marc Duez committed
965
966
    padding-left: 10px;
    padding-right: 10px;
967
968
969
970
}

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

1011
1012
1013
1014
1015
1016
.menu-highlight {
    position: relative;
    float: left;
    width: @width_highlight;
}

1017
1018
1019
1020
.devel-mode {
    display: none;
}

Marc Duez's avatar
Marc Duez committed
1021
1022
1023
.focus {
    position: relative;
    text-align: center;
1024
    float: left;
1025
1026
1027
    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));
1028
    overflow: hidden;
Mathieu Giraud's avatar
Mathieu Giraud committed
1029
    height: 1.1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
1030
1031
1032
1033
1034
1035
1036
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
1037
1038
}

1039
.segmenter {
1040
    overflow-x: scroll !important; 
1041
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1042
    height : 100px;
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
}

.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
1056
1057
1058
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1059
  z-index:5;
1060
  overflow: hidden;
1061
1062
1063
1064
}

#bot-container {
  position: fixed;
1065
  bottom: 0px;
1066
1067
  left: 0px;
  width: 100%;
1068
1069
1070
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1071
1072
1073
1074
1075
1076
1077
}

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

Marc Duez's avatar
Marc Duez committed
1078
#list_menu{
1079
1080
1081
1082
1083
1084
1085
1086
  -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
1087
  border-bottom-width: 2px;
1088
1089
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1090
1091
1092
1093
1094
#filter_input
{
  width: 200px;
}

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

Marc Duez's avatar
Marc Duez committed
1175
#info_window table .header, #info_timepoint table .header{
1176
  border-width : 2px;
1177
  background-color: @border;
1178
1179
}

1180
1181
1182
1183
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1184

1185
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1186
1187
1188
1189
1190
1191
1192
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1193
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1204
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1215
1216
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
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
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
    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;
}

1254
1255
1256
1257
1258
1259
1260
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1261
1262
1263
1264
1265
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1266
1267

.axis_select select {
1268
    background: @background;
1269
    color: @default;
Marc Duez's avatar
Marc Duez committed
1270
1271
    height: 20px;
    width: 120px;
1272
    -webkit-appearance: none;
1273
    border: solid;
Marc Duez's avatar
Marc Duez committed
1274
1275
1276
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1277
1278
1279
1280
1281
}

.axis_select_graph {
    top: 0px;
    display: none;
1282
1283
1284
1285
1286
}

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

#visu-separator {
1289
    height: @margin;
1290
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1291
    cursor: -webkit-grab;
1292
    background: @border;
Marc Duez's avatar
Marc Duez committed
1293
}
1294

1295
1296
1297
1298
1299
1300
1301
1302
1303
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1304
1305
1306
1307
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1308
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1309
    line-height: calc(~"100% - 1px");
1310
    background : @border;
Marc Duez's avatar
Marc Duez committed
1311
    cursor: pointer;
1312
1313
}

1314
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1315
    background: @highlight;
1316
}
Marc Duez's avatar
Marc Duez committed
1317
1318
1319
1320
1321
1322

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

1324
.db_div{
Marc Duez's avatar
Marc Duez committed
1325
  z-index:5;
1326
1327
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1328
  top: 20px;
1329
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1330
1331
  width:80%;
  height: calc(~"100% - 50px");
1332
1333
1334
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1335
  left: 10%;
1336
}
1337

1338
.db_msg{
Marc Duez's avatar
Marc Duez committed
1339
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1340
1341
1342
1343
    height : calc(~"100% - 30px")
}

#db_content{
1344
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1345
}
Marc Duez's avatar
Marc Duez committed
1346

1347
1348
1349
.db_table{
    width: 100%;
    border-collapse: collapse;
1350
1351
1352
1353
1354
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1355
1356
    text-overflow: ellipsis;
    white-space: nowrap;
1357
1358
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1359
1360
1361
.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
1362
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1363

1364
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1365
    width: 100px;
1366
1367
1368
}

.db_table .column2{
1369
    width: 150px;
1370
1371
1372
1373
1374
1375
1376
1377
1378
}

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

1379
.db_table .column_sep {
1380
1381
1382
1383
1384
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1385
1386
}

Marc Duez's avatar
Marc Duez committed
1387
.db_block {
1388
1389
1390
1391
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1392
1393
1394
1395
1396
1397
1398
1399
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1400
.db_block_left {
1401
1402
1403
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1404
.db_block_right {
1405
1406
1407
    float : right;
}

1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
.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
1418
1419
1420
1421
}

.pointer
{
1422
1423
1424
1425
    cursor: pointer;
} 

.db_table tr:hover{
1426
    background: @border;
1427
1428
1429
1430
1431
1432
}

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

Marc Duez's avatar
Marc Duez committed
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1446
    overflow-y: scroll;
1447
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1448
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1449
1450
1451
    position: relative;
}