vidjil.less 44.7 KB
Newer Older
1 2 3 4

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

5 6
@infoContainerHeight : 32px;
@locusSpacingMargin : 12px;
7

8 9 10 11 12 13 14 15 16 17
/* default tag color */
@tagColor0 : #DC322F;
@tagColor1 : #cb4b16;
@tagColor2 : #b58900;
@tagColor3 : #268bd2;
@tagColor4 : #6c71c4;
@tagColor5 : #2aa198;
@tagColor6 : #d33682;
@tagColor7 : #859900;

18 19
@runTokenColor : #ffdde0;
@patientTokenColor : #eed0ff;
20
@genericTokenColor : #dcedff;
21

22 23
/* #dcffed also available */

24 25 26 27 28 29
#vmi-menu {
  position: unset;
  bottom: unset;
  width: unset;
}

30 31 32 33 34
html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
Marc Duez's avatar
Marc Duez committed
35
  min-height: 250px
36 37
}

38 39 40 41 42 43
body {
  display: flex;
  flex-flow: column;
  overflow-x: hidden;
}

44 45
body, svg {
  font-family: @default-font;
46
  font-size: 13px;
47 48 49
  height : 100%;
  margin:0px;
  color : @default;
50
  background : @border;
51 52
}

53
.cloneName {
54
  font-family: @bold-font;
Mathieu Giraud's avatar
Mathieu Giraud committed
55 56 57
}

.seq-fixed .cloneName, .listElem .cloneName {
58 59
  bottom: 1px;
}
60

61 62
/* for FF override */
textarea {
63
  font-family: @default-font;
64 65 66
  font-size: 100%;
}

67 68
/* texts that are not sequences nor identifiers */

69
#info, .popup_msg, .menu, .menu a
70 71 72 73
{
}


74 75 76 77 78 79 80 81 82 83 84 85
h2
{
  margin-top: 2px;
}

ul{
  padding-left:2px;
  margin-top: 3px;
  list-style-type: none;
}

#visu-container{
86
  position: relative;
87 88 89
  display: flex;
  flex-flow: column;
  width: 100%;
90 91 92 93 94 95
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  height :100%;
96 97
  margin : auto;
  overflow : hidden;
98
  background : @background;
99 100 101
}

#top-container {
102
  flex: 0 1 auto;
Marc Duez's avatar
Marc Duez committed
103
  height: @top_container_height;
104
  width: 100%;
105
  background: @background;
106 107
}

108 109 110 111 112 113 114 115 116 117 118
#top-container.alert
{
   background: yellow;
}

#alert
{
   font-weight: bold;
   color: red;
}

119 120 121 122 123 124 125 126
#tip-container {
  position: absolute;
  float: right;
  z-index: 50;
  right: 0px;
  top: 32px;
}

127 128 129 130 131 132 133 134 135 136
#upload_summary {
  float: right;
  display:none;
  margin-right: 200px;
  position: relative;
  right: 200px;
  z-index: 10;
  background-color: @background;
}

HERBERT Ryan's avatar
HERBERT Ryan committed
137 138 139 140
.upload_field {
  width: 100%;
}

141 142 143 144
#menu-container {
    background: inherit;
}

145 146 147 148 149 150 151 152 153
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

154
#mid-container {
Marc Duez's avatar
Marc Duez committed
155
  position : fixed;
156 157
  display: flex;
  flex: 1 1 auto;
Marc Duez's avatar
Marc Duez committed
158
  top : @top_container_height;
Marc Duez's avatar
Marc Duez committed
159
  bottom : 125px ;
160 161 162
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
163 164
  overflow: hidden;
  background: @background;
165
  margin: @margin;
166 167
}

168 169 170 171 172 173 174 175
#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;
176 177 178
}

#left-container {
179 180
  display: flex;
  flex-flow: column;
Ryan Herbert's avatar
Ryan Herbert committed
181
  position: relative;
182
  width : @width_left_container;
183
  overflow-y : none;
184 185 186 187 188
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
189 190
}

191
@media only screen and (max-width: 1000px) and (min-width: 500px) {
192 193 194 195 196
  #left-container {
    display: none;
  }
}

197
#visu, #visu2 {
198
  width : 100%;
199 200
}

