dgbuilder/public/style.css

   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 .palette-bar-closed > #palette { display: none; }
 358 .palette-bar-closed > #workspace { margin-left: -140px !important; }
 359 /* ---------- end layout ---------- */
 360
 361 .lasso {
 362     stroke-width: 2px;
 363     stroke: #ff7f0e;
 364     fill: rgba(20,125,255,0.1);
 365     stroke-dasharray: 10 5;
 366 }
 367
 368 .group-box {
 369     stroke-width: 1px;
 370     stroke: #aaaaaa;
 371     fill: rgba(208, 211, 238, 0.1);
 372     stroke-dasharray: 3 3;
 373 }
 374 .group-box-active {
 375     fill: #fff;
 376     stroke: #ff7f0e;
 377 }
 378
 379 .group_label {
 380    stroke-width: 0;
 381    fill: #999;
 382    font-size: 11px;
 383    pointer-events: none;
 384    -webkit-touch-callout: none;
 385    -webkit-user-select: none;
 386    -khtml-user-select: none;
 387    -moz-user-select: none;
 388    -ms-user-select: none;
 389    user-select: none;
 390 }
 391
 392 .pull-right {
 393     margin-left: 20px;
 394 }
 395
 396 #workspace, #palette, #sidebar {
 397    border: 1px solid #000;
 398    border-radius: 3px;
 399 }
 400 #sidebar-content {
 401     font-size: 1.2em;
 402     overflow-y: auto;
 403     position: absolute;
 404     top: 30px; left: 0px; right: 0; bottom: 1px;
 405 }
 406
 407 .node_label_italic {
 408     font-style: italic;
 409 }
 410 .node_label_unknown {
 411     font-style: italic;
 412     fill: #e00 !important;
 413 }
 414 .node_label_white {
 415   fill: #eee !important;
 416 }
 417 .node_label {
 418    stroke-width: 0;
 419    fill: #333;
 420    font-size: 14px;
 421    pointer-events: none;
 422    -webkit-touch-callout: none;
 423    -webkit-user-select: none;
 424    -khtml-user-select: none;
 425    -moz-user-select: none;
 426    -ms-user-select: none;
 427    user-select: none;
 428 }
 429
 430 .function_label {
 431    font-size: 12px;
 432 }
 433 .node {
 434   stroke: #999;
 435   cursor: move;
 436   stroke-width: 2;
 437 }
 438 .node_unknown {
 439     stroke-dasharray:10,4;
 440     stroke: #f33;
 441 }
 442 .tool_arrow {
 443    stroke-width: 1;
 444    stroke: #999;
 445    fill: #999;
 446    cursor: pointer;
 447 }
 448 .node_tools {
 449   fill: #ddd;
 450   stroke: #999;
 451   cursor: move;
 452   stroke-width: 1;
 453   cursor: pointer;
 454 }
 455 .node_tools_hovered {
 456   stroke: #ff7f0e;
 457   fill: #eee;
 458 }
 459
 460 .node_button {
 461     fill: inherit;
 462
 463 }
 464 .port {
 465    fill: #ddd;
 466    cursor: crosshair;
 467 }
 468 .node_error {
 469     stroke: #ff0000;
 470     stroke-width: 2;
 471     fill: #ff7f0e;
 472 }
 473
 474 .node_badge {
 475     stroke: rgb(93, 114, 145);
 476     stroke-width: 1;
 477     fill: rgb(190, 209, 255);
 478 }
 479 .node_badge_label {
 480    stroke-width:0;
 481    fill: #fff;
 482    font-size: 11px;
 483    pointer-events: none;
 484    -webkit-touch-callout: none;
 485    -webkit-user-select: none;
 486    -khtml-user-select: none;
 487    -moz-user-select: none;
 488    -ms-user-select: none;
 489    user-select: none;
 490
 491 }
 492 .node_invalid {
 493    stroke: #ff0000;
 494 }
 495 .node_selected {
 496    stroke: #ff7f0e;
 497 }
 498 .node_found {
 499  stroke:blue;
 500  /*
 501   stroke-width :3;
 502  stroke-dasharray:5,1;
 503 */
 504 }
 505 .text_found {
 506  stroke:green;
 507   stroke-width :3;
 508  stroke-dasharray:5,1;
 509 }
 510 .node_highlighted {
 511    stroke: #dd1616;
 512    stroke-width: 3;
 513    stroke-dasharray: 10, 4;
 514 }
 515 .node_hovered {
 516 }
 517
 518 .port_hovered {
 519   stroke: #ff7f0e;
 520   fill:  #ff7f0e;
 521 }
 522
 523 .drag_line {
 524   stroke: #ff7f0e;
 525   stroke-width: 5;
 526   fill: none;
 527   pointer-events: none;
 528 }
 529
 530 .drag_line_hidden {
 531   stroke: #ff7f0e;
 532   stroke-width: 0;
 533   pointer-events: none;
 534   fill: none;
 535 }
 536
 537 .link_line {
 538   stroke: #7f7f7f;
 539   stroke-width: 4;
 540   fill: none;
 541   pointer-events: none;
 542 }
 543
 544 .link_outline {
 545   stroke: #fff;
 546   stroke-width: 6;
 547   cursor: crosshair;
 548   fill: none;
 549   pointer-events: none;
 550 }
 551 .link_background {
 552   stroke: #fff;
 553   opacity: 0;
 554   stroke-width: 25;
 555   cursor: crosshair;
 556   fill: none;
 557 }
 558
 559 g.link_selected path.link_line {
 560   stroke: #ff7f0e;
 561 }
 562 g.link_unknown path.link_line {
 563    stroke: #f00;
 564    stroke-width: 2;
 565    stroke-dasharray: 10, 4;
 566 }
 567
 568 #shade {
 569    position: absolute;
 570    top:0;
 571    left:0;
 572    width: 100%;
 573    height: 100%;
 574    background: rgba(0,0,0,0.5);
 575    text-align: center;
 576    display: none;
 577 }
 578
 579 #dialog {
 580 }
 581
 582 .container {
 583 }
 584
 585 .notification {
 586     position: absolute;
 587 }
 588 #notifications {
 589     z-index: 10000;
 590     width: 500px;
 591     margin-left: -250px;
 592     left: 50%;
 593     position: absolute;
 594     top: 1px;
 595 }
 596 #notifications .alert {
 597     box-shadow: 0 0 1px 1px;
 598     margin-bottom: 5px;
 599 }
 600
 601 .form-row {
 602     clear: both;
 603     margin-bottom: 7px;
 604 }
 605 .form-row label {
 606     display: inline-block;
 607     width: 100px;
 608 }
 609 .form-row input {
 610     width:70%;
 611 }
 612
 613 input.input-append-left {
 614     border-top-right-radius: 0px;
 615     border-bottom-right-radius: 0px;
 616 }
 617 button.input-append-right {
 618     border-top-left-radius: 0px !important;
 619     border-bottom-left-radius: 0px !important;
 620     border-top-right-radius: 4px !important;
 621     border-bottom-right-radius: 4px !important;
 622     margin-left: -1px !important;
 623     padding-left: 4px !important;
 624     padding-right: 4px !important;
 625 }
 626
 627 .form-tips {
 628     background: lightgoldenrodyellow;
 629     font-size: 12px;
 630     padding: 8px;
 631     border-radius: 5px;
 632     border: 1px solid #999;
 633 }
 634 .form-tips code {
 635     border: none;
 636     padding: auto;
 637 }
 638
 639 .ui-tabs .ui-tabs-panel {
 640     padding: 0px;
 641 }
 642
 643 table.node-info {
 644     margin: 5px;
 645     width: 97%;
 646 }
 647 table.node-info tr {
 648     border: 1px solid #ddd;
 649 }
 650 table.node-info tr.blank {
 651     border: none;
 652 }
 653 table.node-info tr.blank td {
 654     padding-top: 8px;
 655     border: none;
 656     font-weight: bold;
 657     padding-left: 0px;
 658 }
 659 table.node-info td:first-child{
 660     color: #000;
 661     vertical-align: top;
 662     width: 90px;
 663     padding: 3px;
 664     border-right: 1px solid #ddd;
 665 }
 666 table.node-info td:last-child{
 667     padding-left: 5px;
 668     color: #666;
 669 }
 670
 671 div.node-info {
 672     margin: 5px;
 673 }
 674
 675 .input-error {
 676     border-color: rgb(214, 97, 95) !important;
 677 }
 678
 679 .hidden {
 680     display: none;
 681 }
 682 /*
 683 .dropdown-menu {
 684     font-size: 14px;
 685     background: #000;
 686 }
 687 .dropdown-menu .divider {
 688     background: #666;
 689     border-bottom: #666;
 690 }
 691 .dropdown-menu>li>a {
 692     color: #ddd;
 693 }
 694 .dropdown-submenu>ul {
 695     border: 1px solid white;
 696     border-radius: 6px !important;
 697 }
 698 .dropdown-menu li.disabled  a {
 699     color: #666;
 700 }
 701 .dropdown-menu li.disabled  a:hover {
 702     background: none;
 703 }
 704 */
 705 .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
 706     background: #999;
 707 }
 708
 709 .dropdown-menu * .fa-check {
 710     display: none;
 711     margin-right: -15px;
 712     margin-top: 3px;
 713 }
 714 .dropdown-menu * a.active > .fa-check {
 715     display: inline-block;
 716 }
 717 .dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
 718     background-image: url("bootstrap/img/glyphicons-halflings.png") !important;
 719 }
 720 /** Fix for unreachable dropdown menu **/
 721 .dropdown-menu  {
 722     width: 200px !important;
 723 }
 724 .dropdown-menu > li > a > i {
 725     width: 10px;
 726     text-align: center;
 727     margin-left: -8px;
 728 }
 729 .dropdown-menu > li > a {
 730      padding-left: 38px ;
 731      text-indent: -8px ;
 732      white-space: normal !important;
 733 }
 734
 735 .popover-title { display: none; }
 736
 737 .ui-autocomplete {
 738     max-height: 250px;
 739     overflow-x: hidden;
 740     overflow-y: scroll;
 741 }
 742
 743 .leftButton {
 744     margin-right: 200px !important;
 745 }
 746 #node-help {
 747     width: 700px;
 748 }
 749 #node-help * td {
 750     padding: 0.8em 0.5em;
 751 }
 752 #node-help * tr > td:first-child+td+td {
 753     padding-left: 5em;
 754 }
 755
 756 .help-key {
 757     border: 1px solid #ddd;
 758     padding: 4px;
 759     border-radius: 3px;
 760     background: #f6f6f6;
 761     font-family: Courier, monospace;
 762     box-shadow: #999 1px 1px 1px;
 763 }
 764
 765 #helpcontent {
 766     padding: 20px;
 767     border: 1px solid #ddd;
 768     border-radius: 10px;
 769
 770     background: #fff;
 771 }
 772 #helpnavigation {
 773     overflow: hidden;
 774     border: 1px solid #ddd;
 775     border-radius: 10px;
 776     background: #fff;
 777 }
 778 #helpnavigation li a{
 779     font-size: 1.2em;
 780     padding: 10px;
 781     border-bottom: 1px solid #ddd;
 782 }
 783
 784 #node-select-library {
 785     overflow: hidden;
 786 }
 787 #node-select-library ul {
 788     list-style: none;
 789     padding: 0px;
 790     margin: 2px;
 791 }
 792 #node-select-library li {
 793     cursor: pointer;
 794 }
 795 #node-select-library li.list-selected {
 796     background: #eee;
 797 }
 798 #node-select-library li.list-hover {
 799     background: #ffffd0;
 800 }
 801 .node-text-editor {
 802     border:1px solid #ccc;
 803     border-radius:5px;
 804     overflow: hidden;
 805 }
 806 #workspace-tabs {
 807     margin-right: 28px;
 808 }
 809 #workspace-add-tab {
 810     position: absolute;
 811     top: 0;
 812     right: 0;
 813     height: 29px;
 814     width: 28px;
 815     border-bottom: 1px solid #999;
 816 }
 817 #btn-workspace-add-tab {
 818     display: inline-block;
 819     width: 100%;
 820     background: #e3e3e3;
 821     height: 100%;
 822     line-height: 30px;
 823     text-align: center;
 824     color: #000;
 825 }
 826 #btn-workspace-add-tab:hover {
 827     background: #efefef;
 828 }
 829
 830 ul.red-ui-tabs {
 831     list-style-type: none;
 832     padding:5px 2px 0px 5px;
 833     margin: 0;
 834     display: block;
 835     height: 24px;
 836     border-bottom: 1px solid #999;
 837     background: #e3e3e3;
 838     -webkit-user-select: none;
 839     -khtml-user-select: none;
 840     -moz-user-select: none;
 841     -ms-user-select: none;
 842     user-select: none;
 843 }
 844
 845 ul.red-ui-tabs li {
 846     border-top-left-radius: 5px;
 847     border-top-right-radius: 5px;
 848     display: inline-block;
 849     border-left: 1px solid  #999;
 850     border-top: 1px solid   #999;
 851     border-right: 1px solid #999;
 852     border-bottom: 1px solid #999;
 853     background: #e3e3e3;
 854     margin: 0 5px 0 0;
 855     height: 23px;
 856     line-height: 17px;
 857     max-width: 150px;
 858     width: 14%;
 859     overflow: hidden;
 860     white-space: nowrap;
 861 }
 862
 863 ul.red-ui-tabs li a.red-ui-tab-label {
 864     display: block;
 865     padding: 3px 16px;
 866     color: #666;
 867 }
 868 ul.red-ui-tabs li {
 869     position: relative;
 870 }
 871
 872 ul.red-ui-tabs li a.red-ui-tab-close {
 873     background: rgba(227,227,227,0.8);
 874     position: absolute;
 875     right: 2px;
 876     top: 2px;
 877     display: block;
 878     width: 20px;
 879     height: 20px;
 880     line-height: 20px;
 881     text-align: center;
 882     padding: 0px;
 883     border-radius: 5px;
 884     color: #666;
 885 }
 886 ul.red-ui-tabs li a.red-ui-tab-close:hover {
 887     background: #bbb !important;
 888 }
 889 ul.red-ui-tabs li a:hover {
 890     text-decoration: none;
 891     background: #f0f0f0;
 892 }
 893
 894 ul.red-ui-tabs li.active {
 895     background: #fff;
 896     border-bottom: 1px solid #fff;
 897 }
 898 ul.red-ui-tabs li.active a {
 899     color: #333;
 900 }
 901 ul.red-ui-tabs li.active a.red-ui-tab-close {
 902     background: rgba(255,255,255,0.8);
 903 }
 904 ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
 905     background: #fff;
 906 }
 907 ul.red-ui-tabs li.red-ui-add-tab {
 908     width: 25px;
 909     border-top-right-radius: 15px;
 910     line-height: 22px;
 911 }
 912 ul.red-ui-tabs li.red-ui-add-tab a {
 913     padding: 2px 4px;
 914 }
 915
 916 ul.tab-config-list {
 917     list-style-type: none;
 918     padding: 3px;
 919     margin: 0;
 920    -webkit-user-select: none;
 921    -khtml-user-select: none;
 922    -moz-user-select: none;
 923    -ms-user-select: none;
 924    user-select: none;
 925 }
 926
 927 ul.tab-config-list li {
 928     max-width: 400px;
 929     font-size: 13px;
 930     background: #f3f3f3;
 931     margin: 10px auto;
 932     border-radius: 3px;
 933     border: 1px solid #ccc;
 934     padding: 3px 8px;
 935 }
 936 div.tab-config-list-type {
 937 }
 938
 939 div.tab-config-list-entry {
 940     position: relative;
 941     margin: 4px 0;
 942     padding: 8px 4px 8px 10px;
 943     background: #fff;
 944     border: 1px solid #ccc;
 945     border-radius: 4px;
 946     cursor: pointer;
 947 }
 948 div.tab-config-list-entry:hover {
 949     background: #f6f6f6;
 950 }
 951
 952 div.tab-config-list-label {
 953 }
 954 div.tab-config-list-users {
 955     position: absolute;
 956     right: 3px;
 957     top: 3px;
 958     bottom: 3px;
 959     line-height: 27px;
 960     font-size: 11px;
 961     background: #f6f6f6;
 962     float: right;
 963     border: 1px solid #eee;
 964     border-radius: 3px;
 965     padding: 1px 5px;
 966 }
 967
 968 i.spinner {
 969     display: inline-block;
 970     width: 14px;
 971     height: 14px;
 972     line-height: 14px;
 973     vertical-align: text-top;
 974     margin-top: 0px;
 975     background: url(spin.svg) no-repeat 50% 50%;
 976     background-size: contain
 977 }
 978
 979
 980