Hello there! We are conducting a survey to better understand the user experience in making a first edit. If you have ever made an edit on Gamepedia, please fill out the survey. Thank you!

MediaWiki:Hydra.css

From Airport CEO Wiki
Jump to: navigation, search

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 */
.mobileonly {
    display:none 
}
/* Hide title on front page */
body.page-Airport_CEO_Wiki h1.firstHeading {
    display:none 
}
body {
    background-attachment:fixed;
    background-color:#559DCD;
    background-image:url(/media/9/98/Bg.jpg);
    background-repeat:repeat;
    background-size:cover 
}
#pageWrapper {
    margin-right:10px 
}
#mw-page-base {
    background:transparent !important 
}
.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-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 
}
.amsmalltext {
    font-size:smaller;
    margin-left:0.8em;
    margin-top:0.5em 
}
.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:#f9f9f9;
    border:2px solid inherit;
    border-radius:5px;
    font-weight:bold;
    padding:0.5px 7px;
    text-align:right 
}
.infoboxname {
    font-size:110%;
    font-weight:bold;
    padding:0.5em 
}
.infoboxdetails {
    padding:0em 
}
.copyright-icon {
    background:url(https://commons.gamepedia.com/media/commons.gamepedia.com/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 
}
table.navbox {
    border:1px solid #aaaaaa;
    clear:both;
    font-size:88%;
    margin:auto;
    padding:1px;
    text-align:center;
    width:100% 
}
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;
    background-color:#dddddd !important;
    border-radius:2px;
}
.navbox,.navbox-subgroup {
    background:rgba(255,255,255,0.2) 
}
.navbox-list {
    border-color:rgba(255,255,255,0.2) 
}
.navbox-title,table.navbox th {
    background:rgba(255,255,255,0.2);
    color: gold;
    text-shadow: 1px 1px 3px #000000;
    background-color: #5298d3;
    border-radius: 4px;
}
th.navbox-title a, th.navbox-title a:visited, th.navbox-title a.external {
    color:gold !important;
    color: gold;
    text-shadow: 1px 1px 3px #000000;
}
.navbox-abovebelow,.navbox-group,.navbox-subgroup .navbox-title {
    background:rgba(255,255,255,0.2);
    color:#333 
}
.navbox-subgroup .navbox-group,.navbox-subgroup .navbox-abovebelow {
    background:rgba(0,0,0,0.05);
    color:#333 
}
.navbox-even {
    background:rgba(0,0,0,0.05);
    color:#333 
}
.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 
}
.fpmain {
    width:100%;
    overflow:hidden;
    z-index:1 
}
.fpbanner {
    background:rgba(0,0,0,0.05);
    border:1px solid #505050;
    box-shadow:0 2px 5px #505050;
    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 
}
.fpmidsections {
    float:left;
    width:100%;
    overflow:hidden 
}
.fpbox {
    background:rgba(0,0,0,0.05);
    border:1px solid #505050;
    box-shadow:0 2px 5px #505050;
    margin:5px;
    padding:5px;
    overflow:auto 
}
.fpbox .mainheading {
    border:none;
    border-bottom:1px solid #505050;
    font-size:150%;
    font-weight:bold;
    margin:0 0 10px 0;
    padding:0 0 5px 0;
    overflow:auto 
}
.fpbox .heading {
    border:none;
    border-bottom:1px solid #505050;
    text-align:center;
    font-size:132%;
    margin:0 0 10px 0;
    padding:0 0 5px 0;
    overflow: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 
 }
}
.fpbox.plain {
    background:transparent;
    border:none;
    box-shadow:none 
}
.fpimagelist ul {
    list-style-type:none;
    list-style-image:none 
}
.fpvideos {
    margin:0 auto;
    overflow:hidden;
    text-align:center 
}
.fpvideo {
    display:inline-block;
    margin:0 5px 
}

/* Sidebar */
div#mw-panel div.portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
    background:rgba(240,240,240,.95);
    border:3px solid;
    border-color:skyblue;
    border-radius:10px;
    margin-bottom:0.25em;
}
div#mw-panel div.portal div.body ul li a,div#mw-panel div.portal div.body ul li a:visited,#mw-panel.collapsible-nav a:visited,#mw-panel.collapsible-nav .portal h3 a,#mw-panel.collapsible-nav .portal h3 a:visited,#mw-panel.collapsible-nav div.portal h3 a,#mw-panel.collapsible-nav div.portal h3 a:visited,#mw-panel.collapsible-nav .portal.collapsed h3 a,#mw-panel.collapsible-nav .portal.collapsed h3 a:visited {
    color:black;
    font-weight:bold
}
/* End Sidebar */

