Page 1 of 1
Making the icons more bold?
Posted: 2017-10-17, 21:06
by NoelC
A few days ago I asked how to make the menu text white so that it would show better against my dark/translucent top chrome. I got some great help here, and have created a good userChrome.css that makes the menus quite nice.
I'm asking again now, about a nearby but slightly different thing: Since the menus are now so easy to see,
is there a way to make the small button icons - e.g., back arrow, forward arrow, X, refresh, home, download - a little bolder / more opaque? They're very nearly good enough, but it would look more integrated if they were a little easier to see...
I'm guessing it may be another userChrome.css change, but I've done some searching and the specifics of what to change have not jumped out at me.
Thanks.
-Noel
Re: Making the icons more bold?
Posted: 2017-10-18, 08:04
by Moonchild
The icons in use are designed for actual glass. Since you're not using that (but a transparency hack with color), it doesn't work as well.
You probably need to force the inverted toolbar icons as-used on dark personas (lightweight themes).
Something similar to this (untested!):
Code: Select all
toolbar .toolbarbutton-1 {
list-style-image: url("chrome://browser/skin/Toolbar-inverted.png") !important;
}
toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png") !important;
}
Re: Making the icons more bold?
Posted: 2017-10-18, 09:32
by NoelC
Hi Moonchild,
If there's not a percentage transparency being applied I guess what you're saying is that the "lightness" of the glow is baked into the pixels in the .png files in the skin. I guess I would have to replace those with ones with slightly less transparent glows to achieve just what I was thinking about. I like that the buttons are dark with light glows, though. I didn't care for the inverted ones, but thanks for the tips on identifying the userChrome.css elements that affect those button graphics.
There is blur involved. But perhaps by "actual glass" you mean that I don't have the same color schemes and theme atlas elements as with Windows 7's theme in play. That's true, I have reworked the graphic elements so it's a bit different than (though reasonably similar to) the stock theme used by Windows 7.
It's all good; I'm splitting hairs, and it's easy to get used to this combo. I've adjusted the font color downward a little from pure white and it is all feeling pretty decently integrated...
Code: Select all
menubar#main-menubar > menu {
color: #E8E8E8 !important;
text-shadow: 0px 0px 6px #000 !important;
font-weight: 600 !important;
}
menubar#main-menubar > menu:hover {
color: #FFFFFF !important;
text-shadow: 0px 0px 6px #000 !important;
font-weight: 600 !important;
}
-Noel
Re: Making the icons more bold?
Posted: 2017-10-18, 10:02
by Moonchild
The glass "halo" for the glass icons is indeed part of the actual icons.
I'm saying that in Windows 7 glass, you won't get the level of color-opaqueness you have with your blue; it's a different effect.