When I dye the 's in a certain region, the contextual links get the same colors an sometime almost appear nonexistent because of hue parallel.

Please see the attached img to best understand me.

Please make CL color standalone and not effected from such changes.

CommentFileSizeAuthor
Untitled.png13.98 KBBenia
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Benia created an issue. See original summary.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Active » Closed (works as designed)

@Benia, thanks for this issue. I have some problem, because css statement #id a {color: white;} has a higher specificity than .contextual-region .contextual .contextual-links a {color: #333} (see also this comment). But we already had !important part and it was removed in #2054055: Bartik inappropriately styles all links in the footer, rather than links inside blocks in the footer, breaking contextual links in the process. Therefore, I think it would be correct to mark this issue like 'works as designed'.

Benia’s picture

Benia CreditAttribution: Benia commented

Removing the !important was a mistake; This obligated users to add this...

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

That's what I thought at first. But later learned that real mistake - use #id in css statements. It is bad style, which should be avoided. We should use only .class in css statements instead #id & .class { !important }. Modern layout promotes this practice.

Benia’s picture

Benia CreditAttribution: Benia commented

You suggest not to style CSS id's at all when styling original theme files written in the Drupal coding standards?

Well, I'm not sure I always have suitable classes to edit... AFAIK not all theme owners nest classes inside the elements.

I had to add this to solve all my problems:

.contextual ul {background: #fff !important} 
.contextual li {display: block !important}
.contextual a {color: #000 !important; height: auto !important; line-height: 1.5em !important; background: #E2E2E2 !important} 
.contextual a:hover {color: #000 !important; background: #E2E2E2 !important}
Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

This example is very clear draw, that css rules based on #id is incorrect way.

If to prevent the influence of user-defined rules we need add to the core:
ul.contextual-links li a {color: #333 !important;}
hence, we must add !important to all properties of all tags in core .css :)

Because, like your example, we have problem with ul, li, a tags and background, display, color, height, line-height properties.

If no suitable classes, you can try to indicate the most specific path with #id (affecting the desired elements and only at these), or add the necessary classes as a developer.