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