vidjil.less 42.2 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 20
@patientTokenColor : #ddffdd;
@runTokenColor : #ffdddd;
@genericTokenColor : #ddddff;
21

22 23 24 25 26
html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
Marc Duez's avatar
Marc Duez committed
27
  min-height: 250px
28 29
}

30 31
body, svg {
  font-family: @default-font;
32
  font-size: 13px;
33 34 35
  height : 100%;
  margin:0px;
  color : @default;
36
  background : @border;
37 38
}

39
.cloneName {
40
  font-family: @bold-font;
Mathieu Giraud's avatar
Mathieu Giraud committed
41 42 43
}

.seq-fixed .cloneName, .listElem .cloneName {
44 45
  bottom: 1px;
}
46

47 48
/* for FF override */
textarea {
49
  font-family: @default-font;
50 51 52
  font-size: 100%;
}

53 54
/* texts that are not sequences nor identifiers */

55
#info, .popup_msg, .menu, .menu a
56 57 58 59
{
}


60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
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%;
78 79
  margin : auto;
  overflow : hidden;
80
  background : @background;
81 82 83
}

#top-container {
Marc Duez's avatar
Marc Duez committed
84
  height: @top_container_height;
85
  width: 100%;
86
  background: @background;
Marc Duez's avatar
Marc Duez committed
87 88
  position : fixed;
  z-index:1;
89 90
}

91 92 93 94 95 96 97 98 99 100 101
#top-container.alert
{
   background: yellow;
}

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

102 103 104 105 106 107 108 109
#tip-container {
  position: absolute;
  float: right;
  z-index: 50;
  right: 0px;
  top: 32px;
}

110 111 112 113 114 115 116 117 118 119
#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
120 121 122 123
.upload_field {
  width: 100%;
}

124 125 126 127
#menu-container {
    background: inherit;
}

128 129 130 131 132 133 134 135 136
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

137
#mid-container {
Marc Duez's avatar
Marc Duez committed
138
  position : fixed;
Marc Duez's avatar
Marc Duez committed
139
  top : @top_container_height;
Marc Duez's avatar
Marc Duez committed
140
  bottom : 125px ;
141 142 143
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
144 145
  overflow: hidden;
  background: @background;
146
  margin: @margin;
147 148
}

149 150 151 152 153 154 155 156
#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;
157 158 159 160 161 162
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
163
  overflow-y : none;
164 165 166 167 168
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
169
  display : table;
170 171 172 173
}

#visu, #visu2 {
  height : 50%;
174
  width : 100%;
175 176
}

177 178 179 180
#visu2 {
max-height: calc(~"100%" - @margin)
}

181 182 183 184 185
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

186 187
                        /* left-container - info */

188 189 190 191 192
#info-row{
    height : 200px;
    display : table-row;
}

193
#info{
194
  font-size: 13px;
195
  padding:3px;
196
  background : @background;
197
  display : table-cell;
198 199
}

200 201 202 203 204 205
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

206 207 208 209
.locus_line {
  text-align: center;
}

210 211 212 213 214
.info_row {
    min-width: 100px;
    display: inline-block;
}

215 216 217 218 219 220
.locus_row {
  margin: 0 10px;
  display: inline-block;
  text-align: left;
}

221
.info_row_content {
222
    width: 100%;
223 224 225
    display: inline-block;
}

226 227 228 229
#info_data_file
{
  font-size: 200%;
}
230 231 232 233 234 235 236 237

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
238
  fill : @background
239 240 241 242 243
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
244
  stroke: @default;
245 246
}

Marc Duez's avatar
Marc Duez committed
247 248 249 250 251 252 253 254 255 256 257
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

258 259 260 261 262 263 264 265 266 267
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
268
  stroke: @default;
269 270 271 272 273
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
274
  stroke: @select;
275 276
}

277
.axis_m{
278
  stroke : @default ;
279 280 281 282
  opacity : 0.5 ;
  stroke-width : 20px;
}

