MediaWiki:Hydra.css

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

/* For elements which only display in the mobile view */

.mobileonly { display: none; }

/* for "edit this page" tab and "discussion" tab etc */

.pagetab { border-style: solid solid none; border-width: thin; border-color: #D3907B; 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: 1px solid #aaaaaa; 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: rgba(0, 0, 0, 0.05); border: 2px solid inherit; border-radius: 5px; font-weight: bold; padding: 0.5px 7px; text-align: right; }

.infoboxname { background-color: rgba(0, 0, 0, 0.05); font-size: 110%; font-weight: bold; padding: 0.5em; }

.infoboxdetails { background-color: rgba(0, 0, 0, 0.05); padding: 0em; }

/* 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 .heading, .fpbox .mainheading { border: 0; border-bottom: 1px solid #505050; }

.fpbox { background: rgba(0, 0, 0, 0.05); border: 1px solid #505050; box-shadow: 0 2px 5px #505050; }

.fplink:not(.fplink-plain) { background: rgba(0, 0, 0, 0.3); border: 1px solid #505050; }

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

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

/* From original site */

/* BODY */

body { background: #92735F url("https://static.wikia.nocookie.net/endingdays_gamepedia_en/images/8/84/Wiki_Background.jpg/revision/latest") no-repeat top center; background-size: cover; }

.mw-body-content { z-index: auto; }

.mw-body { background: #efebe9; border: 1px solid #D3907B; }

/* Header */

height: 0; background: transparent; }
 * 1) mw-page-base {

margin: 0; height: 92px; }
 * 1) mw-head-base {

height: 92px; }
 * 1) mw-head {

display: block; margin-top: 55px; margin-bottom: 0; padding-left: 3px; }
 * 1) left-navigation {

margin-top: 55px; margin-right: 9px; }
 * 1) right-navigation {

div.vectorTabs { padding: 0; height: 26px; background: none; }

div.vectorTabs ul { background: none; }

div.vectorTabs ul li, div#mw-head div.vectorMenu h3 { padding: 0 19px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a58069+0,654633+100 */ background: rgb(165, 128, 105); /* Old browsers */ background: -moz-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a58069', endColorstr='#654633', GradientType=0); /* IE6-9 */ border: 1px solid #D3907B; border-radius: 10px; margin-right: 5px; }

div#mw-head div.vectorMenu h3 { float: none; margin: 0; height: 100%; }

div.vectorTabs span, div#mw-head div.vectorMenu h3 span { background: rgb(165, 128, 105); /* Old browsers */ background: -moz-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a58069', endColorstr='#654633', GradientType=0); /* IE6-9 */ }

div.vectorTabs li.selected, div#mw-head div.vectorMenu:hover h3, div#mw-head div.vectorMenu .vectorMenuCheckbox:checked+h3 { background: rgb(165, 128, 105); /* Old browsers */ background: -moz-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a58069', endColorstr='#654633', GradientType=0); /* IE6-9 */ }

div.vectorTabs li.selected span, div#mw-head div.vectorMenu:hover h3 span, div#mw-head div.vectorMenu .vectorMenuCheckbox:checked+h3 span { background: rgb(165, 128, 105); /* Old browsers */ background: -moz-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(165, 128, 105, 1) 0%, rgba(101, 70, 51, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a58069', endColorstr='#654633', GradientType=0); /* IE6-9 */ }

div.vectorTabs li a, div.vectorMenu h3 span { padding: 0; height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #dfcf99 !important; line-height: 26px; font-weight: bold; text-decoration: none; text-shadow: 0 0 0.5rem rgba(0, 0, 0, 1), -1px -1px 0 rgba(0, 0, 0, 0.25), 1px -1px 0 rgba(0, 0, 0, 0.25), -1px 1px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 rgba(0, 0, 0, 0.25); }

div.vectorTabs li a { margin: 0 -15px; padding: 0 15px; }

div#mw-head div.vectorMenu>h3>a { position: static; display: inline-block; margin: 0 -3px 0 0; padding: 0 12px 0 4px; width: 11px; height: 26px; vertical-align: top; line-height: 26px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QQYFxkfDTht+QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAATElEQVQI14XMQQ2AMBQE0fcxgAQwQlIrKMMKBCNUAg64AClNGva4O7Nx7vOIFYN2MlLAj5CR+mk54mkawgtClBeV8AGhK+F7SNhqEC60JBsT/5zCxwAAAABJRU5ErkJggg=="); background-position: 4px 50%; background-repeat: no-repeat; }

div#mw-head div.vectorMenu>.menu { left: 0; top: 26px; border: 1px solid #875b3a; border-top-color: #7c5436; border-radius: 0 0 6px 6px; background: linear-gradient(to bottom, #7c5436 0%, #47301e 100%); box-shadow: -2px 5px 5px rgba(0, 0, 0, 0.5); }

div#mw-head div#p-cactions>.menu { left: auto; right: 0; top: 26px; border: 1px solid #875b3a; border-top-color: #7c5436; border-radius: 0 0 6px 6px; background: linear-gradient(to bottom, #7c5436 0%, #47301e 100%); box-shadow: -2px 5px 5px rgba(0, 0, 0, 0.5); }

div#mw-head div.vectorMenu>.menu>ul { border: none; background-color: transparent; }

padding: 0.5em; text-align: center; }
 * 1) socialIconImages {

float: none !important; margin: 0 !important; }
 * 1) socialIconImages>a {

width: auto !important; }
 * 1) socialIconImages>a>img {

.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a { margin: 0 -15px; padding: 26px 5px 0 5px; background-position: center; }

.vectorTabs #ca-watch.icon a { background-image: url("data:image/svg+xml;utf-8, ") !important; }

.vectorTabs #ca-unwatch.icon a { background-image: url("data:image/svg+xml;utf-8, ") !important; }

position: absolute; float: none; bottom: 50px; right: 0; margin-right: 0.3em; }
 * 1) p-search {

margin: 0; background: rgba(30, 30, 30, 0.8); border: none; padding: 3px 1.4em 3px 5px; border-radius: 10px; color: #fafafa; }
 * 1) p-search>form>#simpleSearch {

