MediaWiki:CSS/Producer.css

/* links box */ .producer-links { background:#F5EBF5; border:0 !important; float:right; margin:0.5em; max-width:300px; padding:0.5em !important; } .producer-links h2 { margin-top:0; }

/* table styling */ .producer-table th, .producer-table td { padding:0.2em; } /* make cells less cramped */

/* table header styling */ .producer-table tr:nth-child(even) { background-color:#F5EBF5; } /* alternating row color */

/* cool helpful thumbnails on hover */ .producer-table td { position:relative; /* allow children (i.e. image) to be positioned relative to a table cell (i.e. song title) */ } .producer-table td span.producer-table-thumbnail { z-index:1; /* in Firefox, the image appears under the Vocalists text otherwise */ height:100%; /* for the positioning of the child image; see also below */ top:0; /* without this, the image is not vertically aligned with the cell */ position:absolute; /* allow image to be positioned relative to table cell */ pointer-events:none; /* no mouse interaction */ } .producer-table td span.producer-table-thumbnail { left:0; opacity:0; /* invisible */ transition:opacity 0.5s 0.1s, left 2s; /* take 0.5 secs to hide the image after waiting 0.1 secs, while taking 2 secs to casually move back */ } .producer-table td:hover span.producer-table-thumbnail { left:calc(100% + 5px); /* move the thing into the Vocalists area to look less awkward */ opacity:1; /* visible */ transition:opacity 0.1s 0.1s, left 0.3s; /* take 0.1 secs to conjure the image after waiting 0.1 secs, while taking 0.3 secs to slide into position */ } .producer-table td .producer-table-thumbnail img { border:1px solid silver; /* not my beloved gainsboro for once! gainsboro is a tad too light */ background:white; padding:2px; position:absolute; top:50%; transform:translateY(-50%); /* https://css-tricks.com/centering-css-complete-guide/ Vertically > Block-level > Unknown height */ }

/* stylish tail for the thumbnail */ .producer-table td .producer-table-thumbnail:before { content:""; display:block; position:absolute; top:50%; transform:translateY(-50%); /* center the arrow to the image */ border-width:12px 15px 12px 0; border-style:solid; border-color:transparent silver; margin-left:-15px; } .producer-table td .producer-table-thumbnail:after { content:""; display:block; position:absolute; top:50%; transform:translateY(-50%); /* center the arrow to the image */ border-width:12px 15px 12px 0; border-style:solid; border-color:transparent white; margin-left:-14px; /* shift this otherwise-identical triangle to the right one more pixel than the other one */ }