Difference between revisions of "MediaWiki:Vector.css"

MuseWiki, wiki for the band Muse
Jump to navigation Jump to search
(Doesn't work :( bastards)
m (→‎lyrics::before: I'm guessing that a double line isn't desired. It looks weird, anyway.)
Line 287: Line 287:
     content: '';
     content: '';
     position: absolute;
     position: absolute;
    width: 4px;
     top: 0;
     top: 0;
     left: 40px;
     left: 40px;

Revision as of 01:08, 28 September 2012

/* <pre><nowiki> */ 

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

html, body {
	font-size: 100%;
}
body {
	background: black url('images/The2ndlawbg.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;
}

pre {
	background-color: #EEE;
	border-color: #AAA;
}

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


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

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


/* 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;
}

/* Side-bar */

#p-logo {
	background: url('skins/common/images/musewikiLogo.png') no-repeat center center;
	height: 40px;
	margin-bottom: 1em;
	position: relative;
	top: 0;
	z-index: -1;
}

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

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

#feed-atom {
	background-image: none;
	padding-left: 0;
}

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

.portal > h5 {
	color: #FFF !important;
	font-size: 1em !important;
	padding: 0 .25em .25em 1.25em !important;
	text-shadow: .125em .125em .0625em #000;
	text-transform: uppercase;
}

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

.body:hover {
	background-image: radial-gradient(30% 20%, circle farthest-corner, #333 5%, #000 50%) !important;
	margin-left: .75em !important;
	filter: alpha(opacity=100);
	opacity: 1;
	background-image: -moz-radial-gradient(30% 20%, circle farthest-corner, #333 5%, #000 50%) !important;
	background-image: -ms-radial-gradient(30% 20%, circle farthest-corner, #333 5%, #000 50%) !important;
	background-image: -o-radial-gradient(30% 20%, circle farthest-corner, #333 5%, #000 50%) !important;
	background-image: -webkit-radial-gradient(30% 20%, circle farthest-corner, #333 5%, #000 50%) !important;
}

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


/* 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;
}
#left-navigation > .vectorTabs > ul, #left-navigation > .vectorTabs > ul > li, #left-navigation > .vectorTabs > ul > li > a {
	background: none !important;
}

#left-navigation > .vectorTabs {
	background-color: #FFF;
	background-image: none !important;
	border-top-left-radius: .5em 2em;
	border-top-right-radius: .5em 2em;
	filter: alpha(opacity=70);
	opacity: .7;
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

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

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

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

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

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

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

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

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

#preferences {
	border: 0 none;
}

.page-MuseWiki > #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;
}

a:visited, .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;
}

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

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

.diff {
	border-collapse: collapse;
}

th {
	background: #FFF;
	text-transform: uppercase;
}

.lyrics{
    font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
    width: 500px;
    padding: 6px 5px 4px 55px;
    position: relative;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
 
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
 
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

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

#contentSub {
	margin: 0;
}

fieldset {
	border-color: #AAA;
}

fieldset > hr {
	background-color: #AAA !important;
}

/* Home page index box */
#frontpage-indexbox {
	background: #C9DAE1;
	border: .0781em solid #AAA;
	border-radius: 1em;
	box-shadow: 0 .0781em .3906em #0378AE, 0 .7813em 1.5625em #FFF inset;
	display: inline-block;
	margin-top: .7em;
	width: 100%;
	-khtml-border-radius: 1em;
	*display: block;
}

#frontpage-indexbox > div:first-child {
	float: left;
	margin: .3em 0 .3em .5em;
}

#frontpage-title > a, #frontpage-stats > a, #frontpage-indexbox > ul > li > a {
	border-bottom: 1px dotted;
	color: black;
	text-decoration: none;
}

#frontpage-title > a:hover, #frontpage-stats > a:hover, #frontpage-indexbox > ul > li > a:hover {
	border-bottom: 1px solid;
	text-decoration: none;
}

#frontpage-title {
	font-size: 1.62em;
	padding: .1em;
	text-align: center;
}

#frontpage-subtitle {
	font-size: .95em;
	text-align: center;
}

#frontpage-indexbox > ul {
	float: right;
	margin: .3em 2%;
}

