MozillaZine

Earlybird 29.0 - Restore White Pane in Compose Message

Discussion about official Mozilla Thunderbird builds
L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted February 5th, 2014, 6:55 pm

After updating to Earlybird 29.0, I notice in the new message window that the white window for "To:" and "Subject:" now default to the background color until hovered over. Is there a way to get the old "white window" of older versions back? I have a shot of the mail window in SeaMonkey only as an example since I can't get a shot of how the TB window was before the update.

Earlybird:

Image

SeaMonkey:

Image
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

rsx11m
Moderator
 
Posts: 14420
Joined: May 3rd, 2007, 7:40 am
Location: US

Post Posted February 6th, 2014, 12:22 pm

That's the result of #960672 as part of meta bug #867166 Update Composer UI. See the OSX-specific #867161 for motivation and discussion of this design change.

#msgIdentity and #msgSubject seem like good starting points for CSS tweaks. I don't know if a simple "background-color: -moz-field !important;" would suffice, but you can give it a try.

L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted February 6th, 2014, 3:51 pm

rsx11m wrote:That's the result of #960672 as part of meta bug #867166 Update Composer UI. See the OSX-specific #867161 for motivation and discussion of this design change.

#msgIdentity and #msgSubject seem like good starting points for CSS tweaks. I don't know if a simple "background-color: -moz-field !important;" would suffice, but you can give it a try.


Thanks, rsx11m, for the heads-up! :wink: I'll give it a try.
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted February 6th, 2014, 3:55 pm

Edit - See my post 6-17-14 below for an alternative display.

The codes below will give you the "white" background where you marked with the red X that you wanted. However, you will still see some space between the .textbox-addressingWidget and .dummy-row-cell:not(:first-child). It would take too much time to hack the previous default UI back in.

Code: Select all
/* ::::: addressing widget ::::: */

.textbox-addressingWidget,
.dummy-row-cell:not(:first-child) {
  background-color: -moz-field !important;
  transition: border .0s, background-color .0s !important;
}

@media not all and (-moz-windows-default-theme) {
  .textbox-addressingWidget,
  .dummy-row-cell:not(:first-child) {
    background-color: -moz-field !important;
    border: 2px solid transparent !important;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }

  .textbox-addressingWidget:hover,
  .textbox-addressingWidget[focused="true"] {
    background-color: -moz-field;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }
}

/* ::::: subject box ::::: */

#msgSubject {
  -moz-appearance: none;
  background-color: -moz-field !important;
  transition: border .0s, background-color .0s !important;
}

@media not all and (-moz-windows-default-theme) {
  #msgSubject {
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }

  #msgSubject:hover,
  #msgSubject[focused="true"] {
    background-color: -moz-field;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }
}
Last edited by Bozz on June 17th, 2014, 6:36 am, edited 4 times in total.

L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted February 6th, 2014, 6:51 pm

Bozz wrote:I've managed to hack my previous compose window back in. That wasn't fun at all. The biggest problems I had was the up/down margin and padding spacing. I use two lines and the spacing varies with using three lines so what I have in place in conjunction with the rest of the window would not work for public consumption.

The codes below will give you the "white" background where you marked with the red X that you wanted. However, you will still see some space between the .textbox-addressingWidget and .dummy-row-cell:not(:first-child). It would take too much time to hack the previous default UI back in.

Code: Select all
/* ::::: addressing widget ::::: */

.textbox-addressingWidget,
.dummy-row-cell:not(:first-child) {
  background-color: -moz-field !important;
  transition: border .0s, background-color .0s !important;
}

@media (-moz-windows-default-theme) {
  .textbox-addressingWidget,
  .dummy-row-cell:not(:first-child) {
    background-color: -moz-field !important;
    border: 1px solid transparent !important;
    border-top-color: ThreeDShadow !important;
    border-right-color: ThreeDShadow !important;
    border-bottom-color: ThreeDShadow !important;
    border-left-color: ThreeDShadow !important;
  }

  .textbox-addressingWidget:hover,
  .textbox-addressingWidget[focused="true"] {
    background-color: -moz-field;
    border-top-color: ThreeDShadow !important;
    border-right-color: ThreeDShadow !important;
    border-bottom-color: ThreeDShadow !important;
    border-left-color: ThreeDShadow !important;
  }
}

@media not all and (-moz-windows-default-theme) {
  .textbox-addressingWidget,
  .dummy-row-cell:not(:first-child) {
    background-color: -moz-field !important;
    border: 2px solid transparent !important;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }

  .textbox-addressingWidget:hover,
  .textbox-addressingWidget[focused="true"] {
    background-color: -moz-field;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }
}

