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: 08/29/2020 mm/dd/yyyy /* General styling that applies to all infoboxes */ .portable-infobox .pi-data[data-source="Season"] { justify-content: center; } .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: 297px; } .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 "red". Please use "to" for The Originals characters; the general theme is "purple" Please use "legacies" for Legacies characters; the general theme is "green" /* Start Customization for The Vampire Diaries character infoboxes - red */ .pi-theme-tvd .pi-header, .pi-theme-tvd .pi-title{ background-image: linear-gradient(left, red, darkred, red); background-image: -o-linear-gradient(left, red, darkred, red); background-image: -moz-linear-gradient(left, red, darkred, red); background-image: -webkit-linear-gradient(left, red, darkred, red); background-image: -ms-linear-gradient(left, red, darkred, red); background-image: -khtml-linear-gradient(left, red, darkred, red); background-color: red; } .pi-theme-tvd .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid red; } .pi-theme-tvd .pi-item:not(section) { border: 1px solid red; border-bottom: 0; } .pi-theme-tvd section.pi-item:last-child { border-bottom: 1px solid red; } .pi-theme-tvd .pi-horizontal-group { border:1px solid red; border-bottom: none; border-top: none; } /* End */ /* Start Customization for The Originals character infoboxes - #960aa6 */ .pi-theme-to .pi-header, .pi-theme-to .pi-title { background-image: linear-gradient(left, purple, #600063, purple); background-image: -o-linear-gradient(left, purple, #600063, purple); background-image: -moz-linear-gradient(left, purple, #600063, purple); background-image: -webkit-linear-gradient(left, purple, #600063, purple); background-image: -ms-linear-gradient(left, purple, #600063, purple); background-image: -khtml-linear-gradient(left, purple, #600063, purple); background-color: purple; } .pi-theme-to .pi-item:not(section) { border: 1px solid purple; border-bottom: 0; } .pi-theme-to section.pi-item:last-child { border-bottom: 1px solid purple; } .pi-theme-to .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid purple; } .pi-theme-to .pi-horizontal-group { border:1px solid purple; border-bottom: none; border-top: none; } /* End */ /* Start Customization for Legacies character infoboxes - #054B14 */ .pi-theme-legacies .pi-header, .pi-theme-legacies .pi-title{ background-image: linear-gradient(left, green, #054b14, green); background-image: -o-linear-gradient(left, green, #054b14, green); background-image: -moz-linear-gradient(left, green, #054b14, green); background-image: -webkit-linear-gradient(left, green, #054b14, green); background-image: -ms-linear-gradient(left, green, #054b14, green); background-image: -khtml-linear-gradient(left, green, #054b14, green); background-color: green; } .pi-theme-legacies .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid green; } .pi-theme-legacies .pi-item:not(section) { border: 1px solid green; border-bottom: 0; } .pi-theme-legacies section.pi-item:last-child { border-bottom: 1px solid green; } .pi-theme-legacies .pi-horizontal-group { border:1px solid green; border-bottom: none; border-top: none; } /* End */ /* Start Customization for 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, red, darkred, red); background: -o-linear-gradient(left, red, darkred, red); background: -moz-linear-gradient(left, red, darkred, red); background: linear-gradient(left, red, darkred, red); } .pi-theme-relationship .pi-title { height:25px; background: inherit; background: -webkit-linear-gradient(left, ); background: -o-linear-gradient(left, red, darkred, red); background: -moz-linear-gradient(left, red, darkred, red); background: linear-gradient(left, red, darkred, red); font-size: larger; font-weight: bold; } .pi-theme-relationship .pi-item:not(section) { /* Red border */ border: 1px solid red; border-bottom: 0; } .pi-theme-relationship section.pi-item:last-child { border-bottom: 1px solid red !important; } /* End */ /* Start Customization for 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, purple, #600063, purple); background: -o-linear-gradient(left, purple, #600063, purple); background: -moz-linear-gradient(left, purple, #600063, purple); background: linear-gradient(left, purple, #600063, purple); } .pi-theme-torelationship .pi-title { height:25px; background: inherit; background: -webkit-linear-gradient(left, purple, #600063, purple); background: -o-linear-gradient(left, purple, #600063, purple); background: -moz-linear-gradient(left, purple, #600063, purple); background: linear-gradient(left, purple, #600063, purple); font-size: larger; font-weight: bold; } .pi-theme-torelationship .pi-item:not(section) { /* purple border */ border: 1px solid purple; border-bottom: 0; } .pi-theme-torelationship section.pi-item:last-child { border-bottom: 1px solid purple !important; } /* End */ /* Start Customization for LGC Relationship Infobox */ .pi-theme-lgcrelationship .portable-infobox { width:252px; margin:0 0 .5em 1em; line-height: 1.5; } .pi-theme-lgcrelationship .pi-data-label { margin: auto; } .pi-theme-lgcrelationship .pi-header { text-align: center !important; font-size: smaller; background: inherit; background: -webkit-linear-gradient(left, green, #054b14, green); background: -o-linear-gradient(left, green, #054b14, green); background: -moz-linear-gradient(left, green, #054b14, green); background: linear-gradient(left, green, #054b14, green); } .pi-theme-lgcrelationship .pi-title { height:25px; background: inherit; background: -webkit-linear-gradient(left, green, #054b14, green); background: -o-linear-gradient(left, green, #054b14, green); background: -moz-linear-gradient(left, green, #054b14, green); background: linear-gradient(left, green, #054b14, green); font-size: larger; font-weight: bold; } .pi-theme-lgcrelationship .pi-item:not(section) { /* Red border */ border: 1px solid green; border-bottom: 0; } .pi-theme-lgcrelationship section.pi-item:last-child { border-bottom: 1px solid green !important; } /* End */ /* Start Customization for 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, #2b2b2b, #adadad, #2b2b2b); border-bottom: 0 !important; } .pi-theme-location .pi-header { background: linear-gradient(to right, #2b2b2b, #adadad, #2b2b2b); border-bottom: 1px solid white !important; } /* Group Infobox */ .pi-theme-group { border: 1px solid green; } .pi-theme-group .pi-title { background: linear-gradient(to right, green, #054b14, green); border-bottom: 0 !important; } .pi-theme-group .pi-item:not(.pi-title) { border-top: 1px solid #green; } .pi-theme-group .pi-header { background: linear-gradient(to right, green, #054b14, green); border-top: 0 !important; } .pi-theme-group .pi-item:last-child { border-bottom: 0 !important; } /* End */ /* Start Customization for Species Infobox */ .pi-theme-species { border: 1px solid white; } .pi-theme-species .pi-title { background: linear-gradient(to right, #2b2b2b, #adadad, #2b2b2b); 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, #2b2b2b, #adadad, #2b2b2b); border-top: 0 !important; } /* End */ /* family */ .pi-theme-family .pi-item:not(section) { border: 1px solid black; border-bottom: 0; } .pi-theme-family .pi-item:last-child { border-bottom: 1px solid black !important; } .pi-theme-family .pi-header:first-of-type { border-top: 0 !important; } .pi-theme-family .pi-title { background: linear-gradient(to right, teal, #004657, teal); border-bottom: 0 !important; } .pi-theme-family .pi-header { background: linear-gradient(to right, teal, #004657, teal); border-bottom: 1px solid black !important; } .pi-theme-family { border: 1px solid black; } /* End */

/* Start Customization for The Vampire Diaries 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 red; 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, red, darkred, red); margin: 6px; } .pi-theme-season .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid red; } .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, red, darkred, red); padding: 0; text-align: center; } /* End */ /* Start Customization for The Originals Season Infobox */ .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 purple; 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, purple, #600063, purple); margin: 6px; } .pi-theme-to-infobox-season .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid purple; } .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, purple, #600063, purple); padding: 0; text-align: center; } /* End */ /* Start Customization for Legacies */ .pi-theme-legacies .pi-header, .pi-theme-legacies2 .pi-title{ background-image: -webkit-linear-gradient(left, green, #054b14, green); } .pi-theme-legacies .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 1px solid green; } .pi-theme-legacies .pi-item:not(section) { border: 1px solid green; border-bottom: 0; } .pi-theme-legacies section.pi-item:last-child { border-bottom: 1px solid green; } .pi-theme-legacies .pi-horizontal-group { border:1px solid green; border-bottom: none; border-top: none; } /* End */ /* Start Customization for Legacies Infobox Season */ .pi-theme-legacies-infobox-season .pi-horizontal-group .pi-data-label { text-align: center !important; } .pi-theme-legacies-infobox-season .pi-horizontal-group .pi-data-value { text-align: center !important; } aside.pi-theme-legacies-infobox-season { background: black; border: 1px solid green; border-radius: 10px; padding: 0 6px; width: 250px; } .pi-theme-legacies-infobox-season img { max-width:250px; } .pi-theme-legacies-infobox-season .pi-data-value { font-size: 10px; text-align: right ; } .pi-theme-legacies-infobox-season .pi-data-label { font-size: 10px; } .pi-theme-legacies-infobox-season .pi-title { background: linear-gradient(to right, green, #054b14, green); margin: 6px; } .pi-theme-legacies-infobox-season .pi-item:not(.pi-title) { border-bottom: 0; border-top: 1px solid green; } .pi-theme-legacies-infobox-season .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 0 !important; } .pi-theme-legacies-infobox-season .pi-title, .pi-theme-legacies-infobox-season .pi-header { background: linear-gradient(to right, green, #054b14, green); padding: 0; text-align: center; } /* End */