vidjil.less 25.1 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11


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


html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
Marc Duez's avatar
Marc Duez committed
12
  min-height: 250px
13
14
15
}

body {
Marc Duez's avatar
Marc Duez committed
16
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
17
  font-size: 13px;
18
19
20
  height : 100%;
  margin:0px;
  color : @default;
21
  background : @border;
22
23
}

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/* texts that are not sequences nor identifiers */

#info, #popup-msg, .menu, .menu a
{
  font-family: ubuntulight, Arial, Helvetica, Sans-serif;
}

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



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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%;
57
58
  margin : auto;
  overflow : hidden;
59
  background : @background;
60
61
62
63
64
}

#top-container {
  height: 28px;
  width: 100%;
65
  background: @background;
Marc Duez's avatar
Marc Duez committed
66
67
  position : fixed;
  z-index:1;
68
69
70
}

#mid-container {
Marc Duez's avatar
Marc Duez committed
71
  position : fixed;
72
  top : 28px;
Marc Duez's avatar
Marc Duez committed
73
  bottom : 125px ;
74
75
76
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
77
78
  overflow: hidden;
  background: @background;
79
80
81
82
83
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
84
  margin: @margin;
85
86
}

87
88
89
90
91
92
93
94
#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;
95
96
97
98
99
100
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
101
  overflow-y : none;
102
103
104
105
106
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
107
  display : table;
108
109
110
111
}

#visu, #visu2 {
  height : 50%;
112
  width : 100%;
113
114
115
  overflow:hidden;
}

116
117
118
119
#visu2 {
max-height: calc(~"100%" - @margin)
}

120
121
122
123
124
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

125
126
                        /* left-container - info */

127
128
129
130
131
#info-row{
    height : 200px;
    display : table-row;
}

132
#info{
133
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
134
  font-size: 13px;
135
  padding:3px;
136
  background : @background;
137
  display : table-cell;
138
139
}

140
141
142
143
144
145
146
147
148
149
150
151
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

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

152
153
.info_row_content {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
154
    width : 345px;
155
156
}

157
158
159
160
161
162
163
164
#info_point {
    margin-top: 15px;
}

#info_data_file
{
  font-size: 200%;
}
165
166
167
168
169
170
171
172

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
173
  fill : @background
174
175
176
177
178
179
180
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
}

Marc Duez's avatar
Marc Duez committed
181
182
183
184
185
186
187
188
189
190
191
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
}

Marc Duez's avatar
Marc Duez committed
209
.axis_m{
Marc Duez's avatar
Marc Duez committed
210
  stroke : @default ;
211
212
213
214
215
  opacity : 0.5 ;
  stroke-width : 20px;
}

.axis_h{
Marc Duez's avatar
Marc Duez committed
216
  stroke : @default ;
217
218
219
220
  stroke-width : 2px ;
}

.axis_v{
Marc Duez's avatar
Marc Duez committed
221
 stroke : @default ;
222
223
224
225
 stroke-width : 2px;
 stroke-dasharray: 6,6;
}

Marc Duez's avatar
Marc Duez committed
226
227
228
229
.axis_v_hidden{
 display: none;
}

230
231
232
233
234
235
236
237
238
239
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
240
241
    fill: @border;
    opacity: 0.6;
242
243
}

244
.graph_time{
245
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
246
  fill : @default ;
247
248
249
  text-anchor:middle;
}

250
251
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
252
  fill : @default ;
253
254
255
  text-anchor:end;
}

256
257
258
259
260
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

261
262
263
264
265
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

266
267
.graph_menu{
  position: absolute;
268
269
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
270
271
  min-width: 22px;
  min-height: 18px;
272
  text-align: center;
273
274
  border-bottom: solid;
  border-left: solid;
275
276
277
  border-color: @border;
  background : @background;
}
278
279
280
281
282
283

.graph_list{
  display: none;
}

