Contrib.social

Gin theme: Link text not transparent in modals

Open on Drupal.org →
Created on 11 September 2023, about 1 year ago
Updated 4 March 2024, 9 months ago

Problem/Motivation

When using Media library edit inside a modal window, the textual part of the edit link is no longer transparent, but uses Gin's focus color. This causes a visually weird overflow of the text description:

The screenshot is using gin@3.0.0-rc6, media_library_edit@3.0.2.
(The modal was open by layout_paragraphs@2.0.3, but it is a general modal style issue with Gin theme)

Steps to reproduce

media_library_edit.admin.css uses a style with specifiy of 0-1-0
https://git.drupalcode.org/project/media_library_edit/-/blob/3.0.x/css/m...

This is overwritten by Gin's dialog.css using a specifity of 0-1-1 for all links inside modals
https://git.drupalcode.org/project/gin/-/blob/8.x-3.x/styles/components/...

Proposed resolution

Simply increase the specifity of the color style, given the module-name scoped selector I can't see any reason why we should allow a module to override the text color:

Change from

.media-library-edit__link {
   /* other styles */
   color: transparent;
}
.media-library-edit__link:hover {
   color: transparent;
}

to

.media-library-edit__link {
   /* other styles */
   color: transparent !important;
}

We could argue that this is an issue of Gin, but especially admin themes always have a hard time with styles from contrib modules. This should fix Gin's issue and potentially makes the life easier for other themes too.

🐛 Bug report
Status

Fixed

Version

3.0

Component

User interface

Created by

🇦🇹Austria hudri Austria

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024