MediaWiki:Infoboxes.css

/** Character Infoboxes **/

/*** Color variables for light/dark themes ***/

.theme-fandomdesktop-light { --infobox-main-border: #000; --infobox-main-text: #000; --infobox-character-border: #52A6FA; --infobox-character-title: #E3E3E3; --infobox-character-header: #BEE7F7; --infobox-killer-border: #9A261E; --infobox-killer-header: #F3B4B4; }

.theme-fandomdesktop-dark { --infobox-main-border: #363839; --infobox-main-text: #E6E6E6; --infobox-character-border: #28537E; --infobox-character-title: #232526; --infobox-character-header: #224157; --infobox-killer-border: #51100B; --infobox-killer-header: #441F1F; }

/*** Changes to width ***/

.pi-theme-character.portable-infobox { width: 254px !important; }

.pi-theme-character .pi-image img { width: 100%; height: auto; }

/*** Main background and borders ***/

.pi-theme-character.portable-infobox { background-color: var(--theme-page-background-color); border: 2px solid var(--infobox-main-border); border-radius: 14px; }

.pi-theme-character .pi-data, .pi-theme-character .pi-group { border-bottom-style: solid !important; border-bottom-width: 0 !important; }

.pi-theme-character .pi-border-color { border-color: var(--infobox-character-border); }

.pi-group>.pi-item:last-child { border-bottom: none !important; }

.portable-infobox>.pi-item:last-child { border-bottom: none !important; }

/*** Title and headings ***/

.pi-theme-character .pi-title { font-size: 22px; background: var(--infobox-character-title); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom: 1px solid var(--infobox-main-border); color: var(--infobox-main-text); font-weight: bold; font-family: Lucida Console, Verdana; font-variant: small-caps; text-align: center; padding: 3px; }

.pi-theme-character .pi-header { font-size: 17px; color: var(--infobox-main-text); background: var(--infobox-character-header); border-top: 1px solid var(--infobox-character-border); border-bottom: 1px solid var(--infobox-character-border); padding: 9px 5px 9px 5px !important; text-align: left; }

.pi-theme-character .pi-header[data-item-name="header-two"] { color: var(--infobox-main-text); font-size: 16px; padding: 3px !important; font-weight: normal; text-align: center; margin-top: -1px; }

/**** Arrow for show/hide collapse ****/ .pi-theme-character .pi-collapse .pi-header:first-child::after, .pi-theme-character .pi-header.collapsible::after { border-color: var(--infobox-main-text); }

/*** Labels and content ***/

.pi-theme-character .pi-data-label { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-variant: normal; color: var(--infobox-main-text); text-align: center; font-size: 84%; }

.pi-theme-character .pi-data-value { font-size: 84%; color: var(--infobox-main-text); line-height: 17px; text-align: center; hyphens: none !important; }

.pi-theme-character .pi-item-spacing { padding: 0 3px; }

.pi-theme-character .pi-layout-stacked .pi-data-value { padding-left: 0; }

.pi-theme-character.pi-layout-stacked .pi-data-label { padding-bottom: 0 !important; }

/*** Making the font look the same when previewing on VE ***/ .ve-ui-overlay .portable-infobox { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; }

/*** Killer section ***/

.pi-theme-character .pi-header[data-item-name="header-killer"] { color: var(--infobox-main-text); background: var(--infobox-killer-header); border-top: 1px solid var(--infobox-killer-border); border-bottom: 1px solid var(--infobox-killer-border); margin-top: -1px; }

.pi-theme-character .pi-collapse-closed .pi-header[data-item-name="header-killer"] { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom-color: transparent; }

.pi-theme-character .pi-header[data-item-name="header-killer-two"] { font-size: 16px; padding: 3px !important; font-weight: normal; text-align: center; background: var(--infobox-killer-header); border-top: 1px solid var(--infobox-killer-border); border-bottom: 1px solid var(--infobox-killer-border); margin-top: -1px; color: var(--infobox-main-text); }

.pi-group[data-item-name="group-killer"] .pi-border-color { border-color: var(--infobox-killer-border); }

/** Season and Book Infoboxes **/

/*** Changes to width ***/

.pi-theme-season.portable-infobox, .pi-theme-book.portable-infobox { width: 30% !important; }

.pi-theme-season .pi-image img{ width: 83%; height: auto; } .pi-theme-book .pi-image img { width: 100%; height: auto; }

/*** Main background and borders ***/

.pi-theme-season.portable-infobox { background-color: var(--theme-page-background-color); border: 2px solid black; border-bottom-width: 1px !important; border-radius: 14px 14px 0 0; }

.pi-theme-book.portable-infobox { background-color: var(--theme-page-background-color); border-top: 2px solid #000; border-left: 2px solid #000; border-right: 4px solid #000; border-bottom: 4px solid #000; border-radius: 14px; }

/*** Title and headings ***/

.pi-theme-season .pi-title, .pi-theme-book .pi-title { border-radius: 12px 12px 0 0; border-bottom: 1px solid #000; font-weight: bold; text-align: center; } .pi-theme-season .pi-title { font-size: large; padding: 5px 0 !important; } .pi-theme-book .pi-title { background: #FFA500; font-size: medium; padding: 0 0 !important; }

.pi-theme-season .pi-header, .pi-theme-book .pi-header { font-family: inherit; font-variant: none; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center; color: inherit; } .pi-theme-season .pi-header { background: #f3b4b4; font-size: 75%; padding: 0; } .pi-theme-book .pi-header { background: #F3A433; font-size: 92%; padding: 2px !important; color: #000; }

/*** Labels and content ***/ .pi-theme-season .pi-item-spacing, .pi-theme-book .pi-item-spacing { padding: 0 0; }

.pi-theme-season .pi-data-label, .pi-theme-season .pi-data-value, .pi-theme-book .pi-data-label, .pi-theme-book .pi-data-value { font-size: 11px !important; font-family: inherit; font-variant: inherit; text-align: center; }

.pi-theme-season .pi-horizontal-group-no-labels .pi-data-value, .pi-theme-book .pi-horizontal-group-no-labels .pi-data-value { padding-top: 0; padding-left: 0; }

.pi-theme-season .pi-secondary-font, .pi-theme-season .pi-data-value, .pi-theme-book .pi-secondary-font, .pi-theme-book .pi-data-value { line-height: 15px !important; }

.pi-theme-season .pi-horizontal-group .pi-data-label, .pi-theme-book .pi-horizontal-group .pi-data-label { padding: 0 14px 0; }

.pi-theme-season .pi-horizontal-group-item:nth-child(even) { background-color: var(--theme-page-background-color); }

.pi-group[data-item-name="book-bads"] .pi-data-value { font-size: 14px !important; padding: 3px 0 !important; }

.pi-group[data-item-name="book-info"] { border-top: 2px solid #000; border-bottom: 1px solid #9a261e; } .pi-group[data-item-name="book-info"] .pi-data-label { flex-basis: 172px; padding-right: 14px; padding-left: 2px; } .pi-group[data-item-name="book-info"] .pi-data-label, .pi-group[data-item-name="book-info"] .pi-data-value { text-align: left !important; }

.pi-theme-book .pi-navigation { color: #9d2b24; text-align: center; font-size: xx-small; line-height: 200% !important; border-radius: 0 0 14px 14px; }

.pi-theme-book .pi-navigation .mw-selflink { color: #000; }

/*** Season colors ***/

.page-Season_One .pi-theme-season .pi-title { background: #9A261E; color: #FFF; } .theme-fandomdesktop-light .page-Season_One .pi-theme-season .pi-header { background: #F3B4B4; color: #000; } .theme-fandomdesktop-dark .page-Season_One .pi-theme-season .pi-header { background: #571511; color: #FFF; }

.page-Season_Two .pi-theme-season .pi-title { background: #244AFB; color: #FFF; } .page-Season_Two.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #C3E0FA; color: #000; } .page-Season_Two.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #242E5D; color: #FFF; }

.page-Season_Three .pi-theme-season .pi-title { background: #316504; color: #FFF; } .page-Season_Three.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #C8F5BC; color: #000; } .page-Season_Three.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #22381c; color: #FFF; }

.page-Season_Four .pi-theme-season .pi-title { background: #B88623; color: #FFF; } .page-Season_Four.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #fff9AB; color: #000; } .page-Season_Four.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #4F4C22; color: #FFF; }

.page-Season_Five .pi-theme-season .pi-title { background: #9747D3; color: #FFF; } .page-Season_Five.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #EFB4FF; color: #000; } .page-Season_Five.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #795882; color: #FFF; }

.page-Season_Six .pi-theme-season .pi-title { background: #002999; color: #FFF; } .page-Season_Six.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #8FBEDC; color: #000; } .page-Season_Six.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #3C5778; color: #FFF; }

.page-Season_Seven .pi-theme-season .pi-title { background: #000; color: #FFF; } .page-Season_Seven.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #BEBEBE; color: #000; } .page-Season_Seven.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #3E3E3E; color: #FFF; }

.page-Season_Eight .pi-theme-season .pi-title { background: #000; color: #FFF; } .page-Season_Eight.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #BEBEBE; color: #000; } .page-Season_Eight.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #3E3E3E; color: #FFF; }

.page-Dexter_New_Blood .pi-theme-season .pi-title { background: #C66B3D; color: #FFF; } .page-Dexter_New_Blood.theme-fandomdesktop-light .pi-theme-season .pi-header { background: #DDA488; color: #000; } .page-Dexter_New_Blood.theme-fandomdesktop-dark .pi-theme-season .pi-header { background: #6b4a39; color: #FFF; }