Case ui enhancements & code cleanup

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

diff --git a/css/civicrm.css b/css/civicrm.css
index 803481e9f5e3edf0afe509698b83cd8068b68588..1bd09ba7e4a2ad33ee0bf547acd47bdf41195367 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1633,21 +1633,63 @@ editor specific classes
   line-height: 15px;
 }
 
-/* Styles for Action Items &  Action Link pop-up */
-.crm-container .action-item {
-  padding: 0px 5px;
-  border-left: 1px solid #CCC;
-  white-space: nowrap;
-}
 .crm-container .action-item-wrap {
   padding: 0px 5px;
   border-left: 1px solid #CCC;
   white-space: normal;
 }
-.crm-container .action-item-first {
-  border-left: none;
-  /* last action item should not have right hand border */}
 
+/* Hover-buttons */
+.crm-container span.crm-hover-button,
+.crm-container a.crm-hover-button {
+  display: inline-block;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  text-decoration: none;
+  font-size: .8em;
+  color: #000;
+  padding: 1px 2px 1px 0;
+  opacity: .7;
+}
+.crm-container a.crm-hover-button.action-item,
+.crm-container .crm-hover-button.btn-slide {
+  font-size: .9em;
+  padding: 3px 5px;
+  opacity: 1;
+}
+.crm-container .btn-slide .action-item {
+  white-space: normal;
+}
+.crm-container .crm-accordion-header .crm-hover-button {
+  opacity: 1;
+  position: relative;
+  top: -4px;
+}
+.crm-container .crm-hover-button:hover,
+.crm-container a.crm-hover-button:hover,
+.crm-container a.crm-hover-button:active {
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #ccc));
+  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #ccc 100%);
+  background-image: -moz-linear-gradient(center bottom, #eee 0%, #ccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
+  background-image: linear-gradient(top, #eee 0%, #ccc 100%);
+  border: 1px solid #AAAAAA;
+  border-radius: 4px;
+  opacity: 1;
+  color: #2786C2;
+}
+.crm-container .crm-hover-button .icon {
+  margin-left: 3px;
+  position: relative;
+  top: 2px;
+}
+.crm-container .crm-hover-button:hover .icon,
+.crm-container .crm-hover-button:active .icon {
+  background-image: url("../i/icons/jquery-ui-2786C2.png");
+}
+.crm-container a.action-item {
+  display: inline;
+}
 
 /* theming for panel and context menus */
 .crm-container td ul.panel li {
@@ -1692,23 +1734,30 @@ editor specific classes
   width: auto;
 }
 
-.crm-container .btn-slide {
+.crm-container span.btn-slide {
   text-align: left;
-  text-decoration: none;
-  border: none;
   cursor: pointer;
   position: relative;
-  padding: 0px 14px 0 5px;
-  background: url("../i/TreePlus.gif") no-repeat right 1px;
   white-space: nowrap;
-  z-index: 2;
+  padding-right: 15px !important;
+  display: inline;
 }
+.crm-container .btn-slide:after {
+  content: "";
+  display: block;
+  height: 15px;
+  position: absolute;
+  right: 2px;
+  top: 3px;
+  width: 15px;
+  background: url("../i/TreePlus.gif") no-repeat right 1px;
+}
+
 
-.crm-container .btn-slide-active {
+.crm-container .btn-slide-active .panel {
   z-index: 10;
 }
 
-.crm-container .crm-configure-actions,
 .crm-container .crm-event-participants,
 .crm-container .crm-event-links,
 .crm-container .crm-event-more {
@@ -1720,7 +1769,6 @@ editor specific classes
   text-decoration: none;
   padding: 4px;
   display: block;
-  border: none;
   cursor: pointer;
 }
 
@@ -1782,15 +1830,10 @@ div.grippie {
 .crm-container .crm-tab-button a,
 .crm-container .ui-tabs .ui-tabs-nav li a {
   padding: 5px !important;
-  color: #fafafa;
-}
-
-.crm-container .crm-tab-button a,
-.crm-container .ui-tabs .ui-tabs-nav li.ui-state-active a {
-  color: #090909;
 }
 
 .crm-container .crm-tab-button a em {
+  color: #555555;
   font-style: normal;
 }
 
@@ -2208,6 +2251,11 @@ div.grippie {
   margin-left: 8px;
 }
 
+.crm-container .crm-clear-link {
+  margin-left: .5em;
+}
+
+.crm-container .crm-button,
 #crm-container .crm-button {
   border: medium none;
   cursor: pointer;
@@ -2219,6 +2267,8 @@ div.grippie {
   padding: 0px 4px;
   cursor: pointer;
 }
+
+.crm-container .crm-button input,
 #crm-container .crm-button input {
   background: none;
   _background: #6C6C6C;
@@ -2231,10 +2281,14 @@ div.grippie {
   margin: 0 0 0 0px;
   padding: 1px 8px 2px 4px;
 }
+
+.crm-container .crm-button-type-cancel,
+.crm-container .crm-button-type-back,
 #crm-container .crm-button-type-cancel,
 #crm-container .crm-button-type-back {
   margin-left: 20px;
 }
+.crm-container .crm-button-type-cancel input,
 #crm-container .crm-button-type-cancel input {
   color: #E6E6DC!important;
 }
@@ -2243,6 +2297,7 @@ div.grippie {
 .crm-container a.button:link,
 .crm-container a.button:visited,
 .crm-container input.form-submit,
+.crm-container .crm-button,
 #crm-container input[type=button],
 #crm-container input.form-submit-inline,
 #crm-container .crm-button {
@@ -2258,6 +2313,7 @@ div.grippie {
   border: 1px solid #3e3e3e;
 }
 
+.crm-container .crm-button,
 #crm-container .crm-button {
   padding: 1px;
 }
@@ -2268,6 +2324,9 @@ div.grippie {
   padding: 2px 6px;
 }
 
+.crm-container .crm-button input[type=button],
+.crm-container .crm-button input.form-submit,
+.crm-container .crm-button input.form-submit-inline,
 #crm-container .crm-button input[type=button],
 #crm-container .crm-button input.form-submit,
 #crm-container .crm-button input.form-submit-inline {
@@ -2428,7 +2487,7 @@ div.grippie {
 .crm-container .icon {
   height: 16px;
   width: 16px;
-  background: transparent url("../i/icons/jquery-ui-52534D.png") no-repeat top right;
+  background-image: url("../i/icons/jquery-ui-52534D.png");
   float: left;
   text-indent: -10000px;
 }
@@ -2441,6 +2500,8 @@ div.grippie {
 .crm-container .button .icon,
 .crm-container .crm-button .icon,
 .crm-accordion-header .icon {
+  position: relative;
+  top: -2px;
   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
 }
 .crm-container .button:hover .icon,
@@ -2453,10 +2514,8 @@ div.grippie {
 }
 
 .crm-container .dark-icon {
-  background-image: url("../packages/jquery/jquery-ui/css/black-tie/images/ui-icons_222222_256x240.png")}
-.crm-container .red-icon {
-  background-image: url("../i/icons/jquery-ui-8A1F11.png")}
-
+  background-image: url("../packages/jquery/jquery-ui/css/theme/images/ui-icons_222222_256x240.png")
+}
 .crm-container .edit-icon {
   background-position: -64px -112px;
 }
@@ -2478,8 +2537,10 @@ div.grippie {
 .crm-container .details-icon {
   background-position: -128px -112px;
 }
-.crm-container .button:hover .delete-icon {
-  background-image: url("../i/icons/jquery-ui-8A1F11.png")!important;
+.crm-container .red-icon,
+.crm-container a:hover .icon.delete-icon,
+.crm-container span:hover .icon.delete-icon {
+  background-image: url("../i/icons/jquery-ui-8A1F11.png");
 }
 
 .crm-container .restore-icon {
@@ -2502,14 +2563,14 @@ div.grippie {
   background-position: -192px -128px;
 }
 
-.crm-container .new_individual-icon,
+.crm-container .Individual-profile-icon,
 .crm-container .user-record-icon {
   background-position: -144px -96px;
 }
-.crm-container .new_household-icon {
+.crm-container .Household-profile-icon {
   background-position: 0 -112px;
 }
-.crm-container .new_organization-icon {
+.crm-container .Organization-profile-icon {
   background-position: -112px -112px;
 }
 .crm-container .inform-icon {
@@ -2628,40 +2689,6 @@ div.grippie {
   background-position: -32px -32px;
 }
 
-/* Icon hover-buttons */
-.crm-container a.crm-hover-button {
-  display: inline-block;
-  border: 1px solid transparent;
-  text-decoration: none;
-  font-size: .8em;
-  color: #000;
-  padding: 1px 2px 1px 0;
-  opacity: .7;
-}
-.crm-container .crm-accordion-header a.crm-hover-button {
-  opacity: 1;
-}
-.crm-container a.crm-hover-button:hover,
-.crm-container a.crm-hover-button:active {
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #ccc));
-  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #ccc 100%);
-  background-image: -moz-linear-gradient(center bottom, #eee 0%, #ccc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
-  background-image: linear-gradient(top, #eee 0%, #ccc 100%);
-  border: 1px solid #AAAAAA;
-  border-radius: 4px;
-  opacity: 1;
-  color: #2786C2;
-}
-.crm-container .crm-hover-button .icon {
-  margin-left: 3px;
-  position: relative;
-  top: 2px;
-}
-.crm-container .crm-hover-button:hover .icon,
-.crm-container .crm-hover-button:active .icon {
-  background-image: url("../i/icons/jquery-ui-2786C2.png");
-}
 /* accordion styles */
 
 .crm-container .crm-accordion-header {
@@ -2770,10 +2797,6 @@ div.grippie {
 }
 
 /* civicrm admin menu */
-#civicrm-menu {
-  height: 27px;
-}
-
 #civicrm-menu .ui-autocomplete-input,
 .crm-container .ui-autocomplete-input,
 .crm-container .ac_input {
@@ -2797,28 +2820,33 @@ div.grippie {
   padding: 2px 16px 3px 2px;
 }
 
-/* Status message bar */
-#civicrm-menu .crm-menubar-status-container {
-  position: absolute;
-  right: 2px;
+/* Status message box */
+.crm-status-box-outer {
+  position: fixed;
+  z-index: 9999;
+  right: 0;
   top: 0;
-  border-top: 1px solid #1B1B1B;
 }
 
-#civicrm-menu .crm-menubar-status-progressbar {
+.crm-status-box-outer.status-start {
+  background: #F8FF03 url("../packages/jquery/jquery-ui/css/theme/images/animated-overlay.gif");
+}
+
+.crm-status-box-outer .crm-status-box-inner {
   padding: 3px 14px;
-  font-size: 14px !important;
+  font-size: 13px !important;
+  color: #eee;
   font-weight: bold;
-  background: rgba(142, 136, 0, 0.9);
   text-align: center;
+  background: rgba(94, 91, 31, 0.9);
 }
 
-#civicrm-menu .status-busy {
-  background: #F8FF03 url("../packages/jquery/jquery-ui/css/black-tie/images/animated-overlay.gif");
+.crm-status-box-outer.status-success .crm-status-box-inner {
+  background: rgba(30, 143, 36, 0.7);
 }
 
-#civicrm-menu .status-done .crm-menubar-status-progressbar {
-  background: rgba(41, 152, 32, 0.7);
+.crm-status-box-outer.status-error .crm-status-box-inner {
+  background: rgba(255, 7, 0, 0.7);
 }
 
 /* Pop-up help icon - eliminate forced line break */
@@ -2996,7 +3024,6 @@ div#crm-container form {
   margin: 0;
   cursor: pointer;
   * cursor: hand;
-  color: white !important;
 }
 
 .crm-container .dataTables_paginate .ui-button {
@@ -3563,16 +3590,15 @@ tbody.scrollContent tr.alternateRow {
 }
 
 .crm-container .disabled,
-.crm-container .cancelled {
+.crm-container .cancelled,
+#mainTabContainer li.disabled a.ui-tabs-anchor,
+#mainTabContainer li.crm-count-0 a.ui-tabs-anchor,
+#mainTabContainer li.crm-count-0 a.ui-tabs-anchor em {
   color: #999999 !important;
 }
 #mainTabContainer li.disabled {
   text-decoration: none;
 }
-#mainTabContainer li.disabled a.ui-tabs-anchor,
-#mainTabContainer li.crm-count-0 a.ui-tabs-anchor {
-  color: #999999 !important;
-}
 #crm-container tr.crm-job {
   text-decoration: none !important;
 }
@@ -3853,37 +3879,40 @@ div.m ul#civicrm-menu,
   background-position: -18px 1px;
 }
 /* Style autocomplete results */
-.crm-container .select2-results table.crm-select2-row,
-.crm-container .select2-results table.crm-select2-row tbody,
-.crm-container .select2-results table.crm-select2-row tr,
-.crm-container .select2-results table.crm-select2-row td {
-  border: 0 none;
+.crm-container .select2-results {
+  padding: 0;
+}
+.crm-container .select2-results li,
+.crm-container .select2-results .crm-select2-row,
+.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
   padding: 0;
   margin: 0;
-  border-collapse: collapse;
 }
-.crm-container .select2-results table.crm-select2-row .crm-select2-row-label {
+.crm-container .select2-results .crm-select2-row .crm-select2-row-label {
   font-size: 1.1em;
 }
-.crm-container .select2-results table.crm-select2-row .crm-select2-row-description {
+.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
   font-size: 0.8em;
   line-height: 1.5em;
   color: #696969;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.crm-container .select2-results .select2-highlighted table.crm-select2-row .crm-select2-row-description {
+.crm-container .select2-results .select2-highlighted .crm-select2-row .crm-select2-row-description p {
   color: #f0f0f0;
 }
-.crm-container .select2-results td.crm-select2-icon {
+.crm-container .select2-results .crm-select2-icon {
   width: 20px;
+  height: 100%;
+  float: left;
 }
-.crm-container .select2-results td.crm-select2-icon .crm-icon {
+.crm-container .select2-results .crm-select2-icon .crm-icon {
   width: 16px;
   height: 16px;
   margin: 0;
 }
-.crm-container .select2-results {
-  padding: 0;
-}
 .crm-container .select2-results li.select2-no-results {
   padding-left: 4px;
   padding-top: 4px;
@@ -3893,6 +3922,19 @@ div.m ul#civicrm-menu,
   margin: 0;
   padding: 0;
 }
+.crm-container .crm-action-menu .select2-default span.select2-chosen {
+  color: #2786C2;
+}
+.crm-container .crm-action-menu .select2-default span.select2-chosen:before {
+  background: url("../i/icons/jquery-ui-2786C2.png") no-repeat scroll -64px -112px;
+  content: "";
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-right: 3px;
+  position: relative;
+  top: 3px;
+}
 
 /* Special styling for specific form buttons */
 #crm-container span.crm-button_qf_Main_upload input,
@@ -3901,11 +3943,25 @@ div.m ul#civicrm-menu,
   font-size: 1.2em;
 }
 
-/*Import progress bar */
+/* jQuery UI styles */
 .crm-container .ui-progressbar-value {
   background-image: url("../packages/jquery/css/images/pbar-ani.gif");
 }
 
+.crm-container.ui-dialog {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+}
+
+.crm-container .ui-dialog-titlebar.ui-widget-header {
+  background: url("../i/crm-button-bg.gif") repeat-x scroll left center #70716B;
+  color: white;
+}
+.crm-container .ui-dialog-title {
+  background: url("../i/logo16px.png") no-repeat scroll 0 center;
+  margin-left: -5px;
+  padding-left: 25px;
+}
+
 /*Needed for jstree contextmenu */
 #vakata-contextmenu.jstree-default-context li {
   background: none repeat scroll 0 0 transparent;