CRM-12835 Display relationship description on relationship tab

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

diff --git a/css/civicrm.css b/css/civicrm.css
index de003cc2b57e9d1f5b6847513bc4166953a06567..b64d79104683414fff9b91f55d0f6b573e739189 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -6,7 +6,7 @@
  * All styles should start with .crm-container unless they are specific to the main div only
  */
 
-.crm-container label {
+div.crm-container label {
   font-weight: normal;
   display: inline;
 }
@@ -26,7 +26,8 @@
 }
 
 .crm-container a,
-.crm-container a:link {
+.crm-container a:link,
+.crm-container a:visited {
   color: #2786c2;
   text-decoration: none;
 }
@@ -387,7 +388,7 @@
 
 .crm-container fieldset legend {
   display: block;
-  font-family: helvetica;
+  font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   padding: 4px;
@@ -429,13 +430,15 @@
   border: none;
 }
 
-.crm-container .crm-section {
+.crm-container .crm-section,
+.crm-container-snippet .crm-section {
   margin-bottom: 1em;
 }
 
-.crm-container .crm-section .label {
+.crm-container .crm-section .label,
+.crm-container-snippet .crm-section .label {
   float: left;
-  width: 15%;
+  width: 17%;
   text-align: right;
 }
 
@@ -443,8 +446,9 @@
   text-align: left;
 }
 
-.crm-container .crm-section .content {
-  margin-left: 16%;
+.crm-container .crm-section .content,
+.crm-container-snippet .crm-section .content {
+  margin-left: 19%;
 }
 
 .crm-container .no-label .content {
@@ -706,7 +710,8 @@
   color: #000080;
 }
 
-.crm-container .crm-marker {
+.crm-container .crm-marker,
+.crm-container-snippet .crm-marker {
   color: #8A1F11;
   font-weight: bold;
   margin-right: 5px;
@@ -772,7 +777,7 @@
   /* h3 used as table header for civicrm */
   background-color: #CDE8FE;
   font-size: 15px;
-  font-family: Helvetica, Arial, Sans;
+  font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #121A2D;
   padding: 4px 6px;
@@ -1249,7 +1254,7 @@
   height: auto;
   margin: 0 1px;
   padding: 2px 5px;
-  font-family: Helvetica;
+  font-family: Arial, Helvetica, sans-serif; 
 }
 
 .crm-container #alpha-filter a {
@@ -1879,6 +1884,7 @@ div.grippie {
 #crm-container div.crm-inline-edit.form {
   cursor: default;
   border: 2px dashed #6665BF;
+  overflow: auto;
 }
 
 #crm-container .crm-inline-edit.add-new {
@@ -2277,6 +2283,7 @@ div.grippie {
 
 .crm-container a.button,
 .crm-container a.button:link,
+.crm-container a.button:visited,
 .crm-container input.form-submit,
 #crm-container input[type=button],
 #crm-container input.form-submit-inline,
@@ -2294,7 +2301,7 @@ div.grippie {
 }
 
 #crm-container .crm-button {
-  padding: 0;
+  padding: 1px;
 }
 
 .crm-container input.form-submit,
@@ -2315,7 +2322,8 @@ div.grippie {
 }
 
 .crm-container a.button,
-.crm-container a.button:link {
+.crm-container a.button:link,
+.crm-container a.button:visited {
   display: block;
   float: left;
 }
@@ -2577,6 +2585,10 @@ div.grippie {
   background-position: -3px -161px;
 }
 
+.crm-container .swap-icon {
+  background-position: -82px -81px;
+}
+
 #crm-container .geotag {
   padding: 2px 0 2px 20px !important;
   background: url('../i/geotag_16.png') left center no-repeat;
@@ -2645,7 +2657,7 @@ div.grippie {
 
 /* accordion styles */
 
-#crm-container .crm-accordion-header {
+.crm-container .crm-accordion-header {
   background-image: url("../i/TreeMinusWhite.gif");
   background-repeat: no-repeat;
   background-position: 2px center;
@@ -2656,63 +2668,63 @@ div.grippie {
   background-color: #5D677B;
 }
 
-#crm-container .crm-accordion-header:hover {
+.crm-container .crm-accordion-header:hover {
   background-color: #32414f;
 }
 
-#crm-container .collapsed .crm-accordion-header {
+.crm-container .collapsed .crm-accordion-header {
   background-image: url("../i/TreePlusWhite.gif");
 }
 
-#crm-container .collapsed .crm-accordion-body,
-#crm-container .crm-collapsible.collapsed .collapsible-title + * {
+.crm-container .collapsed .crm-accordion-body,
+.crm-container .crm-collapsible.collapsed .collapsible-title + * {
   display: none;
 }
 
-#crm-container .crm-accordion-inner .crm-accordion-header,
-#crm-container .crm-accordion-wrapper .crm-master-accordion-header,
-#crm-container .crm-collapsible .collapsible-title {
+.crm-container .crm-accordion-inner .crm-accordion-header,
+.crm-container .crm-accordion-wrapper .crm-master-accordion-header,
+.crm-container .crm-collapsible .collapsible-title {
   background-image: url("../i/TreeMinus.gif");
   background-color: transparent;
   color: #3E3E3E;
 }
 
-#crm-container .crm-accordion-inner.collapsed .crm-accordion-header,
-#crm-container .crm-accordion-wrapper.collapsed .crm-master-accordion-header,
-#crm-container .crm-collapsible.collapsed .collapsible-title {
+.crm-container .crm-accordion-inner.collapsed .crm-accordion-header,
+.crm-container .crm-accordion-wrapper.collapsed .crm-master-accordion-header,
+.crm-container .crm-collapsible.collapsed .collapsible-title {
   background-image: url("../i/TreePlus.gif");
 }
 
-#crm-container .crm-accordion-wrapper .crm-master-accordion-header {
+.crm-container .crm-accordion-wrapper .crm-master-accordion-header {
   background-color: transparent;
   font-size: 16px;
   color: #3e3e3e;
   margin-bottom: 0px;
 }
 
-#crm-container .crm-accordion-inner .crm-accordion-header {
+.crm-container .crm-accordion-inner .crm-accordion-header {
   font-size: 12px;
 }
 
-#crm-container .crm-accordion-wrapper {
+.crm-container .crm-accordion-wrapper {
   margin-bottom: 4px;
 }
 
-#crm-container .crm-accordion-header {
+.crm-container .crm-accordion-header {
   -moz-border-radius: 4px 4px 0px 0px;
   -webkit-border-radius: 4px 4px 0px 0px;
   -khtml-border-radius: 4px 4px 0px 0px;
   border-radius: 4px 4px 0px 0px;
 }
 
-#crm-container .collapsed .crm-accordion-header {
+.crm-container .collapsed .crm-accordion-header {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
 }
 
-#crm-container .crm-accordion-body {
+.crm-container .crm-accordion-body {
   -moz-border-radius: 0px 0px 4px 4px;
   -webkit-border-radius: 0px 0px 4px 4px;
   -khtml-border-radius: 0px 0px 4px 4px;
@@ -2722,7 +2734,7 @@ div.grippie {
   padding: 4px 0px;
 }
 
-#crm-container .crm-collapsible .collapsible-title {
+.crm-container .crm-collapsible .collapsible-title {
   padding-left: 19px;
   text-decoration: none;
   background-repeat: no-repeat;
@@ -2730,33 +2742,36 @@ div.grippie {
   cursor: pointer;
 }
 
-#crm-container .crm-master-accordion-header+.crm-accordion-body {
+.crm-container .crm-master-accordion-header+.crm-accordion-body {
   border: none;
   padding: 0px;
 }
 
-#crm-container .crm-accordion-header.active {
+.crm-container .crm-accordion-header.active {
   font-weight: bold;
   background-color: #41477E;
 }
 
-#crm-container .crm-accordion-header.active:hover {
+.crm-container .crm-accordion-header.active:hover {
   background-color: #2E3471;
 }
 
-#crm-container .crm-accordion-header a.close-accordion {
+.crm-container .crm-accordion-header a.crm-close-accordion {
   font-weight: normal !important;
   float: right;
   color: #FFF !important;
-  text-decoration: none;
 }
 
-#crm-container .crm-accordion-header a.close-accordion:hover {
-  text-decoration: underline !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 {
+.crm-container .crm-master-accordion-header.crm-accordion-header:hover,
+.crm-container .crm-collapsible .collapsible-title:hover {
   background-color: transparent;
   color: #0200A0;
 }
@@ -2796,21 +2811,27 @@ div.grippie {
 /* Pop-up help icon - eliminate forced line break */
 .crm-container a.helpicon,
 .crm-container .crm-master-accordion-header a.helpicon {
-  background-position: -128px -98px;
-  background-image: url(../i/icons/jquery-ui-2786C2.png);
-  background-color: transparent;
-  width: 16px;
-  height: 16px;
+  background-color: #6177D5;
+  background-image: url("../i/icons/jquery-ui-F5F6F1.png");
+  background-position: -50px -146px;
+  border-radius: 6px;
   display: inline-block;
+  height: 12px;
+  width: 12px;
+  opacity: .7;
+  position: relative;
+  top: 2px;
 }
 
 div.crm-accordion-header a.helpicon {
-  background-image: url(../i/icons/jquery-ui-F5F6F1.png);
+  background-color: #F5F6F1;
+  background-image: url(../i/icons/jquery-ui-2786C2.png);
 }
 
 div a.helpicon:hover,
 div a.helpicon:focus {
   background-image: url(../i/icons/jquery-ui-91CE00.png);
+  opacity: 1;
 }
 
 .crm-container .crm-summary-link {
@@ -3567,18 +3588,18 @@ div.m ul#civicrm-menu,
 }
 
 /* in place edit  */
-#crm-container .crm-editable-enabled {
+.crm-container .crm-editable-enabled {
   white-space: nowrap;
 }
 
-#crm-container .crm-editable-enabled,
-#crm-container .crm-editable-textarea-enabled {
+.crm-container .crm-editable-enabled,
+.crm-container .crm-editable-textarea-enabled {
   display: block;
   padding-left: 2px;
   border: 2px dashed transparent;
 }
 
-#crm-container .crm-editable-enabled:hover {
+.crm-container .crm-editable-enabled:hover {
   display: block;
   padding-left: 2px;
   border: 2px dashed lightgrey;
@@ -3743,22 +3764,31 @@ div.m ul#civicrm-menu,
   margin: 0.5em 0 1em;
   padding: 0 0 0 0.5em;
 }
-.crm-container div.ui-notify-message div.icon {
+
+.crm-container div.ui-notify-message div.icon,
+.crm-status-icon {
   background: transparent url("../i/message-icons.png") no-repeat 0 0;
   width: 24px;
   height: 24px;
   margin-right: 6px;
 }
-.crm-container div.ui-notify-message.success div.icon {
+.crm-container div.ui-notify-message.success div.icon,
+.crm-status-icon.success {
   background-position: -24px 0px;
 }
-.crm-container div.ui-notify-message.info div.icon {
+.crm-container div.ui-notify-message.info div.icon,
+.crm-status-icon.info {
   background-position: -48px 0px;
 }
-.crm-container div.ui-notify-message.error div.icon {
+.crm-container div.ui-notify-message.error div.icon,
+.crm-status-icon.error {
   background-position: -72px 0px;
 }
 
+span.crm-status-icon {
+  display: inline-block;
+}
+
 /* Public Pages */
 
 #crm-container.crm-public input[type="text"],
@@ -3773,6 +3803,15 @@ div.m ul#civicrm-menu,
   padding-top: 6px;
 }
 
+.crm-public .crm-profile-view .content {
+  padding-top: 6px;
+}
+
+#crm-container.crm-public .calc-value {
+  padding-top: 6px;
+  font-size: 15px;
+}
+
 #crm-container.crm-public .crm-section,
 .crm-section {
   margin-bottom: 0;
@@ -3920,3 +3959,58 @@ div.m ul#civicrm-menu,
   border: 1px solid #000;
   text-align: center;
 }
+
+/* Styles for credit card payment logos */
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a {
+  display: block;
+  float: left;
+  width: 50px;
+  height: 30px;
+  background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
+  text-indent: -20000px;
+  margin-right: 10px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 3px;
+  border: 1px solid #FFFFFF;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
+  background-position: -50px 0;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
+  background-position: -100px 0;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
+  background-position: -150px 0;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
+  background-position: -200px 0;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
+  background-position: -250px 0;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
+  background-position: -300px 0;
+}
+
+#crm-container .cvv2-icon {
+  display: inline-block;
+  width: 50px;
+  height: 30px;
+  background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
+}
+
+/* Avoid weird border around the images (some themes will add a border around images) */
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a,
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a:link,
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a:hover,
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a:focus,
+#crm-container .credit_card_type-section .crm-credit_card_type-icons a:active {
+  color: #fff;
+}
+