.graph_listElem:hover{
284
  background : @border;
285
  width: 100%;
Marc Duez's avatar
Marc Duez committed
286
  cursor: move;
287
  cursor: webkit-grab;
288
289
}

290

291
292
293
294
295
296
297
298
299
300
301
302
							  /*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;
303
  fill : @default;
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
}

.circle_focus{
  cursor:pointer;
}

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

326
327
328
329
330
331
332
333
334
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

335
.sp_legend{
Marc Duez's avatar
Marc Duez committed
336
  fill : @default ;
337
338
339
340
  font-weight : bold;
  text-anchor : middle;
}

Marc Duez's avatar
Marc Duez committed
341
342
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
343
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
344
345
}

Marc Duez's avatar
Marc Duez committed
346
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
347
  color : @default ;
Marc Duez's avatar
Marc Duez committed
348
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
349
350
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
351
352
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
353
354
355
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
356
  color : @select ;
Marc Duez's avatar
Marc Duez committed
357
358
359
  cursor: pointer;
}

360
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
361
  fill : @default ;
362
363
364
365
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
366
367
368
369
370
371
372
373
374
375
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

376
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
377
  stroke : @default ;
378
379
380
381
382
383
384
385
386
387
388
389
  stroke-width : 0.7px;
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

390
							  /*style list/data element*/
391
392
393
394
395


/*Metric*/

@width_left_container : 475px;
Mathieu Giraud's avatar
Mathieu Giraud committed
396
@width_stats: 200px;
397
398
399
400
401
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
402
@width_systemBox : 13px;
403
@width_listElem : (@width_left_container - @width_scrollbar);
404
@margin : 6px;
405
@margin_nameBox : 10px;
406
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
407
408


Marc Duez's avatar
Marc Duez committed
409
.list:hover, .tagElem:hover, .data:hover{
410
  background :@border;
411
412
}

Marc Duez's avatar
Marc Duez committed
413
414
415
416
417
418
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

419
420
421
422
423
424
425
426
427
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
428
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
429
430
431
432
433
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
434
  height : calc(~"100% - 30px");  /*100% - list_menu height */
435
436
437
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
438
#list_data{
439
440
441
442
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
443
444
445
446
447
448
449
450
451
452
453
454
}

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

.data_value{
}

455
456
457
458
.data {
    padding-right: 30px;
}

459
.list{
460
  width : 	445px;
461
462
463
464
465
466
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
467
  font-size: 13px;
468
469
470
471
472
473
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
474
  padding: 1px 4px 4px 1px;
475
476
477
478
479
480
481
  height :14px;
}

.selected{
  color : @select;
}

482
.nameBox {
483
  width: 300px;
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
  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;
508
  overflow: hidden;
509
510
511
512
513
514
515
516
517
}

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

519
520
}

521
.systemBox, .systemBoxMenu {
522
523
    display: inline-block;
    width: @width_systemBox;
524
    height: 13px;
525
526
527
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
528
529
    margin: 4px;
    margin-top: 2px;
530
531
    color: @select;
    font-family: monospace;
532
    font-size: 80%;
533
    background: @border;
534
535
}

536
537
538
539
540
541
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
542
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
543
    height: 20px;
Marc Duez's avatar
Marc Duez committed
544
    cursor : pointer;
545
546
}	      

Marc Duez's avatar
Marc Duez committed
547
548
549
.hiddenCheckBox {
    display : none;
}
550

551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
.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;
}

							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
580
  width : 445px;
581
582
583
584
585
586
587
588
589
590
591
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

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

592
593
594
595
.sequence-line:hover{
    font-weight: bold;
}

596
.seq-fixed {
597
598
  position: relative;
  display: inline-block;
599
  width: (@width_left_container - @width_scrollbar);
600
601
  margin: -2px;
  padding: 2px;
602
603
604
605
606
607
608
609
610
  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
611
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
612
  position: relative;
613
  bottom: 3px;
614
  word-spacing: -1em;
615
  font-size:1em;
616
617
}

