MediaWiki:Vector.css

From MansunWiki
Revision as of 00:11, 21 August 2015 by DarkMavis (Talk | contribs) (Added test background for styling background)

Jump to: navigation, search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Clear the cache in Tools → Preferences
/* <pre><nowiki> */ 

/* CSS placed here will affect users of the Vector skin */

html, body {
	font-size: 100%;
}

}
body {
	background: grey url('images/TestWikiBG.jpg') no-repeat fixed;
}

body, h1, h2, h3, h4, h5, pre, table, th, #siteSub {
	color: #333;
}

h1 {
	border-bottom: .0781em dotted #DDD;
}

li {
	list-style-image: none !important;
}


#content {
	background-image: none !important;
	box-shadow: .36em .264em .16em #000;
}


/* Hide editing-related info when not editing */

#bodyContent > .hide-this {
	display: none;
}

/* Change default content size */

#bodyContent {
	line-height: 1.5em;
	font-size: 0.8em;
}


/* Use bullet character, not image, for unordered lists */

#content ul > li {
	list-style: disc none;
}

/* But not for some ul */

.toclevel-1, .toclevel-2, .toclevel-3 {
	list-style-type: none !important;
}

/* remove bullet char in boxes with guillemots */

.gigbox ul > li, .songbox ul > li, .discobox ul > li {
	list-style: none none !important;
}

/* Sidebar */

/* plogo and atom removed */

#p-logo {
	background: url('skins/Common/img/mansunwikil.png') no-repeat center center;
	height: 125px;
	margin-bottom: 1em;
	position: relative;
	top: 0;
}

#p-logo > a {
	background-image: none !important;
}

#mw-panel {
	top: 0 !important;
}

.body > ul > li {
	font-size: .8em !important;
}

.portal h3{
	font-size: 1em !important;
	padding: 0 .25em .25em 1.25em !important;
}

.portal h3 a{
	color: #6600FF !important;
}

.body {
	background: #000 !important;
	filter: alpha(opacity=70);
	opacity: .7;
	padding: .625em 0 .3125em .625em !important;
	-o-transition: background-image 1s, margin-left 1s, opacity 1s;
	-webkit-transition: background-image 1s, margin-left 1s, opacity 1s;
	transition: background-image 1s, margin-left 1s, opacity 1s;
}

.body > ul > li > a {
	color: #FFF !important;
	display: block;
}

/* end sidebar */

/* Added from Wikipedia for On This Day styling */
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}


/* Lyrics CSS style */

.lyrics {
	/* rotate 2 degrees */
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
	/* Opera 11.10 - 12.5 */
	background: -o-linear-gradient(to bottom, #d9eaf3 0%, #fff 8%) 0 4px;
	/* Safari 5.1+, Chrome 10+, iOS 5 */
	background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
	/* Standard (Firefox 16+, Opera 12.5+, IE10) */
	background: linear-gradient(to bottom, #d9eaf3 0%, #fff 8%) 0 4px;
	background-size: 100% 20px;
	border: 1px solid #d2d2d2;
	border-radius: 3px; 
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
	color: #444;
	font: normal 1.1em/2.2 Garamond, Tahoma, Geneva, sans-serif;
	line-height: 22px;
	padding: 6px 5px 4px 55px;
	position: relative;
	white-space: pre-wrap;
	width: 450px;

}

.lyrics:before {
	border: 1px solid;
	border-color: transparent #efe4e4;
	bottom: 0;
	content: '';
	left: 40px;
	position: absolute;
	top: 0;
}

/* End of Lyrics Styling */

/* Foreword Styling */
.foreword {
	padding: 6px 6px 5px 30px;
	color: #003399
	font-family: Garamond, sans-serif;
	font-size: 16px;

/* End of Foreword Styling */

/* Top bar */

#mw-page-base {
	background-color: transparent;
	height: 4.0625em;
	margin-left: 10em;
}

#mw-head-base, #mw-page-base {
	background-image: none;
}
#left-navigation{
	top:25px !important;
	margin-top:25px !important;

}
#left-navigation > .vectorTabs > ul, #left-navigation > .vectorTabs > ul > li > a {
	background: none !important;
}

