Merge pull request #17872 from eileenmcnaughton/ids

[civicrm-core.git] / css / dashboard.css

diff --git a/css/dashboard.css b/css/dashboard.css
index 58259f2fe6f483cbcfd2070e89f99153e44bcc50..7f783555fd5344f244c1f67dd602bd1cd116b641 100644 (file)
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -9,10 +9,8 @@
   float: left;
   margin: 0;
   /* padding-bottom and min-height make sure that there is always a sizable drop zone. */
-  min-height: 400px;
-  height: 400px;
-  height: auto !important;
-  padding: 0 0 250px;
+  min-height: 200px;
+  padding: 0 0 40px;
   list-style-type: none;
 }
 
@@ -27,43 +25,57 @@
 /* The placeholder that indicates where a dragged widget will land if dropped now. */
 #crm-container .placeholder {
   margin: 5px;
-  border: 3px dashed pink;
+  border: 3px dashed #CDE8FE;
 }
 
 /* Spacing between widgets. */
-#crm-container li.widget, #crm-container li.empty-placeholder { margin: 6px 3px; }
+#crm-container li.widget,
+#crm-container li.empty-placeholder {
+  margin: 0 3px 10px 3px;
+}
 #crm-container li.widget {
-  padding: 0px;
+  padding: 0;
 }
 
 /* Spacing inside widgets. */
 #crm-container .widget-wrapper {
-  padding: 0px;
-  overflow-x:auto;
-  margin-right: .25em
+  padding: 0;
+  overflow: hidden;
+  margin-right: .25em;
+  box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
+  border-radius: 3px;
+}
+
+#crm-container .widget-wrapper.db-hover-handle {
+  box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.2);
+}
+
+#crm-container .ui-sortable-helper .widget-wrapper {
+  box-shadow: 1px 1px 8px 3px rgba(0,0,0,0.5);
 }
 
-/* wodget header / title */
+/* widget header / title */
 #crm-container .widget-header {
-  background:#CDE8FE none repeat scroll 0 0;
-  color:#000;
-  cursor:move;
-  display:inline;
-  font-size:1.2em;
-  margin:0;
+  background: transparent none repeat scroll 0 0;
+  cursor: move;
+  margin: 0 50px 0 0;
+  padding: 0;
+  color: #fcfcfc;
 }
 
 /* widget content / body*/
 #crm-container .widget-content {
   background-color: #ffffff;
   padding:0.5em;
+  overflow-x:auto;
+  min-height: 10em;
 }
 
-/* Standards-browsers do this anyway because all inner block elements are floated.  IE doesn't because it's crap. */
 #crm-container .widget-controls {
-  background-color:#CDE8FE;
-  display:block;
-  padding:5px 0px;
+  background-color: #5D677B;
+  /* Standards-browsers do this anyway because all inner block elements are floated.  IE doesn't because it's crap. */
+  display: block;
+  padding: 5px 0;
 }
 
 #crm-container .widget-icon, #crm-container .full-screen-close-icon img {
@@ -100,11 +112,11 @@
   font-weight: normal;
   float: left;
   cursor: pointer;
-  color: #222222;
+  color: #fcfcfc;
   opacity: .7;
 }
 
-#crm-container .widget-controls .crm-i:hover {
+#crm-container .widget-controls:hover .crm-i {
   opacity: 1;
 }
 
@@ -117,7 +129,7 @@
 
 #crm-container #available-dashlets {
   width: 98%;
-  border: 2px dashed pink;
+  border: 2px dashed #CDE8FE;
   background-color: #999999;
   min-height:40px;
 }
@@ -186,3 +198,13 @@
 #crm-container .ui-sortable-placeholder * {
   visibility: hidden;
 }
+
+@media screen and (max-device-width: 50em), screen and (max-width: 50em) {
+  #crm-container .column {
+    width: 100%;
+    min-height: 0;
+  }
+  #crm-container .column-0 {
+    padding: 0;
+  }
+}