MediaWiki:Fandomdesktop.css

/* Navbox builder */ @import url("//dev.fandom.com/load.php?mode=articles&articles=MediaWiki:Global_Lua_Modules/NavboxBuilder.css&only=styles");

/***************************
 * GENERAL WEBSITE STYLES **

/* For selected text */
 * -moz-selection { /* On Firefox */

color: #fff; background: #6f3e98; }
 * selection { /* On Chrome and other browsers */

color: #fff; background: #6f3e98; }

/* For the scrollbar html { /* On Firefox */ scroll-behavior: smooth; scrollbar-color: var(--theme-accent-color--hover) var(--theme-link-dynamic-color-1); scrollbar-width: thin; } /* On Chrome and other browsers */
 * 1) 9867bf -> var(--theme-accent-color--hover)
 * 2) f7f6fa -> var(--theme-link-dynamic-color-1)
 * 3) 6f3e98 -> var(--theme-link-color) */
 * -webkit-scrollbar { width: 0.75em; }
 * -webkit-scrollbar-track { background: var(--theme-link-dynamic-color-1); }
 * -webkit-scrollbar-thumb { background: var(--theme-accent-color--hover); }
 * -webkit-scrollbar-thumb:hover { background: var(--theme-link-color); }

/* To make lines of code stand out */ code { padding: 1px 4px; border-radius: 3px; border: 1px solid var(--theme-border-color); }

/* To highlight template data aliases separately from the main parameter name */ .mw-templatedata-doc-param-alias { background: var(--theme-page-background-color--secondary); }

/* Standard table */ .wikiatable { text-align: center; background: rgba(var(--theme-link-dynamic-color-1--rgb), 0.75); border: 2px solid var(--theme-border-color); border-collapse: collapse; margin: 1em auto; min-width: 75%; } .wikiatable th { font-size: 1.2em; text-align: center; border: 2px solid var(--theme-accent-color--hover); padding: 0.5em 1em; background: var(--theme-accent-color); color: var(--theme-accent-label-color); } .wikiatable td { border: 1px solid var(--theme-border-color); padding: 0.35em 1em; }

/* For tables with first column as header */ .columnhead tr td:first-child { font-weight: bold; }

/* For making preformatted text wrap */ pre { white-space: pre-wrap; }

/* Image galleries on infoboxes */ .pi-image-collection .wds-tabs__tab { font-variant: small-caps; }

/* Webtoon rank colors (dark mode) */ .theme-fandomdesktop-dark .lrank { color: #ff5959 } .theme-fandomdesktop-dark .srank-grad { color: #ffad48; /* for linear gradient not working */ background: linear-gradient(#fdfc4c, #ffa04a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .theme-fandomdesktop-dark .srank { color: #ffeb4e } .theme-fandomdesktop-dark .arank { color: #ff83ff } .theme-fandomdesktop-dark .brank { color: #6191ff } .theme-fandomdesktop-dark .crank { color: #5bfe95 } .theme-fandomdesktop-dark .drank { color: #fff } .theme-fandomdesktop-dark .erank { color: #99a7ab } /* Webtoon rank colors (light mode) */ .theme-fandomdesktop-light .lrank { color: #b30000 } .theme-fandomdesktop-light .srank-grad { color: #bb9500; /* for linear gradient not working */ background: linear-gradient(#ffcb00, #bc5800); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .theme-fandomdesktop-light .srank { color: #a08000 } .theme-fandomdesktop-light .arank { color: #a200a2 } .theme-fandomdesktop-light .brank { color: #0e4ad1 } .theme-fandomdesktop-light .crank { color: #007151 } .theme-fandomdesktop-light .drank { color: #fff; text-shadow: 0 0 0.35em black; } .theme-fandomdesktop-light .erank { color: #1b2a2d }

/***************************
 * INFOBOX STYLES ******

.portable-infobox.pi-theme-stacked .pi-smart-group-head { border-bottom: none; } .portable-infobox.pi-theme-stacked .pi-smart-group-body { border-top: none; } .portable-infobox.pi-theme-stacked .pi-smart-data-label { text-align: left; padding-bottom: 0; margin-bottom: 0; } .portable-infobox.pi-theme-stacked .pi-smart-data-value { text-align: left; margin-left: 9px; margin-top: 0; padding-top: 0; } /* Aligning headings on horizontal groups and bordering off navigation */ .pi-horizontal-group caption.pi-header, .pi-navigation { text-align: center } .pi-navigation { border-top: thin solid var(--pi-border-color) }

/* Centering and padding values for sides/casualties on Template:Battle */ .portable-infobox.pi-theme-battle .pi-horizontal-group-item.pi-data-value { padding-top: 9px } .portable-infobox.pi-theme-battle section + .pi-data { justify-content: center }

/************************ /* Template:Welcome, centering general text */ .welcometype { text-align: center; } .welcometype h1 { justify-content: center; } /* Template:Welcome, main body: background, padding, and text colors */ .welcometype > div { background-color: rgba(var(--theme-link-color--rgb), 0.2); border-radius: 1em; padding: 0.5em 1.5em 0.75em; color: var(--theme-body-text-color); } /* Template:Welcome, stats section */ .welcometype table { margin: auto; } .welcometype tr:first-child td { color: rgba(var(--theme-link-color--rgb), 0.75); text-shadow: 0 0 0 var(--theme-message-color); font-size: 2em; font-style: italic; width: 15%; } .welcometype tr:last-child td { font-variant: small-caps; padding-top: 0; }
 * MAIN PAGE TEMPLATES **

.headertype { width: 100%; background: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); margin-top: 1em; padding: 0.5em 1em; border-radius: .5em; text-align: center; font-size: 1.3em; font-weight: bold; }

