MediaWiki:Common.css

/* TODO: Autoprefix everything to ensure compatiability with most browsers */

/* FIXME Import from Fandom directly instead */ @font-face { font-family: TankTrouble; src: url('https://tanktrouble.com/assets/fonts/TankTrouble.ttf'); font-weight: normal; }

/* ====== Variables ====== */ .wds-dropdown { --wds-dropdown-background-color: var(--theme-page-background-color); --wds-dropdown-border-color: var(--theme-accent-color); } .page__right-rail { --right-rail-background-color: var(--theme-accent-color); }

/* ====== Header ====== */ .fandom-community-header__community-name { font-family: TankTrouble; color: inherit; font-size: 18px; text-decoration: none; text-shadow: 0 0 5px rgb(0 0 0 / 80%);

display: -webkit-box; overflow: hidden; line-height: 1.25; margin-right: 9px;

-webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fandom-community-header__image { filter: drop-shadow(0 0 3px rgba(var(--theme-page-text-color--rgb),0.15)); }

.page-counter { margin-right: 12px; }

.page-header__title-wrapper { display: flex; flex-direction: column; }

.page-header__title-wrapper > h1 { order: 2; }

.page-header__title-wrapper > .page-header__page-subtitle { order: 1; line-height: 1; } .page-header__actions { align-items: flex-end; padding-bottom: 3px; }

.page-header__pagetools { margin-left: 3px; }

.page-header__pagetools .wds-dropdown__toggle { border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1; margin-bottom: 9px; padding: 5px 10px; white-space: nowrap; }

.page-header__pagetools .wds-dropdown__toggle .wds-icon { margin-left: 6px; }

.page-header__pagetools .wds-dropdown:hover .wds-dropdown__toggle { background-color: rgba(var(--theme-link-color--rgb),.15); }

.page-header { margin-bottom: 1rem; }

.page-header__bottom { border-bottom: 1px solid var(--theme-border-color); }

body.skin-fandomdesktop.ns-2 .page-header__bottom { border-bottom: 0; }

.page-header__categories,.CategorySelect.articlePage { font-size: 85%; }

.page-content dl { margin: 0; }

.page-content .mw-parser-output a { font-weight: revert; }

.page-content section { margin: 0; }

.page-content p { margin: 0.5em 0; }

.page-content p+ol,.page-content p+ul,.page-content section+ol,.page-content section+ul { margin-top: 2px; }

.page-content hr { border-top: 0; border-color: var(--theme-border-color); margin-top: 0; margin-bottom: 0; }

div#p-namespaces,div#p-views { top: 0; float: none; }

@media only screen and (min-width: 1280px) { .fandom-community-header__community-name { font-size: 24px; } }

/* ====== Footer ====== */ .page-footer { margin-top: 2em; }

.page-footer__languages.wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content { padding: 0; display: inline-flex; }

.page-footer__categories { border-bottom: 0; margin-top: -1em; }

.page-footer__categories header { display: none; }

.page-footer__categories.wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content { display: block; }

padding: 5px 8px; background-color: var(--theme-accent-color); border: 1px ridge var(--theme-border-color); border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(var(--theme-page-background-color--rgb),0.3); font-size: inherit; }
 * 1) articleCategories .container {

.CategorySelect.articlePage .categories { display: flex; flex-wrap: wrap; justify-content: flex-start; font-size: 14px; }

padding: 0 0.5em 0 0; margin: 3px 0.5em 3px 0; flex: 0 0 auto; }
 * 1) articleCategories .container li {

vertical-align: middle; }
 * 1) articleCategories .container li > * {

.CategorySelect.articlePage .category,.CategorySelect.articlePage .last,.CategorySelect.articlePage .placeholder,.CategorySelect.articlePage .special-categories-label { float: none; }

padding: 0; border-right: 0; }
 * 1) articleCategories.CategorySelect.articlePage .special-categories-label {

content: ':'; vertical-align: middle; }
 * 1) articleCategories.CategorySelect.articlePage .special-categories-label::after {

.CategorySelect.articlePage .add { font-size: 10px; line-height: 12px; padding: 2px 10px; min-height: 0; }

margin-bottom: 0; line-height: 1; vertical-align: middle; }
 * 1) articleCategories.CategorySelect.articlePage .last input {

.CategorySelect.articlePage > .toolbar { margin-top: 6px; }

.CategorySelect.articlePage .category.new > .name { margin-left: 15px; }

/* ====== Custom Table ====== */ .custom-table { background: var(--theme-accent-color); color: var(--theme-accent-label-color);

margin: 3px; padding: 5px;

border: 1px ridge var(--theme-border-color); border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(var(--theme-page-background-color--rgb),0.3);

display: flex; position: relative; justify-content: center; }

.custom-table.left { display: inline-flex; float: left; width: 50%; } .custom-table.right { display: inline-flex; float: right; width: 50%; }

.custom-table.left table th { background-color: var(--theme-page-background-color); border: 1px ridge var(--theme-border-color); border-radius: 5px; padding: 0 10px; }

.custom-table th { padding: 0 20px; }

/* ====== Right Rail ====== */ html:not(.ve-activated) .page.has-right-rail .page__right-rail.is-rail-hidden { width: 0; } .is-rail-hidden .right-rail-toggle { background-color: var(--theme-accent-color); }

/* ====== Dotlist ====== */ .dotlist { margin: auto; } .dotlist > ul > li { display: inline-block; } .dotlist > ul > li:not(:last-child):after { content: "•"; padding: 0 0.25em; } .dotlist > .title::after { content: ""; display: inline-block; width: 0.25em; } .dotlist > ul { display: inline; list-style: none; margin: auto; padding: 0; vertical-align: baseline; }

/* ====== Achievement ====== */ .onlineachievement { color: #ffffff; font-size: 14px; line-height: 1.15; text-align: left; background: linear-gradient(to bottom,#e5c766,#a68826); border-radius: 5px; margin: 10px; padding: 5px 65px 5px 5px; width: 350px; height: 60px; display: inline-block; box-sizing: border-box; position: relative; vertical-align: top; } .onlineachievement .container { position: relative; } .onlineachievement .header { font-family: TankTrouble; padding: 0 0 5px 0; } .onlineachievement a { color: #ffffff !important; } .onlineachievement img { position: absolute; right: -95px; top: -35px; z-index: 1; }

/* ====== Page ====== */ .page__main { box-shadow: inset 0 0 3px rgba(var(--theme-page-text-color--rgb),0.15); outline: 3px solid var(--theme-accent-color); }

.lined { border-color: var(--theme-border-color); border-width: 3px 0; border-style: double; padding: 5px 0; }

/* ====== Main Page ====== */ body.mainpage .page-header__title-wrapper { display: none; }

body.mainpage .page__main { padding-top: 12px; }

body.mainpage .page-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0; }

body.mainpage .page-header__bottom { border-bottom: 0; }

body.mainpage .page-header__actions { margin-left: 3px; padding-top: 0; }