.selected > span {
	font-weight: bold;
}


#left-navigation > .vectorTabs {
	background-image: none !important;
	padding-left: 0 !important;
}

#left-navigation > .vectorTabs:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

#left-navigation > .vectorTabs > ul {
	background-image: none !important;
}

#left-navigation > .vectorTabs > ul > li {
	background-color: #ffffff;
	margin-right: .1em;

}

#left-navigation > .vectorTabs > ul > li > span {
	background-image: none !important;
	margin-left: .5em;
	margin-right: .5em;
}

#left-navigation > .vectorTabs a > span {
	background-image: none;
	padding-top: .25em;
}

#right-navigation {
	background: #FFF;
	margin-top: 1.5625em;
}

#p-search {
	padding-bottom: .7em;
}

#p-namespaces > ul > li > a > span {
	color: #6BB28F !important;
}

#p-personal > ul > li {
	background-image: none;
}

#p-personal > ul > li > a {
	color: #6BB28F;
}

#preferences {
	border: 0 none;
}

.page-MansunWiki > #content > #firstHeading {
	display: none;
}


/* Stop disc bullets from appearing on drop-downs */

.col > li {
	list-style-type: none !important;
}
}

/* Links and make guillemet thingies look like links */

a, .gu, #p-views > ul > li > a > span {
	color: #0378AE;
}

.col:hover > li > .gu {
	color: #669;
}

a.external {
	color: #069 !important;
}

.gu {
	display: inline;
}

/* end links and guillemet thingies */

/* Make links fill their parents, easier to click */

li.toclevel-1 > a, li.toclevel-2 > a, li.toclevel-3 > a, .video-list > tbody > tr > td > a {
	display: block;
}

/* End links blocking */

table, td, .frontth, #preferences, #mw_metadata > tbody > tr > td, table.gallery > tbody > tr > td {
	background-color: transparent;
}

#preferences {
	background-image: none;
}

/* Style Twitter Widgets */
/* twitter enlarged default widget box size Aug 2015 */
	
.twitter-timeline {
	width: 420px !important;
}

/* End Twitter Widget customisation */

.gallery, .gallery > tbody > tr > td {
	border-style: none !important;
}

.gallerybox > .thumb {
	border-style: none !important;
	padding: 0 !important;
}

.diff {
	border-collapse: collapse;
}

/* Gig links */

.gigindex {
	background: #E0E6D3;
	border: .0781em solid #AAA;
	-khtml-border-radius: .5em;
	border-radius: .5em;
	box-shadow: 0 .0781em .3906em #82A63A, 0 .7813em 1.5625em #FFF inset;
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	margin: 1em 0;
	padding: .2em;
	*display: block;
}

.gigindex > span {
	float: left;
}

.gigindex > span > a {
	display: block;
	padding: .3125em;
}

/* End gig links */


/* Forum link template */

.forum-links {
	margin-left: 5em;
}

/* End forum link template */



/* Notice box styling */

.colourbox {
	border: .0781em solid #AAA;
	-khtml-border-radius: .5em;
	border-radius: .5em;
	color: #000;
	display: block;
	font-weight: bold;
	margin: .5em 10%;
	padding: .5em;
	text-align: center;
	width: 80%;
}

.colourbox > a {
	border-bottom: .0781em dotted;
	color: #000 !important;
}

.colourbox > a:hover {
	border-bottom: .0781em solid;
	text-decoration: none;
}

.bluebackbox { 
	background: #C9DAE1;
	box-shadow: 0 .0781em .3906em #0378AE, 0 .7813em 1.5625em #6BB28F inset;
}

.greenbackbox {
	background: #E0E6D3;
	box-shadow: 0 .0781em .3907em #82A63A, 0 .7813em 1.5625em #6BB28F inset;
}

