MediaWiki:Vector.css
From TerraFirmaCraft Wiki
Revision as of 00:43, 21 July 2016 by Kittychanley (Talk | contribs)
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
/* CSS placed here will affect users of the Vector skin */ #ttb { margin-top: -30px; } #tfctopbar { font-family:'PT Sans', arial, serif; background-color:#2d2d2d; border-bottom:1px #000 solid; font-size:13px; font-weight:bold; line-height:30px; height:29px; padding:0 6px; margin: 0; list-style:none; } #tfctopbar ul { position: absolute; list-style: none; top: 30px; text-align: left; z-index:-1; border: 1px solid #bebebe; background: #fff; -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2); margin-left: -1px; } #tfctopbar li { float: left; margin-top: 1px; } #tfctopbar ul { display:none; list-style:none; } #tfctopbar a { color:#bbbbbb; text-decoration:none; padding:0 9px; display:block; } #tfctopbar .right.drop { margin-left: 31px; } #tfctopbar .right { float:right; } #tfctopbar .right a { display:inline-block; } #tfctopbar a:hover { color:#fff; } #tfctopbar li.drop:hover { background: #fff; border: 1px solid #bebebe; border-bottom: none; margin-top:0; } #tfctopbar li.drop:hover a { color: #2d2d2d; padding:0 8px; } #tfctopbar li.drop:hover ul { display:block; z-index: 5; border-top: none; margin-top: 0; } #tfctopbar ul li { float:none; line-height:30px; } #tfctopbar ul li a { color:#2d2d2d; padding:0 20px !important; display:block !important; } #tfctopbar ul li:hover { border:none; } #tfctopbar ul li:hover a { color:#2d2d2d; background-color:#f5f5f5; } #tfctopbar .content { margin-left:40px; display:block; font-size:13px; line-height:17px; } #tfctopbar .content a { padding:0 !important; font-weight:normal; } #tfctopbar .content a.new { font-weight:bold; } #tfctopbar .inbox li:hover a { background:transparent; } #tfctopbar .inbox { width:300px; padding:5px; margin-left:-150px; } #tfctopbar .inbox li { margin-bottom:8px; } #tfctopbar .inbox .head { color:#595959; font-weight:normal; font-size:16px; border-bottom: 1px solid #ececec; } #tfctopbar .inbox .head .right { font-size:11px; } #tfctopbar .inbox .head .right a { padding:0 4px !important; } .pmnum { padding: 0px 4px !important; height: 12px; line-height: 12px; background: #cf2020; color: #fff !important; font-size: 9px; text-align: center; -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset; -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset; box-shadow: 0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; position: absolute; top: 3px; left: -3px; } .b-icon { width: 21px; height: 21px; margin-top: 4px; margin-right:5px; background-image: url(../wp-includes/images/admin-bar-sprite.png?d=20120830); background-position: 0 -76px; background-repeat: no-repeat; float:left; display:inline-block; } .f-icon { width: 21px; height: 21px; margin-top: 6px; margin-right:5px; background-image:url(profile.png); background-repeat: no-repeat; float:left; display:inline-block; } #tfctopbar li.drop:hover .outside-icon { margin-left: -25px; } .meta { font-size: 11px !important; color:#a4a4a4; } .ipsUserPhoto { width:30px; height:30px; float:left; padding: 1px; border: 1px solid #d5d5d5; background: #fff; -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1); box-shadow: 0px 2px 2px rgba(0,0,0,0.1); } .outside-icon { position: absolute; margin-left: -24px; cursor: pointer; height: 30px; } .m-icon { width: 21px; height: 21px; margin-top: 6px; margin-right:5px; background-image:url(messages.png); background-repeat: no-repeat; float:left; display:inline-block; } .n-icon { width: 21px; height: 21px; margin-top: 6px; margin-right:5px; background-image:url(notifications.png); background-repeat: no-repeat; float:left; display:inline-block; } .w-icon { width: 21px; height: 21px; margin-top: 4px; margin-right:5px; background-image:url(wlogo.png); background-repeat: no-repeat; float:left; display:inline-block; } #tfctopbar li .profile .ipsUserPhoto { width: 55px; height: 55px; } #tfctopbar li .profile { width: 340px; margin-left: -280px !important; padding: 10px; } #tfctopbar li .profile form { display: inline-block; margin-left: 15px; } #tfctopbar li .profile li { width: 270px; margin-left:70px; line-height: 24px; } #tfctopbar li .profile li.head { margin: 0 0 10px; width: 340px; } #tfctopbar li .profile a { width: 130px; display: inline-block !important; padding: 0 !important; font-weight: normal; } #tfctopbar .profile li:hover a { background-color: transparent; } #tfctopbar .profile input { padding: 2px 5px; color: #666; } #tfctopbar .notifications { width:300px; padding:5px; margin-left:-150px; } #tfctopbar .notifications li { margin-bottom: 8px; } #tfctopbar .notifications li:hover a { background:transparent; } #tfctopbar .notifications .head { color:#595959; font-weight:normal; font-size:16px; border-bottom: 1px solid #ececec; } #tfctopbar .notifications .meta { display: block; } #tfctopbar .notifications .head .right { font-size:11px; } #tfctopbar .notifications .head .right a { padding:0 4px !important; } #tfctopbar .notifications .content { font-weight: normal; font-size: 12px; line-height: 13px; } #tfctopbar .notifications .content a { display: inline !important; } /*** Thanks to http://www.minecraftwiki.net/wiki/MediaWiki:Vector.css for the Minecraft Skin ***/ /** Re-styles the vector skin to look similar to the http://www.minecraftforum.net skin **/ /* Give the background the initial stone texture */ body { background-color: #202020; background-image: url("http://terrafirmacraft.com/mcw/Background.png"); margin-top: 30px; margin-top: 0; } /* Add the grass block background */ #mw-page-base { background-color: #8DBDE9; background-image: url("http://terrafirmacraft.com/mcw/Header-background-alt.png"); height: 10em } /* Position the #content area and add the cloud detail image */ #mw-head-base { background-image: url("http://terrafirmacraft.com/mcw/Clouds-distance2.png"); background-position: left 6px; background-repeat: repeat-x; height: 103px; margin: -160px 10px 0 10.4em !important; } /* Position the header area and give it a fake 3D background to go over the top-right of the #content area */ #mw-head { background-image: url("http://terrafirmacraft.com/mcw/Vector-tabs-background-alt.png"); background-position: bottom right; background-repeat: no-repeat; margin-right: 10px; height: 103px; margin-top: 0 !important; } /* Set up the link colours and make tabs bold */ #mw-panel a, #mw-panel a:visited, #footer a { color: #BFBFBF !important } #p-personal a, #mw-panel h5, #footer ul li, #mw-panel a:hover, #mw-panel a:focus, #footer a:hover, #footer a:focus, #ft a:hover, #ft a:focus { color: #FFF !important } #left-navigation a, #right-navigation #p-views a { color: #000; font-weight: bold; text-decoration: none; } #p-personal a.new, #left-navigation li.new a, #right-navigation #p-views li.new a { color: #BA0000 !important } /* Position the first set of tabs (page/discussion/etc.) */ #left-navigation { margin-left: 183px; margin-top: 67px; } /* Give the user details area some colouring */ #p-personal { background-color: rgba(69, 74, 76, 0.5); border: 1px solid #191E22; right: 0; padding-right: 0.55em; margin-top: 0 } #p-personal li { margin: 0.5em 0 0.5em 0.75em } #p-personal ul { padding-left: 0 } /* Give the tabs and menu tabs the grass block styling */ div.vectorTabs { background-image: none; height: 36px; padding-left: 0 } div.vectorTabs ul { background-image: none } div.vectorTabs ul li, div.vectorMenu { background-image: url("http://terrafirmacraft.com/mcw/Vector-tabs-alt.png") !important; background-position: right top; background-color: transparent; padding-left: 6px; margin-right: 7px } div.vectorTabs span { background-image: none !important; } div.vectorTabs li span, div.vectorMenu h5 { background-image: url("http://terrafirmacraft.com/mcw/Vector-tabs-alt.png") !important; background-position: right top !important; height: 36px; float: left; } div.vectorTabs li.selected span, div.vectorTabs li span:hover, div.vectorMenu:hover h5 { background-position: right bottom !important } div.vectorTabs li a { background-image: none; padding: 15px 14px 0; height: 21px } #left-navigation .vectorTabs li:first-child { padding: 0; background-image: none } /* Position the second set of tabs (read/edit/search/etc.) */ #right-navigation { margin-top: 50px } #right-navigation .vectorTabs, #right-navigation .vectorMenu { margin-top: 17px } /* Hide watch tab's text and put an icon in */ #ca-watch.icon a, #ca-unwatch.icon a { background-image: url("http://terrafirmacraft.com/mcw/Watch-icons.png"); -webkit-background-clip: content-box; background-clip: content-box } #ca-watch.icon a, #ca-watch.icon a:focus { background-position: 13px 15px } #ca-unwatch.icon a, #ca-unwatch.icon a:focus { background-position: -3px 15px } #ca-watch.icon a:hover { background-position: 13px -1px } #ca-unwatch.icon a:hover { background-position: -3px -1px } #ca-watch.icon a, #ca-unwatch.icon a, #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { text-indent: 40px; height: 16px; width: 16px; padding: 15px 14px 6px } #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { background-image: url("http://terrafirmacraft.com/mcw/Watch.gif"); background-position: 13px 15px } /* Styling for the menu tab and its menu */ div.vectorMenu h5 { margin-left: 0 !important } div.vectorMenu h5 a { height: 36px; background-position: 11px 15px; padding-right: 6px; padding-left: 7px } div.vectorMenu div.menu ul { background: #E6EFF4 } /* Position the general search area */ #p-search { margin: 0 0 0 12px; } /* The suggestions shown under the search bar */ .suggestions:last-of-type { width: 217px !important; top: 112px !important; right: 28px !important } .suggestions:last-of-type .suggestions-results, .suggestions:last-of-type .suggestions-special { background-color: #DBDADA; border-color: #3C3B3B } .suggestions:last-of-type .suggestions-result-current { background-color: highlight !important } /* Give the main content area its healthy blue glow and add a border and some margin to help with the 3D effect */ #content { background: #E6EFF4 !important; border-top: 6px solid #B4BEC3; border-left: 6px solid #171717; margin-right: 10px } /* Don't use vector's blue circle image for unordered lists, instead use the square black bullet points, which is obviously more fitting here */ ul { list-style-image: none } /* Various styling for message boxes, based on colours/styling from [[Template:Msgbox]] */ .mw-warning-with-logexcerpt, .errorbox { background-color: #FCC; border: 2px solid #FAA !important } .warningbox { background-color: #FFC; border: 2px solid #FFA } .successbox { background-color: #CFC; border: 2px solid #AFA } .successbox strong p { margin: 0 } .mw-warning-with-logexcerpt, .errorbox, .warningbox, .successbox { padding: 3px 12px !important } /* Add white background to some areas */ #userlogin, #userloginForm, #asirra_ChallengeTableDiv { background-color: #FFF; } /* Get rid of stupid white backgrounds on the diff area */ table.diff, td.diff-otitle, td.diff-ntitle { background-color: transparent !important } /* Get rid of stupid white borders on page history */ #pagehistory li { border-color: transparent } /* Some of the default elements in the content area could do with a colour change due to the background colour change, however no suitable ones have been found, so these are disabled for now. #pagehistory li.selected, pre, li.gallerybox, #toc, div.thumbinner, .catlinks, td.diff-context, code, table.wikitable, ul#filetoc { background-color: #DDE7EF } .wikitable th { background-color: #C2D2DF } */ /* Get rid of stupid white borders on galleries and replace the space they created with an actual margin */ li.gallerybox { border: none; margin: 2px } /* Same as the default preferences tabs images, but with the blue background colour instead of white */ #preftoc, #preftoc li { background-image: url("http://terrafirmacraft.com/mcw/Pref-tab-border.png") } #preftoc li.selected a { background-image: url("http://terrafirmacraft.com/mcw/Pref-tab-bg.png") } /* Use the logo area to add a 3D effect to the first tab */ #p-logo { background-image: url("http://terrafirmacraft.com/mcw/Vector-tabs-first-alt.png"); background-position: right bottom; background-repeat: no-repeat; width: 10.4em; top: -160px; } #p-logo a { background-image: url("http://terrafirmacraft.com/mcw/tfcwlogo.png") !important; } /* Replace divider and arrows in the sidebar with similar images that have actual transparency */ #mw-panel.collapsible-nav div.portal { background-image: url("http://terrafirmacraft.com/mcw/Panel-divider.png") !important; margin-top: 10px; } #mw-panel.collapsible-nav div.first { background-image: none !important } #mw-panel.collapsible-nav div h5, div.vectorMenu h5 a { background-image: url("http://terrafirmacraft.com/mcw/Arrow-down.png") !important } #mw-panel.collapsible-nav div.collapsed h5 { background-image: url("http://terrafirmacraft.com/mcw/Arrow-right.png") !important } /* Use the footer to add a fake 3D background over the bottom-left of the content area */ #footer { background-image: url("http://terrafirmacraft.com/mcw/Content-background.png") !important; background-repeat: no-repeat !important; margin-top: -5px !important; margin-left: 168px !important; padding-top: 17px !important; } #buttonFix { background-image: url("http://terrafirmacraft.com/mcw/Vector-tabs-alt.png") !important; background-position: left top; height: 36px; width: 6px; position: absolute; margin-left: -6px; } /* Fix Google AdSense */ #p-googleadsense ins { margin-left:-17px !important; } /* force the display of the contents of the section */ #p-googleadsense .body { display:block !important; } #tp-googleadsense.sticky { position: fixed; top: 0; } div#mw-panel div.portal h3, div#mw-panel div.portal h5 { color: #82b67a; font-weight:bold; } #mw-panel #n-Donate-to-Kitty { padding: 0 !important; background: #84b87c; text-align: center; font-weight: bold; } #mw-panel #n-Donate-to-Kitty:hover { background: #fff; } #mw-panel #n-Donate-to-Kitty a { font-size: 14px; display: block; padding: 5px; color: #fff !important; } #mw-panel #n-Donate-to-Kitty a:hover { text-decoration: none; color: #84b87c !important; } /* Fix Stuff */ #p-cactions-label { height: 36px; width: 24px; } div.vectorMenu h3#p-cactions-label a { background-image: url(http://wiki.terrafirmacraft.com/skins/vector/images/arrow-down-icon.png) !important; background-position: 2px 14px; } div.vectorMenu h3#p-cactions-label a:hover { background-image: url(http://wiki.terrafirmacraft.com/skins/vector/images/arrow-down-focus-icon.png) !important; background-position: 2px 14px; } div.vectorMenu div.menu { margin-left: -6px; } div#content { margin-left: 10.5em; border: none; border-top: 6px solid #B4BEC3; border-left: 6px solid #171717; margin-top: -6px; } div.vectorTabs ul li, div.vectorMenu { background-position: left top; } /* Fix Knapping Grid */ .grid-Knapping [class="grid"] { background: transparent !important; margin: 0; padding: 0; } .grid-Knapping [class="grid"] .border, .grid-Knapping [class="grid"] .border > span { border: none; margin: 0; padding: 0; } .grid-Knapping td { width:32px; height:32px; }