201 202 203 204 205 206 207 208
@media only screen and (max-height: 500px) {
  #visu, #visu2 {
    height : 100%;
  }
}

@media screen and (min-height: 500px) {
  #visu, #visu2 {
209
    flex: 1 1 auto;
210 211 212
  }
}

213
@media only screen and (max-width: 500px) {
214 215 216 217 218
  #mid-container {
    flex-wrap: wrap;
    overflow-y: scroll;
    position: unset;
  }
219 220
}

221
#visu2 {
222
  max-height: calc(~"100%" - @margin)
223 224
}

225 226 227 228 229
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

230 231
                        /* left-container - info */

232
#info{
Ryan Herbert's avatar
Ryan Herbert committed
233
  flex: 0 0 auto;
234
  font-size: 13px;
235
  padding:3px;
236
  background : @background;
237 238
}

239 240 241 242 243 244
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

245 246 247 248
.locus_line {
  text-align: center;
}

249 250 251 252 253
.info_row {
    min-width: 100px;
    display: inline-block;
}

254 255 256 257 258 259
.locus_row {
  margin: 0 10px;
  display: inline-block;
  text-align: left;
}

260
.info_row_content {
261
    width: 100%;
262 263 264
    display: inline-block;
}

265 266 267 268
#info_data_file
{
  font-size: 200%;
}
269 270 271 272 273 274 275 276

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
277
  fill : @background
278 279 280 281 282
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
283
  stroke: @default;
284 285
}

Marc Duez's avatar
Marc Duez committed
286 287 288 289 290 291 292 293 294 295 296
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

297 298 299 300 301 302 303 304 305 306
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
307
  stroke: @default;
308 309 310 311 312
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
313
  stroke: @select;
314 315
}

316
.axis_m{
317
  stroke : @default ;
318 319 320 321
  opacity : 0.5 ;
  stroke-width : 20px;
}

322 323 324 325
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
326
  display: none;
327 328
}

329
.axis_h{
330
  stroke : @default ;
331 332 333
}

.axis_v{
334
 display: none;
335 336
}

337
.axis_v_hidden, .axis_h_hidden{
338 339 340
 display: none;
}

341 342 343 344 345 346 347 348 349 350
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
351 352
    fill: @border;
    opacity: 0.6;
353 354
}

355
.graph_time{
356 357 358 359 360 361
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
362
  font-weight : bold;
363
  fill : @default ;
364
  text-anchor:middle;
365
  font-size : 120%;
366 367
}

368 369
.graph_text{
  font-weight : bold;
370
  fill : @default ;
371
  text-anchor:end;
372
  dominant-baseline: middle;
373 374
}

375 376 377 378 379
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

380 381 382 383 384
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

385 386
.graph_menu{
  position: absolute;
387 388
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
389 390
  min-width: 22px;
  min-height: 18px;
391
  text-align: center;
392 393
  border-bottom: solid;
  border-left: solid;
394 395 396
  border-color: @border;
  background : @background;
}
397 398 399 400 401 402

.graph_list{
  display: none;
}

.graph_listElem:hover{
403
  background : @border;
404
  width: 100%;
Marc Duez's avatar
Marc Duez committed
405
  cursor: move;
406
  cursor: webkit-grab;
407 408
}

409

410 411 412 413 414 415 416 417 418 419 420 421
							  /*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;
422
  fill : @default;
423
  stroke-width:4px;
424 425 426 427 428 429 430 431 432 433 434
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
435
  fill : @default;
436 437 438 439
}

.circle_focus{
  cursor:pointer;
440
  fill : @select;
441 442 443 444 445 446 447
}

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

448 449 450 451 452 453 454 455 456
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

457
.sp_legend{
458
  fill : @default ;
459 460
  font-weight : bold;
  text-anchor : middle;
461
  dominant-baseline: middle;
462
  cursor: pointer;
463 464
}

465 466 467 468 469 470 471
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
472 473
.sp_system{
  position:absolute;
474
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
475 476
}

Marc Duez's avatar
Marc Duez committed
477
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
478 479 480
  color : @default ;
  height:0px;
  position:relative;
481 482
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
483 484 485
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
486
  color : @select ;
Marc Duez's avatar
Marc Duez committed
487 488 489
  cursor: pointer;
}

490
.sp_rotated_legend{
491
  fill : @default ;
492 493
  font-weight : bold;
  text-anchor : left;
494
  cursor: pointer;
495 496
}

Marc Duez's avatar
Marc Duez committed
497 498 499 500 501 502 503 504 505 506
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

507
.sp_line , .sp_subline{
508
  stroke : @default ;
509 510 511 512 513 514 515 516 517 518 519
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

520
							  /*style list/data element*/
