MediaWiki:Common.css

/* fandomdesktop, applies to infobox galleries and tablists */ .wds-tabs__wrapper { display: flex; justify-content: center; } /* overwrite tabber li before inside infobox, infobox applies stars to all li's */ .tabber ul li:before { content: unset; } /* DataTable */ .datatable { width: 100%; margin: 0; } /* table text-align gets overwritten by fandomdesktop css for tr and th :/ */ .datatable tr > th, .datatable tr > td { text-align: center; } /* Template:Calendar/Entry */ .calendarRow > th { width: 1px; } .calendarRow > th > div { white-space: nowrap; text-align: right; } .calendarRow > td { padding: 5px !important; } .calendarRow > td > div { display: flex; flex-wrap: wrap; gap: 5px; } /* Template:Calendar/Entry */ .calendarEntry { display: inline-block; position: relative; text-align: right; overflow: hidden; width: max-content; border-radius: 10px; border: 3px solid BurlyWood; pointer-events: none; }

.calendarEntry a { pointer-events: auto; color: white; }

.calendarEntry::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 5px -5px 0px 0px rgba(0, 0, 0, 0.5), inset -5px 5px 0px 0px rgba(255, 255, 255, 0.5); }

.calendarEntry > small { position: absolute; top: 5px; right: 10px; color: Bisque; width: calc(100% - 15px); background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5)); }

.calendarEntry > strong { position: absolute; bottom: 0; right: 0; padding-right: 10px; width: calc(100% - 15px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); } /* Calendar Grid */ .calendarGrid { display: grid; gap: 5px; justify-items: center; } .calendarGrid div:nth-child(2n) { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, 170px); width: 100%; justify-items: center; justify-content: center; } /* Template:PieChart */ .pieChart { --sizepx: calc(var(--size, 250) * 1px); --shadow: 10px; position: relative; height: var(--sizepx); width: var(--sizepx); margin: var(--shadow); border-radius: 50%; box-shadow: 0px 0px var(--shadow) black; }

.pieChart > div { --startd: calc(var(--start) * 360 / 100); --diffd: calc(var(--diff) * 360 / 100); --endd: calc(var(--startd) + var(--diffd)); --middled: calc((var(--startd) + var(--endd)) / 2); }

.pieChart > div::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; transform: rotate(calc(var(--endd) * 1deg)); background: linear-gradient(calc(var(--diffd) * -1deg), transparent 50%, var(--color) 0%); clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); }

.pieChart > div::after { content: attr(data-text1) '\A' attr(data-text2) '\A' attr(data-text3); white-space: pre; position: absolute; top: 0; left: 0; width: 100%; height: 25%; transform-origin: 50% 200%; transform: rotate(calc((var(--middled) - 90) * 1deg)); display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; }

.pieChart::after { content: attr(data-text1) '\A' attr(data-text2) '\A' attr(data-text3); white-space: pre; position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; background-color: var(--color, dimgray); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px var(--shadow) black inset; display: flex; align-items: center; justify-content: center; text-align: center; } /* Template:Avatar */ .avatar { display: inline-block; position: relative; width: var(--size); height: var(--size); font-size: calc(var(--size) / 6); flex-shrink: 0; }

.avatar img { width: 100%; height: 100%; }

.avatar > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.avatar .avatarBG { width: 82%; height: 82%; }

.avatar .avatarAvatar { width: 80%; height: 80%; }

.avatar .avatarBorder { width: 92%; height: 92%; }

.avatar .avatarLevel { top: 0; transform: translate(-50%, 0); width: calc(40 / 96 * 100%); height: calc(27 / 96 * 100%); }

.avatar .avatarLevel::after { content: attr(data-level); position: absolute; top: 0; left: 0; color: white; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }

.avatar .avatarStar { top: unset; bottom: 0; left: 0; transform: unset; height: unset; width: 100%; text-align: center; }

.avatar .avatarStar img[data-image-name="Star.png"] { width: 17%; height: 17%; }

.avatar .avatarStar img[data-image-name="Absolute Star.png"] { width: 65%; height: 65%; } /* set size through css instead of resizing them through fandom use only with small images otherwise the big images will be loaded main purpose is to fix the image behaviour on mobile .imageSize { display: inline-block; float: var(--float); }

.imageSize img { width: var(--width); height: var(--height); } /* enclose the file with any tag, the class extract and the x, y, width and height parameter in style */ .extract { width: var(--width); height: var(--height); overflow: hidden; }

