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