/* ::::: subject box ::::: */

#msgSubject {
  background-color: -moz-field !important;
  transition: border .0s, background-color .0s !important;
}

@media (-moz-windows-default-theme) {
  #msgSubject {
    border-width: 1px;
    border-bottom-color: ThreeDShadow;
  }

  #msgSubject:hover,
  #msgSubject[focused="true"] {
    background-color: -moz-field;
    border-color: ThreeDShadow;
  }
}

@media not all and (-moz-windows-default-theme) {
  #msgSubject {
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }

  #msgSubject:hover,
  #msgSubject[focused="true"] {
    background-color: -moz-field;
    -moz-border-top-colors: ThreeDShadow transparent !important;
    -moz-border-right-colors: ThreeDShadow transparent !important;
    -moz-border-bottom-colors: ThreeDShadow transparent !important;
    -moz-border-left-colors: ThreeDShadow transparent !important;
  }
}


Thanks, thanks, thanks! I don't mind the little space between rows. This code works great. Kudos, Bozz! =D>
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted February 7th, 2014, 2:23 am

You're welcome.

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted June 17th, 2014, 6:32 am

Hi Grizz,
I was bored so I've been playing around with the new UI and came up with a little mix of Thunderbird v24 and the latest 33.0a1.

If you could test it please, I would appreciate it.

Image


Code: Select all
/* ::::: From: msgIdentity box ::::: */

#msgIdentity {
   background-color: -moz-Field !important;
   transition: border .0s, background-color .0s !important;
   border-radius: 2px !important;
}

@media not all and (-moz-windows-default-theme) {
   #msgIdentity {
     -moz-border-top-colors: ThreeDShadow ThreeDLightShadow !important;
     -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-left-colors: ThreeDShadow ThreeDLightShadow !important;
  }

  #msgIdentity:hover,
  #msgIdentity[focused="true"] {
     background-color: -moz-Field !important;
     -moz-border-top-colors: ThreeDShadow ThreeDLightShadow !important;
     -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-left-colors: ThreeDShadow ThreeDLightShadow !important;
  }
}


/* ::::: To, Cc, Bcc button ::::: */

@media not all and (-moz-windows-default-theme) {
  .aw-menulist {
     margin-top: 0px !important;
     -moz-margin-end: 4px !important;
     border-width: 2px !important;
     -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
     -moz-border-right-colors: ThreeDDarkShadow ThreeDLightShadow !important;
     -moz-border-bottom-colors: ThreeDDarkShadow ThreeDLightShadow !important;
     -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
     background-color: rgba(128, 128, 128, .15) !important;
     transition: background-color .05s ease-in !important;
     border-radius: 2px !important;
  }

  .aw-menulist:hover {
     background-color: rgba(128, 128, 128, .3) !important;
  }

  .aw-menulist[open="true"] {
     background-color: rgba(128, 128, 128, .05) !important;
  }

  .aw-menulist:-moz-window-inactive {
     opacity: .7 !important;
  }
}

.aw-menulist > .menulist-label-box {
   margin: 1px 0 -1px 0 !important;
}


/* ::::: addressing widget ::::: */

#textcol-addressingWidget {
   background-color: -moz-Field !important;
   border: 1px solid ThreeDShadow !important;
   border-radius: 2px !important;
}

.textbox-addressingWidget {
   margin-bottom: -5px !important;
   margin-bottom: -2px !important;
   transition: border .0s, background-color .0s !important;
}

.dummy-row-cell:not(:first-child) {
   margin-bottom: 0px !important;
}

@media not all and (-moz-windows-default-theme) {
  .textbox-addressingWidget {
     background-color: transparent !important;
     border: 2px solid transparent !important;
     -moz-border-top-colors: transparent transparent !important;
     -moz-border-right-colors: transparent transparent !important;
     -moz-border-bottom-colors: #CACAFF   transparent !important;
     -moz-border-left-colors: transparent transparent !important;
  }

  .dummy-row-cell:not(:first-child) {
     background-color: transparent !important;
     border: 2px solid transparent !important;
     -moz-border-top-colors: transparent transparent !important;
     -moz-border-right-colors: transparent transparent !important;
     -moz-border-bottom-colors: #CACAFF  transparent !important;
     -moz-border-left-colors: transparent transparent !important;
  }

  .textbox-addressingWidget:hover,
  .textbox-addressingWidget[focused="true"] {
     background-color: transparent !important;
     -moz-border-top-colors: transparent transparent !important;
     -moz-border-right-colors: transparent transparent !important;
     -moz-border-bottom-colors: #CACAFF   transparent !important;
     -moz-border-left-colors: transparent transparent !important;
  }
}


