Mise à jour terminée. Pour connaître les apports de la version 13.8.4 par rapport à notre ancienne version vous pouvez lire les "Release Notes" suivantes :
https://about.gitlab.com/releases/2021/02/11/security-release-gitlab-13-8-4-released/
https://about.gitlab.com/releases/2021/02/05/gitlab-13-8-3-released/

vidjil.less 28.8 KB
Newer Older
1 2 3 4 5

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


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


17 18 19 20 21
html{
  height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 1160px;
Marc Duez's avatar
Marc Duez committed
22
  min-height: 250px
23 24 25
}

body {
Marc Duez's avatar
Marc Duez committed
26
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
27
  font-size: 13px;
28 29 30
  height : 100%;
  margin:0px;
  color : @default;
31
  background : @border;
32 33
}

34 35 36

/* texts that are not sequences nor identifiers */

37
#info, .popup_msg, .menu, .menu a
38 39 40 41 42 43 44 45 46 47 48
{
  font-family: ubuntulight, Arial, Helvetica, Sans-serif;
}

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



49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
h2
{
  margin-top: 2px;
}

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

#visu-container{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  height :100%;
67 68
  margin : auto;
  overflow : hidden;
69
  background : @background;
70 71 72 73 74
}

#top-container {
  height: 28px;
  width: 100%;
75
  background: @background;
Marc Duez's avatar
Marc Duez committed
76 77
  position : fixed;
  z-index:1;
78 79
}

80 81 82 83 84 85 86 87 88
.scatterplot, .graph{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
}

89
#mid-container {
Marc Duez's avatar
Marc Duez committed
90
  position : fixed;
91
  top : 28px;
Marc Duez's avatar
Marc Duez committed
92
  bottom : 125px ;
93 94 95
  width: -moz-calc(~"100%" - @margin + @margin);
  width: -webkit-calc(~"100%" - @margin + @margin);
  width: calc(~"100%" - @margin + @margin);
96 97
  overflow: hidden;
  background: @background;
98
  margin: @margin;
99 100
}

101 102 103 104 105 106 107 108
#right-container{
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  float : right;
  width : 0px;
109 110 111 112 113 114
}

#left-container {
  height:100%;
  width : @width_left_container;
  float : left;
115
  overflow-y : none;
116 117 118 119 120
  -khtml-user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
121
  display : table;
122 123 124 125
}

#visu, #visu2 {
  height : 50%;
126
  width : 100%;
127 128
}

129 130 131 132
#visu2 {
max-height: calc(~"100%" - @margin)
}

133 134 135 136 137
line {
  stroke: @secondary;
  stroke-width: 0.5;
}

138 139
                        /* left-container - info */

140 141 142 143 144
#info-row{
    height : 200px;
    display : table-row;
}

145
#info{
146
  font-family: ubuntumedium, Arial, Helvetica, Sans-serif;
147
  font-size: 13px;
148
  padding:3px;
149
  background : @background;
150
  display : table-cell;
151 152
}

153 154 155 156 157 158 159 160 161 162 163 164
.info_line {
    border-bottom: solid;
    border-bottom-width: 1px;
    border-color: @border;
}

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

165 166
.info_row_content {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
167
    width : 345px;
168 169
}

170 171 172 173 174 175 176 177
#info_point {
    margin-top: 15px;
}

#info_data_file
{
  font-size: 200%;
}
178 179 180 181 182 183 184 185

						  /*Style polyline / graph*/

.background_graph{
  fill : @background
}

.background_graph2{
186
  fill : @background
187 188 189 190 191
}

.graph_line{
  stroke-width : 2.5px;
  cursor:pointer;
192
  stroke: @default;
193 194
}

Marc Duez's avatar
Marc Duez committed
195 196 197 198 199 200 201 202 203 204 205
.graph_data{
    fill: none;
    stroke-width: 8px;
    opacity: 0.3;
    cursor:pointer;
}

.graph_data:hover{
    opacity:0.8;
}

206 207 208 209 210 211 212 213 214 215
.graph_inactive{
  stroke-width : 1.5px;
  cursor:pointer;
  display:none;
}

