vidjil.less 25.2 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
  text-anchor:end;
254
  dominant-baseline: middle;
255 256
}

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

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

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

.graph_list{
  display: none;
}

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

291

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

.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;
}

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

.line_inactive {
  display: none;
}

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

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

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

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

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

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

.sp_hidden_legend{
  display : none;
}

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

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

.sp_subline_hidden{
  stroke-width : 0px;
}

392
							  /*style list/data element*/
393 394 395 396 397


/*Metric*/

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


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

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

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

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

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

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

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

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

.data_value{
}

457 458 459 460
.data {
    padding-right: 30px;
}

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

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

.selected{
  color : @select;
}

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

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

521 522
}

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

538 539 540 541 542 543
.systemBox {
    float: left;
}

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

Marc Duez's avatar
Marc Duez committed
549 550 551
.hiddenCheckBox {
    display : none;
}
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 580 581
.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
582
  width : 445px;
583 584 585 586 587 588 589 590 591 592 593
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

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

594 595 596 597
.sequence-line:hover{
    font-weight: bold;
}

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

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

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
627
.D {
628 629 630 631
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
632
}
Marc Duez's avatar
Marc Duez committed
633 634 635
.window1{
    display: inline-block;
    width: 0px;
636
    word-spacing: normal;
Marc Duez's avatar
Marc Duez committed
637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653
}
.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
654
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
655
}
Marc Duez's avatar
Marc Duez committed
656

657 658 659 660 661 662 663 664 665 666 667 668
							  /*tag*/

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

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

680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701
.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;
}

702 703 704 705
#normalized_size {
    width: 80px;
}

706 707 708 709 710 711 712 713
							  /*menu*/

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

716 717 718 719 720 721

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

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

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

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

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

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

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

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


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


#popup-container{
781
  z-index:20;
782 783 784 785 786
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
787
  font-size: 13px; 
788 789 790 791 792 793 794 795 796 797 798
  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
799
  color: @default ;
800 801 802 803 804 805 806 807 808 809 810 811
}

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

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

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

865 866 867 868
.button_right{
    float: right;
}

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

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

.focus {
    position: relative;
    text-align: center;
928
    float: left;
Mathieu Giraud's avatar
Mathieu Giraud committed
929 930 931 932 933 934 935 936 937 938
    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
939 940 941
}

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

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

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

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

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

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

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 1038 1039
.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;
}

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

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

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

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


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

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

.axis_select_x {
1108
    display: block;
1109
}
1110

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

.axis_select_graph {
    top: 0px;
    display: none;
1119 1120 1121 1122 1123
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257
.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{
1258
    background: @border;
1259 1260 1261 1262 1263 1264
}

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

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

#db_menu{
    float: left;
}

#db_auth{
    float: right;
}

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

1284 1285 </