MediaWiki:Sidebars.css

/*

/* ===============================  S I D E B A R S. C S S  is the repository for all styling that affects 2015-era portable infobox code.

At the top is code which GENERALLY affects all infoboxes, and can be recognised easily because it begins with .portable-infobox.

At the bottom are all the various INDIVIDUAL infobox themes. This code starts with .pi-theme-something.

This page dates from 2 Sept 2016, but much of the code on it comes from the last quarter of 2015. ================================= *

/***** Portable Infobox/Sidebar ******/ .portable-infobox { width: 292px; border: 1px solid #666; background-color: #222222; } .theme-fandomdesktop-light .portable-infobox { background-color: var(--theme-border-color); color:#3a3a3a; } .theme-fandomdesktop-light .portable-infobox .pi-data-label, .theme-fandomdesktop-light .portable-infobox .pi-data-value { color:#3A3A3A !important; } /** Make the image the full width, and preserve the ratio. Stretches smaller images, but no way around this yet **/ .pi-image-thumbnail { width:100%; height: auto; } .skin-monobook .pi-background { background-color: #222222; }

/** Center captions and titles **/ .portable-infobox .pi-title { /* background-color: #252525; */ background: #000000 url(https://images.wikia.nocookie.net/memoryalpha/eo/images/f/f7/MA_page_bar.png) repeat-x; /* color: #FFD942; */ color: #FFFFFF; padding:5px; text-align:center !important; font-weight: bold; font-size: larger; line-height: 22px; } .portable-infobox .pi-caption { padding:0; text-align:center !important; font-size: smaller !important; color: inherit; line-height: 130%; font-style: normal; } .portable-infobox .pi-data { border-bottom-style: none; border-bottom-width: 0px; } .portable-infobox .pi-data-value { font-size: smaller; line-height: 110%; } .portable-infobox .pi-data-label { color: white !important; font-size: smaller; flex-basis: 105px; line-height: 110%; } .portable-infobox .pi-item-spacing { padding: 3px 3px; } .portable-infobox .pi-header { font-size: smaller; text-align: center; background-color: #660000; color: white; line-height: 130%; } .portable-infobox .pi-navigation { text-align:center !important; background-color: inherit; font-size: smaller; font-weight: normal; } .portable-infobox.pi-layout-stacked .pi-data-value { text-align:center !important; } .portable-infobox.pi-layout-stacked .pi-data-label { text-align:center !important; font-weight: normal; font-style: italic; } /* Horizontal groups */ .pi-horizontal-group .pi-header { background: #000000 url(https://images.wikia.nocookie.net/memoryalpha/eo/images/f/f7/MA_page_bar.png) repeat-x; color: #FFFFFF; padding:5px; text-align:center !important; font-weight: bold; font-size: larger!important; line-height: 22px; } .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left-style:dotted; border-left-color:#aaa; } /* Potentially useful, if there are ever true unordered lists in sidebars */ .portable-infobox .pi-data-value ul { text-indent:-1em; padding-left:1.5em; padding-top:.25em } /* Getting rid of auto hyphenation, per sulfur */ .portable-infobox .pi-data-value, .portable-infobox .pi-data-label { -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none; }

/* ==========================  T H E M E S   ========================== */

/*** Special sidebar video theming... ***/ /** BLU-RAY **/ .portable-infobox.pi-theme-bd .pi-navigation { text-align:center !important; background-color: royalblue; color: white; font-size: smaller; font-weight: bold; } /** BETAMAX **/ .portable-infobox.pi-theme-bm .pi-navigation { text-align:center !important; background-color: saddlebrown; color: white; font-size: smaller; font-weight: bold; } /** CED **/ .portable-infobox.pi-theme-ced .pi-navigation { text-align:center !important; background-color: indigo; color: white; font-size: smaller; font-weight: bold; } /** DIGITAL RELEASES **/ .portable-infobox.pi-theme-dr .pi-navigation { text-align:center !important; background-color: transparent; color: white; font-size: smaller; font-weight: bold; } /** DVD **/ .portable-infobox.pi-theme-dvd .pi-navigation { text-align:center !important; background-color: silver; color: black; font-size: smaller; font-weight: bold; } /** HD DVD **/ .portable-infobox.pi-theme-hddvd .pi-navigation { text-align:center !important; background-color: darkred; color: white; font-size: smaller; font-weight: bold; } /** LASERDISC **/ .portable-infobox.pi-theme-ld .pi-navigation { text-align:center !important; background-color: khaki; color: black; font-size: smaller; font-weight: bold; } /** VCD **/ .portable-infobox.pi-theme-vcd .pi-navigation { text-align:center !important; background-color: springgreen; color: black; font-size: smaller; font-weight: bold; } /** VHD **/ .portable-infobox.pi-theme-vhd .pi-navigation { text-align:center !important; background-color: orangered; color: white; font-size: smaller; font-weight: bold; } /** VHS / UKVHS / USVHS **/ .portable-infobox.pi-theme-vhs .pi-navigation { text-align:center !important; background-color: black; color: white; font-size: smaller; font-weight: bold; } .portable-infobox.pi-theme-ukvhs .pi-navigation { text-align:center !important; background-color: black; color: white; font-size: smaller; font-weight: bold; } .portable-infobox.pi-theme-usvhs .pi-navigation { text-align:center !important; background-color: black; color: white; font-size: smaller; font-weight: bold; } /** UMD **/ .portable-infobox.pi-theme-umd .pi-navigation { text-align:center !important; background-color: mediumslateblue; color: black; font-size: smaller; font-weight: bold; } /** END VIDEO THEMING **/

/* Episode */ .pi-theme-episode .pi-data-value, .pi-theme-episode .pi-layout-stacked .pi-data-value { padding-left:0; } .pi-theme-episode .larr { float:left; } .pi-theme-episode .rarr { float:right; }

/* Conflict */

.pi-theme-conflict .pi-border-color { border:none; }

.pi-theme-conflict .pi-navigation {

/* This allows infoboxes to remain 292px wide, as is the tradition here at MA, but still use to set the image width at 292px as well. If you DON'T  do this, then any -enabled images will overhang the right edge of the sidebar. Only those infoboxes that use need this code snippet.

If you later want to trim the padding-bottom, just add padding-bottom:0!important.

(Oh, and the !important is necessary.)



padding-left:0!important; padding-right:0!important; }

.conflict-subtitle { font-size:11px; }

.pi-theme-conflict .pi-data-value ul { text-indent:-1em; padding-left:1.5em; padding-top:.25em }

.pi-theme-conflict .pi-horizontal-group { text-align:left; }

.pi-theme-conflict .pi-horizontal-group:not(:first-child) { padding:1px!important; }

.pi-theme-conflict .sb-twoimg { display:inherit; }

.pi-theme-conflict .pi-data-value:not(:first-child) { -ms-flex-preferred-size:280px; -webkit-flex-basis:280px; -moz-flex-basis:280px; flex-basis:280px; padding-left:5px; } .pi-theme-conflict .pi-data-value, .pi-theme-conflict .pi-data-label { line-height:130%!important; font-size:11px!important; }

.pi-theme-conflict .pi-horizontal-group-item.pi-data-value { font-size:13px!important; }

.pi-theme-conflict .pi-item.pi-group { line-height:130%!important; padding:2px; font-size:12px; /* smaller in this case means 12px */ }

.pi-theme-conflict .pi-title { padding:2px; font-size:19px; }

.pi-theme-conflict .pi-horizontal-group .pi-header { font-size:19px!important; padding:1px; }

.pi-theme-conflict dl { margin:1em 0 !important }

/* Starship */ .pi-theme-starship .pi-navigation { padding-left:0!important; padding-right:0!important; }

/* Planet */ .pi-theme-planet.portable-infobox { line-height:150% } .pi-theme-planet .pi-navigation { padding-left:0!important; padding-right:0!important; }

/* Government */ .pi-theme-government .pi-navigation { padding-left:0!important; padding-right:0!important; }

/* Comic */ .pi-theme-comic .pi-navigation { padding-left:0!important; padding-right:0!important; }

/* Novel */ .pi-theme-novel .pi-navigation { padding-left:0!important; padding-right:0!important; }

/* Rank */ .portable-infobox.pi-theme-rank { width: 200px !important; }

.pi-theme-rank .pi-navigation { padding-left:0!important; padding-right:0!important; }

.pi-theme-rank .sb-twoimg { display:inherit; }

/*