Difference between revisions of "MediaWiki:Common.css"
From King Arthur's Gold Wiki
(212 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
+ | /* !!! WARNING: DO NOT CHANGE ANYTHING ON THIS PAGE UNLESS YOU KNOW WHAT YOU ARE DOING AND ARE AUTHORIZED TO DO SO !!! */ | ||
+ | |||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
Line 8: | Line 10: | ||
#homepageMainBox{ | #homepageMainBox{ | ||
width: 50%; | width: 50%; | ||
− | height: | + | height:85px; |
background-color:#62888b; | background-color:#62888b; | ||
− | background:url( | + | background:url(https://wiki.kag2d.com/images/7/7f/FondTitle.png) repeat; |
margin: 1em auto; | margin: 1em auto; | ||
text-align: center; | text-align: center; | ||
Line 75: | Line 77: | ||
background-clip: border-box; | background-clip: border-box; | ||
background-color: transparent; | background-color: transparent; | ||
− | background-image: url(" | + | background-image: url("https://wiki.kag2d.com/images/c/c4/Arrowdown.png"); |
background-origin: padding-box; | background-origin: padding-box; | ||
background-position: right center; | background-position: right center; | ||
Line 115: | Line 117: | ||
border-left:1px solid #1f0b0b; | border-left:1px solid #1f0b0b; | ||
border-bottom:1px solid #1f0b0b; | border-bottom:1px solid #1f0b0b; | ||
− | + | border-radius: .7em; | |
− | -moz-border-radius: | + | -moz-border-radius: .7em; |
− | border-radius: | + | -webkit-border-radius: .7em; |
padding-top:10px; | padding-top:10px; | ||
padding-left:15px; | padding-left:15px; | ||
Line 135: | Line 137: | ||
background-clip: border-box; | background-clip: border-box; | ||
background-color: transparent; | background-color: transparent; | ||
− | background-image: url(" | + | background-image: url("https://wiki.kag2d.com/images/c/c4/Arrowdown.png"); |
background-origin: padding-box; | background-origin: padding-box; | ||
background-position: right center; | background-position: right center; | ||
Line 191: | Line 193: | ||
/* END OF THE KAG-LIKE MENU */ | /* END OF THE KAG-LIKE MENU */ | ||
+ | /*====================================== | ||
+ | KAG-styled nav bar, modified from above style */ | ||
− | /* The first title, "Main Page" on the main page IT'S UGLY NOW must change it*/ | + | .navbar{ |
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | background-color: #687364; | ||
+ | background-origin: padding-box; | ||
+ | background-position: 0 0; | ||
+ | background-repeat: repeat; | ||
+ | border-spacing: 0 0; | ||
+ | border: 1px solid #391a1a; | ||
+ | |||
+ | margin-bottom: 0.5em; | ||
+ | |||
+ | padding: 0.5em; | ||
+ | border-radius: .7em; | ||
+ | -moz-border-radius: .7em; | ||
+ | -webkit-border-radius: .7em | ||
+ | |||
+ | -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | } | ||
+ | |||
+ | .navbar th{ | ||
+ | color: #ffffff; | ||
+ | border: none; | ||
+ | text-shadow: 0 1px 1px black; | ||
+ | background-color: #687364; | ||
+ | padding: 0.5em; | ||
+ | } | ||
+ | |||
+ | .navbar th a{ | ||
+ | color: #ffffff; | ||
+ | text-shadow: 0 1px 1px black; | ||
+ | } | ||
+ | |||
+ | .navbar th a:hover{ | ||
+ | color: #000000; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 1px #7b8977; | ||
+ | } | ||
+ | |||
+ | .navbar td{ | ||
+ | border: none; | ||
+ | padding: 0.5em; | ||
+ | color: #333333; | ||
+ | background: #687364; | ||
+ | } | ||
+ | |||
+ | .navbar td a{ | ||
+ | color: #0c0c0c; | ||
+ | text-shadow: 0 1px 1px #7b8977; | ||
+ | } | ||
+ | |||
+ | .navbar td a:hover{ | ||
+ | color: #eaeaea; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 1px black; | ||
+ | } | ||
+ | |||
+ | /*====================================== | ||
+ | Build menu table just like in the game */ | ||
+ | |||
+ | .buildmenu{ | ||
+ | width: 200px; | ||
+ | height: 256px; | ||
+ | |||
+ | background-position: 0 0; | ||
+ | background-image: url('https://wiki.kag2d.com/images/d/d7/Buildmenu_bg.png'); | ||
+ | background-position: left top; | ||
+ | |||
+ | border-collapse: collapse; | ||
+ | border: solid 1px transparent; | ||
+ | |||
+ | text-align: center; | ||
+ | padding: 0; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | .buildmenu td{ | ||
+ | border: solid 1px transparent; | ||
+ | border-spacing: 0; | ||
+ | padding: 1px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /*====================================== | ||
+ | The first title, "Main Page" on the main page IT'S UGLY NOW must change it*/ | ||
#firstHeading{ | #firstHeading{ | ||
Line 204: | Line 294: | ||
background: none; | background: none; | ||
} | } | ||
− | |||
#content #homepageMenu a.external { | #content #homepageMenu a.external { | ||
color: #0c0c0c; | color: #0c0c0c; | ||
} | } | ||
+ | |||
#content #homepageMenu a.external:hover { | #content #homepageMenu a.external:hover { | ||
color: #222222; | color: #222222; | ||
} | } | ||
+ | |||
#homepageMenu a{ | #homepageMenu a{ | ||
padding:0 !important; | padding:0 !important; | ||
} | } | ||
− | /* | + | /*====================================== |
+ | This is now the main table style that follows KAG military green-ish style */ | ||
.wikitableShiny{ | .wikitableShiny{ | ||
− | + | text-align: center; | |
+ | width: 100%; | ||
background-color: #f3f3f3; | background-color: #f3f3f3; | ||
background-origin: padding-box; | background-origin: padding-box; | ||
background-position: 0 0; | background-position: 0 0; | ||
background-repeat: repeat; | background-repeat: repeat; | ||
− | border- | + | border-spacing: 0 0; |
+ | border: 1px solid #391a1a; | ||
+ | |||
margin-bottom: 1em; | margin-bottom: 1em; | ||
− | |||
− | |||
margin-top: 1em; | margin-top: 1em; | ||
+ | padding: 0.5em; | ||
+ | border-radius: .7em; | ||
+ | -moz-border-radius: .7em; | ||
+ | -webkit-border-radius: .7em | ||
} | } | ||
− | /* | + | /*table header*/ |
.wikitableShiny th{ | .wikitableShiny th{ | ||
+ | color: #ffffff; | ||
+ | text-shadow: 0px 1px 1px black; | ||
+ | background-color: #687364; | ||
+ | border: 1px solid #f3f3f3; | ||
+ | padding: 0.5em; | ||
+ | } | ||
− | color:#333333; | + | .wikitableShiny tr{ |
− | + | color: #333333; | |
− | + | } | |
− | + | ||
− | + | .wikitableShiny tr:nth-of-type(odd) { | |
− | + | background: #C4CEC0; | |
− | + | ||
− | background: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .wikitableShiny | + | .wikitableShiny td{ |
− | + | border: none; | |
+ | padding: 0.5em; | ||
} | } | ||
− | . | + | /*====================================== |
− | width: | + | build class and modifications |
+ | USAGE EXAMPLE: <class="build buildLatest"> | ||
+ | */ | ||
+ | |||
+ | .build{ | ||
+ | width:350px; | ||
background-color: #FEEFB3; | background-color: #FEEFB3; | ||
color:#9F6000; | color:#9F6000; | ||
+ | text-align:center; | ||
border: 1px solid; | border: 1px solid; | ||
− | padding:2px 2px | + | padding:2px 0px 2px 0px; |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 10px center; | background-position: 10px center; | ||
− | background-image:url('images/ | + | background-image:url('https://wiki.kag2d.com/images/e/ee/BrokenHeartquest.png'); |
float:right; | float:right; | ||
− | // | + | margin-left:10px; |
+ | |||
+ | /* rounded corners */ | ||
+ | |||
+ | border-radius: .7em; | ||
+ | -moz-border-radius: .7em; | ||
+ | -webkit-border-radius: .7em | ||
+ | |||
+ | -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
} | } | ||
− | .buildOld | + | |
− | + | .buildOld{ | |
+ | background-image:url('images/4/48/BrokenHeart.png'); | ||
} | } | ||
.buildLatest{ | .buildLatest{ | ||
− | |||
background-color: #DFF2BF; | background-color: #DFF2BF; | ||
color:#4F8A10; | color:#4F8A10; | ||
− | |||
− | |||
− | |||
− | |||
background-image:url('images/a/a0/GreenGem.png'); | background-image:url('images/a/a0/GreenGem.png'); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | width: | + | /*====================================== |
− | background-color: # | + | Boxes for Announcements*/ |
− | color:# | + | |
− | border: | + | .infobox{ |
+ | width:500px; | ||
+ | text-align:center; | ||
+ | background-color:#B2C6EA; | ||
+ | color:#496EAA; | ||
+ | border: 2px solid; | ||
padding:2px 2px 2px 30px; | padding:2px 2px 2px 30px; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 10px center; | background-position: 10px center; | ||
− | background-image:url('images/ | + | background-image:url('https://wiki.kag2d.com/images/e/ee/Bisonsmall.png'); |
− | + | //('https://wiki.kag2d.com/images/f/f6/Bison.png'); | |
− | //margin-right: | + | //('https://wiki.kag2d.com/images/3/36/Stoneblock8.png'); |
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | |||
+ | /* rounded corners */ | ||
+ | |||
+ | border-radius: .7em; | ||
+ | -moz-border-radius: .7em; | ||
+ | -webkit-border-radius: .7em | ||
+ | |||
+ | -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
+ | box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); | ||
} | } | ||
− | . | + | |
− | + | ||
+ | /* modified from above infobox | ||
+ | add along infobox like this: | ||
+ | <class="infobox obsoletebox"> */ | ||
+ | |||
+ | .obsoletebox{ | ||
+ | background-color:#8DA395; | ||
+ | color:#4A544E; | ||
+ | background-image:url('http://wiki.kag2d.com/images/6/61/Sack.png'); | ||
} | } | ||
+ | |||
+ | .removalbox{ | ||
+ | background-color:#E06767; | ||
+ | color:#882626; | ||
+ | background-image:url('https://wiki.kag2d.com/images/b/be/Explosion32px.png'); | ||
+ | } | ||
+ | |||
+ | .cleanupbox{ | ||
+ | background-color:#B5B5B5; | ||
+ | color:#515151; | ||
+ | background-image:url('https://wiki.kag2d.com/images/e/e1/Dust32px.png'); | ||
+ | } | ||
+ | |||
+ | .unimplementedbox{ | ||
+ | background-color:#009a9a; | ||
+ | color:#003333; | ||
+ | background-image:url('https://wiki.kag2d.com/images/3/34/Bulb1.png'); | ||
+ | } | ||
+ | |||
+ | |||
+ | /* When <div class="nonumtoc"> is used on the table of contents, | ||
+ | the ToC will display without numbers */ | ||
+ | .nonumtoc .tocnumber { display: none; } | ||
+ | .nonumtoc #toc ul, | ||
+ | .nonumtoc .toc ul{ | ||
+ | line-height: 1.5em; | ||
+ | list-style: none none; | ||
+ | margin: .3em 0 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .nonumtoc #toc ul ul, | ||
+ | .nonumtoc .toc ul ul{ | ||
+ | margin: 0 0 0 2em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Hide the title on the main page */ | ||
+ | |||
+ | body.page-Main_Page h1.firstHeading { display:none; } |
Latest revision as of 19:22, 30 June 2016
/* !!! WARNING: DO NOT CHANGE ANYTHING ON THIS PAGE UNLESS YOU KNOW WHAT YOU ARE DOING AND ARE AUTHORIZED TO DO SO !!! */ /* CSS placed here will be applied to all skins */ /* CSS placed here will affect users of the Vector skin */ /* If you don't master CSS, don't modify this */ /* THE FIRST BOX ON HOMEPAGE */ #homepageMainBox{ width: 50%; height:85px; background-color:#62888b; background:url(https://wiki.kag2d.com/images/7/7f/FondTitle.png) repeat; margin: 1em auto; text-align: center; padding:0.5em; padding-bottom:0.3em; /* put some css3 because it's awesome */ border-radius:5px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset; } /* Colored background to be able to read the text O_o */ #coloredBackground{ background-color: rgba(1, 1, 1, 0.15); color:#f2f2f2; text-shadow: 0px 1px 1px #4d4d4d; /* Add shadow to the black background :O Create a nice inset effect, huuum I love it*/ -webkit-box-shadow: inset 0px 0px 6px 1px rgba(1, 1, 1, 0.3); -moz-box-shadow: inset 0px 0px 6px 1px rgba(1, 1, 1, 0.3); box-shadow: inset 0px 0px 6px 1px rgba(1, 1, 1, 0.3); } /* 3d title was not a good idea ! :D */ #titleHomepage{ text-shadow: 0px 2px 3px #666; } #homepageMainBox a{ color:white; } /* No black text on dark background pl0x*/ /* THE MIDDLE ROW ON MAIN PAGE (with description and news) */ #homepageMiddleRow td{ background:#e3e3e3; border-top:1px solid #a4a4a4; border-right:1px solid #a4a4a4; border-left:1px solid #a4a4a4; border-bottom:1px solid #a4a4a4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-right:10px; padding-left:10px; padding-top:10px; padding-bottom:10px; -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); } #homepageMiddleRow td b{ color:#232323; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("https://wiki.kag2d.com/images/c/c4/Arrowdown.png"); background-origin: padding-box; background-position: right center; background-repeat: no-repeat; background-size: auto auto; padding-bottom: 0.4em; padding-left: 0; padding-right: 15px; padding-top: 0.2em; } #homepageMiddleRow li{ text-align:left; list-style-type:square; } #homepageMiddleRow li a{ color:#0c0c0c; font-weight:bold; } #homepageMiddleRow li a:hover{ color:#222222; text-decoration:none; } #homepageMiddleRow ul{ } /* END OF MIDDLE ROW */ /* ALL THIS IS THE KAG-LIKE MENU */ /* It looks like the game menus, if you don't like it you should tell MM :O */ #homepageMenu td{ background:#687364; border-top:1px solid #391a1a; border-right:1px solid #391a1a; border-left:1px solid #1f0b0b; border-bottom:1px solid #1f0b0b; border-radius: .7em; -moz-border-radius: .7em; -webkit-border-radius: .7em; padding-top:10px; padding-left:15px; padding-bottom:10px; -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); } #homepageMenu td b{ color:white; text-shadow: 0 1px 1px black; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("https://wiki.kag2d.com/images/c/c4/Arrowdown.png"); background-origin: padding-box; background-position: right center; background-repeat: no-repeat; background-size: auto auto; padding-bottom: 0.4em; padding-left: 0; padding-right: 15px; padding-top: 0.2em; } #homepageMenu li{ margin-top:3px; text-align:center; width:85%; padding:3px; background:#525d4f; list-style-type:none; color:#0c0c0c; text-shadow: 0 1px 1px black; border-top:1px solid #7b8977; border-right:1px solid #7b8977; border-left:1px solid #33402e; border-bottom:1px solid #33402e; border-radius:1px; } #homepageMenu li:hover{ background:#677363; } #homepageMenu li a{ color:#0c0c0c; text-shadow: 0 1px 1px #7b8977; font-weight:bold; } #homepageMenu li a:hover{ color:#222222; text-decoration:none; } #homepageMenu ul{ margin-top:15px; list-style-image:none; list-style-type:none; } /* Move the menu icons 2 px up */ .menuIcon{ position:relative;bottom:2px; } /* END OF THE KAG-LIKE MENU */ /*====================================== KAG-styled nav bar, modified from above style */ .navbar{ text-align: center; width: 100%; background-color: #687364; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; border-spacing: 0 0; border: 1px solid #391a1a; margin-bottom: 0.5em; padding: 0.5em; border-radius: .7em; -moz-border-radius: .7em; -webkit-border-radius: .7em -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); } .navbar th{ color: #ffffff; border: none; text-shadow: 0 1px 1px black; background-color: #687364; padding: 0.5em; } .navbar th a{ color: #ffffff; text-shadow: 0 1px 1px black; } .navbar th a:hover{ color: #000000; text-decoration: none; text-shadow: 0 1px 1px #7b8977; } .navbar td{ border: none; padding: 0.5em; color: #333333; background: #687364; } .navbar td a{ color: #0c0c0c; text-shadow: 0 1px 1px #7b8977; } .navbar td a:hover{ color: #eaeaea; text-decoration: none; text-shadow: 0 1px 1px black; } /*====================================== Build menu table just like in the game */ .buildmenu{ width: 200px; height: 256px; background-position: 0 0; background-image: url('https://wiki.kag2d.com/images/d/d7/Buildmenu_bg.png'); background-position: left top; border-collapse: collapse; border: solid 1px transparent; text-align: center; padding: 0; margin-left: 10px; } .buildmenu td{ border: solid 1px transparent; border-spacing: 0; padding: 1px; margin: 0; } /*====================================== The first title, "Main Page" on the main page IT'S UGLY NOW must change it*/ #firstHeading{ text-shadow:; border-bottom:; } /* This will change the ugly links and links images inside a KAG-like menu(i hope)*/ #content #homepageMenu a.external, #content #homepageMenu a[href^="gopher://"] { background: none; } #content #homepageMenu a.external { color: #0c0c0c; } #content #homepageMenu a.external:hover { color: #222222; } #homepageMenu a{ padding:0 !important; } /*====================================== This is now the main table style that follows KAG military green-ish style */ .wikitableShiny{ text-align: center; width: 100%; background-color: #f3f3f3; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; border-spacing: 0 0; border: 1px solid #391a1a; margin-bottom: 1em; margin-top: 1em; padding: 0.5em; border-radius: .7em; -moz-border-radius: .7em; -webkit-border-radius: .7em } /*table header*/ .wikitableShiny th{ color: #ffffff; text-shadow: 0px 1px 1px black; background-color: #687364; border: 1px solid #f3f3f3; padding: 0.5em; } .wikitableShiny tr{ color: #333333; } .wikitableShiny tr:nth-of-type(odd) { background: #C4CEC0; } .wikitableShiny td{ border: none; padding: 0.5em; } /*====================================== build class and modifications USAGE EXAMPLE: <class="build buildLatest"> */ .build{ width:350px; background-color: #FEEFB3; color:#9F6000; text-align:center; border: 1px solid; padding:2px 0px 2px 0px; background-repeat: no-repeat; background-position: 10px center; background-image:url('https://wiki.kag2d.com/images/e/ee/BrokenHeartquest.png'); float:right; margin-left:10px; /* rounded corners */ border-radius: .7em; -moz-border-radius: .7em; -webkit-border-radius: .7em -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); } .buildOld{ background-image:url('images/4/48/BrokenHeart.png'); } .buildLatest{ background-color: #DFF2BF; color:#4F8A10; background-image:url('images/a/a0/GreenGem.png'); } /*====================================== Boxes for Announcements*/ .infobox{ width:500px; text-align:center; background-color:#B2C6EA; color:#496EAA; border: 2px solid; padding:2px 2px 2px 30px; background-repeat: no-repeat; background-position: 10px center; background-image:url('https://wiki.kag2d.com/images/e/ee/Bisonsmall.png'); //('https://wiki.kag2d.com/images/f/f6/Bison.png'); //('https://wiki.kag2d.com/images/3/36/Stoneblock8.png'); margin-left: auto; margin-right: auto; /* rounded corners */ border-radius: .7em; -moz-border-radius: .7em; -webkit-border-radius: .7em -webkit-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); -moz-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.4); } /* modified from above infobox add along infobox like this: <class="infobox obsoletebox"> */ .obsoletebox{ background-color:#8DA395; color:#4A544E; background-image:url('http://wiki.kag2d.com/images/6/61/Sack.png'); } .removalbox{ background-color:#E06767; color:#882626; background-image:url('https://wiki.kag2d.com/images/b/be/Explosion32px.png'); } .cleanupbox{ background-color:#B5B5B5; color:#515151; background-image:url('https://wiki.kag2d.com/images/e/e1/Dust32px.png'); } .unimplementedbox{ background-color:#009a9a; color:#003333; background-image:url('https://wiki.kag2d.com/images/3/34/Bulb1.png'); } /* When <div class="nonumtoc"> is used on the table of contents, the ToC will display without numbers */ .nonumtoc .tocnumber { display: none; } .nonumtoc #toc ul, .nonumtoc .toc ul{ line-height: 1.5em; list-style: none none; margin: .3em 0 0; padding: 0; } .nonumtoc #toc ul ul, .nonumtoc .toc ul ul{ margin: 0 0 0 2em; } /* Hide the title on the main page */ body.page-Main_Page h1.firstHeading { display:none; }