Merge pull request #18049 from christianwach/lab-core-1891

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

diff --git a/css/civicrm.css b/css/civicrm.css
index 8d8446b34694f4778e40639a9758503218a43e2d..cf61ef5a7d057e2d95fd9235732a21d89f10b2d3 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -5,6 +5,20 @@
  * Other civi blocks outside the main container also have the class crm-container (but not the id)
  * All styles should start with .crm-container unless they are specific to the main div only
  */
+
+/* Use this class to hide text that should only be there for screen readers */
+.sr-only {
+   border: 0;
+   clip: rect(1px, 1px, 1px, 1px);
+   clip-path: inset(50%);
+   height: 1px;
+   width: 1px;
+   margin: -1px;
+   overflow: hidden;
+   padding: 0;
+   position: absolute;
+}
+
 .crm-container input {
   box-sizing: content-box;
 }
@@ -254,21 +268,6 @@ input.crm-form-entityref {
   width: 6em;
 }
 
-/* Style civi form inputs to match select2 */
-.crm-container select.crm-form-select,
-.crm-container select.crm-form-date {
-  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%);
-}
 .crm-container input.crm-form-text.ng-invalid.ng-dirty {
     border: 1px solid #FF0000;
 }
@@ -1550,18 +1549,12 @@ input.crm-form-entityref {
   cursor: pointer;
   position: relative;
   white-space: nowrap;
-  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;
+  font-family: "FontAwesome";
+  content: "\f0da";
+  padding-left: .5ex;
 }
 
 .crm-container .btn-slide-active .panel {
@@ -1702,6 +1695,10 @@ input.crm-form-entityref {
 .crm-container a.crm-event-feed-link {
   margin: 0 1ex;
   color: #52534D;
+  display: inline-block;
+  font-size: 10px;
+  padding: 2px 2px 0;
+  vertical-align: bottom;
 }
 
 .crm-container a.crm-event-feed-link:hover {
@@ -1838,8 +1835,6 @@ input.crm-form-entityref {
 
 .crm-container .crm-button input {
   background: none;
-  _background: #6C6C6C;
-  /* IE6 only */
   border: medium none;
   color: #FFF;
   cursor: pointer;
@@ -1853,8 +1848,11 @@ input.crm-form-entityref {
 .crm-container .crm-button-type-back {
   margin-left: 20px;
 }
-.crm-container .crm-button-type-cancel input {
-  color: #E6E6DC!important;
+
+/* Reset WP backend min-height for buttons */
+
+.wp-core-ui .crm-container .button {
+  min-height: 0;
 }
 
 .crm-container a.button,
@@ -1865,7 +1863,7 @@ input.crm-form-entityref {
 .crm-container input[type=button],
 .crm-container .crm-button {
   text-shadow: 0 1px 0 black;
-  background: #70716B url(../i/crm-button-bg.gif) repeat-x top left;
+  background: #696969;
   color: #FFF;
   font-size: 13px;
   font-weight: normal;
@@ -1876,11 +1874,19 @@ input.crm-form-entityref {
   border: 1px solid #3e3e3e;
 }
 
+.crm-container a.button,
+.crm-container a.button:link,
+.crm-container a.button:visited,
 .crm-container span.crm-button {
   display: block;
-  float: left !important;
+  float: left;
   overflow: hidden;
-  padding: 1px;
+  line-height: 135%;
+}
+
+/* Preserving the important but not sure why */
+.crm-container span.crm-button {
+  float: left !important;
 }
 
 .crm-container button.crm-button {
@@ -1898,22 +1904,12 @@ input.crm-form-entityref {
 
 .crm-container .crm-button input[type=button],
 .crm-container .crm-button input.crm-form-submit {
-  padding: 3px 5px 2px;
+  padding: 0;
   margin: 0;
   background: none;
-  _background: #6C6C6C;
-  /* IE6 only */
   border: none;
 }
 
-.crm-container a.button,
-.crm-container a.button:link,
-.crm-container a.button:visited {
-  display: block;
-  float: left;
-  line-height: 135%;
-}
-
 .crm-container .crm-button:hover,
 .crm-container .crm-button:focus,
 .crm-container input[type=submit]:hover,
@@ -1922,7 +1918,7 @@ input.crm-form-entityref {
 .crm-container .ui-dialog-buttonset .ui-button:focus,
 .crm-container a.button:hover,
 .crm-container a.button:focus {
-  background-position: 0 -25px;
+  background: #3e3e3e;
 }
 
 .crm-container .crm-button-disabled,
@@ -1933,7 +1929,6 @@ input.crm-form-entityref {
 .crm-container .crm-button[disabled] {
   opacity: .6;
   cursor: default;
-  background-position: top left;
 }
 
 .crm-container .crm-button-disabled input[disabled] {
@@ -2053,31 +2048,6 @@ input.crm-form-entityref {
   margin-left: 3px;
 }
 
-.crm-container .crm-button.crm-icon-button {
-  padding: 2px 2px 1px 4px;
-}
-
-.crm-container .crm-button.crm-icon-button input {
-  padding-left: 18px;
-}
-
-.crm-container .crm-button.button-crm-i {
-  padding: 2px 0 1px 5px;
-}
-
-.crm-container .crm-button.button-crm-i input {
-  padding-left: 0;
-}
-
-.crm-container .crm-button-icon {
-  background-image: url("../i/icons/jquery-ui-FFFFFF.png");
-  height: 16px;
-  width: 16px;
-  display: block;
-  position: absolute;
-  pointer-events: none;
-}
-
 .crm-container .delete-icon {
   background-position: -176px -96px;
 }
@@ -2124,27 +2094,6 @@ a.crm-i:hover {
   color: #86c661;
 }
 
-.crm-i-button {
-  position: relative;
-}
-
-.crm-i-button>.crm-i {
-  position: absolute;
-  pointer-events: none;
-  top: .4em;
-  left: .4em;
-}
-
-.crm-container .crm-button.crm-i-button input[type="button"],
-.crm-container .crm-button.crm-i-button input.crm-form-submit {
-  padding-left: 1.6em;
-}
-
-.crm-container .inform-icon {
-  background-position: -16px -144px;
-  margin-right: 5px;
-}
-
 .crm-container a.helpicon {
   opacity: .8;
 }
@@ -2233,73 +2182,110 @@ div.crm-master-accordion-header a.helpicon {
 
 /* accordion styles */
 
-.crm-container .crm-accordion-header {
-  background-image: url("../i/TreeMinusWhite.gif");
-  background-repeat: no-repeat;
-  background-position: 2px center;
+.crm-container .crm-accordion-header,
+.crm-container .crm-collapsible .collapsible-title,
+.crm-container span.collapsed,
+.crm-container a.collapsed,
+.crm-container .crm-expand-row {
   cursor: pointer;
+}
+
+.crm-container .crm-accordion-wrapper {
+  margin-bottom: 4px;
+}
+
+/* Specific types of headers */
+
+#crm-container .widget-content .crm-accordion-header {
+  background-color: #EFEFE5;
+  color: #080808;
+}
+
+.crm-container a.crm-expand-row:before,
+.crm-container a.crm-expand-row:link::before,
+.crm-container a.crm-expand-row:visited::before {
+  color: #3E3E3E;
+}
+
+.crm-container .crm-accordion-header {
   color: #F5F6F1;
   font-weight: normal;
-  padding: 4px 8px 4px 20px;
+  padding: 4px 8px;
   background-color: #5D677B;
+  border-radius: 4px 4px 0 0;
 }
 
-.crm-container .crm-accordion-header:hover {
-  background-color: #32414f;
+.crm-container .collapsed .crm-accordion-header {
+  border-radius: 4px;
 }
 
-.crm-container .collapsed .crm-accordion-header {
-  background-image: url("../i/TreePlusWhite.gif");
+.crm-container .crm-accordion-header.active {
+  font-weight: bold;
+  background-color: #3E3E3E;
 }
 
-.crm-container .collapsed .crm-accordion-body,
-.crm-container .crm-collapsible.collapsed .collapsible-title + * {
-  display: none;
+.crm-container .crm-accordion-header:hover {
+  background-color: #2F2F2E;
 }
 
-.crm-container .crm-expand-row {
-  min-width: 16px;
-  min-height: 16px;
-  display: inline-block;
+#crm-container .widget-content .crm-accordion-header:hover {
+  background-color: #e8e8de;
 }
 
-.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");
+.crm-container .crm-accordion-wrapper .crm-master-accordion-header {
   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 {
-  background-image: url("../i/TreePlus.gif");
-}
-
 .crm-container .crm-accordion-wrapper .crm-master-accordion-header {
-  background-color: transparent;
   font-size: 16px;
-  color: #3e3e3e;
-  margin-bottom: 0;
 }
 
-.crm-container .crm-accordion-inner .crm-accordion-header {
-  font-size: 13px;
+.crm-container .crm-master-accordion-header.crm-accordion-header:hover,
+.crm-container .crm-collapsible .collapsible-title:hover {
+  color: #121A2D;
 }
 
-.crm-container .crm-accordion-wrapper {
-  margin-bottom: 4px;
+.crm-container .collapsed .crm-accordion-body,
+.crm-container .crm-collapsible.collapsed .collapsible-title + * {
+  display: none;
 }
 
-.crm-container .crm-accordion-header {
-  border-radius: 4px 4px 0 0;
+/* Collapse icon */
+
+/* General icon settings for all collapsible things */
+.crm-container .crm-accordion-header:before,
+.crm-container .crm-collapsible .collapsible-title:before,
+.crm-container span.collapsed:before,
+.crm-container a.collapsed:before,
+.crm-container .crm-expand-row:before {
+  font-family: "FontAwesome";
+  display: inline-block;
+  width: 1em;
+  content: "\f0da";
+  font-size: 13px;
 }
 
-.crm-container .collapsed .crm-accordion-header {
-  border-radius: 4px;
+/* Collapsed icon */
+.crm-container .collapsed .crm-accordion-header:before,
+.crm-container .crm-collapsible.collapsed .collapsible-title:before,
+.crm-container span.collapsed:before,
+.crm-container a.collapsed:before,
+.crm-container .crm-expand-row:before {
+  content: "\f0da";
 }
 
+/* Expanded icon */
+.crm-container .crm-accordion-header:before,
+.crm-container .crm-collapsible .collapsible-title:before,
+.crm-container span.expanded:before,
+.crm-container a.expanded:before,
+.crm-container .crm-expand-row.expanded:before {
+  content: "\f0d7";
+}
+
+/* Accordion bodies */
+
 .crm-container .crm-accordion-body {
   border-radius: 0 0 4px 4px;
   border: 1px solid #70716B;
@@ -2307,12 +2293,8 @@ div.crm-master-accordion-header a.helpicon {
   padding: 4px 0;
 }
 
-.crm-container .crm-collapsible .collapsible-title {
-  padding-left: 19px;
-  text-decoration: none;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-  cursor: pointer;
+#crm-container .widget-content .crm-accordion-body {
+  border-color: #e8e8de;
 }
 
 .crm-container .crm-master-accordion-header+.crm-accordion-body {
@@ -2320,19 +2302,10 @@ div.crm-master-accordion-header a.helpicon {
   padding: 0;
 }
 
-.crm-container .crm-accordion-header.active {
-  font-weight: bold;
-  background-color: #41477E;
-}
-
-.crm-container .crm-accordion-header.active:hover {
-  background-color: #2E3471;
-}
-
-.crm-container .crm-master-accordion-header.crm-accordion-header:hover,
-.crm-container .crm-collapsible .collapsible-title:hover {
-  background-color: transparent;
-  color: #0200A0;
+#crm-container .widget-content .crm-accordion-body,
+.crm-container .crm-accordion-body.padded {
+  padding-left: .5em;
+  padding-right: .5em;
 }
 
 .crm-container .crm-child-row > td {
@@ -2471,9 +2444,8 @@ div.crm-master-accordion-header a.helpicon {
 
 /* privacy icons */
 #crm-container div span.privacy-flag {
-  background-repeat: no-repeat;
-  background-image: url("../i/stop-icon.png");
   float: right;
+  font-size: 80%;
 }
 
 /* specific, targeted fixes */
@@ -3040,6 +3012,7 @@ tbody.scrollContent tr.alternateRow {
 }
 .crm-container .select2-container-multi .select2-choices .select2-search-field input {
   padding: 4px;
+  min-height: unset;  /* Overide style imposed by WordPress 5.3 - see https://lab.civicrm.org/dev/wordpress/issues/46 */
 }
 .crm-container .select2-search-choice-close {
   top: 2px;
@@ -3180,7 +3153,7 @@ span.crm-select-item-color {
   right: 0;
 }
 .crm-container .ui-dialog-titlebar.ui-widget-header {
-  background: url("../i/crm-button-bg.gif") repeat-x scroll left center #70716B;
+  background: #5D677B;
   color: #F5F6F1;
 }
 .crm-container .ui-dialog-title {
@@ -3499,21 +3472,6 @@ span.crm-select-item-color {
   padding-left: 20px;
 }
 
-.crm-container span.collapsed,
-.crm-container a.collapsed,
-.crm-container .crm-expand-row {
-  background: url("../i/TreePlus.gif") no-repeat 0 0;
-  padding-left: 19px;
-  cursor: pointer;
-}
-
-.crm-container span.expanded,
-.crm-container a.expanded {
-  background: url("../i/TreeMinus.gif") no-repeat 0 0;
-  padding-left: 19px;
-  cursor: pointer;
-}
-
 /* Notifications */
 #crm-notification-container {
   width: 350px;