The Colonists Wiki
Don't have an account?
Register
Advertisement
Register
The Colonists Wiki
The Colonists Wiki
74
pages

Hydra.css

MediaWiki page
Sign in to edit

CSS and Javascript changes must comply with the wiki design rules.

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 Hydra skin */
/* For elements which only display in the mobile view */
/* Colours: color: #38B1F7; = sky blue color:#FFFFFF; = white color:#202020; = dark gray color:#383E46; = gray color:#6A6C6E; = lighter gray/*



/* fonts */
@font-face {
	font-family: 'OpenSans-Bold';
	src: local('OpenSans-Bold'), local('OpenSans-Bold'), url(/media/hydra/fonts/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-BoldItalic';
	src: local('OpenSans-BoldItalic'), local('OpenSans-BoldItalic'), url(/media/hydra/fonts/OpenSans-BoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-ExtraBold';
	src: local('OpenSans-ExtraBold'), local('OpenSans-ExtraBold'), url(/media/hydra/fonts/OpenSans-ExtraBold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-ExtraBoldItalic';
	src: local('OpenSans-ExtraBoldItalic'), local('OpenSans-ExtraBoldItalic'), url(/media/hydra/fonts/OpenSans-ExtraBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Italic';
	src: local('OpenSans-Italic'), local('OpenSans-Italic'), url(/media/hydra/fonts/OpenSans-Italic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Light';
	src: local('OpenSans-Light'), local('OpenSans-Light'), url(/media/hydra/fonts/OpenSans-Light.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-LightItalic';
	src: local('OpenSans-LightItalic'), local('OpenSans-LightItalic'), url(/media/hydra/fonts/OpenSans-LightItalic.ttf) format('truetype');
}


@font-face {
	font-family: 'OpenSans-Regular';
	src: local('OpenSans-Regular'), local('OpenSans-Regular'), url(/media/hydra/fonts/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Semibold';
	src: local('OpenSans-Semibold'), local('OpenSans-Semibold'), url(/media/hydra/fonts/OpenSans-Semibold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-SemiboldItalic';
	src: local('OpenSans-SemiboldItalic'), local('OpenSans-SemiboldItalic'), url(/media/hydra/fonts/OpenSans-SemiboldItalic.ttf) format('truetype');
}

p {
  font-family: "OpenSans-Regular";
}


h1, 
h2 {
    border-bottom: 1px solid #38B1F7;
    color: #38B1F7;
}

h3 {
    color: #38B1F7;
    font-size: 16px;
}

h4 {
    color: #38B1F7;
    font-size: 14px;
}

h5 {
    color: #38B1F7;
    font-size: 12px;
}

h6 {
    color: #38B1F7;
    font-size: 11px;
}

a, 
a:visited,
div#content a.extiw,
div#content a.extiw:visited,
div#content a.external, 
div#content a.external:visited {
    color: #38B1F7;
    font-family: "OpenSans-Bold", Arial, sans-serif;
}

.mobileonly {
    display: none;
}
 
/* Hide main page header */
body.page-The_Colonists_Wiki h1.firstHeading {
    display:none;
}

/* body and page head */
body {
    background-image: url(https://static.wikia.nocookie.net/thecolonists_gamepedia_en/images/9/99/Header_extra_wide.png/revision/latest);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #38B1F7;
    font-family: "OpenSans-Regular", Arial, sans-serif;
}

.mw-body {
	margin-left: 11em;
	padding: 1em;
	border: 1px solid #a7d7f9;
	border-right-width: 0;
	margin-top: -1px;
	background-color: #fff;
	color: #222;
	direction: ltr;
	border-top-left-radius: 10px;
        font-family: "OpenSans-Regular", Arial, sans-serif;
}

div#mw-page-base {
    background: transparent;
    background-image: none;
}

#mw-head-base {
    background: transparent;
    background-image: none;
    border-bottom: 0px;
}

/* Footer */
div#footer {
    background: #FFFFFF;
    border: none;
    margin-bottom: 5px;
    margin-top: 5px;
}

div#footer ul li {
    color: #000000;
}

div#footer ul li a {
    color: #38B1F7;
}

/* wiki logo fix */
#p-logo a {
	display: block;
	width: 10em;
	height: 160px;
	background-repeat: no-repeat;
	background-position: center center;
	text-decoration: none;
	background-size: 100%;
}

/* Tabs */
#left-navigation {
    margin-top: 20px;
}

#right-navigation {
    margin-right: 5px;
    margin-top: 20px;
}

div.vectorTabs,
div.vectorTabs span,
div.vectorTabs li.selected,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs li a {
    background: rgba(0, 0, 0, 0);
}

#p-sharing a {
    background-image: url("https://static.wikia.nocookie.net/commons_hydra/images/0/0b/Vector_menu_downarrow.png") no-repeat scroll center center transparent;
}

