dgbuilder/public/style.css.orig

   1 /**
   2  * Copyright 2013, 2014 IBM Corp.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  **/
  16
  17 body {
  18   font: 13px "Helvetica" !important;
  19   padding-top: 100px;
  20   background: url("pw_maze_white.png");
  21 }
  22
  23 #header {
  24     position: absolute;
  25     top: 0;
  26     left: 0;
  27     width: 100%;
  28     height: 40px;
  29     background: #000;
  30     box-sizing: border-box;
  31     padding: 5px 0px 5px 20px;
  32 }
  33
  34 #dropTarget {
  35     position: absolute;
  36     top: 0; bottom: 0;
  37     left: 0; right: 0;
  38     background: rgba(100,100,100,0.5);
  39     display:table;
  40     width: 100%;
  41     height: 100%;
  42     display: none;
  43 }
  44 #dropTarget div {
  45     display: table-cell;
  46     vertical-align: middle;
  47     text-align: center;
  48     font-size: 40px;
  49     color: #fff;
  50 }
  51 #dropTarget div i {
  52     font-size: 80px;
  53 }
  54 div.btn-group, a.btn {
  55     -webkit-user-select: none;
  56    -khtml-user-select: none;
  57    -moz-user-select: none;
  58    -ms-user-select: none;
  59    user-select: none;
  60 }
  61
  62 span.logo {
  63     pointer-events: none;
  64     float: left;
  65     font-size: 30px;
  66     line-height: 30px;
  67     text-decoration: none;
  68     color: #ccc;
  69 }
  70 span.logo span {
  71     vertical-align: middle;
  72     font-size: 16px !important;
  73 }
  74 span.logo img {
  75     height: 18px;
  76 }
  77 #header .button {
  78     line-height: 22px;
  79     display: inline-block;
  80     font-size: 14px;
  81     padding: 4px 12px;
  82     text-decoration: none;
  83     border-radius: 3px;
  84     color: #ccc;
  85     margin: auto 10px;
  86     vertical-align: middle;
  87 }
  88 #header .button:not(.disabled):hover {
  89     box-shadow: 0 0 2px #fff;
  90 }
  91 #btn-deploy:not(.disabled):hover {
  92     background: #ca3f39;
  93 }
  94
  95 #btn-deploy {
  96     color: #fff !important;
  97     background: #d24741;
  98     box-shadow: 0 0 2px #fff;
  99 }
 100 #btn-deploy:not(.disabled):active {
 101     background: #aa1f19 !important;
 102     color: #ccc !important;
 103     box-shadow: 0 0 2px #999;
 104 }
 105 #btn-deploy.disabled {
 106     cursor: default;
 107     background: #444 ;
 108     color: #999 !important;
 109 }
 110
 111 #btn-sidemenu {
 112     font-size: 20px !important;
 113 }
 114 #btn-sidemenu:active, #btn-sidemenu.active {
 115     background: #333 ;
 116 }
 117 #header .button:focus {
 118     outline: none;
 119 }
 120
 121
 122
 123 #workspace {
 124    margin-left: 160px;
 125    overflow: hidden;
 126 }
 127
 128 #chart {
 129    overflow: auto;
 130    background: #e3e3e3;
 131    position: absolute;
 132    bottom:0px;
 133    top: 30px;
 134    left:0px;
 135    right:0px;
 136 }
 137
 138 #workspace-toolbar {
 139     display: none;
 140     position: absolute;
 141     top: 30px;
 142     left:0;
 143     right: 18px;
 144     padding: 5px;
 145     background: #f3f3f3;
 146 }
 147
 148 #chart-zoom-controls {
 149     padding-top: 3px;
 150     text-align: right;
 151     float: right;
 152 }
 153
 154 #palette {
 155    background: #f3f3f3;
 156    width: 140px;
 157    text-align: center;
 158    -webkit-user-select: none;
 159    -khtml-user-select: none;
 160    -moz-user-select: none;
 161    -ms-user-select: none;
 162    user-select: none;
 163 }
 164 .palette-scroll {
 165     display: none;
 166     position: absolute;
 167     top: 0;
 168     left:0;
 169     right: 0;
 170     bottom: 35px;
 171     padding: 5px;
 172     overflow-y: auto;
 173     box-sizing:border-box;
 174     -moz-box-sizing: border-box;
 175 }
 176 .palette-spinner {
 177     padding-top: 40px;
 178 }
 179 #palette-search {
 180     position: absolute;
 181     display: none;
 182     bottom: 0;
 183     left:0;
 184     right:0;
 185     overflow: hidden;
 186     background: #f3f3f3;
 187     text-align: center;
 188     height: 35px;
 189     padding: 3px;
 190     border-top: 1px solid #999;
 191     box-sizing:border-box;
 192     -moz-box-sizing: border-box;
 193 }
 194 #palette-search i.fa-search {
 195     position: absolute;
 196     pointer-events: none;
 197     left: 4px;
 198     top: 10px;
 199 }
 200 #palette-search i.fa-times {
 201     position: absolute;
 202     right: 6px;
 203     top: 10px;
 204 }
 205
 206 #palette-search-clear {
 207     display: none;
 208     color: #000;
 209 }
 210
 211 #palette-search input {
 212     border-radius: 0;
 213     border: none;
 214     width: 100%;
 215     box-shadow: none;
 216     -webkit-box-shadow: none;
 217     padding: 3px 17px;
 218     margin: 0px;
 219     height: 30px;
 220     box-sizing:border-box;
 221     -moz-box-sizing: border-box;
 222
 223 }
 224 #palette-search input:focus {
 225     border: none;
 226     box-shadow: none;
 227     -webkit-box-shadow: none;
 228 }
 229
 230 .palette-category {
 231     border: 1px solid #999;
 232     border-radius: 3px;
 233     margin-bottom: 5px;
 234 }
 235 .palette-content {
 236     background: #fff;
 237     border-top: 1px solid #aaa;
 238     padding-bottom: 3px;
 239 }
 240
 241 .palette-header {
 242     background: #f3f3f3;
 243     border-radius: 3px;
 244     cursor: pointer;
 245     text-align: left;
 246     padding: 1px;
 247 }
 248 .palette-header i {
 249     margin: 3px 4px 3px 3px;
 250     -webkit-transition: all 0.2s ease-in-out;
 251     -moz-transition: all 0.2s ease-in-out;
 252     -o-transition: all 0.2s ease-in-out;
 253     -webkit-transform: rotate(-90deg);
 254     -moz-transform: rotate(-90deg);
 255     -o-transform: rotate(-90deg);
 256 }
 257 .palette-header i.expanded {
 258     -webkit-transform: rotate(0deg);
 259     -moz-transform: rotate(0deg);
 260     -o-transform: rotate(0deg);
 261 }
 262 .palette-header span {
 263     clear: both;
 264 }
 265 .palette_label {
 266    line-height: 25px;
 267    text-align: center;
 268
 269 }
 270 .palette_node {
 271    cursor:move;
 272    font-size:13px;
 273    background: #ddd;
 274    margin: 10px auto;
 275    height: 25px;
 276    border-radius: 6px;
 277    border: 2px solid #999;
 278    background-position: 5% 50%;
 279    background-repeat: no-repeat;
 280    width: 90px;
 281    background-size: contain;
 282    position: relative;
 283 }
 284 .palette_node:hover {
 285   border-color: #ff7f0e;
 286   background-color: #eee;
 287 }
 288 .palette_port {
 289    position: absolute;
 290    top:8px;
 291    left: -5px;
 292    box-sizing: border-box;
 293     -moz-box-sizing: border-box;
 294    background:#d9d9d9;
 295    border-radius: 3px;
 296    width: 10px;
 297    height: 10px;
 298    border: 1px solid #999;
 299 }
 300 .palette_port_output {
 301     left:85px;
 302 }
 303
 304 .palette_node:hover .palette_port {
 305   border-color: #999;
 306   background-color: #eee;
 307 }
 308
 309 #sidebar {
 310     background: #fff;
 311     box-sizing: border-box;
 312     -moz-box-sizing: border-box;
 313 }
 314 #sidebar.closing {
 315     background: #eee;
 316     border-color: #900;
 317     border-style: dashed;
 318 }
 319
 320 /* ---------- Layout ---------- */
 321 #main-container {
 322     position: absolute;
 323     top:50px; left:0; bottom: 0; right:0;
 324     overflow:hidden;
 325 }
 326 #palette {
 327     position: absolute;
 328     top: 5px; left:10px; bottom: 10px;
 329 }
 330 #workspace {
 331     position: absolute;
 332     margin: 0;
 333     top:5px; left:160px; bottom: 10px; right: 330px;
 334 }
 335 #chart-zoom-controls {
 336     position: absolute;
 337     bottom:30px; right: 350px;
 338 }
 339 #sidebar {
 340     width: 305px;
 341     position: absolute;
 342     right: 10px; top: 5px; bottom:10px;
 343 }
 344 #sidebar-separator {
 345     width: 15px;
 346     background: url(grip.png) no-repeat 50% 50%;
 347     position: absolute;
 348     right: 316px; top: 5px; bottom:10px;
 349     cursor: col-resize;
 350 }
 351
 352 .sidebar-closed > #sidebar { display: none; }
 353 .sidebar-closed > #sidebar-separator { right: 0px !important; }
 354 .sidebar-closed > #workspace { right: 15px !important; }
 355 .sidebar-closed > #chart-zoom-controls { right: 35px !important; }
 356
 357 /* ---------- end layout ---------- */
 358
 359 .lasso {
 360     stroke-width: 2px;
 361     stroke: #ff7f0e;
 362     fill: rgba(20,125,255,0.1);
 363     stroke-dasharray: 10 5;
 364 }
 365
 366 .group-box {
 367     stroke-width: 1px;
 368     stroke: #aaaaaa;
 369     fill: rgba(208, 211, 238, 0.1);
 370     stroke-dasharray: 3 3;
 371 }
 372 .group-box-active {
 373     fill: #fff;
 374     stroke: #ff7f0e;
 375 }
 376
 377 .group_label {
 378    stroke-width: 0;
 379    fill: #999;
 380    font-size: 11px;
 381    pointer-events: none;
 382    -webkit-touch-callout: none;
 383    -webkit-user-select: none;
 384    -khtml-user-select: none;
 385    -moz-user-select: none;
 386    -ms-user-select: none;
 387    user-select: none;
 388 }
 389
 390 .pull-right {
 391     margin-left: 20px;
 392 }
 393
 394 #workspace, #palette, #sidebar {
 395    border: 1px solid #000;
 396    border-radius: 3px;
 397 }
 398 #sidebar-content {
 399     font-size: 1.2em;
 400     overflow-y: auto;
 401     position: absolute;
 402     top: 30px; left: 0px; right: 0; bottom: 1px;
 403 }
 404
 405 .node_label_italic {
 406     font-style: italic;
 407 }
 408 .node_label_unknown {
 409     font-style: italic;
 410     fill: #e00 !important;
 411 }
 412 .node_label_white {
 413   fill: #eee !important;
 414 }
 415 .node_label {
 416    stroke-width: 0;
 417    fill: #333;
 418    font-size: 14px;
 419    pointer-events: none;
 420    -webkit-touch-callout: none;
 421    -webkit-user-select: none;
 422    -khtml-user-select: none;
 423    -moz-user-select: none;
 424    -ms-user-select: none;
 425    user-select: none;
 426 }
 427
 428 .function_label {
 429    font-size: 12px;
 430 }
 431 .node {
 432   stroke: #999;
 433   cursor: move;
 434   stroke-width: 2;
 435 }
 436 .node_unknown {
 437     stroke-dasharray:10,4;
 438     stroke: #f33;
 439 }
 440 .tool_arrow {
 441    stroke-width: 1;
 442    stroke: #999;
 443    fill: #999;
 444    cursor: pointer;
 445 }
 446 .node_tools {
 447   fill: #ddd;
 448   stroke: #999;
 449   cursor: move;
 450   stroke-width: 1;
 451   cursor: pointer;
 452 }
 453 .node_tools_hovered {
 454   stroke: #ff7f0e;
 455   fill: #eee;
 456 }
 457
 458 .node_button {
 459     fill: inherit;
 460
 461 }
 462 .port {
 463    fill: #ddd;
 464    cursor: crosshair;
 465 }
 466 .node_error {
 467     stroke: #ff0000;
 468     stroke-width: 2;
 469     fill: #ff7f0e;
 470 }
 471
 472 .node_badge {
 473     stroke: rgb(93, 114, 145);
 474     stroke-width: 1;
 475     fill: rgb(190, 209, 255);
 476 }
 477 .node_badge_label {
 478    stroke-width:0;
 479    fill: #fff;
 480    font-size: 11px;
 481    pointer-events: none;
 482    -webkit-touch-callout: none;
 483    -webkit-user-select: none;
 484    -khtml-user-select: none;
 485    -moz-user-select: none;
 486    -ms-user-select: none;
 487    user-select: none;
 488
 489 }
 490 .node_invalid {
 491    stroke: #ff0000;
 492 }
 493 .node_selected {
 494    stroke: #ff7f0e;
 495 }
 496 .node_highlighted {
 497    stroke: #dd1616;
 498    stroke-width: 3;
 499    stroke-dasharray: 10, 4;
 500 }
 501 .node_hovered {
 502 }
 503
 504 .port_hovered {
 505   stroke: #ff7f0e;
 506   fill:  #ff7f0e;
 507 }
 508
 509 .drag_line {
 510   stroke: #ff7f0e;
 511   stroke-width: 5;
 512   fill: none;
 513   pointer-events: none;
 514 }
 515
 516 .drag_line_hidden {
 517   stroke: #ff7f0e;
 518   stroke-width: 0;
 519   pointer-events: none;
 520   fill: none;
 521 }
 522
 523 .link_line {
 524   stroke: #7f7f7f;
 525   stroke-width: 4;
 526   fill: none;
 527   pointer-events: none;
 528 }
 529
 530 .link_outline {
 531   stroke: #fff;
 532   stroke-width: 6;
 533   cursor: crosshair;
 534   fill: none;
 535   pointer-events: none;
 536 }
 537 .link_background {
 538   stroke: #fff;
 539   opacity: 0;
 540   stroke-width: 25;
 541   cursor: crosshair;
 542   fill: none;
 543 }
 544
 545 g.link_selected path.link_line {
 546   stroke: #ff7f0e;
 547 }
 548 g.link_unknown path.link_line {
 549    stroke: #f00;
 550    stroke-width: 2;
 551    stroke-dasharray: 10, 4;
 552 }
 553
 554 #shade {
 555    position: absolute;
 556    top:0;
 557    left:0;
 558    width: 100%;
 559    height: 100%;
 560    background: rgba(0,0,0,0.5);
 561    text-align: center;
 562    display: none;
 563 }
 564
 565 #dialog {
 566 }
 567
 568 .container {
 569 }
 570
 571 .notification {
 572     position: absolute;
 573 }
 574 #notifications {
 575     z-index: 10000;
 576     width: 500px;
 577     margin-left: -250px;
 578     left: 50%;
 579     position: absolute;
 580     top: 1px;
 581 }
 582 #notifications .alert {
 583     box-shadow: 0 0 1px 1px;
 584     margin-bottom: 5px;
 585 }
 586
 587 .form-row {
 588     clear: both;
 589     margin-bottom: 7px;
 590 }
 591 .form-row label {
 592     display: inline-block;
 593     width: 100px;
 594 }
 595 .form-row input {
 596     width:70%;
 597 }
 598
 599 input.input-append-left {
 600     border-top-right-radius: 0px;
 601     border-bottom-right-radius: 0px;
 602 }
 603 button.input-append-right {
 604     border-top-left-radius: 0px !important;
 605     border-bottom-left-radius: 0px !important;
 606     border-top-right-radius: 4px !important;
 607     border-bottom-right-radius: 4px !important;
 608     margin-left: -1px !important;
 609     padding-left: 4px !important;
 610     padding-right: 4px !important;
 611 }
 612
 613 .form-tips {
 614     background: lightgoldenrodyellow;
 615     font-size: 12px;
 616     padding: 8px;
 617     border-radius: 5px;
 618     border: 1px solid #999;
 619 }
 620 .form-tips code {
 621     border: none;
 622     padding: auto;
 623 }
 624
 625 .ui-tabs .ui-tabs-panel {
 626     padding: 0px;
 627 }
 628
 629 table.node-info {
 630     margin: 5px;
 631     width: 97%;
 632 }
 633 table.node-info tr {
 634     border: 1px solid #ddd;
 635 }
 636 table.node-info tr.blank {
 637     border: none;
 638 }
 639 table.node-info tr.blank td {
 640     padding-top: 8px;
 641     border: none;
 642     font-weight: bold;
 643     padding-left: 0px;
 644 }
 645 table.node-info td:first-child{
 646     color: #000;
 647     vertical-align: top;
 648     width: 90px;
 649     padding: 3px;
 650     border-right: 1px solid #ddd;
 651 }
 652 table.node-info td:last-child{
 653     padding-left: 5px;
 654     color: #666;
 655 }
 656
 657 div.node-info {
 658     margin: 5px;
 659 }
 660
 661 .input-error {
 662     border-color: rgb(214, 97, 95) !important;
 663 }
 664
 665 .hidden {
 666     display: none;
 667 }
 668 /*
 669 .dropdown-menu {
 670     font-size: 14px;
 671     background: #000;
 672 }
 673 .dropdown-menu .divider {
 674     background: #666;
 675     border-bottom: #666;
 676 }
 677 .dropdown-menu>li>a {
 678     color: #ddd;
 679 }
 680 .dropdown-submenu>ul {
 681     border: 1px solid white;
 682     border-radius: 6px !important;
 683 }
 684 .dropdown-menu li.disabled  a {
 685     color: #666;
 686 }
 687 .dropdown-menu li.disabled  a:hover {
 688     background: none;
 689 }
 690 */
 691 .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
 692     background: #999;
 693 }
 694
 695 .dropdown-menu * .fa-check {
 696     display: none;
 697     margin-right: -15px;
 698     margin-top: 3px;
 699 }
 700 .dropdown-menu * a.active > .fa-check {
 701     display: inline-block;
 702 }
 703 .dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
 704     background-image: url("bootstrap/img/glyphicons-halflings.png") !important;
 705 }
 706 /** Fix for unreachable dropdown menu **/
 707 .dropdown-menu  {
 708     width: 200px !important;
 709 }
 710 .dropdown-menu > li > a > i {
 711     width: 10px;
 712     text-align: center;
 713     margin-left: -8px;
 714 }
 715 .dropdown-menu > li > a {
 716      padding-left: 38px ;
 717      text-indent: -8px ;
 718      white-space: normal !important;
 719 }
 720
 721 .popover-title { display: none; }
 722
 723 .ui-autocomplete {
 724     max-height: 250px;
 725     overflow-x: hidden;
 726     overflow-y: scroll;
 727 }
 728
 729 .leftButton {
 730     margin-right: 200px !important;
 731 }
 732 #node-help {
 733     width: 700px;
 734 }
 735 #node-help * td {
 736     padding: 0.8em 0.5em;
 737 }
 738 #node-help * tr > td:first-child+td+td {
 739     padding-left: 5em;
 740 }
 741
 742 .help-key {
 743     border: 1px solid #ddd;
 744     padding: 4px;
 745     border-radius: 3px;
 746     background: #f6f6f6;
 747     font-family: Courier, monospace;
 748     box-shadow: #999 1px 1px 1px;
 749 }
 750
 751 #helpcontent {
 752     padding: 20px;
 753     border: 1px solid #ddd;
 754     border-radius: 10px;
 755
 756     background: #fff;
 757 }
 758 #helpnavigation {
 759     overflow: hidden;
 760     border: 1px solid #ddd;
 761     border-radius: 10px;
 762     background: #fff;
 763 }
 764 #helpnavigation li a{
 765     font-size: 1.2em;
 766     padding: 10px;
 767     border-bottom: 1px solid #ddd;
 768 }
 769
 770 #node-select-library {
 771     overflow: hidden;
 772 }
 773 #node-select-library ul {
 774     list-style: none;
 775     padding: 0px;
 776     margin: 2px;
 777 }
 778 #node-select-library li {
 779     cursor: pointer;
 780 }
 781 #node-select-library li.list-selected {
 782     background: #eee;
 783 }
 784 #node-select-library li.list-hover {
 785     background: #ffffd0;
 786 }
 787 .node-text-editor {
 788     border:1px solid #ccc;
 789     border-radius:5px;
 790     overflow: hidden;
 791 }
 792 #workspace-tabs {
 793     margin-right: 28px;
 794 }
 795 #workspace-add-tab {
 796     position: absolute;
 797     top: 0;
 798     right: 0;
 799     height: 29px;
 800     width: 28px;
 801     border-bottom: 1px solid #999;
 802 }
 803 #btn-workspace-add-tab {
 804     display: inline-block;
 805     width: 100%;
 806     background: #e3e3e3;
 807     height: 100%;
 808     line-height: 30px;
 809     text-align: center;
 810     color: #000;
 811 }
 812 #btn-workspace-add-tab:hover {
 813     background: #efefef;
 814 }
 815
 816 ul.red-ui-tabs {
 817     list-style-type: none;
 818     padding:5px 2px 0px 5px;
 819     margin: 0;
 820     display: block;
 821     height: 24px;
 822     border-bottom: 1px solid #999;
 823     background: #e3e3e3;
 824     -webkit-user-select: none;
 825     -khtml-user-select: none;
 826     -moz-user-select: none;
 827     -ms-user-select: none;
 828     user-select: none;
 829 }
 830
 831 ul.red-ui-tabs li {
 832     border-top-left-radius: 5px;
 833     border-top-right-radius: 5px;
 834     display: inline-block;
 835     border-left: 1px solid  #999;
 836     border-top: 1px solid   #999;
 837     border-right: 1px solid #999;
 838     border-bottom: 1px solid #999;
 839     background: #e3e3e3;
 840     margin: 0 5px 0 0;
 841     height: 23px;
 842     line-height: 17px;
 843     max-width: 150px;
 844     width: 14%;
 845     overflow: hidden;
 846     white-space: nowrap;
 847 }
 848
 849 ul.red-ui-tabs li a.red-ui-tab-label {
 850     display: block;
 851     padding: 3px 16px;
 852     color: #666;
 853 }
 854 ul.red-ui-tabs li {
 855     position: relative;
 856 }
 857
 858 ul.red-ui-tabs li a.red-ui-tab-close {
 859     background: rgba(227,227,227,0.8);
 860     position: absolute;
 861     right: 2px;
 862     top: 2px;
 863     display: block;
 864     width: 20px;
 865     height: 20px;
 866     line-height: 20px;
 867     text-align: center;
 868     padding: 0px;
 869     border-radius: 5px;
 870     color: #666;
 871 }
 872 ul.red-ui-tabs li a.red-ui-tab-close:hover {
 873     background: #bbb !important;
 874 }
 875 ul.red-ui-tabs li a:hover {
 876     text-decoration: none;
 877     background: #f0f0f0;
 878 }
 879
 880 ul.red-ui-tabs li.active {
 881     background: #fff;
 882     border-bottom: 1px solid #fff;
 883 }
 884 ul.red-ui-tabs li.active a {
 885     color: #333;
 886 }
 887 ul.red-ui-tabs li.active a.red-ui-tab-close {
 888     background: rgba(255,255,255,0.8);
 889 }
 890 ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
 891     background: #fff;
 892 }
 893 ul.red-ui-tabs li.red-ui-add-tab {
 894     width: 25px;
 895     border-top-right-radius: 15px;
 896     line-height: 22px;
 897 }
 898 ul.red-ui-tabs li.red-ui-add-tab a {
 899     padding: 2px 4px;
 900 }
 901
 902 ul.tab-config-list {
 903     list-style-type: none;
 904     padding: 3px;
 905     margin: 0;
 906    -webkit-user-select: none;
 907    -khtml-user-select: none;
 908    -moz-user-select: none;
 909    -ms-user-select: none;
 910    user-select: none;
 911 }
 912
 913 ul.tab-config-list li {
 914     max-width: 400px;
 915     font-size: 13px;
 916     background: #f3f3f3;
 917     margin: 10px auto;
 918     border-radius: 3px;
 919     border: 1px solid #ccc;
 920     padding: 3px 8px;
 921 }
 922 div.tab-config-list-type {
 923 }
 924
 925 div.tab-config-list-entry {
 926     position: relative;
 927     margin: 4px 0;
 928     padding: 8px 4px 8px 10px;
 929     background: #fff;
 930     border: 1px solid #ccc;
 931     border-radius: 4px;
 932     cursor: pointer;
 933 }
 934 div.tab-config-list-entry:hover {
 935     background: #f6f6f6;
 936 }
 937
 938 div.tab-config-list-label {
 939 }
 940 div.tab-config-list-users {
 941     position: absolute;
 942     right: 3px;
 943     top: 3px;
 944     bottom: 3px;
 945     line-height: 27px;
 946     font-size: 11px;
 947     background: #f6f6f6;
 948     float: right;
 949     border: 1px solid #eee;
 950     border-radius: 3px;
 951     padding: 1px 5px;
 952 }
 953
 954 i.spinner {
 955     display: inline-block;
 956     width: 14px;
 957     height: 14px;
 958     line-height: 14px;
 959     vertical-align: text-top;
 960     margin-top: 0px;
 961     background: url(spin.svg) no-repeat 50% 50%;
 962     background-size: contain
 963 }
 964
 965
 966