stylizer.css

/* Farbtastic placement */
.color-form {
  max-width: 50em;
  position: relative;
  min-height: 195px;
}
#placeholder {
/*
  position: absolute;
  top: 0;
  right: 0;
*/
  margin: 0 auto;
  width: 195px;
}

/* Palette */
.color-form .form-item {
  height: 2em;
  line-height: 2em;
  padding-left: 1em; /* LTR */
  margin: 0.5em 0;
}

.color-form .form-item input {
  margin-top: .2em;
}

.color-form label {
  float: left; /* LTR */
  clear: left; /* LTR */
  width: 14em;
}
.color-form .form-text,
.color-form .form-select {
  float: left; /* LTR */
}
.color-form .form-text {
  text-align: center;
  margin-right: 5px; /* LTR */
  cursor: pointer;
}

#palette .hook {
  float: left; /* LTR */
  margin-top: 3px;
  width: 16px;
  height: 16px;
}
#palette .up {
  background-position: 100% -27px; /* LTR */
}
#palette .both {
  background-position: 100% -54px; /* LTR */
}


#palette .form-item {
  width: 24em;
}
#palette .item-selected {
  background: #eee;
}

/* Preview */
#preview {
  width: 45%;
  float: right;
  margin: 0;
}

#ctools_stylizer_color_scheme_form {
  float: left;
  width: 45%;
  margin: 0;
}

/* general style for the layout-icon */
.ctools-style-icon .caption {
  width: 100px;
  margin-bottom: 1em;
  line-height: 1em;
  text-align: center;
  cursor: default;
}

.ctools-style-icons .form-item {
  width: 100px;
  float: left;
  margin: 0 3px !important;
}

.ctools-style-icons .form-item .ctools-style-icon {
  float: none;
  height: 150px;
  width: 100px;
}

.ctools-style-icons .form-item label.option {
  width: 100px;
  display: block;
  text-align: center;
}

.ctools-style-icons .form-item label.option input {
  margin: 0 auto;
}

.ctools-style-icons .ctools-style-category {
  height: 190px;
}

.ctools-style-icons .ctools-style-category label {
  font-weight: bold;
  width: 100%;
  float: left;
}

/**
 * Stylizer font editor widget
 */
.ctools-stylizer-spacing-form .form-item {
  float: left;
  margin: .25em;
}

#edit-font-font {
  width: 9em;
}

File

css/stylizer.css

View source 
  1. /* Farbtastic placement */

  2. .color-form {

  3.   max-width: 50em;

  4.   position: relative;

  5.   min-height: 195px;

  6. }

  7. #placeholder {

  8. /*

  9.   position: absolute;

  10.   top: 0;

  11.   right: 0;

  12. */

  13.   margin: 0 auto;

  14.   width: 195px;

  15. }

  16. 

  17. /* Palette */

  18. .color-form .form-item {

  19.   height: 2em;

  20.   line-height: 2em;

  21.   padding-left: 1em; /* LTR */

  22.   margin: 0.5em 0;

  23. }

  24. 

  25. .color-form .form-item input {

  26.   margin-top: .2em;

  27. }

  28. 

  29. .color-form label {

  30.   float: left; /* LTR */

  31.   clear: left; /* LTR */

  32.   width: 14em;

  33. }

  34. .color-form .form-text,

  35. .color-form .form-select {

  36.   float: left; /* LTR */

  37. }

  38. .color-form .form-text {

  39.   text-align: center;

  40.   margin-right: 5px; /* LTR */

  41.   cursor: pointer;

  42. }

  43. 

  44. #palette .hook {

  45.   float: left; /* LTR */

  46.   margin-top: 3px;

  47.   width: 16px;

  48.   height: 16px;

  49. }

  50. #palette .up {

  51.   background-position: 100% -27px; /* LTR */

  52. }

  53. #palette .both {

  54.   background-position: 100% -54px; /* LTR */

  55. }

  56. 

  57. 

  58. #palette .form-item {

  59.   width: 24em;

  60. }

  61. #palette .item-selected {

  62.   background: #eee;

  63. }

  64. 

  65. /* Preview */

  66. #preview {

  67.   width: 45%;

  68.   float: right;

  69.   margin: 0;

  70. }

  71. 

  72. #ctools_stylizer_color_scheme_form {

  73.   float: left;

  74.   width: 45%;

  75.   margin: 0;

  76. }

  77. 

  78. /* general style for the layout-icon */

  79. .ctools-style-icon .caption {

  80.   width: 100px;

  81.   margin-bottom: 1em;

  82.   line-height: 1em;

  83.   text-align: center;

  84.   cursor: default;

  85. }

  86. 

  87. .ctools-style-icons .form-item {

  88.   width: 100px;

  89.   float: left;

  90.   margin: 0 3px !important;

  91. }

  92. 

  93. .ctools-style-icons .form-item .ctools-style-icon {

  94.   float: none;

  95.   height: 150px;

  96.   width: 100px;

  97. }

  98. 

  99. .ctools-style-icons .form-item label.option {

  100.   width: 100px;

  101.   display: block;

  102.   text-align: center;

  103. }

  104. 

  105. .ctools-style-icons .form-item label.option input {

  106.   margin: 0 auto;

  107. }

  108. 

  109. .ctools-style-icons .ctools-style-category {

  110.   height: 190px;

  111. }

  112. 

  113. .ctools-style-icons .ctools-style-category label {

  114.   font-weight: bold;

  115.   width: 100%;

  116.   float: left;

  117. }

  118. 

  119. /**

  120.  * Stylizer font editor widget

  121.  */

  122. .ctools-stylizer-spacing-form .form-item {

  123.   float: left;

  124.   margin: .25em;

  125. }

  126. 

  127. #edit-font-font {

  128.   width: 9em;

  129. }