Difference between revisions of "MediaWiki:Vector.css"
From MansunWiki
m |
|||
Line 168: | Line 168: | ||
/* End notice boxes */ | /* 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: "⇩"; | ||
+ | -o-transition: color 1s, content 1s; | ||
+ | -webkit-transition: color 1s, content 1s; | ||
+ | transition: color 1s, content 1s; | ||
+ | } | ||
+ | |||
+ | .discobox > tbody > tr > th > div > a { | ||
+ | color: #DAD0DF; | ||
+ | -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: #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 */ | ||
Revision as of 22:36, 20 July 2015
/* <pre><nowiki> */
/* CSS placed here will affect users of the Vector skin */
html, body {
font-size: 100%;
}
/* Custom Lyrics sheets new and old */
.notepaper {
position: relative;
margin: 80px auto;
padding: 29px 20px 20px 45px;
width: 480px;
line-height: 30px;
color: #6a5f49;
text-shadow: 0 1px 1px white;
background-color: #f2f6c1;
background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
border: 1px solid #d2d2d2;
border-color: rgba(195, 186, 170, 0.9);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
font-family: Arial, Helvetica, sans-serif;
font-size:18px
}
.notepaper:before, .notepaper:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
}
.notepaper:before {
left: 28px;
width: 2px;
border: solid #efcfad;
border-color: rgba(239, 207, 173, 0.9);
border-width: 0 1px;
}
.notepaper:after {
z-index: -1;
left: 0;
right: 0;
background: rgba(242, 246, 193, 0.9);
border: 1px solid rgba(170, 157, 134, 0.7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.lyrics {
padding: 6px 6px 5px 30px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
}
.lyrics-by {
display: block;
padding-right: 10px;
text-align: right;
font-size: 14px;
font-style: italic;
color: #84775c;
}
.lyrics-title {
display: block;
padding-center: 10px;
text-align: left;
font-size: 20px;
color: #000033;
font-family: Garamond, Geneva, "Palantino Linotype", sans-serif;
line-height: normal;
font-style: italic;
font-weight: 300;
text-decoration: underline;
}
/* Lyrics CSS style */
.oldlyrics {
background: -o-linear-gradient(to bottom, #d9eaf3 0%, #fff 8%) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
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.2em/1.5 Tahoma, Geneva, sans-serif;
line-height: 20px;
padding: 6px 5px 4px 55px;
position: relative;
white-space: pre-wrap;
width: 500px;
}
.oldlyrics:before {
border: 1px solid;
border-color: transparent #efe4e4;
bottom: 0;
content: '';
left: 40px;
position: absolute;
top: 0;
}
/* End of Lyrics Styling */
/* 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 #FFF inset;
}
.greenbackbox {
background: #E0E6D3;
box-shadow: 0 .0781em .3907em #82A63A, 0 .7813em 1.5625em #FFF inset;
}
.purplebackbox {
background: #d7c9e1;
box-shadow: 0 .0781em .3906em #4503ae, 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: "⇩";
-o-transition: color 1s, content 1s;
-webkit-transition: color 1s, content 1s;
transition: color 1s, content 1s;
}
.discobox > tbody > tr > th > div > a {
color: #DAD0DF;
-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: #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 */
/* 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 */
/* Tablets and Smartphones */
@media handheld {
.col > .di {
display: block !important;
}
}
/* End tablets */
/* </nowiki></pre> */