The following lines of css cause some strange behaviour in the Media Browser Views Plugin display.

.media-item .label-wrapper:hover {
  border-bottom: 2px solid #CCC;
  border-right: 2px solid #CCC;
  display: inline-block;
  line-height: 16px;
  margin-bottom: -1px;
  overflow: visible;
  position: relative;
  z-index: 10;
}

.media-item .label-wrapper:hover .media-filename {
  border: 1px solid #888;
  display: inline-block;
  margin: 0 0 -2px -1px;
}


.media-item .media-filename:hover {
  text-decoration: underline;
}

When you hover over an image name, the whole thing resizes, and the submit & cancel buttons often get repositioned.

Can anyone explain why media module css is changing the size and borders on a css hover of the label and it's wrapper?

I think this type of non-standard behavioural css would be better kept out of the module, to make it simple for users to add their own styling, and not need to overwrite lots of statements just to disable this odd behaviour.

I didn't want to submit a patch removing it until I checked if anyone knew a valid reason for it to be in there in the first place.

Comments

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented
Status: Active » Postponed (maintainer needs more info)

Hrm, this looks like it's intended to create a 'hover' affect over the thumbnails, but that CSS is a little suspect. Currently when I hover over things in the media library I don't really see any adverse changes due to the CSS. What theme are you using? Could you maybe screenshot the problem?

medden’s picture

medden commented

I am using the Omega theme. I have overwritten the CSS, and it's very hard to take a static screenshot of a hover effect.

I reckon it would be safer to remove any margin, border or padding effects from :hover css.

dddave’s picture

dddave commented

@medden
Could you please test the patch in this issue: #1502060: Clean up media.css or close this issue if your problem is already fixed?

medden’s picture

medden commented
Status: Postponed (maintainer needs more info) » Fixed

I don't have time to check the patch right now sorry, off on hols for 2 weeks!
Marking as closed, as no longer an issue for me, I just overwrote all borders and padding in my own css.
Thanks for taking the time to clean up the css files.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.