/* Vector Tabs */

div.vectorMenu h3 a {
    background-image:none
}
div.vectorTabs {
    background-image:none
}
div.vectorTabs span {
    background-image:none
}
div.vectorTabs ul {
    background-image:none
}
div.vectorTabs ul li {
    background-color:white;
    color:#000000;
    border:1px solid skyblue;
    border-bottom:0px;
    border-radius:5px 5px 0px 0px
}
div.vectorTabs ul li.selected {
    background-color:transparent;
    color:#000000
}
div.vectorTabs ul li span {
    background-image:none;
    color:#000000;
    font-weight:bold
}
div.vectorTabs ul li.selected span {
    color:#ff0000;
    font-weight:bold
}
div.vectorTabs li span a {
    background-image:none;
    color:#000000
}
div.vectorTabs span a:visited {
    color:#000000
}
div.vectorTabs li span a:hover,div.vectorTabs span a:visited:hover {
    color:skyblue
}
div.vectorTabs li.selected span a {
    background-color:transparent;
    color:#000000 !important
}
div.vectorTabs li.new span a:visited {
    color:#000000
}
div.vectorTabs li.new span a:hover,div.vectorTabs li.new span a:visited:hover {
    color:skyblue
}
div.vectorMenu h5 a {
    background-image:none
}
div.vectorMenu:hover,div.menu,div.vectorMenu div.menuForceShow {
    display:block
}
div.vectorMenu {
    background-image:none;
    background-color:white;
    border-radius:5px 5px 0px 0px;
    border:1px solid;
    border-color:skyblue;
    border-bottom:0px
}
#p-sharing-label, #p-cactions-label {
    border-radius:5px 5px 0px 0px;
}
div#p-cactions div.menu ul {
    border:1px solid #000000
}
div#p-cactions div.menu ul li a {
    background:#ffffff;
    color:#000000
}
div#p-cactions div.menu ul li a:visited {
    color:#666
}
div#p-cactions div.menu ul li a:hover,div#p-cactions div.menu ul li a:visited:hover {
    display:block
}
div#mw-head div.vectorMenu h4 {
    color:#FFFFFF;
    font-weight:bold
}
div.vectorMenu ul {
    border:1px solid #ffffff
}
div.vectorMenu #p-sharing {
    background-color:transparent;
    background-image:none
}
#p-sharing-label span {
    font-weight:bold
}
#p-cactions-label span {
    font-weight:bold
}

/* Sliver Fix */
div#mw-head div.vectorMenu h3 {
    background-image: none;
}

/* align left vector tabs border with content border */
div#left-navigation {
  position:absolute;
  margin-left:10.93em;
}
li#ca-nstab-main, li#ca-nstab-mediawiki, li#ca-nstab-special, li#ca-nstab-template, li#ca-nstab-template, li#ca-nstab-user, li#ca-nstab-project {
  border-left:2px solid skyblue;
}

/* End Vector Tabs */

/* Wikitable */
table.wikitable > tr > th,table.wikitable > tr > td,table.wikitable > * > tr > th,table.wikitable > * > tr > td {
  border: 1px solid skyblue;
}
/* End Wikitable */

/* Editor */
.wikiEditor-ui {
  background:none;
  border: none;
}
.wikiEditor-ui-controls {
  background: none;
}
.wikiEditor-ui-buttons {
  background: none;
  border: none;
}
.wikiEditor-ui-tabs div {
    background-color: #465a70;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-tabs div a {
     background: #465a70;
     color: #c0c0c0;
}

.wikiEditor-ui-tabs div.current {
    border-bottom: 1px solid #000000;
}

.wikiEditor-ui-tabs div.current a {
    color: #ffffff;
    font-weight: bold;
}
.wikiEditor-preview-contents {
  background: rgba(200, 200, 200, 0.1);
}

/* End Editor */

/* Table of Contents */
#toc {
  background-color: rgba(132, 145, 166, 0.3);
}
/* End Table of Contents */

div#content {
    background:rgba(240,240,240,0.9);
    border:2px solid skyblue;
    border-radius:0px 0px 10px 10px;
    box-shadow:5px 5px 10px black;
}
div.mw-notification-area {
  color: #000000;
}
@font-face {
	font-family: 'OpenSans-Bold';
	src: local('OpenSans-Bold'), local('OpenSans-Bold'), url(/media/hydra/fonts/OpenSans-Bold.ttf) format('truetype');
}
.rcoptions {
  border-color:#ffffff;
}
#firstHeading {
  font-family:OpenSans-Bold;
  color:#ffcf06;
  text-shadow:0px 0px 5px black;
}