283 284 285 286
.axis_m_other {
  stroke: @default ;
  opacity: 0.25 ;
  stroke-width: 10px;
287
  display: none;
288 289
}

290
.axis_h{
291
  stroke : @default ;
292 293 294
}

.axis_v{
295
 display: none;
296 297
}

298
.axis_v_hidden, .axis_h_hidden{
299 300 301
 display: none;
}

302 303 304 305 306 307 308 309 310 311
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
312 313
    fill: @border;
    opacity: 0.6;
314 315
}

316
.graph_time{
317 318 319 320 321 322
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
323
  font-weight : bold;
324
  fill : @default ;
325
  text-anchor:middle;
326
  font-size : 120%;
327 328
}

329 330
.graph_text{
  font-weight : bold;
331
  fill : @default ;
332
  text-anchor:end;
333
  dominant-baseline: middle;
334 335
}

336 337 338 339 340
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

341 342 343 344 345
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

346 347
.graph_menu{
  position: absolute;
348 349
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
350 351
  min-width: 22px;
  min-height: 18px;
352
  text-align: center;
353 354
  border-bottom: solid;
  border-left: solid;
355 356 357
  border-color: @border;
  background : @background;
}
358 359 360 361 362 363

.graph_list{
  display: none;
}

.graph_listElem:hover{
364
  background : @border;
365
  width: 100%;
Marc Duez's avatar
Marc Duez committed
366
  cursor: move;
367
  cursor: webkit-grab;
368 369
}

370

371 372 373 374 375 376 377 378 379 380 381 382
							  /*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;
383
  fill : @default;
384
  stroke-width:4px;
385 386 387 388 389 390 391 392 393 394 395
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
396
  fill : @default;
397 398 399 400
}

.circle_focus{
  cursor:pointer;
401
  fill : @select;
402 403 404 405 406 407 408
}

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

409 410 411 412 413 414 415 416 417
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

418
.sp_legend{
419
  fill : @default ;
420 421
  font-weight : bold;
  text-anchor : middle;
422
  dominant-baseline: middle;
423
  cursor: pointer;
424 425
}

426 427 428 429 430 431 432
.sp_legend2{
  fill : @default ;
  opacity : 0.4;
  text-anchor : middle;
  dominant-baseline: middle;
}

Marc Duez's avatar
Marc Duez committed
433 434
.sp_system{
  position:absolute;
435
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
436 437
}

Marc Duez's avatar
Marc Duez committed
438
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
439 440 441
  color : @default ;
  height:0px;
  position:relative;
442 443
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
444 445 446
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
447
  color : @select ;
Marc Duez's avatar
Marc Duez committed
448 449 450
  cursor: pointer;
}

451
.sp_rotated_legend{
452
  fill : @default ;
453 454
  font-weight : bold;
  text-anchor : left;
455
  cursor: pointer;
456 457
}

Marc Duez's avatar
Marc Duez committed
458 459 460 461 462 463 464 465 466 467
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

468
.sp_line , .sp_subline{
469
  stroke : @default ;
470 471 472 473 474 475 476 477 478 479 480
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

481
							  /*style list/data element*/
482 483 484 485


/*Metric*/

Marc Duez's avatar
Marc Duez committed
486
@top_container_height : 32px;
487
@width_left_container : 475px;
488
@width_highlight : 300px;
489
@width_stats: 350px;
490 491 492
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
493
@width_thumbBox : 16px;
494
@width_axisBox : 52px;
495
@width_infoBox : 20px;
496
@width_systemBox : 12px;
497
@width_listElem : (@width_left_container - @width_scrollbar);
498
@margin : 6px;
499 500
@margin_nameBox : 10px;

Marc Duez's avatar
Marc Duez committed
501
.list:hover, .tagElem:hover, .data:hover{
502
  background :@border;
503 504
}

Marc Duez's avatar
Marc Duez committed
505 506 507 508 509 510
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

511 512 513 514 515 516 517 518 519
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
520
  height : 0.1px;
