https://wiki.avardon.com/index.php?action=history&feed=atom&title=Template%3AInfobox%2Fstyles.css 2026-04-28T19:03:57Z Revision history for this page on the wiki MediaWiki 1.44.2 https://wiki.avardon.com/index.php?title=Template:Infobox/styles.css&diff=54&oldid=prev 2025-10-30T17:23:49Z

<p>Created page with &quot;<span class="autocomment">Based on https://tolkiengateway.net/wiki/Template:Infobox/styles.css: </span> .tg-infobox { position: relative; width: 320px; padding: 16px 0; border: var(--tg-border-base); border-radius: var(--tg-border-radius-large); border-spacing: 0; color: var(--tg-color-base); background-color: var(--tg-color-surface-2); line-height: var(--tg-line-height-xx-small); font-size: var(--tg-font-size-small); } .tg-infobox th, .tg-infobox td { p...&quot;</p> <p><b>New page</b></p><div>/* Based on https://tolkiengateway.net/wiki/Template:Infobox/styles.css */<br /> <br /> .tg-infobox {<br /> position: relative;<br /> width: 320px;<br /> padding: 16px 0;<br /> border: var(--tg-border-base);<br /> border-radius: var(--tg-border-radius-large);<br /> border-spacing: 0;<br /> color: var(--tg-color-base);<br /> background-color: var(--tg-color-surface-2);<br /> line-height: var(--tg-line-height-xx-small);<br /> font-size: var(--tg-font-size-small);<br /> }<br /> <br /> .tg-infobox th,<br /> .tg-infobox td {<br /> padding: 0; /* Remove default padding */<br /> vertical-align: top;<br /> }<br /> <br /> .tg-infobox tr &gt; *:first-child {<br /> padding-left: 16px;<br /> }<br /> <br /> .tg-infobox tr &gt; *:last-child {<br /> padding-right: 16px;<br /> }<br /> <br /> .tg-infobox .tg-infobox-title {<br /> font-size: var(--tg-font-size-x-large);<br /> padding-bottom: 4px;<br /> }<br /> <br /> .tg-infobox-title,<br /> .tg-infobox-header {<br /> color: var(--tg-color-emphasized);<br /> }<br /> <br /> .tg-infobox-title,<br /> .tg-infobox-subtitle {<br /> line-height: var(--tg-line-height-xxx-small);<br /> }<br /> <br /> .tg-infobox .tg-infobox-image {<br /> border-top-left-radius: var(--tg-border-radius-large);<br /> border-top-right-radius: var(--tg-border-radius-large);<br /> padding: 0 !important;<br /> transform: translateY(-16px);<br /> overflow: hidden;<br /> }<br /> <br /> .tg-infobox-image &gt; figure,<br /> .tg-infobox-image &gt; figure &gt; figcaption {<br /> /* Reset styles from other skins */<br /> border: 0;<br /> padding: 0;<br /> background: transparent;<br /> box-shadow: none;<br /> }<br /> <br /> .tg-infobox-image &gt; figure {<br /> margin-top: 0;<br /> margin-bottom: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .tg-infobox-image .mw-file-description {<br /> border-radius: var(--tg-border-radius-sharp) !important;<br /> }<br /> <br /> .tg-infobox-image &gt; figure &gt; figcaption {<br /> padding-left: 16px;<br /> padding-right: 16px;<br /> text-align: center;<br /> }<br /> <br /> .tg-infobox-image &gt; figure &gt; a::after,<br /> .tg-infobox-image &gt; figure &gt; figcaption::before {<br /> /* Remove link icon */<br /> content: none;<br /> }<br /> <br /> .tg-infobox-image &gt; figure img {<br /> margin: 0;<br /> border: 0;<br /> }<br /> <br /> .tg-infobox-image,<br /> .tg-infobox-subtitle,<br /> .tg-infobox-caption {<br /> text-align: center;<br /> }<br /> <br /> .tg-infobox-subtitle,<br /> .tg-infobox-caption {<br /> color: var(--tg-color-subtle);<br /> font-size: var(--tg-font-size-x-small);<br /> }<br /> <br /> .tg-infobox .tg-infobox-caption {<br /> padding-top: 4px;<br /> padding-bottom: 4px;<br /> }<br /> <br /> .tg-infobox .tg-infobox-header {<br /> padding-top: 12px;<br /> padding-bottom: 8px;<br /> }<br /> <br /> .tg-infobox-header:not(.tg-infobox-title) span {<br /> display: flex;<br /> align-items: center;<br /> gap: 1rem;<br /> white-space: nowrap;<br /> color: var(--tg-color-subtle);<br /> font-size: var(--tg-font-size-x-small);<br /> font-weight: var(--tg-font-weight-regular);<br /> }<br /> <br /> .tg-infobox-header:not(.tg-infobox-title) span:before,<br /> .tg-infobox-header:not(.tg-infobox-title) span:after {<br /> content: &quot; &quot;;<br /> height: 1px;<br /> width: 100%;<br /> background-color: var(--tg-border-color-base);<br /> }<br /> <br /> .tg-infobox .tg-infobox-data,<br /> .tg-infobox .tg-infobox-label {<br /> padding: 8px;<br /> }<br /> <br /> .tg-infobox-label {<br /> text-align: start;<br /> vertical-align: top;<br /> }<br /> <br /> @media (max-width: 640px) {<br /> .tg-infobox {<br /> width: 100%;<br /> }<br /> <br /> .tg-infobox-image &gt; figure {<br /> margin-top: 16px;<br /> }<br /> }<br /> <br /> /* Fix EmbedVideo styles for Spotify */<br /> .tg-infobox .embedvideo[data-service=&quot;spotifytrack&quot;] {<br /> position: relative;<br /> /* Fix incorrect inline width */<br /> width: 100% !important;<br /> }<br /> <br /> /* HACK: Hide white background in iframe */<br /> .tg-infobox .embedvideo[data-service=&quot;spotifytrack&quot;]::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> inset: -4px;<br /> border: 6px solid var(--tg-color-surface-2);<br /> border-radius: 12px;<br /> pointer-events: none;<br /> }</div>

Rataj