css/crm.designer.css

   1 .crm-profile-selector {
   2     display: none;
   3 }
   4 .crm-profile-selector-preview-pane {
   5     width: 75%;
   6     min-width: 500px;
   7     height: 20em;
   8     border: 1px solid black;
   9     padding: 4px;
  10 }
  11
  12 .crm-container .crm-profile-selector-preview .icon {
  13   float: none;
  14 }
  15
  16 .crm-designer-toolbar {
  17   width: 290px;
  18   position: absolute;
  19   top: 0;
  20   right: 0;
  21 }
  22
  23 .crm-designer-toolbar hr,
  24 .crm-designer-palette-search {
  25   margin: 0.5em 0;
  26 }
  27
  28 .crm-designer-palette-search input {
  29   max-width: 75%;
  30 }
  31
  32 .crm-designer-toolbar .ui-resizable-w {
  33   border-left: 4px dotted #BFBFBF;
  34   cursor: ew-resize;
  35   height: 50px;
  36   top: 45%;
  37 }
  38
  39 .crm-designer-toolbar .ui-resizable-w:hover {
  40   border-left: 4px dotted #6B6B6B;
  41 }
  42
  43 .crm-designer-palette {
  44   height: 20em;
  45 }
  46
  47 .crm-designer-palette-section > a {
  48   font-weight: bold;
  49 }
  50
  51 .crm-designer-palette .crm-designer-palette-field,
  52 .crm-designer-palette .crm-designer-palette-field.disabled:hover {
  53   padding: 1px;
  54   border: 1px dashed transparent;
  55   background-color: transparent;
  56   margin-right: 0.5em;
  57 }
  58
  59 .crm-designer-palette .crm-designer-palette-field a {
  60   cursor: move;
  61 }
  62
  63 .crm-designer-palette .crm-designer-palette-field.disabled a {
  64   cursor: default;
  65 }
  66
  67 .crm-designer-palette .crm-designer-palette-field:hover,
  68 .crm-designer-fields-region .crm-designer-row:hover,
  69 .crm-designer-open .crm-designer-row,
  70 .crm-designer-row-placeholder {
  71   border: 1px dashed gray;
  72   cursor: move;
  73   background-color: #E9E9F5;
  74 }
  75
  76 .crm-container .crm-designer-palette .crm-designer-palette-tree a {
  77   color: #222;
  78   font-style: normal;
  79 }
  80
  81 .crm-container .crm-designer-palette .disabled a,
  82 .crm-designer-palette .crm-designer-palette-tree .disabled a.jstree-search {
  83   color: #999;
  84 }
  85
  86 .crm-designer-palette .jstree-leaf ins {
  87   width: 6px;
  88 }
  89
  90 /* Cancel hovering affect from JSTree theme -- we already do this! */
  91 .crm-designer-palette .crm-designer-palette-tree .jstree-hovered {
  92   background: transparent;
  93   border: 1px transparent;
  94   padding: 1px 2px 0 2px;
  95 }
  96
  97 .crm-designer-canvas {
  98   padding-right: 1em;
  99   margin-right: 300px;
 100 }
 101
 102 .crm-designer-buttonset-region {
 103   text-align: center;
 104   margin: auto;
 105 }
 106
 107 .crm-designer-field-binding {
 108   border: 1px inset black;
 109   padding: 0.4em;
 110   background: #ccc;
 111 }
 112
 113 .crm-designer-fields {
 114   min-width:100px;
 115   /* to allow dropping in big whitespace, coordinate with min-height of dialog */
 116   min-height:500px;
 117 }
 118
 119 .crm-designer-duplicate .crm-designer-row {
 120   background: #fbb;
 121 }
 122
 123 .crm-designer-duplicate .field-location_type_id,
 124 .crm-designer-duplicate .field-phone_type_id {
 125   color: #f00;
 126 }
 127
 128 .crm-designer-row .crm-designer-buttons {
 129   right: 5px;
 130   top: 5px;
 131   position: absolute;
 132   height: 20px;
 133 }
 134
 135 .crm-designer-fields-region .crm-designer-buttons {
 136   display: none;
 137 }
 138
 139 .crm-designer-fields-region .crm-designer-open .crm-designer-buttons,
 140 .crm-designer-row:hover .crm-designer-buttons {
 141   display: block;
 142 }
 143
 144 .crm-designer-row .crm-designer-buttons a {
 145   cursor: pointer;
 146   display: inline-block;
 147   border-radius: 4px;
 148   border: 1px solid #D7D7D7;
 149 }
 150
 151 .crm-designer-row .crm-designer-buttons a:hover,
 152 .crm-designer button:hover {
 153   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 154 }
 155
 156 .crm-designer .crm-designer-palette-tree button {
 157   font-size: .8em;
 158 }
 159
 160 .crm-designer .crm-designer-palette-tree span.ui-button-text,
 161 .crm-designer .crm-designer-edit-custom span.ui-button-text {
 162   padding: 0.4em;
 163 }
 164
 165 .crm-designer .crm-designer-edit-custom {
 166   position: absolute;
 167   right: 5px;
 168   top: 35px;
 169   font-size: .8em;
 170   border: 1px solid #CFCEC3;
 171 }
 172
 173 button#crm-designer-add-custom-set {
 174   margin-top: 10px;
 175 }
 176
 177 .ui-sortable-helper > .crm-designer-row {
 178   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 179   opacity: 0.75;
 180 }
 181
 182 .crm-designer-row .crm-designer-buttons a.crm-designer-action-settings:hover {
 183   background-color: #71D46E;
 184 }
 185
 186 .crm-designer-row .crm-designer-buttons a.crm-designer-action-remove:hover {
 187   background-color: #F19489;
 188 }
 189
 190 .crm-designer-row,
 191 .crm-designer-row-placeholder {
 192   border: 1px dashed transparent;
 193   padding: 0.3em;
 194   margin: auto;
 195   position: relative;
 196 }
 197
 198 .crm-designer-row-label {
 199   padding: 0.5em 0;
 200 }
 201
 202 .crm-designer-label {
 203   font-weight: bold;
 204 }
 205
 206 .crm-designer-row-placeholder {
 207   visibility: visible !important;
 208   height: 2em;
 209 }
 210
 211 .crm-designer-dialog .description {
 212   margin: 0 2em 0 0;
 213 }
 214
 215 .crm-designer-dialog .disabled .description {
 216   display: none;
 217 }
 218
 219 .crm-designer-dialog li.crm-designer-row-placeholder,
 220 .crm-designer-dialog li.ui-draggable-dragging,
 221 .crm-designer-dialog .bbf-form ul {
 222   list-style-image: none;
 223   list-style: none;
 224 }
 225
 226 .ui-dialog .crm-designer-dialog.ui-dialog-content {
 227   overflow: visible;
 228   padding-right: .25em;
 229 }
 230
 231 .crm-designer-dialog .full-height {
 232   height: 100%;
 233 }
 234
 235 .crm-designer {
 236   position: relative;
 237 }
 238
 239 .crm-profile-selector-preview-pane,
 240 .crm-designer-dialog .crm-designer .scroll {
 241   overflow-x: auto;
 242   overflow-y: scroll;
 243 }
 244
 245 .ui-dialog {
 246   border: 1px solid #444;
 247   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
 248 }
 249
 250 /* Hide annoying 'preview' message */
 251 .crm-profile-selector-preview-pane div.profile-preview-msg {
 252   display: none;
 253 }