521 522 523 524 525
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
526
  height : calc(~"100% - 30px");  /*100% - list_menu height */
527 528 529
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
530
#list_data{
531 532 533 534
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
535 536 537 538 539 540 541 542 543 544 545 546
}

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

.data_value{
}

547 548 549 550
.data {
    padding-right: 30px;
}

551
.list{
552
  width : 	445px;
553 554 555 556 557 558
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
559
  font-size: 13px;
560 561 562 563 564
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
565
  padding: 1px 4px 4px 1px;
566 567 568 569 570 571 572
  height :14px;
}

.selected{
  color : @select;
}

573
.nameBox {
574
  width: 300px;
575 576 577 578 579 580 581 582 583
  margin-right: @margin_nameBox;
  overflow: hidden;
  display: inline-block;
  height: 16px;
  position: relative;
  float:left;
  white-space:nowrap;
}

584 585 586 587
.seq-fixed .nameBox {
  width: 250px;
}

588
.list .axisBox, .axisBox span {
589
  max-width: @width_axisBox;
590 591 592
  float: right;
  overflow: hidden;
  display: inline-block;
593
  max-height: 16px;
594 595 596
  position: relative;
}

597
.segmenter .axisBox>span {
598 599 600
  margin : 0 3px;
}

601
.identityBox {
602
  font-family: @default-font;
603
  text-align: right;
604 605
}

606
.identityBad {
607 608 609
  color: #800;
}

610
.identityGood {
611
  color: #080;
612 613
}

614 615 616 617 618 619
.starBox{
  width: @width_starBox;
  float: right;
  height: 16px;
  display: inline-block;
  user-select :none;
620
  overflow: hidden;
621 622
}

623 624 625 626 627 628 629 630 631 632

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

633
.infoBox{
Mathieu Giraud's avatar
Mathieu Giraud committed
634 635
  font-size: 90%;
  width: 16px;
636
  float: right;
Marc Duez's avatar
Marc Duez committed
637
  height: 15px;
638
  display: inline-block;
639
  user-select: none;
640
  text-align: center;
641 642
  border: solid;
  border-width: 1px;
643
  border-color: @background;
644
  border-radius: 5px;
Marc Duez's avatar
Marc Duez committed
645
  margin: 0px 1px;
646
}
Marc Duez's avatar
Marc Duez committed
647
.infoBox:hover{
648 649 650 651
  background: @highlight;
}
.infoBox-open{
  background: @border;
652 653
}

654
.systemBox, .systemBoxMenu {
655 656
    display: inline-block;
    width: @width_systemBox;
657 658 659
    height: @width_systemBox;
    line-height: @width_systemBox;
    vertical-align: middle;
660 661 662
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
663
    margin: 2px 4px 4px 2px;
664 665 666
    color: #fff;
    color: rgba(255, 255, 255, 0.7);
    font-size: 70%;
667
    background: @border;
668 669
}

670 671 672 673 674 675
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
676 677
    min-width: 60px;
    padding: 2px 2px 1px 2px;
678
    cursor : pointer;
679 680
}	      

681 682 683
.hiddenCheckBox {
    display : none;
}
684

685 686 687 688 689 690 691 692 693 694 695 696
.clusterBox{
  width: @width_clusterBox;
  float: left;
  height: 12px;
  display: inline-block;
  text-align :center
}

.delBox{
  height: 12px;
  width: 12px;
  display: inline-block;
697 698 699 700
  float: left;
  user-select: none;
  margin-right: 8px;
  margin-left: 2px;
701 702 703 704 705
}



#new_name{
706
  font-family: @monospace-font;
707 708 709
  font-weight:bold;
}

710 711 712 713 714
.list_sort{
    margin-right : 30px;
    float: right;
}

715 716
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
717
  width : 445px;
718 719 720 721 722 723
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}
Marc Duez's avatar
Marc Duez committed
724
.list_focus{
Marc Duez's avatar
Marc Duez committed
725
    background : @border !important;
Marc Duez's avatar
Marc Duez committed
726
}
727 728

