MediaWiki:Wikia.css

/* This is going to be a ramshackle attempt at getting some sort of CSS down for this stupid project. This unfortunately means I'm stuck searching other wikis and places like StackOverlfow for help. May the Primis save me. */

/* 'Borrowed' from Forgotten Realms wiki. Mad respect to the madmen and women that worked on this. */

/** Moviesign: Yearbox styles **/ .yearbox { text-align:        center; } .yearbox td { padding:           0 2px 0 2px; } .yearbox td:only-child { font-size:         16px; } /** Moviesign: Bordered nav box **/ /* First, the general style of a border box */ .border-box { margin:                  0 auto; } .border-box-contentarea { padding:               3px 2px 3px 2px; /* so content doesn't touch the border */ } .border-box-title, .border-box-subtitle { font-family: Georgia, serif; font-weight: bold; text-align: center; } .border-box-title { font-size:             larger; } .border-box-subtitle { font-size:             inherit; /* Inherits from wiki page */ } .border-box-content { font-size:             smaller; }   /* Then the styles for a specific design of border box */ .border-box-runes { border:                60px solid transparent; color:                 #000; border-image:          url(https://vignette.wikia.nocookie.net/forgottenrealms/images/6/6f/Border-FRW-gray-gold.png/revision/latest); -webkit-border-image:  url(https://vignette.wikia.nocookie.net/forgottenrealms/images/6/6f/Border-FRW-gray-gold.png/revision/latest);  /* Safari 3.1-5 */ -o-border-image:       url(https://vignette.wikia.nocookie.net/forgottenrealms/images/6/6f/Border-FRW-gray-gold.png/revision/latest);  /* Opera 11-12.1 */ -moz-border-image:     url(https://vignette.wikia.nocookie.net/forgottenrealms/images/6/6f/Border-FRW-gray-gold.png/revision/latest);  /* Mozilla */ border-width:          45px 30px 30px 30px; border-image-slice:    70 84 84 84; border-image-width:    45px 30px 30px 30px; border-image-outset:   0; border-image-repeat:   round; } .border-box-contentarea-runes { background-color:      #829cab; } .border-box-title-runes { background-color:      inherit; /* inherits from contentarea, but can be changed here */ } .border-box-subtitle-runes { background-color:      inherit; /* inherits from contentarea, but can be changed here */ } .border-box-content-runes { background-color:      inherit; /* inherits from contentarea, but can be changed here */ }

/* Cut out the 'styles for another border box

.border-box-contentarea-logo { background-color:      inherit; } .border-box-title-logo { background-color:      inherit; /* inherits from contentarea, but can be changed here */ } .border-box-subtitle-logo { background-color:      inherit; /* inherits from contentarea, but can be changed here */ } .border-box-content-logo { background-color:      inherit; /* inherits from contentarea, but can be changed here */ font-size:             8pt; line-height:           1.1em; } .border-box-content-logo ul { margin:            0.2em 0 0.2em 3.5em; } .border-box-content-logo li { margin:            0; }