width: 2em; }
 * 1) p-search>form>#simpleSearch #searchButton,
 * 2) p-search>form>#simpleSearch #mw-searchButton {

/* Sidebar menu */

.skin-hydra div#mw-panel div.portal div.body { background-image: none; }

.skin-hydra div#mw-panel.collapsible-nav .portal h3 { padding-left: 1rem; }

.skin-hydra div#mw-panel.collapsible-nav .portal h3:hover { text-decoration: none; }

.skin-hydra div#mw-panel a { text-shadow: 0 0 0.5rem rgba(0, 0, 0, 1), -1px -1px 0 rgba(0, 0, 0, 0.25), 1px -1px 0 rgba(0, 0, 0, 0.25), -1px 1px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 rgba(0, 0, 0, 0.25); }

.skin-hydra div#mw-panel.collapsible-nav .portal h3, .skin-hydra div#mw-panel.collapsible-nav .portal h3 a, .skin-hydra div#mw-panel.collapsible-nav .portal h3 a:visited, .skin-hydra div#mw-panel.collapsible-nav .portal.collapsed h3, .skin-hydra div#mw-panel.collapsible-nav .portal.collapsed h3 a, .skin-hydra div#mw-panel.collapsible-nav .portal.collapsed h3 a:visited { font-family: "Fontin-Regular", Verdana, Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 700; color: #fafafa; }

.skin-hydra div#mw-panel.collapsible-nav .portal .body { margin-left: 1rem; }

.skin-hydra div#mw-panel div.portal div.body ul li a, .skin-hydra div#mw-panel div.portal div.body ul li a:visited { font-weight: bold; color: #dfcf99; }

.skin-hydra div#mw-panel div.portal div.body ul li a:hover, .skin-hydra div#mw-panel div.portal div.body ul li a:visited:hover { color: #fff; }

/* ===== Category tree ===== */