.sequence-line { 
Marc Duez's avatar
Marc Duez committed
729
    white-space: nowrap;
730
}
Marc Duez's avatar
Marc Duez committed
731
.sequence-line:hover { 
732 733 734
    font-weight: bold;
}

735
.seq-fixed {
736 737
  position: relative;
  display: inline-block;
738 739
//  width: (@width_left_container - @width_scrollbar);
  width : auto;
740 741
  margin: -2px;
  padding: 2px;
742 743 744 745 746 747 748 749 750
  padding-left: 5px;
  left:0px;
  cursor:pointer;
  z-index:1;
}

.seq-mobil {
  margin-left: @width_left_container;
  letter-spacing: 0.12em;
751
  font-family : @monospace-font; 
Marc Duez's avatar
Marc Duez committed
752
  position: relative;
753
  bottom: 3px;
754
  font-size:1em;
755 756
}

757 758 759
.seq-marge {
  word-spacing: normal;
}
760 761

.V {
762 763
  color: #000;
  background-color: #efe;
764
}
Marc Duez's avatar
Marc Duez committed
765
.D {
766 767
  color: #000;
  background-color: #fee;
768 769
}
.J {
770 771
  color: #000;
  background-color: #ffffe2;
772 773 774
}
.N, .N + .J, .N + .D {
  box-shadow: -1px 0 0 @default;
Marc Duez's avatar
Marc Duez committed
775
}
Mathieu Giraud's avatar
Mathieu Giraud committed
776 777

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
778 779 780
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
781 782 783
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
784
    margin: -1px;
785
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
786 787 788 789 790 791
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
792 793
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
794
}
Mathieu Giraud's avatar
Mathieu Giraud committed
795 796 797 798 799 800 801 802 803
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
804 805 806 807 808
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
809
span .substitution, span .indel {
Mathieu Giraud's avatar
Mathieu Giraud committed
810 811
  font-weight: bold;
  color: #800;
Marc Duez's avatar
Marc Duez committed
812
}
813 814 815
span .substitution {
  border-bottom: 1px solid #800;
}
Marc Duez's avatar
Marc Duez committed
816

817 818
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
819
.tagSelector{
820 821 822 823 824 825 826
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
827
  background: @background;
828 829
}

Marc Duez's avatar
Marc Duez committed
830
.dataMenu{
831 832 833 834 835 836 837 838 839 840
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

841 842 843 844 845 846 847 848 849 850 851 852
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
853 854 855
  margin-right: 5px;
  height: 14px;
  width: 14px;
856 857 858
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
859 860
  margin-bottom: -3px;
  margin-top: 3px;
861 862
}

863 864 865 866
#normalized_size {
    width: 80px;
}

867 868 869 870 871 872 873 874
							  /*menu*/

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

877 878 879 880 881 882

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

883 884 885 886 887 888 889 890 891 892 893 894
.submenu{
    width: 200px;
    display: inline-table;
}

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

896 897
.submenu{
    width: 200px;
898
    display: inline-table;
899 900 901 902 903 904 905 906 907 908
}

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

Marc Duez's avatar
Marc Duez committed
909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924
.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;
}

925
#file_menu, #axis_choice, #add_clone_menu {
926
  z-index:2;
927 928 929
  border:solid;
  position: fixed;
  top: 200px;
930 931 932
  min-width:400px;
  margin-left:-250px;
  left :50%;
933
  font-size: 13px;
934
  padding: 10px;
935
  background:@background;
936 937 938
  display:none;
}

939 940 941 942 943
#add_clone_menu {
  margin-left: -325px;
  min-width: 600px;
}

944 945 946
#add_clone_menu > #addclone_input {
  margin-bottom: 10px;
  resize: none;
947
  height: 12em;
948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966
  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;
967 968 969 970 971
}

.buttonSelector {
  background : @background;
  cursor:pointer;
972
  font-size: 13px;
973 974 975 976 977
  margin :2px;
  display:block;
  text-align:left;
}

