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