On 12/14/20 5:03 PM, this is what Ken Springer wrote:
> After reading some web posts, I gather it's no longer possible to have thread lines for messages?
>
>
This is a bit long, But you can drop all this into one tree.css and just import it into your existing userchrome.css with the following on
the first line
@import "tree.css";
I wish I could take credit but I got this off the internet. No idea where though. Watch out for line wraps.
---------------------------------------
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at
http://mozilla.org/MPL/2.0/. */
/* ===== tree.css ===================================================
== Styles used by the XUL outline element.
======================================================================= */
/*** THE SHORT STORY: This is here to draw the lines connecting threaded messages and folders. */
/* ::::: tree ::::: */
tree {
margin: 0px 4px;
border: 1px solid rgba(24, 24, 24, .32);
background-color: -moz-Field;
color: -moz-FieldText;
-moz-appearance: listbox;
}
/* ::::: tree rows ::::: */
treechildren::-moz-tree-row {
border: 1px solid transparent;
background-color: transparent;
min-height: 18px;
height: 1.3em;
}
treechildren::-moz-tree-row(selected) {
background-color: -moz-Dialog;
}
treechildren::-moz-tree-row(selected, focus) {
background-color: Highlight;
}
treechildren::-moz-tree-row(current, focus) {
border: 1px dotted #000000;
}
treechildren::-moz-tree-row(selected, current, focus) {
border: 1px dotted #C0C0C0;
}
tree[seltype="cell"] > treechildren::-moz-tree-row,
tree[seltype="text"] > treechildren::-moz-tree-row {
border: none;
background-color: transparent;
}
/* ::::: tree cells ::::: */
treechildren::-moz-tree-cell {
padding: 0px 2px 0px 2px;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell-text,
tree[seltype="text"] > treechildren::-moz-tree-cell-text,
treechildren::-moz-tree-cell-text {
color: inherit;
}
treechildren::-moz-tree-cell-text(selected) {
color: -moz-DialogText;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell {
border: 1px solid transparent;
padding: 0px 1px 0px 1px;
}
tree[seltype="text"] > treechildren::-moz-tree-cell-text {
border: 1px solid transparent;
padding: 0px 1px 1px 1px;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) {
background-color: -moz-Dialog;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) {
color: -moz-DialogText;
}
tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) {
background-color: -moz-Dialog;
color: -moz-DialogText;
}
treechildren::-moz-tree-cell-text(selected, focus) {
color: HighlightText;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus) {
background-color: Highlight;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
color: HighlightText;
}
tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
background-color: Highlight;
color: HighlightText;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell(active, current, focus) {
border: 1px dotted #000000;
}
tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, current, focus) {
border: 1px dotted #000000;
}
tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, current, focus) {
border: 1px dotted #C0C0C0;
}
tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, current, focus) {
border: 1px dotted #C0C0C0;
}
/* ::::: lines connecting cells ::::: */
treechildren::-moz-tree-line {
visibility: visible;
}
tree[seltype="cell"] > treechildren::-moz-tree-line,
tree[seltype="text"] > treechildren::-moz-tree-line,
treechildren::-moz-tree-line {
border: 1px dotted rgba(24, 24, 24, .32);
}
/* ::::: tree separator ::::: */
treechildren::-moz-tree-separator {
border-top: 1px solid rgba(24, 24, 24, .32);
border-bottom: 1px solid ThreeDHighlight;
}
/* ::::: drop feedback ::::: */
tree[seltype="cell"] > treechildren::-moz-tree-cell-text(primary, dropOn),
tree[seltype="text"] > treechildren::-moz-tree-cell-text(primary, dropOn),
treechildren::-moz-tree-cell-text(primary, dropOn) {
background-color: Highlight;
color: HighlightText;
}
treechildren::-moz-tree-drop-feedback {
background-color: Highlight;
width: 50px;
height: 2px;
margin-left: 5px;
}
/* ::::: tree progress meter ::::: */
treechildren::-moz-tree-progressmeter {
margin: 2px 4px;
border: 2px groove rgba(24, 24, 24, .32);
background-color: -moz-Dialog;
color: rgba(24, 24, 24, .32);
}
treechildren::-moz-tree-progressmeter(progressUndetermined) {
list-style-image: url("chrome://global/skin/progressmeter/progressmeter-busy.gif");
}
treechildren::-moz-tree-cell-text(progressmeter) {
margin: 2px 4px;
}
/* ::::: tree columns ::::: */
treecol,
treecolpicker {
border: 2px groove rgba(24, 24, 24, .32);
background-color: -moz-Dialog;
color: -moz-DialogText;
-moz-box-align: center;
-moz-box-pack: start;
text-shadow: none;
padding: 1px 2px 2px;
-moz-context-properties: fill;
fill: currentcolor;
}
..treecol-image {
padding-top: 2px;
-moz-padding-start: 2px;
-moz-padding-end: 2px;
}
..treecol-text {
margin: -1px 2px -1px 0px !important;
}
..treecol-icon,
..tree-columnpicker-icon {
margin: -2px;
}
treecol[hideheader="true"] {
-moz-appearance: none;
border: none;
padding: 0;
}
/* ..... internal box ..... */
treecol:hover:active,
treecolpicker:hover:active {
border: 2px ridge rgba(24, 24, 24, .32);
}
/* ::::: column drag and drop styles ::::: */
treecol[dragging="true"] {
border-color: ThreeDShadow !important;
background-color: rgba(24, 24, 24, .32) !important;
color: ThreeDHighlight !important;
}
treecol[insertafter="true"] {
border-right-color: ThreeDShadow;
}
treecol[insertbefore="true"] {
border-left-color: ThreeDShadow;
}
treechildren::-moz-tree-column(insertbefore) {
border-left: 1px solid rgba(24, 24, 24, .32);
}
treechildren::-moz-tree-column(insertafter) {
border-right: 1px solid rgba(24, 24, 24, .32);
}
/* ::::: sort direction indicator ::::: */
..treecol-sortdirection {
list-style-image: none;
width: 7px; /* The image's width is 7 pixels */
height: 4px; /* Scale the image's height to 4 pixels */
}
..treecol-sortdirection[sortDirection="ascending"] {
list-style-image: url("chrome://messenger/skin/icons/arrow/arrow-up.svg");
}
..treecol-sortdirection[sortDirection="descending"] {
list-style-image: url("chrome://messenger/skin/icons/arrow/arrow-down.svg");
}
/* ::::: twisty ::::: */
treechildren::-moz-tree-twisty {
padding-right: 5px;
width: 10px; /* The image's width is 9 pixels */
list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
}
treechildren::-moz-tree-twisty(open) {
padding-right: 5px;
width: 10px; /* The image's width is 9 pixels */
list-style-image: url("chrome://global/skin/tree/twisty-open.png");
}
treechildren::-moz-tree-indentation {
width: 16px;
}
/* ::::: gridline style ::::: */
treechildren.gridlines::-moz-tree-cell {
border-right: 1px solid GrayText;
border-bottom: 1px solid GrayText;
}
treechildren.gridlines::-moz-tree-row {
border: none;
}