- Issue created by @rkoller
- 🇨🇦Canada mgifford Ottawa, Ontario
Ok, lets minimize the SVG and have it use the ButtonFace so it is more easily customizable
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="ButtonFace" d="M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="ButtonFace" stroke-width="3" d="m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3"/></svg>
I think there will be better ways to do this, but just looking at the issue of the forced colors mode
@media (forced-colors: active) { /* Contextual trigger (pen icon) */ .contextual .trigger { forced-color-adjust: none !important; background-color: ButtonFace !important; color: ButtonText !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; border: 1px solid ButtonText !important; width: 26px; height: 26px; opacity: 1 !important; } .contextual .trigger:hover, .contextual .trigger:focus-visible { background-color: Highlight !important; color: HighlightText !important; outline: 2px solid Highlight !important; } /* Remove button (X icon) */ .media-library-item__remove { forced-color-adjust: none !important; background-color: ButtonFace !important; color: ButtonText !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='ButtonFace' stroke-width='3' d='m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3'/%3e%3c/svg%3e") !important; background-repeat: no-repeat; background-position: center; background-size: 0.75rem; border: 1px solid ButtonText !important; opacity: 1 !important; } .media-library-item__remove:hover, .media-library-item__remove:focus-visible { background-color: Highlight !important; color: HighlightText !important; outline: 2px solid Highlight !important; } /* Edit button (pen icon) */ .media-library-item__edit { forced-color-adjust: none !important; background-color: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat; background-position: center; background-size: 0.75rem; opacity: 1 !important; } .media-library-item__edit:hover, .media-library-item__edit:focus-visible { background-color: Highlight !important; color: HighlightText !important; outline: 2px solid Highlight !important; } }
There is some JS which is is hiding edit pen when the mouse isn't hovering over the form:
<form class="views-exposed-form" aria-label="Filter the contents of the Media view" data-drupal-selector="views-exposed-form-media-library-page" action="/admin/content/media-grid" method="get" id="views-exposed-form-media-library-page" accept-charset="UTF-8" data-once="exposed-form">
It converts this:
<button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open configuration options</button>
to this:
<button class="trigger focusable" type="button" aria-pressed="false">Open configuration options</button>
But it doesn't trigger for keyboard users (focus).
It should always be visible, especially in a high contrast mode.
- 🇨🇦Canada mgifford Ottawa, Ontario
This CSS is an issue in both Gin & Claro, so this isn't a Gin specific issue. The CSS works reasonably well in both.
- 🇨🇦Canada mgifford Ottawa, Ontario
This occurs in the media system, but not sure it is restricted to it.
- 🇳🇿New Zealand quietone
In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies → . Thanks