.purplebackbox { 
	background: #d7c9e1;
	box-shadow: 0 .0781em .3906em #4503ae, 0 .7813em 1.5625em #6BB28F inset;
}

.redbackbox {
	background: #D68485;
	box-shadow: 0 .0781em .3907em #AF2022, 0 .7813em 1.5625em #6BB28F inset;
}

/* End notice boxes */


/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}

.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
    text-align: left;
    border-collapse: collapse;
    line-height: 1.2em; 
    font-size: 90%;
}

.infobox.geography  td,
.infobox.geography  th {
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
    border: 0;
    padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: solid 1px #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
    border: 0;
    padding: 0;
}

/* End infobox styling */

/* Default skin for navigation boxes */
table.navbox {            /* Navbox container style */
  border: 1px solid #aaa;
  width: 100%; 
  margin: auto;
  clear: both;
  font-size: 88%;
  text-align: center;
  padding: 1px;
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
  margin-top: -1px;            /* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
  text-align: center;      /* Title and above/below styles */
  padding-left: 1em;
  padding-right: 1em;
}
.navbox-group {            /* Group style */
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}
.navbox, .navbox-subgroup {
  background: #fdfdfd;     /* Background color */
}
.navbox-list {
  border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
  background: #ccccff;     /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
  background: #ddddff;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
  background: #e6e6ff;     /* Level 3 color */
}
.navbox-even {
  background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
  background: transparent; /* Odd row striping */
}

.collapseButton {          /* 'show'/'hide' buttons created dynamically */
    float: right;          /* by the CollapsibleTables javascript in    */
    font-weight: normal;   /* [[MediaWiki:Common.js]]are styled here    */
    text-align: right;     /* so they can be customised.                */
    width: auto;
}
.navbox .collapseButton {  /* In navboxes, the show/hide button balances */
    width: 6em;            /* the vde links from [[Template:Tnavbar]],   */
}                          /* so they need to be the same width.         */

/* End navbox styling */


/* Box shadows */

/* for .8em tables */

.disco-list, .song-list, .infbox, .greytable, .gigtable, #pricetable, #speechtable, .tabulature-list, .thumbinner, .gallerybox > .thumb > div > .image > img {
	box-shadow: .45em .33em .2em #666;
}

/* End box shadows */


/* Info boxes (+gig tables) */

/* Colours */

.infbox > tbody > tr > th {
	color: #FFF;
}

.greytable > tbody > tr > th {
	color: #FFF;
}

.discobox > tbody > tr > th {
	background: #5C85FF;
}

.songbox > tbody > tr > th {
	background: #5C85FF;
}

.discobox > tbody > tr > th > div {
	float: right;
	font-size: xx-small;
	text-transform: lowercase;
}

.songbox > tbody > tr > th > div {
	float: right;
	font-size: xx-small;
	text-transform: lowercase;
}

.discobox > tbody > tr > th > div > a:before {
	content: "⇩";
	-o-transition: color 1s, content 1s;
	-webkit-transition: color 1s, content 1s;
	transition: color 1s, content 1s;
}

.discobox > tbody > tr > th > div > a {
	color: #99CCFF;
	-o-transition: color 1s;
	-webkit-transition: color 1s;
	transition: color 1s;
}

.discobox > tbody > tr > th > div > a:hover:before {
	color: #FFF;
	content: "⬇" !important;
}

.discobox > tbody > tr > th > div > a:hover {
	color: #FFF;
	text-decoration: none;
}

.discobox > tbody > tr:nth-child(2n+1) {
	background: #99CCFF;
}

.songbox > tbody > tr:nth-child(2n+1) {
	background: #ADD6FF;
}

#gearbox > tbody > tr > th, .greytable > tbody > tr > th {
	background: #656565;
}

#gearbox > tbody > tr:nth-child(2n+1), .greytable > tbody > tr:nth-child(2n+1) {
	background: #D9D9D9;
}

#gigbox > tbody > tr > th {
	background: #82A63A;
}

#gigbox > tbody > tr:nth-child(2n+1) {
	background: #E0E6D3;
}