.graph_select{
  stroke-width : 5px;
  cursor:pointer;
  stroke-dasharray : 20px,5px ;
216
  stroke: @default;
217 218 219 220 221
}

.graph_focus{
  stroke-width : 5px;
  cursor:pointer;
222
  stroke: @select;
223 224
}

Marc Duez's avatar
Marc Duez committed
225
.axis_m{
Marc Duez's avatar
Marc Duez committed
226
  stroke : @default ;
227 228 229 230 231
  opacity : 0.5 ;
  stroke-width : 20px;
}

.axis_h{
Marc Duez's avatar
Marc Duez committed
232
  stroke : @default ;
233 234 235
}

.axis_v{
236
 display: none;
237 238
}

Marc Duez's avatar
Marc Duez committed
239 240 241 242
.axis_v_hidden{
 display: none;
}

243 244 245 246 247 248 249 250 251 252
.axis_button, .axis_leg{
  fill : @default;
}

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

#resolution5{
253 254
    fill: @border;
    opacity: 0.6;
255 256
}

257
.graph_time{
258 259 260 261 262 263
  fill : @default ;
  text-anchor:middle;
  font-size : 100%;
}

.graph_time2{
264
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
265
  fill : @default ;
266
  text-anchor:middle;
267
  font-size : 120%;
268 269
}

270 271
.graph_text{
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
272
  fill : @default ;
273
  text-anchor:end;
274
  dominant-baseline: middle;
275 276
}

277 278 279 280 281
.graph_text2{
  font-weight : bold;
  fill : @default ;
}

282 283 284 285 286
.graph_time:hover{
  cursor:pointer;
  fill : @select;
}

287 288
.graph_menu{
  position: absolute;
289 290
  top: 0px;
  right: 0px;
Marc Duez's avatar
Marc Duez committed
291 292
  min-width: 22px;
  min-height: 18px;
293
  text-align: center;
294 295
  border-bottom: solid;
  border-left: solid;
296 297 298
  border-color: @border;
  background : @background;
}
299 300 301 302 303 304

.graph_list{
  display: none;
}

.graph_listElem:hover{
305
  background : @border;
306
  width: 100%;
Marc Duez's avatar
Marc Duez committed
307
  cursor: move;
308
  cursor: webkit-grab;
309 310
}

311

312 313 314 315 316 317 318 319 320 321 322 323
							  /*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;
324
  fill : @default;
325
  stroke-width:4px;
326 327 328 329 330 331 332 333 334 335 336
}

.circle_inactive{
  cursor:pointer;
  opacity: 0.5
}

.circle_select{
  stroke-width : 2.5px;
  stroke : @select;
  cursor:pointer;
337
  fill : @default;
338 339 340 341
}

.circle_focus{
  cursor:pointer;
342
  fill : @select;
343 344 345 346 347 348 349
}

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

350 351 352 353 354 355 356 357 358
.line_active {
  opacity: 1;
  stroke-width: 4px;
}

.line_inactive {
  display: none;
}

359
.sp_legend{
Marc Duez's avatar
Marc Duez committed
360
  fill : @default ;
361 362
  font-weight : bold;
  text-anchor : middle;
363
  dominant-baseline: middle;
364 365
}

Marc Duez's avatar
Marc Duez committed
366 367
.sp_system{
  position:absolute;
Marc Duez's avatar
Marc Duez committed
368
  top: -0.5em;
Marc Duez's avatar
Marc Duez committed
369 370
}

Marc Duez's avatar
Marc Duez committed
371
.sp_system_label{
Marc Duez's avatar
Marc Duez committed
372
  color : @default ;
Marc Duez's avatar
Marc Duez committed
373
  font-weight : bold;
Marc Duez's avatar
Marc Duez committed
374 375
  height:0px;
  position:relative;
Marc Duez's avatar
Marc Duez committed
376 377
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
Marc Duez's avatar
Marc Duez committed
378 379 380
}

.sp_system_label:hover{
Marc Duez's avatar
Marc Duez committed
381
  color : @select ;
Marc Duez's avatar
Marc Duez committed
382 383 384
  cursor: pointer;
}

385
.sp_rotated_legend{
Marc Duez's avatar
Marc Duez committed
386
  fill : @default ;
387 388 389 390
  font-weight : bold;
  text-anchor : left;
}

Marc Duez's avatar
Marc Duez committed
391 392 393 394 395 396 397 398 399 400
.sp_legend_focus{
  fill : @select;
  font-weight : bold;
  text-anchor : middle;
}

.sp_hidden_legend{
  display : none;
}

401
.sp_line , .sp_subline{
Marc Duez's avatar
Marc Duez committed
402
  stroke : @default ;
403 404 405 406 407 408 409 410 411 412 413
}

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

.sp_subline_hidden{
  stroke-width : 0px;
}

414
							  /*style list/data element*/