978
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
979
  background : @border;
980
  color : @select;
981
  cursor: pointer;
982 983 984 985 986 987
}


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


988
.popup_container{
989
  z-index:20;
990
  border:solid; 
marc's avatar
marc committed
991 992
  min-width:500px;
  max-width:80%;
993
  font-size: 13px; 
994 995 996
  padding: 10px;
  background: @background;
  display:none;
marc's avatar
marc committed
997 998 999 1000 1001 1002 1003
  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%);
1004 1005
}

1006
/* 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
1007 1008 1009 1010


a {
  color: @default;
1011 1012
}

Vidjil Team's avatar
Vidjil Team committed
1013 1014
a:hover {
  color: @select;
1015
}
Mathieu Giraud's avatar
Mathieu Giraud committed
1016 1017 1018 1019 1020 1021 1022 1023 1024 1025

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
1026
/* ----------------- */
1027

1028
.modal {
1029 1030 1031
  z-index:3;
  border:solid; 
  position: fixed; 
1032
  font-size: 13px; 
1033
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
1034
  background: @background;
1035
  display:none;
1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046

  &.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);
  }
1047 1048 1049 1050 1051 1052 1053 1054

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

1057
.data-msg, .info-msg{
1058
  overflow-x: auto;
1059 1060 1061 1062
  height : 100%;
  width : 100%;
}

1063
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, #segmenter_axis_menu, .seq-fixed{
1064 1065 1066 1067 1068
 background : @background;
}

.closeButton{
  position: absolute;
1069 1070
  top: 0px;
  right: 0px;
1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087
  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;
}

1088
.button, .button_right, .button_left{
1089
  cursor:pointer;
1090
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
1091
  padding: 0px 3px;
1092 1093
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
1094
  min-width : 16px;
1095
  color: @default;
Marc Duez's avatar
Marc Duez committed
1096 1097
}

1098 1099 1100 1101
div.button {
    display: inline;
}

1102 1103 1104 1105
.button_next {
    margin-left: -8px ;
}

1106 1107 1108 1109
.button_right{
    float: right;
}

1110 1111
.button_left {
    float: left;
1112
    margin-right: -27px;
1113 1114
}

Marc Duez's avatar
Marc Duez committed
1115 1116 1117 1118 1119 1120 1121 1122
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
1123
    width: auto;
Marc Duez's avatar
Marc Duez committed
1124
    text-align: center;
Marc Duez's avatar
Marc Duez committed
1125 1126
    padding-left: 10px;
    padding-right: 10px;
1127 1128 1129 1130
}

.smallbutton {
    cursor:pointer;
1131
    font-size: 13px;
1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152
    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;
}

1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164
.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
1165
.menu-segmenter {
1166 1167
    position: relative;
    float: left;
1168
    width: @width_left_container +200;
1169 1170
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1171 1172 1173 1174 1175 1176
#toIMGTSeg {
    width: 12px;
    display: inline-block;
    text-align: center;
}

1177 1178 1179
.menu-highlight {
    position: relative;
    float: left;
1180
    width: eval(@width_highlight);
1181 1182
}

1183
.devel-mode, .beta-mode {
1184 1185 1186
    display: none;
}

1187 1188 1189
.focus {
    position: relative;
    text-align: center;
1190
    float: left;
1191 1192 1193
    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));
1194
    overflow: hidden;
1195
    height: 1.1em;
1196 1197 1198 1199 1200 1201 1202
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
1203 1204
}

1205
.segmenter {
1206
    overflow-x: scroll !important; 
1207
    overflow-y: auto;
1208
    height : 100px;
1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221
}

.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
1222 1223 1224
  margin-top: -moz-calc(@top_container_height - 24px);
  margin-top: -webkit-calc(@top_container_height - 24px);
  margin-top: calc(@top_container_height - 24px);
1225
  z-index:5;
1226
  overflow: hidden;
1227 1228 1229 1230
}

#bot-container {
  position: fixed;