521 522 523 524


/*Metric*/

Marc Duez's avatar
Marc Duez committed
525
@top_container_height : 32px;
526
@width_left_container : 475px;
527
@width_highlight : 300px;
528
@width_stats: 350px;
529 530 531
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
532
@width_thumbBox : 16px;
533
@width_axisBox : 52px;
534
@width_infoBox : 20px;
535
@width_systemBox : 12px;
536
@width_listElem : (@width_left_container - @width_scrollbar);
537
@margin : 6px;
538 539
@margin_nameBox : 10px;

Marc Duez's avatar
Marc Duez committed
540
.list:hover, .tagElem:hover, .data:hover{
541
  background :@border;
542 543
}

Marc Duez's avatar
Marc Duez committed
544 545 546 547 548 549
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

Ryan Herbert's avatar
Ryan Herbert committed
550
#list{
551
  flex: auto;
552
  height: 0px; // set scrollbar flex will override height
553 554
}

Ryan Herbert's avatar
Ryan Herbert committed
555
#data{
556
  flex: 0 0 auto;
557
  height : 0.1px;
558 559 560
}

#list_clones{
561
  flex: 1 1 auto;
562 563
  overflow-y : scroll;
  overflow-x : hidden;
564
  height : calc(~"100% - 30px");  /*100% - list_menu height */
565 566 567
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
568
#list_data{
569 570 571 572
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
573 574 575 576 577 578 579 580 581 582 583 584
}

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

.data_value{
}

585 586 587 588
.data {
    padding-right: 30px;
}

589
.list{
590
  width : 	445px;
591 592 593 594 595 596
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
597
  font-size: 13px;
598 599 600 601 602
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
603
  padding: 1px 4px 4px 1px;
604 605 606 607 608 609 610
  height :14px;
}

.selected{
  color : @select;
}

611
.nameBox {
612
  width: 300px;
613 614 615 616 617 618 619 620 621
  margin-right: @margin_nameBox;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
  float:left;
  white-space:nowrap;
}

622 623 624 625
.seq-fixed .nameBox {
  width: 250px;
}

626
.list .axisBox, .axisBox span {
627
  max-width: @width_axisBox;
628 629 630
  float: right;
  overflow: hidden;
  display: inline-block;
631
  max-height: 16px;
632 633 634
  position: relative;
}

635
.segmenter .axisBox>span {
636 637 638
  margin : 0 3px;
}

639
.identityBox {
640
  font-family: @default-font;
641
  text-align: right;
642 643
}

644
.identityBad {
645 646 647
  color: #800;
}

648
.identityGood {
649
  color: #080;
650 651
}

652 653 654 655 656 657
.starBox{
  width: @width_starBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
658
  overflow: hidden;
659 660
}

661 662 663 664 665 666 667 668 669 670

.thumbBox{
  width: @width_thumbBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
  overflow: hidden;
}

671
.infoBox{
Mathieu Giraud's avatar
Mathieu Giraud committed
672 673
  font-size: 90%;
  width: 16px;
674
  float: right;
Marc Duez's avatar
Marc Duez committed
675
  height: 15px;
676
  display: inline-block;
677
  user-select: none;
678
  text-align: center;
679 680
  border: solid;
  border-width: 1px;
681
  border-color: @background;
682
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
683
  margin: 0px 1px;
684
}
Marc Duez's avatar
Marc Duez committed
685
.infoBox:hover{
686 687 688 689
  background: @highlight;
}
.infoBox-open{
  background: @border;
690 691
}

692
.systemBox, .systemBoxMenu {
693 694
    display: inline-block;
    width: @width_systemBox;
695 696 697
    height: @width_systemBox;
    line-height: @width_systemBox;
    vertical-align: middle;
698 699 700
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
701
    margin: 2px 4px 4px 2px;
702 703 704
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    font-size: 70%;
705
    background: @border;
706 707
}