.gigtable > tbody > tr > th {
	color: #82A362;
}

.gigtable > tbody > tr:nth-child(2n+1) {
	background: #CBE2B5;
}

#memberbox > tbody > tr > th {
	background: #AF2022;
}

#memberbox > tbody > tr:nth-child(2n+1) {
	background: #DEDEDE;
}

#jambox > tbody > tr > th, #songbox > tbody > tr > th {
	background: #0378AE;
}

#jambox > tbody > tr:nth-child(2n+1), #songbox > tbody > tr:nth-child(2n+1) {
	background: #C9DAE1;
}

#vidbox > tbody > tr > th {
	background: #E3AF1E;
}

/* End colours */


/* Info box borders */

.greytable, .greytable > tbody > tr > th, .greytable > tbody > tr > td, .gigtable, .gigtable > tbody > tr > th, .gigtable > tbody > tr > td, .infbox, .infbox > tbody > tr > th, .infbox > tbody > tr > td {
	border: none !important;
	padding: .2em .5em .2em .5em !important;
}

/* Info box left column */

.infbox > tbody > tr > td:first-child {
	font-weight: bold;
}

/* Discobox */

.discobox-chron {
	text-align: center;
}

.discobox-chron > div, .discobox-chron > a {
	display: inline-block;
	font-size: x-small;
	font-weight: normal;
	padding: 0 .5em;
	*display: block;
}

.discobox-chron-current {
	font-weight: bold !important;
}

/* End Discobox */


/* End info boxes */

#backto-mansun {
	border: 0.0781em #AAA solid;
	-khtml-border-radius: .5em;
	border-radius: .5em;
	margin: 1em 1em 1em 0;
	text-align: center;
	width: 20em;
}


/* Discography, tabulature, and video tables */

.disco-list, .song-list, .tabulature-list, .video-list {
	border: .0781em #AAA solid;
	border-radius: .5em;
	border-spacing: 0;
	margin-bottom: 1em;
}

.disco-list > tbody, .song-list > tbody, .tabulature-list > tbody, .video-list > tbody {
	border-collapse: collapse;
}

/* 1em / 12.8px * 4px = 0.3125em */

.disco-list > tbody > tr > th, .song-list > tbody > tr > th, .disco-list > tbody > tr > td {
	padding: .3125em .5em .3125em .5em;
}

.tabulature-list > tbody > tr > th, .tabulature-list > tbody > tr > td, .video-list > tbody > tr > td {
	padding: .3125em;
	vertical-align: text-top;
}

.video-list {
	text-align: center;
}

/* End discography, tabulature, and video tables */


.columns-auto {
	-moz-column-width: 20em;
	-webkit-column-width: 20em;
	column-width: 20em;
}

.references {
	-moz-column-width: 32em;
	-webkit-column-width: 32em;
	column-width: 32em;
}

/* Interview Table - mansonwiki */

/* DOMAIN: TABLES */

    .maintable {
        border: solid 1px #CCCCCC;
        width: 84%;
    }
    .maintable > tbody > tr > th {
        background-color: #ccf;
        color: #FFFFFF;
        text-align: left;
    }
    .maintable > tbody > tr > td {
        border: solid 1px #CCCCCC;
    }
    .maintable > tbody > tr > td {
        border: solid 1px #CCCCCC;
    }
    .maintable > tbody > tr:nth-child(even) > td {
        background-color: #EEEEEE;
    }

    .boxtable {
        border: solid 1px #333333;
        font-size: 85% !important;
        width: 100%;
    }
    .boxtable th {
        background-color: #ccf;
        color: #FFFFFF;
        font-weight: bolder;
        text-align: center;
    }
    .boxtable th:first-child {
        width: 15%;
    }
    .boxtable th[colspan="2"] {
        background-color: #DDDDDD;
        border: solid 1px #333333;
        color: #333333;
        font-size: 120%;
    }