415 416 417 418 419


/*Metric*/

@width_left_container : 475px;
420
@width_highlight : 250px;
Mathieu Giraud's avatar
Mathieu Giraud committed
421
@width_stats: 250px;
422 423 424 425 426
@width_scrollbar : 30px;
@width_clusterBox :16px;
@width_starBox : 16px;
@width_sizeBox : 60px;
@width_infoBox : 20px;
427
@width_systemBox : 13px;
428
@width_listElem : (@width_left_container - @width_scrollbar);
429
@margin : 6px;
430
@margin_nameBox : 10px;
431
@width_nameBox : (@width_listElem - @width_starBox - @width_infoBox - @width_sizeBox - @width_clusterBox - @margin_nameBox - @width_systemBox);
432 433


Marc Duez's avatar
Marc Duez committed
434
.list:hover, .tagElem:hover, .data:hover{
435
  background :@border;
436 437
}

Marc Duez's avatar
Marc Duez committed
438 439 440 441 442 443
#list, #data{
    border-top: solid;
    border-width: @margin;
    border-color : @border;
}

444 445 446 447 448 449 450 451 452
#list-row, #data-row{
  display: table-row;
}

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

#data-row{
Marc Duez's avatar
Marc Duez committed
453
  height : 0.1px;
Marc Duez's avatar
Marc Duez committed
454 455 456 457 458
}

#list_clones{
  overflow-y : scroll;
  overflow-x : hidden;
459
  height : calc(~"100% - 30px");  /*100% - list_menu height */
460 461 462
  padding:2px;
}

Marc Duez's avatar
Marc Duez committed
463
#list_data{
464 465 466 467
    display: block;
    border-width: 4px;
    border-color: @border;
    overflow-y: scroll;
Marc Duez's avatar
Marc Duez committed
468 469 470 471 472 473 474 475 476 477 478 479
}

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

.data_value{
}

480 481 482 483
.data {
    padding-right: 30px;
}

484
.list{
485
  width : 	445px;
486 487 488 489 490 491
  display :	block;
  padding : 	2px;
}

.listElem{
  width : @width_listElem;
492
  font-size: 13px;
493 494 495 496 497 498
  cursor:pointer;
  -webkit-transition: color 0.2s;
  -o-transition: color  0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
  font-weight : bold;
499
  padding: 1px 4px 4px 1px;
500 501 502 503 504 505 506
  height :14px;
}

.selected{
  color : @select;
}

507
.nameBox {
508
  width: 300px;
509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532
  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;
533
  overflow: hidden;
534 535 536 537 538 539 540 541 542
}

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

544 545
}

546
.systemBox, .systemBoxMenu {
547 548
    display: inline-block;
    width: @width_systemBox;
549
    height: 13px;
550 551 552
    text-align: center;
    border-radius: 3px;
    border-width: 1px;
553 554
    margin: 4px;
    margin-top: 2px;
555 556
    color: @select;
    font-family: monospace;
557
    font-size: 80%;
558
    background: @border;
559 560
}

561 562 563 564 565 566
.systemBox {
    float: left;
}

.systemBoxNameMenu {
    display: inline-block;
Marc Duez's avatar
Marc Duez committed
567
    min-width: 70px;
Marc Duez's avatar
Marc Duez committed
568
    height: 20px;
Marc Duez's avatar
Marc Duez committed
569
    cursor : pointer;
570 571
}	      

Marc Duez's avatar
Marc Duez committed
572 573 574
.hiddenCheckBox {
    display : none;
}
575

576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602
.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;
}

603 604 605 606 607
.list_sort{
    margin-right : 30px;
    float: right;
}

