My Thunderbird userChrome for square tabs + some minor UI tweaks

userChrome.css

/*
 * Thunderbird userChrome.css
 * For version 60 or later *ONLY*, will probably break and uglyfy older versions
 * of TB.
 *
 * it's meant to be used with the default 3 panel split layout
 */

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


/*
 * this changes the font for ALL UI elements
 * does not affect content (=emails in the viewing pane)
 */
* { 
	font-size: 8pt !important;
  	font-family: "Verdana" !important; 
	/*font-size: 10pt !important;
  	font-family: "Segoe UI Semibold" !important; */
} 

#dirTree-splitter, #sidebar-splitter, #threadpane-splitter,
#results-splitter, #compose-toolbar-sizer, #attachment-splitter,
#additionalFolderPaneSplitter, #threadpane-splitter,#calendarDisplayDeck, #today-pane-splitter {
    border: 0 !important;
}

#folderpane_splitter {
    min-width: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    border-left: 2px solid #f0f3f7 !important;
    border-right: 2px solid #f0f3f7 !important;
    margin-right:0 !important;
}
/*
 * the following deals with tabs:
 * 
 * 1. make them square
 * 2. Blend the active tab with the toolbar background
 * 3. Subtle background highlight for the hovered tab
 * 4. Slightly reduce the hight
 * --------------------------------------------------------------------
 */


#tabs-toolbar {
    margin-top: 10px !important;
    margin-left: 10px !important;
}

#tabs-toolbar .tab-text {
	font-size: 8pt !important;
	font-weight: bold !important;
}

/*
#tabs-toolbar .tab-background-start,
#tabs-toolbar .tab-background-end{
  display: none !important;
}

#tabs-toolbar .tab-background-middle{
  margin: -4px -2px !important;
  background: transparent !important;
}


#tabs-toolbar .tabmail-arrowscrollbox {
  margin: 0px !important;
}

#mail-toolbox{
  box-shadow: 0px -1px 0px threedshadow inset !important;
}

#tabs-toolbar .tabmail-tab {
  padding: 2px !important;
  max-height: 26px !important;
  height:26px !important;
}

#tabs-toolbar .tabmail-tab:not([first-tab]) {
  padding: 2px !important;
}

#tabs-toolbar .tab-text {
	font-size: 8pt !important;
	font-weight: bold !important;
}

#tabs-toolbar .tab-text:not([selected]):-moz-window-inactive {
  color: rgba(0,0,0,0.5) !important;
}

#tabs-toolbar .tabmail-tab:hover:not([selected]) {
  background: #d7d8da !important;
}

#tabs-toolbar .tabmail-tab[selected]{
  background: -moz-dialog !important;
  border: 1px solid threedshadow !important;
  border-bottom: none !important;
}
*/
 
/*
 * --------------------------------------------------------------------
 * end of tabs section
 */



#messengerWindow[sizemode="normal"] #navigation-toolbox {
  margin: 0px 0px 0px !important;
}

/*
 * background for the folder tree. normally white, but since we zebra-ize
 * it, i set it to color #2 and odd rows to white. You can do this the other
 * way around, of course, if you prefer a white folder tree background 
 */
#folderTree {
	background-color: #F0F3F7 !important;
    border-right: 1px solid #A9B7C9 !important;
}

/*
 * zebra-ize the folder tree 
 * (alternating row background colors
 * add some minor padding 
 * --------------------------------------------------------------------
 */
 

#folderTree > treechildren::-moz-tree-row(odd) {
	border: 1px solid transparent !important;
  	background-color:white !important;
}

#folderTree > treechildren::-moz-tree-row(selected) {
	border: 1px solid transparent !important;
  	background-color: #C1DBFC !important;
}

#folderTree > treechildren::-moz-tree-row(hover) {
	border: 1px solid transparent !important;
  	background-color: #FBE986 !important;
}

/*
 * adjust the row height to the slightly increase font size
 */
#folderTree > treechildren::-moz-tree-row {
	height:24px !important;
	min-height: 24px !important;
}

#folderTree > treechildren::-moz-tree-line {
    visibility: visible !important;
}

/*
 * bigger font for the folder tree
 */
#folderTree > treechildren::-moz-tree-cell-text {
	font-size:9pt !important;
	/*font-family: "Segoe UI Semibold" !important;*/
}

/*
 * some padding left and right (looks better imho, otherwise the)
 */
#folderTree > treechildren::-moz-tree-cell {
	padding: 0 8px !important;
}
/*
 * end of folder tree section
 * --------------------------------------------------------------------
 */


#threadTree {
    border-left: 1px solid #A9B7C9 !important;
    border-bottom: 1px solid #A9B7C9 !important;
    padding: 0 !important;
}
/*
 * alternating row colors in the message index pane
 */