div.vectorMenu h3 a {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("https://static.wikia.nocookie.net/commons_hydra/images/0/0b/Vector_menu_downarrow.png") !important;
    background-position: 50% 60%;
    background-repeat: no-repeat;
}

div.vectorMenu h3 span {
	display: block;
	font-size: 0.8em;
	padding-left: 0.7em;
	padding-top: 1.30em;
	margin-right: 20px;
	font-weight: normal;
	color: #4d4d4d;
}

div.vectorMenu h3 a,
div#mw-head div.vectorMenu h3 {
    background-color: transparent;
    background-image: none;
    border: 0px;
}

div#mw-head {
     background: transparent;
     background-color: transparent;
}

div#mw-head,
div.vectorTabs li a,
.vectorTabs li a span,
div#mw-head div.vectorTabs a,
div.vectorMenu h3 span {
    color: #FFFFFF;
    font-weight: bold;
}

div.vectorMenu li a {
    color: #38b1f7;
    font-weight: bold;
}

div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited {
    color: black !important;
    text-shadow: none !important;
    font-weight: bold;
}

div.vectorMenu div.menu {
    background-color: #FFFFFF;
}

div.vectorMenu ul {
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

/* Sidebar */
div#mw-panel {
    margin-top: -15px;
}

div#mw-panel div.portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
    background: #FFFFFF;
    border: none;
    border-radius: 5px 5px 5px 5px;
    margin: 5px;
    padding-top: 5px;
}

div#mw-panel div.portal div.body,
#mw-panel.collapsible-nav .portal {
    background-image: none;
}

div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:visited {
    color: #000000;
    font-family: "OpenSans-Regular", Arial, sans-serif;
}

div#mw-panel div.portal h3,
div#mw-panel div.portal h3:visited,
#mw-panel.collapsible-nav .portal h3 a,
#mw-panel.collapsible-nav .portal h3 a:visited,
#mw-panel.collapsible-nav .portal.collapsed h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color: #38B1F7;
    font-weight: bold;
}

div#mw-panel div#p-socialProfiles.portal .body {
    margin: auto;
}

.socialSidebar {
    width: auto;
    max-width: 100%;
}


/* for "edit this page" tab and "discussion" tab etc */
.pagetab {
     border-style: solid solid none;
     border-width: thin;
     border-color: #808080;
     padding:0.25ex 1ex 0ex;
     font-size: 95%;
}

.ambox {
    background-color: #eeeeee;
    border-bottom-color: #383838;
    border-right-color: #383838;
    border-top-color: #383838;
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox + .ambox {
     margin-top: -2px;
}

.ambox-text {
     padding: 0.25em 0.5em;
}

.ambox-image {
     padding: 2px 0px 2px 0.5em;
     text-align: center;
     width: 60px;
}

.ambox-tiny .ambox-image {
     padding: 2px 0.5em;
     text-align: left;
     width: auto;
}

/* Ambox colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

/* Ambox small text */
.amsmalltext {
     font-size: smaller;
     margin-left:0.8em;
     margin-top:0.5em;
}

/* INFOBOXES */
.infoboxtable {
    background-color: #f9f9f9;
    border: 3px double #A1A1A1;
    color: #000000;
    float: right;
    font-size: 89%; 
    margin-bottom: 0.5em; 
    margin-left: 1em; 
    padding: 0.2em; 
    width: 300px;
}

.infoboxtable td {
    vertical-align: top;
}

.infoboxtable td > div {
    background-color: #A1A1A1;
    border: 2px solid inherit; 
    border-radius: 5px; 
    font-weight: bold;
    padding: 0.5px 7px;
    text-align: right;
}

.infoboxname {
    background: #A1A1A1;
    background-image: url(https://static.wikia.nocookie.net/thecolonists_gamepedia_en/images/0/07/Strip.jpg/revision/latest);
    background-repeat: repeat;
    backgound-size:100%;
    border: 3px double #505050;
    font-size: 110%; 
    font-weight: bold;
    padding: 0.5em; 
    color: white;
}

.infoboxdetails {
    background-color: #A1A1A1;
    padding: 0em;
    color:white;
}

/* copyright images tweak */
.copyright-icon {
    background: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/b/b6/Copyright.png/32px-Copyright.png") transparent center center no-repeat;
    background-size: 100%;
    width: 32px;
    height: 32px;
}

.feature {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px; padding: 10px;
}

/* Navbox template style */
table.navbox {
    border: 1px solid #aaaaaa;
    clear: both;
    font-size: 88%;
    margin: auto;
    padding: 1px;
    text-align: center;
    width: 100%; 
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}

/* Base background */
.navbox, .navbox-subgroup {
    background: rgba(255, 255, 255, 0.2);
}

.navbox-list {
    border-color: rgba(255, 255, 255, 0.2); /* Must match background color */
}

/* Level 1 color */
.navbox-title,
table.navbox th {
    background: rgba(255, 255, 255, 0.2);
    color: #444;
}

/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
}

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Even row striping */
.navbox-even {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Odd row striping */
.navbox-odd {
    background: transparent;
}
 
.collapseButton {
    font-weight: normal;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}
 
.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox .navbar {
    font-size: 100%;
}
 
table.collapsed tr.collapsible {
    display: none;
}
/* End of new Navbox styling */


/********************************/
/* Front page appearance styles */
/********************************/
.fpbox .mainheading {
	border: 0;
	border-bottom: 1px solid #505050;
        font-family: "OpenSans-Bold", Arial, sans-serif;
}

.fpbox .heading {
   background: #38B1F7;
   color:white;
   font-family: "OpenSans-Bold", Arial, sans-serif;
}

.fpbox {
	background: rgba(0, 0, 0, 0.05);
}

.fplink {
	background: #A1A1A1;
        background-image: url(https://static.wikia.nocookie.net/thecolonists_gamepedia_en/images/0/07/Strip.jpg/revision/latest);
        background-repeat: repeat;
        backgound-size:100%;
	border: 3px double #505050;
        border-radius: 10px;         
}


.fplink a {
    text-shadow: 1px 1px 1px black,1px -1px 1px black,-1px 1px 1px black,-1px -1px 1px black;    
   color: white !important;

}

.fplink-fullwidth .fplink {
	background: rgba(0,0,0,0.4);
}

.linkslabel {
	border-bottom: 2px solid #505050;
}

/* This CSS governs the responsive 3 column main page layout */
.fpmidsections {
    float: left;
    width: 100%;
    overflow: hidden;
}

.fpsection1,
.fpsection2,
.fpsection3,
.fpsection4 {
    float: left;
    clear: both;
    width: 100%;
}

.fpmain .columns .leftcol,
.fpmain .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 790px) {
    .fpsection1,
    .fpsection4 {
        float: left;
        clear: none;
        width: 50%;
    }

    .fpmidsections {
        float: right;
        clear: none;
        width: 50%;
    }
}

@media (min-width: 990px) {
    .fpmain .columns .leftcol {
        float: left;
        width: 50%;
    }

    .fpmain .columns .rightcol {
        float: right;
        width: 50%;
    }
}

@media (min-width: 1390px) {
    .fpmidsections {
        clear: none;
        float: right;
        width: 66.667%;
    }

    .fpsection1 {
        clear: none;
        width: 33.333%;
    }

    .fpsection2,
    .fpsection3 {
        clear: none;
        width: 50%;
    }

    .fpsection4 {
        clear: left;
        width: 33.333%;
    }
}

/* tables */
table.wikitable > tr > th, table.wikitable > * > tr > th {
	background-color: #7B7C7E;
	color: #FFFFFF;
        border: 1px solid #202020;
	font-weight: bold;
}

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
	border-color: #202020;
}

.TablePager th, 
.mw-datatable th, 
table.mw_metadata th {
	background-color: #7B7C7E;
	color: white;
        border: 1px solid #202020;
	font-weight: bold;
}

.TablePager, 
.mw-datatable, 
table.mw_metadata {
	background-color: #7B7C7E;
	border: 1px solid #202020;
}

.mw-interwiki-legend .mw-collapsible-toggle a {
    color: #ffffff;
}

table.jquery-tablesorter th.headerSort {
	background-image: url(https://static.wikia.nocookie.net/commons_hydra/images/3/36/Sort_both_white.gif);
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 21px;
}

table.jquery-tablesorter th.headerSortUp {
	background-image: url(https://static.wikia.nocookie.net/commons_hydra/images/8/82/Sort_up_white.gif);
}

table.jquery-tablesorter th.headerSortDown {
	background-image: url(https://static.wikia.nocookie.net/commons_hydra/images/7/7a/Sort_down.gif);
}


.crispborder {
filter:
    drop-shadow( 0px  2px 0 black)
    drop-shadow( 0px -2px 0 black)
    drop-shadow( 2px  0px 0 black)
    drop-shadow(-2px  0px 0 black);
  -webkit-filter:
    drop-shadow( 0px  2px 0 black)
    drop-shadow( 0px -2px 0 black)
    drop-shadow( 2px  0px 0 black)
    drop-shadow(-2px  0px 0 black);
}

ul {
	list-style-type: square;
	list-style-image: none;
}


.ohead {
  background: #7B7C7E
}

.ohead a {
   text-shadow: 1px 1px 1px black,1px -1px 1px black,-1px 1px 1px black,-1px -1px 1px black;    
   color: white !important;
}


.strip {
    background: #A1A1A1;
    background-image: url(https://static.wikia.nocookie.net/thecolonists_gamepedia_en/images/0/07/Strip.jpg/revision/latest);
    background-repeat: repeat;
    backgound-size:100%;
}

.strip a {
  text-shadow: 1px 1px 1px black,1px -1px 1px black,-1px 1px 1px black,-1px -1px 1px black;    
   color: white !important;
}
Community content is available under CC BY-NC-SA unless otherwise noted.
Advertisement