1231
  bottom: 0px;
1232 1233
  left: 0px;
  width: 100%;
1234 1235 1236
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1237 1238 1239 1240 1241 1242 1243
}

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

1244
#list_menu{
1245 1246 1247 1248 1249 1250 1251 1252
  -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
1253
  border-bottom-width: 2px;
1254 1255
}

1256 1257 1258 1259 1260
#filter_input
{
  width: 200px;
}

1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279
.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 */
1280
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1281
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1282 1283
  height: 8px;
  margin-top: 4px;
1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295
  display: inline-block;
}

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

#test_result{
1296
  font-family : @monospace-font;
1297 1298 1299 1300 1301 1302 1303 1304 1305 1306
  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
1307
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323
{
  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
1324
#info_timepoint td{
1325 1326
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1327 1328 1329 1330 1331 1332 1333 1334 1335
  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{
1336 1337 1338 1339 1340
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1341
#info_window table .header, #info_timepoint table .header{
1342
  border-width : 2px;
1343
  background-color: @border;
1344 1345
}

1346 1347 1348 1349
span.ok { color: green; }
text.ok { color: green; }
span.info { color: blue; }
text.info { color: blue; }
1350 1351 1352 1353
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1354

1355 1356 1357 1358 1359 1360 1361
span.warningReads {
                  margin-left: .5em;
                  display:inline-block;
                  width: 1em;
                  text-align:center;
                  cursor: help}

1362
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1363 1364 1365 1366 1367
    position: relative;
    top: 0px;
    left: 0px;
}

1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379
.visu2_menu_anchor {
  position: absolute;
  bottom: @margin;
  right: 0px;
}

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


1380
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1381 1382
    border-bottom: solid;
    border-right: solid;
1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396
}

.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
1397
    border-color: @border;
1398
    background: @background;
Marc Duez's avatar
Marc Duez committed
1399
    display: inline-block;
1400
    padding: 2px;
Marc Duez's avatar
Marc Duez committed
1401 1402
}

1403
.sp_menu_content, .visu2_menu_content {
Marc Duez's avatar
Marc Duez committed
1404 1405 1406 1407 1408 1409 1410 1411 1412 1413
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1414 1415
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1416 1417 1418
    padding: 8px 0px 0px 0px;
    width: 180px; 
    height: 130px;
1419 1420 1421 1422
}

.visu2_menu:hover .visu2_menu_content,
.visu2_menu_content:focus {
1423
  width: 100px;
1424 1425 1426 1427 1428 1429 1430
  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
1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464
    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;
}

1465 1466 1467 1468 1469 1470 1471
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1472 1473 1474 1475 1476
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1477 1478

.axis_select select {
1479
    background: @background;
1480
    color: @default;
Marc Duez's avatar
Marc Duez committed
1481 1482
    height: 20px;
    width: 120px;
1483
    -webkit-appearance: none;
1484
    border: solid;
Marc Duez's avatar
Marc Duez committed
1485 1486 1487
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1488 1489 1490 1491 1492
}

.axis_select_graph {
    top: 0px;
    display: none;
1493 1494 1495 1496 1497
}

.axis_select select[selected=selected] {
   color: @select;
}
1498 1499

#visu-separator {
1500
    position: relative;
1501
    height: @margin;
1502
    cursor: move;
1503
    cursor: -webkit-grab;
1504
    background: @border;
1505
}
1506

1507 1508 1509 1510 1511 1512 1513 1514 1515
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1516 1517 1518 1519
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1520
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1521
    line-height: calc(~"100% - 1px");
1522
    background : @border;
Marc Duez's avatar
Marc Duez committed
1523
    cursor: pointer;
1524 1525
}

1526
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1527
    background: @highlight;
1528
}
Marc Duez's avatar
Marc Duez committed
1529 1530 1531 1532 1533 1534

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