/* ::::: subject box ::::: */

#subject-box {
   margin-top: 1px !important;
}

#msgSubject {
   background-color: -moz-Field !important;
   transition: border .0s, background-color .0s !important;
   border-radius: 2px !important;
}

@media not all and (-moz-windows-default-theme) {
  #msgSubject {
     -moz-border-top-colors: ThreeDShadow ThreeDLightShadow !important;
     -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-left-colors: ThreeDShadow ThreeDLightShadow !important;
  }

  #msgSubject:hover,
  #msgSubject[focused="true"] {
     background-color: -moz-Field !important;
     -moz-border-top-colors: ThreeDShadow ThreeDLightShadow !important;
     -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
     -moz-border-left-colors: ThreeDShadow ThreeDLightShadow !important;
  }
}

L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted June 17th, 2014, 1:58 pm

Bozz wrote:Hi Grizz,

I was bored so I've been playing around with the new UI and came up with a little mix of Thunderbird v24 and the latest 33.0a1.

If you could test it please, I would appreciate it.


Hi Bozz,

Here's how it looks on my system with TB 29.0:

Image

Thanks!
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted June 17th, 2014, 2:19 pm

You're welcome.

I can see the bottom dummy row border and a couple of other alignments that are not quite the same as my setup in your screen shot. I guess it's the theme and/or font sizes your using making a difference. I have no idea how to adjust the codes to compensate.

It is a hack job so it looks like it won't be just right for everyone. Sorry 'bout that. :|

L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted June 17th, 2014, 2:27 pm

Bozz wrote:You're welcome.

I can see the bottom dummy row border and a couple of other alignments that are not quite the same as my setup in your screen shot. I guess it's the theme and/or font sizes your using making a difference. I have no idea how to adjust the codes to compensate.

It is a hack job so it looks like it won't be just right for everyone. Sorry 'bout that. :|


Strange, but after opening the mail window again, the dummy row has re-aligned itself:

Image

Everything looks fine to me. Maybe the other differences you notice are due to our Windows Themes and/or screen resolutions (as well as font choices).
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted June 17th, 2014, 2:38 pm

Yeah, the border is better now. The other spot was the To: in the selector looks a little low but that looks like theme or font size doing that. If it's good enough for you, I'm satisified.

L.A.R. Grizzly

User avatar
 
Posts: 5308
Joined: March 15th, 2005, 5:32 pm
Location: Akron, Ohio, USA

Post Posted June 17th, 2014, 2:45 pm

Bozz wrote:Yeah, the border is better now. The other spot was the To: in the selector looks a little low but that looks like theme or font size doing that. If it's good enough for you, I'm satisified.


I disabled your code and the "To:" is still a little low with the default window. It may be my fonts. I'm using the default fonts that TB uses. I haven't changed any. I'm not fussy. If you hadn't pointed it out, I would never have noticed. Good job! =D>
Last edited by L.A.R. Grizzly on September 3rd, 2014, 9:35 am, edited 1 time in total.
Win7 Pro SP1 64 Bit
Comodo Internet Security
Pale Moon 27.6.1, Firefox 52.5.0esr, SeaMonkey 2.48, FossaMail 38.6.0 and Thunderbird 52.4.0

Bozz
 
Posts: 2673
Joined: October 18th, 2007, 1:53 pm

Post Posted June 17th, 2014, 2:52 pm

Good enough. At least I know now that it's more of a system thing and not so much the codes.

later

plittlefield
 
Posts: 2
Joined: July 25th, 2014, 7:16 am

Post Posted July 25th, 2014, 7:20 am

Alas, this does not work for me.

I have created a file UserChrome.css in my TB 31 profile folder, pasted the code from the post above and restarted TB.

It still shows the grey text boxes in the Compose window.

Paully

rsx11m
Moderator
 
Posts: 14420
Joined: May 3rd, 2007, 7:40 am
Location: US

Post Posted July 25th, 2014, 7:35 am

If it doesn't show any effect at all, it may be at the wrong location or the spelling may be wrong. On Linux, this should be located at ~/.thunderbird/random.default/chrome/userChrome.css (also watch for correct capitalization of the file name).
plittlefield wrote:I have created a file UserChrome.css in my TB 31 profile folder

Another problem may be a typo somewhere when copy-pasting the code. In Tools > Error Console, do you see any warnings or errors pointing to the userChrome.css file?

Return to Thunderbird Builds


Who is online

Users browsing this forum: No registered users and 1 guest