/* EXTENSION: GALLERY */

    .gallery {
        background-color: #EEEEEE;
        clear: both;
        outline: solid 1px #DDDDDD;
    }
    #column-content ul.gallery {
        text-align: inherit;
    }
    #column-content li.gallerybox {
        background-color: #EEEEEE;
        border: none;
        margin: 0 0 0 -6px !important;
        outline: none;
        padding: 2px;
    }

/* End Interview Table */

/* Nav */

.nav {
	border: 1px #AAA solid;
	border-collapse: collapse;
	-khtml-border-radius: .5em;
	border-radius: .5em;
	box-shadow: .58em .42em .25em #666;
	font-size: x-small;
	padding: 0;
	text-align: center;
}

.nav > tbody > tr > th {
	border: .1em solid transparent;
	-khtml-border-radius: .5em;
	border-radius: .5em .5em 0 0;
	color: #FFF;
	padding: inherit;
}

#nav-gig > tbody > tr > th {
	background: #82A63A;
}

#nav-song > tbody > tr > th {
	background: #0378AE;
}

#nav-song > tbody > tr > th > a:visited {
	color: #FFF;
}

#nav-vid > tbody > tr > th {
	background: #E3AF1E;
}

/* Appears to fix buggy border */
.nav > tbody > tr:last-child {
	border: .1em solid transparent;
}

.nav > tbody > tr > td {
	padding: inherit;
}

.nav > tbody > tr > td:nth-child(2n+1) {
	-o-transition: background-color 1s;
	-webkit-transition: background-color 1s;
	transition: background-color 1s;
	width: 17em;
}

#nav-gig > tbody > tr > td:nth-child(2n+1):hover {
	background-color: #E0E6D3;
}

#nav-song > tbody > tr > td:nth-child(2n+1):hover {
	background-color: #C9DAE1;
}

/* End Nav */

/* Set lists */

/* hide YouTube link images within set-lists */

.ytube > a {
	background: none !important;
	padding: 0 !important;
}

/* align intro with songs in set-lists
 * remove bullet therefrom             */

#setlist > ul {
	margin-left: 3.2em;
}

#intro {
	list-style: none !important;
}

/* End set lists */

/* Horizontal scroll for images larger than .body */

.horizontal-scroll > p {
	overflow-x: scroll;
}


/* Footer */

#footer-icons, #footer-places-disclaimer, #footer-places-privacy {
	float: center;
}

#footer {
	background-color: #FFF;
	background-image: none !important;
	border-radius: 0 0 .5em .5em;
	filter: alpha(opacity=70);
	margin: 0 auto .5em !important;
	opacity: .7;
	-o-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
	width: 17em;
}

#footer:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

#footer > ul {
	text-align: center;
}

#footer-info > li {
	padding: 0 0 .5em !important;
}

#footer-places > li {
	padding: 0 !important;
}

/* End footer */


/* Tablets and whatnot */

@media handheld {
	.col > .di {
		display: block !important;
	}
}

/* End tablets */


/* plain styling */

.bold {
	font-weight: bold;
}

.normal {
	font-weight: normal;
}

.small {
	font-size: x-small;
}

.unknown {
	font-style: italic;
}

/* For making first letter upper-case */

.TextToUpper:first-letter {
	text-transform: uppercase;
}

/* Superscript */

.sup {
	font-size: x-small;
	line-height: 0;
	vertical-align: super;
}

/* End plain styling */


/* collapsible CSS stuff */

.col {
	list-style: none none;
	margin-left: 0;
}

.col > .di {
	display: none;
}

.col:hover > .di {
	display: block;
}

/* End collapsible CSS stuff */

/* Highlight clicked references */

.reference:target, .references > li:target { 
	background-color: #C9DAE1;
}


/* Make redirects appear in italics in categories and on [[Special:Allpages]] */

.redirect-in-category, .allpagesredirect {
	font-style: italic;
}


/* Transparency checkered background on image description pages */

#file > a > img {
	background: url("https://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}


/* Remove useless links from printout */

@media print {
	#privacy, #about, #disclaimer {
		display:none;
	}
}

/* </nowiki></pre> */