Merge pull request #2575 from lcdservices/CRM-14287

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

diff --git a/css/civicrm.css b/css/civicrm.css
index 5d5c0c9d9c45e4ef8cf03e763d66e1f53e4d128c..9b0be57d6e5b7001abd013ba215ba7ec6dbdb228 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -11,6 +11,10 @@ div.crm-container label {
   display: inline;
 }
 
+div.crm-container fieldset label{
+  float: none;
+}
+
 .crm-container .crm-quickSearchField {
   font-weight: normal;
 }
@@ -42,7 +46,7 @@ div.crm-container label {
   margin: 0em 0em 1em;
   border-collapse: collapse;
   width: 100%;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .crm-container table.criteria-group {
@@ -63,7 +67,7 @@ div.crm-container label {
   border-style: solid;
   border-width: 1px 1px 2px;
   color: #A7A7A7;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   padding: 4px;
   text-align: left;
@@ -167,7 +171,8 @@ div.crm-container label {
 .crm-container .big {
   width: 15em;
 }
-.crm-container .huge {
+.crm-container .huge,
+input.crm-form-entityref {
   width: 25em;
 }
 .crm-container .huge40 {
@@ -212,81 +217,16 @@ div.crm-container label {
   background-color: #B0B0B0;
 }
 
-.crm-container select {
-  vertical-align: middle;
-  border: 1px solid #999;
-}
-
 .crm-container .crm-form-block {
   padding: 4px;
   margin-bottom: 4px;
-  font-size: 12px;
+  font-size: 13px;
   background-color: #E6E6DC;
   color: #3E3E3E;
 }
 
-/* crm advanced select styling */
-.crm-container .crmasmContainer,
-.crm-container .crmasmSelect,
-.crm-container .crmasmSelectCampaigns,
-.crm-container .crmtagContainer,
-.crm-container .crmtagSelect {
-  width: 160px;
-}
-
-.crm-container .crmasmSelect,
-.crm-container .crmtagSelect,
-.crm-container .crmasmSelectCampaigns {
-  padding: 2px;
-}
-
-.crm-container .crmasmSelect .child-1 {
-  padding-left: 1em;
-}
-.crm-container .crmasmSelect .child-2 {
-  padding-left: 2em;
-}
-
-.crm-container .crmasmHighlight,
-.crm-container .crmtagHighlight {
-  display: block;
-  padding: 2px 4px;
-  background-color: #EEF4B8;
-}
-
-.crm-container .crmasmList,
-.crm-container .crmtagList {
-  margin: 0px;
-  padding: 0px;
-}
-
-.crm-container .crmasmList li,
-.crm-container .crmtagList li {
-  background-color: #3E3E3E;
-  background-image: none;
-  padding: 2px 4px;
-  list-style-type: none;
-  margin: 1px 0px;
-  color: #F5F6F1;
-}
-
-.crm-container .crmasmListItem,
-.crm-container .crmtagListItem {
-  position: relative;
-}
-
-.crm-container .crmasmListItemRemove,
-.crm-container .crmtagListItemRemove {
-  padding: 5px;
-  position: absolute;
-  right: 5px;
-  top: 2px;
-  font-size: 11px;
-  margin: 0px;
-  padding: 0px;
-}
-
-.crm-container textarea {
+.crm-container textarea,
+.crm-container select.crm-form-multiselect {
   border: 1px solid #999;
 }
 
@@ -350,11 +290,12 @@ div.crm-container label {
   width: 6em;
 }
 
-.crm-container input[type="text"],
-.crm-container input[type="password"] {
+.crm-container input.crm-form-text,
+.crm-container input.dateplugin {
   border: 1px solid #999;
   vertical-align: middle;
-  padding-left: 1px;
+  padding: 1px 2px;
+  height: 1.8em;
 }
 
 .crm-container .form-submit {
@@ -852,8 +793,7 @@ div.crm-container label {
  */
 
 /* Inline form field 'post-help' and radio-button unselect */
-.crm-container .description,
-.crm-container .crm-clear-link {
+.crm-container .description {
   font-size: 0.9em;
   font-weight: normal;
   white-space: normal;
@@ -876,7 +816,7 @@ div.crm-container label {
   background-color: #F1F8EB;
   border: 1px solid #B0D730;
   color: #3E3E3E;
-  font-size: 12px;
+  font-size: 13px;
   margin: 0 0 8px;
   padding: 4px;
 }
@@ -1064,7 +1004,7 @@ div.crm-container label {
 
 .crm-container #search-status {
   border: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: normal;
 }
 
@@ -1109,7 +1049,7 @@ div.crm-container label {
   border: medium none;
   color: #FFFFFF;
   margin-left: 5px;
-  font-size: 12px;
+  font-size: 13px;
   font-family: Verdana;
   padding: 2px 0 0 0px;
 }
@@ -1865,7 +1805,7 @@ div.grippie {
 
 #crm-container .ui-tabs-panel {
   padding: 4px;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 #crm-container div.contact_details {
@@ -2272,6 +2212,7 @@ div.grippie {
   margin-left: .5em;
 }
 
+.crm-container .crm-button,
 #crm-container .crm-button {
   border: medium none;
   cursor: pointer;
@@ -2283,6 +2224,8 @@ div.grippie {
   padding: 0px 4px;
   cursor: pointer;
 }
+
+.crm-container .crm-button input,
 #crm-container .crm-button input {
   background: none;
   _background: #6C6C6C;
@@ -2290,15 +2233,19 @@ div.grippie {
   border: medium none;
   color: #FFF;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: normal;
   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;
 }
@@ -2307,13 +2254,14 @@ 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 {
   text-shadow: 0 1px 0 black;
   background: #70716B url(../i/crm-button-bg.gif) repeat-x top left;
   color: #FFF;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: normal;
   margin-right: 6px;
   padding: 2px 6px;
@@ -2322,6 +2270,7 @@ div.grippie {
   border: 1px solid #3e3e3e;
 }
 
+.crm-container .crm-button,
 #crm-container .crm-button {
   padding: 1px;
 }
@@ -2332,6 +2281,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 {
@@ -2503,7 +2455,8 @@ div.grippie {
 }
 
 .crm-container .button .icon,
-.crm-container .crm-button .icon {
+.crm-container .crm-button .icon,
+.crm-accordion-header .icon {
   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
 }
 .crm-container .button:hover .icon,
@@ -2521,25 +2474,25 @@ div.grippie {
   background-image: url("../i/icons/jquery-ui-8A1F11.png")}
 
 .crm-container .edit-icon {
-  background-position: -66px -114px;
+  background-position: -64px -112px;
 }
 .crm-container .previous-icon {
-  background-position: -82px -161px;
+  background-position: -80px -160px;
 }
 .crm-container .next-icon {
-  background-position: -66px -161px;
+  background-position: -64px -160px;
 }
 .crm-container .add-icon {
-  background-position: -2px -193px;
+  background-position: 0 -192px;
 }
 .crm-container .back-icon {
-  background-position: -2px -65px;
+  background-position: 0 -64px;
 }
 .crm-container .delete-icon {
-  background-position: -179px -99px;
+  background-position: -176px -96px;
 }
 .crm-container .details-icon {
-  background-position: -129px -112px;
+  background-position: -128px -112px;
 }
 .crm-container .button:hover .delete-icon {
   background-image: url("../i/icons/jquery-ui-8A1F11.png")!important;
@@ -2554,28 +2507,34 @@ div.grippie {
 }
 
 .crm-container .vcard-icon {
-  background-position: -35px -81px;
+  background-position: -32px -80px;
 }
 
 .crm-container .print-icon {
-  background-position: -162px -97px;
+  background-position: -160px -96px;
 }
 
 .crm-container .dashboard-icon {
-  background-position: -194px -129px;
+  background-position: -192px -128px;
 }
 
+.crm-container .new_individual-icon,
 .crm-container .user-record-icon {
-  background-position: -145px -98px;
+  background-position: -144px -96px;
+}
+.crm-container .new_household-icon {
+  background-position: 0 -112px;
+}
+.crm-container .new_organization-icon {
+  background-position: -112px -112px;
 }
-
 .crm-container .inform-icon {
   background-position: -16px -144px;
   margin-right: 5px;
 }
 
 .crm-container .dropdown-icon {
-  background-position: -46px -32px;
+  background-position: -48px -32px;
   float: right;
 }
 
@@ -2587,29 +2546,31 @@ div.grippie {
   background-position: 0 -144px;
 }
 .crm-container .check-icon {
-  background-position: -66px -146px;
+  background-position: -64px -144px;
 }
 .crm-container .refresh-icon {
-  background-position: -65px -81px;
+  background-position: -64px -80px;
 }
 .crm-container .settings-icon {
-  background-position: -178px -114px;
+  background-position: -176px -112px;
 }
 .crm-container .search-icon {
-  background-position: -161px -114px;
+  background-position: -160px -112px;
 }
 .crm-container .email-icon {
-  background-position: -81px -98px;
+  background-position: -80px -96px;
 }
 .crm-container .preview-icon {
-  background-position: -227px -129px;
+  background-position: -224px -128px;
 }
 .crm-container .play-icon {
-  background-position: -3px -161px;
+  background-position: 0 -160px;
+}
+.crm-container .close-icon {
+  background-position: -80px -128px;
 }
-
 .crm-container .swap-icon {
-  background-position: -82px -81px;
+  background-position: -80px -80px;
 }
 
 #crm-container .geotag {
@@ -2627,29 +2588,34 @@ div.grippie {
   /* for accessibility reason, put the name of the type/subtype in the icon div (it will be hidden and replaced by the icon) */
 }
 
+.select2-results .select2-highlighted .Individual-icon,
 .crm-container .Individual-icon {
   background-position: 0px 0px;
 }
-.crm-container .Group-icon {
-  background-position: -16px 0px;
+.select2-results .select2-highlighted .Organization-icon,
+.crm-container .Organization-icon {
+  background-position: -48px 0px;
 }
+.select2-results .select2-highlighted .Household-icon,
 .crm-container .Household-icon {
   background-position: -32px 0px;
 }
-
+.crm-container .Group-icon {
+  background-position: -16px 0px;
+}
+.select2-results .Individual-icon,
 .crm-container .Individual-subtype-icon {
   background-position: 0px -48px;
 }
+.select2-results .Household-icon,
 .crm-container .Household-subtype-icon {
   background-position: -32px -48px;
 }
+.select2-results .Organization-icon,
 .crm-container .Organization-subtype-icon {
   background-position: -48px -48px;
 }
 
-.crm-container .Organization-icon {
-  background-position: -48px 0px;
-}
 .crm-container .Activity-icon {
   background-position: -64px 0px;
 }
@@ -2678,6 +2644,40 @@ 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 {
@@ -2726,7 +2726,7 @@ div.grippie {
 }
 
 .crm-container .crm-accordion-inner .crm-accordion-header {
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .crm-container .crm-accordion-wrapper {
@@ -2779,20 +2779,6 @@ div.grippie {
   background-color: #2E3471;
 }
 
-.crm-container .crm-accordion-header a.crm-close-accordion {
-  font-weight: normal !important;
-  float: right;
-  color: #FFF !important;
-}
-
-.crm-container .crm-accordion-header a.crm-close-accordion span {
-  visibility: hidden;
-}
-
-.crm-container .crm-accordion-header a.crm-close-accordion:hover span {
-  visibility: visible;
-}
-
 .crm-container .crm-master-accordion-header.crm-accordion-header:hover,
 .crm-container .crm-collapsible .collapsible-title:hover {
   background-color: transparent;
@@ -2804,9 +2790,10 @@ div.grippie {
   height: 27px;
 }
 
-#civicrm-menu .ac_input,
+#civicrm-menu .ui-autocomplete-input,
+.crm-container .ui-autocomplete-input,
 .crm-container .ac_input {
-  background: white url(../i/magnify.gif) no-repeat scroll right center;
+  background: white url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll right -23px;
   padding-right: 16px;
   /* so that text doesn't flow on top of icon */
 }
@@ -2888,7 +2875,7 @@ div a.helpicon:focus {
   z-index: 1000;
   padding-bottom: 10px;
   background: transparent url('../i/overlay-pointer.png') no-repeat bottom left;
-  font-size: 12px;
+  font-size: 13px;
   display: none;
 }
 
@@ -3477,7 +3464,7 @@ div#crm-container form {
 }
 
 /* Date plugin */
-#crm-container input.dateplugin {
+.crm-container input.dateplugin {
   background: white url(../i/cal.gif) no-repeat scroll right center;
   padding-right: 16px;
   /* so that text doesn't flow on top of icon */
@@ -3485,20 +3472,7 @@ div#crm-container form {
 }
 
 /* Date plugin */
-#crm-container div.batch-update {
-  overflow: visible;
-}
-
-/* Date plugin for profile in edit mode */
-.crm-container-snippet input.dateplugin {
-  background: white url(../i/cal.gif) no-repeat scroll right center;
-  padding-right: 16px;
-  /* so that text doesn't flow on top of icon */
-  width: 9em;
-}
-
-/* Date plugin for profile in edit mode */
-.crm-container-snippet div.batch-update {
+.crm-container div.batch-update {
   overflow: visible;
 }
 
@@ -3817,11 +3791,141 @@ div.m ul#civicrm-menu,
 
 /* loader autocomplete */
 
-#civicrm-menu .ac_loading,
+#civicrm-menu .ui-autocomplete-loading,
+.crm-container .ui-autocomplete-loading,
 .crm-container .ac_loading {
   background: white url('../i/loading.gif') no-repeat right center;
 }
 
+/* select2 */
+.crm-select2 {
+  width: 15em;
+}
+.crm-container .select2-container {
+  min-width: 6em !important;
+  font-size: 11px;
+}
+/* Style civi form inputs to match select2 */
+.crm-container input.crm-form-text {
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
+  background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
+  background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
+  background-image: linear-gradient(top, #eee 1%, #fff 15%);
+}
+.crm-container select.crm-form-select {
+  border: 1px solid #aaa;
+  color: #444;
+  height: 2.2em;
+  padding: 4px;
+  border-radius: 4px;
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
+  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
+  background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
+  background-image: linear-gradient(top, #fff 0%, #eee 50%);
+}
+/* Add arrow icon to multi-selects */
+.crm-container .select2-container-multi .select2-choices:before {
+  background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll 0 -4px;
+  content: "";
+  display: block;
+  height: 15px;
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 20px;
+}
+/* Add search icon to ajax multi-selects and opened multi-selects */
+.crm-container .select2-container-multi.select2-container-active .select2-choices:before,
+.crm-container .select2-container-multi.crm-ajax-select .select2-choices:before {
+  background-position: right -26px;
+}
+/* Reduce select2 size to match other inputs */
+.crm-container .select2-container-multi .select2-choices {
+  min-height: 25px;
+}
+.crm-container .select2-container-multi .select2-choices .select2-search-choice {
+  padding: 2px 5px 2px 18px;
+}
+.crm-container .select2-container-multi .select2-choices .select2-search-field input {
+  padding: 4px;
+}
+.crm-container .select2-search-choice-close {
+  top: 2px;
+}
+.crm-container .select2-container .select2-choice abbr {
+  top: 6px;
+}
+.crm-container .select2-container .select2-choice > .select2-chosen {
+  font-size: 1.1em;
+}
+/* Add search icon to ajax single-selects */
+.crm-container .crm-ajax-select .select2-arrow b {
+  background-position: -39px -22px;
+}
+/* Restore normal icon when searchable field is open */
+.crm-container .select2-dropdown-open .select2-choice .select2-arrow b {
+  background-position: -18px 1px;
+}
+/* Style autocomplete results */
+.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;
+}
+.crm-container .select2-results .crm-select2-row .crm-select2-row-label {
+  font-size: 1.1em;
+}
+.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 .crm-select2-row .crm-select2-row-description p {
+  color: #f0f0f0;
+}
+.crm-container .select2-results .crm-select2-icon {
+  width: 20px;
+  height: 100%;
+  float: left;
+}
+.crm-container .select2-results .crm-select2-icon .crm-icon {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+.crm-container .select2-results li.select2-no-results {
+  padding-left: 4px;
+  padding-top: 4px;
+  margin-left: 4px;
+}
+.crm-container .select2-results li {
+  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,
 #crm-container span.crm-button_qf_Confirm_next input,
@@ -4146,7 +4250,7 @@ div.m ul#civicrm-menu,
   right: 15px;
   z-index: 999999;
 }
-.crm-container div.ui-notify-message {
+#crm-notification-container div.ui-notify-message {
   padding: 10px;
   margin-bottom: 15px;
   color: #fff;
@@ -4156,23 +4260,22 @@ div.m ul#civicrm-menu,
   max-height: 600px;
   overflow: auto;
 }
-.crm-container div.ui-notify-message h1 {
+#crm-notification-container div.ui-notify-message h1 {
   font-size: 14px;
   margin: 0;
   padding: 4px;
   font-weight: bold;
   color: #fff;
 }
-.crm-container div.ui-notify-message p {
+#crm-notification-container div.ui-notify-message p {
   margin: 3px 0;
   padding: 0;
   line-height: 18px;
 }
-.crm-container div.ui-notify-message:last-child {
+#crm-notification-container div.ui-notify-message:last-child {
   margin-bottom: 0;
 }
-.crm-container div.ui-notify-message-style {
-  background: #000;
+#crm-notification-container div.ui-notify-message-style {
   background: rgba(0,0,0,0.8);
   box-shadow: 0 0 6px #000;
 }
@@ -4185,21 +4288,21 @@ div.m ul#civicrm-menu,
 .crm-container div.ui-notify-message-style a:focus {
   color: #B2B8FF;
 }
-.crm-container div.ui-notify-message .ui-notify-close {
+#crm-notification-container .ui-notify-message .ui-notify-close {
   cursor: pointer;
 }
-.crm-container div.ui-notify-message a.ui-notify-cross {
+#crm-notification-container .ui-notify-message a.ui-notify-cross {
   margin-top: -4px;
   float: right;
   text-decoration: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   text-shadow: 0 1px 1px #fff;
   padding: 2px;
   color: #FDFDFD;
 }
-.crm-container div.ui-notify-message .ui-notify-cross:hover,
-.crm-container div.ui-notify-message .ui-notify-cross:focus {
+#crm-notification-container .ui-notify-message .ui-notify-cross:hover,
+#crm-notification-container .ui-notify-message .ui-notify-cross:focus {
   color: #ffffab;
 }
 .crm-container div.ui-notify-message table,
@@ -4252,6 +4355,7 @@ span.crm-status-icon {
 /* Public Pages */
 
 #crm-container.crm-public input[type="text"],
+#crm-container.crm-public input[type="password"],
 #crm-container.crm-public select {
   font-size: 15px;
   padding: 5px;