"warning labels and messages" style rules overridden

[jensschuppe]

The highlighting of overdue or scheduled activities is gone due to more specific rules within the shoreditch stylesheet, e.g. in

.page-civicrm-contact #mainTabContainer .crm-activity-selector-activity div[id*="DataTables_Table_"] table.dataTable>tbody>tr>td {
    /* ... */
    color: #4D4D69;
    /* ... */
}

This is the original style declaration with the color highlighting:

.crm-container del, .crm-container .crm-is_deleted, .crm-container table.caseSelector td.status-urgent, .crm-container .font-red, .crm-container .status-removed, .crm-container .status-overdue, .crm-container .status-fatal, .crm-container .status-hold, .crm-container .status-past, .crm-contact-deceased, .crm-container .status-warning {
    color: #E43D2B !important;
}

This should be extended to include subsequent elements as well, so that they are only overridden if there is a more specific rule:

.crm-container del *,
.crm-container .crm-is_deleted *,
.crm-container table.caseSelector td.status-urgent *,
.crm-container .font-red *,
.crm-container .status-removed *,
.crm-container .status-overdue *,
.crm-container .status-fatal *,
.crm-container .status-hold *,
.crm-container .status-past *,
.crm-contact-deceased *,
.crm-container .status-warning * {
  color: #E43D2B;
}

Note the missing !important so that deliberately overriding is still possible.

Also, this is not tested in scenarios other than the activity list.

I just inspected the generated CSS, so unfortunately I can't provide a patch for the SCSS.

[AkA84]

@jensschuppe thank you for your feedback, could you please provide:

• screenshots of the issue (preferably how things look in vanilla civicrm, and how they look in shoreditch)
• Info about where you see the issue (i.e. core screens, extension, etc)
• CiviCRM version
• Shoreditch version
• CMS used, and version

[jensschuppe]

Seems like some other CSS (e.g. the CMS theme) already overwrites the color rule. So this seems to be highly dependant on the CMS theme used or any other CSS. Maybe this is an issue for CiviCRM core ...

For this reason, I can't provide general screenshots comparing the initial state with shoreditch.

The "issue" can be seen on the activity tab for contacts, inspecting the activity subject table cell's color rules. The red color is being overwritten by shoreditch CSS, and, e.g. using Drupal with the "Seven" theme, by the theme CSS.

That said, I'm not sure if shoreditch should include the additional rules I proposed ...

[AkA84]

@jensschuppe Shoreditch has a requirement the use of the "Seven" theme for the civicrm admin (see #277), does that solve the issue?

[jensschuppe]

The "Seven" theme itself overrides the "red color rule", so that's part of the problem.

You can see the issue by selecting e.g. "Bartik" as the CiviCRM administration theme and not using shoreditch. When opening the "Activites" tab for a contact, overdue activites should appear red - See screenshot 1. The inspector shows the style rules for the "color" property in order of specificity.

As soon as you activate the "Seven" theme, nothing is red anymore because of "Seven"'s style rules (themes/seven/style.css:451) - See screenshot 2.

However, shoreditch also adds two rules that override the red color - See screenshot 3.

So, the issue needs a fix for CiviCRM core CSS to not let "Seven" theme override the color (if the core team sees that necessary), and a fix for shoreditch to not override the "red color" rule.

[jensschuppe]

Ok, just for documentation why this was reopened: The patch only addressed overdue activities within the contact activities result table. This should be adjusted to match other activity statuses and maybe other selectors as well, see CiviCRM core CSS:

.crm-container del,
.crm-container .crm-is_deleted,
.crm-container table.caseSelector td.status-urgent,
.crm-container .font-red,
.crm-container .status-removed,
.crm-container .status-overdue,
.crm-container .status-fatal,
.crm-container .status-hold,
.crm-container .status-past,
.crm-contact-deceased,
.crm-container .status-warning {
    color: #E43D2B !important;
}