* 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;
}
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 {
.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 {
.crm-container .crm-button input {
background: none;
- _background: #6C6C6C;
- /* IE6 only */
border: medium none;
color: #FFF;
cursor: pointer;
.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,
.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;
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 {
.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,
.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,
.crm-container .crm-button[disabled] {
opacity: .6;
cursor: default;
- background-position: top left;
}
.crm-container .crm-button-disabled input[disabled] {
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;
}
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;
}
/* 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;
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 {
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 {
/* 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 */
}
.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;
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 {
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;