MediaWiki:Themes.css

/* Infobox customization stylesheet */

/* Main styling */ .portable-infobox { border: 1px solid #666; padding: 2px; font-size: smaller; } .portable-infobox, .portable-infobox .pi-image-collection-tab-content { background: transparent; } .portable-infobox .pi-image-collection-tabs, .portable-infobox .pi-font, .portable-infobox .pi-secondary-font { font-size: 11px; }

/** Data customization **/ .portable-infobox .pi-title, .portable-infobox .pi-header { text-align: center; color: #fff; background: #8b0000; font-weight: bold; border-color: transparent; padding: 4px; } .portable-infobox .pi-title { font-size: 16px; } .portable-infobox .pi-group, .portable-infobox .pi-group .pi-data:last-child { border: none; } .portable-infobox .pi-data { padding: 4px; } .portable-infobox .pi-border-color { border-color: #999; }

/** Image customization **/ .portable-infobox .pi-image-collection-tabs .pi-tab-link { background: transparent; border-style: none; margin: 0; padding: 0; color: #cc960e; font-weight: bold; } .portable-infobox .pi-image-collection-tabs .pi-tab-link.current { color: #222; } .portable-infobox .pi-image-collection-tabs .pi-tab-link:not(:last-of-type):after { content: "|"; color: #222; font-weight: bold; width: 1em; padding-right: 3px }

/** Navigation footer styling **/ .portable-infobox .pi-navigation { text-align: center; font-weight: bold; background: #8b0000; padding: 4px; } .portable-infobox .pi-navigation a { color: #FFFFFF; text-align: center; }

/* Character infobox styling */ /* - .pi-theme-character */ /* - .pi-theme-character-villain */ /* - .pi-theme-character-vigilante */ /* - .pi-theme-character-prohero */ /* - .pi-theme-character-police */ /* - .pi-theme-character-civilian */ /* - .pi-theme-character-shiketsu */ /* - .pi-theme-character-ketsubutsu */ .pi-theme-character, .pi-theme-character-villain, .pi-theme-character-vigilante, .pi-theme-character-prohero, .pi-theme-character-police, .pi-theme-character-civilian, .pi-theme-character-shiketsu, .pi-theme-character-ketsubutsu{ border-color: #ffd700; } .pi-theme-character-villain .pi-header, .pi-theme-character-villain .pi-title, .pi-theme-character-villain .pi-navigation { background: #141414; } .pi-theme-character-vigilante .pi-header, .pi-theme-character-vigilante .pi-title, .pi-theme-character-vigilante .pi-navigation { background: #696969; } .pi-theme-character-prohero .pi-header, .pi-theme-character-prohero .pi-title, .pi-theme-character-prohero .pi-navigation { background: #d80000; } .pi-theme-character-police .pi-header, .pi-theme-character-police .pi-title, .pi-theme-character-police .pi-navigation { background: #0044b3; }

.pi-theme-character-civilian .pi-header, .pi-theme-character-civilian .pi-title, .pi-theme-character-civilian .pi-navigation { background: #2c8a2e; }

.pi-theme-character-shiketsu .pi-header, .pi-theme-character-shiketsu .pi-title, .pi-theme-character-shiketsu .pi-navigation { background: #00458b; }

.pi-theme-character-ketsubutsu .pi-header, .pi-theme-character-ketsubutsu .pi-title, .pi-theme-character-ketsubutsu .pi-navigation { background: #bdc2c8; }

/* Chapter infobox styling - */ .pi-theme-chapter .pi-data-label { flex-basis: 120px; } .pi-theme-chapter .pi-navigation { background: transparent; border-top: 1px dotted #999; padding: 0; } .pi-theme-chapter .pi-navigation a { color: #cc960e; }

/* Quirk infobox styling - */ .pi-theme-quirk { border-color: #ffd700; } .pi-theme-quirk .pi-title, .pi-theme-quirk .pi-header, .pi-theme-quirk .pi-navigation { background: #ffbf00; }

/* Fight infobox styling - */ .pi-theme-fight { border-color: #8b0000; } .pi-theme-fight .pi-title { font-size: 14px; line-height:21px; } .pi-theme-fight .pi-horizontal-group { text-align: left; } .pi-theme-fight .pi-data-value ol, .pi-theme-fight .pi-data-value ul { list-style-position: outside; margin-left: 2em; }

/* Move infobox styling - */ .pi-theme-move { border-color: #8b0000; }

/* Merchandise infobox styling - */ .pi-theme-merch { border-color: #666; } .pi-theme-merch .pi-title, .pi-theme-merch .pi-header { background: #7458c1; } .pi-theme-merch { flex-basis: 100px; }

/* Episode infobox styling - */ .pi-theme-episode { border: 1px solid #666; } .pi-theme-episode .pi-title, .pi-theme-episode .pi-header { background: #1c1a16; } .pi-theme-episode .pi-title { font-size: 14px; line-height:21px; } .pi-theme-episode .pi-navigation { background: transparent; border-top: 1px dotted #999; padding: 0; } .pi-theme-episode .pi-navigation a { color: #cc960e; }

/* Location infobox styling - */ .pi-theme-location .pi-title, .pi-theme-location .pi-header { background: #008080; }

/* Item infobox styling - */ .pi-theme-item .pi-title, .pi-theme-item .pi-header { background: #cd9938; }

/* Media infobox styling */ /* - .pi-theme-volume */ /* - .pi-theme-arc */ /* - .pi-theme-saga */ .pi-theme-volume { border-color: #8b0000; } .pi-theme-volume .pi-title, .pi-theme-arc .pi-title, .pi-theme-saga .pi-title { font-size: 14px; line-height:21px; } .pi-theme-volume .pi-data-label, .pi-theme-saga .pi-data-label { flex-basis: 120px; } .pi-theme-volume .pi-navigation, .pi-theme-arc .pi-navigation, .pi-theme-saga .pi-navigation { background: transparent; border-top: 1px dotted #999; padding: 0; } .pi-theme-volume .pi-navigation a, .pi-theme-arc .pi-navigation a, .pi-theme-saga .pi-navigation a { color: #cc960e; }

/* Simple infobox styling - */ .pi-theme-simple .pi-title, .pi-theme-simple .pi-header, .pi-theme-simple .pi-navigation { background: #8a4b08; }

/* Music infobox styling - */ .pi-theme-music .pi-title, .pi-theme-music .pi-header, .pi-theme-music .pi-navigation { background: #00796b; } .pi-theme-music .pi-title { font-size: 14px; line-height:21px; }

/* Group infobox styling - */ .pi-theme-group { border-color: #145530; } .pi-theme-group .pi-title, .pi-theme-group .pi-header, .pi-theme-group .pi-navigation { background: #2e8b57; }

/* Organization infobox styling - */ .pi-theme-org .pi-title, .pi-theme-org .pi-header, .pi-theme-org .pi-navigation { background: #5f23ae; }

/* Event infobox styling - */ .pi-theme-event { border-color: #8b0000; } .pi-theme-event .pi-title { font-size: 14px; line-height:21px; }

/* --- Begin ad-hoc hacks --- */

.pi-theme-affiliation-villain .pi-header, .pi-theme-affiliation-villain .pi-title, .pi-theme-affiliation-villain .pi-navigation { background: #141414; }

.pi-theme-affiliation-leagueofvillains .pi-header, .pi-theme-affiliation-leagueofvillains .pi-title, .pi-theme-affiliation-leagueofvillains .pi-navigation { background: #708090; }

.pi-theme-affiliation-shiehassaikai .pi-header, .pi-theme-affiliation-shiehassaikai .pi-title, .pi-theme-affiliation-shiehassaikai .pi-navigation { background: #483d8b; }

.temp-dark-theme-hack, .temp-dark-theme-hack a { color: #fff; }

/* End ad-hoc hacks  */

/**/ /* NB: The CSS from here on out was compiled from Special:PermanentLink/153058 with dart-sass 1.15.1. /* Please edit and recompile that source Sass file instead of manually editing what follows. /**/ /* [components] character galleries: common layout */ .chargallery .wikia-gallery { display: flex; flex-wrap: wrap; justify-content: center; } .chargallery .wikia-gallery-item { border: 3px solid; margin: 0 -3px -3px 0; padding: 0; } .chargallery .wikia-gallery-item img { background-color: #ffffff; margin-top: 0 !important; } .chargallery .wikia-gallery-item .lightbox-caption { box-sizing: border-box; font: bold 9pt/1.25em sans-serif; margin: 0; padding: 4pt; } .chargallery-profile-caption { font-size: larger; } .chargallery-profile-subcaption { font-size: smaller; } /* [components] custom header: common layout */ .customheader { border: 1px solid transparent; border-radius: 0.3em; font-size: 130%; font-weight: bold; margin: 5px 0 10px; overflow: auto; padding: 0.3em 0.4em 0.2em; text-align: center; } /* [components] navboxes: common layout */ .navibox { border: 1px solid transparent; border-collapse: separate; border-spacing: 2px; font-size: 90%; width: 100%; } .navibox th, .navibox td { padding: 2px; } .navibox-title, .navibox-header, .navibox-group { font-weight: bold; text-align: center; } .navibox-group { font-size: smaller; } .navibox-list { text-align: center; } /* [legacy themes] character galleries */ /*  - NB: for text, the contrast ratio is 9.53:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-ua .wikia-gallery-item { background-color: #910000; border-color: #5f0000; } .chargallery.chargallery-theme-ua .chargallery-profile-caption, .chargallery.chargallery-theme-ua .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-ua .chargallery-profile-caption a, .chargallery.chargallery-theme-ua .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 5.36:1, which partially passes WCAG 2's enhanced contrast requirements (failing AAA for non-bold text < 18pt and bold text < 14pt) */ .chargallery.chargallery-theme-ph .wikia-gallery-item { background-color: #d80000; border-color: #c40000; } .chargallery.chargallery-theme-ph .chargallery-profile-caption, .chargallery.chargallery-theme-ph .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-ph .chargallery-profile-caption a, .chargallery.chargallery-theme-ph .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 18.42:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-vl .wikia-gallery-item { background-color: #141414; border-color: #0d0d0d; } .chargallery.chargallery-theme-vl .chargallery-profile-caption, .chargallery.chargallery-theme-vl .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-vl .chargallery-profile-caption a, .chargallery.chargallery-theme-vl .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 8.48:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-pl .wikia-gallery-item { background-color: #0044b3; border-color: #0040a9; } .chargallery.chargallery-theme-pl .chargallery-profile-caption, .chargallery.chargallery-theme-pl .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-pl .chargallery-profile-caption a, .chargallery.chargallery-theme-pl .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 4.39:1, which partially passes WCAG 2's minimum contrast requirements (failing AA for non-bold text < 18pt and bold text < 14pt) */ .chargallery.chargallery-theme-cv .wikia-gallery-item { background-color: #2c8a2e; border-color: #29822b; } .chargallery.chargallery-theme-cv .chargallery-profile-caption, .chargallery.chargallery-theme-cv .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-cv .chargallery-profile-caption a, .chargallery.chargallery-theme-cv .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 9.71:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-kb .wikia-gallery-item { background-color: #bdc2c8; border-color: #bdc2c8; } .chargallery.chargallery-theme-kb .chargallery-profile-caption, .chargallery.chargallery-theme-kb .chargallery-profile-subcaption { color: #1a1a1a; } .chargallery.chargallery-theme-kb .chargallery-profile-caption a, .chargallery.chargallery-theme-kb .chargallery-profile-subcaption a { color: #1a1a1a; } /*  - NB: for text, the contrast ratio is 9.44:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-sh .wikia-gallery-item { background-color: #00458b; border-color: #004081; } .chargallery.chargallery-theme-sh .chargallery-profile-caption, .chargallery.chargallery-theme-sh .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-sh .chargallery-profile-caption a, .chargallery.chargallery-theme-sh .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 2.89:1, which fails WCAG 2's minimum contrast requirements */ .chargallery.chargallery-theme-vg .wikia-gallery-item { background-color: #ea783f; border-color: #ea783f; } .chargallery.chargallery-theme-vg .chargallery-profile-caption, .chargallery.chargallery-theme-vg .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-vg .chargallery-profile-caption a, .chargallery.chargallery-theme-vg .chargallery-profile-subcaption a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 10.72:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.chargallery-theme-ih .wikia-gallery-item { background-color: #7c073f; border-color: #7c073f; } .chargallery.chargallery-theme-ih .chargallery-profile-caption, .chargallery.chargallery-theme-ih .chargallery-profile-subcaption { color: #ffffff; } .chargallery.chargallery-theme-ih .chargallery-profile-caption a, .chargallery.chargallery-theme-ih .chargallery-profile-subcaption a { color: #ffffff; } /* [legacy themes] custom headers */ /*  - NB: for text, the contrast ratio is 10.01:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-red { background-color: #8b0000; color: #ffffff; } .customheader.customheader-theme-red a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 5.22:1, which partially passes WCAG 2's enhanced contrast requirements (failing AAA for non-bold text < 18pt and bold text < 14pt) */ .customheader.customheader-theme-orange { background-color: #c53c0c; color: #ffffff; } .customheader.customheader-theme-orange a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 18.42:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-black { background-color: #141414; color: #ffffff; } .customheader.customheader-theme-black a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 8.48:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-blue { background-color: #0044b3; color: #ffffff; } .customheader.customheader-theme-blue a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 4.39:1, which partially passes WCAG 2's minimum contrast requirements (failing AA for non-bold text < 18pt and bold text < 14pt) */ .customheader.customheader-theme-green { background-color: #2c8a2e; color: #ffffff; } .customheader.customheader-theme-green a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 3.63:1, which partially passes WCAG 2's minimum contrast requirements (failing AA for non-bold text < 18pt and bold text < 14pt) */ .customheader.customheader-theme-olive { background-color: #8b8b00; color: #ffffff; } .customheader.customheader-theme-olive a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 5.49:1, which partially passes WCAG 2's enhanced contrast requirements (failing AAA for non-bold text < 18pt and bold text < 14pt) */ .customheader.customheader-theme-grey { background-color: #696969; color: #ffffff; } .customheader.customheader-theme-grey a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 10.72:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-purple { background-color: #7c073f; color: #ffffff; } .customheader.customheader-theme-purple a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 9.44:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-cerulean { background-color: #00458b; color: #ffffff; } .customheader.customheader-theme-cerulean a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 5.36:1, which partially passes WCAG 2's enhanced contrast requirements (failing AAA for non-bold text < 18pt and bold text < 14pt) */ .customheader.customheader-theme-scarlet { background-color: #d80000; color: #ffffff; } .customheader.customheader-theme-scarlet a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 2.89:1, which fails WCAG 2's minimum contrast requirements */ .customheader.customheader-theme-lorange { background-color: #ea783f; color: #ffffff; } .customheader.customheader-theme-lorange a { color: #ffffff; } /*  - NB: for text, the contrast ratio is 11.88:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-gold { background-color: #e3da2d; color: #1a1a1a; } .customheader.customheader-theme-gold a { color: #1a1a1a; } /*  - NB: for text, the contrast ratio is 9.71:1, which passes WCAG 2's enhanced contrast requirements */ .customheader.customheader-theme-lgrey { background-color: #bdc2c8; color: #1a1a1a; } .customheader.customheader-theme-lgrey a { color: #1a1a1a; } /* [themes] by affiliation: League of Villains */ /*  - NB: for text, the contrast ratio is 4.05:1, which partially passes WCAG 2's minimum contrast requirements (failing AA for non-bold text < 18pt and bold text < 14pt) */ .chargallery.theme-affiliation-league_of_villains .wikia-gallery-item { background-color: #708090; border-color: #708090; } .chargallery.theme-affiliation-league_of_villains .chargallery-profile-caption, .chargallery.theme-affiliation-league_of_villains .chargallery-profile-subcaption { color: #ffffff; } .chargallery.theme-affiliation-league_of_villains .chargallery-profile-caption a, .chargallery.theme-affiliation-league_of_villains .chargallery-profile-subcaption a { color: #ffffff; } .customheader.theme-affiliation-league_of_villains { background-color: #708090; color: #ffffff; } .customheader.theme-affiliation-league_of_villains a { color: #ffffff; } table.navibox .navibox-header.theme-affiliation-league_of_villains, table.navibox .navibox-group.theme-affiliation-league_of_villains { background-color: #708090; color: #ffffff; } table.navibox .navibox-header.theme-affiliation-league_of_villains a, table.navibox .navibox-group.theme-affiliation-league_of_villains a { color: #ffffff; } /* [themes] by affiliation: Shie Hassaikai */ /*  - NB: for text, the contrast ratio is 9.07:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.theme-affiliation-shie_hassaikai .wikia-gallery-item { background-color: #483d8b; border-color: #483d8b; } .chargallery.theme-affiliation-shie_hassaikai .chargallery-profile-caption, .chargallery.theme-affiliation-shie_hassaikai .chargallery-profile-subcaption { color: #ffffff; } .chargallery.theme-affiliation-shie_hassaikai .chargallery-profile-caption a, .chargallery.theme-affiliation-shie_hassaikai .chargallery-profile-subcaption a { color: #ffffff; } .customheader.theme-affiliation-shie_hassaikai { background-color: #483d8b; color: #ffffff; } .customheader.theme-affiliation-shie_hassaikai a { color: #ffffff; } table.navibox .navibox-header.theme-affiliation-shie_hassaikai, table.navibox .navibox-group.theme-affiliation-shie_hassaikai { background-color: #483d8b; color: #ffffff; } table.navibox .navibox-header.theme-affiliation-shie_hassaikai a, table.navibox .navibox-group.theme-affiliation-shie_hassaikai a { color: #ffffff; } /* [themes] by affiliation: villains */ /*  - NB: for text, the contrast ratio is 18.42:1, which passes WCAG 2's enhanced contrast requirements */ .chargallery.theme-affiliation-villains .wikia-gallery-item { background-color: #141414; border-color: #0d0d0d; } .chargallery.theme-affiliation-villains .chargallery-profile-caption, .chargallery.theme-affiliation-villains .chargallery-profile-subcaption { color: #ffffff; } .chargallery.theme-affiliation-villains .chargallery-profile-caption a, .chargallery.theme-affiliation-villains .chargallery-profile-subcaption a { color: #ffffff; } .customheader.theme-affiliation-villains { background-color: #141414; color: #ffffff; } .customheader.theme-affiliation-villains a { color: #ffffff; } .navibox.theme-affiliation-villains { border-color: #0d0d0d; } .navibox.theme-affiliation-villains .navibox-title, .navibox.theme-affiliation-villains .navibox-header, .navibox.theme-affiliation-villains .navibox-group { background-color: #141414; color: #ffffff; } .navibox.theme-affiliation-villains .navibox-title a, .navibox.theme-affiliation-villains .navibox-header a, .navibox.theme-affiliation-villains .navibox-group a { color: #ffffff; } .navibox.theme-affiliation-villains .navibox-group { width: 100px; } /* [themes] by page type: music */ /*  - NB: for text, the contrast ratio is 8.93:1, which passes WCAG 2's enhanced contrast requirements */ .navibox.theme-page_type-music { border-color: #aaaaaa; } .navibox.theme-page_type-music .navibox-title, .navibox.theme-page_type-music .navibox-header, .navibox.theme-page_type-music .navibox-group { background-color: #2f4f4f; color: #ffffff; } .navibox.theme-page_type-music .navibox-title a, .navibox.theme-page_type-music .navibox-header a, .navibox.theme-page_type-music .navibox-group a { color: #ffffff; } .navibox.theme-page_type-music .navibox-group { width: 125px; } /* [themes] by page type: Quirks */ /*  - NB: for text, the contrast ratio is 1.65:1, which fails WCAG 2's minimum contrast requirements */ .navibox.theme-page_type-quirks { border-color: #aaaaaa; } .navibox.theme-page_type-quirks .navibox-title, .navibox.theme-page_type-quirks .navibox-header, .navibox.theme-page_type-quirks .navibox-group { background-color: #ffbf00; color: #ffffff; } .navibox.theme-page_type-quirks .navibox-title a, .navibox.theme-page_type-quirks .navibox-header a, .navibox.theme-page_type-quirks .navibox-group a { color: #ffffff; } .navibox.theme-page_type-quirks .navibox-group { width: 125px; }