#frontpage-indexbox-lfooter, #frontpage-indexbox-rfooter {
	color: #AAA;
	display: inline-block;
	font-size: .95em;
	*display: block;
}

#frontpage-indexbox-rfooter {
	float: right;
}

.frontpage-photos {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 33%;
	*display: inline;
}

.frontpage-photos > .image > img {
	box-shadow: .45em .33em .2em #666;
}

.frontpage-photos > p {
	font-size: .95em;
}

#frontpage-infofooter {
	font-size: .95em;
	margin-bottom: .5em;
	margin-top: 2em;
	text-align: center;
}

#frontpage-infofooter > b {
	color: #AAA;
}

/* Gig links */

.gigindex {
	background: #E0E6D3;
	border-radius: .5em;
	border: .0781em solid #AAA;
	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;
	-khtml-border-radius: .5em;
	*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;
	border-radius: .5em;
	color: #000;
	display: block;
	font-weight: bold;
	margin: .5em 10%;
	padding: .5em;
	text-align: center;
	width: 80%;
	-khtml-border-radius: .5em;
}

.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 #FFF inset;
}

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

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

/* End notice boxes */


/* Box shadows */

/* for .8em tables */

.disco-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, .greytable > tbody > tr > th, .gigtable > tbody > tr > th {
	color: #FFF;
}

.discobox > tbody > tr > th {
	background: #4D1F68;
}

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

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

.discobox > tbody > tr > th > div > a {
	color: #DAD0DF;
	transition: color 1s;
	-moz-transition: color 1s;
	-ms-transition: color 1s;
	-o-transition: color 1s;
	-webkit-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: #DAD0DF;
}

#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, .gigtable > tbody > tr > th {
	background: #82A63A;
}

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

#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-muse {
	border: 0.0781em #AAA solid;
	border-radius: .5em;
	margin: 1em 1em 1em 0;
	text-align: center;
	width: 20em;
	-khtml-border-radius: .5em;
}


/* Discography, tabulature, and video tables */

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

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

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

.disco-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 {
	column-width: 20em;
	-moz-column-width: 20em;
	-webkit-column-width: 20em;
}

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


/* Nav */

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

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

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

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

#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) {
	transition: background-color 1s;
	width: 17em;
	-moz-transition: background-color 1s;
	-ms-transition: background-color 1s;
	-o-transition: background-color 1s;
	-webkit-transition: background-color 1s;
}

#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 {
	display: none;
}

#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;
	transition: opacity 1s;
	width: 17em;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

#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 */


/* OoS anniversary */

.page-Leeds_Bramham_Park_2011_gig, .page-Reading_Little_John_s_Farm_2011_gig {
	background: #FFF url('images/Origin_of_Symmetry_art_%E2%80%93_dark.jpg') repeat-x fixed;
	background-size: 100%;
}

.page-Leeds_Bramham_Park_2011_gig > #content > #bodyContent > #gigbox > tbody > tr > th, .page-Reading_Little_John_s_Farm_2011_gig > #content > #bodyContent > #gigbox > tbody > tr > th {
	background: #B04D48;
}

.page-Leeds_Bramham_Park_2011_gig > #content > #bodyContent > #gigbox > tbody > tr:nth-child(2n+1), .page-Reading_Little_John_s_Farm_2011_gig > #content > #bodyContent > #gigbox > tbody > tr:nth-child(2n+1) {
	background: #FFD1CF;
}

.page-Leeds_Bramham_Park_2011_gig > #content > #bodyContent > #nav-gig th, .page-Reading_Little_John_s_Farm_2011_gig > #content > #bodyContent > #nav-gig th {
	background: #B04D48;
}

.page-Leeds_Bramham_Park_2011_gig > #content > #bodyContent > #nav-gig > tbody > tr > td:nth-child(2n+1):hover, .page-Reading_Little_John_s_Farm_2011_gig > #content > #bodyContent > #nav-gig > tbody > tr > td:nth-child(2n+1):hover {
	background-color: #FFD1CF;
}

/* end OoS anniversary */



/* MOVED FROM COMMONS */


/* 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> */
Retrieved from ‘http://musewiki.org/index.php?title=MediaWiki:Vector.css&oldid=83613’