MediaWiki:Vector.css

/* CSS placed here will affect users of the Vector skin */
@import url('//fonts.googleapis.com/css?family=Karla:400,600');

body { background: url("https://static.miraheze.org/fantasiacontestwiki/f/ff/WikiBG.png") center bottom / cover no-repeat fixed; }

#stripe { background-color: #979797; line-height: 40px; height: 40px; width: 100%; top: 0; z-index: 20000; position: fixed; display: inline-block; }
#scf-stripe-logo { margin-left: 125px; line-height: 47px; float: left; width: 60px; text-align: center; }
#scf-stripe-logo img { height: 48px; vertical-align: top; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); transition: filter 0.2s linear; }
#scf-stripe-logo img:hover { filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.7)); }
#scf-navigation { margin: -1px 0 0 20px; padding: 0; float: left; font-weight: 400; font-size: 15px; letter-spacing: 0.05em; -webkit-padding-start: 0; }
#scf-navigation li { display: inline-block; list-style-type: none; margin: 0; }
#scf-navigation a {display: inline-block; line-height: 40px; height: 41px; color: #FFF; text-decoration: none; padding: 0 15px; font-family: Karla, sans-serif; }
#scf-navigation a:hover, #scf-navigation li a.active, #scf-welcome a:hover { background-color: #4B4B4B; }

#local-stripe { background-color: #4B4B4B; line-height: 30px; height: 30px; width: 100%; margin-top: -30px; z-index: 19999; position: fixed; display: inline-block; }
#local-navigation { margin: 0 0 0 206px; padding: 0; float: left; font-weight: 400; font-size: 12px; letter-spacing: 0.05em; -webkit-padding-start: 0; }
#local-navigation li { display: inline-block; list-style-type: none; margin: 0; }
#local-navigation a {display: inline-block; line-height: 30px; height: 29px; color: #FFF; text-decoration: none; padding: 0 15px; font-family: Karla, sans-serif; }
#local-navigation a:hover, #local-navigation li a.active { background-color: #252525; }

#scf-welcome { margin: -1px 125px 0 0; padding: 0; float: right; font-weight: 400; font-size: 15px; letter-spacing: 0.05em; -webkit-padding-start: 0; }
#scf-welcome li { display: inline-block; list-style-type: none; }
#scf-welcome a { display: inline-block; line-height: 40px; height: 41px; color: #FFF; text-decoration: none; padding: 0 15px; font-family: Karla, sans-serif; }
#scf-welcome li a .avatar-wrapper { margin-top: 4px; margin-right: 8px; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; float: left; }
#scf-welcome li a .avatar-wrapper img { margin-top: -13px; object-fit: cover; width: 31px; height: 31px; }
.scf-user-dropdown { position: relative; }
.scf-user-dropdown:hover .scf-user-dropdown-content { display: block; }
.scf-user-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-top: 1px; }
.scf-user-dropdown-content a { color: black !important; width: 120px; display: block; }
.scf-user-dropdown-content a:hover { background-color: #ddd !important; }
.notif-bubble { display: inline-block; font-size: 10px; font-weight: bold; border-radius: 50%; min-width: 10px; height: 10px; background: red; text-align: center; padding: 2px; line-height: 10px; margin-left: -6px; }

#scf-header { width: 100%; height: 175px; margin-top: 69px; text-align: center; background-position: center; background-size: cover; display: table; }
#scf-logo { display: table-cell; width: 100%; vertical-align: middle; user-select: none; }
#scf-logo a img { max-width: 300px; max-height: 130px; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)); transition: filter 0.2s linear; margin: 0; padding: 0; position: relative; z-index: 2; }
#scf-logo a img:hover { filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)); }

#mw-head { top: 175px; }
#mw-panel { top: 255px; }
#p-logo { display: none; }
#mw-head-base { margin-top: -75px; }
#mw-page-base { background: none; }
#content { margin-top: -74px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border: 2px solid #979797; border-right: none; }
#p-personal { display: none; }

#left-navigation { margin-left: 11em; }
.vectorTabs { background: none; height: 35px; }
.vectorTabs li { background: none; }
.vectorTabs .selected { background: none; }
.vectorTabs span a { padding-top: 10px; }
#simpleSearch input { background: #fff; }

/** SIDEBAR **/

#mw-panel .portal { background: white; margin: 0 0.6em 0.5em 0.7em; padding: 0.35em 0.35em 0.50em 0.35em; border: 2px solid #979797; padding: 10px; border-radius: 10px; }
#mw-panel .portal .body, #mw-panel .portal h3 { margin: 0; margin-left: 0; padding-right: 10px; }
#mw-panel #p-logo + .portal h3 { margin: 0; display: block;  }
#mw-panel #p-logo + .portal .body { margin-left: 0; background-image: linear-gradient(to right,transparent 0,#c8ccd1 35%,#c8ccd1 70%,transparent 100%); }