Aris-t2/CustomCSSforFx

popup_items_hover_appearance_aero.css needs a little correct

Closed this issue · 3 comments

ArkadiuszMichalski commented

When we use @import "./css/generalui/popup_items_hover_appearance_aero.css"; then text in hover but disabled menuitem unnecessarily gets black color. This makes it look like it's not disabled and clickable.

image

I suggest that for hovered blocked items:

  • text color will not be changed (let it be original gray).
  • make the background color lighter than the unlocked elements (which will indicate more that it cannot be clicked). Something similar is in the default appearance (when we do not use this file).

image

I use:
CustomCSSforFx 4.5.5
Firefox 129.0.2 (64-bit)

Aris-t2 commented

Replace the code inside popup_items_hover_appearance_aero.css with this:

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/* override color set by context_bfrsb_labels_with_icons.css */
@media (-moz-platform: windows) {
  #context-navigation :is(#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarkpage):hover {
	background-color: unset !important;
  }
}

:is(popup,menupopup,panel,panelmultiview,.panel-subview-body) :is(menuitem,menu,.subviewbutton,toolbarbutton):not(#appMenu-fxa-status2):hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image:
	linear-gradient(to right, rgba(255,255,255,0.4) 0px, transparent 0px),
	linear-gradient(to left, rgba(255,255,255,0.4) 0px, transparent 0px),
	linear-gradient(to top, rgba(255,255,255,0.3) 0px, transparent 0px),
	linear-gradient(to bottom, rgba(163,196,247,0.2), rgba(122,180,246,0.2)) !important;
  border-radius: 6px !important;
  outline: 1px solid rgba(124,163,206,0.7) !important;
  outline-radius: 3px !important;
  outline-offset: -1px !important;
}

:is(popup,menupopup,panel,panelmultiview,.panel-subview-body) :is(menuitem,menu,.subviewbutton,toolbarbutton):not(#appMenu-fxa-status2):not([disabled]):hover {
  color: inherit !important;
}

:is(popup,menupopup,panel,panelmultiview,.panel-subview-body) :is(menuitem,menu,.subviewbutton,toolbarbutton):not(#appMenu-fxa-status2)[disabled]:hover {
  filter: grayscale(75%) !important;
}
ArkadiuszMichalski commented

@Aris-t2 It's correct now. Will this fix be added in the next version of CustomCSSforFx?

image

Aris-t2 commented

Yes, it will be in next release.

  • 👍1