Hydradark.css

Revision as of 13:55, 10 January 2020

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


/* Framework */
body {
    background: #2b2f30 url("/media/f/fe/Rust_Background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: black;
}

body #pageWrapper {
    margin-right: 10px;
}

/* Page Editors and others */
/*.mw-widget-dateInputWidget-handle, .skin-hydradark .mw-widget-dateInputWidget-handle label, .oo-ui-radioInputWidget [type="radio"] + span, .ui-autocomplete-input,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover, .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.skin-hydradark .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label, .oo-ui-dropdownWidget, .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,*/

.ui-autocomplete-input, .oo-ui-textInputWidget .oo-ui-inputWidget-input {
	background-color: #1a1a1a;
	color: white;
}

.skin-hydradark .oo-ui-labelElement-label {
	color: white;
}
.skin-hydradark .oo-ui-toolGroup .oo-ui-labelElement-label {
	color: #000000; /* Because of the filter */
}



/* == Header == */
/* Header buttons */
div.vectorTabs {
    border: none;
    background-color: rgba(0,0,0,0);
    background-image: none;
    margin: 0;
    padding: 0;
}

div.vectorTabs ul li, div.vectorTabs ul li,
div.vectorTabs ul li.selected {
    border: none;
    background-color: transparent;
    background-image: none;
    margin: 0;
    padding: 0;
}

div.vectorTabs, 
div.vectorTabs ul, div.vectorTabs span,
div#mw-head div.vectorMenu h3 {
	background-image: none;
}

/* Dropdown Menu */
div.vectorMenu div.menu {
	border: none;
}



/* == Sidebar == */
div#mw-panel div.portal div.body,
.skin-hydradark #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:link,
div#mw-panel div.portal div.body ul li a:visited {
    color: white;
}

#mw-panel div.portal h3 {
	color: #cd402a!important;
}

#mw-panel .portal h3 {
	color: white;
	font-weight: bold;
}



/* == Content == */

div#content {
	border: 0;
}

/* == Footer == */
/* Footer */
div#footer {
    background: #262626;
}

div#footer ul li {
    color: #8c8c8c;
}

div#footer ul li a {
    color: white;
}

/*********************
/* Front page styles *
/*********************/
/* Logo */
body.page-Rust_Wiki #p-logo {
   left: 50vw;
   margin-left: -150px;
}

body.page-Rust_Wiki #p-logo a {
    height: 170px !important;
    width: 400px !important;
}

body.page-Rust_Wiki .mw-wiki-logo {
    -webkit-filter: drop-shadow(0px 0px 10px #999999);
    filter: drop-shadow(0px 0px 3.5px #999999) drop-shadow(1px 1px 1px #999999);
}

body.page-Rust_Wiki #left-navigation, body.page-Rust_Wiki #right-navigation {
    margin-top: 132px;
}

body.page-Rust_Wiki div#content {
	margin-top: 92px;
}


/* Front page style */
.fpmain {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.fpbanner {
  border: 1px solid #75502c; 
  box-shadow: 0 2px 5px #687478;
  background: rgba(0, 0, 0, 0.25);
  color: #9ccad2;
  margin: 0 5px 5px 5px;
  padding: 5px;
  min-height: 80px;
}

.fpbannertable {
  display: table;
  border: none;
  background: transparent;
  width: 100%; 
  min-height: 75px;
  margin: 0;
  padding: 5px;
}

.fpbannercell {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle;
}

.fpbannerblock {
  border: none;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
  font-size: 132%;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}

.fpbanner1 .fpbannertable {
  background: url("https://soma.gamepedia.com/media/soma.gamepedia.com/f/f2/Fpbox_left_1.png") left center no-repeat, 
              #ffffff url("https://soma.gamepedia.com/media/soma.gamepedia.com/5/5c/Fpbox_right_1.png") right center no-repeat;
}

.fpmidsections {
  float: left;
  width: 100%;
  overflow: hidden;
}

.fpbox {
  border: 1px solid #4a4a4a;
  background: rgba(0, 0, 0, 0.1);
  color: white;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  overflow: auto;
}

.fpbox .mainheading {
  border: none;
  border-bottom: 1px solid #5d5d5d;
  color: white;
  font-size: 150%;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.fpbox .heading {
    border: none;
    background: rgba(205, 64, 42, 0.3);
    color: white;
    font-size: 132%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}

.fpbox .heading, .fpouterbox .heading, .fpinnerbox .heading {
    color: #ffffff;
    font-size: 120%;
    font-weight: bold;
    padding: 5px 11px 8px 11px;
    height: auto;
}

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

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

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

div.fp2columnonly, div.fp3columnonly {
  display: none; 
}

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

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

  .fpsection4 {
    float: left;
    clear: none;
    width: 50%;
  }

  div.fp2columnonly {
    display: block; 
  }
}

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

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

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

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

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

  .fpsection3 {
    clear: none;
    width: 50%;
  }
 
  .fpsection4 {
    clear: left;
    width: 33.333%;
  }

  div.fp2columnonly {
    display: none; 
  }

  div.fp3columnonly {
    display: block; 
  }
}


