css/dashboard.css

   1 /**
   2 * @file
   3 *    CSS for the jQuery.dashboard() plugin.
   4 *
   5 * Released under the GNU General Public License.  See LICENSE.txt.
   6 */
   7
   8 #crm-container .column {
   9   float: left;
  10   margin: 0;
  11   /* padding-bottom and min-height make sure that there is always a sizable drop zone. */
  12   min-height: 400px;
  13   height: 400px;
  14   height: auto !important;
  15   padding: 0 0 250px;
  16   list-style-type: none;
  17 }
  18
  19 #crm-container .column-0 {
  20   width: 40%;
  21 }
  22
  23 #crm-container .column-1 {
  24   width: 60%;
  25 }
  26
  27 /* The placeholder that indicates where a dragged widget will land if dropped now. */
  28 #crm-container .placeholder {
  29   margin: 5px;
  30   border: 3px dashed #CDE8FE;
  31 }
  32
  33 /* Spacing between widgets. */
  34 #crm-container li.widget,
  35 #crm-container li.empty-placeholder {
  36   margin: 0 3px 10px 3px;
  37 }
  38 #crm-container li.widget {
  39   padding: 0;
  40 }
  41
  42 /* Spacing inside widgets. */
  43 #crm-container .widget-wrapper {
  44   padding: 0;
  45   overflow: hidden;
  46   margin-right: .25em;
  47   box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
  48   border-radius: 3px;
  49 }
  50
  51 #crm-container .widget-wrapper.db-hover-handle {
  52   box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.2);
  53 }
  54
  55 #crm-container .ui-sortable-helper .widget-wrapper {
  56   box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.5);
  57 }
  58
  59 /* widget header / title */
  60 #crm-container .widget-header {
  61   background: transparent none repeat scroll 0 0;
  62   cursor: move;
  63   margin: 0 50px 0 0;
  64   padding: 0;
  65   color: #fcfcfc;
  66 }
  67
  68 /* widget content / body*/
  69 #crm-container .widget-content {
  70   background-color: #ffffff;
  71   padding:0.5em;
  72   overflow-x:auto;
  73   min-height: 10em;
  74 }
  75
  76 #crm-container .widget-content .crm-accordion-header {
  77   background-color: #EFEFE5;
  78   background-image: url("../i/TreeMinus.gif");
  79   color: #080808;
  80 }
  81
  82 #crm-container .widget-content .crm-accordion-wrapper.collapsed .crm-accordion-header {
  83   background-image: url("../i/TreePlus.gif");
  84 }
  85
  86 #crm-container .widget-content .crm-accordion-header:hover {
  87   background-color: #e8e8de;
  88 }
  89
  90 #crm-container .widget-content .crm-accordion-body {
  91   border-color: #e8e8de;
  92   padding: 4px .5em;
  93 }
  94
  95 #crm-container .widget-controls {
  96   background-color: #5D677B;
  97   /* Standards-browsers do this anyway because all inner block elements are floated.  IE doesn't because it's crap. */
  98   display: block;
  99   padding: 5px 0;
 100 }
 101
 102 #crm-container .widget-icon, #crm-container .full-screen-close-icon img {
 103   display: block;
 104   float: right;
 105   margin-left: 2px;
 106   margin-top: 2px;
 107   cursor: pointer;
 108 }
 109
 110 #full-screen-header {
 111   display: block;
 112   padding: .2em .4em;
 113   background: #F0F0E8;
 114   /* Although this is an <a> link, it doesn't have an href="" attribute. */
 115   cursor: pointer;
 116 }
 117
 118 /* Make the throbber in-yer-face. */
 119 #crm-container .throbber {
 120   text-align: right;
 121   background:url("../packages/jquery/css/images/throbber.gif") no-repeat scroll 0 0 transparent;
 122   height:20px;
 123   width:20px;
 124 }
 125
 126 #crm-container p.loadtext {
 127   margin:1.6em 0 0 26px;
 128 }
 129
 130 #crm-container .widget-controls .crm-i {
 131   font-size: 14px;
 132   padding: 0 6px;
 133   font-weight: normal;
 134   float: left;
 135   cursor: pointer;
 136   color: #fcfcfc;
 137   opacity: .7;
 138 }
 139
 140 #crm-container .widget-controls:hover .crm-i {
 141   opacity: 1;
 142 }
 143
 144 #crm-container .widget-controls .crm-i.fa-expand,
 145 #crm-container .widget-controls .crm-i.fa-times {
 146   float:right;
 147 }
 148
 149 /* CSS for Dashlets */
 150
 151 #crm-container #available-dashlets {
 152   width: 98%;
 153   border: 2px dashed #CDE8FE;
 154   background-color: #999999;
 155   min-height:40px;
 156 }
 157
 158 #crm-container .dash-column {
 159   border: 2px solid #696969;
 160   min-height: 100px;
 161   background-color: #EEEEEE
 162 }
 163
 164 #crm-container .dashlets-header {
 165   font-weight: bold;
 166 }
 167
 168 #crm-container #dashlets-header-col-0 {
 169   float: left;
 170   width: 40%;
 171 }
 172
 173 #crm-container #dashlets-header-col-1 {
 174   margin-left: 42%;
 175   width: 56%;
 176 }
 177
 178 #crm-container #existing-dashlets-col-0 {
 179   float: left;
 180   width: 40%;
 181 }
 182
 183 #crm-container #existing-dashlets-col-1 {
 184   margin-left: 42%;
 185   width: 56%;
 186 }
 187
 188 #crm-container .portlet {
 189   margin: .5em;
 190   width: 75%;
 191   display: inline-block;
 192 }
 193
 194 #crm-container .portlet-header {
 195   margin: 0.3em;
 196   padding: 0.5em;
 197   cursor: pointer;
 198 }
 199
 200 #crm-container #available-dashlets .portlet {
 201   width: auto;
 202 }
 203
 204 #crm-container .portlet-header .crm-i {
 205   float: right;
 206   color: #52534D;
 207 }
 208
 209 #crm-container .portlet-content {
 210   padding: 0.4em;
 211 }
 212
 213 #crm-container .ui-sortable-placeholder {
 214   border: 1px dotted black;
 215   visibility: visible !important;
 216   height: 50px !important;
 217 }
 218
 219 #crm-container .ui-sortable-placeholder * {
 220   visibility: hidden;
 221 }