No background on dropdowns and right click context menu, in Bookmarks Library View (Dark Theme)
Opened this issue · 5 comments
When right clicking in Bookmarks library view, text is black, without any background. Same is the case with dropdown menus, where text is white, without any background:
F0bi0Qh6QP.mp4
Edit: I'm using Matte Black theme https://addons.mozilla.org/en-US/firefox/addon/matte-black-red/
I have the same issue.
Since Etesam913 seems to be busy at the moment, I'm closing this issue. If anyone else has the same issue, try this: [Copy Everything after this line, and paste in userchrome.css, along with slickfox css]
/* ================== LIBRARY ================== */
@-moz-document url(chrome://browser/content/places/places.xhtml) {
/* ============== Popups ============== */
menupopup,
menupopup menuitem,
menupopup menu,
menupopup menuseparator {
-moz-appearance: none !important;
}
menupopup,
panel[type="autocomplete-richlistbox"] {
-moz-window-shadow: none !important;
background: 0 !important;
border: 0 !important;
color: #e4e4e4 !important;
box-sizing: content-box !important;
width: 220px !important;
}
menupopup {
padding: 11px 14px 18px !important;
margin: -19px -14px 0 !important;
}
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon,
menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon,
menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
display: -moz-box !important;
padding: 3px !important;
background-color: #202020
}
menupopup menuseparator {
margin: 5px 0 !important;
padding: 0 !important;
height: 1px !important;
background: currentColor !important;
opacity: .12 !important;
}
menupopup menuitem,
menupopup menu,
.autocomplete-richlistitem {
height: 32px !important;
padding: 0 8px !important;
border: 0 !important;
background: 0 !important;
color: inherit !important;
fill-opacity: initial !important;
}
menupopup menuitem:hover:not([disabled=true]),
menupopup menu:hover:not([disabled=true]),
.autocomplete-richlistitem:hover:not([disabled=true]):not([selected=true]) {
background-color: #282828 !important;
}
menupopup menuitem:hover:active:not([disabled=true]),
menupopup menu:hover:active:not([disabled=true]),
.autocomplete-richlistitem:hover:active:not([disabled=true]),
.autocomplete-richlistitem[selected=true] {
background-color: #202020 !important;
}
menupopup menuitem[disabled=true],
menupopup menu[disabled=true],
.autocomplete-richlistitem[disabled=true] {
opacity: .5 !important;
}
/* disable vertical menu scroll buttons and use a good ol' scrollbar */
/* this is a shotgun approach, expect side effects */
scrollbox[orient=vertical] /* >=71 */ {
overflow-y: auto !important;
}
/* why still use scroll buttons; is this the middle ages? */
.menupopup-scrollbutton {
display: none !important;
}
.menu-iconic-left {
-moz-appearance: none !important;
}
/* hide icon if no image (default on macOS but not Windows) */
.subviewbutton:not(:-moz-any([image], [targetURI], .bookmark-item)) > .menu-iconic-left {
display: none;
}
.menu-iconic-icon {
fill: currentColor !important;
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
margin-inline-start: 0 !important;
margin-inline-end: 16px !important;
width: 24px !important;
height: 24px !important;
padding: 4px !important;
}
.menu-text {
-moz-appearance: none !important;
padding: 0 !important;
}
.menu-right {
-moz-appearance: none !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
margin-inline-end: 0 !important;
margin-inline-start: 16px !important;
}
#context-navigation {
background: 0 !important;
-moz-box-flex: 1;
-moz-box-pack: center;
}
#context-navigation > .menuitem-iconic {
background: 0 !important;
padding: 0 !important;
margin: 0 !important;
max-width: 44px !important;
transform: scale(1.3) !important;
}
#context-navigation .menu-iconic-left {
border-radius: 50% !important;
padding: 8px !important;
}
#context-navigation .menu-iconic-icon {
padding: 0 !important;
margin: 0 !important;
width: 16px !important;
height: 16px !important;
}
#context-navigation .menuitem-iconic:hover:not([disabled]) .menu-iconic-left {
background-color: #282828 !important;
}
#context-navigation .menuitem-iconic:hover:active:not([disabled]) .menu-iconic-left {
background-color: #202020 !important;
}
/* needs to align with textbox/bookmark-button but can't overlap it */
panel[type="autocomplete-richlistbox"],
.bookmark-item:not(menu) > menupopup[placespopup] {
padding: 5px 14px 18px !important;
margin: 0 -14px 0 !important;
}
.popup-internal-box,
panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox,
#PopupSearchAutoComplete > *,
.menupopup-arrowscrollbox {
background: #202020 !important;
padding: 5px !important;
}
/* themes a menupopup (or other root level / shadow dom popup) as a panel */
/* Mozilla's use of shadow dom means we can't use a menupopup > .popup-internal-box */
.popup-internal-box,
panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox,
.menupopup-arrowscrollbox {
margin: 8px 0 !important;
padding: 8px 0 !important;
border-radius: 4px !important;
color: inherit !important;
}
.popup-internal-box,
.menupopup-arrowscrollbox {
box-shadow:
0 5px 5px -3px rgba(0,0,0,.2),
0 8px 10px 1px rgba(0,0,0,.14),
0 3px 14px 2px rgba(0,0,0,.12) !important;
}
#PopupSearchAutoComplete > * {
border-radius: 0 !important;
}
#PopupSearchAutoComplete > :first-child {
border-radius: 4px 4px 0 0 !important;
}
#PopupSearchAutoComplete > :last-child {
border-radius: 0 0 4px 4px !important;
}
/* autocomplete panel can't overlap the textbox, so shadow can't go up
more than 1px */
panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox {
box-shadow:
0 0 0 1px rgba(0, 0, 0, .03),
0 5px 5px -3px rgba(0, 0, 0, .2),
0 8px 10px -0px rgba(0, 0, 0, .14),
0 3px 14px -5px rgba(0, 0, 0, .12) !important;
}
}
Do I insert this along with the regular css script or in place of it?
I just pushed the bugfix for this issue. Just update to the new userchrome.css file to apply it. The colors of the menu won't conform to the theme that you have though. The bookmark menu popup will always be white and have black text due to some issue that I cannot fix.
@Shadowspear123 The changes pushed by @Etesam913 make the menu popup in Bookmarks library view white, with black text. It works perfectly if you use a light theme.
If you use a dark theme, and want the popup to be black with white text, just copy the code I shared (everything after 'try this') and paste it after the slickfox script.
So, to answer your question, you have to insert this along with the regular css script in userchrome.css.