708 709 710 711 712 713
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
714 715
    min-width: 60px;
    padding: 2px 2px 1px 2px;
716
    cursor : pointer;
717 718
}	      

719 720 721
.hiddenCheckBox {
    display : none;
}
722

723 724 725 726 727 728 729 730 731 732 733 734
.clusterBox{
  width: @width_clusterBox;
  float: left;
  height: 12px;
  display: inline-block;
  text-align :center
}

.delBox{
  height: 12px;
  width: 12px;
  display: inline-block;
735 736 737 738
  float: left;
  user-select: none;
  margin-right: 8px;
  margin-left: 2px;
739 740 741 742 743
}



#new_name{
744
  font-family: @monospace-font;
745 746 747
  font-weight:bold;
}

748 749 750 751 752
.list_sort{
    margin-right : 30px;
    float: right;
}

753 754
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
755
  width : 445px;
756 757 758 759 760 761
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
762
.list_focus{
Marc Duez's avatar
Marc Duez committed
763
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
764
}
765 766

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
767
    white-space: nowrap;
768
}
Marc Duez's avatar
Marc Duez committed
769
.sequence-line:hover { 
770 771 772
    font-weight: bold;
}

773
.seq-fixed {
774 775
  position: relative;
  display: inline-block;
776 777
//  width: (@width_left_container - @width_scrollbar);
  width : auto;
778 779
  margin: -2px;
  padding: 2px;
780 781 782 783 784 785 786 787 788
  padding-left: 5px;
  left:0px;
  cursor:pointer;
  z-index:1;
}

.seq-mobil {
  margin-left: @width_left_container;
  letter-spacing: 0.12em;
789
  font-family : @monospace-font; 
Marc Duez's avatar
Marc Duez committed
790
  position: relative;
791
  bottom: 3px;
792
  font-size:1em;
793 794
}

795 796 797
.seq-marge {
  word-spacing: normal;
}
798 799

.V {
800 801
  color: #000;
  background-color: #efe;
802
}
Marc Duez's avatar
Marc Duez committed
803
.D {
804 805
  color: #000;
  background-color: #fee;
806 807
}
.J {
808 809
  color: #000;
  background-color: #ffffe2;
810 811 812
}
.N, .N + .J, .N + .D {
  box-shadow: -1px 0 0 @default;
Marc Duez's avatar
Marc Duez committed
813
}
Mathieu Giraud's avatar
Mathieu Giraud committed
814 815

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
816 817 818
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
819 820 821
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
822
    margin: -1px;
823
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
824 825 826 827 828 829
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
830 831
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
832
}
Mathieu Giraud's avatar
Mathieu Giraud committed
833 834 835 836 837 838 839 840 841
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
842 843 844 845 846
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
847
span .substitution, span .indel, span .insertion, span .deletion {
Mathieu Giraud's avatar
Mathieu Giraud committed
848 849
  font-weight: bold;
  color: #800;
Marc Duez's avatar
Marc Duez committed
850
}
851 852 853
span .substitution {
  border-bottom: 1px solid #800;
}
854
span .silent {
855 856
  border-bottom: 3px double #008;
  color: #008;
857
}
Marc Duez's avatar
Marc Duez committed
858

Mathieu Giraud's avatar
Mathieu Giraud committed
859
span .end-codon {
860 861 862
  box-shadow: 1px 0 0 @default;
}
span .end-codon-not-first {
Mathieu Giraud's avatar
Mathieu Giraud committed
863 864
}

865 866
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
867
.tagSelector{
868 869 870 871 872 873 874
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
875
  background: @background;
876 877
}

Marc Duez's avatar
Marc Duez committed
878
.dataMenu{
879 880 881 882 883 884 885 886 887 888
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

889 890 891 892 893 894 895 896 897 898 899 900
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
901 902 903
  margin-right: 5px;
  height: 14px;
  width: 14px;
904 905 906
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
907 908
  margin-bottom: -3px;
  margin-top: 3px;
909 910
}

911 912 913 914
#normalized_size {
    width: 80px;
}

915 916 917 918 919 920 921 922
							  /*menu*/

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

