[Summary view] [Print] [Text view]

   1  /* $Id: panels_dnd.css,v 1.3.2.15 2010/07/22 18:59:02 merlinofchaos Exp $ */
   2  
   3  #panels-dnd-main {
   4    margin: 0.5em 0;
   5  }
   6  
   7  #panels-dnd-main div.panels-display {
   8    padding: 0 0 .5em 0;
   9    border: 1px dashed #ddd;
  10    background: #f8f8f8;
  11    -webkit-border-radius: 0.333em;
  12    -moz-border-radius: 0.333em;
  13  }
  14  
  15  #panels-dnd-main div.panels-display h2.label {
  16    color: #555;
  17    text-shadow: #fff 1px 1px 1px;
  18    text-align: center;
  19    font-size: 13pt;
  20    margin: 0 0 .5em 0;
  21    padding-right: 16px;
  22    vertical-align: middle;
  23  }
  24  
  25  #panels-dnd-main div.panels-display .pane-add {
  26    float: left;
  27    margin: 2px;
  28    background: #999;
  29    border: 1px solid #fff;
  30  }
  31  
  32  #panels-dnd-main div.panels-display .pane-add-link {
  33    position: absolute;
  34    display: block;
  35    width: 16px;
  36    height: 16px;
  37    float: left;
  38    margin: 2px 2px 2px 4px;
  39  }
  40  
  41  div.panels-set-title-hide .panels-set-title {
  42    display: none !important;
  43  }
  44  
  45  /* Add Icon */
  46  #panels-dnd-main div.panels-display .pane-add-link  {
  47  }
  48  #panels-dnd-main div.panels-display .pane-add-link img {
  49    display: none;
  50  }
  51  #panels-dnd-main div.panels-display .pane-add-link a.ctools-dropdown-image-link {
  52    border: none;
  53    width: 16px;
  54    height: 18px;
  55    float: left;
  56    background: url('../images/sprite.png') no-repeat 0 -1178px;
  57  /*  background: url('../images/sprite.png') no-repeat -166px -582px; */
  58  }
  59  
  60  .panel-portlet {
  61    padding: 0em;
  62    background: #ffffff;
  63    border: 1px solid #bbb;
  64  }
  65  
  66  div.panels-set-title-hide .panel-pane-is-title {
  67    border: 1px solid #bbb;
  68  }
  69  
  70  .panel-pane-is-title {
  71    border: 2px solid #777;
  72  }
  73  
  74  /* Cog Icon */
  75  .panel-portlet .buttons a img {
  76    display: none;
  77    margin: 0;
  78  }
  79  .panel-portlet .buttons a.ctools-dropdown-image-link {
  80    border: none;
  81    width: 16px;
  82    height: 16px;
  83    margin: 0 5px 0 0;
  84    float: none;
  85    display: block;
  86    background: url('../images/sprite.png') no-repeat 0 -1178px;
  87  }
  88  
  89  #panels-dnd-main .panel-pane,
  90  #panels-dnd-main .helperclass {
  91    margin: .5em;
  92  }
  93  
  94  #panels-dnd-main-form .inline-icon-help {
  95    vertical-align: middle;
  96    margin: 2px 1px;
  97  }
  98  
  99  .panel-pane.hidden-pane {
 100    background: #f8f8f8;
 101  }
 102  
 103  .panel-portlet .pane-content {
 104    margin: .5em 0 .5em 0;
 105    padding: 0 .25em 0 .25em;
 106    display: none; /* initially hidden */
 107  }
 108  
 109  .panel-portlet .grabber {
 110    width: 100%;
 111    height: 20px;
 112    cursor: move;
 113    margin: 0 0 0.5em 0;
 114    overflow: hidden;
 115    background: #b3b3b3 url('../images/bg-shade-medium.png') repeat-x 0 100%;
 116    color: #fff;
 117    text-shadow: #555 1px 1px 1px;
 118    border-color: #999;
 119    font-weight: bold;
 120  }
 121  
 122  .panel-portlet.hidden-pane .grabber {
 123    background-color: #888;
 124  }
 125  
 126  .panel-portlet .changed div.grabber {
 127    background-color: #FFFFDD !important;
 128    border-bottom: 1px solid #3D9CD7 !important;
 129    color: black !important;
 130  }
 131  
 132  .panel-portlet .changed.hidden-pane div.grabber {
 133    background-color: #B4B488 !important;
 134    border-bottom: 1px solid #3D9CD7 !important;
 135  }
 136  
 137  .panel-portlet .changed div.grabber span.star {
 138    font-weight: bold;
 139    color: #E09010;
 140  }
 141  
 142  .panel-portlet .grabber:hover {
 143    color: #fff;
 144    background-color: #2F78A5;
 145  }
 146  
 147  .panel-portlet.hidden-pane .grabber:hover {
 148    background-color: #666;
 149  }
 150  
 151  .panel-portlet .grabber:active {
 152    background-color: red;
 153  }
 154  
 155  .panel-portlet .grabber:hover,
 156  .panel-portlet .grabber:active {
 157    background: #858585 url('../images/bg-shade-dark.png') repeat-x 0 100%;
 158    color: #fff;
 159    text-shadow: #333 1px 1px 1px;
 160    border-color: #858585;
 161  }
 162  
 163  .panel-portlet .grabber .text {
 164    margin-left: 3px;
 165    font-size: 90%;
 166    line-height: 20px;
 167  }
 168  
 169  .panel-portlet .buttons {
 170    float: right;
 171    padding: 0;
 172    margin: 0;
 173  }
 174  
 175  .panel-portlet .buttons input {
 176    margin: 0;
 177    padding: 0;
 178    display: inline;
 179  }
 180  
 181  .panel-portlet .buttons a img {
 182    margin: 2px 1px;
 183  }
 184  
 185  .panel-portlet .pane-title {
 186    font-size:110%;
 187    cursor: pointer;
 188  }
 189  
 190  .panel-portlet .panel-pane-collapsible {
 191    margin: 0;
 192    padding: 0;
 193  }
 194  
 195  .panel-portlet .toggle {
 196    float: left;
 197    width: 21px;
 198    height: 21px;
 199    cursor: pointer;
 200    background: url('../images/sky.png') no-repeat 6px -245px;
 201  }
 202  
 203  .panel-portlet .toggle-collapsed {
 204    background: url('../images/sky.png') no-repeat 6px -1021px;
 205  }
 206  
 207  /* CSS to guide a user to a place to drop */
 208  #panels-dnd-main .helperclass {
 209    border: 1px dashed red;
 210  }
 211  
 212  #panels-dnd-main .hoverclass {
 213    border: 1px solid red !important;
 214  }
 215  
 216  /* CSS for an area if something can be dropped in it */
 217  .panels-modal-content {
 218    background: #fff;
 219    color: #000;
 220    padding: 0;
 221    margin: 2px;
 222    border: 1px solid #000;
 223    width: 600px;
 224    text-align: left;
 225  }
 226  
 227  .panels-modal-content .modal-title {
 228    font-size: 120%;
 229    font-weight: bold;
 230    color: white;
 231    overflow: hidden;
 232    white-space: nowrap;
 233  }
 234  
 235  .panels-modal-content .modal-header {
 236    background-color: #2385c2;
 237    padding: 0 .25em 0 1em;
 238  }
 239  
 240  .panels-modal-content .modal-header a {
 241    color: white;
 242    float: right;
 243  }
 244  
 245  .panels-modal-content .modal-content {
 246    padding: 0 1em;
 247    overflow: auto;
 248    width: 575px;
 249    height: 400px;
 250  }
 251  
 252  .panels-modal-content .modal-form {
 253  }
 254  
 255  .panels-modal-content .form-checkboxes .form-item {
 256    float: left;
 257    width: 24%;
 258  }
 259  
 260  .panels-hidden,
 261  .panels-js-only {
 262    display: none;
 263  }
 264  
 265  a.close {
 266    color: white;
 267  }
 268  
 269  a.close:hover {
 270    text-decoration: none;
 271  }
 272  
 273  a.close img {
 274    position: relative;
 275    top: 1px;
 276  }
 277  
 278  .panels-section-title {
 279    clear: left;
 280    border-bottom: 1px solid #ddf;
 281    margin-bottom: .5em;
 282    text-align: left;
 283  }
 284  
 285  .panels-section-decorator {
 286  }
 287  
 288  .panels-add-content-modal .panels-modal-add-category {
 289    display: block;
 290    border-bottom: 1px solid white;
 291    padding-left: .5em;
 292    margin-left: -2px;
 293    position: relative;
 294  }
 295  
 296  .panels-add-content-modal .panels-modal-add-category.active {
 297    background: url(../images/arrow-active.png) center right no-repeat white;
 298    border-right: none;
 299  }
 300  
 301  .panels-add-content-modal {
 302    background: url(../images/bg-content-modal.png);
 303    height: 100%;
 304    margin: -1em;
 305    padding-top: 1em;
 306    padding-left: 175px;
 307    position: relative;
 308  }
 309  
 310  .panels-section-columns {
 311    height: 100%;
 312    overflow: auto;
 313  }
 314  .panels-section-column {
 315    width: 48%;
 316    float: left;
 317  }
 318  
 319  .panels-section-column .inside {
 320    padding: 0 1em;
 321  }
 322  
 323  .panels-section-column-categories {
 324    width: 173px;
 325    margin-left: -173px;
 326  }
 327  
 328  .panels-categories-description {
 329    padding: 0 1em;
 330    text-align: center;
 331    vertical-align: center;
 332  }
 333  
 334  * html .panels-section-column-categories {
 335    left: 173px;
 336    position: relative;
 337  }
 338  
 339  .panels-section-column-categories .panels-categories-box {
 340    border-top: 1px solid white;
 341    margin-bottom: 1em;
 342  }
 343  
 344  .panels-section-column-categories .inside {
 345    padding: 0;
 346   }
 347  
 348  .panels-section-column-categories .content-type-button {
 349    padding-left: 10px;
 350  }
 351  
 352  .panels-modal-add-category {
 353    color: #5b5b5b !important;
 354    font-weight: bold;
 355    line-height: 2em;
 356  }
 357  
 358  .panels-section {
 359    margin-bottom: 1em;
 360  }
 361  
 362  .panels-section-column .content-type-button {
 363    font-size: 8pt;
 364    line-height: 1em;
 365    overflow: hidden;
 366    text-align: left;
 367  }
 368  
 369  .content-type-button img {
 370    border: 2px solid white;
 371    float: left;
 372  }
 373  
 374  .content-type-button img:hover {
 375    border: 2px solid blue;
 376  }
 377  
 378  .content-type-button div {
 379    width: 85%;
 380    top: -5px;
 381    left: 2px;
 382    float: left;
 383    padding-left: 3px;
 384    padding-top: 5px;
 385  }
 386  
 387  #panels-preview .modal-throbber-wrapper {
 388    width: 100%;
 389    text-align: center;
 390    margin-left: auto;
 391    margin-right: auto;
 392  }
 393  /** modal forms CSS **/
 394  .panels-modal-content .form-item label {
 395    width: 8em;
 396    float: left;
 397  }
 398  
 399  .panels-modal-content .form-item label.option {
 400    width: auto;
 401    float: none;
 402  }
 403  
 404  .panels-modal-content .form-item .description {
 405    clear: left;
 406  }
 407  
 408  .panels-modal-content .form-item .description .tips {
 409    margin-left: 2em;
 410  }
 411  
 412  .panels-modal-content .no-float .form-item * {
 413    float: none;
 414  }
 415  
 416  .panels-modal-content .modal-form .no-float label  {
 417    width: auto;
 418  }
 419  
 420  .panels-modal-content .modal-form fieldset,
 421  .panels-modal-content .modal-form .form-checkboxes {
 422    clear: left;
 423  }
 424  
 425  #edit-configuration-nid {
 426    clear: left;
 427  }
 428  
 429  .option-text-aligner .form-item {
 430    float: left;
 431    padding: .25em 1em .25em 0;
 432    margin: 0;
 433  }
 434  
 435  .option-text-aligner {
 436    clear: both;
 437    width: 100%;
 438    padding: 0;
 439    margin: 0;
 440  }
 441  
 442  
 443  #panels-dnd-main div.panel-pane div.ctools-dropdown-container-wrapper {
 444    margin-left: -158px;
 445    margin-top: -4px;
 446  }
 447  
 448  /*
 449  html.js div.panels-display-links div.ctools-dropdown-container {
 450    width: 275px;
 451  }
 452  
 453  html.js div.panels-display-links div.ctools-dropdown-container ul li li a {
 454    width: 250px;
 455  }
 456  
 457  html.js div.panels-display-links div.ctools-dropdown-container ul li a {
 458    width: 270px;
 459  }
 460  */
 461  
 462  #panels-dnd-main .panel-pane .pane-title {
 463    padding: 0.25em 0.5em;
 464  }
 465  #panels-dnd-main .panel-pane .pane-title:after {
 466    font-size: 0.8em;
 467    color: crimson;
 468    letter-spacing: normal;
 469    display: block;
 470  }
 471  #panels-dnd-main .panel-pane.hidden-pane .pane-title:after {
 472    content: " status: hidden";
 473  }
 474  #panels-dnd-main .panel-pane.changed .pane-title:after {
 475    content: " status: changes not saved";
 476  }
 477  #panels-dnd-main .panel-pane.hidden-pane.changed .pane-title:after {
 478    content: " status: hidden & changed";
 479  }
 480  
 481  /* @end */
 482  
 483  
 484  /* @group CTools Dropdown */
 485  #panels-dnd-main .ctools-dropdown a.ctools-dropdown-text-link,
 486  html.js div.panels-display-links a.ctools-dropdown-text-link {
 487  
 488    background: url('../images/arrow-down-light.png') 0 3px no-repeat!important;
 489    padding-left: 12px;
 490  }
 491  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container,
 492  html.js div.panels-display-links div.ctools-dropdown-container {
 493    width: 160px!important;
 494    background: #fff url('../images/bg-shade-white-lrg.png') repeat-x 0 100%;
 495    border: solid 1px #ddd!important;
 496    margin: 0!important;
 497  /*  padding: 0.5em!important; */
 498    -webkit-border-radius: 0.333em;
 499    -moz-border-radius: 0.333em;
 500    -webkit-box-shadow: 0.333em 0.333em 0.333em rgba(0, 0, 0, 0.25);
 501    font-size: 0.9em;
 502    font-weight: bold;
 503  }
 504  
 505  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li,
 506  html.js div.panels-display-links div.ctools-dropdown-container ul li {
 507  
 508    text-decoration: none;
 509    padding: 0;
 510    margin: 0;
 511    color: #555!important;
 512    text-shadow: #fff 1px 1px 1px;
 513  }
 514  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.text,
 515  html.js div.panels-display-links div.ctools-dropdown-container ul li span.text {
 516  
 517    font-style: normal;
 518    color: #000;
 519    font-weight: bold;
 520  }
 521  
 522  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a,
 523  html.js div.panels-display-links div.ctools-dropdown-container ul li a {
 524    color: #555!important;
 525    font-weight: normal;
 526    width: auto;
 527    padding: 0 10px;
 528  }
 529  
 530  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.panels-text,
 531  html.js div.panels-display-links div.ctools-dropdown-container ul li span.panels-text {
 532    width: auto;
 533    padding: 0 10px;
 534  }
 535  
 536  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-italic,
 537  html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-italic {
 538    font-style: italic;
 539  }
 540  
 541  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.dropdown-header,
 542  html.js div.panels-display-links div.ctools-dropdown-container ul li span.dropdown-header {
 543    background-color: #fefefe;
 544    padding: 0 10px;
 545  }
 546  
 547  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
 548  html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
 549  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text,
 550  html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text {
 551    padding: 0 20px;
 552  }
 553  
 554  html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container hr,
 555  html.js div.panels-display-links div.ctools-dropdown-container hr {
 556    border: 0;
 557    color: #ddd;
 558    background-color: #ddd;
 559    height: 1px;
 560  }
 561  
 562  /*
 563  html.js #panels-dnd-main  div.ctools-dropdown div.ctools-dropdown-container ul li a:hover,
 564  html.js div.panels-display-links div.ctools-dropdown-container ul li a:hover {
 565    background: none!important;
 566    color: #000!important;
 567  }
 568  */
 569  /* @end */
 570  
 571  /* @group Modal */
 572  /* Account for the extra div coming from ctools_modal_form_render() */
 573  div.messages div.messages {
 574    background: none;
 575    border: none;
 576    margin: 0;
 577    padding: 0;
 578    -webkit-border-radius: 0;
 579    -moz-border-radius: 0;
 580  }
 581  div.ctools-modal-content .modal-header {
 582    background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
 583    color: #777;
 584    display: block;
 585    font-weight: 700;
 586    letter-spacing: normal;
 587    padding: 0.25em 1em;
 588    -moz-border-radius-topleft: 0.5em;
 589    -moz-border-radius-topright: 0.5em;
 590    -webkit-border-top-left-radius: 0.5em;
 591    -webkit-border-top-right-radius: 0.5em;
 592  }
 593  div.ctools-modal-content .modal-title {
 594    font-size: 120%;
 595    font-weight: bold;
 596    text-shadow: #fff 1px 1px 1px;
 597    color: #555;
 598  }
 599  div.ctools-modal-content a.close {
 600    color: #666;
 601    font-weight: normal;
 602    padding-left: 1.6em;
 603    background: url('../images/sprite.png') no-repeat -166px -1686px;
 604  }
 605  div.ctools-modal-content a.close img {
 606    display: none;
 607  }
 608  /** modal forms CSS **/
 609  div.ctools-modal-content .form-item label {
 610    width: 100%;
 611    float: none;
 612    clear: both;
 613  }
 614  div.ctools-modal-content .resizable-textarea {
 615    width: 100%;
 616    margin-left: 0;
 617    margin-right: 0;
 618  }
 619  div.ctools-modal-content {
 620    font-size: 12px;
 621    border: solid 1px #ddd;
 622    -webkit-border-radius: 0.5em;
 623    -moz-border-radius: 0.5em;
 624    -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
 625  }
 626  #modalBackdrop {
 627    position: fixed!important;
 628    background-color: #000!important;
 629  }
 630  /* @end */