There is css to make a 2-line cards view in 128:

http://forums.mozillazine.org/viewtopic.php?p=14986732&sid=2dc9287a80dccb1f4b72ca65149afbf0#p14986732

TB 140+ includes the 2 or 3-line option in Settings/Appearance.

Thank you. This was helpful in shrinking the size of cards view. Is there a way to adjust the default, read, unread color of the background of the cards now?

When I had my userChrome set to the table view before, the colors matched my theme and desired colors and the table view still does this but now the table view is only one line and condensed.

I'm find using card view as long as I can figure out how to adjust the colors to be like the table view that I have set now.

I would like it to match my table view colors.

To start, look at these topics that provide css for cards:

https://support.mozilla.org/en-US/questions/1447610

https://support.mozilla.org/en-US/questions/1455376

https://support.mozilla.org/en-US/questions/1462837#answer-1673571

Thanks. Based on those, I was only able to get the text color to change based on the flag type. I was not able to get the whole background color of the card to change colors. I'm not sure what I'm missing in my css for that to work.

Here is some css that changes the card background for read, unread and selected messages (see picture):

tr[is="thread-card"][data-properties~="unread"] .card-container
{background-color: lightgreen !important;}

tr[is="thread-card"][data-properties~="read"] .card-container
{background-color: yellowgreen !important;}

tr[is="thread-card"][data-properties~="read"].selected .card-container
{background-color: lightgrey !important;}

Thanks. I got your syntax to work except I would not want to use specific colors. Instead of those colors, I would want to use hex values. I tried entering hex values like this but it didn't work:

tr[is="thread-card"][data-properties~="unread"] .card-container {background-color: #333333 !important;}

tr[is="thread-card"][data-properties~="read"] .card-container {background-color: ##2b2b2b !important;}

tr[is="thread-card"][data-properties~="read"].selected .card-container {background-color: ##3b3b3b !important;}

Hex values work fine here (see picture) applied to the system theme. I think you have one too many # in the colour code. Note I changed the css so that the selected colour applies to all messages and added a hover colour.

tr[is="thread-card"][data-properties~="unread"] .card-container
{background-color: #696969 !important;}

tr[is="thread-card"][data-properties~="read"] .card-container
{background-color: #C4C4C4 !important;}

tr[is="thread-card"].selected .card-container
{background-color: #191970 !important;}

tr[is="thread-card"]:hover .card-container
{background-color: lightblue !important;}

https://htmlcolorcodes.com/

Good catch on the # on the hex codes. I removed the extra # for each line and now its looking a lot more to my preferences. Do you know if there is a way to change the overall background color behind the cards (which looks black) to something else also?

Thanks!

Try this for the message list background:

table[is="tree-view-table"] td {
  background-color: pink !important;}

This all works great. Thanks!