fdds/css/fdapp.css

   1 /* app css stylesheet */
   2
   3 /* ====== Table of Contents ======
   4           1. Body
   5           2. CatalogMenu
   6           3. CatalogItems
   7           4. DomainSelector
   8           5. LayerController
   9           6. InfoPanel
  10           7. SimulationController
  11           8. Slider
  12           9. TimeSeriesChart
  13
  14   mobile style follows the form: component-mobile, for example: CatalogMenu-mobile
  15 */
  16
  17 /* ===== Body ===== */
  18 html {
  19   margin-top:0;
  20   height: 100%;
  21   overflow-y: hidden;
  22 }
  23
  24 h4 {
  25   margin: 0;
  26 }
  27
  28 .body {
  29   font-family: helvetica;
  30 }
  31
  32 #hideMenu {
  33     position: absolute;
  34     top: 3px;
  35     left: 5px;
  36 }
  37
  38 .feature-controller {
  39     background:#e8e8e8;
  40     color: #5d5d5d;
  41     border: none;
  42     border-radius: .4rem;
  43     z-index: 8000;
  44 }
  45
  46 .mobile-button {
  47   display: none;
  48   position: fixed;
  49   padding: 0 5px 0 5px;
  50   line-height: 40px;
  51   font-size: 1.15rem;
  52   text-align: center;
  53   color: #5d5d5d;
  54   height: 40px;
  55   left: 140px;
  56   top: 20px;
  57 }
  58
  59 .svgIcon {
  60     margin: 0;
  61     padding: 0;
  62     height: 24px;
  63     width: 24px;
  64 }
  65
  66 .splash {
  67   position: fixed;
  68   line-height: 90vh;
  69   font-size: 1rem;
  70   top:0;
  71   left: 0;
  72   width: 100%;
  73   height: 100vh;
  74   background: white;
  75   z-index: 9999;
  76   color: black;
  77   text-align: center;
  78   font-family: Helvetica;
  79 }
  80
  81 .leaflet-popup-tip-container {
  82   display: none;
  83   width: 0px;
  84   height: 0px;
  85   border: 0px;
  86 }
  87
  88 .hidden {
  89   display: none;
  90   z-index: -10;
  91 }
  92
  93 .round-border {
  94   border-radius: 4px;
  95 }
  96
  97 .clicked {
  98   display: block;
  99 }
 100
 101 .interactive-button {
 102   opacity: 50%;
 103   cursor: pointer;
 104 }
 105
 106 .interactive-button:hover {
 107   opacity: 100%;
 108 }
 109
 110 @keyframes fadeIn {
 111   to{
 112     opacity: 1;
 113   }
 114 }
 115
 116 .fade-in {
 117   opacity: 0;
 118   animation: fadeIn .6s ease-in forwards;
 119 }
 120
 121 #map-fd {
 122   position: absolute;
 123   left: 0;
 124   right: 0;
 125   top: 0;
 126   bottom: 0;
 127 }
 128
 129 body.waiting * {cursor: wait !important;}
 130
 131 body.grabbing * {cursor: grabbing !important;}
 132
 133 #map-domains {
 134   height: 400px;
 135   width: 500px;
 136   margin-left: auto;
 137   margin-right: auto;
 138
 139 }
 140
 141 #map-patch-springs {
 142   height: 500px;
 143   width: 500px;
 144   margin-left: auto;
 145   margin-right: auto;
 146 }
 147
 148 div.control-column {
 149   background: #eef7f7;
 150   height: 600px;
 151 }
 152
 153 .ui.segment.wt-text {
 154   min-width: 800px;
 155   max-width: 1000px;
 156   margin-left: auto;
 157   margin-right: auto;
 158 }
 159
 160 html, body {
 161   height: 100vh;
 162 }
 163
 164 #raster-colorbar-bg {
 165   position: fixed;
 166   z-index: 1999;
 167   left: 60px;
 168   bottom: 103px;
 169   width: 200px;
 170   height: 350px;
 171   background-color: white;
 172   border-radius: .4rem;
 173 }
 174
 175 #raster-colorbar {
 176   position: fixed;
 177   left: 60px;
 178   bottom: 103px;
 179   width: 200px;
 180   height: 400px;
 181   z-index: 2000;
 182 }
 183
 184 #copyLink {
 185   position: fixed;
 186   padding: 10px;
 187   top: 155px;
 188   left: 20px;
 189   font-size: 1rem;
 190   font-weight: bold;
 191 }
 192
 193 #copyLink:hover {
 194   background: #ececec;
 195   cursor: pointer;
 196 }
 197
 198 #simulation-flags {
 199   position: fixed;
 200   top:15px;
 201   z-index:1000;
 202 }
 203
 204 .displayTest {
 205   display: block;
 206   color: #555555;
 207   position: relative;
 208   margin-top: 5px;
 209   width: 400px;
 210   left: 250px;
 211   padding-right: 10px;
 212   padding-left: 10px;
 213   background-color: #fdfd96;
 214   font-size: 125%;
 215   font-weight: bold;
 216   border-radius: 5px;
 217 }
 218
 219 #current-sim-label {
 220   background-color: #c3fffb;
 221 }
 222
 223 .mq-logo-control {
 224         display: none;
 225 }
 226
 227 .leaflet-top {
 228   margin-top: 215px !important;
 229   z-index: 5000 !important;
 230 }
 231
 232 .leaflet-left {
 233   margin-left: 10px !important;
 234 }
 235
 236 /* ===== CatalogMenu ===== */
 237 /* button Style */
 238 .catalog-button {
 239   height: 40px;
 240   position: fixed;
 241   left: 20px;
 242   top: 20px;
 243   display: grid;
 244   grid-template-columns: 40px 90px;
 245   place-items: center;
 246   font-size: 1.15rem;
 247   font-weight: bold;
 248   color: #5d5d5d;
 249 }
 250
 251 #catalog-menu-icon-container {
 252   display: grid;
 253   place-items: center;
 254   height: 100%;
 255   width: 100%;
 256   background:#d6d6d6;
 257   border-radius: .4rem 0 0 .4rem;
 258 }
 259
 260 .catalog-button:hover #catalog-menu-icon {
 261   opacity: 100%;
 262 }
 263
 264 /* Menu Style */
 265 .catalog-menu {
 266   position:absolute;
 267   padding: 5px;
 268   z-index: 9990;
 269   width: 600px;
 270   height: 440px;
 271   top: 15%;
 272   background:#f2f2f2;
 273   line-height: normal;
 274   font-size: 1rem;
 275 }
 276
 277 .menu-title {
 278   display: flex;
 279   padding: 8px;
 280   background:#f7af39;
 281   color: #ffffff;
 282   font-weight: bold;
 283   cursor: grab;
 284 }
 285
 286 #menu-close {
 287   position: absolute;
 288   right: 15px;
 289   color: #f7af39;
 290   background: #f2f2f2;
 291   width: 20px;
 292   height: 20px;
 293   text-align: center;
 294   cursor: pointer;
 295 }
 296
 297 .menu-columns {
 298   display: grid;
 299   grid-template-columns: 1fr 1fr 1fr;
 300   height: 330px;
 301   padding: 5px;
 302   margin-top:5px;
 303   overflow-y:auto;
 304 }
 305
 306 .search-header {
 307   display: grid;
 308   grid-template-columns: 1fr 1fr 1fr;
 309   width: 100%;
 310   margin-top: 7px;
 311 }
 312
 313 #mobile-selector {
 314   display: none;
 315 }
 316
 317 .column-header {
 318   font-weight: bold;
 319   font-size: 1.15rem;
 320 }
 321
 322 .column {
 323   width: 180px;
 324 }
 325
 326 .catalog-list {
 327   padding: 0px;
 328   word-wrap: break-word;
 329   cursor: pointer;
 330 }
 331
 332 /* ===== CatalogItems ===== */
 333 .catalog-entry {
 334   list-style-type: none;
 335   margin-bottom: 10px;
 336 }
 337
 338 .catalog-entry:hover {
 339   background-color: #fdfd96;
 340 }
 341
 342 .catalog-entry h3 {
 343   margin: 0px;
 344   font-size: 1rem;
 345 }
 346
 347 .catalog-entry a {
 348   color: black !important;
 349   text-decoration: none;
 350 }
 351
 352 .catalog-entry a:hover {
 353   text-decoration: underline;
 354 }
 355
 356 /* ===== DomainSelector ===== */
 357 #domain-selector {
 358   position: fixed;
 359   left: 20px;
 360   top: 70px;
 361   padding: 7px;
 362   font-weight: bold;
 363   line-height: 12px;
 364   font-size: 1rem;
 365 }
 366
 367 #domain-selector-label {
 368     padding: 10px 0px;
 369     text-align: center;
 370 }
 371
 372 #domain-checkboxes {
 373     height: 20px;
 374     padding: 0px 5px;
 375 }
 376
 377 .domain-checkbox {
 378     display: inline-block;
 379 }
 380
 381 .domain-checkbox input {
 382     cursor: pointer;
 383 }
 384
 385 .domain-checkbox label {
 386     margin-left: 10px;
 387     margin-right: 20px;
 388 }
 389
 390 /* ===== LayerController ===== */
 391 #layer-controller-container {
 392     position: absolute;
 393     right: 20px;
 394     top: 5%;
 395     width: 300px;
 396     max-height: 85%;
 397     background: white;
 398     font-size: 1.15rem;
 399     padding: 8px;
 400     overflow-y: auto;
 401 }
 402
 403 #layers-button {
 404     left: 70px;
 405 }
 406
 407 .layer-list {
 408     margin-left: 50px;
 409 }
 410
 411 /* ===== InfoPanel ===== */
 412 .close-panel {
 413   position: absolute;
 414   top: 3px;
 415   right: 15px;
 416   height: 10px;
 417   width: 10px;
 418   font-size: 1rem;
 419 }
 420
 421 .section-break {
 422   width: 100%;
 423   height: 1px;
 424   background: #5d5d5d;
 425 }
 426
 427 #copyLink {
 428   z-index: 7000;
 429 }
 430
 431 #infoButton {
 432   position: absolute;
 433   top: 20px;
 434   left: 180px;
 435   height: 40px;
 436   background: transparent;
 437 }
 438
 439 #infoPanel {
 440   display: none;
 441   padding: 5px 20px 15px 20px;
 442   position: absolute;
 443   margin: auto;
 444   height: 600px;
 445   background: white;
 446   width: 600px;
 447   z-index: 9990;
 448   left: 0;
 449   top: 0;
 450   bottom: 0;
 451   right: 0;
 452   overflow-y: auto;
 453   font-size: 1rem;
 454   border: 1px solid #5d5d5d;
 455   scrollbar-width: none;
 456 }
 457
 458 #infoPanel h2 {
 459   text-align: center;
 460 }
 461
 462 #infoPanel.hovered {
 463   display: block;
 464 }
 465
 466 #infoPanel.clicked {
 467   display: block;
 468 }
 469
 470 #infoSectionContainer {
 471   position: relative;
 472 }
 473
 474 .expand-collapse {
 475   position: absolute;
 476   opacity: 50%;
 477   top: 0px; right: 10px;
 478 }
 479
 480 .hover {
 481   opacity: 100%;
 482 }
 483
 484 .infoSectionHeader:hover {
 485   cursor: pointer;
 486 }
 487
 488 /* ===== SimulationController ===== */
 489 .slider-container {
 490   position: fixed;
 491   left: 20px;
 492   bottom: 30px;
 493   width: 360px;
 494   z-index: 4000;
 495   border-radius: 4px;
 496   background:#e8e8e8;
 497   padding: 6px;
 498   font-size: 1.15rem;
 499 }
 500
 501 #slider-header {
 502   display: block;
 503   height: 30px;
 504   width: 100%;
 505 }
 506
 507 #slider-play-bar {
 508   display: inline-block;
 509 }
 510
 511 #slider-timestamp {
 512   display: inline-block;
 513   height: 30px;
 514 }
 515
 516 #timestamp {
 517   font-weight: bold;
 518   color: #5d5d5d;
 519 }
 520
 521 .slider-button {
 522   display: inline-block;
 523   background:#d6d6d6;
 524   border: none;
 525   padding: 2px;
 526   height: 28px;
 527   border-radius: 4px;
 528   cursor: pointer;
 529   margin: 0;
 530 }
 531
 532 .slider-button:hover {
 533   background: #e5e5e5;
 534 }
 535
 536 .slider-icon {
 537   opacity: 50%;
 538 }
 539
 540 .disabled-button {
 541   opacity: 50%;
 542   cursor: grab;
 543 }
 544
 545 .disabled-button:hover {
 546   background:#d6d6d6;
 547 }
 548
 549 /* ====== Slider ====== */
 550 .slider {
 551   position: relative;
 552   padding-top: 5px;
 553   padding-bottom: 5px;
 554 }
 555
 556 .slider.simulation-slider {
 557   width: 340px;
 558 }
 559
 560 .slider.opacity-slider {
 561   width: 284px;
 562 }
 563
 564 .slider-bar {
 565   height: 11px;
 566   background: #e8e8e8;
 567   border-style: solid;
 568   border-radius: 4px;
 569   border-width: .5px;
 570   border-color: #cccccc;
 571   cursor: pointer;
 572 }
 573
 574 .slider-bar.simulation-slider {
 575   background: #d6d6d6;
 576 }
 577
 578 .slider-head {
 579   position: absolute;
 580   bottom: 3px; left: 0; right: 0;
 581   height: 15px;
 582   width: 15px;
 583   background: #f6f6f6;
 584   border-style: solid;
 585   border-radius: 4px;
 586   border-width: .5px;
 587   border-color: #dddddd;
 588   cursor: grab;
 589   z-index: 3000;
 590 }
 591
 592 .slider-head:hover {
 593   border-color: black;
 594 }
 595
 596 .slider-bar {
 597   height: 11px;
 598   background: #e8e8e8;
 599   border-style: solid;
 600   border-radius: 4px;
 601   border-width: .5px;
 602   border-color: #cccccc;
 603   cursor: pointer;
 604 }
 605
 606 #slider-progress {
 607   position:absolute;
 608   margin: auto 0;
 609   top: 0; bottom: 0; left: 0; right: 0;
 610   width: 1%;
 611   background: #f8f8f8;
 612   border-style: solid;
 613   pointer-events: none;
 614 }
 615
 616 #slider-marker-info {
 617   position: absolute;
 618   margin: 0 auto;
 619   top: 20px; bottom: 0; left: 0; right: 0;
 620   background: white;
 621   width: 160px;
 622   height: 20px;
 623   border-radius: .4rem;
 624   display: none;
 625   font-weight: bold;
 626   font-size: 1rem;
 627   padding: 5px 5px 8px 10px;
 628 }
 629
 630 #slider-marker-info.hovered {
 631   display: block;
 632 }
 633
 634 #slider-marker-info.clicked {
 635   display: block;
 636 }
 637
 638 .slider-marker {
 639   position: absolute;
 640   margin: auto 0;
 641   top: 0; bottom: 0; left: 0; right: 0;
 642   background: #5d5d5d;
 643   width: 4px;
 644   height: 11px;
 645   border-radius: 4px;
 646 }
 647
 648 #slider-end {
 649   left: 340px;
 650 }
 651
 652 .timeSeriesButton {
 653     border-radius: .2rem;
 654     padding: 5px;
 655     margin-bottom: 5px;
 656     background: #b6e2f0;
 657     text-align: center;
 658     color: #6a6a6a;
 659     font-weight: bold;
 660     width: 100%;
 661     border: none;
 662 }
 663
 664 #progressBar {
 665     border-radius: .2rem;
 666     margin-top: 5px;
 667     background: black;
 668     height: 10px;
 669     width: 100%;
 670     border: none;
 671 }
 672
 673 .timeSeriesButton:hover:not([disabled]) {
 674     cursor: pointer;
 675     background: #e5e5e5;
 676 }
 677
 678 .timeseries-select {
 679     display: inline-block;
 680     width: 55%;
 681     margin-bottom: 2px;
 682 }
 683
 684 .timeseries-select-label {
 685     display: inline-block;
 686     width: 40%;
 687 }
 688
 689 /* ===== TimeSeriesChart ===== */
 690 #fullContainer {
 691   z-index: 9000;
 692   position: absolute;
 693   width: 580px;
 694   height: 560px;
 695   left: 330px;
 696   right: 0;
 697   top: 5px;
 698   bottom: 0;
 699 }
 700
 701 #timeSeriesChartContainer {
 702   position: absolute;
 703   display: block;
 704   padding-right: 20px;
 705   padding-top: 10px;
 706   padding-left: 10px;
 707   padding-bottom: 85px;
 708   left: 0;
 709   /* right: 0; */
 710   top: 5px;
 711   bottom: 0;
 712   height: 550px;
 713   width: 560px;
 714   background: white;
 715   border-radius: .4rem;
 716   border: 1px solid #5d5d5d;
 717   cursor: pointer;
 718 }
 719
 720 #drag-container {
 721   display: inline-block;
 722   position: absolute;
 723   top: 8px;
 724   left: 15px;
 725   cursor: grab;
 726   margin-right: 5px;
 727 }
 728
 729 #undo-zoom {
 730   position: absolute;
 731   top: 8px;
 732   left: 40px;
 733 }
 734
 735 .layerCheckbox {
 736   margin-left: 15px;
 737   margin-top: 5px;
 738   font-size: 1rem;
 739 }
 740
 741 .popout-layer-box {
 742   border-top: 1px solid #5d5d5d;
 743   border-left: 1px solid #5d5d5d;
 744   background: #e8e8e8;
 745 }
 746
 747 #addLayers{
 748   padding: 10px;
 749   position: absolute;
 750   z-index: 9001;
 751   width: 100px;
 752   top:130px;
 753   left: -80px;
 754   border-right: 1px solid #5d5d5d;
 755   border-radius: .4rem .4rem 0 0;
 756   text-align: center;
 757   font-weight: bold;
 758   transform: rotate(-90deg);
 759 }
 760
 761 #layers-to-add {
 762   position: absolute;
 763   z-index: 9000;
 764   width: 250px;
 765   left: -251px;
 766   height: 400px;
 767   top: 39px;
 768   border-bottom: 1px solid #5d5d5d;
 769   border-radius: .4rem 0 0 .4rem;
 770 }
 771
 772 #zoomBox {
 773   position: fixed;
 774   display:none;
 775   height: 0px;
 776   width: 0px;
 777   background-color: #b6e2f0;
 778   opacity: 50%;
 779   border-radius: .2rem;
 780   border: 1px solid #b6e2f0;
 781 }
 782
 783 #legendOptions {
 784   position: absolute;
 785   padding: 10px;
 786   top: 80px;
 787   left: 200px;
 788   width: 220px;
 789   background: #e8e8e8;
 790   border-radius: .2rem;
 791   border: 1px solid darkgray;
 792 }
 793
 794 .legendItem {
 795   display: inline-block;
 796   width: 100px;
 797 }
 798
 799 .legendInput {
 800   width: 150px;
 801   margin-right: 10px;
 802 }
 803
 804 .legendSelect {
 805   width: 160px;
 806   margin-right: 10px;
 807 }
 808
 809 #timeSeriesChartContainer button {
 810   background-color: transparent;
 811   border: none;
 812 }
 813
 814 #timeSeriesChart {
 815   margin-left:10px;
 816   cursor: pointer;
 817 }
 818
 819 #add-threshold {
 820   margin-top: 10px;
 821 }
 822
 823 @media (max-width: 769px) {
 824   /* ===== Body-mobile ===== */
 825   .displayTest {
 826     left: 20px;
 827     top: 50px;
 828     width: 300px;
 829   }
 830
 831   .leaflet-bottom .leaflet-control-scale {
 832     margin-bottom: 70px !important;
 833   }
 834
 835   .leaflet-top {
 836     margin-top: 10px !important;
 837   }
 838
 839   .leaflet-left {
 840     margin-left: 303px !important;
 841   }
 842
 843   #raster-colorbar {
 844     height: 160px;
 845     width: 80px;
 846     bottom: 130px;
 847     left: 40px;
 848   }
 849
 850   #raster-colorbar-bg {
 851     height: 140px;
 852     width: 80px;
 853     bottom: 130px;
 854     left: 40px;
 855   }
 856
 857   .mobile-button {
 858     display: block;
 859   }
 860
 861   /* ===== CatalogMenu-mobile ===== */
 862   /* button style */
 863   .catalog-button > div:nth-child(2) {
 864       visibility: hidden;
 865   }
 866
 867   .catalog-button {
 868       width: 40px;
 869   }
 870
 871   #catalog-menu-icon-container {
 872       border-radius: .4rem;
 873       background:#e8e8e8;
 874   }
 875
 876   /* menu style */
 877   .catalog-menu {
 878       width: 300px;
 879       top: 85px;
 880   }
 881
 882   .search-header {
 883       grid-template-columns: 1fr 1fr;
 884       grid-row-gap: 10px;
 885   }
 886
 887   .menu-columns {
 888       grid-template-columns: 1fr;
 889   }
 890
 891   .column-header {
 892       display: none;
 893   }
 894
 895   #mobile-selector {
 896       display: inline-block;
 897       height: 30px;
 898   }
 899
 900   .column {
 901       width: 250px;
 902   }
 903
 904   /* ===== LayerController-mobile ===== */
 905   #layer-controller-container {
 906     height: 440px;
 907     top: 85px;
 908     right: 30px;
 909   }
 910
 911   /* ===== InfoPanel-mobile ===== */
 912   #infoPanel {
 913     width: 300px;
 914     height: 600px;
 915 }
 916
 917   #infoButton {
 918       left: 230px;
 919   }
 920
 921   /* ===== SimulationController-mobile ===== */
 922   .slider-container {
 923     width: 320px;
 924   }
 925
 926   #slider-timestamp {
 927       display: flex;
 928       justify-content: space-around;
 929   }
 930
 931   #slider-play-bar {
 932       display: flex;
 933       padding-left: 10px;
 934       padding-right: 10px;
 935       justify-content: space-between;
 936   }
 937
 938   #slider-header {
 939       height:60px;
 940   }
 941
 942   .slider-container button:hover:not([disabled]) {
 943       background: #d6d6d6;
 944   }
 945
 946   /* ===== Slider-mobile ===== */
 947   .slider.simulation-slider {
 948     left: 10px;
 949     width: 300px;
 950   }
 951
 952   /* ====== TimeSeriesChart-mobile ====== */
 953   #timeSeriesChartContainer {
 954     padding: 20px;
 955     padding-left: 10px;
 956     width: 300px;
 957     height: 430px;
 958     overflow-y: auto;
 959     margin: auto;
 960   }
 961
 962   #fullContainer {
 963     left: 5px;
 964   }
 965
 966   #addLayers{
 967     left: 10px;
 968     top: 8px;
 969     transform: rotate(0deg);
 970   }
 971
 972   #legendOptions {
 973     top: 80px;
 974     left: 50px;
 975   }
 976
 977   #layers-to-add {
 978     border-right: 1px solid #5d5d5d;
 979     border-radius: .4rem;
 980     width: 250px;
 981     left: 0px;
 982     top: 46px;
 983   }
 984
 985   #drag-container {
 986     display: none;
 987   }
 988
 989   #timeSeriesChart {
 990     margin-left: 0px;
 991   }
 992 }