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