608 609
							  /*style segmenter element*/
.list_select{
Marc Duez's avatar
Marc Duez committed
610
  width : 445px;
611 612 613 614 615 616 617 618 619 620 621
  display : block;
  border : solid;
  border-width : 2px;
  padding : 0px;
  border-color : @select;
}

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

622 623 624 625
.sequence-line:hover{
    font-weight: bold;
}

626
.seq-fixed {
627 628
  position: relative;
  display: inline-block;
629
  width: (@width_left_container - @width_scrollbar);
630 631
  margin: -2px;
  padding: 2px;
632 633 634 635 636 637 638 639 640
  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
641
  font-family : monospace, ubuntu_monobold, Courier New,monaco,terminal,courier,system; 
Marc Duez's avatar
Marc Duez committed
642
  position: relative;
643
  bottom: 3px;
644
  font-size:1em;
645 646
}

647 648 649
.seq-marge {
  word-spacing: normal;
}
650 651 652 653

.V {
  color: #ffb300;
}
Marc Duez's avatar
Marc Duez committed
654
.D {
655 656 657 658
  color: #c7007d;
}
.J {
  color: #009b95;
Marc Duez's avatar
Marc Duez committed
659
}
Mathieu Giraud's avatar
Mathieu Giraud committed
660 661

.highlight_border, .highlight_seq {
Marc Duez's avatar
Marc Duez committed
662 663 664
    display: inline-flex;
    height: 1em;
    position: relative;
Mathieu Giraud's avatar
Mathieu Giraud committed
665 666 667
}
.highlight_border {
    border-bottom: solid;
Marc Duez's avatar
Marc Duez committed
668
    margin: -1px;
669
    border-width: 4px;
Marc Duez's avatar
Marc Duez committed
670 671 672 673 674 675
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
676 677
    opacity: 0.3;
    bottom: 1px;
Marc Duez's avatar
Marc Duez committed
678
}
Mathieu Giraud's avatar
Mathieu Giraud committed
679 680 681 682 683 684 685 686 687
.highlight_seq {
  top: .9em;
  padding-bottom: 1px;
  opacity: 0.6;

  font-size: 70%;
  letter-spacing: .428em; /* (1-.7) / .7 */
  left: .214em;
}
688 689 690 691 692
.highlight{
    display: inline-block;
    width: 0px;
    word-spacing: normal;
}
Marc Duez's avatar
Marc Duez committed
693
span .substitution{
Marc Duez's avatar
Marc Duez committed
694
    background-color : @border;
Marc Duez's avatar
Marc Duez committed
695
}
Marc Duez's avatar
Marc Duez committed
696

697 698
							  /*tag*/

Marc Duez's avatar
Marc Duez committed
699
.tagSelector{
700 701 702 703 704 705 706
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  top: 195px;
  width:220px;
  border:solid;
  display:none;
Marc Duez's avatar
Marc Duez committed
707
  background: @background;
708 709
}

Marc Duez's avatar
Marc Duez committed
710
.dataMenu{
711 712 713 714 715 716 717 718 719 720
  padding: 5px;
  position: absolute;
  left: @width_left_container;
  bottom: 195px;
  width:220px;
  border:solid;
  display:none;
    background: @background;
}

721 722 723 724 725 726 727 728 729 730 731 732
.tagElem{
  margin:1px;
  height: 20px;
}

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

.tagColorBox {
Mathieu Giraud's avatar
Mathieu Giraud committed
733 734 735
  margin-right: 5px;
  height: 14px;
  width: 14px;
736 737 738
  display: inline-block;
  cursor:pointer;
  user-select :none;
Mathieu Giraud's avatar
Mathieu Giraud committed
739 740
  margin-bottom: -3px;
  margin-top: 3px;
741 742
}

743 744 745 746
#normalized_size {
    width: 80px;
}

747 748 749 750 751 752 753 754
							  /*menu*/

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

757 758 759 760 761 762

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

763 764 765 766 767 768 769 770 771 772 773 774
.submenu{
    width: 200px;
    display: inline-table;
}

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

Marc Duez's avatar
Marc Duez committed
776 777
.submenu{
    width: 200px;
778
    display: inline-table;
Marc Duez's avatar
Marc Duez committed
779 780 781 782 783 784 785 786 787 788
}

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

