[SOLVED] CSS question re: highlighting folders, mail

[Ed1]

On Thunderbird 60.4.0, I am using this CSS code to highlight rows with folder names and mail items while scrolling and selecting them:


/* MESSAGEPANE & FOLDERPANE SELECTED ROW BACKGROUND COLOR when NOT in focus */
treechildren::-moz-tree-row(selected) {
background-color: rgb(150, 201, 243) /* -moz-Dialog */ !important;
}

/* MESSAGEPANE & FOLDERPANE SELECTED ROW BACKGROUND COLOR when IN focus -- WORKING */
treechildren::-moz-tree-row(selected, focus) {
background-color: rgb(150, 201, 243) /* Highlight */ !important;
}

/* MESSAGEPANE & FOLDERPANE SCROLLING ROW BACKGROUND COLOR -- WORKING */
treechildren::-moz-tree-row(hover) {
background-color: rgb(226, 240, 252) /* Highlight */ !important;
}

This produces a medium blue highlight of the selected (clicked) row, but only after the cursor is moved off of the selected row and scrolls to other rows, which are temporarily highlighted in a lighter blue color when the cursor scrolls over them. After clicking on a row to select a folder or mail item, but before the cursor moves off of that row, the clicked row displays the lighter blue color that other rows do when scrolled.

This makes it hard to know visually that the row has been selected (clicked) until after the cursor is moved off of the row. It would be an improvement if the selected row immediately displayed the darker (selected row) blue color, even before the cursor is moved off of it. That way there is no confusion on whether the row has been clicked.

Another downside of the current behavior is that if a folder or mail item has been clicked on to select it but the user then scrolls to other rows and back over the selected row, when the cursor reaches the selected row it changes color to match the lighter blue scrolled row color until the cursor is again moved off of that row. This is not intuitive either.

To summarize, once a folder is selected (clicked) it should immediately display the darker selected (clicked) row color. It should retain that darker selected (clicked) row color even if the cursor subsequently scrolls off of it and then back over it.

Can anyone suggest how to edit the above code to achieve this? Thanks.

[morat]

Try this:

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

treechildren::-moz-tree-row(selected) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(selected, focus) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(hover) {
  background-color: rgb(226, 240, 252) !important;
}

treechildren::-moz-tree-row(hover, selected) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(hover, selected, focus) {
  background-color: rgb(150, 201, 243) !important;
}

http://kb.mozillazine.org/UserChrome.css

[Ed1]

Thank you very much, morat. This woks perfectly and is exactly what I had in mind!

How could I designate a slightly darker color row background for when the mouse lelft-click button is actually being pressed down (similar to how the scrollbar coloring changes when it is pressed)?

[morat]

AFAIK, there is no property for a tree element for the moment a row is clicked like "a:active" for a link.

Styling a tree
http://developer.mozilla.org/docs/Mozil ... ing_a_Tree

Styling a link
http://www.w3schools.com/css/css_link.asp