925 926 927 928 929 930

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

931 932 933 934 935 936 937 938 939 940 941 942
.submenu{
    width: 200px;
    display: inline-table;
}

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

944 945
.submenu{
    width: 200px;
946
    display: inline-table;
947 948 949 950 951 952 953 954 955 956
}

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

Marc Duez's avatar
Marc Duez committed
957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972
.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;
}

973
#file_menu, #axis_choice, #add_clone_menu {
974
  z-index:2;
975 976 977
  border:solid;
  position: fixed;
  top: 200px;
978 979 980
  min-width:400px;
  margin-left:-250px;
  left :50%;
981
  font-size: 13px;
982
  padding: 10px;
983
  background:@background;
984 985 986
  display:none;
}

987 988 989 990 991
#add_clone_menu {
  margin-left: -325px;
  min-width: 600px;
}

992 993 994
#add_clone_menu > #addclone_input {
  margin-bottom: 10px;
  resize: none;
995
  height: 12em;
996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014
  width: 98%;
  border: 1px solid silver;
  border-radius: 0.1em;
  padding: 1%;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
  transition-property: border, box-shadow;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 0s;
}

#add_clone_menu > #addclone_input.error {
  border: 1px solid @message_border_red;
1015 1016 1017 1018 1019
}

.buttonSelector {
  background : @background;
  cursor:pointer;
1020
  font-size: 13px;
1021 1022 1023 1024 1025
  margin :2px;
  display:block;
  text-align:left;
}

1026
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
1027
  background : @border;
1028
  color : @select;
1029
  cursor: pointer;
1030 1031 1032 1033 1034 1035
}


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


1036
.popup_container{
1037
  z-index:20;
1038
  border:solid; 
marc's avatar
marc committed
1039 1040
  min-width:500px;
  max-width:80%;
1041
  font-size: 13px; 
1042 1043 1044
  padding: 10px;
  background: @background;
  display:none;
marc's avatar
marc committed
1045 1046 1047 1048 1049 1050 1051
  position:fixed;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
1052 1053
}

1054
/* Main style for <a> Used in particular in .popup_container, on login screen, in news, in links to results (for patient list and patient info)  */
Vidjil Team's avatar
Vidjil Team committed
1055 1056 1057 1058


a {
  color: @default;
1059 1060
}

Vidjil Team's avatar
Vidjil Team committed
1061 1062
a:hover {
  color: @select;
1063
}
Mathieu Giraud's avatar
Mathieu Giraud committed
1064 1065 1066 1067 1068 1069 1070 1071 1072 1073

a.tag-link {
  color: black;
  background-color: #eee;
  border-radius: 5px;
  padding: 2px;
  font-size: 85%;
  text-decoration: none;
}

Vidjil Team's avatar
Vidjil Team committed
1074
/* ----------------- */
1075

1076
.modal {
1077 1078 1079
  z-index:3;
  border:solid; 
  position: fixed; 
1080
  font-size: 13px; 
1081
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
1082
  background: @background;
1083
  display:none;
1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094

  &.data-container, &.info-container{
    top: 50px;
    left: 20px + @width_left_container;
    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%" - 215px);
    height: -webkit-calc(~"100%" - 215px);
    height: calc(~"100%" - 215px);
  }
1095 1096 1097 1098 1099 1100 1101 1102

  &.jstree-container {
    padding-top: 30px;
    top: 10%;
    left: 25%;
    width: 50%;
    height: 70%;
  }
1103 1104
}

1105
.data-msg, .info-msg{
1106
  overflow-x: auto;
1107 1108 1109 1110
  height : 100%;
  width : 100%;
}

1111
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, #segmenter_axis_menu, .seq-fixed{
1112 1113 1114 1115 1116
 background : @background;
}

.closeButton{
  position: absolute;
1117 1118
  top: 0px;
  right: 0px;
1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135
  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;
}

1136
.button, .button_right, .button_left{
1137
  cursor:pointer;
1138
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
1139
  padding: 0px 3px;
1140 1141
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
1142
  min-width : 16px;
1143
  color: @default;
Marc Duez's avatar
Marc Duez committed
1144 1145
}

1146 1147 1148 1149
div.button {
    display: inline;
}

1150 1151 1152 1153
.button_next {
    margin-left: -8px ;
}