789
#file_menu, #axis_choice{
790 791 792 793 794 795 796
  z-index:2;
  border:solid; 
  position: fixed; 
  top: 200px; 
  min-width:400px;
  margin-left:-250px;
  left :50%;
797
  font-size: 13px; 
798
  padding: 10px;
799
  background:@background;
800 801 802 803 804 805
  display:none; 
}

.buttonSelector {
  background : @background;
  cursor:pointer;
806
  font-size: 13px;
807 808 809 810 811
  margin :2px;
  display:block;
  text-align:left;
}

Mathieu Giraud's avatar
Mathieu Giraud committed
812
.systemBoxNameMenu:hover, .focus_selected:hover, .button:hover,.button_right:hover, .buttonSelector:hover, .button2:hover{
813
  background : @border;
814
  color : @select;
Mathieu Giraud's avatar
Mathieu Giraud committed
815
  cursor: pointer;
816 817 818 819 820 821
}


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


822
.popup_container{
823
  z-index:20;
824 825 826 827 828
  border:solid; 
  position: fixed; 
  top: 250px; 
  left:50% ;
  width:500px;
829
  font-size: 13px; 
830 831 832 833 834 835 836 837
  padding: 10px;
  background: @background;
  display:none;
  left: -moz-calc(~"50% - 250px");
  left: -webkit-calc(~"50% - 250px");
  left: calc(~"50% - 250px");
}

838
.popup_container a {
839 840
  text-decoration: none;
  font-weight: bold;
Marc Duez's avatar
Marc Duez committed
841
  color: @default ;
842 843
}

844
.popup_container a:hover{
845 846 847 848 849 850 851 852 853
  color : @select;
}

#data-container{
  z-index:3;
  border:solid; 
  position: fixed; 
  top: 50px; 
  left: 20px + @width_left_container;
854
  font-size: 13px; 
855
  padding: 10px;
Marc Duez's avatar
Marc Duez committed
856
  background: @background;
857 858 859 860 861 862 863 864 865 866 867 868 869 870 871
  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
872
#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896
 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;
}

897
.button, .button_right{
898
  cursor:pointer;
899
  font-size: 13px;
Marc Duez's avatar
Marc Duez committed
900
  padding: 0px 3px;
901 902
  margin-right:5px;
  margin-left:5px;
Marc Duez's avatar
Marc Duez committed
903
  min-width : 16px;
Marc Duez's avatar
Marc Duez committed
904
  color: @default;
Marc Duez's avatar
Marc Duez committed
905 906
}

907 908 909 910
.button_right{
    float: right;
}

Marc Duez's avatar
Marc Duez committed
911 912 913 914 915 916 917 918
.button2 {
    border: solid;
    border-width: 1px;
    padding: 3px;
    margin: 3px;
    display: inline-block;
    cursor: pointer;
    background: @border;
Marc Duez's avatar
Marc Duez committed
919
    width: auto;
Marc Duez's avatar
Marc Duez committed
920
    text-align: center;
Marc Duez's avatar
Marc Duez committed
921 922
    padding-left: 10px;
    padding-right: 10px;
923 924 925 926
}

.smallbutton {
    cursor:pointer;
927
    font-size: 13px;
928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948
    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
949 950 951 952 953 954 955 956 957 958 959 960
.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
961
.menu-segmenter {
Marc Duez's avatar
Marc Duez committed
962 963 964 965 966
    position: relative;
    float: left;
    width: @width_left_container;
}

967
.menu-highlight {
Mathieu Giraud's avatar
Mathieu Giraud committed
968
    display: none;
969 970 971 972 973
    position: relative;
    float: left;
    width: @width_highlight;
}

Marc Duez's avatar
Marc Duez committed
974 975 976
.focus {
    position: relative;
    text-align: center;
977
    float: left;
978 979 980
    width: -moz-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
    width: calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
981 982
    overflow: hidden;
    height: 1em;
Mathieu Giraud's avatar
Mathieu Giraud committed
983 984 985 986 987 988 989
}
.stats {
  position: relative;
  text-align: right;
  float: right;
  width: @width_stats - 3px;
  padding-right: 3px;
Marc Duez's avatar
Marc Duez committed
990 991
}

992
.segmenter {
993
    overflow-x: scroll !important; 
994
    overflow-y: auto;
Marc Duez's avatar
Marc Duez committed
995
    height : 100px;
996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010
}

.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;
1011
  overflow: hidden;
1012 1013 1014 1015
}

