MediaWiki:Vector.css

Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

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

/** Re-styles the vector skin to look similar to the http://www.minecraftforum.net skin **/
/* Thanks to Minecraft Wiki for the CSS */
/* Give the background the initial stone texture */
body {
    background-color: #202020;
    background-image: url("http://tekkit.it/image/Background.png")
}

/* Add the grass block background */
#mw-page-base {
    background-color: #8DBDE9;
    background-image: url("http://tekkit.it/image/Header-background.png");
    height: 10em
}

/* Position the #content area and add the cloud detail image */
#mw-head-base {
    background-image: url("http://tekkit.it/image/Clouds-distance2.png");
    background-position: left 6px;
    height: 97px;
    margin: -160px 10px 0 10.4em
}

/* 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://tekkit.it/image/Vector-tabs-background.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    margin-right: 10px;
    height: 103px
}

/* 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, #footer a:hover, #ft a:hover,
#mw-panel a:focus, #footer a:focus, #ft a:focus {
    color: #FFFFFF !important
}
#left-navigation a, #left-navigation a, #right-navigation #p-views a {
    color: #000000;
    font-weight: bold
}
#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 {
    top: 67px;
    margin-left: 16px;
}

/* Give the user details area some colouring */
#p-personal {
    background-color: rgba(134, 185, 233, 0.8);
    border: 1px solid #A9D1F8;
    right: 0;
    padding-right: 0.55em;
    margin-top: 6px
}
#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://tekkit.it/image/Vector-tabs.png") !important;
    background-position: left 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://tekkit.it/image/Vector-tabs.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://tekkit.it/image/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://tekkit.it/image/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
}

/* The portlet collapse script doesn't make the menu the correct size */
div.vectorMenu.filledPortlet h5 {
    width: auto !important;
}

/* Position the general search area */
#p-search {
    margin: 0 22px 0 12px;
}

/* Only the simple search is styled ($wgVectorUseSimpleSearch = true), this is because there is no unique stylable elements for the default search */
#simpleSearch {
    background: url("http://tekkit.it/image/Search-background.png") repeat-x transparent !important;
    border: 0 !important;
    height: 43px !important;
    width: 212px !important;
    margin-top: -6px !important
}
#simpleSearch input {
    background-image: url("http://tekkit.it/image/Search-start.png"), url("http://tekkit.it/image/Search-end.png");
    background-position: left top, right top;
    background-repeat: no-repeat;
    height: 18px;
    width: 186px !important;
    margin-left: -12px !important;
    padding: 12px 33px 13px 16px !important;
    color: #3C3B3B !important
}
#simpleSearch button {
    background: url("http://tekkit.it/image/Search-button.png") center no-repeat !important;
    margin-top: 9px !important;
    padding: 0 !important;
    height: 23px;
    width: 20px !important
}
#simpleSearch button img {
    display: none
}

/* The suggestions shown under the search bar */
body .suggestions:last-child {
    width: 217px !important;
    top: 112px !important;
    right: 28px !important
}
body .suggestions:last-child .suggestions-results,
body .suggestions:last-child .suggestions-special {
    background-color: #DBDADA;
    border-color: #3C3B3B
}
body .suggestions:last-child .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: #FFCCCC;
    border: 2px solid #FFAAAA !important
}
.warningbox {
    background-color: #FFFFCC;
    border: 2px solid #FFFFAA
}
.successbox {
    background-color: #CCFFCC;
    border: 2px solid #AAFFAA
}
.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: #FFFFFF;
}

/* 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://tekkit.it/image/Pref-tab-border.png")
}
#preftoc li.selected a {
    background-image: url("http://tekkit.it/image/Pref-tab-bg.png")
}

/* Use the logo area to add a 3D effect to the first tab */
#p-logo {
    background-image: url("http://tekkit.it/image/Vector-tabs-first.png");
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 10.4em
}

/* Replace divider and arrows in the sidebar with similar images that have actual transparency */
#mw-panel.collapsible-nav div.portal {
    background-image: url("http://tekkit.it/image//Panel-divider.png") !important
}
#mw-panel.collapsible-nav div.first {
    background-image: none !important
}
#mw-panel.collapsible-nav div h5, div.vectorMenu h5 a {
    background-image: url("http://tekkit.it/image/Arrow-down.png") !important
}
#mw-panel.collapsible-nav div.collapsed h5 {
    background-image: url("http://tekkit.it/image/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://tekkit.it/image/Content-background.png") !important;
    background-repeat: no-repeat !important;
    margin-top: -5px !important;
    padding-top: 17px !important
}