Thunderbird 115: CSS Customizations, Vol. 2

Wisewiz · Mar 18, 2024

@das10 or anyone else who can find the answer:

Would you look in your wizard's spellbook and see whether there's a magic cure there for this tiny glitch: When I open TBird, the account name (top left) is in system default blue, and impossible to read against my color background. If I click on it, it turns to the desired white. I'd like it to be white all the time, and not have to click it (thus opening the account page) to get it there.
[Left is just opened; right is after click.]

das10 · Mar 18, 2024

I can't reproduce what you are seeing, on Tbird portable 115.8.1 ; for me, the last folder which is selected on closing, automatically gets selected on re-starting and so the font color is already white (when I use one of your last userChrome.css). Perhaps you could re-post your complete userChrome.css?

Wisewiz · Mar 18, 2024

OK. Back in a flash. But when I open TB, the Inbox is selected, and the account name above it is basic blue. To get the account name white, I have to click it.

Wisewiz · Mar 18, 2024

Current:

CSS:

/* folders list background - this is for the folder tree  */
#folderPane {
   background-color: #336699 !important;
   color:            white         !important;
}

/* folders list HOVER color */
/* can change the background-color value to ay particular value */
#folderTree li > .container:hover {
  background-color:  #4080BF    !important;
  color:            white    !important;
}

/* folder selected color - make sure icons and twisty dont get washed out */
#folderTree li.selected  > .container {
  background-color: #29116e  !important;
  color:            white    !important;
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-color: white !important;
}

/* Message Pane - Hover Message background/foreground-color */
[is="tree-view-table-body"] > *:hover {
  background-color: #4080BF  !important;
  color: white  !important;
}

/* Message Pane - Selected Message background/foreground-color */
[is="tree-view-table-body"] >.selected {
  background-color: #29116e  !important;
  color: white !important;
}

#folderTree li[data-folder-type="outbox"]  { display: None !important; }


#unifiedToolbar {
  height:  24px  !important;
  padding-block:   1px  !important;
  margin-block:    0px  !important;
  background:  #29116e  !important;
  color: white  !important;
}

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button):hover {
     padding-block: 1px             !important;
     background:    white           !important;   /* color of background */
     color:         #29116e         !important;   /* color of text/icons */
}

toolbar#toolbar-menubar {
  Order:            -1 !important;
  background-color: #336699 !important;  /* Color of menu bar */
  color:            white   !important;  /* Color of the text - if needed */
  height:           24px    !important;
  padding-top:      0px     !important;
  padding-bottom:   0px     !important;
  margin:           0px     !important;
}

/* Menu Bar captions - the hover effect                        */
/* Change the background / foreground to match what you require */

menubar > menu:hover {
background-color:  #29116e   !important;
     color:             white       !important;
}

/* Lines between messages in Cards View and Table View */
table[is="tree-view-table"],
table[is="thread-card-table"] {
     border-collapse: collapse      !important;
}
tr[is="thread-row"],
tr[is="thread-card"] {
  border-bottom: 2px solid black !important; 
}

toolbar#tabs-toolbar {
 background-color: #336699 !important;
 color:            white   !important;
 height:           fit-content !important;
 max-height:       24px    !important;   
 padding-top:      3px     !important;
 padding-bottom:   3px     !important;
 align-items:      center  !important;
}

#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: #29116e !important;
  color:            White  !important;
}

/* Whole Header Box with From & To Subject Cc etc. b-ground & text */
#MsgHeadersToolbar {
  background-color: #336699     !important;
  height:           min-content !important;
  color:            White       !important;
  padding-block:    0px         !important;
}

/* The To: email addresses */
#MsgHeadersToolbar .address-pill  {
  background-color: #336699 !important;
  color:            White   !important;
  height:           23px    !important;
}

/* The To: address "input" box (ie with cursor) */
#MsgHeadersToolbar .recipients-container input {
  border-radius:    3px     !important;
  color:            white   !important;
  background-color: #336699 !important;
  padding-inline:   2px     !important;
}

/* The To: address "container"  */
#MsgHeadersToolbar .recipients-container .address-container  {
  background-color: white !important;
  border-color:     white    !important;
  border-width:     0px      !important;
  border-radius:    2px      !important;
  padding-left:     2px      !important;
  padding-right:    1px      !important;
  }

/* The From: address box */
#msgIdentity {
  background-color: #336699   !important;
  color:            White     !important;
  border-color:     White       !important;
  border:           3px  groove !important;
  }

/* Contacts - Side panel */
#abContactsPanel,
#contactsSidebar .sidebar-header {
  background-color: #336699 !important;
  color:            white !important;
}

/*         Write window Contacts - Hover color.              */
#abResultsTree  > treechildren::-moz-tree-row(hover) {
  background-color: #4080BF         !important;
}

/*         Write window Contacts - Selected color.           */
/* note: use a light color here (when using the default      */
/* System theme, the text color will be white when selected  */
/* & black when focus moves away from Contacts List).        */
/* - can't find a way to change text color.                  */
#abResultsTree  > treechildren::-moz-tree-row(selected) {
  background-color: #29116e  !important;
  color:         white  !important;
  outline:          none            !important;
}

/* The whole of From To Subject Cc etc  toolbar */
#compose-toolbox toolbar {
  background-color: #29116e      !important;
  height:           min-content  !important;
  padding-block:    0px          !important;
  margin-block:     0px          !important;
  color:            white        !important;
}

/*               to do                   */
#compose-toolbox > menubar menu {
  color: lightgray !important;
}

#compose-toolbox menubar menu:hover {
  background-color: #336699    !important;
  color:            lightgray  !important;
}

/* Format toolbar */
#FormatToolbox,
#FormatToolbar > menulist  {
  background-color: #29116e !important;
  color:            white   !important;
}

Wisewiz · Mar 18, 2024

Seems now to be evading me. I dunno what sets it that colour, but sometimes I don't see it, even though I haven't clicked on the basic blue to turn it white.

Wisewiz · Mar 18, 2024

Ah HA! Just watched it change from white to basic blue: a message came in while the window was open and the message highlighted itself, and the account switched back from white to blue. So, New Message sets it to blue.

das10 · Mar 18, 2024

Nope! Even with the new css you posted, on my system, the account name folder gets started with it already selected. I don't know what might be causing the behaviour that you are seeing. Perhaps other users who are seeing a similar effect can confirm it, or have some idea about what is going on.

Sorry, ignore the above, I posted whilst you were responding.

Wisewiz · Mar 18, 2024

I have an active add-on called Start with Inbox. Maybe that's part of the problem. I'll remove it, and watch it through a few open and close and open cycles.

Wisewiz · Mar 18, 2024

Okay, took out the add-on, sent myself a message, and got this (because there's a New Message in the Inbox and a new message in the Sent box.).
Wait a min.

das10 · Mar 18, 2024

Yes, I just tested on some live email coming in from one a/c to another.

Try to see if this additional code makes any difference ( I hope it doesn't have any other side effects! ).
userChrome.css addition

Code:

#folderTree li.new-messages > .container > .name {
color: white !important;
}

ie if a folder has new messages in it set its font color white. (In your case this should mean that the folder with the new messages woulkd remain white).