618
619
620
.seq-marge {
  word-spacing: normal;
}
621
622
623
624

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
625
.D {
626
627
628
629
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
630
}
Marc Duez's avatar
Marc Duez committed
631
632
633
.window1{
    display: inline-block;
    width: 0px;
634
    word-spacing: normal;
Marc Duez's avatar
Marc Duez committed
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
}
.window2{
    border: solid;
    display: inline-flex;
    height: 1em;
    position: relative;
    margin: -1px;
    border-width: 1px;
    border-color: red;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
span .substitution{
Marc Duez's avatar
Marc Duez committed
652
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
653
}
Marc Duez's avatar
Marc Duez committed
654

655
656
657
658
659
660
661
662
663
664
665
666
							  /*tag*/

#tagSelector{
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
}

667
668
669
670
671
672
673
674
675
676
677
#dataMenu{
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
  margin-right:3px;
  height: 16px;
  width: 16px;
  display: inline-block;
  cursor:pointer;
  user-select :none;
  margin-bottom: -4px;
  margin-top: 2px;
}

700
701
702
703
#normalized_size {
    width: 80px;
}

704
705
706
707
708
709
710
711
							  /*menu*/

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

714
715
716
717
718
719

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

720
721
722
723
724
725
726
727
728
729
730
731
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
733
734
.submenu{
    width: 200px;
735
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
736
737
738
739
740
741
742
743
744
745
}

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

746
#file_menu, #axis_choice{
747
748
749
750
751
752
753
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
754
  font-size: 13px; 
755
  padding: 10px;
756
  background:@background;
757
758
759
760
761
762
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
763
  font-size: 13px;
764
765
766
767
768
  margin :2px;
  display:block;
  text-align:left;
}

Marc Duez's avatar
Marc Duez committed
769
.systemBoxNameMenu:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
770
  background : @border;
771
772
773
774
775
776
777
778
  color : @select;
}


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


#popup-container{
779
  z-index:20;
780
781
782
783
784
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
785
  font-size: 13px; 
786
787
788
789
790
791
792
793
794
795
796
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

#popup-container a {
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
797
  color: @default ;
798
799
800
801
802
803
804
805
806
807
808
809
}

#popup-container a:hover{
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
810
  font-size: 13px; 
811
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
812
  background: @background;
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
  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
828
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
 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;
}

853
.button, .button_right{
854
  cursor:pointer;
855
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
856
  padding: 0px 3px;
857
858
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
859
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
860
  color: @default;
Marc Duez's avatar
Marc Duez committed
861
862
}

863
864
865
866
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
867
868
869
870
871
872
873
874
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
875
    width: auto;
Marc Duez's avatar
Marc Duez committed
876
    text-align: center;
Marc Duez's avatar
Marc Duez committed
877
878
    padding-left: 10px;
    padding-right: 10px;
879
880
881
882
}

.smallbutton {
    cursor:pointer;
883
    font-size: 13px;
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
    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
905
906
907
908
909
910
911
912
913
914
915
916
.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
917
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
918
919
920
921
922
923
924
925
    position: relative;
    float: left;
    width: @width_left_container;
}

.focus {
    position: relative;
    text-align: center;
926
    float: left;
Mathieu Giraud's avatar
Mathieu Giraud committed
927
928
929
930
931
932
933
934
935
936
    width: -moz-calc(~"100%" - (@width_left_container + @width_stats));
    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats));
    width: calc(~"100%" - (@width_left_container + @width_stats));
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
937
938
939
}

#segmenter {
940
    overflow-x: scroll !important; 
941
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
942
    height : 100px;
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
}

.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;
958
  overflow: hidden;
959
960
961
962
}

#bot-container {
  position: fixed;
963
  bottom: 0px;
964
965
  left: 0px;
  width: 100%;