#bot-container {
  position: fixed;
1016
  bottom: 0px;
1017 1018
  left: 0px;
  width: 100%;
1019 1020 1021
  border-top: solid;
  border-width: 6px;
  min-height: 125px;
1022 1023 1024 1025 1026 1027 1028
}

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

Marc Duez's avatar
Marc Duez committed
1029
#list_menu{
1030 1031 1032 1033 1034 1035 1036 1037
  -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
1038
  border-bottom-width: 2px;
1039 1040
}

Mathieu Giraud's avatar
Mathieu Giraud committed
1041 1042 1043 1044 1045
#filter_input
{
  width: 200px;
}

1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064
.tagD{
  margin-left: 15px;
  width: 25px;
  display : inline-block;
  float : right;
}

.center{
  text-align: center;
}

.gradient{
  background: rgb(61,36,182); 
  background: -moz-linear-gradient(left, rgb(61,36,182) 0%, rgb(36,72,181) 10%, rgb(36,135,184) 20%, rgb(36,183,171) 30%, rgb(36,184,110) 40%, rgb(36,183,48) 50%, rgb(85,184,36) 60%, rgb(146,183,36) 70%, rgb(184,159,36) 80%, rgb(178,95,35) 90%, rgb(184,36,36) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(61,36,182)), color-stop(10%,rgb(36,72,181)), color-stop(20%,rgb(36,135,184)), color-stop(30%,rgb(36,183,171)), color-stop(40%,rgb(36,184,110)), color-stop(50%,rgb(36,183,48)), color-stop(60%,rgb(85,184,36)), color-stop(70%,rgb(146,183,36)), color-stop(80%,rgb(184,159,36)), color-stop(90%,rgb(178,95,35)), color-stop(100%,rgb(184,36,36))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* IE10+ */
  background: linear-gradient(to right, rgb(61,36,182) 0%,rgb(36,72,181) 10%,rgb(36,135,184) 20%,rgb(36,183,171) 30%,rgb(36,184,110) 40%,rgb(36,183,48) 50%,rgb(85,184,36) 60%,rgb(146,183,36) 70%,rgb(184,159,36) 80%,rgb(178,95,35) 90%,rgb(184,36,36) 100%); /* W3C */
Mathieu Giraud's avatar
Mathieu Giraud committed
1065
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d24b6', endColorstr='#b82424',GradientType=1 )"; /* IE6-9 */
1066
  width :180px;
Mathieu Giraud's avatar
Mathieu Giraud committed
1067 1068
  height: 8px;
  margin-top: 4px;
1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091
  display: inline-block;
}

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

#test_result{
  font-family : Courier New,monaco,terminal,courier,system; 
  font-weight: bold;
  position: absolute;
  width: 100%;
  top: 0px;
  height: 100%;
  background: rgba(0,0,0,0.5);
  padding: 25px;
  color: grey;
}

Marc Duez's avatar
Marc Duez committed
1092
.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, .popup_container, #file_menu, .tagSelector, .closeButton, #axis_choice
1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108
{
  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
1109
#info_timepoint td{
1110 1111
  min-width : 150px;
  max-width : 700px;
Marc Duez's avatar
Marc Duez committed
1112 1113 1114 1115 1116 1117 1118 1119 1120
  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{
1121 1122 1123 1124 1125
  border-style:solid;
  border-color: @border;
  border-collapse: collapse;
}

Marc Duez's avatar
Marc Duez committed
1126
#info_window table .header, #info_timepoint table .header{
1127
  border-width : 2px;
1128
  background-color: @border;
1129 1130
}

1131 1132 1133 1134
span.warning { color: orange; }
text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
Mathieu Giraud's avatar
Mathieu Giraud committed
1135

