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