966
967
968
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
969
970
971
972
973
974
975
}

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

Marc Duez's avatar
Marc Duez committed
976
#list_menu{
977
978
979
980
981
982
983
984
  -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
985
  border-bottom-width: 2px;
986
987
}

Mathieu Giraud's avatar
Mathieu Giraud committed
988
989
990
991
992
#filter_input
{
  width: 200px;
}

993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
.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 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 ); /* IE6-9 */
  width :180px;
  height:16px;
  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;
}

1038
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, #popup-container, #file_menu, #tagSelector, .closeButton, #axis_choice
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
{
  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
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
#info_timepoint td{
  min-width : 300px;
  max-width : 450px;
  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{
1067
1068
1069
1070
1071
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1072
#info_window table .header, #info_timepoint table .header{
1073
  border-width : 2px;
1074
  background-color: @border;
1075
1076
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1077
1078
1079
span.warning {  color: orange;   }
span.alert {  color: red;   }

1080
1081
1082
1083
1084
1085
1086
1087
1088
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}


.axis_select select {
1089
    background: @background;
1090
    color: @default;
1091
    height: 16px;
1092
    width: 90px;
1093
    -webkit-appearance: none;
1094
1095
    border: solid;
    border-width: 1px
1096
1097
1098
1099
1100
1101
}

.axis_select {
    position: relative;
    float: left;
    height: 0px;
1102
    top : 2px;
1103
1104
1105
}

.axis_select_x {
1106
    display: block;
1107
}
1108

1109
.axis_select_y {
1110
    top: 18px;
1111
1112
1113
1114
1115
1116
    display: block;
}

.axis_select_graph {
    top: 0px;
    display: none;
1117
1118
1119
1120
1121
}

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

#visu-separator {
1124
    height: @margin;
1125
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1126
    cursor: -webkit-grab;
1127
    background: @border;
Marc Duez's avatar
Marc Duez committed
1128
}
1129

1130
1131
1132
1133
1134
1135
1136
1137
1138
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1139
1140
1141
1142
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1143
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1144
    line-height: calc(~"100% - 1px");
1145
    background : @border;
Marc Duez's avatar
Marc Duez committed
1146
    cursor: pointer;
1147
1148
}

1149
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1150
    background: @highlight;
1151
}
Marc Duez's avatar
Marc Duez committed
1152
1153
1154
1155
1156
1157

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

#db_div{
Marc Duez's avatar
Marc Duez committed
1160
  z-index:5;
1161
1162
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1163
  top: 20px;
1164
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1165
1166
  width:80%;
  height: calc(~"100% - 50px");
1167
1168
1169
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1170
  left: 10%;
1171
}
1172

Marc Duez's avatar
Marc Duez committed
1173
1174
#db_msg{
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1175
1176
1177
1178
    height : calc(~"100% - 30px")
}

#db_content{
1179
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1180
}
Marc Duez's avatar
Marc Duez committed
1181

1182
1183
1184
.db_table{
    width: 100%;
    border-collapse: collapse;
1185
1186
1187
1188
1189
    table-layout: fixed;
}