/* == Item Navigation Expander == */
.itemlistnav_collapsible > span.mw-collapsible-toggle {
	text-align: center;
	width: 100%;
}
.itemlistnav_collapsible > .mw-collapsible-content {
	clear: both;
}



/* ==============
        Main
   ============== */
   
/* == Default Tables == */

table.wikitable > tr > th, table.wikitable > * > tr > th {
    background: rgba(181, 181, 181, 0.27);
    border: 1px solid #676767;
    color: white;
    text-align: center;
}

table.jquery-tablesorter th.headerSort {
    background-image: linear-gradient(#079993,#0f5182);
	background-position: right right;
    padding-right: 21px;
}

th {
    background: #1f1f1f;
    color: #ffffff;
    font-weight: bold;
    font-size: 116%;
    padding: 1px 7px;
    text-align: left;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

table.wikitable > tr > td, table.wikitable > * > tr > td {
    border: 1px solid #676767;
    padding: 0.2em;
}

table.diff, td.diff-otitle, td.diff-ntitle {
	background-color: rgba(171, 171, 171, 0.28);
}

.grid td {
	border: #5d5d5d 2px solid;
}



/* == CSS Class templates == */
.colorinvert {
	filter: invert(1);
}



/* == Extensions == */

a.ext-audiobutton {
	vertical-align: middle;
}
/* This applies to "play" buttons */
a.ext-audiobutton[data-state='play']:before {
	content: "Play";
	width: 20px;
	height: 20px;
	background: url(https://rust.gamepedia.com/media/rust.gamepedia.com/e/e8/Speaker.svg);
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	filter: invert(1);
}
/* This applies to "pause" buttons */
a.ext-audiobutton[data-state='pause']:before {
    content: '⏸️';
    /*content: 'Pause';*/
    display: inline-block;
    /*width: 10px;
    height: 10px;
    text-indent: -9999px;
    background: white;*/
}



/* ==============
   Wiki Templates
   ============== */

/* == Infoboxtable == */
.infobox,
.infoboxtable {
    background: #292929;
    font-size: 90%;
    color: white;
    float: right;
    margin: 0px 0px 5px 5px;
    padding: 3px 4px;
    border: 2px solid;
    border-color: #4a4a4a;
    border-radius: 2px;
    width: 300px;
}

.infoboxtable th.infoboxname {
	font-size: 1.5em;
	position: relative;
}
/*.infoboxtable th.infoboxname .itemtypeicon {
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 2.5px;
	font-size: 0px;
	/line-height: 30px;
}*/
.infoboxtable th.infoboxname .infoboxname_container {
	/*display: grid;
	grid-template-columns: auto 30px;*/
	display: flex;
	justify-content: space-between;
}
.infoboxtable th.infoboxname .infoboxname_container span.name {
    align-self: center;
    width: 100%;
    margin-left: 25px;
    word-break: break-word;
}
.infoboxtable th.infoboxname .infoboxname_container .itemtypeicon {
	align-self: center;
	line-height: 0px;
}

.infobox td, .infoboxtable td {
	position: relative;
	vertical-align: top;
}
.infoboxtable td.td_box {
	border: none;
	border-spacing: 0;
	background: #1f1f1f;
	color: #ffffff;
	font-weight: bold;
	padding: 1px 7px;
	vertical-align: inherit;
	text-align: right;
}

.infoboxtable td.td_box div.icontextbox {
	display: table-row;
	height: inherit;
}
.infoboxtable td.td_box div.icontextbox .image, 
.infoboxtable td.td_box div.icontextbox .label {
	display: table-cell;
	vertical-align: middle;
}
.infoboxtable td.td_box div.icontextbox .label {
	text-align: right;
	width: 100%;
}
/*.infoboxtable td .iconlabel {
	vertical-align: top;
	float: left;
}*/


.infobox td.infoboxlabel {
    background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182);
    border: none;
    border-radius: 7px;
    color: #f2f2f2;
    padding: 1px 7px;
    text-align: right;
    vertical-align: top;
}

.infobox th.infoboxname {
    background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182);
    border: none;
    color: #f2f2f2;
    font-size: 133%;
    font-weight: bold;
    padding: 8px;
    text-align: center;
}

.infoboxtable th.infoboxname {
    text-align: center;
}

.infoboxdetails {
    color: #ffffff;
    font-size: 110%;
    padding: 0em;
    text-align: center;
}


/* == Item Icon == */
div.itemicon .caption {
	display: block;
	/*width: 96px;*/
}
div.itemicon .caption a {
	color: white;
	font-weight: bold;
	font-size: 12px;
}


/* == Item List Nav == */
div.itemlistnav .nav {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
div.itemlistnav .nav ul {
	background: #2e2e2e;
    padding: 5px 20px;
    cursor: pointer;
    flex: 1 2 auto;
    text-align: center;
    margin: 0px 2px 0px 2px;
    width: 20%;
    transition: background 0.12s;
}
div.itemlistnav .nav ul:hover {
	background: #5d5d5d;
}
div.itemlistnav .nav ul:focus,
div.itemlistnav .nav ul:active {
	background: #3a3b39;
}
div.itemlistnav .nav ul.active {
	background: #3a3b39;
}

div.itemlistnav .content > div > div {
	margin: 20px!important;
}

div.itemlistnav .content div {
	display: none;
}
div.itemlistnav .content div.active {
	display: block;
}

/* == Item Showcase == */
.itemshowcase .isblueprint {
	position: relative;
	background: url("/media/9/98/Blueprint.png");
	background-size: contain;
}

.itemshowcase .status .statusicon {
	position: relative;
	background-size: contain;
	width: 20px;
	height: 20px;
	z-index:99999;
}
.itemshowcase .status .statusicon.loading {
	background-image: url("/media/d/d0/Icon_isloading.png");
}
.itemshowcase .status .statusicon.onfire {
	background-image: url("/media/8/80/Icon_isonfire.png");
}
.itemshowcase .status .statusicon.cooking {
	background-image: url("/media/9/9d/Icon_iscooking.png");
}
.itemshowcase .status .statusicon.broken {
	background-image: url("/media/0/02/Icon_isbroken.png");
}

/* == Workbench Requirement == */
div.workbench_requirement {
	display: inline-block;
    background: #6b6b6b;
    border: 3px solid #333333;
    border-radius: 8px;
    padding: 2px 5px;
    color: #a6a6a6;
    font-weight: bold;
    font-size: 20px;
}
div.workbench_requirement.level-1 {
    background: #758e48;
    border-color: #384422;
    color: #b9dd71;
}
div.workbench_requirement.level-2 {
    background: #16496e;
    border-color: #113955;
    color: #21aaff;
}
div.workbench_requirement.level-3 {
    background: #b33200;
    border-color: #661d00;
    color: #ff892b;
}
Rust Wiki

Hydradark.css

Revision as of 13:55, 10 January 2020