1136
.sp_menu_anchor{
Marc Duez's avatar
Marc Duez committed
1137 1138 1139 1140 1141 1142 1143
    position: relative;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

1144
.sp_menu{
Marc Duez's avatar
Marc Duez committed
1145 1146 1147 1148 1149 1150 1151 1152 1153 1154
    min-width: 22px;
    min-height: 18px;
    border-bottom: solid;
    border-right: solid;
    border-color: @border;
    background : @background;
    display: inline-block;
    padding : 2px;
}

1155
.sp_menu_content{
Marc Duez's avatar
Marc Duez committed
1156 1157 1158 1159 1160 1161 1162 1163 1164 1165
    padding: 0px;
    width: 0px; 
    height: 0px; 
    opacity: 0;
    font-size: 0%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.2s;
}

1166 1167
.sp_menu:hover .sp_menu_content,
.sp_menu_content:focus {
Marc Duez's avatar
Marc Duez committed
1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204
    padding: 8px 0px 0px 0px;
    width: 180px; 
    height: 130px;
    font-size: 100%;
    opacity: 1;
}

.sp_menu_mode{
    display: flex;
}

.sp_menu_icon{
    width: 40px;
    padding: 2px 2px 0px 2px;
    border: solid;
    border-width: 2px;
    border-radius: 5px;
    margin: 5px auto;
    border-color : @background;
}

.sp_menu_icon:hover{
    background : @border;
}

.sp_selected_mode{
    border-color : @default;
}

.sp_menu_icon svg{
    fill: @default;
}

.sp_menu_icon svg:hover{
    fill: @highlight;
}

1205 1206 1207 1208 1209 1210 1211
.sp_selector{
    fill: @select;
    stroke-width: 2px;
    stroke: @select;
    fill-opacity: 0.2;
}

Marc Duez's avatar
Marc Duez committed
1212 1213 1214 1215 1216
.axis_select {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
1217 1218

.axis_select select {
1219
    background: @background;
1220
    color: @default;
Marc Duez's avatar
Marc Duez committed
1221 1222
    height: 20px;
    width: 120px;
1223
    -webkit-appearance: none;
1224
    border: solid;
Marc Duez's avatar
Marc Duez committed
1225 1226 1227
    border-width: 1px;
    border-radius: 2px;
    margin: 2px auto;
1228 1229 1230 1231 1232
}

.axis_select_graph {
    top: 0px;
    display: none;
1233 1234 1235 1236 1237
}

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

#visu-separator {
1240
    height: @margin;
1241
    cursor: move;
Marc Duez's avatar
Marc Duez committed
1242
    cursor: -webkit-grab;
1243
    background: @border;
Marc Duez's avatar
Marc Duez committed
1244
}
1245

1246 1247 1248 1249 1250 1251 1252 1253 1254
#bot-separator {
    background: @border;
    width: 100%;
    height: @margin;
    cursor: pointer;
    position: relative;
    top: -@margin;
}

1255 1256 1257 1258
#vertical-separator {
    position: relative;
    float: left;
    height: 100%;
1259
    width: @margin;
Marc Duez's avatar
Marc Duez committed
1260
    line-height: calc(~"100% - 1px");
1261
    background : @border;
Marc Duez's avatar
Marc Duez committed
1262
    cursor: pointer;
1263 1264
}

1265
#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
1266
    background: @highlight;
1267
}
Marc Duez's avatar
Marc Duez committed
1268 1269 1270 1271 1272 1273

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

1275
.db_div{
Marc Duez's avatar
Marc Duez committed
1276
  z-index:5;
1277 1278
  border:solid; 
  position: fixed; 
Marc Duez's avatar
Marc Duez committed
1279
  top: 20px;
1280
  left:50% ;
Marc Duez's avatar
Marc Duez committed
1281 1282
  width:80%;
  height: calc(~"100% - 50px");
1283 1284 1285
  font-size: 14px; 
  background: @background;
  display:none;
Marc Duez's avatar
Marc Duez committed
1286
  left: 10%;
1287
}
1288

1289
.db_msg{
Marc Duez's avatar
Marc Duez committed
1290
    margin : 15px;
Marc Duez's avatar
Marc Duez committed
1291 1292 1293 1294
    height : calc(~"100% - 30px")
}

#db_content{
1295
    height : calc(~"100% - 160px");