/* Moviesign: new styles for stuff inside a tabber. */ table.tabbox { background-color: #FFFFFF; border:          none; color:           #000000; width:           100%; font-size:       100%; vertical-align:  top; } table.tabbox > tbody > tr { vertical-align: top; } table.tabbox td.title, table.tabbox td.subtitle, table.tabbox td.subsubtitle { background-color: #829cab; font-weight:     bold; line-height:     1.2em; padding:         0.25em 0.33em 0.33em; text-align:      center !important; } table.tabbox td.title      {font-size: larger;} table.tabbox td.subtitle   {background-color: #829cab;} table.tabbox td.subsubtitle {background-color: #DDDDDD;} table.tabbox td.categories {text-align: right;} table.tabbox > tbody > tr > td:first-child { text-align:    left; white-space:   nowrap; vertical-align: top; } table.tabbox > tbody > tr > td:last-child { text-align: left; white-space: normal; } .portable-infobox .tabberlive .tabbertab, .infobox2 .tabberlive .tabbertab { padding: 1px 0; margin:  0 0 1px 0; } .portable-infobox .tabberlive .subtitle { padding:   0.3em 0.3em 0.2em 0.3em; } .portable-infobox .tabbox { background-color:  inherit; color:             inherit; } .infobox2 .tabberlive .tabbertab { border-width: 0; } .tabberlive ul.tabbernav { padding: 3px 0 0 0; line-height: 20px; } .portable-infobox ul.tabbernav li a { padding:   3px .25em; /* was 3px .5em from FANDOM */ } .portable-infobox ul.tabbernav li a:hover { border-color:      #333; background-color:  #AAE; } .tabbertab > p { padding: 0; margin: 0; } /* Moviesign: Styles for panels inside infoboxes. This makes it resemble our current tabs. */ [class*="pi-theme-"]   .pi-panel {   padding:            1px 2px 0 2px; } [class*="pi-theme-"]   .pi-section-content {   border:             1px solid #ccc; } [class*="pi-theme-"]   .pi-section-content.pi-section-active {   padding:            1px 0; margin:            0 0 1px 0; } [class*="pi-theme-"]   .pi-section-navigation {   border:             0; line-height:       20px; font:              bold 12px Verdana,sans-serif; padding-top:       3px; position:          relative; top:               1px; } [class*="pi-theme-"]   .pi-section-tab.pi-section-active {   box-shadow:         none; background-color:  #FFF; border-bottom:     1px solid #FFF; } [class*="pi-theme-"]   .pi-section-tab {   background-color:   #F2F7FF; border:            1px solid #CCC; margin:            0 2px; } [class*="pi-theme-"]   .pi-section-label {   color:              #448; text-transform:    none; height:            24px; margin:            0 5px; } [class*="pi-theme-"]   .pi-section-tab:hover.pi-section-active {   color:              #000; border-color:      #333; border-bottom-color:#FFF; } [class*="pi-theme-"]   .pi-section-tab:hover {   background-color:   #AAE; border-color:      #333; border-bottom-color:#CCC; } /* Moviesign: Reducing the height of rows in some wikitables */ .wikitable p { margin: 0; } /* Moviesign: new styles for percentage table */ table.percentagetable { background-color: #FFFFFF; border:          none; color:           #000000; width:           80%; font-size:       100%; line-height:     1em; vertical-align:  top; } table.percentagetable > tbody > tr > td:first-child { text-align:      left; white-space:     nowrap; vertical-align:  top; } table.percentagetable > tbody > tr > td:last-child { text-align:      right; white-space:     normal; } /* Moviesign: new styles for spell table */ table.spelltable { background-color: #f0f0f0; border:          none; color:           #000000; width:           80%; font-size:       100%; line-height:     1em; vertical-align:  top; } table.spelltable > tbody > tr > td:first-child { text-align:      left; white-space:     nowrap; vertical-align:  top; } table.spelltable > tbody > tr > td:last-child { text-align:      right; white-space:     normal; font-weight:     bold; }

/* Moviesign: new styles for split table */ table.splittable { background-color: inherit; border:          none; color:           #000000; width:           100%; font-size:       100%; line-height:     1.2em; vertical-align:  top; } table.splittable > tbody > tr > td:first-child { text-align:      left; white-space:     nowrap; vertical-align:  text-top; } table.splittable > tbody > tr > td:last-child { text-align:      left; white-space:     normal; font-weight:     normal; } .alignment-grid { float:             left; text-align:        center; font-size:         88%; line-height:       22px; padding:           1px; border:            1px solid #000000; margin-bottom:     2px; } .alignment-grid td { width:             33%; } .alignment-grid caption { line-height:       normal; padding:           1px; }

/***********************************************************/ /* Moviesign: Portable Infobox styles                     */ /*  Default style, chosen by theme="frwiki"               */ /*  Custom changes for individual infoboxes need to be    */ /*  selected by theme-source="variant" where variant is a */ /*  passed-in parameter. Each new variant will need to be */ /*  added to the list below, and then add the custom CSS  */ /*  at the bottom. */ /***********************************************************/       /* This is a list of variants */ .pi-theme-frwiki,    /* Forgotten Realms Portable Infobox */ .pi-theme-rlc,       /* Real-life company infobox */ .pi-theme-plant,     /* Vegetation/Plant infobox */ .pi-theme-fungus,    /* Vegetation/Fungus infobox */ .pi-theme-road,      /* Location/Road infobox */ .pi-theme-mountain,  /* Location/Mountain infobox */ .pi-theme-water,     /* Location/Body of water infobox */ .pi-theme-at-will,   /* 4e At-will Spell */ .pi-theme-daily,     /* 4e Daily Spell */ .pi-theme-encounter, /* 4e Encounter Spell */ .pi-theme-ritual,    /* 4e Ritual */ .pi-theme-aberration, /* 4e Creature origin */ .pi-theme-elemental, /* 4e Creature origin */ .pi-theme-fey,       /* 4e Creature origin */ .pi-theme-immortal,  /* 4e Creature origin */ .pi-theme-shadow,    /* 4e Creature origin */ .pi-theme-ship,      /* Ship infobox */ .pi-theme-space,     /* Celestial body */ .pi-theme-book       /* In-universe book */ {   border:             1px solid #829CAB; color:             #000000; font-size:         88%; vertical-align:    top; } .pi-background           /* overall background */ {   background-color:   #191919; } .pi-theme-frwiki .pi-image /* alignment of image box */ { } .pi-theme-frwiki .pi-image-thumbnail { /*   max-width:          123px; Size of image, typically use the same width as infobox, minus borders*/ /*   max-height:         123px; (if needed) */ /*   width:              auto;  (if needed) */ /*   height:             auto;  Preserves the image ratio */ } [class*="pi-theme-"]   .pi-item-spacing  /* padding between each element */ {   padding: 5px 3px 5px 3px; } [class*="pi-theme-"]   .pi-title  /* padding, margin, font... */ {   text-align:         center; line-height:       1.2em; font-weight:       bold; font-size:         16px; padding:           2px; background-color:  #829CAB; border-style:      solid; border-width:      2px 2px 0px 2px; border-color:      #191919; } [class*="pi-theme-"]   .pi-caption  /* font, color */ {   text-align:         center; font-style:        italic; color:             inherit; background-color:  #191919; line-height:       1.2em; } [class*="pi-theme-"]   .pi-group  /* group border */ {   border:             none; } [class*="pi-theme-"]   .pi-border-color  /* for pi-group, data */ {   border-color:       #8aa2a9; } [class*="pi-theme-"]   .pi-header  /* header, in or out of group */ {   text-align:         center; padding:           5px 3px 3px 3px; border-style:      solid; border-width:      2px; border-color:      #191919; } [class*="pi-theme-"]   .pi-secondary-font  /* header, label font */ {   font-size:          12px; font-weight:       bold; line-height:       1.2em; } [class*="pi-theme-"]   .pi-secondary-background  /* header bg */ {   background-color:   #8aa2a9; } [class*="pi-theme-"]   .pi-data  /* div around label and value */ {   background-color:   inherit; /* Inherit the color of the whole infobox */ line-height:       1.4em; } [class*="pi-theme-"]   .pi-data:not(:last-of-type)  /* line between data rows */ {   border-bottom-style:none; border-bottom-width:0; } [class*="pi-theme-"]   .pi-data-label  /* label field */ {   text-align:         left; white-space:       normal; vertical-align:    top; line-height:       inherit; -webkit-flex:      1 1 190px; /* Safari 6.1+ */ -ms-flex:          1 1 190px; /* IE 10 */ flex:              1 1 190px; } [class*="pi-theme-"]   .pi-data .pi-secondary-font  /* overriding font for label */ {   font-weight:        normal; font-size:         12px; } [class*="pi-theme-"]   .pi-data-value  /* value field */ {   vertical-align:     top; white-space:       normal; line-height:       inherit; width:             100%;  /* This allows tabber to be full width. */ } [class*="pi-theme-"]   .pi-data-value:not(:first-child)  /* padding between data columns */ {   padding-left:       0; margin-left:       4px; -webkit-flex:      0 1 auto; /* Safari 6.1+ */ -ms-flex:          0 1 auto; /* IE 10 */ flex:              0 1 auto; } [class*="pi-theme-"]   .pi-font  /* value font */ {   text-align:         left; font-weight:       normal; font-size:         12px; } [class*="pi-theme-"]   .pi-horizontal-group  /* table style */ {   background-color:   inherit; } [class*="pi-theme-"]   .pi-horizontal-group-item  /* cell spacing */ {   padding:            1px 2px 0px 2px; } [class*="pi-theme-"]   .pi-horizontal-group .pi-horizontal-group-item:not(:first-child)  /* override */ {   padding-left:       2px; } /* Removing this and replacing it with (see .pi-navigation below) This was an override for the Source box at the bottom of the infobox .pi-theme-frwiki .pi-horizontal-group td.pi-horizontal-group-item:only-child, .pi-theme-rlc   .pi-horizontal-group td.pi-horizontal-group-item:only-child { Original comment: This is a kludge that I might have to undo later. This should right-align only if a single data item is used in a horizontal group. The only alternative I see right now is defining a theme-source and using a dummy parameter, but I'm not sure you can make it invisible. text-align:        right; } [class*="pi-theme-"]   .pi-horizontal-group .pi-data-label  /* line height */ {   line-height:        1.2em; } [class*="pi-theme-"]   .pi-horizontal-group-item  /* table cells */ {   text-align:         center; } [class*="pi-theme-"]   .pi-horizontal-group-item .tabbernav  /* tabs in a tabber */ {   text-align:         left; } [class*="pi-theme-"]   .pi-horizontal-group-item .tabbertab > p  /* headings in a tab */ {   background-color:   #191919; } [class*="pi-theme-"]   .pi-navigation  /* fields for links */ {   text-align:         right; font-weight:       normal; background-color:  #191919; padding:           3px 0 3px 0; margin:            0 3px 0 3px; } [class*="pi-theme-"]   .pi-image + .pi-navigation /* navigation tags immediately after an image */ {   border:         none; margin:        0; padding:       0; text-align:    center; font-weight:   bold; font-style:    italic; } [class*="pi-theme-"]   .pi-image-collection + .pi-navigation /* or after an image collection (e.g., tabber) */ {   border:         none; margin:        0; padding:       0; text-align:    center; font-weight:   normal; font-style:    italic; } [class*="pi-theme-"]   .pi-group + .pi-navigation  /* navigation tags at bottom of infobox */ {   border-top:         1px solid #808080; } .pi-theme-frwiki .tabberlive .subtitle { background-color:  #191919; } .pi-theme-frwiki .pi-item /* almost everything gets this, so be careful */ { }