Difference between revisions of "MediaWiki:Vector.css"
From TerraFirmaCraft Wiki
Kittychanley (Talk | contribs) m (Ad margin) |
|||
(5 intermediate revisions by one other user not shown) | |||
Line 4: | Line 4: | ||
} | } | ||
#tfctopbar { | #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; | margin: 0; | ||
− | + | list-style:none; | |
} | } | ||
#tfctopbar ul { | #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 { | #tfctopbar li { | ||
− | + | float: left; | |
− | + | margin-top: 1px; | |
} | } | ||
#tfctopbar ul { | #tfctopbar ul { | ||
− | + | display:none; | |
− | + | list-style:none; | |
} | } | ||
#tfctopbar a { | #tfctopbar a { | ||
− | + | color:#bbbbbb; | |
− | + | text-decoration:none; | |
− | + | padding:0 9px; | |
− | + | display:block; | |
} | } | ||
#tfctopbar .right.drop { margin-left: 31px; } | #tfctopbar .right.drop { margin-left: 31px; } | ||
#tfctopbar .right { | #tfctopbar .right { | ||
− | + | float:right; | |
} | } | ||
#tfctopbar .right a { | #tfctopbar .right a { | ||
− | + | display:inline-block; | |
} | } | ||
#tfctopbar a:hover { | #tfctopbar a:hover { | ||
− | + | color:#fff; | |
} | } | ||
#tfctopbar li.drop:hover { | #tfctopbar li.drop:hover { | ||
− | + | background: #fff; | |
− | + | border: 1px solid #bebebe; | |
− | + | border-bottom: none; | |
− | + | margin-top:0; | |
} | } | ||
#tfctopbar li.drop:hover a { | #tfctopbar li.drop:hover a { | ||
− | + | color: #2d2d2d; | |
− | + | padding:0 8px; | |
} | } | ||
#tfctopbar li.drop:hover ul { | #tfctopbar li.drop:hover ul { | ||
− | + | display:block; | |
− | + | z-index: 5; | |
− | + | border-top: none; | |
margin-top: 0; | margin-top: 0; | ||
} | } | ||
#tfctopbar ul li { | #tfctopbar ul li { | ||
− | + | float:none; | |
− | + | line-height:30px; | |
} | } | ||
#tfctopbar ul li a { | #tfctopbar ul li a { | ||
− | + | color:#2d2d2d; | |
− | + | padding:0 20px !important; | |
− | + | display:block !important; | |
} | } | ||
#tfctopbar ul li:hover { | #tfctopbar ul li:hover { | ||
− | + | border:none; | |
} | } | ||
#tfctopbar ul li:hover a { | #tfctopbar ul li:hover a { | ||
− | + | color:#2d2d2d; | |
− | + | background-color:#f5f5f5; | |
} | } | ||
#tfctopbar .content { | #tfctopbar .content { | ||
− | + | margin-left:40px; | |
− | + | display:block; | |
− | + | font-size:13px; | |
− | + | line-height:17px; | |
} | } | ||
#tfctopbar .content a { | #tfctopbar .content a { | ||
− | + | padding:0 !important; | |
− | + | font-weight:normal; | |
} | } | ||
#tfctopbar .content a.new { | #tfctopbar .content a.new { | ||
− | + | font-weight:bold; | |
} | } | ||
#tfctopbar .inbox li:hover a { | #tfctopbar .inbox li:hover a { | ||
− | + | background:transparent; | |
} | } | ||
#tfctopbar .inbox { | #tfctopbar .inbox { | ||
− | + | width:300px; | |
− | + | padding:5px; | |
− | + | margin-left:-150px; | |
} | } | ||
#tfctopbar .inbox li { | #tfctopbar .inbox li { | ||
− | + | margin-bottom:8px; | |
} | } | ||
#tfctopbar .inbox .head { | #tfctopbar .inbox .head { | ||
− | + | color:#595959; | |
− | + | font-weight:normal; | |
− | + | font-size:16px; | |
− | + | border-bottom: 1px solid #ececec; | |
} | } | ||
#tfctopbar .inbox .head .right { | #tfctopbar .inbox .head .right { | ||
− | + | font-size:11px; | |
} | } | ||
#tfctopbar .inbox .head .right a { | #tfctopbar .inbox .head .right a { | ||
− | + | padding:0 4px !important; | |
} | } | ||
.pmnum { | .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 { | .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 { | .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 { | #tfctopbar li.drop:hover .outside-icon { | ||
− | + | margin-left: -25px; | |
} | } | ||
.meta { | .meta { | ||
− | + | font-size: 11px !important; | |
− | + | color:#a4a4a4; | |
} | } | ||
.ipsUserPhoto { | .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 { | .outside-icon { | ||
− | + | position: absolute; | |
− | + | margin-left: -24px; | |
− | + | cursor: pointer; | |
− | + | height: 30px; | |
} | } | ||
.m-icon { | .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 { | .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 { | .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 { | #tfctopbar li .profile .ipsUserPhoto { | ||
− | + | width: 55px; | |
− | + | height: 55px; | |
} | } | ||
#tfctopbar li .profile { | #tfctopbar li .profile { | ||
− | + | width: 340px; | |
− | + | margin-left: -280px !important; | |
− | + | padding: 10px; | |
} | } | ||
#tfctopbar li .profile form { | #tfctopbar li .profile form { | ||
− | + | display: inline-block; | |
− | + | margin-left: 15px; | |
} | } | ||
#tfctopbar li .profile li { | #tfctopbar li .profile li { | ||
− | + | width: 270px; | |
− | + | margin-left:70px; | |
− | + | line-height: 24px; | |
} | } | ||
#tfctopbar li .profile li.head { | #tfctopbar li .profile li.head { | ||
− | + | margin: 0 0 10px; | |
− | + | width: 340px; | |
} | } | ||
#tfctopbar li .profile a { | #tfctopbar li .profile a { | ||
− | + | width: 130px; | |
− | + | display: inline-block !important; | |
− | + | padding: 0 !important; | |
− | + | font-weight: normal; | |
} | } | ||
#tfctopbar .profile li:hover a { | #tfctopbar .profile li:hover a { | ||
− | + | background-color: transparent; | |
} | } | ||
#tfctopbar .profile input { | #tfctopbar .profile input { | ||
− | + | padding: 2px 5px; | |
− | + | color: #666; | |
} | } | ||
#tfctopbar .notifications { | #tfctopbar .notifications { | ||
− | + | width:300px; | |
− | + | padding:5px; | |
− | + | margin-left:-150px; | |
} | } | ||
#tfctopbar .notifications li { | #tfctopbar .notifications li { | ||
− | + | margin-bottom: 8px; | |
} | } | ||
#tfctopbar .notifications li:hover a { | #tfctopbar .notifications li:hover a { | ||
− | + | background:transparent; | |
} | } | ||
#tfctopbar .notifications .head { | #tfctopbar .notifications .head { | ||
− | + | color:#595959; | |
− | + | font-weight:normal; | |
− | + | font-size:16px; | |
− | + | border-bottom: 1px solid #ececec; | |
} | } | ||
#tfctopbar .notifications .meta { | #tfctopbar .notifications .meta { | ||
− | + | display: block; | |
} | } | ||
#tfctopbar .notifications .head .right { | #tfctopbar .notifications .head .right { | ||
− | + | font-size:11px; | |
} | } | ||
#tfctopbar .notifications .head .right a { | #tfctopbar .notifications .head .right a { | ||
− | + | padding:0 4px !important; | |
} | } | ||
#tfctopbar .notifications .content { | #tfctopbar .notifications .content { | ||
− | + | font-weight: normal; | |
− | + | font-size: 12px; | |
− | + | line-height: 13px; | |
} | } | ||
#tfctopbar .notifications .content a { | #tfctopbar .notifications .content a { | ||
− | + | display: inline !important; | |
} | } | ||
Line 289: | Line 289: | ||
/* Give the background the initial stone texture */ | /* Give the background the initial stone texture */ | ||
body { | body { | ||
− | + | background-color: #202020; | |
− | + | background-image: url("/resources/assets/Background.png"); | |
− | + | margin-top: 30px; | |
margin-top: 0; | margin-top: 0; | ||
} | } | ||
Line 297: | Line 297: | ||
/* Add the grass block background */ | /* Add the grass block background */ | ||
#mw-page-base { | #mw-page-base { | ||
− | + | background-color: #8DBDE9; | |
− | + | background-image: url("/resources/assets/Header-background-alt.png"); | |
− | + | height: 10em | |
} | } | ||
/* Position the #content area and add the cloud detail image */ | /* Position the #content area and add the cloud detail image */ | ||
#mw-head-base { | #mw-head-base { | ||
− | + | background-image: url("/resources/assets/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 */ | /* Position the header area and give it a fake 3D background to go over the top-right of the #content area */ | ||
#mw-head { | #mw-head { | ||
− | + | background-image: url("/resources/assets/Vector-tabs-background-alt.png"); | |
− | + | background-position: bottom right; | |
− | + | background-repeat: no-repeat; | |
− | + | margin-right: 10px; | |
− | + | height: 103px; | |
− | + | margin-top: 0 !important; | |
} | } | ||
Line 325: | Line 325: | ||
#mw-panel a:visited, | #mw-panel a:visited, | ||
#footer a { | #footer a { | ||
− | + | color: #BFBFBF !important | |
} | } | ||
#p-personal a, | #p-personal a, | ||
Line 336: | Line 336: | ||
#ft a:hover, | #ft a:hover, | ||
#ft a:focus { | #ft a:focus { | ||
− | + | color: #FFF !important | |
} | } | ||
#left-navigation a, | #left-navigation a, | ||
#right-navigation #p-views a { | #right-navigation #p-views a { | ||
− | + | color: #000; | |
− | + | font-weight: bold; | |
− | + | text-decoration: none; | |
} | } | ||
#p-personal a.new, | #p-personal a.new, | ||
#left-navigation li.new a, | #left-navigation li.new a, | ||
#right-navigation #p-views li.new a { | #right-navigation #p-views li.new a { | ||
− | + | color: #BA0000 !important | |
} | } | ||
/* Position the first set of tabs (page/discussion/etc.) */ | /* Position the first set of tabs (page/discussion/etc.) */ | ||
#left-navigation { | #left-navigation { | ||
− | + | margin-left: 183px; | |
− | + | margin-top: 67px; | |
} | } | ||
/* Give the user details area some colouring */ | /* Give the user details area some colouring */ | ||
#p-personal { | #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 { | #p-personal li { | ||
− | + | margin: 0.5em 0 0.5em 0.75em | |
} | } | ||
#p-personal ul { | #p-personal ul { | ||
− | + | padding-left: 0 | |
} | } | ||
/* Give the tabs and menu tabs the grass block styling */ | /* Give the tabs and menu tabs the grass block styling */ | ||
div.vectorTabs { | div.vectorTabs { | ||
− | + | background-image: none; | |
− | + | height: 36px; | |
− | + | padding-left: 0 | |
} | } | ||
div.vectorTabs ul { | div.vectorTabs ul { | ||
− | + | background-image: none | |
} | } | ||
div.vectorTabs ul li, | div.vectorTabs ul li, | ||
div.vectorMenu { | div.vectorMenu { | ||
− | + | background-image: url("/resources/assets/Vector-tabs-alt.png") !important; | |
− | + | background-position: right top; | |
− | + | background-color: transparent; | |
− | + | padding-left: 6px; | |
− | + | margin-right: 7px | |
} | } | ||
div.vectorTabs span { | div.vectorTabs span { | ||
− | + | background-image: none !important; | |
} | } | ||
div.vectorTabs li span, | div.vectorTabs li span, | ||
div.vectorMenu h5 { | div.vectorMenu h5 { | ||
− | + | background-image: url("/resources/assets/Vector-tabs-alt.png") !important; | |
− | + | background-position: right top !important; | |
− | + | height: 36px; | |
− | + | float: left; | |
} | } | ||
div.vectorTabs li.selected span, | div.vectorTabs li.selected span, | ||
div.vectorTabs li span:hover, | div.vectorTabs li span:hover, | ||
div.vectorMenu:hover h5 { | div.vectorMenu:hover h5 { | ||
− | + | background-position: right bottom !important | |
} | } | ||
div.vectorTabs li a { | div.vectorTabs li a { | ||
− | + | background-image: none; | |
− | + | padding: 15px 14px 0; | |
− | + | height: 21px | |
} | } | ||
#left-navigation .vectorTabs li:first-child { | #left-navigation .vectorTabs li:first-child { | ||
− | + | padding: 0; | |
− | + | background-image: none | |
} | } | ||
/* Position the second set of tabs (read/edit/search/etc.) */ | /* Position the second set of tabs (read/edit/search/etc.) */ | ||
#right-navigation { | #right-navigation { | ||
− | + | margin-top: 50px | |
} | } | ||
#right-navigation .vectorTabs, | #right-navigation .vectorTabs, | ||
#right-navigation .vectorMenu { | #right-navigation .vectorMenu { | ||
− | + | margin-top: 17px | |
} | } | ||
Line 426: | Line 426: | ||
#ca-watch.icon a, | #ca-watch.icon a, | ||
#ca-unwatch.icon a { | #ca-unwatch.icon a { | ||
− | + | background-image: url("/resources/assets/Watch-icons.png"); | |
− | + | -webkit-background-clip: content-box; | |
− | + | background-clip: content-box | |
} | } | ||
#ca-watch.icon a, | #ca-watch.icon a, | ||
#ca-watch.icon a:focus { | #ca-watch.icon a:focus { | ||
− | + | background-position: 13px 15px | |
} | } | ||
#ca-unwatch.icon a, | #ca-unwatch.icon a, | ||
#ca-unwatch.icon a:focus { | #ca-unwatch.icon a:focus { | ||
− | + | background-position: -3px 15px | |
} | } | ||
#ca-watch.icon a:hover { | #ca-watch.icon a:hover { | ||
− | + | background-position: 13px -1px | |
} | } | ||
#ca-unwatch.icon a:hover { | #ca-unwatch.icon a:hover { | ||
− | + | background-position: -3px -1px | |
} | } | ||
#ca-watch.icon a, | #ca-watch.icon a, | ||
Line 448: | Line 448: | ||
#ca-unwatch.icon a.loading, | #ca-unwatch.icon a.loading, | ||
#ca-watch.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-unwatch.icon a.loading, | ||
#ca-watch.icon a.loading { | #ca-watch.icon a.loading { | ||
− | + | background-image: url("/resources/assets/Watch.gif"); | |
− | + | background-position: 13px 15px | |
} | } | ||
/* Styling for the menu tab and its menu */ | /* Styling for the menu tab and its menu */ | ||
div.vectorMenu h5 { | div.vectorMenu h5 { | ||
− | + | margin-left: 0 !important | |
} | } | ||
div.vectorMenu h5 a { | div.vectorMenu h5 a { | ||
− | + | height: 36px; | |
− | + | background-position: 11px 15px; | |
− | + | padding-right: 6px; | |
− | + | padding-left: 7px | |
} | } | ||
div.vectorMenu div.menu ul { | div.vectorMenu div.menu ul { | ||
− | + | background: #E6EFF4 | |
} | } | ||
/* Position the general search area */ | /* Position the general search area */ | ||
#p-search { | #p-search { | ||
− | + | margin: 0 0 0 12px; | |
} | } | ||
/* The suggestions shown under the search bar */ | /* The suggestions shown under the search bar */ | ||
.suggestions:last-of-type { | .suggestions:last-of-type { | ||
− | + | width: 217px !important; | |
− | + | top: 112px !important; | |
− | + | right: 28px !important | |
} | } | ||
.suggestions:last-of-type .suggestions-results, | .suggestions:last-of-type .suggestions-results, | ||
.suggestions:last-of-type .suggestions-special { | .suggestions:last-of-type .suggestions-special { | ||
− | + | background-color: #DBDADA; | |
− | + | border-color: #3C3B3B | |
} | } | ||
.suggestions:last-of-type .suggestions-result-current { | .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 */ | /* Give the main content area its healthy blue glow and add a border and some margin to help with the 3D effect */ | ||
#content { | #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 */ | /* 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 { | ul { | ||
− | + | list-style-image: none | |
} | } | ||
Line 509: | Line 509: | ||
.mw-warning-with-logexcerpt, | .mw-warning-with-logexcerpt, | ||
.errorbox { | .errorbox { | ||
− | + | background-color: #FCC; | |
− | + | border: 2px solid #FAA !important | |
} | } | ||
.warningbox { | .warningbox { | ||
− | + | background-color: #FFC; | |
− | + | border: 2px solid #FFA | |
} | } | ||
.successbox { | .successbox { | ||
− | + | background-color: #CFC; | |
− | + | border: 2px solid #AFA | |
} | } | ||
.successbox strong p { | .successbox strong p { | ||
− | + | margin: 0 | |
} | } | ||
.mw-warning-with-logexcerpt, | .mw-warning-with-logexcerpt, | ||
Line 527: | Line 527: | ||
.warningbox, | .warningbox, | ||
.successbox { | .successbox { | ||
− | + | padding: 3px 12px !important | |
} | } | ||
/* Add white background to some areas */ | /* Add white background to some areas */ | ||
#userlogin, #userloginForm, #asirra_ChallengeTableDiv { | #userlogin, #userloginForm, #asirra_ChallengeTableDiv { | ||
− | + | background-color: #FFF; | |
} | } | ||
/* Get rid of stupid white backgrounds on the diff area */ | /* Get rid of stupid white backgrounds on the diff area */ | ||
table.diff, td.diff-otitle, td.diff-ntitle { | table.diff, td.diff-otitle, td.diff-ntitle { | ||
− | + | background-color: transparent !important | |
} | } | ||
/* Get rid of stupid white borders on page history */ | /* Get rid of stupid white borders on page history */ | ||
#pagehistory li { | #pagehistory li { | ||
− | + | border-color: transparent | |
} | } | ||
Line 556: | Line 556: | ||
table.wikitable, | table.wikitable, | ||
ul#filetoc { | ul#filetoc { | ||
− | + | background-color: #DDE7EF | |
} | } | ||
.wikitable th { | .wikitable th { | ||
− | + | background-color: #C2D2DF | |
} */ | } */ | ||
/* Get rid of stupid white borders on galleries and replace the space they created with an actual margin */ | /* Get rid of stupid white borders on galleries and replace the space they created with an actual margin */ | ||
li.gallerybox { | li.gallerybox { | ||
− | + | border: none; | |
− | + | margin: 2px | |
} | } | ||
Line 570: | Line 570: | ||
#preftoc, | #preftoc, | ||
#preftoc li { | #preftoc li { | ||
− | + | background-image: url("/resources/assets/Pref-tab-border.png") | |
} | } | ||
#preftoc li.selected a { | #preftoc li.selected a { | ||
− | + | background-image: url("/resources/assets/Pref-tab-bg.png") | |
} | } | ||
/* Use the logo area to add a 3D effect to the first tab */ | /* Use the logo area to add a 3D effect to the first tab */ | ||
#p-logo { | #p-logo { | ||
− | + | background-image: url("/resources/assets/Vector-tabs-first-alt.png"); | |
− | + | background-position: right bottom; | |
− | + | background-repeat: no-repeat; | |
− | + | width: 10.4em; | |
− | + | top: -160px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
/* Replace divider and arrows in the sidebar with similar images that have actual transparency */ | /* Replace divider and arrows in the sidebar with similar images that have actual transparency */ | ||
#mw-panel.collapsible-nav div.portal { | #mw-panel.collapsible-nav div.portal { | ||
− | + | background-image: url("/resources/assets/Panel-divider.png") !important; | |
− | + | margin-top: 10px; | |
} | } | ||
#mw-panel.collapsible-nav div.first { | #mw-panel.collapsible-nav div.first { | ||
− | + | background-image: none !important | |
} | } | ||
#mw-panel.collapsible-nav div h5, | #mw-panel.collapsible-nav div h5, | ||
div.vectorMenu h5 a { | div.vectorMenu h5 a { | ||
− | + | background-image: url("/resources/assets/Arrow-down.png") !important | |
} | } | ||
#mw-panel.collapsible-nav div.collapsed h5 { | #mw-panel.collapsible-nav div.collapsed h5 { | ||
− | + | background-image: url("/resources/assets/Arrow-right.png") !important | |
} | } | ||
/* Use the footer to add a fake 3D background over the bottom-left of the content area */ | /* Use the footer to add a fake 3D background over the bottom-left of the content area */ | ||
#footer { | #footer { | ||
− | + | background-image: url("/resources/assets/Content-background.png") !important; | |
− | + | background-repeat: no-repeat !important; | |
− | + | margin-top: -5px !important; | |
margin-left: 168px !important; | margin-left: 168px !important; | ||
− | + | padding-top: 17px !important; | |
} | } | ||
#buttonFix { | #buttonFix { | ||
− | + | background-image: url("/resources/assets/Vector-tabs-alt.png") !important; | |
− | + | background-position: left top; | |
− | + | height: 36px; | |
− | + | width: 6px; | |
− | + | position: absolute; | |
− | + | margin-left: -6px; | |
} | } | ||
Line 627: | Line 624: | ||
/* force the display of the contents of the section */ | /* force the display of the contents of the section */ | ||
− | #p-googleadsense | + | #p-googleadsense body { |
− | + | display:block !important; | |
} | } | ||
/* Option 1: hide the header */ | /* Option 1: hide the header */ | ||
#p-googleadsense h3 { | #p-googleadsense h3 { | ||
− | + | display:none !important; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
div#p-googleadsense.portal { | div#p-googleadsense.portal { | ||
− | + | margin-left: -21px !important; | |
− | + | background-image: none !important; | |
+ | } | ||
+ | |||
+ | div#p-googleadsense.portal.sticky { | ||
+ | border: none; | ||
+ | position: fixed !important; | ||
+ | top: 0; | ||
+ | margin-left: -21px; | ||
+ | background-image: none !important; | ||
+ | } | ||
div#mw-panel div.portal h3, div#mw-panel div.portal h5 { | div#mw-panel div.portal h3, div#mw-panel div.portal h5 { | ||
Line 677: | Line 676: | ||
} | } | ||
div.vectorMenu h3#p-cactions-label a { | div.vectorMenu h3#p-cactions-label a { | ||
− | background-image: url( | + | background-image: url("/skins/vector/images/arrow-down-icon.png") !important; |
background-position: 2px 14px; | background-position: 2px 14px; | ||
} | } | ||
div.vectorMenu h3#p-cactions-label a:hover { | div.vectorMenu h3#p-cactions-label a:hover { | ||
− | background-image: url( | + | background-image: url("/skins/vector/images/arrow-down-focus-icon.png") !important; |
background-position: 2px 14px; | background-position: 2px 14px; | ||
} | } |
Latest revision as of 13:10, 1 March 2020
/* 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("/resources/assets/Background.png"); margin-top: 30px; margin-top: 0; } /* Add the grass block background */ #mw-page-base { background-color: #8DBDE9; background-image: url("/resources/assets/Header-background-alt.png"); height: 10em } /* Position the #content area and add the cloud detail image */ #mw-head-base { background-image: url("/resources/assets/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("/resources/assets/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("/resources/assets/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("/resources/assets/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("/resources/assets/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("/resources/assets/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("/resources/assets/Pref-tab-border.png") } #preftoc li.selected a { background-image: url("/resources/assets/Pref-tab-bg.png") } /* Use the logo area to add a 3D effect to the first tab */ #p-logo { background-image: url("/resources/assets/Vector-tabs-first-alt.png"); background-position: right bottom; background-repeat: no-repeat; width: 10.4em; top: -160px; } /* Replace divider and arrows in the sidebar with similar images that have actual transparency */ #mw-panel.collapsible-nav div.portal { background-image: url("/resources/assets/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("/resources/assets/Arrow-down.png") !important } #mw-panel.collapsible-nav div.collapsed h5 { background-image: url("/resources/assets/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("/resources/assets/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("/resources/assets/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:-21px !important; } /* force the display of the contents of the section */ #p-googleadsense body { display:block !important; } /* Option 1: hide the header */ #p-googleadsense h3 { display:none !important; } div#p-googleadsense.portal { margin-left: -21px !important; background-image: none !important; } div#p-googleadsense.portal.sticky { border: none; position: fixed !important; top: 0; margin-left: -21px; background-image: none !important; } 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("/skins/vector/images/arrow-down-icon.png") !important; background-position: 2px 14px; } div.vectorMenu h3#p-cactions-label a:hover { background-image: url("/skins/vector/images/arrow-down-focus-icon.png") !important; background-position: 2px 14px; } div.vectorMenu h3#p-cactions-label span { display:none; } 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; }