#threadTree treechildren::-moz-tree-row(odd) {
	border: 1px solid transparent !important;
  	background-color:#F0F3F7 !important;
}

#threadTree treechildren::-moz-tree-row(selected) {
	border: 1px solid transparent !important;
  	background-color:#C1DBFC !important;
    margin: 0 !important;
}

#threadTree treechildren::-moz-tree-row(hover) {
	border: 1px solid transparent !important;
  	background-color:#FBE986 !important;
    margin: 0 !important;
}

#threadTree treechildren::-moz-tree-row {
	height:22px !important;
	max-height: 22px !important;
	padding-top: 1px !important;	/* this might be font dependent? */
    margin: 0 !important;
}

#threadTree treechildren {
	font-size:8pt !important;
	/*font-family: "Segoe UI Semibold" !important;*/
}


/*
 * make group headers stick out a bit more prominently
 * (give them a darker background)
 */
#threadTree treechildren::-moz-tree-row(dummy){
	background: #A0B0C9 !important;
	border: 1px solid transparent !important;
	margin-bottom: none !important;
    margin: 0 !important;
}

/*
 * tweaks for the message pane header
 * make it white, add some padding
 */
header-view-button-box {
  padding: 0px !important;
  border: 1px solid rgba(0,0,0,0.25);
}

#msgHeaderViewDeck {
  background-color: -moz-dialog !important;
  border-bottom: 0 !important;
}

/* flatify header (remove additional bottom border) */
#msgHeaderView {
    border-bottom: 0 !important;
}

#msgHeaderViewDeck label {
  	font-family: Verdana !important;
  	font-size:9pt !important;
}

#expandedsubjectBox .headerValue {
	font-size:10pt !important;
}

#msgHeaderViewDeck label#CompactHeader_collapsedsubjectlinkBox, #CompactHeader_collapsed1LsubjectBox .headerValue, #CompactHeader_collapsed2LsubjectBox .headerValue {
	text-decoration: none !important;
	margin-bottom: 5px !important;
	margin-top: 0 !important;
	-moz-appearance: none !important;
  	font-size:10pt !important;
  	line-height: 100% !important;
  	padding-top: 0 !important;
  	padding-bottom: 0 !important;
  	min-height: 12pt !important;
  	height: 12pt !important;
  	max-height: 12pt !important;
  	vertical-align: top !important;
}

/*
 * the message preview pane itself
 */
#messagepanebox {
  margin: 5px 0 0 0 !important;
  background-color: -moz-dialog !important;
  padding: 0 !important;
  border-left: 1px solid #A9B7C9 !important;
  border-top: 1px solid #A9B7C9 !important;
  border-bottom: 0 !important;
}

/* the message container (the part that displays the message, without header area) */
#messagepane {
	margin:5px 10px !important;
	border:1px solid #ccc !important;
	padding: 0 10px !important;
	background-color:white !important;
	box-shadow: 0 0 2px 0px rgba(0,0,0,0.35);
}

#expandedtagsRow { 
	display: none !important;
}

#item-description { 
}

#content-frame {
    border-left: 1px solid ThreeDDarkShadow;
    border-right: 1px solid ThreeDLightShadow;
    min-width: 10px;
    min-height: 10px;
    height: 400px;
	font-family: Consolas,monospace !important;
	font-size: 12pt !important;
} 
/*
 * Minor UI tweaks for the thunderbird-conversations addon. You can delete this 
 * section if you do not use that addon. Or leave it here; it does not touch 
 * anything else.
 */
@-moz-document url(chrome://conversations/content/stub.xhtml)
{

	/* changes background color of the message body*/

	body
	{
		background-color: #FFF !important;
	}

	/* eliminates the box shadow */

	#conversationHeaderWrapper
	{
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}

	/* changes attributes of the conversation header */

	#conversationHeader
	{
		padding: 4px 10px !important;
		background-image:none !important;
		min-height: 33px !important;
		max-height: 33px !important;
	}

	/* 
	 * the subject in the message header. Center it vertically, adjust the 
	 * height of the subject bar.
	 */

	.subject
	{
		font-weight: bold; !important;
		padding-top: 0px !important;
		padding-bottom: 12px !important;
		margin-top: 0px !important;
		margin-bottom: 12px !important;
		font-size: 14px !important;
	}

	/* 
	 * more subtle (= brighter) border around the message. Remove the box
	 * shadow and rounded corners.
	 */

	.message
	{
		border: 1px solid #ccc !important;
		-moz-box-shadow: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	#folderpane-title {
	    font-size: 1.2em !important;
	    font-weight: bold !important;
	}
}