1536
.db_div{
Marc Duez's avatar
Marc Duez committed
1537
  z-index:5;
1538
  position: fixed; 
1539 1540 1541
  top: 35px;
  width:100%;
  height: calc(~"100% - 35px");
1542 1543 1544
  font-size: 14px; 
  background: @background;
  display:none;
1545
  left: 0%;
1546
}
1547

1548
.db_msg{
Marc Duez's avatar
Marc Duez committed
1549
    margin : 15px;
1550
    height : calc(~"100% - 30px");
1551
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
1552 1553 1554
}

#db_content{
1555
    height : calc(~"100% - 160px");
Marc Duez's avatar
Marc Duez committed
1556
}
Marc Duez's avatar
Marc Duez committed
1557

1558 1559 1560
.db_table{
    width: 100%;
    border-collapse: collapse;
1561 1562 1563
    table-layout: fixed;
}

1564 1565
.db_table td {
    .ellipsis;
1566 1567
}

1568
.table_compare td:hover {
1569 1570 1571
    .ellipsisOverflow;
}

1572 1573 1574 1575 1576
.db_table_split{
    text-align:center;
    background-color: @highlight;
}

1577 1578 1579 1580
.db_table_split td {
    border-top: 2ex solid @background;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1581 1582 1583
.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
1584
.db_table .column_50{    width: 50px;   }
Mathieu Giraud's avatar
Mathieu Giraud committed
1585

1586
.db_table .column1{
1587
    width: 100px;
1588 1589 1590
}

.db_table .column2{
1591
    width: 150px;
1592 1593 1594 1595 1596 1597 1598 1599 1600
}

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

1601
.db_table .column_sep {
1602 1603 1604 1605 1606
    width: 50px;
    border: solid;
    border-width: 1px;
    border-color: @background;
    background: @background;
1607 1608
}

1609
h3 .uid {
Mikaël Salson's avatar
Mikaël Salson committed
1610
   font-size: 70%;
1611 1612 1613
   margin: 0 1em;
}

1614 1615 1616 1617
.db_table .uid {
   font-size: 80%;
}

1618
.db_block {
1619 1620 1621 1622
    width : 100%;
    display : inline-block;
}

Marc Duez's avatar
Marc Duez committed
1623
.db_footer{
Ryan Herbert's avatar
Ryan Herbert committed
1624
    display: block;
Marc Duez's avatar
Marc Duez committed
1625 1626
    position: absolute;
    bottom: 5px;
1627
    left:0px;
Ryan Herbert's avatar
Ryan Herbert committed
1628 1629
    width: 100%;
    background: white;
Marc Duez's avatar
Marc Duez committed
1630 1631
}

1632
.db_block_left {
1633 1634 1635
    float : left;
}

1636
.db_block_right {
1637 1638 1639
    float : right;
}

1640 1641 1642 1643 1644 1645
.db_block_center {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

1646 1647 1648 1649 1650 1651 1652 1653 1654 1655
.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
1656 1657 1658 1659
}

.pointer
{
1660 1661 1662 1663
    cursor: pointer;
} 

.db_table tr:hover{
1664
    background: @border;
1665 1666 1667 1668 1669 1670
}

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

Marc Duez's avatar
Marc Duez committed
1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683
#db_header{
    height:20px;
}

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

#db_table_container{
Marc Duez's avatar
Marc Duez committed
1684
    overflow-y: scroll;
1685
    overflow-x: hidden;
Marc Duez's avatar
Marc Duez committed
1686
    height: 100%;
Marc Duez's avatar
Marc Duez committed
1687 1688 1689
    position: relative;
}

1690 1691 1692 1693
#db_fixed_header {
    position: absolute;
    top: 0px;
    background: @highlight;
1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707
}

.db_help_desc {
    margin-left: 150px;
}

.db_help_action {
    margin-left: 10px;
    font-weight: bold;
}

.db_help_p {
    margin-top: 20px;
    margin-left: 20px;
1708 1709
}

Marc Duez's avatar
Marc Duez committed
1710 1711 1712 1713 1714 1715
.summary_filename {
    width: 200px;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    overflow-wrap: break-word;