.CategoryTreeEmptyBullet { color: #5e4f45; }

.CategoryTreeToggle { color: #16678a; }

/* Wiki Elements */

.toc { background: #F5F5F5; border: 1px solid #575757; border-radius: 3px; }

/* Font Coloring */

h1, h2, h3, h4, h5, h6 { color: #7A541A; }

a, a.extiw, div#content a.external, .skin-hydra #mw-indicator-mw-helplink a { color: #FF3C21; }

a:visited, div#content a.extiw:visited, div#content a.external:visited { color: #B0452E; }

.codeblock { background: #D8E0E4; }

/* FRONT PAGE FLEXBOX */

.frontpage-flex-container { display: flex; flex-wrap: wrap; }

.flex-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }

.flex-column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; padding: 5px; box-sizing: border-box; }

.flex-double-column { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; padding: 5px; box-sizing: border-box; }

.welcome-banner { font-size: 14px; font-weight: 300; text-align: center; color: #333; margin-bottom: 20px; }

.flex-column>div { border: 1px solid #D3907B; height: 100%; background: #F5F5F5; border-radius: 5px; position: relative !important; }

.frontpage-category { font-family: sans-serif; font-size: 15px; font-weight: bold; color: #fff; display: block; width: 100%; padding: 5px 15px 5px 15px; box-sizing: border-box; background: #334b80; border-bottom: 1px solid #333; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.frontpage-content { display: block; width: 100%; height: 100%; padding: 15px; box-sizing: border-box; }

.frontpage-more { background: rgb(159, 159, 159); background: -moz-linear-gradient(0deg, rgba(159, 159, 159, 1) 0%, rgba(199, 199, 199, 1) 81%); background: -webkit-linear-gradient(0deg, rgba(159, 159, 159, 1) 0%, rgba(199, 199, 199, 1) 81%); background: linear-gradient(0deg, rgba(159, 159, 159, 1) 0%, rgba(199, 199, 199, 1) 81%); width: 100%; padding: 5px; box-sizing: border-box; color: #000; font-size: 14px; font-weight: bold; text-align: center; border-top: 1px solid #afaeae; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.Alert { background: #F8F8F8; color: #FF3C21; font-weight: bold; border: 1px solid #FF3C21; border-radius: 5px; padding: 10px; box-sizing: border-box; }

.update-log { display: block; width: 100%; padding: 15px; box-sizing: border-box; border-bottom: 1px solid #ccc; transition: 0.1s; }

.update-log:hover { background: #fff; transition: 0.1s; }

.log-title { color: #000; font-size: 15px; font-weight: bold; }

/* Table Formatting */

.column-content { background: #ccc; }

.wikitable tr, td { padding: 10px !important; }

.wikitable th { background: #eaccb6 !important; }

.wikitable tr:nth-child(odd) { background: #e8ecef !important; }

/* Infobox */

.infobox { border: 1px solid #D3907B; border-radius: 5px; float: right; margin: 0 0 1em 1em; width: 250px; background: #F5F5F5; -webkit-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.13); -moz-box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.13); box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.13); }

.infobox-title { font-family: sans-serif; font-size: 15px; font-weight: bold; color: #fff; text-align: center; display: block; width: 100%; padding: 5px 15px 5px 15px; box-sizing: border-box; background: #334b80; border-bottom: 1px solid #333; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.infobox-image { text-align: center; background: #eee; overflow: hidden; width: 100%: }

.infobox-info { padding: 10px; width: 100%: box-sizing:border-box; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; font-size: 12px; }

.infobox table { border-collapse: collapse; }

.infobox th { vertical-align: middle; width: 100px; }

.infobox td { vertical-align: middle; }

.infobox tr { border-bottom: 1px solid #ccc !important; }

/* Stat Icons */

.attack { padding: 2px 5px 2px 4px !important; color: #fff; background: #E04E42; border-radius: 5px; font-weight: bold; }

.spell { padding: 2px 5px 2px 4px !important; color: #fff; background: #7E007E; border-radius: 5px; font-weight: bold; }

.guard { padding: 2px 5px 2px 4px !important; color: #fff; background: #255266; border-radius: 5px; font-weight: bold; }

.heart { padding: 2px 5px 2px 4px !important; color: #fff; background: #FF9900; border-radius: 5px; font-weight: bold; }

/* Editors Page Indexing */

font-weight: bold; font-style: italic; color: green; text-transform: uppercase; font-size: 10px !important; }
 * 1) completed {

font-weight: bold; font-style: italic; color: red; text-transform: uppercase; font-size: 10px !important; }
 * 1) empty {

font-weight: bold; font-style: italic; color: blue; text-transform: uppercase; font-size: 10px !important; }
 * 1) update {

.new { color:red; }

/* Tabber */

.tabbertab { border: none !important; }

.tabbernav { border-bottom: none !important; }

/* Profile Gallery - for character selection */

.inner-wrap { display: table; margin: 0 auto; }

.profile-gallery { list-style: none; }

.profile-gallery li { display: inline-block; }

.profile-gallery-thumbnail { display: block; background: #ccc; border: 1px solid #333; border-radius: 10px; margin: 5px; width: 70px; height: 70px; background-size: fit; background-position: center center; overflow: hidden; }

.label { display: block; font-size: 13px; font-weight: bold; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.profile-gallery li:hover>.profile-gallery-thumbnail { border: 1px solid blue }

.profile-gallery li:hover>.label { color: blue; }

/* Inline Icons */ .icon-align { vertical-align: middle; }