Instantly share code, notes, and snippets.

Embed
What would you like to do?
My Thunderbird userChrome for square tabs + some minor UI tweaks
/*
* 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;
}
}
@GdBai

This comment has been minimized.

GdBai commented Sep 19, 2018

Hi,

This is good stuff. Where can I find all the possible option (class name etc) for userChrome.css? Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment