MediaWiki:Hydradark.css

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

/***** GENERAL STYLES *****/ /* Body */ background: #110d0b; }
 * 1) global-wrapper {

/***** HEADER STYLES *****/ .fakeh2 { color: #e0e0e0; font-family: sans-serif; font-weight: normal; background: none; margin: 1em 0 0.5em 0; padding: 0; font-size: 1.5em; line-height: 1.3; border-bottom:1px solid #505050; }

/** Logo **/ top: -140px; width: 160px; height: 160px; left: 0; }
 * 1) p-logo {

width: 160px; height: 160px; }
 * 1) p-logo a {

/** Header styles **/ div#mw-page-base { background: #EEF2F7 url(https://static.wikia.nocookie.net/raft_gamepedia_en/images/7/7d/Raft-Background.jpg/revision/latest) no-repeat center center / cover !important; height: 128px; }

top: 57px; background: transparent; }
 * 1) mw-head {

@media (max-width: 720px) { div#mw-head { top: 62px; } }

/** Postedit **/ html body .postedit { background: rgb(6,6,6); box-shadow: 0 2px 5px 0 rgb(255 255 255 / 16%), 0 2px 10px 0 rgb(255 255 255 / 12%); color: #FFF; opacity: 0.95; }

/***** ARTICLE NAVIGATION *****/ div.vectorMenu, div.vectorTabs { background: transparent; font-size: 90%; }
 * 1) p-search,

div.vectorTabs { opacity: 0.95; }
 * 1) p-search,

/* sizing and font styles for non-active tabs */ div#mw-head div.vectorMenu h3 span, div#mw-head div.vectorTabs span a { color: #FFF; height: 1.25em; padding: 0; font-size: 100%; text-decoration: none; }

/* allow space for the vectormenu arrows */ div#mw-head div.vectorMenu h3 span { padding-right: 15px; vertical-align: top; }

div#mw-head div.vectorMenu h3 span:after { top: 0; }

/* padding/sizing and aesthetic styles for the background of the tabs */ div#mw-head div.vectorMenu h3, div#mw-head div.vectorTabs ul li span { background: #333; border-radius: 2px; padding: 0.5em; margin: 0 0.5em 0 0; height: 1em; line-height: 1; overflow: visible; }

/* styles for the currently selected tab and on-hover dropdown menus */ div#pageWrapper div#mw-navigation li.selected a { color: #FFF; }

div#mw-head div.vectorMenu:hover h3, div#mw-head div.vectorTabs ul li span:hover{ background: #000; }

div#mw-head div.vectorTabs ul li.selected span { background: -webkit-radial-gradient(center, ellipse cover, rgba(181,153,99,1) 0%, rgba(144,114,69,1) 100%); /* safari5.1+,chrome10+ */ }

/* clear border-radius on the bottom of the dropdown menu on hover */ div#mw-head div.vectorMenu:hover h3 { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

/* reset backgrounds on various parts of the dropdown menu to allow custom styles to show */ div.vectorMenu:hover ul, div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li.selected { background: transparent; }

/* position the dropdown menu to properly align with the bottom of the tabs */ div.vectorMenu div.menu { top: 2em; border: 0; left:unset; right:3px; background-color:rgba(0,0,0,0.95); }

/* clean up links in dropdown menu */ div#mw-navigation div.vectorMenu div.menu li a { padding: 0.3em; font-size: 90%; display: block; height: auto; margin: auto; }

/* style watch button to fit inside tabs */ div#mw-head #p-views #ca-unwatch.icon a, div#mw-head #p-views #ca-watch.icon a { background-size: 1.5em; height: 0; margin: -0.25em 0; padding-top: 1.5em; background-position: center center; }

/***** SEARCH *****/ div#simpleSearch { background: #000; height: 1.95em; border: 0; margin: 0; padding-left: 0.5em; top: -5px; }

/* sizing and aesthetic styles for search input */ div#simpleSearch #searchInput { color: #FFF; padding: 0.2em 0; height: 1.95em; box-sizing: content-box; text-overflow: ellipsis; font-size: 90%; }

/* styling for the search placeholder text */ div#simpleSearch #searchInput::placeholder { color: #FFF; opacity: 0.7; }

/*** Search suggestions ***/ .suggestions-results .suggestions-result .highlight { color: #0396f7; }

.suggestions-result-current { background: #0088d0 !important; color: #000000; }

.suggestions-results .suggestions-result-current .highlight { color: #89b0ca; }

/***** SITENOTICE *****/ width: auto; border-radius: 7px; border: none; background: rgb(6, 6, 6); box-shadow: 0 2px 5px 0 rgba(255,255,255,.16), 0 2px 10px 0 rgba(255,255,255,.12); color: #FFF; margin: 0 0 10px 0; padding: 3px 6px; }
 * 1) localNotice {

/***** SIDEBAR *****/ div#mw-panel { top:115px; width: 160px; }

@media (max-width:720px) { div#mw-panel { top:0px } }

div#mw-panel div.portal div.body ul li a, div#mw-panel div.portal div.body ul li a:visited, div#mw-panel div.portal div.body ul li a:hover, div#mw-panel div.portal div.body ul li a:link { color: #FFF; }

div#mw-panel div.portal h3, color: #FFF; font-weight: bold; font-size: 100%; }
 * 1) mw-panel.collapsible-nav .portal h3 a,
 * 2) mw-panel.collapsible-nav .portal h3 a:visited,
 * 3) mw-panel.collapsible-nav .portal.collapsed h3 a,
 * 4) mw-panel.collapsible-nav .portal.collapsed h3 a:visited {

/***** CONTENT *****/ /*** General ***/ div#content { border: none; background: #110d0b; color: #FFF; }

div#content #firstHeading { border-bottom: 1px solid #c0cdd2; color: #FFF; }

/*** Ambox ***/ .ambox { background: #000; color: #FFF; box-shadow: 0 2px 5px 0 rgba(255,255,255,.16), 0 2px 10px 0 rgba(255,255,255,.12); }

/*** FPboxes ***/ .fpbox, .cpbox, .box { background: rgb(6, 6, 6); box-shadow: 0 2px 5px 0 rgba(255,255,255,.16), 0 2px 10px 0 rgba(255,255,255,.12); color: #FFF; }

.fpbox .welcome, .cpbox .welcome, .box .welcome { box-shadow: 0 2px 5px 0 rgba(255,255,255,.16), 0 2px 10px 0 rgba(255,255,255,.12); color: #FFF; }

.fpbox .heading, .cpbox .welcome, .box .heading { border-bottom: 2px solid #191e22; color: #FFF; }

/*** Links ***/ a:link, a:visited { color: #FFD66C; }

.mw-parser-output a.extiw, .mw-parser-output a.external { color: #FFD66C; }

a:active { color: #D5D4D4; }

/*** Table of content ***/ div.toc, div#toc { border-radius: 7px; border: none; background: #070707; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); color: #cac3cd; margin: 0 0 10px 0; padding: 3px 6px; }

/*** Lists ***/ ul { list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEUAAAAufMCPWiZvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAxQGNS+EelvCAAAAFUlEQVQI12NgQAEFDA0MHQwcQJoBAA6aAfGXImSHAAAAAElFTkSuQmCC"); }

/*** Wikitable ***/ /* Won't be implemented now to test new design */

/*** Navboxes ***/ .navbox { background: #000; border: 1px solid #222; }

.navbox table { background: #000; }

.navbox .navbox-top { background-color: #222; }

.navbox th { background-color: #111; } /*** Galleries ***/ li.gallerybox { border-radius: 7px; border: none; background: #070707; box-shadow: 0 2px 5px 0 rgba(255,255,255,.16), 0 2px 10px 0 rgba(255,255,255,.12); color: #cac3cd; margin: 0 0 10px 0; padding: 3px 6px; }

li.gallerybox div.thumb { border: none; background: #070707; color: #cac3cd; }

div.gallerytext { text-align: center; }

div.thumb { border: none; background: transparent; color: #cac3cd; }

.thumb.tleft { margin: 0 20px 10px 0; }

.thumb.tright { margin: 0 0 10px 20px; }

div.thumbinner { border-radius: 5px; border: none; background: #070707; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); color: #cac3cd; margin: 0 0 10px 0; padding: 3px 5px !important; }

html .thumbimage { border: none; background: #110d0b; color: #cac3cd; }

/*** Codes and pre-formated code ***/ pre, .mw-code { border: 1px dashed #c0cdd2; background: #060606; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); color: #cac3cd; padding: 5px 5px; white-space: pre-wrap; word-wrap: break-word; }

code { background: transparent; white-space: pre-wrap; word-wrap: break-word; }

/*** Category links ***/ border-radius: 4px; border: none; background: #070707; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); color: #cac3cd; margin: 10px 0 10px 0; padding: 3px 6px; }
 * 1) catlinks {

border-left: 1px solid #c0cdd2; }
 * 1) catlinks li {

border-left: none; }
 * 1) catlinks li:first-child {

/*** Fixes ***/ border:none; }
 * 1) pagehistory li{

/***** EDITOR *****/ /* Drop files here (msupload)*/ background: #967b4f; }
 * 1) msupload-div {

/***** FOOTER *****/ div#footer { box-sizing: border-box; border: none; background: #110d0b; color: #FFF; }

/*** For elements which only display in the mobile view ***/ .mobileonly { display: none; }