MediaWiki:Themes.css

/* Please be careful of what is changed here. This code is loaded into Commons and acts as the styling for all infoboxes. If you are not familiar with Portable Infobox syntax, please do not edit. Please do not edit without consulting @Original Authority! Author: @Original Authority @UltimateSupreme Last Updated: 06/07/2017 dd/mm/yyyy



/* General styling that applies to all infoboxes */

.portable-infobox .pi-horizontal-group .pi-data-label { text-align:center; }

.portable-infobox .pi-secondary-font { font-size: 12px; text-align: left; }

.pi-image img { height: auto; width: 268px; } .pi-title { text-align: center; font-size: 18px; }

.portable-infobox { background: black; }

.portable-infobox h2 { left: 0 !important; }

.portable-infobox .pi-group { border: 0; } /* Styling for character infoboxes; please use the variable "tvd" for TVD-related characters. The general theme for that is "darkred".

Please use "to" for The Originals characters; the general theme is "#600063"



.pi-theme-tvd .pi-header, .pi-theme-tvd .pi-title{ background-image: linear-gradient(left, darkred, black, darkred); background-image: -o-linear-gradient(left, darkred, black, darkred); background-image: -moz-linear-gradient(left, darkred, black, darkred); background-image: -webkit-linear-gradient(left, darkred, black, darkred); background-image: -ms-linear-gradient(left, darkred, black, darkred); background-image: -khtml-linear-gradient(left, darkred, black, darkred); background-color: darkred; }

.pi-theme-tvd .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid #d40000; }

.pi-theme-tvd .pi-item:not(section) { border: 1px solid #d40000; border-bottom: 0; } .pi-theme-tvd section.pi-item:last-child { border-bottom: 1px solid #d40000; }

.pi-theme-tvd .pi-horizontal-group { border:1px solid #d40000; border-bottom: none; border-top: none; }

/* Originals infobox - purple */ .pi-theme-to .pi-header, .pi-theme-to .pi-title { background-image: linear-gradient(left, #600063, black, #600063); background-image: -o-linear-gradient(left, #600063, black, #600063); background-image: -moz-linear-gradient(left, #600063, black, #600063); background-image: -webkit-linear-gradient(left, #600063, black, #600063); background-image: -ms-linear-gradient(left, #600063, black, #600063); background-image: -khtml-linear-gradient(left, #600063, black, #600063); background-color: #3b003d; } .pi-theme-to .pi-item:not(section) { border: 1px solid #7d00d1; border-bottom: 0; } .pi-theme-to section.pi-item:last-child { border-bottom: 1px solid #7d00d1; }

.pi-theme-to .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid #600063; }

.pi-theme-to .pi-horizontal-group { border:1px solid #600063; border-bottom: none; border-top: none; } /* End customizeation. */

/* Start Customization for Episodes */

.pi-theme-episode { border: 1px solid #ae0000; border-radius: 10px; padding: 10px; width: 297px; text-align: left; margin: 0 0 1em 1em; }

.pi-theme-episode .pi-header, .pi-theme-episode .pi-title { background: #6b0000 !important; }

.pi-theme-episode .pi-header { text-align: center; font-size: 15px; font-weight: normal; }

.pi-theme-episode .pi-header a { font-weight: normal; } .pi-theme-episode .pi-title a, .pi-header a { color: white; font-size: 95%; }

.pi-theme-episode .pi-title { padding: 0; }

.pi-theme-episode .pi-title a { font-weight: bold; }

.pi-data:not(:last-of-type) { border: 0; }

.pi-theme-episode { background: inherit; background: -webkit-linear-gradient(left, black, darkred 200%, black); background: -o-linear-gradient(left, black, darkred 200%, black); background: -moz-linear-gradient(eft, black, darkred 200%, black); background: linear-gradient(left, black, darkred 200%, black); }

.pi-theme-episode section.pi-item:last-child { border-bottom: 0 !important; }

.pi-theme-episode .pi-border-color { border: transparent; }

.pi-theme-episode > div:nth-of-type(1) div, .episode> div:nth-of-type(2) div { margin-left: auto; margin-right: auto; font-style: italic; }

.pi-theme-episode .pi-horizontal-group .pi-horizontal-group-item { text-align:center; }

/* The Originals Episode */

.pi-theme-toepisode { border: 1px solid #8d00ae; border-radius: 10px; padding: 10px; width: 310px; text-align: left; margin: 0 0 1em 1em; } .pi-theme-toepisode .pi-header, .pi-theme-toepisode .pi-title { background: #510061; } .pi-theme-toepisode .pi-title a { color: white; font-size: 95%; } .pi-theme-toepisode .pi-header { font-size: 15px; color: white; text-align: center; font-weight: normal; } .pi-theme-toepisode .pi-title { padding: 0; }

.pi-theme-toepisode .pi-header a { font-weight: normal; }

.pi-data:not(:last-of-type) { border: 0; } .pi-theme-toepisode { background: inherit; background: -webkit-linear-gradient(left, black, #3b0047 200%, black); background: -o-linear-gradient(left, black, #3b0047 200%, black); background: -moz-linear-gradient(eft, black, #3b0047 200%, black); background: linear-gradient(eft, black, #3b0047 200%, black); } .pi-theme-toepisode section.pi-item:last-child { border-bottom: 0; } .pi-theme-toepisode .pi-border-color { border: transparent; } .pi-theme-toepisode > div:nth-of-type(1) div, .toepisode> div:nth-of-type(2) div { text-align: center; margin-left: auto; margin-right: auto; font-style: italic; } .pi-theme-toepisode .pi-horizontal-group .pi-horizontal-group-item { text-align:center; }

.pi-theme-toepisode section.pi-item:last-child { border-bottom: 0 !important; }

/* TVD Relationship template */

.pi-theme-relationship .portable-infobox { width:252px; margin:0 0 .5em 1em; line-height: 1.5; } .pi-theme-relationship .pi-data-label { margin: auto; }

.pi-theme-relationship .pi-header { text-align: center !important; font-size: smaller; background: inherit; background: -webkit-linear-gradient(left, black, #f20909, black); background: -o-linear-gradient(left, black, #f20909, black); background: -moz-linear-gradient(left, black, #f20909, black); background: linear-gradient(left, black, #f20909, black); }

.pi-theme-relationship .pi-title { height:25px; background: inherit; background: -webkit-linear-gradient(left, #f20909, black, #f20909); background: -o-linear-gradient(left, #f20909, black, #f20909); background: -moz-linear-gradient(left, #f20909, black, #f20909); background: linear-gradient(left, #f20909, black, #f20909); font-size: larger; font-weight: bold; }

.pi-theme-relationship .pi-item:not(section) { /* Red border */ border: 1px solid #f20909; border-bottom: 0;

}

.pi-theme-relationship section.pi-item:last-child { border-bottom: 1px solid #f20909 !important; }

/* Adding TO Relationship Infobox */ .pi-theme-torelationship .portable-infobox { width:252px; margin:0 0 .5em 1em; line-height: 1.5; } .pi-theme-torelationship .pi-data-label { margin: auto; }

.pi-theme-torelationship .pi-header { text-align: center !important; font-size: smaller; background: inherit; background: -webkit-linear-gradient(left, black, #510061, black); background: -o-linear-gradient(left, black, #510061, black); background: -moz-linear-gradient(left, black, #510061, black); background: linear-gradient(left, black, #510061, black); }

.pi-theme-torelationship .pi-title { height:25px; background: inherit; background: -webkit-linear-gradient(left, #510061, black, #510061); background: -o-linear-gradient(left, #510061, black, #510061); background: -moz-linear-gradient(left, #510061, black, #510061); background: linear-gradient(left, #510061, black, #510061); font-size: larger; font-weight: bold; }

.pi-theme-torelationship .pi-item:not(section) { /* Red border */ border: 1px solid #510061; border-bottom: 0;

} .pi-theme-torelationship section.pi-item:last-child { border-bottom: 1px solid #510061 !important; }

/* Novel infoboxes */

.pi-theme-novel .pi-title { background-image: linear-gradient(left, #510094, black, #510094); background-image: -o-linear-gradient(left, #510094, black, #510094); background-image: -moz-linear-gradient(left, #510094, black, #510094); background-image: -webkit-linear-gradient(left, #510094, black, #510094); background-image: -ms-linear-gradient(left, #510094, black, #510094); background-image: -khtml-linear-gradient(left, #510094, black, #510094); background-color: #510094; } .pi-theme-novel .pi-header { background-image: linear-gradient(left, black, #510094, black); background-image: -o-linear-gradient(left, black, #510094, black); background-image: -moz-linear-gradient(left, black, #510094, black); background-image: -webkit-linear-gradient(left, black, #510094, black); background-image: -ms-linear-gradient(left, black, #510094, black); background-image: -khtml-linear-gradient(left, black, #510094. black); background-color: #510094; } .pi-theme-novel .pi-item:not(section) { border: 1px solid #510094; border-bottom: 0; } .pi-theme-novel section.pi-item:last-child { border-bottom: 1px solid #510094 !important; }

/* Actor infoboxes */ aside.pi-theme-actor { background: linear-gradient(to right, black, #315700, black); border: 1px solid white; border-radius: 10px; padding: 0 6px; width: 250px; } .pi-theme-actor .pi-data-value { font-size: 10px; text-align: right; } .pi-theme-actor .pi-data-label { font-size: 10px; } .pi-theme-actor .pi-title { background: linear-gradient(to right, black, #315700, black); }

.pi-theme-actor .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid white; }

.pi-theme-actor .pi-image img, .pi-theme-season .pi-image img { width:250px !important; }

/* crew infobox */

/* Actor infoboxes */ aside.pi-theme-crew { background: linear-gradient(to right, black, #6b080b, black); border: 1px solid white; border-radius: 10px; padding: 0 6px; width: 250px; } .pi-theme-crew .pi-data-value { font-size: 10px; text-align: right; } .pi-theme-crew .pi-data-label { font-size: 10px; } .pi-theme-crew .pi-title { background: linear-gradient(to right, black, #6b080b, black); }

.pi-theme-crew .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid white; }

/* Location Infobox */ .pi-theme-location .pi-item:not(section) { border: 1px solid white; border-bottom: 0 !important; } .pi-theme-location .pi-item:last-child { border-bottom: 1px solid white !important; } .pi-theme-location .pi-header:first-of-type { border-top: 0 !important; } .pi-theme-location .pi-title { background: linear-gradient(to right, #6E6E6E, black, #6E6E6E); border-bottom: 0 !important; }

.pi-theme-location .pi-header { background: linear-gradient(to right, black, #6E6E6E, black); border-bottom: 1px solid white !important; }

/* Group Infobox */ .pi-theme-group { border: 1px solid #31d400; } .pi-theme-group .pi-title { background: linear-gradient(to right, black, darkgreen, black); border-bottom: 0 !important; } .pi-theme-group .pi-item:not(.pi-title) { border-top: 1px solid #31d400; }

.pi-theme-group .pi-header { background: linear-gradient(to right, black, darkgreen, black); border-top: 0 !important; }

.pi-theme-group .pi-item:last-child { border-bottom: 0 !important; }

/* Book infobox */ .pi-theme-book { background: linear-gradient(to right, black, #200057, black); border-radius: 10px; border: 1px solid #5e00ff; padding: 8px; } .pi-theme-book .pi-title, .pi-theme-book .pi-header { background: #2b0075; padding: 3px; text-align: center; } .pi-theme-book section.pi-item:last-child { border-bottom: 0 !important; }

.pi-theme-book .pi-title { border-bottom: 0; } /* Species Infobox */

.pi-theme-species { border: 1px solid white; } .pi-theme-species .pi-title { background: linear-gradient(to right, black, #734500, black); border-bottom: 0 !important; } .pi-theme-species .pi-item:not(section) { border: 1px solid white; border-bottom: 0; }

.pi-theme-species section.pi-item:last-child { border-bottom: 1px solid white !important; }

.pi-theme-species .pi-header { background: linear-gradient(to right, black, #734500, black); border-top: 0 !important; }

/* novel */ .pi-theme-novel-species { border: 1px solid white; } .pi-theme-novel-species .pi-title { background: #1b003d; border-bottom: 0 !important; } .pi-theme-novel-species .pi-item:not(section) { border: 1px solid white; border-bottom: 0; }

.pi-theme-novel-species section.pi-item:last-child { border-bottom: 1px solid white !important; }

.pi-theme-novel-species .pi-header { background:#2c0061; border-top: 0 !important; } /* family */ .pi-theme-family .pi-item:not(section) { border: 1px solid white; border-bottom: 0; } .pi-theme-family .pi-item:last-child { border-bottom: 1px solid white !important; } .pi-theme-family .pi-header:first-of-type { border-top: 0 !important; } .pi-theme-family .pi-title { background: linear-gradient(to right, black, #004657, black); border-bottom: 0 !important; } .pi-theme-family .pi-header { background: linear-gradient(to right, black, #004657, black); border-bottom: 1px solid white !important; } .pi-theme-family { border: 1px solid white; }

/* ADT Episode */ .pi-theme-adt-episode { border: 1px solid #291a1d; border-radius: 10px; padding: 10px; width: 297px; text-align: left; margin: 0 0 1em 1em; }

.pi-theme-adt-episode .pi-horizontal-group .pi-data-label { text-align: center !important; }

.pi-theme-adt-episode .pi-header, .pi-theme-episode .pi-title { background: #66574e; }

.pi-theme-adt-episode .pi-header { text-align: center; font-size: 15px; font-weight: normal; }

.pi-theme-adt-episode .pi-header a { font-weight: normal; } .pi-theme-adt-episode .pi-title a, .pi-header a { color: white; font-size: 95%; }

.pi-theme-adt-episode .pi-title { padding: 0; background: #66574E; }

.pi-theme-adt-tepisode .pi-title a { font-weight: bold; }

.pi-theme-adt-episode { background: linear-gradient(to right, black, #291a1d); }

.pi-theme-atd-episode section.pi-item:last-child { border-bottom: 0 !important; }

.pi-theme-atd-episode .pi-border-color { border: transparent; }

.pi-theme-atd-episode > div:nth-of-type(1) div, .episode> div:nth-of-type(2) div { margin-left: auto; margin-right: auto; font-style: italic; }

.pi-theme-atd-episode .pi-horizontal-group .pi-horizontal-group-item { text-align:center; }

/* season infobox */

.pi-theme-season .pi-horizontal-group .pi-data-label { text-align: center !important; }

.pi-theme-season .pi-horizontal-group .pi-data-value { text-align: center !important; }

aside.pi-theme-season { background: black; border: 1px solid #ae4600; border-radius: 10px; padding: 0 6px; width: 250px; } .pi-theme-season .pi-data-value { font-size: 10px; text-align: right ; } .pi-theme-season .pi-data-label { font-size: 10px; }

.pi-theme-season .pi-title { background: linear-gradient(to right, black, #ae4600, black); margin: 6px; } .pi-theme-season .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid #ae4600; }

.pi-theme-season .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 0 !important; }

.pi-theme-season .pi-title, .pi-theme-season .pi-header { background: linear-gradient(to right, black, #ae4600, black); padding: 0; text-align: center; }

/* TO Infobox Season */ .pi-theme-to-infobox-season .pi-horizontal-group .pi-data-label { text-align: center !important; }

.pi-theme-to-infobox-season img { max-width:250px; }

.pi-theme-to-infobox-season .pi-horizontal-group .pi-data-value { text-align: center !important; }

aside.pi-theme-to-infobox-season { background: black; border: 1px solid #e3ae00; border-radius: 10px; padding: 0 6px; width: 250px; } .pi-theme-to-infobox-season .pi-data-value { font-size: 10px; text-align: right ; } .pi-theme-to-infobox-season .pi-data-label { font-size: 10px; }

.pi-theme-to-infobox-season .pi-title { background: linear-gradient(to right, black, #e3ae00, black); margin: 6px; } .pi-theme-to-infobox-season .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid #e3ae00; }

.pi-theme-to-infobox-season .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 0 !important; }

.pi-theme-to-infobox-season .pi-title, .pi-theme-to-infobox-season .pi-header { background: linear-gradient(to right, black, #e3ae00, black); padding: 0; text-align: center; }