1154 1155 1156 1157
.button_right{
    float: right;
}

1158 1159
.button_left {
    float: left;
1160
    margin-right: -27px;
1161 1162
}

Marc Duez's avatar
Marc Duez committed
1163 1164 1165 1166 1167 1168 1169 1170
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
1171
    width: auto;
Marc Duez's avatar
Marc Duez committed
1172
    text-align: center;
Marc Duez's avatar
Marc Duez committed
1173 1174
    padding-left: 10px;
    padding-right: 10px;
1175 1176 1177 1178
}

.smallbutton {
    cursor:pointer;
1179
    font-size: 13px;
1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200
    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;
}

1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212
.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
1213
.menu-segmenter {
1214 1215
    position: relative;
    float: left;
1216
    width: @width_left_container +200;
1217 1218
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1219 1220 1221 1222 1223 1224
#toIMGTSeg {
    width: 12px;
    display: inline-block;
    text-align: center;
}

1225 1226 1227
.menu-highlight {
    position: relative;
    float: left;
1228
    width: eval(@width_highlight);
1229 1230
}

1231
.devel-mode, .beta-mode {
1232 1233 1234
    display: none;
}

1235 1236 1237
.focus {
    position: relative;
    text-align: center;
1238
    float: left;
1239 1240 1241
    width: -moz-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight + 50));
    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight + 50));
    width: calc(~"100%" - (@width_left_container +  @width_stats + @width_highlight + 50));
1242
    overflow: hidden;
1243
    height: 1.1em;
1244 1245 1246 1247 1248 1249 1250
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
1251 1252
}

1253
.segmenter {
1254
    overflow-x: scroll !important; 
1255
    overflow-y: auto;
1256
    height : 100px;
1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269
}

.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
1270 1271 1272
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1273
  z-index:5;
1274
  overflow: hidden;
1275 1276
}

1277 1278 1279 1280
#bot-placeholder {
  flex: 0 0 135px;
}

1281 1282
#bot-container {
  position: fixed;
1283 1284
  left: 0;
  bottom: 0;
1285
  width: 100%;
1286 1287 1288
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1289 1290
}

1291 1292 1293 1294 1295
#segmenter {
  display: flex;
  flex-flow: column;
}

1296 1297 1298 1299 1300
.tn{
  width:120px;
  display:inline-table;
}

1301
#list_menu{
1302
  flex: 0 1 auto;
1303 1304 1305 1306 1307 1308 1309 1310
  -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
1311
  border-bottom-width: 2px;
1312 1313
}

1314 1315 1316 1317 1318
#filter_input
{
  width: 200px;
}

1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337
.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 */
1338
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1339
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1340 1341
  height: 8px;
  margin-top: 4px;
1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353
  display: inline-block;
}

#fps{
  float: right;
  position: relative;
  margin: 5px ;
  height:0px;
  opacity:0.5;
}

#test_result{
1354
  font-family : @monospace-font;
1355 1356 1357 1358 1359 1360 1361 1362 1363 1364
  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
1365
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381
{
  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
1382
#info_timepoint td{
1383 1384
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1385 1386 1387 1388 1389 1390 1391 1392 1393
  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{
1394 1395 1396 1397 1398
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1399
#info_window table .header, #info_timepoint table .header{
1400
  border-width : 2px;
1401
  background-color: @border;
1402 1403
}

1404 1405 1406 1407
span.ok { color: green; }
text.ok { color: green; }
span.info { color: blue; }
text.info { color: blue; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1408 1409 1410 1411
span.warn, span.warning { color: orange; }
text.warn, text.warning { fill: orange; }
span.error, span.fatal, span.alert { color: red; }
text.error, text.fatal, text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1412

1413 1414 1415 1416 1417 1418 1419
span.warningReads {
                  margin-left: .5em;
                  display:inline-block;
                  width: 1em;
                  text-align:center;
                  cursor: help}

1420
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1421 1422 1423 1424 1425
    position: relative;
    top: 0px;
    left: 0px;
}

1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437
.visu2_menu_anchor {
  position: absolute;
  bottom: @margin;
  right: 0px;
}

.sp_menu_anchor, .visu2_menu_anchor {
  width: 0px;
  height: 0px;
}


1438
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1439 1440
    border-bottom: solid;
    border-right: solid;
1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454
}