.db_table td{
    overflow: hidden;
1190
1191
    text-overflow: ellipsis;
    white-space: nowrap;
1192
1193
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1194
1195
1196
1197
.db_table .column_200{    width: 200px;   }
.db_table .column_150{    width: 150px;   }
.db_table .column_100{    width: 100px;   }

1198
.db_table .column1{
Mathieu Giraud's avatar
Mathieu Giraud committed
1199
    width: 100px;
1200
1201
1202
}

.db_table .column2{
1203
    width: 150px;
1204
1205
1206
1207
1208
1209
1210
1211
1212
}

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

1213
.db_table .column_sep {
1214
1215
1216
1217
1218
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1219
1220
}

Marc Duez's avatar
Marc Duez committed
1221
.db_block {
1222
1223
1224
1225
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1226
1227
1228
1229
1230
1231
1232
1233
.db_footer{
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right:0px;
}

Marc Duez's avatar
Marc Duez committed
1234
.db_block_left {
1235
1236
1237
    float : left;
}

Marc Duez's avatar
Marc Duez committed
1238
.db_block_right {
1239
1240
1241
    float : right;
}

1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
.db_table th{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
} 

.db_table tr{
    border-bottom: solid;
    border-color: @border;
    border-width: 1px;
    cursor: pointer;
} 

.db_table tr:hover{
1256
    background: @border;
1257
1258
1259
1260
1261
1262
}

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

Marc Duez's avatar
Marc Duez committed
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1276
    overflow-y: scroll;
1277
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1278
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1279
1280
1281
    position: relative;
}

1282
1283
1284
1285
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
Marc Duez's avatar
Marc Duez committed
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
}

.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
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
}

.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
1314
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
}

@-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
1331
1332
}

Marc Duez's avatar
Marc Duez committed
1333
#flash_container {
Marc Duez's avatar
Marc Duez committed
1334
1335
1336
1337
    position : absolute;
    display : block;
    bottom : 0px;
    right : 0px;
Marc Duez's avatar
Marc Duez committed
1338
    z-index: 100;
Marc Duez's avatar
Marc Duez committed
1339
1340
}

Marc Duez's avatar
Marc Duez committed
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
#log_container {
    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
1361
1362
1363
    width: 350px;
    min-height: 20px;
    border: solid;
Marc Duez's avatar
Marc Duez committed
1364
    border-width: 2px;
Marc Duez's avatar
Marc Duez committed
1365
1366
1367
1368
1369
1370
    display: block;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    background: @background;
    border-color: @border;
1371
1372
1373
1374
1375
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
Marc Duez's avatar
Marc Duez committed
1376
1377
}

Marc Duez's avatar
Marc Duez committed
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
.log_0, .log_1, .log_2 {
    width: auto;
    min-height: 20px;
    display: block;
    margin: 5px;
    background: @background;
    border: solid;
    border-width: 2px;
    border-radius: 2px;
    border-color: @background;
}

.flash_1, .log_1 {
    font-weight: bold;
1392
    background-color: #DFF0D8;
Marc Duez's avatar
Marc Duez committed
1393
1394
1395
1396
1397
}

.flash_2, .log_2 {
    font-weight: bold;
    border-color: darkred;
1398
    background-color: #F2DEDE;
Marc Duez's avatar
Marc Duez committed
1399
1400
}

Marc Duez's avatar
Marc Duez committed
1401
1402
select>option:hover {
    background-color: @border;
1403
}
1404
1405
1406

.inactive {
    opacity: 0.5;
1407
1408
}

1409
1410
.suggest_box {
    height: 0px;
1411
    display: block;
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
    position: relative;
}

.suggest_list {
    border: solid;
    border-width: 1px;
    min-height: 20px;
    background: @background;
    border-color: @border;
    max-height: 100px;
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
    display: none;
    width : 250px;
}

.suggest_arrow {
    position : absolute;
    width : 12px;
    height : 16px;
    top : -22px;
    right : 0px;
    cursor : pointer;
    background: url("icon/arrow-down.png") 50% 50% no-repeat;
}

.suggestion {
    cursor : pointer;
}

.suggestion:hover {
    background : @highlight;
}

input:focus, textarea:focus {
    border-color: @border;
    -webkit-box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    -moz-box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    box-shadow: inset 0 1px 1px @background, 0 0 8px @border;
    outline: 0;
    outline: thin dotted \9;
1451
}
1452
1453
1454
1455
1456
1457
1458
1459
1460

pre,
code,
kbd,
samp,
tt{
  font-family:monospace,monospace;
  font-size:1em;
}
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470

table.log
{
  width: 90%;
}

table.log textarea
{
   width: 100%;
}