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 pink;
  31 }
  32
  33 /* Spacing between widgets. */
  34 #crm-container li.widget, #crm-container li.empty-placeholder { margin: 6px 3px; }
  35 #crm-container li.widget {
  36   padding: 0px;
  37 }
  38
  39 /* Spacing inside widgets. */
  40 #crm-container .widget-wrapper {
  41   padding: 0px;
  42   overflow-x:auto;
  43   margin-right: .25em
  44 }
  45
  46 /* wodget header / title */
  47 #crm-container .widget-header {
  48   background:#CDE8FE none repeat scroll 0 0;
  49   color:#000;
  50   cursor:move;
  51   display:inline;
  52   font-size:1.2em;
  53   margin:0;
  54 }
  55
  56 /* widget content / body*/
  57 #crm-container .widget-content {
  58   background-color: #ffffff;
  59   padding:0.5em;
  60 }
  61
  62 /* Standards-browsers do this anyway because all inner block elements are floated.  IE doesn't because it's crap. */
  63 #crm-container .widget-controls {
  64   background-color:#CDE8FE;
  65   display:block;
  66   padding:5px 0px;
  67 }
  68
  69 #crm-container .widget-icon, #crm-container .full-screen-close-icon img {
  70   display: block;
  71   float: right;
  72   margin-left: 2px;
  73   margin-top: 2px;
  74   cursor: pointer;
  75 }
  76
  77 #full-screen-header {
  78   display: block;
  79   padding: .2em .4em;
  80   background: #F0F0E8;
  81   /* Although this is an <a> link, it doesn't have an href="" attribute. */
  82   cursor: pointer;
  83 }
  84
  85 /* Make the throbber in-yer-face. */
  86 #crm-container .throbber {
  87   text-align: right;
  88   background:url("../packages/jquery/css/images/throbber.gif") no-repeat scroll 0 0 transparent;
  89   height:20px;
  90   width:20px;
  91 }
  92
  93 #crm-container p.loadtext {
  94   margin:1.6em 0 0 26px;
  95 }
  96
  97 #crm-container .widget-icon {
  98   background-image:url('../bower_components/jquery-ui/themes/smoothness/images/ui-icons_222222_256x240.png');
  99   height:16px;
 100   width:16px;
 101   padding-right:2px;
 102   float: left;
 103   border-radius: 2px;
 104 }
 105 #crm-container .widget-icon.minimize-icon {
 106   background-position:-63px -17px;
 107 }
 108
 109 #crm-container .widget-icon.maximize-icon {
 110   background-position:-31px -18px;
 111 }
 112
 113 #crm-container .widget-icon.fullscreen-icon {
 114   background-position:-48px -80px;
 115   float:right;
 116 }
 117 #crm-container .widget-icon.close-icon {
 118   background-position: -80px -128px;
 119   float:right;
 120 }
 121 #crm-container .widget-icon:hover {
 122   background-color: rgba(255, 255, 255, 0.8);
 123 }
 124
 125 /* CSS for Dashlets */
 126
 127 #crm-container #available-dashlets {
 128   width: 98%;
 129   border: 2px dashed pink;
 130   background-color: #999999;
 131   min-height:40px;
 132 }
 133
 134 #crm-container .dash-column {
 135   border: 2px solid #696969;
 136   min-height: 100px;
 137   background-color: #EEEEEE
 138 }
 139
 140 #crm-container .dashlets-header {
 141   font-weight: bold;
 142 }
 143
 144 #crm-container #dashlets-header-col-0 {
 145   float: left;
 146   width: 40%;
 147 }
 148
 149 #crm-container #dashlets-header-col-1 {
 150   margin-left: 42%;
 151   width: 56%;
 152 }
 153
 154 #crm-container #existing-dashlets-col-0 {
 155   float: left;
 156   width: 40%;
 157 }
 158
 159 #crm-container #existing-dashlets-col-1 {
 160   margin-left: 42%;
 161   width: 56%;
 162 }
 163
 164 #crm-container .portlet {
 165   margin: .5em;
 166   width: 75%;
 167   display: inline-block;
 168 }
 169
 170 #crm-container .portlet-header {
 171   margin: 0.3em;
 172   padding: 0.5em;
 173   cursor: pointer;
 174 }
 175
 176 #crm-container #available-dashlets .portlet {
 177   width: auto;
 178 }
 179
 180 #crm-container .portlet-header .ui-icon {
 181   float: right;
 182 }
 183
 184 #crm-container .portlet-content {
 185   padding: 0.4em;
 186 }
 187
 188 #crm-container .ui-sortable-placeholder {
 189   border: 1px dotted black;
 190   visibility: visible !important;
 191   height: 50px !important;
 192 }
 193
 194 #crm-container .ui-sortable-placeholder * {
 195   visibility: hidden;
 196 }