https://madnesscombat.wiki/index.php?action=history&feed=atom&title=Template%3ABanner%2Fstyles.css 2026-04-13T02:49:37Z Revision history for this page on the wiki MediaWiki 1.41.0 https://madnesscombat.wiki/index.php?title=Template:Banner/styles.css&diff=7726&oldid=prev 2025-02-10T21:11:13Z

<p>Created page with &quot;.mainpage-shadowbox { color: white; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; } .mainpage-shadowbox h2, .mainpage-shadowbox h3 { color: white; border:none; font-family: sans-serif; line-height: 1.2em; margin:0; padding: 0; <span dir="auto"><span class="autocomment">was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile: </span> } .mainpage-shadowbox a { color: white; font-weight: bold; } .banner-image...&quot;</span></p> <p><b>New page</b></p><div>.mainpage-shadowbox {<br /> color: white;<br /> background: rgb(16,16,16);<br /> background: rgba(0,0,0,0.3);<br /> border-radius: 4px;<br /> }<br /> .mainpage-shadowbox h2, .mainpage-shadowbox h3 {<br /> color: white;<br /> border:none;<br /> font-family: sans-serif;<br /> line-height: 1.2em;<br /> margin:0;<br /> padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */<br /> }<br /> .mainpage-shadowbox a {<br /> color: white;<br /> font-weight: bold;<br /> }<br /> <br /> .banner-image {<br /> position: relative;<br /> max-width: 1125px; <br /> height: auto;<br /> margin-bottom: .6em;<br /> }<br /> .banner-image img {<br /> max-width: 100%;<br /> height: auto;<br /> /* width: auto\9; */ /* ie8 */<br /> }<br /> .banner-box-wide {<br /> width: 80%<br /> }<br /> .banner-box-left,<br /> .banner-box-right {<br /> padding: 8px 7px;<br /> background: rgb(16,16,16);<br /> background: rgba(0,0,0,0.3);<br /> border-radius: 4px;<br /> width: 40%;<br /> }<br /> .banner-box-left { text-align: left; }<br /> .banner-box-right { text-align: right; }<br /> .banner-box-2 {<br /> position: absolute;<br /> z-index: 2;<br /> min-width: 20em;<br /> }<br /> <br /> @media screen and ( min-width: 720px ) { /* greater than or equal to */<br /> .banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */<br /> .banner-image span[typeof~=&#039;mw:File/Frameless&#039;].nolink { display: none; }<br /> .mainpage-shadowbox h2 {<br /> font-size: 190%;<br /> }<br /> .mainpage-shadowbox h3 {<br /> font-size: 150%;<br /> }<br /> .banner-image {<br /> overflow: hidden;<br /> }<br /> .banner-box-left {<br /> left: 3%;<br /> }<br /> .banner-box-right {<br /> right: 3%;<br /> }<br /> .banner-box-2 {<br /> margin-top: 2em;<br /> }<br /> .banner-box-2 .quote {<br /> font-size: 80%;<br /> line-height: 1.2em;<br /> }<br /> }<br /> @media screen and ( max-width: 720px ) {<br /> .banner-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */<br /> .banner-image span[typeof~=&#039;mw:File/Frameless&#039;] img { display: inline-block; } /* can be removed when b/c is no longer needed */<br /> .banner-image span[typeof~=&#039;mw:File/Frameless&#039;]:not(.nolink) { display: none; }<br /> .banner-image &gt; .mainpage-shadowbox {<br /> width: inherit !important;<br /> min-height: 100%;<br /> margin-left: -150%;<br /> margin-right: 150%;<br /> opacity: 0;<br /> background: black;<br /> }<br /> .mainpage-shadowbox .quote &gt; a:after {<br /> content: &#039;\ATap to learn more.&#039;;<br /> white-space: pre; /* needed to make content work. if content is disabled, this can be, too */<br /> }<br /> .jcarousel-item:hover .mainpage-shadowbox {<br /> margin: unset;<br /> opacity: 1;<br /> transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */<br /> bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */<br /> }<br /> .jcarousel-control-prev, .jcarousel-control-next {<br /> display: none;<br /> /* hide the carousel arrows */<br /> /* a kludge resulting from gadgets not working on mobile */<br /> /* unforunately also targets very narrow desktops, but there can&#039;t be too many of those */<br /> /* and besides, the number buttons still work */<br /> }<br /> img.interactiveIcon, /* can be removed when backward compat is no longer needed */<br /> .interactiveIcon img {<br /> position: absolute;<br /> opacity: 0.4;<br /> height: 75% !important;<br /> width: auto;<br /> bottom: 0;<br /> right: 0;<br /> }<br /> }</div>

Admin