/* Preferences styling */
#preferences {
  background: rgba(225, 225, 225, 0.6) !important;
}
.client-js #preftoc {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0px;
}

.client-js #preftoc,
.client-js #preftoc li,  
.client-js #preferences, 
.client-js #preftoc li a {
    background-image: none;
    background-color: rgba(0, 0, 0, 0);
    color: #666666;
}

.client-js #preftoc li:first-child {
    margin-bottom: 4px;
}

.client-js #preftoc li.selected a {
    background-color: rgba(245, 245, 245, 0.5);
    background-image: none;
    border-color: #aaaaaa #aaaaaa rgba(255, 255, 255, 0.5);
    border-style: solid;
    border-width: 1px;
    color: #000000;
}
/* End Preferences Styling */

/* Link Styling */
a {
  color: rgba(0, 0, 200);
}
a:visited {
    color:rgba(125,62,187)
}
/* End Link Styling */

/* Footer */
div#footer {
    background:rgba(240,240,240,0.9);
    border:2px solid skyblue;
    border-radius:10px 10px 10px 10px;
    box-shadow:5px 5px 10px black;
    margin-top:2em;
    margin-bottom: 1em;
}
/* End Footer */

/* Fplink styling (buttons on main page) */
div.fplink.plainlinks div.box div.row div.cell {
  background:linear-gradient(to bottom right, gainsboro, skyblue);
  border: 1px solid black;
}
div.fplink.plainlinks div.box div.row div.cell:hover {
  background:linear-gradient(to bottom right, azure, lightblue);
}

/* Infobox style */
.infobox {
  float: right;
  width: 23em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding: 2px;
  background-color: #111111;
  border: 1px solid #ffffff;
  border-radius:4px 4px 0px 0px;
}

.infobox-table {
  width: 100%;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius:2px 2px 0px 0px;
}

.infobox-header {
  padding: 0.1em;
  color: gold;
  text-shadow: 1px 1px 3px #000000;
  background-color:#5298d3;
  border-radius: 4px;
  font-size: 130%;
  text-align: center;
}

.infobox-section {
  text-align:center;
  background-color: #dddddd;
  border-radius: 2px;
}

.infobox-centered {
  text-align: center;
}

.infobox-centered img {
  max-width:100%;
  height:auto;
}

.infobox-row {
  vertical-align: top;
}

.infobox-row-name {
  text-align: left;
  white-space: nowrap;
}

.infobox-spacer {
  height: 0.5em;
}

/* fake <h2> - looks identical but no edit link and doesn't show up in the ToC */
.fakeh2 {
  font-family: sans-serif;
  font-size: 1.5em;
  margin-top: 1em;
  line-height: 1.3;
  color: #000;
  font-weight: normal;
  margin-bottom: 0.25em;
  padding: 0;
  border-bottom: 1px solid #a2a9b1;
}

footer#curse-footer .footer-box {
  flex:unset;
}

footer#curse-footer ul li {
  white-space:nowrap;
}

/********************************************
* Improved responsiveness for narrow widths *
*********************************************/
.mw-body {
  margin-left:11em;
}

@media screen and (max-width:720px) {
  div#content {
    margin-top:1em;
  }
  
  #pageWrapper {
    margin-right:0;
  }

  div#left-navigation,
  div#right-navigation {
    top:3.55em;
  }

  div#left-navigation {
    margin-left:5px;
  }
  
  div#right-navigation {
    margin-right:5px;
  }

  #left-navigation ul > li.selected:first-child span {
    border-radius:13px 0 0 0;
  }

  div#p-namespaces,
  div#p-views,
  div#p-variants,
  div#p-cactions,
  div#p-sharing,
  div#mw-panel {
    top:0;
  }

  div#p-search {
    top:-3em;
  }

  div#right-navigation div#p-search {
    margin-right:0;
  }

  div#mw-navigation div#mw-panel .portal {
    width:auto;
    text-align:center;
  }
  
  div#mw-navigation div#mw-panel {
    width:unset;
    margin: auto;
  }
}

@media screen and (max-width:912px) and (min-width:720px) {
  div#content {
    padding-top:1.925em;
  }
  div#left-navigation,
  div#right-navigation {
    font-size:0.8em;
    margin-top:10.65em;
  }
  div#left-navigation {
    margin-left:14.6em;
  }
  li#ca-watch,
  li#ca-unwatch,
  li#ca-view {
    display:none;
  }
}
/******************************
* end improved responsiveness *
*******************************/