portal/static/css/onelab.css

   1 @import url("../fonts/opensans_bold_macroman/stylesheet.css");
   2
   3 html { height: 100% }
   4
   5 body {
   6     background-color:white;
   7     color:black;
   8     margin:0;
   9     padding:0;
  10     height: 100%;
  11     letter-spacing:0.3px;
  12 }
  13 a, a:active, a:focus {
  14     outline: 0;
  15     text-decoration:none;
  16     color:#760073;
  17 }
  18 a:hover {
  19     color:#0D0049;
  20 }
  21
  22 a.current {
  23     text-decoration:underline;
  24     color:#333333;
  25 }
  26 p.command {
  27     padding:15px;
  28     margin:15px 0;
  29     color:#890000;
  30     background-color:#E0E0E0;
  31     font-family:Courier, monospace;
  32 }
  33 h1 {
  34     border-bottom:1px solid #DDDDDD;
  35     padding:0 0 0 0;
  36     margin:15px 0 15px 0;
  37     font-size:14pt;
  38 }
  39 h1 img {
  40     vertical-align:middle;
  41     margin-bottom:4px;
  42     margin-right:10px;
  43 }
  44 h2 {
  45     margin:0 0 15px 0;
  46     font-size:14pt;
  47     color:#333333;
  48 }
  49 h3 {
  50     margin:0 0 5px 0;
  51     font-size:13pt;
  52     color:#201E62;
  53 }
  54 h4 {
  55     margin:0 0 5px 0;
  56     font-size:12pt;
  57     color:#333333;
  58 }
  59 label {
  60     font-weight:normal;
  61     font-size:13px;
  62     color:#201E62;
  63 }
  64 .sublabel {
  65     color:gray;
  66     font-style:italic;
  67     font-weight:normal;
  68 }
  69 span.subtitle {
  70     color:#454545;
  71     font-size:9pt;
  72     font-weight:normal;
  73     text-transform:uppercase;
  74 }
  75 span.small {
  76     font-size:9pt;
  77 }
  78 span.gray {
  79     color:gray;
  80 }
  81 span.type {
  82     color:#201E62;
  83     font-weight:bold;
  84     font-size:9pt;
  85 }
  86 span.htitle {
  87     color:#454545;
  88     font-size:9pt;
  89     font-weight:normal;
  90 }
  91 span.version {
  92     font-size:8pt;
  93     color:#888888;
  94 }
  95 input[type=checkbox] {
  96   min-width:5px !important;
  97   margin-left:0 !important;
  98 }
  99 input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, option {
 100     min-width:260px;
 101     padding:6px;
 102     border:1pt solid #22606D;
 103     vertical-align:bottom;
 104     border-radius:0;
 105 }
 106
 107 textarea {
 108     padding:6px;
 109     border:1pt solid #22606D !important;
 110     border-radius:0 !important;
 111 }
 112
 113 span.label {
 114     font-size:11pt;
 115     color:gray;
 116     font-weight:normal;
 117     padding:0;
 118 }
 119 div.el {
 120     padding-bottom:15px;
 121 }
 122 div.breadcrumbs {
 123     margin:15px 0;
 124     color:gray;
 125     font-size:10pt;
 126 }
 127 div.breadcrumbs a {
 128     color:gray;
 129 }
 130 div.breadcrumbs a:hover {
 131     text-decoration:underline;
 132 }
 133 .tab-pane {
 134     padding-top:15px;
 135 }
 136 /* buttons */
 137 button.btn, input.btn {
 138     padding:6px 10px;
 139     border-radius:5px;
 140     font-size:10pt;
 141     font-weight:normal;
 142 }
 143 button.btn span.glyphicon {
 144     margin-right:6px;
 145 }
 146 button.btn-default {
 147     border-bottom:3px solid #cccccc;
 148 }
 149 button.btn-default:hover {
 150     background-color:white;
 151     border:1px solid #ADADAD;
 152     border-bottom:3px solid #ADADAD;
 153 }
 154 button.btn-default:active {
 155     background-color:white;
 156     border:1px solid #ADADAD;
 157     border-bottom:1px solid #ADADAD;
 158     margin-top:2px;
 159     box-shadow:none;
 160 }
 161 button.btn-primary {
 162     border-bottom:3px solid #3071A9;
 163 }
 164 button.btn-primary:hover {
 165     box-shadow:none;
 166     background-color:#428bca;
 167     border:1px solid #357ebd;
 168     border-bottom:3px solid #3071A9;
 169 }
 170 button.btn-primary:active {
 171     box-shadow:none;
 172     border-bottom:1px solid #3071A9;
 173     margin-top:2px;
 174 }
 175 button.btn-danger {
 176     border-bottom:3px solid #A13F3A;
 177 }
 178 button.btn-danger:hover {
 179     box-shadow:none;
 180     background-color:#d9534f;
 181     border:1px solid #d43f3a;
 182     border-bottom:3px solid #A13F3A;
 183 }
 184 button.btn-danger:active {
 185     border:1px solid #d43f3a;
 186     box-shadow:none;
 187     margin-top:2px;
 188 }
 189 button.btn-onelab, input.btn-onelab {
 190     border:0;
 191     border-bottom:3px solid #760073;
 192     background-color:#302562;
 193     color:white;
 194 }
 195 button.btn-onelab:hover, input.btn-onelab:hover {
 196     border:0;
 197     border-bottom:3px solid #760073;
 198     background-color:#302562;
 199     color:white;
 200 }
 201 button.btn-onelab:active, input.btn-onelab:active {
 202     box-shadow:none;
 203     border-bottom:1px solid #760073;
 204     margin-top:2px;
 205 }
 206
 207 .container-resource button {
 208     padding:2px 4px;
 209     border-radius:3px;
 210     font-size:9pt;
 211     font-weight:normal;
 212 }
 213 .container-resource select,.container-resource option, .container-resource input {
 214     padding:2px 4px;
 215     font-size:9pt;
 216 }
 217 .badge {
 218     font-size:9pt;
 219     margin-left:4px;
 220 }
 221 /***** Notifications *****/
 222 .warning {
 223     border: 1px solid red;
 224     margin: 20px 60px;
 225     padding: 10px 20px;
 226     color: red;
 227     background-color: #f2dbdb;
 228     text-align: center;
 229 }
 230 div#menu-slice-list{
 231     display:none;
 232     position:absolute;
 233     background-color:orange;
 234     padding:15px;
 235     left:-15px;
 236     z-index:10;
 237 }
 238 div.dashboard div.projects-tree {
 239     margin-left:49px;
 240 }
 241 /* HOME DASHBOARD */
 242 div#home-dashboard {
 243     color:black;
 244     margin:0 auto 25px auto;
 245 }
 246 div#home-dashboard table {
 247     margin:25px;
 248     width:100%;
 249 }
 250 div#home-dashboard table td {
 251     text-align:center;
 252     padding:15px 0;
 253     width:33%;
 254 }
 255 div#home-dashboard table tr:first-child td {
 256     font-size:12pt;
 257     font-weight:bold;
 258     color:#270A5A;
 259 }
 260 div#home-dashboard table tr:last-child td {
 261     vertical-align:top;
 262     padding:25px 0;
 263 }
 264 div#home-dashboard table tr:last-child td.logged-in {
 265     border-right:1px solid #DDDDDD;
 266     padding:25px;
 267 }
 268 div#home-dashboard table tr:last-child td.support {
 269     border-left:1px solid #DDDDDD;
 270     padding:25px;
 271 }
 272 div#home-dashboard table tr:last-child td:first-child {
 273 }
 274 div#home-dashboard table tr:last-child td:last-child {
 275     border-right:0;
 276 }
 277 div#home-dashboard table tr:last-child td.logged-in div {
 278     text-align:left;
 279     padding:25px 0;
 280 }
 281 div#home-dashboard table tr:last-child td.support div {
 282     text-align:left;
 283     padding:25px 0;
 284 }
 285 div#home-dashboard div.login-widget {
 286     padding:20px;
 287 }
 288 div#home-dashboard table td.support {
 289 }
 290 div#home-dashboard table td.support a {
 291 }
 292 div#home-dashboard table td.support a:hover {
 293     text-decoration:none;
 294 }
 295
 296 div#home-dashboard div#manager {
 297     display:none;
 298 }
 299
 300 div#home-dashboard div#home-slice-list {
 301     margin:25px 0;
 302     padding:0 25px;
 303     text-align:left;
 304 }
 305 div#home-dashboard div#home-slice-list ul {
 306     list-style: none;
 307     padding:0;
 308     margin:0;
 309 }
 310 div#home-dashboard div#home-slice-list li {
 311
 312 }
 313
 314 /**/
 315
 316 /**/
 317 /* WELL */
 318 div.well {
 319 }
 320 /**/
 321 /* TABLE */
 322 table.table {
 323     margin:0;
 324 }
 325 table.table thead {
 326     padding:0;
 327 }
 328 table.table tbody {
 329     padding:0;
 330 }
 331 table.table tr {
 332     padding:0;
 333 }
 334 table.table td {
 335     padding:0;
 336 }
 337 /* INSTITUTION */
 338 div#institution {
 339     color:black;
 340 }
 341 .form-hint {
 342     font-size:11pt;
 343     font-style:italic;
 344     color:gray;
 345 }
 346
 347
 348 .form-hint {
 349     font-size:11pt;
 350     font-style:italic;
 351     color:gray;
 352 }
 353
 354
 355
 356 /* TICKET REQUEST */
 357 div#ticket-request {
 358     color:black;
 359 }
 360 .form-hint {
 361     font-size:11pt;
 362     font-style:italic;
 363     color:gray;
 364 }
 365 div#ticket-request p {
 366     margin:20px 0;
 367 }
 368
 369 ul.nav-tabs {
 370     margin:0 0 15px 0;
 371 }
 372 ul.nav-tabs ul {}
 373 ul.nav-tabs li {}
 374
 375 ul.nav-section li a {
 376     color:black;
 377     border-bottom:0;
 378 }
 379 ul.nav-section li:first-child {
 380     padding:0;
 381 }
 382 ul.nav-section li:first-child a {
 383 }
 384 ul.nav-section li:first-child.active a {
 385 }
 386
 387 ul.nav-resources {
 388     margin:15px 0;
 389 }
 390 ul.nav-resources a {
 391     padding: 4px 10px 5px 10px;
 392 }
 393
 394 /* SLICE VIEW */
 395 div.container-resource, div.container-slice {
 396     padding-right:15px;
 397     padding-left:15px;
 398 }
 399 .table th {
 400     border-top:0 !important;
 401 }
 402 div#slice-view {
 403     margin:0;
 404 }
 405
 406 div.sl-filter-facilities {
 407     padding:0 5px;
 408 }
 409 div.sl-filter-facilities h4 {
 410     margin-bottom:15px;
 411
 412 }
 413 img.sl-image {
 414     margin:0 5px 5px 0;
 415     padding:0;
 416     vertical-align:middle;
 417 }
 418 a.sl-facility {
 419     color:gray;
 420     text-decoration:none;
 421 }
 422 a.sl-facility:hover {
 423     color:#342961;
 424 }
 425 a.sl-facility.active {
 426     color:black;
 427     text-decoration:none;
 428 }
 429 a.sl-facility::before {
 430     content: " ";
 431 }
 432 div.sl-facilities {
 433     border-bottom:#CCCCCC 1px solid;
 434     padding-bottom:15px;
 435     margin-bottom:15px;
 436 }
 437 div.sl-facilities:last-child {
 438     border:0;
 439 }
 440 a.sl-testbed {
 441     color:gray;
 442     text-decoration:none;
 443     margin-left:25px;
 444     margin-bottom:5px;
 445 }
 446 a.sl-testbed:hover {
 447     color:#342961;
 448 }
 449 a.sl-testbed.active {
 450     color:black;
 451 }
 452 div.sl-filter-resources {
 453     margin:0 0 10px 0;
 454     text-align:center;
 455 }
 456 span.sl-resources {
 457     font-size:9pt;
 458     color:gray;
 459 }
 460 a.sl-resources {
 461     font-size:9pt;
 462     border:0;
 463     padding:2px 8px;
 464     margin:0 5px;
 465     -moz-border-radius: 2px;
 466     border-radius: 2px;
 467     text-align: center;
 468 }
 469 a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
 470     border:0;
 471     padding:2px 8px;
 472     -moz-border-radius: 2px;
 473     border-radius: 2px;
 474     background-color:#E7A6E7;
 475     color:#000000;
 476 }
 477 a.sl-resources:first-child {
 478 }
 479 button.btn-apply {
 480     font-size:13px;
 481     padding:2px 8px;
 482     margin:0 5px;
 483     -moz-border-radius: 2px;
 484     border-radius: 2px;
 485     text-align: center;
 486 }
 487 div#slice-info {
 488     margin-top:25px;
 489 }
 490 div#slice-info table {
 491     width:100%;
 492     margin:0 auto;
 493 }
 494 div#slice-info table td:first-child {
 495     text-align:right;
 496     font-weight:bold;
 497     padding-right:15px;
 498 }
 499 div#slice-info td {
 500     padding:5px;
 501 }
 502
 503 /* SLICE VIEW sections */
 504 .slice-sections, .slice-pending {
 505     margin:0;
 506     padding:0;
 507 }
 508 .slice-sections ul, .slice-pending ul {
 509     margin:0;
 510     padding:0;
 511 }
 512 .slice-pending ul {
 513     width:400px;
 514     margin:0 auto 15px auto;
 515 }
 516 .slice-sections li {
 517     text-align:left;
 518     margin:0;
 519     padding:0;
 520 }
 521 .slice-pending li {
 522     padding-right:15px;
 523 }
 524 .slice-sections li a, .slice-pending li a {
 525     font-size:14px;
 526     color:black;
 527     padding:0;
 528 }
 529 .slice-sections li.active a, .slice-pending li.active a  {
 530     color:#201E62;
 531     background-color:#EFEFEF;
 532     text-decoration:underline;
 533     padding:0;
 534 }
 535 .slice-sections ul.nav-pills li a:hover, .slice-pending ul.nav-pills li a:hover {
 536     text-decoration:underline;
 537     background-color:#EFEFEF;
 538     color:black;
 539 }
 540 .slice-sections ul.nav-pills li.active, .slice-pending ul.nav-pills li.active {
 541
 542 }
 543 .slice-sections li:first-child, .slice-sections li:first-child a {
 544     color:#201E62;
 545     font-weight:bold;
 546 }
 547 .slice-experiment {
 548     text-align:right;
 549     padding:0;
 550 }
 551 .slice-experiment button {
 552     margin:3px 0 0 0;
 553     background-color:#CC4125;
 554     color:white;
 555 }
 556
 557 .slice-pending {
 558 }
 559 .slice-pending button {
 560     font-size:9pt;
 561     margin:-2px 0 0 0;
 562     padding:3px 5px;
 563 }
 564 .slice-pending button.apply {
 565     font-size:14px;
 566     padding:2px 5px;
 567 }
 568 .slice-pending button.clear {
 569 }
 570 tr.active, tr.active td {
 571     background-color:#FFFFCC !important;
 572 }
 573 div.dataTables_filter label{
 574     float:left;
 575     width:400px;
 576 }
 577
 578 /* HEADER */
 579
 580
 581 .header {
 582   -moz-box-shadow:    0 0 1px rgba(82,82,82,0.6);
 583   -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6);
 584   box-shadow:         0 0 1px rgba(82,82,82,0.6);
 585   height:61px;
 586   background-color:white;
 587 }
 588
 589 div.navigation {
 590
 591 }
 592 div.navigation ul {
 593     margin:26px 0 0 0;
 594     padding:0;
 595     display: inline-block;
 596     list-style-type: none;
 597     white-space: nowrap;
 598 }
 599
 600 div.navigation li {
 601     color:#0C0047;
 602     font-family:open_sansbold, sans-serif;
 603     font-size:9pt;
 604     font-weight:normal;
 605     line-height:0.8em;
 606     letter-spacing:0.4pt;
 607     list-style:none;
 608     float:left;
 609     padding:0 15px;
 610     margin:0;
 611     text-transform:uppercase;
 612 }
 613 div.navigation li:hover {
 614 }
 615 div.navigation li a {
 616     color:#0C0047;
 617 }
 618 div.navigation li a:hover, div.navigation li a.current {
 619     color:#760073;
 620     text-decoration:none;
 621 }
 622
 623 div.navigation li:last-child {
 624     margin-right:0;
 625 }
 626
 627
 628 div.navigation .dropdown-menu {
 629     color:black;
 630     -moz-box-shadow:    1px 1px 0px 0 rgba(58, 48, 100,0.8);
 631     -webkit-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8);
 632     box-shadow:         1px 1px 0px 0 rgba(58, 48, 100,0.8);
 633     border-radius:2px;
 634     padding:0 5px 5px 5px;
 635     margin-top:5px;
 636     margin-left:20px;
 637 }
 638 div.navigation .dropdown-menu ul {
 639     margin:0;
 640     padding:15px 5px 5px 5px;
 641     display:list-item;
 642 }
 643 div.navigation .dropdown-menu li {
 644     margin:0 10px 0 0;
 645     padding:0 0 8px 0;
 646     display:list-item;
 647     float:none;
 648     text-transform: none;
 649 }
 650
 651 div.navigation .dropdown-menu a {
 652     font-family:Helvetica,sans-serif;
 653     font-size:10pt;
 654     color:black;
 655 }
 656 div.navigation .dropdown-menu li.title {
 657     margin-bottom:10px;
 658 }
 659 div.navigation .dropdown-menu li.title a {
 660     font-family:open_sansbold, sans-serif;
 661 }
 662
 663
 664 div.navigation .dropdown-menu li:first-child {
 665     border-bottom:1px solid white;
 666     padding-bottom:5px;
 667
 668 }
 669
 670 div.secondary {
 671     text-align:right;
 672 }
 673
 674 div.secondary ul {
 675    margin:6px 0 0 0;
 676    padding:0;
 677 }
 678
 679 div.secondary li {
 680     font-size:9pt;
 681     display:inline;
 682     list-style:none;
 683     margin:0px;
 684     padding:0;
 685     margin-right:15px;
 686     color:#747474;
 687     letter-spacing:0.4px;
 688 }
 689 div.secondary li:last-child {
 690     margin-right:0;
 691 }
 692 div.secondary li a {
 693     color:#747474;
 694 }
 695 div.secondary li a:hover {
 696     text-decoration:underline;
 697 }
 698 div.secondary .button {
 699     width:300px;
 700     margin-top:15px;
 701 }
 702 div.secondary .account {
 703     margin-top:10px;
 704     padding:0;
 705     font-size:9pt;
 706     color:gray;
 707     text-align:right;
 708 }
 709 div.secondary .account span {
 710     font-size:8pt;
 711 }
 712 div.secondary .account a {
 713     color:black;
 714 }
 715
 716
 717 div.footer {
 718     padding-top:15px;
 719 }
 720 div.footer div.bottom {
 721     position:absolute;
 722     bottom:0;
 723 }
 724 div.footer ul {
 725    margin:6px 0 0 0;
 726    padding:0;
 727 }
 728
 729 div.footer li {
 730     font-size:9pt;
 731     display:inline;
 732     list-style:none;
 733     margin:0px;
 734     padding:0;
 735     margin-right:15px;
 736     color:#747474;
 737     letter-spacing:0.4px;
 738 }
 739
 740 div.footer li a {
 741     color:#747474;
 742 }
 743 div.footer li a:hover {
 744     text-decoration:underline;
 745 }
 746 div.copy {
 747     font-size:8pt;
 748     color:gray;
 749     padding-top:15px;
 750     padding-bottom:15px;
 751 }
 752
 753 div.home {
 754     font-size:11pt;
 755     line-height:1.2em;
 756     letter-spacing:0.3pt;
 757     min-height:500px;
 758     background-image: url('../img/bg-experiment.jpg');
 759     background-repeat:no-repeat;
 760     background-size:cover;
 761     background-position:center top;
 762     background-color:#086274;
 763     padding:100px 0;
 764 }
 765 div.home h2 {
 766     color:white;
 767     line-height:1.2em;
 768     font-size:18pt;
 769 }
 770 div.home h3 {
 771     color:white;
 772     line-height:1.4em;
 773 }
 774 /*
 775 div.dashboard {
 776     text-align:center;
 777 }
 778 div.dashboard div {
 779     margin:25px 0;
 780 }
 781 div.dashboard ul {
 782     text-align:left;
 783     margin-left:24px;
 784     list-style:none;
 785 }
 786 div.home {
 787     padding-top:50px;
 788 }
 789 div.home h1 {
 790     font-size:22pt;
 791     border:0;
 792 }
 793 div.home h3, div.home h4 {
 794     color:#424242;
 795     line-height:1.4em;
 796 }
 797
 798 div.home h3 a {
 799     color:#FD6D2C;
 800 }*/
 801 div.dashboard {
 802 }
 803 div.dashboard a {
 804     color:#206090;
 805 }
 806
 807 div.dashboard a:hover {
 808     text-decoration:underline;
 809 }
 810 div.dashboard div.projects-tree {
 811     margin-left:49px;
 812 }
 813 div.dashboard ul {
 814     list-style-type:disc;
 815     list-style-position:inside;
 816     text-align:left;
 817     margin:0 0 15px 0;
 818     padding:0;
 819
 820 }
 821 div.dashboard ul ul {
 822     margin:5px 0 15px 25px;
 823     list-style:none;
 824 }
 825 div.dashboard li {
 826     margin:0 0 5px 0;
 827     padding:0;
 828 }
 829 div.dashboard ul ul li {
 830     margin:0;
 831 }
 832 div.dashboard ul ul a {
 833 }
 834 div.dashboard h3 {
 835     border-bottom:1px solid #E0E0E0;
 836     margin-right:15px;
 837     margin-bottom:25px;
 838 }
 839 div.dashboard h3 a {
 840      color:#201E62;
 841 }
 842 div.dashboard h3 img {
 843     margin:15px 15px 15px 0;
 844 }
 845 div.dashboard span.glyphicon {
 846     text-align:center;
 847     width:45px;
 848     height:25px;
 849 }
 850 div.dashboard-create-slice {
 851     display:none;
 852 }
 853
 854 div.registration-form {
 855     padding-top:150px;
 856     text-align:center;
 857 }
 858 div.registration-form {
 859     padding-top:150px;
 860     text-align:center;
 861 }
 862
 863 .login-form input {
 864     width:320px;
 865 }
 866 .login-form input[type=submit] {
 867     width:108px;
 868 }
 869
 870 .login-submit {
 871     vertical-align:middle;
 872     padding:0;
 873 }
 874 .lost-password {
 875     font-size:10pt;
 876     color:black;
 877     text-align:right;
 878     padding:0px;
 879 }
 880 .lost-password a {
 881     color:white;
 882     text-shadow:0.5px 0.5px black;
 883 }
 884 .login-signup {
 885     font-size:12pt;
 886     color:white;
 887     text-shadow:0.5px 0.5px black;
 888     margin-top:45px;
 889     padding:5px 0 0 4px;
 890
 891 }
 892 .login-signup a {
 893     color:white;
 894     text-shadow:0.5px 0.5px black;
 895     padding-bottom:2px;
 896     border-bottom:2pt solid white;
 897 }
 898 .login-signup a:hover {
 899     text-decoration:none;
 900 }
 901 .login-signup button {
 902     padding:8px;
 903     border:0;
 904     border-bottom:2px solid #540086;
 905     background-color:#302562;
 906     color:white;
 907     width:100px;
 908     border-radius:5px;
 909     font-size:12pt;
 910 }
 911 div.slogan {
 912     text-align:center;
 913     color:white;
 914     padding-top:60px;
 915     text-shadow: 1px 1px #013540;
 916 }
 917
 918 th {
 919     border:0 !important;
 920 }
 921
 922 div.monitor {
 923     padding:40px 0 25px 0;
 924 }
 925 div.monitor h1 {
 926     margin-bottom:25px;
 927 }
 928 div.s-monitor {
 929     padding-bottom:25px;
 930 }
 931 span#stats-period-txt {
 932     text-transform:lowercase;
 933 }
 934
 935 // resource info modal
 936 a.resource-info:hover {
 937     cursor:pointer;
 938 }
 939 table.modal-resource-info tr td:first-child {
 940     font-weight:bold;
 941     text-align:right;
 942 }
 943 table.modal-resource-info tr:first-child td {
 944     border-top:0;
 945     text-align:center;
 946 }
 947 table.modal-resource-info tr:last-child td {
 948     border-bottom:0;
 949     text-align:center;
 950 }