.extract img { transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)); } /* Template:tooltip */ .tooltip { display: inline-flex; justify-content: center; align-items: center; gap: 5px; color: white; background-color: rgba(0,0,0,0.75); padding: 7.5px; margin: 7.5px; white-space: nowrap; text-align: center; box-shadow: 0 0 5px var(--data-color,black), 0 0 5px var(--data-color,black), 0 0 5px var(--data-color,black), 0 0 5px var(--data-color,black), 0 0 5px var(--data-color,black); }

.tooltip .flex { display: flex; justify-content: center; align-items: center; gap: 5px; }

.tooltip .grid { display: grid; align-items: flex-start; align-content: flex-start; gap: 5px; } /* tooltip-show */ .tooltip-show { position: relative; }

.tooltip-show > div { display: none; position: absolute; top: 0; left: 0; transform: translate(-100%,-100%); z-index: 1; } .tooltip-show:hover > div { display: initial; } /* tabber, oasis */ .tabberlive > .tabbertab { padding: 0px; border: 0px; } /* tabber, fandomdesktop, */ .tabber { display: initial; } /* item header */ .heroItemHeader { text-align: left; box-shadow: inset 1000px 0 0 0 rgba(0, 0, 0, 0.5); position: sticky; left: 0; display: flex; align-items: center; } /* grid layout split into two cols to center around specific point */ .grid-align { display:grid; grid-template-columns: auto auto; } .grid-align div:nth-child(2n) { justify-self: left; } .grid-align div:nth-child(2n+1) { justify-self: right; } /* Season task */ .season-task { display: inline-block; position: relative; border: Peru solid 1px; border-radius: 10px; overflow: hidden } .season-task div { pointer-events: none; } .season-task span { position:absolute; top: 50%; left: 45%; padding: 5%; transform: translate(0, -50%); text-align: center; } /* Season table */ .season-table { width: 100%; } .season-table tr { vertical-align: top; } .season-table tr td > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px; } /* Preloader */ .preloader { box-shadow: 0 0 10px black; margin: 10px auto; } .preloader img { width: 100%; height: auto; } /* Portal */ .portal { margin: 5px 0; } .portal > div:nth-child(1):not(.portal-header) { padding: 5px; border: 3px solid #d39f66; border-radius: 5px; } .portal > div:nth-child(2) { padding: 5px; padding-top: 25px; margin-top: -25px; border: 3px solid #d39f66; border-radius: 5px; } .portal-header { display: flex; justify-content: center; } .portal-header::before, .portal-header::after { display: block; content: ''; height: 58px; width: 101px; background-image: url(https://hero-wars.fandom.com/wiki/Special:Redirect/file/header-decor.png); } .portal-header::after { transform: scaleX(-1); } .portal-header > span { height: 58px; font-size: 30px; padding: 5px 0; background-image: url(https://hero-wars.fandom.com/wiki/Special:Redirect/file/header-body.png); color: white; } /* ascencion plot */ .ascencion-plot { position: relative; } .ascencion-plot div { --sizepx: calc(var(--size, 50) * 1px); position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: var(--sizepx); height: var(--sizepx); } .ascencion-plot > div > div { pointer-events: none; left: 0; top: 0; } /* second div in div is used for the skill image */ .ascencion-plot > div > div:first-child { clip-path: circle(45%); } .ascencion-plot > div > div:last-child { clip-path: initial; } .ascencion-plot > div:nth-child(n + 2)::before { content: ''; position: absolute; left: calc(var(--sizepx) / 2); top: calc(var(--sizepx) / 2); width: calc((var(--line,0) - var(--size)) * 1px); transform-origin: top left; transform: rotate(calc(var(--angle,0) * -1deg)) translate(calc(var(--sizepx) / 2), 0); height: 0; border: 1px solid #4272c5; box-shadow: 0 0 5px #4272c5; } /* create formatted key value table with grid and a bunch of divs */ .grid-table { display: grid; grid-template-columns: auto auto; } .grid-table > div:nth-child(2n) { text-align: left; } .grid-table > div:nth-child(2n + 1) { text-align: right; } .grid-table > div:nth-child(2n + 1)::after { content: ':\20'; white-space: pre; }