MediaWiki:CSS/Derivative.css

.derivative { box-sizing:border-box; float:left; padding:0 2px; width:50%; }

.derivative ~ :not(.derivative) { clear:both; }

.derivative-title { border-radius:5px 5px 0 0; border-top-style:solid; border-top-width:5px; font-size:110%; line-height:130%; padding:0 .5em; }

.derivative-imgs { float:left; width:120px; }

.derivative table { font-size:85%; line-height:1.6em; padding:1px; min-width:calc(100% - 120px); }

.derivative td, .derivative th { border-bottom:1px solid #e6e6e6; padding:0 3px; vertical-align:top; } .derivative th { width:1px; text-align:right; } .derivative tr:last-child td, .derivative tr:last-child th { border-bottom:none; }

.derivative-longdesc { background:linear-gradient(to bottom, white, #dfdfdf); cursor:help; height:1.5em; overflow:hidden; } .derivative-longdesc:hover { background:white; border:2px solid #ab65a6; border-radius:20px; /* border:2px solid #936; border-radius:20px; */ /* vocaloid.wikia purple */ box-shadow:0 0 4px #ab65a6, inset 0 0 20px gainsboro; /*tbh i didn't expect shadow to look so good*/ /* box-shadow:0 0 4px #936, inset 0 0 20px gainsboro; */ /* vocaloid.wikia purple */ font-size:125%; line-height:160%; height:10em; overflow:auto; padding:1.25em; position:absolute; transition:box-shadow 0.5s, height 0.5s; width:75%; left:12.5%; z-index:5; }

@media(max-width:830px) { .derivative { margin-bottom:9px; }	.derivative-imgs { width:100%; text-align:center; }	.derivative-imgs center { display:inline; padding:1px 0 0 1px; }

.derivative table { width:100%; }	.derivative td, .derivative th { display:block; width:100%; text-align:left; padding:0; }	.derivative td { padding-left:3px; }	.derivative tr:last-child th { border-bottom:1px solid #e6e6e6; } }

@media(max-width:490px) { .derivative { width:100%; padding:0; } }