MediaWiki:MP.css


 * root {

--mp-circle-width: 150px; }

.mp-flex { display: flex; }

/* Background  */ .mp-item { position: relative; margin: 10px; border-radius: 10px; width: var(--mp-circle-width); height: var(--mp-circle-width); overflow: hidden; }

.mp-item.mp-item-drumstep { background-color: rgba(255, 0, 0, 0.1); }

.mp-item.mp-item-indie-dance { background-color: rgb(255, 69, 0, 0.1); }

.mp-item.mp-item-house { background-color: rgb(255, 255, 0, 0.1); }

.mp-item.mp-item-trap { background-color: rgb(11, 255, 11, 0.1); }

.mp-item.mp-item-dubstep { background-color: rgb(0, 102, 255, 0.1); }

.mp-item.mp-item-dnb { background-color: rgb(255, 105, 180, 0.1); }

.mp-item.mp-item-future-house { background-color: rgb(102, 51, 153, 0.1); }

.mp-item.mp-item-glitch-hop { background-color: rgb(18, 223, 122, 0.1); }

.mp-item.mp-item-melodic-dubstep { background-color: rgb(43, 217, 236, 0.1); }

.mp-item.mp-item-electronic-hardstyle { background-color: rgba(255, 255, 255, 0.1); }

.mp-item.mp-item-miscellaneous { background-color: rgba(0, 0, 0, 0.1); }

/* Image  */ .mp-item .mp-item-img-outer { position: relative; width: var(--mp-circle-width); }

.mp-item .mp-item-img-outer .mp-item-img { /* position: absolute; clip: rect(0, calc(var(--mp-circle-width) / 2), calc(var(--mp-circle-width) / 2), 0); transform: translate(calc(var(--mp-circle-width) / 2), calc(var(--mp-circle-width) / 2)); width: var(--mp-circle-width); */ position: absolute; top: calc(var(--mp-circle-width) / 2); left: calc(var(--mp-circle-width) / 2); width: var(--mp-circle-width); transition: transform 0.2s ease; }

.mp-item:hover .mp-item-img-outer .mp-item-img { transform: scale(1.3); transition: transform 0.2s ease; }

/* String */ .mp-item .mp-item-string { display: inline-block; position: absolute; color: white; font-weight: 900; padding: 3px; width: 155px; text-align: center; min-width: min-content; }

.mp-item .mp-item-string.mp-drumstep-string { background-color: red; }

.mp-item .mp-item-string.mp-indie-dance-string { background-color: orangered; }

.mp-item .mp-item-string.mp-house-string { background-color: yellow; color: black; }

.mp-item .mp-item-string.mp-trap-string { background-color: #0bff0b; }

.mp-item .mp-item-string.mp-dubstep-string { background-color: #0066ff; }

.mp-item .mp-item-string.mp-dnb-string { background-color: hotpink; }

.mp-item .mp-item-string.mp-future-house-string { background-color: rebeccapurple; }

.mp-item .mp-item-string.mp-glitch-hop-string { background-color: #12DF7A; }

.mp-item .mp-item-string.mp-melodic-dubstep-string { background-color: #2BD9EC; }

.mp-item .mp-item-string.mp-electronic-hardstyle-string { background-color: white; color: black; }

.mp-item .mp-item-string.mp-miscellaneous-string { background-color: black; }

/* Slider */ .mp-item .mp-item-slider { position: absolute; color: white; border-radius: 0% 10% 70% 0%; padding: 2px 20px 2px 15px; transform: translateX(-105%); transition: transform 0.5s ease; }

.mp-item:hover .mp-item-slider { position: absolute; color: white; transform: translateX(0%); transition: transform 0.3s ease; }

.mp-item .mp-item-slider.one { top: calc(var(--mp-circle-width) * 0.23); }

.mp-item .mp-item-slider.two { top: calc(var(--mp-circle-width) * 0.5); transition-delay: 0.1s; }

.mp-item.mp-item-drumstep .mp-item-slider { background-color: red; box-shadow: -1px 6px 7px #a30000; } .mp-item.mp-item-indie-dance .mp-item-slider { background-color: orangered; box-shadow: -1px 6px 7px rgb(172, 46, 0); } .mp-item.mp-item-house .mp-item-slider { background-color: yellow; box-shadow: -1px 6px 7px rgb(168, 168, 0); color: black; }

.mp-item.mp-item-trap .mp-item-slider { background-color: #0bff0b; box-shadow: -1px 6px 7px #09a809; color: black; }

.mp-item.mp-item-dubstep .mp-item-slider { background-color: #0066ff; box-shadow: -1px 6px 7px #024cbb; }

.mp-item.mp-item-dnb .mp-item-slider { background-color: hotpink; box-shadow: -1px 6px 7px rgb(161, 67, 114); }

.mp-item.mp-item-future-house .mp-item-slider { background-color: rebeccapurple; box-shadow: -1px 6px 7px rgb(59, 30, 88); }

.mp-item.mp-item-glitch-hop .mp-item-slider { background-color: #12DF7A; box-shadow: -1px 6px 7px #0b8b4b; }

.mp-item.mp-item-melodic-dubstep .mp-item-slider { background-color: #2BD9EC; box-shadow: -1px 6px 7px #1e99a7; }

.mp-item.mp-item-electronic-hardstyle .mp-item-slider { background-color: white; box-shadow: -1px 6px 7px rgb(160, 160, 160); color: black; }

.mp-item.mp-item-miscellaneous .mp-item-slider { background-color: black; box-shadow: -1px 6px 7px black; }

.mp-item a { color: white; text-shadow: black 0.1em 0.1em 0.2em; }