.visu2_menu {
  border-top: solid;
  border-left: solid;
  text-align: right;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.sp_menu, .visu2_menu {
    min-width: 22px;
    min-height: 18px;
Marc Duez's avatar
Marc Duez committed
1455
    border-color: @border;
1456
    background: @background;
Marc Duez's avatar
Marc Duez committed
1457
    display: inline-block;
1458
    padding: 2px;
Marc Duez's avatar
Marc Duez committed
1459 1460
}

1461
.sp_menu_content, .visu2_menu_content {
Marc Duez's avatar
Marc Duez committed
1462 1463 1464 1465 1466 1467 1468 1469 1470 1471
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1472 1473
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1474 1475 1476
    padding: 8px 0px 0px 0px;
    width: 180px; 
    height: 130px;
1477 1478 1479 1480
}

.visu2_menu:hover .visu2_menu_content,
.visu2_menu_content:focus {
1481
  width: 100px;
1482 1483 1484 1485 1486 1487 1488
  height: 45px;
}

.sp_menu:hover .sp_menu_content,
.visu2_menu:hover .visu2_menu_content,
.sp_menu_content:focus,
.visu2_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522
    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;
}

1523 1524 1525 1526 1527 1528 1529
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1530 1531 1532 1533 1534
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1535 1536

.axis_select select {
1537
    background: @background;
1538
    color: @default;
Marc Duez's avatar
Marc Duez committed
1539 1540
    height: 20px;
    width: 120px;
1541
    -webkit-appearance: none;
1542
    border: solid;
Marc Duez's avatar
Marc Duez committed
1543 1544 1545
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1546 1547 1548 1549 1550
}

.axis_select_graph {
    top: 0px;
    display: none;
1551 1552 1553 1554 1555
}

.axis_select select[selected=selected] {
   color: @select;
}
1556 1557

#visu-separator {
1558
    position: relative;
1559
    height: @margin;
1560
    cursor: move;
1561
    cursor: -webkit-grab;
1562
    background: @border;
1563
}
1564

1565 1566 1567 1568 1569 1570 1571 1572 1573
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1574 1575 1576 1577
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1578
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1579
    line-height: calc(~"100% - 1px");
1580
    background : @border;
Marc Duez's avatar
Marc Duez committed
1581
    cursor: pointer;
1582 1583
}

1584
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1585
    background: @highlight;
1586
}
Marc Duez's avatar
Marc Duez committed
1587 1588 1589 1590 1591 1592

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

1594
.db_div{
Marc Duez's avatar
Marc Duez committed
1595
  z-index:5;
1596
  position: fixed; 
1597 1598 1599
  top: 35px;
  width:100%;
  height: calc(~"100% - 35px");
1600 1601 1602
  font-size: 14px; 
  background: @background;
  display:none;
1603
  left: 0%;
1604
}
1605

1606
.db_msg{
Marc Duez's avatar
Marc Duez committed
1607
    margin : 15px;
1608
    height : calc(~"100% - 30px");
1609
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1610 1611 1612
}

#db_content{
1613
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1614
}
Marc Duez's avatar
Marc Duez committed
1615

1616 1617 1618
.db_table{
    width: 100%;
    border-collapse: collapse;
1619 1620 1621
    table-layout: fixed;
}

1622 1623
.db_table td {
    .ellipsis;
1624 1625
}

1626
.table_compare td:hover {
1627 1628 1629
    .ellipsisOverflow;
}

1630 1631 1632 1633
.table_stats td:hover {
    .ellipsisOverflow;
}

1634 1635 1636 1637 1638
.db_table_split{
    text-align:center;
    background-color: @highlight;
}

1639 1640 1641 1642
.db_table_split td {
    border-top: 2ex solid @background;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1643 1644 1645
.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
1646
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1647

1648
.db_table .column1{
1649
    width: 100px;
1650 1651 1652
}

.db_table .column2{
1653
    width: 150px;
1654 1655 1656 1657 1658 1659 1660 1661 1662
}

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

1663
.db_table .column_sep {
1664 1665 1666 1667 1668
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1669 1670
}

1671
h3 .uid {