Template:Clade/styles.css: Difference between revisions

From Wikipedia, the free encyclopedia
Content deleted Content added
add overflow CSS for outer div wrapping clade template (issue for mobile and new vector (see talk page)
hide vertical scrollbar
Line 2: Line 2:
div.clade {
div.clade {
overflow-x:auto;
overflow-x:auto;
overflow-y:hidden;
}
}
table.clade {
table.clade {

Revision as of 17:10, 28 March 2024

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

table.clade td.clade-label {  /* the cell with the label */
	min-width:0.2em; /* both min-width and width seem to be needed to get consistent behaviour */
	width:0.1em;
    padding:0 0.15em;
    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 0.15em;
    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-leafR {  /* the cell with the leaf content (rowspan=2) */
    border:0;
    padding:0;
    text-align:right;
}
table.clade td.clade-leaf.reverse {  /* the cell with the leaf content (rowspan=2) */
    text-align:right;
}

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