.maintype { border: 2px solid var(--theme-sticky-nav-background-color); margin-top: 0.5em; } .maintype p:last-child { margin-bottom: 0; } .maintype ul { margin-left: 20px }

/* For Template:Random quote */ .randomquote { margin: 0 auto !important; max-width: 100% !important; background: none !important; }

/* For the important articles guide */ text-align: center; }
 * 1) mpguide ul.gallery {

/*********************** /* Template:Citation needed span */ .cnspan { padding: 0 0.1em; color: var(--theme-body-text-color); border: 1px solid var(--theme-border-color); background: rgba(var(--theme-accent-color--rgb), 0.25); }
 * TEMPLATE STUFF ****

/* For Template:Korean */ .kr { color: var(--theme-link-color--hover) }

/* For Template:Navbox */ .navbox { border: 1px solid var(--theme-border-color); border-radius: 0.5em; border-collapse: separate; margin: 1em 0; padding: 0.5em; } .theme-fandomdesktop-light .navbox { background-color: var(--theme-accent-color--hover) } .theme-fandomdesktop-dark .navbox { background-color: var(--theme-body-background-color) } .navbox-padding { padding: 0.4em; } .navbox-title { padding: .5em 2em; background-color: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); } .navbox-template-links { line-height: 100%; top: inherit; } .navbox-above, .navbox-below { color: var(--theme-body-text-color) } .theme-fandomdesktop-light .navbox-above, .navbox-below { background: var(--theme-link-dynamic-color-2) } .theme-fandomdesktop-dark .navbox-above, .navbox-below { background: rgba(var(--theme-link-dynamic-color-1--rgb), 0.5) } .theme-fandomdesktop-light .navbox-header { background: var(--theme-accent-color); color: var(--theme-accent-label-color); } .theme-fandomdesktop-dark .navbox-header { background: #491b62; color: var(--theme-sticky-nav-text-color); } .navbox-group, .navbox-subgroup { padding-left: 1em !important; vertical-align: middle !important; color: var(--theme-body-text-color); } .theme-fandomdesktop-light .navbox-group { background: rgba(var(--theme-link-dynamic-color-1--rgb), 0.7) } .theme-fandomdesktop-light .navbox-subgroup { background: rgba(var(--theme-link-dynamic-color-1--rgb), 0.8) } .theme-fandomdesktop-dark .navbox-group { background: #342856 } .theme-fandomdesktop-dark .navbox-subgroup { background: #291e49 } .navbox-list { padding: 0; color: var(--theme-page-text-color) } .theme-fandomdesktop-light .navbox-list { background: var(--theme-page-background-color); } .theme-fandomdesktop-dark .navbox-list { background: rgba(var(--theme-link-dynamic-color-1--rgb), 0.8) }

/* For notice-style templates */ .noticetype { text-align: center; background-color: rgba(var(--theme-link-color--rgb),0.1); color: var(--theme-body-text-color); padding: 0.5em 1em; border-radius: .5em; }

/* Template:Quote and Template:Dialogue. Taken from dev.fandom/Global Lua Modules/Quote */
 * root {

--pull-quote-max-width: 80%; --pull-quote-text-color: var(--theme-body-text-color); --pull-quote-mark-color: var(--theme-link-color); --pull-quote-mark-font: "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; --pull-quote-hyphens: auto; --pull-quote-frame-color: var(--theme-sticky-nav-background-color); --pull-quote-background-color: rgba(var(--theme-link-color--rgb), 0.1); } /* #content added as a parent selector to the following in order to override default blockquote styles. */	display: flex; flex-direction: column; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: var(--pull-quote-max-width); margin: 1em auto; font-size: 1em; line-height: 1.8; background-color: var(--pull-quote-background-color); padding: 0.5em 1em; border-radius: 1em; text-align: justify; font-style: initial; /* fixing defaults */ }	position: relative; padding: 0 2em; hyphens: var(--pull-quote-hyphens); color: var(--pull-quote-text-color); margin: 0.5em 0; /* fixing defaults */ }	display: block; /* fixing defaults */ position: absolute; font-size: 3em; font-family: var(--pull-quote-mark-font); font-weight: 700; color: var(--pull-quote-mark-color); }	content: "“"; top: 0; left: 0; line-height: 1; }	content: "”"; bottom: 0; right: 0; line-height: 0.2; }	align-self: end; color: var(--theme-body-text-color--hover); }	content: "— "; }	font-size: 12px; font-weight: 500; }	border: 3px solid var(--pull-quote-frame-color); border-left: 0; border-right: 0; }	float: right; margin: 1em 0 1em 2em; }	float: left; margin: 1em 2em 1em 0; }
 * 1) content .pull-quote {
 * 1) content .pull-quote::before { display: none; /* fixing defaults */ }
 * 2) content .pull-quote__text {
 * 1) content .pull-quote__text::before,
 * 2) content .pull-quote__text::after {
 * 1) content .pull-quote__text::before {
 * 1) content .pull-quote__text::after {
 * 1) content .pull-quote > div:last-of-type {
 * 1) content .pull-quote__source::before {
 * 1) content .pull-quote__source {
 * 1) content .pull-quote--right,
 * 2) content .pull-quote--left {
 * 1) content .pull-quote--right {
 * 1) content .pull-quote--left {

/* Template:Tabs */ table.tabs { /* overall tab selection */ margin: auto; width: fit-content; width: -moz-fit-content; width: -webkit-fit-content; text-align: center; padding: 0 2em 1em; } table.tabs a, table.tabs strong.selflink { /* all tabs */ border: 1.5px solid; padding: 0.5em 0.9em; margin: 2px; border-radius: 4px; font-weight: bold; display: inline-block; word-wrap: anywhere; background: rgba(var(--theme-accent-color--rgb), .3); } table.tabs strong.selflink { /* current page */ background: var(--theme-sticky-nav-background-color); color: var(--theme-sticky-nav-text-color); border-color: var(--theme-sticky-nav-background-color); } table.tabs a { /* other tabs */ border-color: var(--theme-accent-color--hover); } table.tabs a:hover { /* other tabs being hovered over */ background: var(--theme-accent-color); color: var(--theme-accent-label-color); transition: 300ms; } table.tabs a:active { /* other tabs being selected */ background: var(--theme-accent-color--hover); } table.tabs .tabsMobile { /* content for when formatting is turned off */ display: none; }

/* Template:Tocright */ .tocright { float: right; clear: right; margin: 1em 0 1em 0.8em; max-width: 20em; } .tocright #toc { margin: 0; }

/* Template:Untranslated and Template:Untranslated end */ .top.untld.noticetype { border-top: 4px solid var(--theme-sticky-nav-background-color); } .bottom.untld.noticetype { border-bottom: 4px solid var(--theme-sticky-nav-background-color); } .untld.noticetype i { color: var(--theme-link-color); } .untld.noticetype .mw-customtoggle-untranslated { color: var(--theme-link-color); font-weight: 500; transition: color .3s; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .untld.noticetype .mw-customtoggle-untranslated:hover { color: var(--theme-link-color--hover); } .untld.noticetype .mw-customtoggle-untranslated:active, .untld.noticetype .mw-customtoggle-untranslated:focus, .untld.noticetype .mw-customtoggle-untranslated:hover { text-decoration: underline; } .untld.noticetype .mw-customtoggle-untranslated::before, .untld.noticetype .mw-customtoggle-untranslated::after { color: var(--theme-body-text-color); font-weight: initial; } .untld.noticetype .mw-customtoggle-untranslated::before { content: "["; } .untld.noticetype .mw-customtoggle-untranslated::after { content: "]"; }