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: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:#FFA500;
 455     color:#000000;
 456 }
 457 a.sl-resources:first-child {
 458 }
 459 button.btn-apply {
 460     background-color:#FFA500;
 461     border-bottom: 2pt solid #FFCA00;
 462     color:black;
 463     font-size:13px;
 464     padding:2px 8px;
 465     margin:0 5px;
 466     -moz-border-radius: 2px;
 467     border-radius: 2px;
 468     text-align: center;
 469 }
 470 div#slice-info {
 471     margin-top:25px;
 472 }
 473 div#slice-info table {
 474     width:100%;
 475     margin:0 auto;
 476 }
 477 div#slice-info table td:first-child {
 478     text-align:right;
 479     font-weight:bold;
 480     padding-right:15px;
 481 }
 482 div#slice-info td {
 483     padding:5px;
 484 }
 485
 486 /* SLICE VIEW sections */
 487 .slice-sections, .slice-pending {
 488     margin:0;
 489     padding:0;
 490 }
 491 .slice-sections ul, .slice-pending ul {
 492     margin:0;
 493     padding:0;
 494 }
 495 .slice-pending ul {
 496     width:400px;
 497     margin:0 auto 15px auto;
 498 }
 499 .slice-sections li {
 500     text-align:left;
 501     margin:0;
 502     padding:0;
 503 }
 504 .slice-pending li {
 505     padding-right:15px;
 506 }
 507 .slice-sections li a, .slice-pending li a {
 508     font-size:14px;
 509     color:black;
 510     padding:0;
 511 }
 512 .slice-sections li.active a, .slice-pending li.active a  {
 513     color:#201E62;
 514     background-color:#EFEFEF;
 515     text-decoration:underline;
 516     padding:0;
 517 }
 518 .slice-sections ul.nav-pills li a:hover, .slice-pending ul.nav-pills li a:hover {
 519     text-decoration:underline;
 520     background-color:#EFEFEF;
 521     color:black;
 522 }
 523 .slice-sections ul.nav-pills li.active, .slice-pending ul.nav-pills li.active {
 524
 525 }
 526 .slice-sections li:first-child, .slice-sections li:first-child a {
 527     color:#201E62;
 528     font-weight:bold;
 529 }
 530 .slice-experiment {
 531     text-align:right;
 532     padding:0;
 533 }
 534 .slice-experiment button {
 535     margin:3px 0 0 0;
 536     background-color:#CC4125;
 537     color:white;
 538 }
 539
 540 .slice-pending {
 541 }
 542 .slice-pending button {
 543     font-size:9pt;
 544     margin:-2px 0 0 0;
 545     padding:3px 5px;
 546 }
 547 .slice-pending button.apply {
 548     font-size:14px;
 549     padding:2px 5px;
 550 }
 551 .slice-pending button.clear {
 552 }
 553 tr.active, tr.active td {
 554     background-color:#FFFFCC !important;
 555 }
 556 div.dataTables_filter label{
 557     float:left;
 558     width:400px;
 559 }
 560
 561 /* HEADER */
 562
 563
 564 .header {
 565   -moz-box-shadow:    0 0 1px rgba(82,82,82,0.6);
 566   -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6);
 567   box-shadow:         0 0 1px rgba(82,82,82,0.6);
 568   height:61px;
 569   background-color:white;
 570 }
 571
 572 div.navigation {
 573
 574 }
 575 div.navigation ul {
 576     margin:26px 0 0 0;
 577     padding:0;
 578     display: inline-block;
 579     list-style-type: none;
 580     white-space: nowrap;
 581 }
 582
 583 div.navigation li {
 584     color:#0C0047;
 585     font-family:open_sansbold, sans-serif;
 586     font-size:9pt;
 587     font-weight:normal;
 588     line-height:0.8em;
 589     letter-spacing:0.4pt;
 590     list-style:none;
 591     float:left;
 592     padding:0 15px;
 593     margin:0;
 594     text-transform:uppercase;
 595 }
 596 div.navigation li:hover {
 597 }
 598 div.navigation li a {
 599     color:#0C0047;
 600 }
 601 div.navigation li a:hover, div.navigation li a.current {
 602     color:#760073;
 603     text-decoration:none;
 604 }
 605
 606 div.navigation li:last-child {
 607     margin-right:0;
 608 }
 609
 610
 611 div.navigation .dropdown-menu {
 612     color:black;
 613     -moz-box-shadow:    1px 1px 0px 0 rgba(58, 48, 100,0.8);
 614     -webkit-box-shadow: 1px 1px 0px 0 rgba(58, 48, 100,0.8);
 615     box-shadow:         1px 1px 0px 0 rgba(58, 48, 100,0.8);
 616     border-radius:2px;
 617     padding:0 5px 5px 5px;
 618     margin-top:5px;
 619     margin-left:20px;
 620 }
 621 div.navigation .dropdown-menu ul {
 622     margin:0;
 623     padding:15px 5px 5px 5px;
 624     display:list-item;
 625 }
 626 div.navigation .dropdown-menu li {
 627     margin:0 10px 0 0;
 628     padding:0 0 8px 0;
 629     display:list-item;
 630     float:none;
 631     text-transform: none;
 632 }
 633
 634 div.navigation .dropdown-menu a {
 635     font-family:Helvetica,sans-serif;
 636     font-size:10pt;
 637     color:black;
 638 }
 639 div.navigation .dropdown-menu li.title {
 640     margin-bottom:10px;
 641 }
 642 div.navigation .dropdown-menu li.title a {
 643     font-family:open_sansbold, sans-serif;
 644 }
 645
 646
 647 div.navigation .dropdown-menu li:first-child {
 648     border-bottom:1px solid white;
 649     padding-bottom:5px;
 650
 651 }
 652
 653 div.secondary {
 654     text-align:right;
 655 }
 656
 657 div.secondary ul {
 658    margin:6px 0 0 0;
 659    padding:0;
 660 }
 661
 662 div.secondary li {
 663     font-size:9pt;
 664     display:inline;
 665     list-style:none;
 666     margin:0px;
 667     padding:0;
 668     margin-right:15px;
 669     color:#747474;
 670     letter-spacing:0.4px;
 671 }
 672 div.secondary li:last-child {
 673     margin-right:0;
 674 }
 675 div.secondary li a {
 676     color:#747474;
 677 }
 678 div.secondary li a:hover {
 679     text-decoration:underline;
 680 }
 681 div.secondary .button {
 682     width:300px;
 683     margin-top:15px;
 684 }
 685 div.secondary .account {
 686     margin-top:10px;
 687     padding:0;
 688     font-size:9pt;
 689     color:gray;
 690     text-align:right;
 691 }
 692 div.secondary .account span {
 693     font-size:8pt;
 694 }
 695 div.secondary .account a {
 696     color:black;
 697 }
 698
 699
 700 div.footer {
 701     padding-top:15px;
 702 }
 703 div.footer div.bottom {
 704     position:absolute;
 705     bottom:0;
 706 }
 707 div.footer ul {
 708    margin:6px 0 0 0;
 709    padding:0;
 710 }
 711
 712 div.footer li {
 713     font-size:9pt;
 714     display:inline;
 715     list-style:none;
 716     margin:0px;
 717     padding:0;
 718     margin-right:15px;
 719     color:#747474;
 720     letter-spacing:0.4px;
 721 }
 722
 723 div.footer li a {
 724     color:#747474;
 725 }
 726 div.footer li a:hover {
 727     text-decoration:underline;
 728 }
 729 div.copy {
 730     font-size:8pt;
 731     color:gray;
 732     padding-top:15px;
 733     padding-bottom:15px;
 734 }
 735
 736 div.home {
 737     font-size:11pt;
 738     line-height:1.2em;
 739     letter-spacing:0.3pt;
 740     min-height:500px;
 741     background-image: url('../img/bg-experiment.jpg');
 742     background-repeat:no-repeat;
 743     background-size:cover;
 744     background-position:center top;
 745     background-color:#086274;
 746     padding:100px 0;
 747 }
 748 div.home h2 {
 749     color:white;
 750     line-height:1.2em;
 751     font-size:18pt;
 752 }
 753 div.home h3 {
 754     color:white;
 755     line-height:1.4em;
 756 }
 757 div.dashboard {
 758     text-align:center;
 759 }
 760 div.dashboard div {
 761     margin:25px 0;
 762 }
 763 div.dashboard ul {
 764     text-align:left;
 765     margin-left:24px;
 766     list-style:none;
 767 }
 768 div.registration-form {
 769     padding-top:150px;
 770     text-align:center;
 771 }
 772
 773 .login-form input {
 774     width:320px;
 775 }
 776 .login-form input[type=submit] {
 777     width:108px;
 778 }
 779
 780 .login-submit {
 781     vertical-align:middle;
 782     padding:0;
 783 }
 784 .lost-password {
 785     font-size:10pt;
 786     color:black;
 787     text-align:right;
 788     padding:0px;
 789 }
 790 .lost-password a {
 791     color:white;
 792     text-shadow:0.5px 0.5px black;
 793 }
 794 .login-signup {
 795     font-size:12pt;
 796     color:white;
 797     text-shadow:0.5px 0.5px black;
 798     margin-top:45px;
 799     padding:5px 0 0 4px;
 800
 801 }
 802 .login-signup a {
 803     color:white;
 804     text-shadow:0.5px 0.5px black;
 805     padding-bottom:2px;
 806     border-bottom:2pt solid white;
 807 }
 808 .login-signup a:hover {
 809     text-decoration:none;
 810 }
 811 .login-signup button {
 812     padding:8px;
 813     border:0;
 814     border-bottom:2px solid #540086;
 815     background-color:#302562;
 816     color:white;
 817     width:100px;
 818     border-radius:5px;
 819     font-size:12pt;
 820 }
 821 div.slogan {
 822     text-align:center;
 823     color:white;
 824     padding-top:60px;
 825     text-shadow: 1px 1px #013540;
 826 }
 827
 828 th {
 829     border:0 !important;
 830 }
 831
 832 div.monitor {
 833     padding:40px 0 25px 0;
 834 }
 835 div.monitor h1 {
 836     margin-bottom:25px;
 837 }
 838 div.s-monitor {
 839     padding-bottom:25px;
 840 }
 841 span#stats-period-txt {
 842     text-transform:lowercase;
 843 }
 844
 845 // resource info modal
 846 a.resource-info:hover {
 847     cursor:pointer;
 848 }
 849 table.modal-resource-info tr td:first-child {
 850     font-weight:bold;
 851     text-align:right;
 852 }
 853 table.modal-resource-info tr:first-child td {
 854     border-top:0;
 855     text-align:center;
 856 }
 857 table.modal-resource-info tr:last-child td {
 858     border-bottom:0;
 859     text-align:center;
 860 }