Template:Clade/styles.css

/* {{pp-template}} */
body.skin-vector-2022 div.clade,
body.skin-minerva div.clade {
	overflow-x:auto;
	overflow-y:hidden;
}
body.skin-minerva div.clade p { font-size:inherit; }
table.clade {
    border-spacing:0;
    margin:0;
    font-size:100%;
    line-height:100%;
    border-collapse:separate;
    width:auto;
    display:table;
}
table.clade table.clade {
    width:100%;
    line-height:inherit;
}

table.clade td.clade-label {  /* the cell with the label */
	min-width:0.7em; /* both min-width and width seem to be needed to get consistent behaviour */
	width:0.7em;
    padding:0.1em 0.25em;
    vertical-align:bottom;
    text-align:center;
    border-left:1px solid;   /* don't set default colour, helps with green on black monotype skin  */
    border-bottom:1px solid;
    white-space:nowrap;
}
table.clade td.clade-label::before, table.clade td.clade-slabel::before {
	content: "\2060";
}
table.clade td.clade-fixed-width {
    overflow:hidden;
    text-overflow:ellipsis;
}
table.clade td.clade-fixed-width:hover {
	overflow:visible;
}
table.clade td.clade-label.first {
	border-left:none;
	border-right:none;
}
table.clade td.clade-label.reverse {
	border-left:none;
	border-right:1px solid;
}
table.clade td.clade-slabel {  /* the cell with the sublabel; only use if there is a label */
    padding:0.1em 0.25em;
    vertical-align:top;
    text-align:center;
    border-left: 1px solid;
    white-space:nowrap;
}
table.clade td.clade-slabel:hover {
	overflow:visible;
}
table.clade td.clade-slabel.last  {
	border-left:none;
	border-right:none;
}
table.clade td.clade-slabel.reverse {
	border-left:none;
	border-right:1px solid;
}

table.clade td.clade-bar {  /* the cell with the bar label or group label */
    vertical-align:middle;
    text-align:left;
    padding:0 0.5em;
    position:relative;
}
table.clade td.clade-bar.reverse {
    text-align:right;
    position:relative;
}

table.clade td.clade-leaf {  /* the cell with the leaf content (rowspan=2) */
    border:0;
    padding:0;
    text-align:left;
}
table.clade td.clade-leaf p {
    padding-right: 5px; /* spacing from vertical bar */
    padding-left: 2px; /* spacing from connecting horizontal bar */
}
table.clade td.clade-leafR {  /* the cell with the leaf content (rowspan=2) */
    border:0;
    padding:0;
    text-align:right;
}
table.clade td.clade-leafR p {
    padding-left: 5px; /* spacing from vertical bar */
    padding-right: 2px; /* spacing from connecting horizontal bar */
}
table.clade td.clade-leaf.reverse {  /* the cell with the leaf content (rowspan=2) */
    text-align:right;
}
table.clade td.clade-leaf.reverse p {
    padding-left: 5px; /* spacing from vertical bar */
    padding-right: 2px; /* spacing from connecting horizontal bar */
}

table.clade:hover span.linkA {
     background-color: yellow;
}
table.clade:hover span.linkB {
     background-color: green;
}