MediaWiki:Fandomdesktop.css

/* -- */ /* -- Theme Colors -- */ /* -- */

.button-colors { background-color: var(--theme-accent-color); color: var(--theme-accent-label-color); border-color: var(--theme-accent-color); } .button-colors:link:hover, .button-colors:link:hover .button-colors{ background-color: var(--theme-accent-color--hover); }

/* --- */ /* -- Styling Fixes -- */ /* --- */

/* Reduce the spacing on Europa items */ .pi-europa .pi-item-spacing { padding: .5em 14px; } h2.pi-europa.button-colors { padding: 0; }

/* -- */ /* -- Elements -- */ /* -- */

/* Blockquote */

blockquote, .page-content blockquote { position: relative; margin: 1em 0; padding: 1.5em 1em; border: 1px solid var(--theme-border-color); background: var(--theme-page-background-color--secondary); }

blockquote::before, blockquote::after { position: absolute; display: block; height: .2em; font-size: 6em; line-height: .2em; color: var(--theme-accent-color); }

blockquote::before { content: "“"; top: .175em; left: .15em; }

blockquote::after { content: "”"; bottom: -0.375em; right: .15em; }

.page-content aside[typeof*="mw:Extension/infobox"] + blockquote, .page-content aside[typeof*="mw:Extension/infobox"] + p + blockquote, .page-content aside.portable-infobox + blockquote, .page-content aside.portable-infobox + p + blockquote { max-width: calc(100% - 288px); }

blockquote > p:last-child { margin-bottom: 0; }

blockquote > div.citation { font-style: oblique; font-size: .9em; }

blockquote > p + div.citation { margin-top: -1em; }

/* */ /* -- Extras -- */ /* */

/* Add an arrow to PI style heading links */ a:link > .pi-title { position: relative; padding-left: 1.5em; padding-right: 1.5em; } a:link > .pi-title::after { content: '▶'; position: absolute; right: .5em; }

/* */ /* -- Helper Classes -- */ /* */ /* -- Template Links -- */ /*   MediaWiki templates don't allow for custom HTML a tag links, the wikitext PAGENAME format must be used. Use these classes on the parent.

/* Expand a link to fill its container */ .link-expand > a, .link-expand > p > a, .link-expand > center > a { display: block; width: 100%; height: 100%; } .link-expand > p { margin: 0; } /* Change the color of the link (intended for custom button styling) */ .link-inherit-color > a, .link-inherit-color > center > a { color: inherit; } /* -- Template Images -- */ /*   Similar to links, images must be used in format Use these classes on the parent /* Expand an image to fill its container */ img.image-expand, .image-expand > a, .image-expand > a > img { display: block; width: 100%; height: 100%; }

.image-fill-width { overflow-y: hidden; } img.image-fill-width, .image-fill-width > a, .image-fill-width > a > img { display: block; width: 100%; }

img.image-fill-width:not(.image-fill-height), .image-fill-width:not(.image-fill-height) > a > img { height: auto; }

.image-fill-height { overflow-x: hidden; } img.image-fill-height, .image-fill-height > a, .image-fill-height > a > img { display: block; height: 100%; }

img.image-fill-height:not(.image-fill-width), .image-fill-height:not(.image-fill-width) > a > img { width: auto; }

/* --- */ /* -- Home Page -- */ /* --- */

/* Change title (DISPLAYTITLE doesn't work for homepage) */ body.mainpage .page-header__title-wrapper .page-header__title { font-size: 0; }

body.mainpage .page-header__title-wrapper .page-header__title::after { content: 'Welcome to +Anima Wiki!'; font-size: 36px; }

/* Keep page title centered */ body.mainpage .page-header__title-wrapper { width: calc(100% - 320px); flex-grow: 0; text-align: center; }

body.mainpage .page-header__title-wrapper .page-header__title { font-weight: bold; }

body.mainpage .page-header__actions { margin-left: auto; }

@media screen and (max-width: 1023px) { .mainpage div.page-header__title-wrapper { width: 100%; }

.mainpage .page-header__bottom { flex-direction: column-reverse; } }

/* Resize boxes to fit 4 per row on medium siz screens */ @media screen and (max-width: 1596px) { .main-page-tag-lcs #characters + div > div { width: 160px !important; } }

.main-page-tag-rcs .rcs-container > :not(:first-child) { margin-top: 24px; }

/* Remove some scrollbars on animanga footer */ .animangafooter tr:first-child td:nth-child(2) > div { height: auto !important; max-height: 200px; } .animangafooter tr:nth-child(2) td > div { height: auto !important; }

/* --- */ /* -- Templates -- */ /* --- */

/* Article of the Month */ margin-top: 0; }
 * 1) article-of-the-month,
 * 2) article-of-the-month * {

/* Notices */ .notice { display: table; box-sizing: border-box; clear: left; min-width: 50%; margin-bottom: .5em; padding: .25em .5em; border-width: 1px; border-style: dotted; font-style: italic; } .notice > p { margin: 0; } .notice + p { margin-top: 0; }

/* Chapter Nav */ .navigation-box { margin-top: 1em; } .navigation-box > p.pi-europa:first-child { margin-bottom: 1px; } .navigation-box .tabber { display: flex; } .navigation-box .tabber .wds-tabs { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; margin-right: 1em; } .navigation-box .tabber .wds-tabs li { display: block; width: 100%; border: none; margin: 0; padding: 0; text-align: center; line-height: 2em; border-color: var(--theme-accent-color); } .navigation-box .tabber .wds-tabs > li > a { display: block; margin: 0; border: none; text-align: center; background-color: var(--theme-link-color); color: var(--theme-accent-label-color); border-color: var(--theme-accent-color); transition: background-color .4s ease; } .navigation-box .tabber .wds-tabs > li > a:hover { border: none; text-decoration: none; } .navigation-box .tabber .wds-tabs > li:not(.wds-is-current) > a:hover { background-color: var(--theme-accent-color--hover); } .navigation-box .tabber .wds-tabs__arrow-left, .navigation-box .tabber .wds-tabs__arrow-right{ display: none; } .navigation-box .tabber > .wds-tab__content { width: 100%; padding: 0; } .navigation-box .tabber > .wds-tab__content .article-table { width: 100%; }

.navigation-box#chapter-nav .tabber .wds-tab__content { background-color: var(--theme-article-background-color--secondary); }

.navigation-box#chapter-nav .tabber .wds-tab__content table { margin-bottom: 0; }

.navigation-box#chapter-nav .tabber .wds-tab__content table tr th:first-child, .navigation-box#chapter-nav .tabber .wds-tab__content table tr td:first-child { width: 6em; text-align: center; border-right: 1px solid var(--theme-border-color); }