Closed Acid-Crash closed 3 years ago
Aris-t2
commented
3 years ago I've added a new option, which is already on the pre releases.
:root{
--tabs_toolbar_background: red;
--tabs_toolbar_background_inactive: blue;
}
@media (-moz-proton) {
#main-window:not(:-moz-lwtheme) #TabsToolbar {
background: var(--tabs_toolbar_background) !important;
}
#main-window:not(:-moz-lwtheme):-moz-window-inactive #TabsToolbar {
background: var(--tabs_toolbar_background_inactive) !important;
}
}
Acid-Crash
commented
3 years ago @Aris-t2 thank you for the quick fix. In general it works file However, I believe that it needs to be polished a bit. If a darker color is set as the TabBackground, inactive tab text is hard to read. Can you please take a look into this? Seems like we need to set variable for Inactive tab label text and maybe Focused/hovered tab background color+Focused/hovered tab label text)?
Upd.
Windows UI buttons (maximize/minimize/Close) colors will also need to be set..
Aris-t2
commented
3 years ago The stuff needed to be taken care of for this "feature" to work seems to become far more complex than intended.
Unfortunately Firefox is not able to detect automatically which text colors are required for a custom toolbar color.
Test this:
:root{
--top_toolbars_background: black !important;
--top_toolbars_background_inactive: orange !important;
--top_toolbars_text: white !important;
--top_toolbars_text_inactive: black !important;
}
@media (-moz-proton) {
#main-window:not(:-moz-lwtheme) #titlebar,
#main-window:not(:-moz-lwtheme) #toolbar-menubar,
#main-window:not(:-moz-lwtheme) #TabsToolbar,
#main-window:not(:-moz-lwtheme) #navigator-toolbox{
background: var(--top_toolbars_background) !important;
color: var(--top_toolbars_text) !important;
}
#main-window:not(:-moz-lwtheme):-moz-window-inactive #titlebar,
#main-window:not(:-moz-lwtheme):-moz-window-inactive #toolbar-menubar,
#main-window:not(:-moz-lwtheme):-moz-window-inactive #TabsToolbar,
#main-window:not(:-moz-lwtheme):-moz-window-inactive #navigator-toolbox {
background: var(--top_toolbars_background_inactive) !important;
color: var(--top_toolbars_text_inactive) !important;
}
#main-window:not(:-moz-lwtheme) #main-menubar > menu > label {
color: var(--top_toolbars_text) !important;
}
#main-window:not(:-moz-lwtheme):-moz-window-inactive #main-menubar > menu > label {
color: var(--top_toolbars_text_inactive) !important;
}
/* use caption buttons offered for lw-themes */
.titlebar-button {
-moz-context-properties: unset !important;
}
.titlebar-min {
list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg) !important;
}
.titlebar-max {
list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg) !important;
}
.titlebar-restore {
list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg) !important;
}
.titlebar-close {
list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg) !important;
}
}@Aris-t2 It works quite darn fine!)) A small observation regarding custom SVG for Maximize/Minimize/Close button.
I tried to get by without those alternative SVGs (used default ones) with the following CSS (pretty sure this is not the most elegant way of doing it, but it works),
#main-window:not(:-moz-lwtheme) .titlebar-button {stroke: #fff !important;}
#main-window:not(:-moz-lwtheme):-moz-window-inactive .titlebar-button {stroke: CurrentColor !important;}
#main-window:not(:-moz-lwtheme):-moz-window-inactive .titlebar-button.titlebar-close:hover {stroke: #fff !important;}
Win10 for some reason Paint Hovered inactive Close button with White...
Aris-t2
commented
3 years ago I like your solution more.
I'm wondering why the variable CurrentColor offers proper results for light and dark background colors automatically, when used for caption buttons, but not for text used on toolbars.
Acid-Crash
commented
3 years ago It works much better now with 3.2.2.
One small leftover would be adding Plus/New tab button to the module
Aris-t2
commented
3 years ago Good idea. Same applies to (scroll)buttons too.
Acid-Crash
commented
3 years ago Hi @Aris-t2 Recently there were some comments reg accent color within the following ticket, they are related to usage of -moz-accent-color and -moz-accent-color-foreground
Maybe this will be useful for you in scope of code optimization of refactoring. https://bugzilla.mozilla.org/show_bug.cgi?id=1701266#c69
As a result, this messed up usability of the browser (hard to distinguish active tab and active window) No doubt it is possible to disable Proton completely or set a custom theme, however those solutions have some side effects. Kindly asking to have a look whether it is possible to set the TitleBar color manually by CSS.
To mimic removed functionality, the following colors should be taken into account.
Active Firefox window: TitleBar/Background color Active tab font color Inactive tab font color
Inactive Firefox window: TitleBar/Background color Active tab font color Inactive tab font color
P.S. The following Firefox color seems to be able to set the separate TitleBar Color however it has a flaw it terms af setting Dark color for Context menus which is unneeded https://color.firefox.com/?theme=XQAAAAJyAQAAAAAAAABBKYhm849SCia6aSqEGccwS-xMDPsqvMQuvAF6DfFcVnIO2RlYPn7K96jxJl9euVMPIG3hXZanKHmO0SR6HAFypXPQodXI0IApXyo0vUL2bJ6TKo55agaySyLYVycfJRH5JWbW5mhasxmWu8vufdYBik_o42A2KoDCzaT56Bd6rOBwJgRAvXB0fdFkbgIbV8iw1NjTyaQNPYTpc0jo_tHq-a2R9pExRHQqLOaMwjpL_48SQ-GIQr_P35VJTKhJVPIbWMj_TJ1fJmfWYQlu9aX_6rYvZA
What should have happened instead?
Steps to reproduce the issue?
SCREENSHOTS with/without this projects files (drag & drop images into this post)
System information