We do our best to give you all information you need. Use the Search menu to search for the page you are looking for. The most used pages are on the side menu or in the Popular Pages page.
Do you miss important stuff or do you have suggestions? Let us know via Discord or in-game. Thank you for using our Wiki!
Difference between revisions of "MediaWiki:Common.css"
From GrinderScape Wiki
(371 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
+ | /* Footer Timestamp Removal - Please delete if you want it back | ||
+ | ul#footer-info { | ||
+ | display: none !important; | ||
+ | } */ | ||
+ | |||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700); | @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700); | ||
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700); | @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700); | ||
− | |||
body { | body { | ||
− | background: url(https://www.grinderscape.org | + | background: url(https://www.grinderscape.org/images/home-bg.jpeg); |
− | font-family: Open Sans, sans-serif; | + | font-family: Open Sans, sans-serif !important; |
line-height: 20px; | line-height: 20px; | ||
+ | font-size: 12px; | ||
} | } | ||
− | |||
a { | a { | ||
− | + | text-decoration: underline; | |
− | text-decoration: | + | |
− | + | ||
} | } | ||
− | + | a, .link a { | |
− | + | color: #272525; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .link a:hover { | |
− | + | color: #593018; | |
− | + | ||
} | } | ||
− | + | a.new { | |
− | + | color: #b24040; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle { | |
− | + | float: right; | |
+ | margin-left: 10px; | ||
} | } | ||
− | + | /* Utility Colors */ | |
− | color: # | + | .u_colorWarning{ |
+ | color: #ab0000 | ||
} | } | ||
− | + | .u_bgWarning { | |
− | + | background-color: rgb(247 166 166 / 37%); | |
− | + | border: 1px dashed #ab000066; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /* End Utility Colors */ | ||
− | + | /* nav ul { | |
list-style-type: none; | list-style-type: none; | ||
list-style-image: none; | list-style-image: none; | ||
Line 75: | Line 50: | ||
} | } | ||
− | + | nav ul li { | |
− | + | ||
− | + | ||
margin: 0; | margin: 0; | ||
− | |||
display: inline-flex; | display: inline-flex; | ||
− | } | + | } */ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
header { | header { | ||
− | min-width: | + | min-width: auto; |
− | + | ||
} | } | ||
− | + | div#logo { | |
padding: 30px 0; | padding: 30px 0; | ||
margin: auto; | margin: auto; | ||
Line 107: | Line 65: | ||
} | } | ||
− | div# | + | div#main-wrapper { |
− | + | } | |
− | + | ||
− | + | div#mw-navigation { | |
− | + | display: none; | |
− | + | ||
} | } | ||
− | + | div#mw-head { | |
position: initial; | position: initial; | ||
} | } | ||
− | + | div#p-personal { | |
position: initial; | position: initial; | ||
text-align: right; | text-align: right; | ||
− | padding-bottom: | + | padding-bottom: 0; |
} | } | ||
− | + | #p-personal ul { | |
− | padding: 0; | + | padding: 0 20px;; |
display: inline-block; | display: inline-block; | ||
− | |||
− | |||
} | } | ||
− | + | #p-personal ul li { | |
float: initial; | float: initial; | ||
margin: 0; | margin: 0; | ||
− | |||
− | |||
display: inline-block; | display: inline-block; | ||
− | padding: 0!important; | + | padding: 0 !important; |
background: none; | background: none; | ||
− | |||
} | } | ||
− | + | #p-personal ul li a { | |
− | + | /* margin: 0 10px; */ | |
+ | margin: 10px; | ||
+ | padding: 0; | ||
display: block; | display: block; | ||
} | } | ||
− | + | div#mw-head div.vectorMenu h3 { | |
− | + | display: none; | |
} | } | ||
− | + | div#siteNotice, .welcomeText, pageText { | |
− | + | padding: 30px 30px 0; | |
+ | text-align:center; | ||
} | } | ||
− | + | #noticeTitle, #welcome_title { | |
− | + | margin-bottom: 10px; | |
− | + | font-size: 18px; | |
− | + | padding: 0 0 10px 30px; | |
− | + | color: #592c0d; | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
− | + | border-bottom: 2px solid rgba(0, 0, 0, 0.1); | |
− | + | overflow: initial; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | div#localNotice { | |
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
− | + | div#localNotice>p { | |
margin: 0; | margin: 0; | ||
} | } | ||
− | + | div#pageInfo { | |
margin: 0 0 30px 0; | margin: 0 0 30px 0; | ||
padding: 30px; | padding: 30px; | ||
} | } | ||
− | + | h1#firstHeading { | |
− | background: url(https://i.imgur.com/ | + | background: url(https://i.imgur.com/qpqwLFJ.png) no-repeat; |
padding: 0 0 0 30px; | padding: 0 0 0 30px; | ||
line-height: 20px; | line-height: 20px; | ||
Line 191: | Line 141: | ||
border-bottom: none; | border-bottom: none; | ||
font-size: 13px; | font-size: 13px; | ||
− | color: # | + | color: #592c0d; |
} | } | ||
− | + | span.subpages { | |
position: relative; | position: relative; | ||
− | border-top: 2px solid | + | border-top: 2px solid rgba(0,0,0,0.1); |
padding-top: 10px; | padding-top: 10px; | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
− | + | div#content-sidebar-wrap { | |
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
} | } | ||
− | + | div#mw-panel { | |
position: initial; | position: initial; | ||
− | width: | + | width: 220px; |
display: table-cell; | display: table-cell; | ||
− | |||
vertical-align: top; | vertical-align: top; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
+ | border-left: 1px solid rgba(0,0,0,0.1); | ||
} | } | ||
− | + | div#p-logo { | |
display: none; | display: none; | ||
} | } | ||
− | + | div#p-search { | |
− | margin: 0; | + | margin: 0 auto; |
float: initial; | float: initial; | ||
− | |||
padding: 30px; | padding: 30px; | ||
+ | width:45%; | ||
} | } | ||
− | + | div#p-search div#searchTitle { | |
− | background: url(https://i.imgur.com/ | + | background: url(https://i.imgur.com/X1fC0qz.png) no-repeat; |
} | } | ||
− | + | span.subpages:before { | |
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
Line 240: | Line 190: | ||
} | } | ||
− | + | form#searchform { | |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
} | } | ||
− | + | div#simpleSearch { | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 254: | Line 204: | ||
} | } | ||
− | + | div#simpleSearch #searchInput, | |
+ | input#database_input { | ||
padding: 10px; | padding: 10px; | ||
line-height: 20px; | line-height: 20px; | ||
− | font-family: Open Sans,sans-serif; | + | font-family: Open Sans, sans-serif; |
− | background-color: | + | background-color: transparent; |
border: 1px solid #161b20; | border: 1px solid #161b20; | ||
+ | outline: none; | ||
} | } | ||
− | + | div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
text-indent: initial; | text-indent: initial; | ||
− | + | width: 4.65em; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | div#mw-panel div.portal { | |
margin: 0; | margin: 0; | ||
− | padding: 30px; | + | padding: 15px 30px; |
margin-bottom: 30px; | margin-bottom: 30px; | ||
+ | background-image:none; | ||
} | } | ||
− | + | div#mw-panel div.portal h3 { | |
cursor: initial; | cursor: initial; | ||
− | display: block!important; | + | display: block !important; |
} | } | ||
− | + | div#mw-panel div.portal h3#p-In_the_wiki-label { | |
− | background: url(https://i.imgur.com/ | + | background: url(https://i.imgur.com/7DeMxyz.png) no-repeat; |
} | } | ||
− | + | div#mw-panel div.portal h3#p-Popular_pages-label { | |
+ | background: url(https://i.imgur.com/qtaf1a3.png) no-repeat; | ||
+ | } | ||
+ | |||
+ | div#mw-panel div.portal h3#p-Categories-label { | ||
background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat; | background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat; | ||
} | } | ||
− | + | div#mw-panel div#p-Management { | |
− | + | display: none; | |
} | } | ||
− | + | div#mw-panel div.portal h3#p-Management-label { | |
− | + | background: url(https://i.imgur.com/vcNXF6N.png) no-repeat; | |
} | } | ||
− | + | div#mw-panel div.portal div.body { | |
+ | margin: 0 !important; | ||
+ | } | ||
+ | |||
+ | div#mw-panel div.portal div.body ul li { | ||
line-height: 20px; | line-height: 20px; | ||
display: flex; | display: flex; | ||
padding: 10px 0; | padding: 10px 0; | ||
− | border-bottom: 1px solid | + | border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
} | } | ||
− | + | div#mw-panel div.portal div.body ul li:last-child { | |
border-bottom: none; | border-bottom: none; | ||
} | } | ||
− | + | div#content-wrap { | |
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
− | + | div#content-navigation-wrap { | |
margin-bottom: 30px; | margin-bottom: 30px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
− | + | div#navigation { | |
display: flex; | display: flex; | ||
height: 42px; | height: 42px; | ||
Line 330: | Line 282: | ||
} | } | ||
− | + | div#navigation:before { | |
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
bottom: 0; | bottom: 0; | ||
− | border-bottom: 2px solid | + | border-bottom: 2px solid rgba(0, 0, 0, 0.1); |
width: 100%; | width: 100%; | ||
} | } | ||
− | + | div#left-navigation { | |
margin: 0; | margin: 0; | ||
position: absolute; | position: absolute; | ||
} | } | ||
− | + | div#right-navigation { | |
position: absolute; | position: absolute; | ||
right: 0; | right: 0; | ||
Line 349: | Line 301: | ||
} | } | ||
− | + | div.vectorTabs { | |
background: none; | background: none; | ||
padding: 0; | padding: 0; | ||
Line 355: | Line 307: | ||
} | } | ||
− | + | div.vectorTabs ul { | |
background: none; | background: none; | ||
} | } | ||
− | + | div.vectorTabs ul li { | |
− | background: none!important; | + | background: none !important; |
font-size: 0; | font-size: 0; | ||
} | } | ||
− | + | div.vectorTabs ul li.selected a { | |
cursor: initial; | cursor: initial; | ||
− | border-bottom: 2px solid # | + | border-bottom: 2px solid #5C3219; |
} | } | ||
− | + | div.vectorTabs span { | |
background: none; | background: none; | ||
} | } | ||
− | + | div.vectorTabs ul li a { | |
line-height: 20px; | line-height: 20px; | ||
padding: 10px; | padding: 10px; | ||
Line 381: | Line 333: | ||
} | } | ||
− | + | div.vectorTabs ul li a:hover { | |
− | border-bottom: 2px solid | + | border-bottom: 2px solid rgba(0, 0, 0, 0.2); |
} | } | ||
− | + | h3#p-cactions-label { | |
padding: 0; | padding: 0; | ||
− | margin: 0!important; | + | margin: 0 !important; |
} | } | ||
− | + | h3#p-cactions-label span { | |
display: none; | display: none; | ||
} | } | ||
− | + | div.vectorMenu h3 a { | |
position: initial; | position: initial; | ||
display: block; | display: block; | ||
width: 46px; | width: 46px; | ||
height: 40px; | height: 40px; | ||
− | background: url(https://i.imgur.com/ | + | background: url(https://i.imgur.com/l1cW7qY.png) no-repeat center !important; |
background-position: initial; | background-position: initial; | ||
outline: none; | outline: none; | ||
} | } | ||
− | + | div.vectorMenu h3 a:hover { | |
− | background: | + | background: #transparent !important; |
} | } | ||
− | + | div.vectorMenu div.menu { | |
top: 40px; | top: 40px; | ||
left: initial; | left: initial; | ||
right: 0; | right: 0; | ||
border: none; | border: none; | ||
− | background: | + | background: #c7b07c; |
} | } | ||
− | + | div.vectorMenu div.menu li { | |
line-height: 20px; | line-height: 20px; | ||
} | } | ||
− | + | div.vectorMenu li:first-child a { | |
border-top: 1px solid #151A1E; | border-top: 1px solid #151A1E; | ||
} | } | ||
− | + | div.vectorMenu li a { | |
padding: 10px 15px; | padding: 10px 15px; | ||
font-size: 12px; | font-size: 12px; | ||
Line 430: | Line 382: | ||
} | } | ||
− | + | div.vectorMenu li a:hover { | |
− | background: | + | background: rgba(255, 255, 255, 0.1); |
} | } | ||
− | + | div#content { | |
margin: 0; | margin: 0; | ||
padding: 30px; | padding: 30px; | ||
Line 441: | Line 393: | ||
} | } | ||
− | ul#footer-info { | + | #contentSub, |
+ | #contentSub2 { | ||
+ | margin: 30px 0; | ||
+ | } | ||
+ | |||
+ | ul#footer-info { | ||
margin: 0 30px; | margin: 0 30px; | ||
− | border-top: 2px solid | + | border-top: 2px solid rgba(0, 0, 0, 0.2); |
} | } | ||
Line 449: | Line 406: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
− | min-width: | + | min-width: auto; |
} | } | ||
− | + | div#customFooter { | |
margin: 0; | margin: 0; | ||
background: #252525; | background: #252525; | ||
Line 460: | Line 417: | ||
} | } | ||
− | ul#footer-places, ul#footer-icons, li#ca-unwatch, li#ca-watch, div#jump-to-nav, span#wpSummaryLabel, input#wpSummary, div.editCheckboxes, div#editpage-copywarn { | + | div#customFooter div a { |
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | display: inline-block; | ||
+ | margin: 0 5px !important; | ||
+ | } | ||
+ | |||
+ | ul#footer-places, | ||
+ | ul#footer-icons, | ||
+ | li#ca-unwatch, | ||
+ | li#ca-watch, | ||
+ | div#jump-to-nav, | ||
+ | span#wpSummaryLabel, | ||
+ | input#wpSummary, | ||
+ | div.editCheckboxes, | ||
+ | div#editpage-copywarn { | ||
display: none; | display: none; | ||
} | } | ||
− | div#siteNotice, div#pageInfo, div#content-navigation-wrap, div#p-search, div#mw-panel div.portal | + | /*div#siteNotice, |
− | background: | + | div#pageInfo, |
+ | div#content-navigation-wrap, | ||
+ | div#p-search, | ||
+ | div#mw-panel div.portal { | ||
+ | background: #bca674 !important; | ||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | ||
− | } | + | } */ |
− | + | div#searchTitle, | |
+ | div#mw-panel div.portal h3 { | ||
position: relative; | position: relative; | ||
font-size: 13px; | font-size: 13px; | ||
padding: 0 0 10px 30px; | padding: 0 0 10px 30px; | ||
− | color: # | + | color: #592c0d; |
margin-bottom: 30px; | margin-bottom: 30px; | ||
− | border-bottom: 2px solid | + | border-bottom: 2px solid rgba(0, 0, 0, 0.1); |
overflow: initial; | overflow: initial; | ||
} | } | ||
− | body, .mw-body p, p, a:hover, div#mw-panel div.portal div.body ul li a, span.subpages a, div#simpleSearch #searchInput, div.vectorTabs ul li a, table, .mw-body-content { | + | body, |
− | color: # | + | .mw-body p, |
+ | p, | ||
+ | a:hover, | ||
+ | div#mw-panel div.portal div.body ul li a, | ||
+ | span.subpages a, | ||
+ | div#simpleSearch #searchInput, | ||
+ | div.vectorTabs ul li a, | ||
+ | table, | ||
+ | .mw-body-content, | ||
+ | .mw-body pre, | ||
+ | textarea#wpTextbox1, | ||
+ | #contentSub, | ||
+ | #contentSub2, | ||
+ | input#database_input, | ||
+ | div#mw-panel div.portal div.body ul li a:visited, | ||
+ | a:visited, | ||
+ | .mw-body a.external, | ||
+ | .mw-body a.external:visited { | ||
+ | color: #272525; | ||
} | } | ||
− | div.portal h3:before, div#searchTitle | + | a:hover, a:focus, .mw-body a.external:hover { |
+ | text-decoration: none; | ||
+ | color: #5c3219; | ||
+ | } | ||
+ | div.portal h3:before, | ||
+ | div#searchTitle:before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
height: 2px; | height: 2px; | ||
width: 20px; | width: 20px; | ||
− | background-color: # | + | background-color: #5c3219; |
bottom: -2px; | bottom: -2px; | ||
left: 0; | left: 0; | ||
} | } | ||
+ | div.editButtons input[type="submit"], | ||
+ | div#simpleSearch #searchButton, | ||
+ | div.editButtons span a, | ||
+ | div#customFooter div a, | ||
+ | button#database_button { | ||
+ | color: #afafaf; | ||
+ | border: 1px solid #5c3219; | ||
+ | background-color: #5c3219; | ||
+ | background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); | ||
+ | padding: 10px; | ||
+ | margin: 0; | ||
+ | font-family: Open Sans, sans-serif; | ||
+ | font-size: 12px; | ||
+ | line-height: 20px; | ||
+ | cursor: pointer; | ||
+ | outline: none; | ||
+ | } | ||
+ | div.editButtons span a:hover, div.editButtons input[type="submit"]:hover { | ||
+ | background-color: #bca674; | ||
+ | color: #593018; | ||
+ | } | ||
+ | a#mw-editform-cancel:hover { | ||
+ | background-color: #bca674; | ||
+ | } | ||
+ | /* New Site Design */ | ||
+ | /* Base Classes */ | ||
+ | div, | ||
+ | table, | ||
+ | tr, | ||
+ | th, | ||
+ | td, | ||
+ | figure, | ||
+ | th, | ||
+ | video, | ||
+ | audio, | ||
+ | h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6, | ||
+ | aside, | ||
+ | canvas, | ||
+ | section, | ||
+ | header, | ||
+ | footer, | ||
+ | nav, | ||
+ | span, | ||
+ | p, | ||
+ | small, | ||
+ | big, | ||
+ | b, | ||
+ | strong, | ||
+ | img, | ||
+ | hr, | ||
+ | pre, | ||
+ | button, | ||
+ | input, | ||
+ | textarea, | ||
+ | optgroup, | ||
+ | ol, | ||
+ | select, | ||
+ | option, | ||
+ | blockquote, | ||
+ | nav { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | outline: none; | ||
+ | border: none; | ||
+ | text-decoration: none; | ||
+ | list-style-type: none | ||
+ | } | ||
+ | ul { | ||
+ | margin-bottom: 0 | ||
+ | } | ||
+ | .dFlx { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: -webkit-flex; | ||
+ | display: flex | ||
+ | } | ||
+ | .u_w_100 { | ||
+ | width:100%; | ||
+ | } | ||
+ | /* Header */ | ||
+ | .container { | ||
+ | max-width: 1600px; | ||
+ | margin: auto | ||
+ | } | ||
+ | header { | ||
+ | position: relative; | ||
+ | width: 100% | ||
+ | } | ||
+ | .header-top { | ||
+ | padding: 14px 0; | ||
+ | box-sizing: border-box; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | background: #110901 | ||
+ | } | ||
+ | .header-top .container { | ||
+ | justify-content: space-between | ||
+ | } | ||
+ | .header-top .logo { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | margin: auto; | ||
+ | max-width: 380px; | ||
+ | width: 380px; | ||
+ | z-index: 99 | ||
+ | } | ||
+ | .header-top .login { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex | ||
+ | } | ||
+ | .header-top .login li { | ||
+ | margin-right: 10px; | ||
+ | display:inline-flex; | ||
+ | } | ||
+ | .header-top .login li:last-child { | ||
+ | margin-right: 0 | ||
+ | } | ||
+ | .header-top .login li:last-child a:hover { | ||
+ | text-decoration: underline | ||
+ | } | ||
+ | .play-link { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex | ||
+ | } | ||
+ | .play-link li { | ||
+ | margin-right: 15px; | ||
+ | display: inline-flex; | ||
+ | } | ||
+ | |||
+ | .play-link li a { | ||
+ | color: #fff; | ||
+ | text-shadow: 0 3px 15px rgba(0, 0, 0, .75); | ||
+ | font-size: 22px | ||
+ | } | ||
+ | |||
+ | .play-link li a:hover { | ||
+ | color: #ff8936; | ||
+ | text-shadow: 0 3px 15px rgba(0, 0, 0, .75) | ||
+ | } | ||
+ | |||
+ | .login a { | ||
+ | color: #90b41a; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 15px; | ||
+ | padding: 2px; | ||
+ | } | ||
+ | |||
+ | .header-bottm { | ||
+ | padding: 30px 0; | ||
+ | box-sizing: border-box; | ||
+ | width: 100%; | ||
+ | background: #060402; | ||
+ | background: linear-gradient(90deg, rgba(6, 4, 2, 0.6026785714285714) 0%, rgba(38, 26, 6, 0.45) 10%, rgba(38, 26, 6, 0.45) 90%, rgba(6, 4, 2, 0.6) 100%) | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | flex-flow: row | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 5.75%; | ||
+ | position: relative; | ||
+ | display:inline-flex; | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li:last-child { | ||
+ | margin-right: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li:nth-child(4) { | ||
+ | margin-right: 32.41% | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a { | ||
+ | text-transform: uppercase; | ||
+ | color: #fe9826; | ||
+ | font-size: 17px; | ||
+ | display: block; | ||
+ | transition: .2s all ease-in-out; | ||
+ | text-shadow: 0 1px 0 rgba(0, 0, 0, .3) | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li.acitve a { | ||
+ | color: #90b41a; | ||
+ | text-shadow: 0 2px 28px #ffaa0a | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a:hover { | ||
+ | color: #90b41a; | ||
+ | text-shadow: 0 2px 28px #ffaa0a | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li::after { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background: url(https://www.grinderscape.org/images/menu-after-icon.png) no-repeat; | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | right: -50px; | ||
+ | top: 5px | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li:nth-child(4)::after { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background: 0 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | margin: 0; | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li:last-child::after { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background: 0 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | margin: 0; | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | .mobile-logo { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | /* Body */ | ||
+ | |||
+ | #main-wrapper { | ||
+ | overflow: hidden | ||
+ | } | ||
+ | |||
+ | #main-wrapper .container { | ||
+ | position: relative; | ||
+ | padding: 0 20px; | ||
+ | box-sizing: border-box | ||
+ | } | ||
+ | |||
+ | #main-wrapper .container::before { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background: url(https://www.grinderscape.org/images/left-sidebar.png); | ||
+ | background-repeat: repeat-y; | ||
+ | width: 110px; | ||
+ | height: 100%; | ||
+ | left: -60px; | ||
+ | z-index: 99; | ||
+ | top: 0; | ||
+ | background-size: 100% | ||
+ | } | ||
+ | |||
+ | #main-wrapper .container::after { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | background: url(https://www.grinderscape.org/images/right-sidebar.png); | ||
+ | background-repeat: repeat-y; | ||
+ | width: 110px; | ||
+ | height: 100%; | ||
+ | right: -60px; | ||
+ | z-index: 99; | ||
+ | top: 0; | ||
+ | background-size: 100% | ||
+ | } | ||
+ | |||
+ | .main-top-cstm { | ||
+ | background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y; | ||
+ | background-size: 100%; | ||
+ | background-color: #9f895a; | ||
+ | padding: 0 70px; | ||
+ | } | ||
+ | |||
+ | .main-content-cstm { | ||
+ | box-sizing: border-box; | ||
+ | padding: 42px 40px; | ||
+ | padding-bottom: 30px; | ||
+ | box-sizing: border-box; | ||
+ | background: #ab915a; | ||
+ | background: linear-gradient(180deg, rgba(171, 145, 90, 0.28335084033613445) 0%, rgba(171, 145, 90, 0) 95%) | ||
+ | } | ||
+ | |||
+ | #content-sidebar-wrap { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | justify-content: space-between; | ||
+ | position: relative; | ||
+ | background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y; | ||
+ | background-size: 100%; | ||
+ | padding: 65px 35px; | ||
+ | padding-bottom: 5px; | ||
+ | box-sizing: border-box | ||
+ | } | ||
+ | |||
+ | #content-sidebar-wrap::before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | background: url(https://www.grinderscape.org/images/middle-cover-top-bg.png) repeat-x; | ||
+ | height: 7px; | ||
+ | bottom: -6px; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | top: -4px | ||
+ | } | ||
+ | |||
+ | #content-sidebar-wrap::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | background: url(https://www.grinderscape.org/images/middle-cover-foot-bg.png) repeat-x; | ||
+ | height: 7px; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | bottom: -6px | ||
+ | } | ||
+ | |||
+ | #content-sidebar-wrap::before { | ||
+ | box-sizing: border-box | ||
+ | } | ||
+ | |||
+ | /* Footer */ | ||
+ | |||
+ | footer { | ||
+ | position: relative; | ||
+ | padding: 25px 25px 30px; | ||
+ | box-sizing: border-box; | ||
+ | background: #282013; | ||
+ | background: linear-gradient(180deg, rgba(40, 32, 19, 0.8267506831834296) 0%, rgba(39, 31, 16, 0.6754901789817489) 7%, rgba(36, 27, 9, 1) 25%, rgba(30, 21, 4, 1) 50%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 100%); | ||
+ | background: url(https://grinderscape.org/images/total-futr.png) no-repeat; | ||
+ | background-position: 100% 50%; | ||
+ | background-size: cover | ||
+ | } | ||
+ | |||
+ | footer ul { | ||
+ | padding-left: 0; | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | .footer-top { | ||
+ | border-bottom: 1px solid #140e01; | ||
+ | position: relative; | ||
+ | z-index: 9; | ||
+ | justify-content: space-between; | ||
+ | padding-bottom: 40px; | ||
+ | padding-top: 30px; | ||
+ | max-width: 82%; | ||
+ | margin: auto | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-30 { | ||
+ | width: 29% | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-70 { | ||
+ | width: 65% | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-70 .cw-33 { | ||
+ | width: 31%; | ||
+ | margin-right: 4% | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-70 .cw-33:last-child { | ||
+ | margin-right: 0 | ||
+ | } | ||
+ | |||
+ | .footer-top li { | ||
+ | display:flex; | ||
+ | } | ||
+ | |||
+ | .footer-top li a, | ||
+ | .footer-top p { | ||
+ | color: #f6e6c2; | ||
+ | font-family: pt sans caption, sans-serif; | ||
+ | font-weight: 400; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | .footer-top li a:hover { | ||
+ | color: #fe9826 | ||
+ | } | ||
+ | |||
+ | .footer-top p { | ||
+ | line-height: 1.7 | ||
+ | } | ||
+ | |||
+ | .footer-top li a { | ||
+ | line-height: 1.9 | ||
+ | } | ||
+ | |||
+ | .footer-top h5 { | ||
+ | font-family: pt sans caption, sans-serif; | ||
+ | font-weight: 700; | ||
+ | color: #fff; | ||
+ | font-size: 20px; | ||
+ | position: relative; | ||
+ | margin-bottom: 26px | ||
+ | } | ||
+ | |||
+ | .footer-top h5::before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | background: #fff; | ||
+ | width: 30px; | ||
+ | top: -14px | ||
+ | } | ||
+ | |||
+ | .footer-btm { | ||
+ | width: 100%; | ||
+ | box-sizing: border-box; | ||
+ | flex-flow: column; | ||
+ | justify-content: center; | ||
+ | position: relative; | ||
+ | z-index: 9; | ||
+ | padding: 50px 0 0 | ||
+ | } | ||
+ | |||
+ | .footer-btm .footer-logo { | ||
+ | width: 63px; | ||
+ | margin: auto; | ||
+ | margin-bottom: 40px | ||
+ | } | ||
+ | |||
+ | .footer-btm p { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | /* END MAIN */ | ||
+ | |||
+ | |||
+ | |||
+ | /* FONT AWESOME */ | ||
+ | |||
+ | /*! | ||
+ | * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com | ||
+ | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) | ||
+ | */ | ||
+ | .fa, | ||
+ | .fab, | ||
+ | .fad, | ||
+ | .fal, | ||
+ | .far, | ||
+ | .fas { | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | display: inline-block; | ||
+ | font-style: normal; | ||
+ | font-variant: normal; | ||
+ | text-rendering: auto; | ||
+ | line-height: 1 | ||
+ | } | ||
+ | .fa-plus:before { | ||
+ | content: "\f067" | ||
+ | } | ||
+ | |||
+ | .fa-minus:before { | ||
+ | content: "\f068" | ||
+ | } | ||
+ | |||
+ | .fa-discord:before { | ||
+ | content: "\f392" | ||
+ | } | ||
+ | |||
+ | .fa-facebook:before { | ||
+ | content: "\f09a" | ||
+ | } | ||
+ | |||
+ | .fa-facebook-f:before { | ||
+ | content: "\f39e" | ||
+ | } | ||
+ | |||
+ | .fa-facebook-messenger:before { | ||
+ | content: "\f39f" | ||
+ | } | ||
+ | |||
+ | .fa-facebook-square:before { | ||
+ | content: "\f082" | ||
+ | } | ||
+ | |||
+ | .fa-youtube:before { | ||
+ | content: "\f167" | ||
+ | } | ||
+ | |||
+ | .fa-youtube-square:before { | ||
+ | content: "\f431" | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Font Awesome 5 Brands"; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | font-display: block; | ||
+ | src: url(../resources/fonts/fa-brands-400.eot); | ||
+ | src: url(../resources/fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-brands-400.woff2) format("woff2"), url(../resources/fonts/fa-brands-400.woff) format("woff") | ||
+ | } | ||
+ | |||
+ | .fab { | ||
+ | font-family: "Font Awesome 5 Brands" | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Font Awesome 5 Free"; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | font-display: block; | ||
+ | src: url(../resources/fonts/fa-regular-400.eot); | ||
+ | src: url(../resources/fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-regular-400.woff2) format("woff2"), url(../resources/fonts/fa-regular-400.woff) format("woff") | ||
+ | } | ||
+ | |||
+ | .fab, | ||
+ | .far { | ||
+ | font-weight: 400 | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Font Awesome 5 Free"; | ||
+ | font-style: normal; | ||
+ | font-weight: 900; | ||
+ | font-display: block; | ||
+ | src: url(../resources/fonts/fa-solid-900.eot); | ||
+ | src: url(../resources/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-solid-900.woff2) format("woff2"), url(../resources/fonts/fa-solid-900.woff) format("woff") | ||
+ | } | ||
+ | |||
+ | .fa, | ||
+ | .far, | ||
+ | .fas { | ||
+ | font-family: "Font Awesome 5 Free" | ||
+ | } | ||
+ | |||
+ | .fa, | ||
+ | .fas { | ||
+ | font-weight: 900 | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* MOBILE */ | ||
+ | @media(max-width:1680px) { | ||
+ | body { | ||
+ | font-size: 16px | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | max-width: 1370px | ||
+ | } | ||
+ | |||
+ | .header-top .logo, .header-top .logo img { | ||
+ | max-width: 330px; | ||
+ | width: 330px | ||
+ | } | ||
+ | |||
+ | .header-top { | ||
+ | padding: 11px 0 9px | ||
+ | } | ||
+ | |||
+ | .header-bottm { | ||
+ | padding: 24px 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a { | ||
+ | font-size: 16px | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 5.44%; | ||
+ | position: relative | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:1440px) { | ||
+ | body { | ||
+ | font-size: 14px | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | max-width: 1200px | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li::after { | ||
+ | right: -35px; | ||
+ | } | ||
+ | |||
+ | .header-top .logo, .header-top .logo img { | ||
+ | max-width: 310px; | ||
+ | width: 310px | ||
+ | } | ||
+ | |||
+ | .header-top { | ||
+ | padding: 9px 0; | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 4.9% | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a { | ||
+ | font-size: 15px | ||
+ | } | ||
+ | |||
+ | .header-bottm { | ||
+ | padding: 20px 0 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:1200px) { | ||
+ | .container { | ||
+ | max-width: 96% | ||
+ | } | ||
+ | |||
+ | .header-top { | ||
+ | padding: 7px 0; | ||
+ | } | ||
+ | |||
+ | .header-top .logo, .header-top .logo img { | ||
+ | max-width: 285px; | ||
+ | width: 285px | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a { | ||
+ | font-size: 14px | ||
+ | } | ||
+ | |||
+ | .login a { | ||
+ | font-size: 14px | ||
+ | } | ||
+ | |||
+ | .header-bottm { | ||
+ | padding: 14px 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 4.8% | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:1080px) { | ||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 4.5% | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:1024px) { | ||
+ | |||
+ | |||
+ | .mobile-menu { | ||
+ | width: 40px; | ||
+ | height: 38px; | ||
+ | position: relative; | ||
+ | float: right; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .5s ease-in-out; | ||
+ | -moz-transition: .5s ease-in-out; | ||
+ | -o-transition: .5s ease-in-out; | ||
+ | transition: .5s ease-in-out; | ||
+ | cursor: pointer; | ||
+ | overflow: hidden | ||
+ | } | ||
+ | |||
+ | .mobile-menu span { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | height: 5px; | ||
+ | width: 100%; | ||
+ | background: #fff; | ||
+ | border-radius: 9px; | ||
+ | opacity: 1; | ||
+ | left: 0; | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | -moz-transform: rotate(0deg); | ||
+ | -o-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | -webkit-transition: .25s ease-in-out; | ||
+ | -moz-transition: .25s ease-in-out; | ||
+ | -o-transition: .25s ease-in-out; | ||
+ | transition: .25s ease-in-out | ||
+ | } | ||
+ | |||
+ | .mobile-menu span:nth-child(1) { | ||
+ | top: 0 | ||
+ | } | ||
+ | |||
+ | .mobile-menu span:nth-child(2) { | ||
+ | top: 11px | ||
+ | } | ||
+ | |||
+ | .mobile-menu span:nth-child(3) { | ||
+ | top: 22px | ||
+ | } | ||
+ | |||
+ | .mobile-menu.open span:nth-child(1) { | ||
+ | top: 18px; | ||
+ | -webkit-transform: rotate(135deg); | ||
+ | -moz-transform: rotate(135deg); | ||
+ | -o-transform: rotate(135deg); | ||
+ | transform: rotate(135deg) | ||
+ | } | ||
+ | |||
+ | .mobile-menu.open span:nth-child(2) { | ||
+ | opacity: 0; | ||
+ | left: -60px | ||
+ | } | ||
+ | |||
+ | .mobile-menu.open span:nth-child(3) { | ||
+ | top: 18px; | ||
+ | -webkit-transform: rotate(-135deg); | ||
+ | -moz-transform: rotate(-135deg); | ||
+ | -o-transform: rotate(-135deg); | ||
+ | transform: rotate(-135deg) | ||
+ | } | ||
+ | |||
+ | ul.main-menu { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav { | ||
+ | flex-flow: column | ||
+ | } | ||
+ | |||
+ | .header-bottm .container { | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav { | ||
+ | opacity: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav { | ||
+ | position: absolute; | ||
+ | z-index: 999; | ||
+ | width: 100%; | ||
+ | top: 42px; | ||
+ | left: -100%; | ||
+ | -webkit-transition: all .4s ease-in-out; | ||
+ | -o-transition: all .4s ease-in-out; | ||
+ | transition: all .4s ease-in-out; | ||
+ | -moz-transition: all .4s ease-in-out; | ||
+ | -ms-transition: all .4s ease-in-out | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav.side-open { | ||
+ | left: 0; | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | height: 100vh; | ||
+ | background: #5a2f02; | ||
+ | z-index: 999; | ||
+ | margin-top: 1em; | ||
+ | } | ||
+ | |||
+ | .header-bottm .container .mobile-menu { | ||
+ | position: absolute; | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li::after { | ||
+ | content: ''; | ||
+ | background: 0 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li { | ||
+ | margin-right: 0; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .header-bottm .main-nav li:nth-child(4) { | ||
+ | margin-right: 0 | ||
+ | } | ||
+ | |||
+ | .header-bottm ul li a { | ||
+ | padding: 1em; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | background-color: #5a2f02; | ||
+ | border-bottom: 1px solid #222; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | |||
+ | .header-bottm { | ||
+ | padding: 10px 0; | ||
+ | min-height: 50px | ||
+ | } | ||
+ | |||
+ | .middle-bx-middle .img-wrp { | ||
+ | padding-bottom: 30px; | ||
+ | max-width: 70%; | ||
+ | margin: auto | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | max-width: 96% | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width:768px) { | ||
+ | .mobile-menu span { | ||
+ | height: 3px | ||
+ | } | ||
+ | |||
+ | .mobile-menu span:nth-child(2) { | ||
+ | top: 10px | ||
+ | } | ||
+ | |||
+ | .mobile-menu span:nth-child(3) { | ||
+ | top: 21px | ||
+ | } | ||
+ | |||
+ | .mobile-menu.open span:nth-child(1) { | ||
+ | top: 16px | ||
+ | } | ||
+ | |||
+ | .mobile-menu.open span:nth-child(3) { | ||
+ | top: 16px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:680px) { | ||
+ | .header-top .logo, .header-top .logo img { | ||
+ | max-width: 240px; | ||
+ | width: 240px | ||
+ | } | ||
+ | .header-top { | ||
+ | padding: 7px 0 1px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:480px) { | ||
+ | .header-top .logo { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | .header-top .mobile-logo, .header-top .mobile-logo img { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | margin: auto; | ||
+ | z-index: 99; | ||
+ | max-width: 180px; | ||
+ | width: 180px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:414px) { | ||
+ | .header-top .mobile-logo, .header-top .mobile-logo img { | ||
+ | max-width: 160px; | ||
+ | width: 160px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:380px) { | ||
+ | .header-top .mobile-logo, .header-top .mobile-logo img { | ||
+ | max-width: 152px; | ||
+ | width: 152px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:375px) { | ||
+ | .header-top .container { | ||
+ | justify-content: space-between; | ||
+ | max-width: 98% | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media(max-width:320px) { | ||
+ | .header-top .mobile-logo, .header-top .mobile-logo img { | ||
+ | max-width: 120px; | ||
+ | width: 120px | ||
+ | } | ||
+ | } | ||
+ | /* END MOBILE */ | ||
+ | |||
+ | /* END NEW DESIGN CSS */ | ||
Line 529: | Line 1,432: | ||
div#mw-head-base { | div#mw-head-base { | ||
− | position: fixed; | + | position: fixed; |
left: 50%; | left: 50%; | ||
top: 50%; | top: 50%; | ||
z-index: 9999; | z-index: 9999; | ||
margin: -75px 0 0 -75px; | margin: -75px 0 0 -75px; | ||
− | border: 16px solid rgba(0,0,0,0.1); | + | border: 16px solid rgba(0, 0, 0, 0.1); |
− | box-shadow: 0 0 5px rgba(0,0,0,0.7), inset 0 0 5px rgba(0,0,0,0.7); | + | box-shadow: 0 0 5px rgba(0, 0, 0, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.7); |
border-radius: 50%; | border-radius: 50%; | ||
border-top: 16px solid #627924; | border-top: 16px solid #627924; | ||
Line 545: | Line 1,448: | ||
@-webkit-keyframes spin { | @-webkit-keyframes spin { | ||
− | + | 0% { | |
− | + | -webkit-transform: rotate(0deg); | |
+ | } | ||
+ | |||
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | } | ||
} | } | ||
@keyframes spin { | @keyframes spin { | ||
− | + | 0% { | |
− | + | transform: rotate(0deg); | |
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
} | } | ||
Line 575: | Line 1,488: | ||
form#editform { | form#editform { | ||
− | border: 1px solid | + | border: 1px solid rgba(0, 0, 0, 0.3); |
} | } | ||
− | + | div#toolbar { | |
− | + | padding: 10px 5px; | |
− | border-bottom: 1px solid # | + | background: #5c3219; |
+ | border-bottom: 1px solid #161b20; | ||
+ | line-height: 0; | ||
} | } | ||
− | + | div#toolbar>div { | |
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | cursor: pointer; | ||
+ | margin: 0 5px; | ||
+ | } | ||
+ | |||
+ | div#mw-editbutton-bold, | ||
+ | div#mw-editbutton-italic, | ||
+ | div#mw-editbutton-headline, | ||
+ | div#mw-editbutton-nowiki { | ||
+ | display: none !important; | ||
+ | } | ||
+ | |||
+ | div#mw-editbutton-link { | ||
+ | background: url(https://i.imgur.com/Wrs4VMn.png); | ||
+ | } | ||
+ | |||
+ | div#mw-editbutton-extlink { | ||
+ | background: url(https://i.imgur.com/HKLvTBX.png); | ||
+ | } | ||
+ | |||
+ | div#mw-editbutton-hr { | ||
+ | background: url(https://i.imgur.com/J9is2iW.png); | ||
+ | } | ||
+ | |||
+ | textarea#wpTextbox1 { | ||
resize: vertical; | resize: vertical; | ||
outline: none; | outline: none; | ||
− | background: | + | background: rgba(0, 0, 0, 0.1); |
− | + | ||
font-family: monospace; | font-family: monospace; | ||
line-height: 16px; | line-height: 16px; | ||
font-size: 12px; | font-size: 12px; | ||
border: none; | border: none; | ||
− | padding: 10px | + | padding: 10px; |
} | } | ||
− | + | .editOptions { | |
border: none; | border: none; | ||
− | padding: 10px | + | padding: 10px 5px; |
margin: 0; | margin: 0; | ||
− | + | border-top: 1px solid rgba(0, 0, 0, 0.1); | |
− | + | background: rgba(0, 0, 0, 0.2); | |
} | } | ||
− | + | .editButtons { | |
− | display: | + | display: flex; |
} | } | ||
+ | span.cancelLink { | ||
+ | margin: 0; | ||
+ | display: flex; | ||
+ | } | ||
+ | div.editButtons input[type="submit"], | ||
+ | div.editButtons span a { | ||
+ | margin: 0 5px; | ||
+ | } | ||
+ | .mw-editTools, | ||
+ | .templatesUsed, | ||
+ | .hiddencats, | ||
+ | .limitreport, | ||
+ | span.editHelp, | ||
+ | span.mw-editButtons-pipe-separator { | ||
+ | display: none; | ||
+ | } | ||
+ | ul#index { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | ul#index li { | ||
+ | display: flex; | ||
+ | } | ||
+ | ul#index li:not(:last-child) { | ||
+ | padding-bottom: 10px; | ||
+ | border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | div.img { | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | margin-right: 10px; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | #index li div.img img { | ||
+ | max-height: 40px; | ||
+ | max-width: 40px; | ||
+ | } | ||
+ | /* New #index */ | ||
+ | #index { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | #index .homepage-list { | ||
+ | display: flex; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | #index .homepage-list:not(:last-child) { | ||
+ | border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
+ | } | ||
+ | #index .img img { | ||
+ | max-height: 40px; | ||
+ | max-width: 40px; | ||
+ | } | ||
− | + | .homepage-list:hover { | |
− | + | background-color: rgba(0,0,0,0.1); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 636: | Line 1,627: | ||
/* General */ | /* General */ | ||
− | body, div#mw-panel div.portal div.body ul li a, div#simpleSearch #searchButton, div#simpleSearch #searchInput, div#siteNotice, .mw-body p, table, .mw-body-content { | + | body, |
+ | div#mw-panel div.portal div.body ul li a, | ||
+ | div#simpleSearch #searchButton, | ||
+ | div#simpleSearch #searchInput, | ||
+ | div#siteNotice, | ||
+ | .mw-body p, | ||
+ | table, | ||
+ | .mw-body-content, | ||
+ | #contentSub, | ||
+ | #contentSub2, | ||
+ | #p-personal ul li, | ||
+ | nav ul li, | ||
+ | input#database_input { | ||
font-size: 12px; | font-size: 12px; | ||
line-height: 20px; | line-height: 20px; | ||
} | } | ||
− | + | div#mw-panel div.portal div.body ul li a:hover, | |
− | color: # | + | span.subpages a:hover, |
+ | div.vectorTabs ul li.selected a, | ||
+ | div.vectorTabs ul li a:hover, | ||
+ | th, | ||
+ | span.cancelLink a:hover { | ||
+ | color: #593018 !important; | ||
} | } | ||
− | .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { | + | .mw-body h1, |
− | font-family: Open Sans, sans-serif | + | .mw-body h2, |
+ | .mw-body h3, | ||
+ | .mw-body h4, | ||
+ | .mw-body h5, | ||
+ | .mw-body h6 { | ||
+ | font-family: Open Sans, sans-serif; | ||
color: #afafaf; | color: #afafaf; | ||
line-height: 20px; | line-height: 20px; | ||
− | font-weight: normal | + | font-weight: normal; |
− | margin: 30px 0 | + | margin: 30px 0; |
font-size: 13px; | font-size: 13px; | ||
} | } | ||
− | .mw-body p, p { | + | .mw-body img { |
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | .mw-body p, | ||
+ | p { | ||
margin: 30px 0; | margin: 30px 0; | ||
line-height: 20px; | line-height: 20px; | ||
Line 673: | Line 1,691: | ||
table { | table { | ||
− | margin: 30px 0!important; | + | margin: 30px 0 !important; |
− | background: | + | background: rgba(0, 0, 0, 0.2) !important; |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
− | + | td, | |
− | padding: 10px!important; | + | th { |
− | border: 1px solid #161b20!important; | + | padding: 10px !important; |
+ | border: 1px solid #161b20 !important; | ||
} | } | ||
− | + | th { | |
− | background: #1f272f!important; | + | background: #1f272f !important; |
font-weight: normal; | font-weight: normal; | ||
− | text-align: left!important; | + | text-align: left !important; |
} | } | ||
.mw-body pre { | .mw-body pre { | ||
− | background: | + | background-color: rgba(0, 0, 0, 0.1); |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 702: | Line 1,715: | ||
background-color: #161b20; | background-color: #161b20; | ||
margin: 30px 0; | margin: 30px 0; | ||
+ | } | ||
+ | |||
+ | .mw-body .external { | ||
+ | padding: 0; | ||
+ | background: none; | ||
} | } | ||
Line 710: | Line 1,728: | ||
} | } | ||
− | + | .mw-body ul li { | |
margin: 0; | margin: 0; | ||
} | } | ||
− | + | .mw-body ul li ul { | |
margin: 10px 0 10px 30px; | margin: 10px 0 10px 30px; | ||
} | } | ||
+ | |||
+ | div#customFooter { | ||
+ | background: #5C3219 !important; | ||
+ | color: #bca674 !important; | ||
+ | } | ||
+ | |||
+ | div#mw-head a { | ||
+ | color: #bca674 !important; | ||
+ | } | ||
+ | |||
+ | div#customFooter p { | ||
+ | color: #bca674 !important; | ||
+ | } | ||
+ | |||
+ | div#customFooter a { | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | fieldset { | ||
+ | border: 1px solid rgba(0, 0, 0, 0.2) !important; | ||
+ | } | ||
+ | |||
+ | .mw-changeslist-legend { | ||
+ | border: 1px solid #97855d !important; | ||
+ | } | ||
+ | |||
+ | input[type="submit"], | ||
+ | input[type="checkbox"], | ||
+ | select { | ||
+ | background: #5c3219; | ||
+ | border-color: #5c3219; | ||
+ | } | ||
+ | |||
+ | ::-webkit-input-placeholder { | ||
+ | color: #717171; | ||
+ | } | ||
+ | |||
+ | :-moz-placeholder { | ||
+ | color: #717171; | ||
+ | } | ||
+ | |||
+ | ::-moz-placeholder { | ||
+ | color: #717171; | ||
+ | } | ||
+ | |||
+ | :-ms-input-placeholder { | ||
+ | color: #717171; | ||
+ | } | ||
+ | |||
+ | .p_toggle { | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .p_toggle_content a.external.text { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .searchresults h2 { | ||
+ | font-weight: bold; | ||
+ | border-bottom: 1px solid #252525; | ||
+ | margin: 0 0 10px 0; | ||
+ | } | ||
+ | |||
+ | ul.mw-search-results { | ||
+ | margin: 0 0 30px 0; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | /* 28-12-2016 */ | ||
+ | /* nav ul li { | ||
+ | display: inline-block !important; | ||
+ | padding: 10px 0 !important; | ||
+ | } | ||
+ | |||
+ | nav ul li a:hover { | ||
+ | color: #fff !important; | ||
+ | } */ | ||
+ | |||
+ | #mw-watchlist-resetbutton>input { | ||
+ | color: #afafaf !important; | ||
+ | } | ||
+ | |||
+ | #mw-watchlist-options input { | ||
+ | color: #afafaf !important; | ||
+ | } | ||
+ | |||
+ | .namespaceselector { | ||
+ | color: #afafaf !important; | ||
+ | } | ||
+ | |||
+ | .mw-submit { | ||
+ | color: #afafaf !important; | ||
+ | } | ||
+ | |||
+ | .namespaceselector { | ||
+ | margin-left: 5px !important; | ||
+ | } | ||
+ | |||
+ | .mw-month-selector { | ||
+ | color: #fdfdfd !important; | ||
+ | } | ||
+ | |||
+ | #index li { | ||
+ | list-style: none !important; | ||
+ | } | ||
+ | |||
+ | .sicon1 { | ||
+ | background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center, linear-gradient(transparent, rgba(0, 0, 0, 0.15)), #3a589e !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | #customFooter>div>a:nth-child(1) { | ||
+ | background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center !important; | ||
+ | background-color: #3a589e !important; | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | #customFooter>div>a:nth-child(2) { | ||
+ | background: url("https://i.imgur.com/GZzo3yV.png") no-repeat center !important; | ||
+ | background-color: #3a89c4 !important; | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | #customFooter>div>a:nth-child(3) { | ||
+ | background: url("https://i.imgur.com/wF3Xf61.png") no-repeat center !important; | ||
+ | background-color: #c8312b !important; | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | .mw-headline { | ||
+ | color: #272525 !important; | ||
+ | } | ||
+ | |||
+ | #mw-history-search>input { | ||
+ | color: #999 !important; | ||
+ | } | ||
+ | |||
+ | .historysubmit.mw-history-compareselectedversions-button { | ||
+ | color: #fdfdfd !important; | ||
+ | } | ||
+ | |||
+ | #toc, | ||
+ | .toc, | ||
+ | .mw-warning, | ||
+ | .toccolours { | ||
+ | background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important; | ||
+ | border: medium none !important; | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | |||
+ | .diff-currentversion-title { | ||
+ | color: #222 !important; | ||
+ | } | ||
+ | |||
+ | #toctitle>h2 { | ||
+ | color: #222; | ||
+ | } | ||
+ | |||
+ | td.diff-context { | ||
+ | background: rgba(254, 254, 254, 0.3) !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | td.diff-addedline .diffchange { | ||
+ | background: rgba(237, 237, 237, 0.5) !important; | ||
+ | } | ||
+ | |||
+ | #pagehistory li.selected { | ||
+ | background-color: rgba(254, 254, 254, 0.5) !important; | ||
+ | border: 1px dashed #272525 !important; | ||
+ | padding: 5px !important; | ||
+ | } | ||
+ | |||
+ | #pagehistory li { | ||
+ | border: 1px solid #222 !important; | ||
+ | padding: 5px !important; | ||
+ | } | ||
+ | |||
+ | .results-info { | ||
+ | color: #222 !important; | ||
+ | } | ||
+ | |||
+ | .mw-ui-input { | ||
+ | background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important; | ||
+ | border: medium none !important; | ||
+ | padding: 6px !important; | ||
+ | } | ||
+ | |||
+ | #mw-searchoptions { | ||
+ | background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important; | ||
+ | } | ||
+ | |||
+ | #mw-searchoptions h4 { | ||
+ | color: #222 !important; | ||
+ | } | ||
+ | |||
+ | .ipsDataItem, | ||
+ | .ipsDataList.ipsDataList_zebra>.ipsDataItem { | ||
+ | border: none !important; | ||
+ | } | ||
+ | |||
+ | .wikitable th { | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | .ipsPad_half { | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | #mw-history-search>input { | ||
+ | background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important; | ||
+ | color: #272525 !important; | ||
+ | } | ||
+ | |||
+ | .mw-search-profile-tabs { | ||
+ | background-color: rgba(254, 254, 254, 0.2) !important; | ||
+ | border: none !important; | ||
+ | } | ||
+ | |||
+ | .highlight-hover { | ||
+ | background-color: #b39f71; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | /* Remove any unwanted underline from <a> */ | ||
+ | .tile-bottom a, | ||
+ | .mainpage-left a, | ||
+ | .mainpage-right a, | ||
+ | #toc a, | ||
+ | td a, | ||
+ | #navigation a, | ||
+ | #mw-panel a, | ||
+ | #pageInfo a, | ||
+ | .header-bottm a, | ||
+ | footer a, | ||
+ | #index a, | ||
+ | #contentFooter a, | ||
+ | .mw-specialpages-list a, | ||
+ | .searchresults a, | ||
+ | .mw-body .mw-content-text a { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | /* Start atomic classes */ | ||
+ | |||
+ | .gs-atomic h1{ | ||
+ | border-bottom: 1px solid rgba(0,0,0,.3); | ||
+ | font-size: 1.5em; | ||
+ | font-family: roboto, sans-serif; | ||
+ | font-weight: bold; | ||
+ | padding: 10px 0; | ||
+ | margin: 0 0 20px 0 !important; | ||
+ | } | ||
+ | |||
+ | .padS { | ||
+ | padding:5px; | ||
+ | } | ||
+ | |||
+ | .padM { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | .padL { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | .padXL { | ||
+ | padding: 25px; | ||
+ | } | ||
+ | |||
+ | .padXXL { | ||
+ | padding: 35px; | ||
+ | } | ||
+ | |||
+ | .marBS { | ||
+ | margin-bottom:5px; | ||
+ | } | ||
+ | |||
+ | .marBM { | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .marBL { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .marBXL { | ||
+ | margin-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .marBXXL { | ||
+ | margin-bottom: 35px; | ||
+ | } | ||
+ | |||
+ | .bgLight { | ||
+ | background-color: rgba(247,219,166,.2); | ||
+ | border: 1px solid #bda062; | ||
+ | } | ||
+ | |||
+ | .titleS { | ||
+ | font-size: 1em; | ||
+ | font-family: roboto, sans-serif; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .titleM { | ||
+ | font-size: 1.5em; | ||
+ | font-family: roboto, sans-serif; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .titleL { | ||
+ | font-size: 2em; | ||
+ | font-family: roboto, sans-serif; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .gs-grid { | ||
+ | display:grid; | ||
+ | grid-gap:10px; | ||
+ | } | ||
+ | |||
+ | .grid2 { | ||
+ | grid-template-columns:repeat(2,1fr); | ||
+ | } | ||
+ | |||
+ | .grid3 { | ||
+ | grid-template-columns:repeat(3,1fr); | ||
+ | } | ||
+ | |||
+ | .text_center { | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | a .gs-btn { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .gs-btn { | ||
+ | padding: 12px 0; | ||
+ | margin: 0 !important; | ||
+ | color: #0F0C07!important; | ||
+ | font-weight: bold; | ||
+ | font-family: Roboto, sans-serif; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | |||
+ | .gs-btn:hover { | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | color: white!important; | ||
+ | } | ||
+ | |||
+ | .gs-btnColor1 { | ||
+ | background-color: #A2894E; | ||
+ | } | ||
+ | |||
+ | /*HOMEPAGE*/ | ||
+ | |||
+ | .gs-flex { | ||
+ | display:flex; | ||
+ | flex-flow:row wrap; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .tile-half:not(:last-child) { | ||
+ | margin-right: 9px; | ||
+ | } | ||
+ | |||
+ | .tile-half { | ||
+ | flex: 1; | ||
+ | } | ||
+ | |||
+ | .tile-top { | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | background-color: #5C6168; | ||
+ | overflow: hidden; | ||
+ | padding: 0; | ||
+ | height: 13vw; | ||
+ | max-height: 12em; | ||
+ | transition: 0.4s ease-out; | ||
+ | } | ||
+ | |||
+ | .tile-bottom { | ||
+ | background-color: rgba(247,219,166,.2); | ||
+ | padding: 12px 10px; | ||
+ | border-bottom-left-radius: 5px; | ||
+ | border-bottom-right-radius: 5px; | ||
+ | align-self: end; | ||
+ | min-height: 5vw; | ||
+ | border: 1px solid #bda062; | ||
+ | } | ||
+ | |||
+ | .tile-date { | ||
+ | margin: 0 !important; | ||
+ | font-size: 0.8em !important; | ||
+ | color: #999 !important; | ||
+ | line-height: 14px !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | .tile-title { | ||
+ | margin-bottom: 5px; | ||
+ | font-size: 1.4em; | ||
+ | color: #272525; | ||
+ | } | ||
+ | |||
+ | .tile-info { | ||
+ | line-height: 1.4em; | ||
+ | color: #272525; | ||
+ | } | ||
+ | |||
+ | .click-to-view { | ||
+ | font-size: 0.85em; | ||
+ | color: #e01818; | ||
+ | } | ||
+ | |||
+ | .tile-half:hover>.tile-bottom { | ||
+ | background-color: #e8dcbe; | ||
+ | } | ||
+ | |||
+ | .mainpage-left { | ||
+ | flex: 2; | ||
+ | display: flex; | ||
+ | flex-flow: column wrap; | ||
+ | margin-right: 0.9rem; | ||
+ | } | ||
+ | |||
+ | .mainpage-right { | ||
+ | flex: 1; | ||
+ | display: flex; | ||
+ | flex-flow: column wrap; | ||
+ | } | ||
+ | |||
+ | .mainpage-social { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .social-tile { | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | background: #7289da; | ||
+ | padding: 1em 1.75em; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .fa-social-icon { | ||
+ | color: #fff; | ||
+ | font-size: 40px; | ||
+ | margin-right: 15px; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .server-name { | ||
+ | color: #ffffff; | ||
+ | font-weight: bold; | ||
+ | font-size: 1.25em; | ||
+ | margin: 0.5em 0 -0.15em; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .server-tagline { | ||
+ | color: rgba(255,255,255,0.9); | ||
+ | margin: 0.5em 0; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .social-tile-bottom { | ||
+ | background: #697ec4; | ||
+ | border: none; | ||
+ | padding: 1em 1.75em; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .social-tile-bottom p { | ||
+ | color: #ffffff; | ||
+ | font-weight: bold; | ||
+ | font-size: 0.9em; | ||
+ | text-align: center; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 0.03em; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .hp_categories { | ||
+ | margin-bottom: 20px; | ||
+ | padding: 20px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | .hp_popular { | ||
+ | padding:1.3rem 1.5rem 0.6rem; | ||
+ | } | ||
+ | |||
+ | #toc a { | ||
+ | color: #272525; | ||
+ | } | ||
+ | |||
+ | #toc a:hover { | ||
+ | color: #5c3219; | ||
+ | } | ||
+ | |||
+ | ul#footer-info { | ||
+ | padding-left: 0; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | |||
+ | #contentFooter, span.subpages { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Social Specific Styles */ | ||
+ | |||
+ | .mainpage-social .discord-tile { | ||
+ | background: #7289da; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .discord-tile-bottom { | ||
+ | background: #697ec4; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .youtube-tile { | ||
+ | background: #e43131; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .youtube-tile-bottom { | ||
+ | background: #3e3b3b; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .facebook-tile { | ||
+ | background: #4267B2; | ||
+ | } | ||
+ | |||
+ | .mainpage-social .facebook-tile-bottom { | ||
+ | background: #304d88; | ||
+ | } | ||
+ | |||
+ | /* Dropdown CSS */ | ||
+ | |||
+ | .dropbtn { | ||
+ | background-color: #1f272f; | ||
+ | color: #ffffff; | ||
+ | padding: 9px; | ||
+ | font-size: 12px; | ||
+ | margin: 8px 8px 0; | ||
+ | border: outset; | ||
+ | border-color: rgb(193, 193, 193); | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .dropdown { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #1f272f; | ||
+ | min-width: 210px; | ||
+ | max-width: 250px; | ||
+ | max-height: 400px; | ||
+ | overflow: scroll; | ||
+ | overflow-x: hidden; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(167, 167, 167, 0.2); | ||
+ | z-index: 1; | ||
+ | margin-left: 8px; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | color: #ffffff !important; | ||
+ | padding: 12px 16px !important; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | background-color: #9b5d00 | ||
+ | } | ||
+ | |||
+ | .dropdown img { | ||
+ | height: 16px; | ||
+ | width: 16px; | ||
+ | vertical-align: text-bottom; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropbtn { | ||
+ | background-color: #9b5d00; | ||
+ | } | ||
+ | |||
+ | /* Dropdown images */ | ||
+ | div.dropdown-content > pre > a:nth-child(1):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/c/c0/13.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(2):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/5/59/11.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(3):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/c/c9/17.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(4):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/9/9e/7.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(5):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/5/58/10.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(6):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/d/d6/15.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(7):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/4/4a/1.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(8):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/1/10/3.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(9):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/f/fb/2.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(10):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/6/60/8.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(11):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/7/75/22.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(12):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/0/07/20.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(13):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/b/ba/19.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(14):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/7/7a/9.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(15):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/0/05/0.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(16):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/f/f1/6.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(17):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/0/09/4.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(18):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/1/1e/16.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(19):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/9/9e/12.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | div.dropdown-content > pre > a:nth-child(20):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/8/82/5.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | /* div.dropdown-content > pre > a:nth-child(21):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/7/71/21.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } Construction*/ | ||
+ | div.dropdown-content > pre > a:nth-child(21):before { | ||
+ | content: url(https://wiki.grinderscape.org/images/8/88/18.png); | ||
+ | vertical-align: middle; | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | |||
+ | /* XP Table */ | ||
+ | |||
+ | .xp-table .xp-table-image { | ||
+ | height: 20px; | ||
+ | width: 20px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .xp-table td, .xp-table th { | ||
+ | padding: 5px 10px !important; | ||
+ | } | ||
+ | |||
+ | /*New Template 9-6-21*/ | ||
+ | |||
+ | .monster_list_items { | ||
+ | height: 175px; | ||
+ | overflow: hidden; | ||
+ | border: 1px solid #592c0d; | ||
+ | } | ||
+ | .monster div { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | .no_underline, .no_underline a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /*Change to Bootstrap CSS btns*/ | ||
+ | .btn-primary { | ||
+ | color: #272525 !important; | ||
+ | background-color: #A2894E !important; | ||
+ | border-color: #A2894E !important | ||
+ | } | ||
+ | |||
+ | .btn-primary:hover { | ||
+ | color: #fff !important; | ||
+ | background-color: #5c3219 !important; | ||
+ | border-color: #5c3219 !important | ||
+ | } | ||
+ | |||
+ | .btn-check:focus+.btn-primary, | ||
+ | .btn-primary:focus { | ||
+ | color: #fff !important; | ||
+ | background-color: #5c3219 !important; | ||
+ | border-color: #5c3219 !important; | ||
+ | } | ||
+ | |||
+ | .btn-check:active+.btn-primary, | ||
+ | .btn-check:checked+.btn-primary, | ||
+ | .btn-primary.active, | ||
+ | .btn-primary:active, | ||
+ | .show>.btn-primary.dropdown-toggle { | ||
+ | color: #fff !important; | ||
+ | background-color: #5c3219 !important; | ||
+ | border-color: #5c3219 !important | ||
+ | } | ||
+ | |||
+ | .btn-primary.disabled, | ||
+ | .btn-primary:disabled { | ||
+ | color: #AAA !important; | ||
+ | background-color: #EEE !important; | ||
+ | border-color: #EEE !important; | ||
+ | cursor: not-allowed; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | |||
+ | /* DROP TABLE CSS */ | ||
+ | |||
+ | .avatar { | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | position: absolute; | ||
+ | background-color: #15151b; | ||
+ | top: -40px; | ||
+ | left: 35px; | ||
+ | border-radius: 80px; | ||
+ | } | ||
+ | |||
+ | .droptable { | ||
+ | display: inline-block; | ||
+ | height: 115px; | ||
+ | width: 120px; | ||
+ | background-color: #15151b; | ||
+ | border: 1px solid rgba(128, 128, 128, 0.087); | ||
+ | border-radius: 5px; | ||
+ | box-shadow: -0.1rem 0 0.2rem #000; | ||
+ | transition: 0.4s ease-out; | ||
+ | position: relative; | ||
+ | left: 85px; | ||
+ | } | ||
+ | |||
+ | .droptable:not(:first-child) { | ||
+ | margin-left: -50px; | ||
+ | } | ||
+ | |||
+ | .droptable:hover { | ||
+ | transform: translateY(-20px); | ||
+ | transition: 0.4s ease-out; | ||
+ | } | ||
+ | |||
+ | .droptable:hover ~ .droptable { | ||
+ | position: relative; | ||
+ | left: 140px; | ||
+ | transition: 0.4s ease-out; | ||
+ | } | ||
+ | |||
+ | .itemname { | ||
+ | color: white; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | position: absolute; | ||
+ | top: 30px; | ||
+ | transform: translateY(-50%); | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | line-height: 1.4em; | ||
+ | } | ||
+ | |||
+ | .card_info { | ||
+ | color:white; | ||
+ | font-size: 10px; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .droprate_common { | ||
+ | color: #1ff078; | ||
+ | } | ||
+ | |||
+ | .droprate_uncommon { | ||
+ | color: #ff9100; | ||
+ | } | ||
+ | |||
+ | .droprate_rare { | ||
+ | color: #ff0000; | ||
+ | } | ||
+ | |||
+ | .card_info_container { | ||
+ | background-color: rgba(255, 149, 0, 0.204); | ||
+ | border: 1px solid rgba(128, 128, 128, 0.243); | ||
+ | position: absolute; | ||
+ | width: 102%; | ||
+ | left: -1px; | ||
+ | } | ||
+ | |||
+ | .dropratebox { | ||
+ | bottom: 35px; | ||
+ | } | ||
+ | |||
+ | .dropamountbox { | ||
+ | bottom: 8px; | ||
+ | } | ||
+ | |||
+ | .card:hover .stroke { | ||
+ | stroke-dashoffset: 100; | ||
+ | transition: 0.6s ease-out; | ||
+ | } | ||
+ | |||
+ | .card_item_center { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*End New Monster Template*/ | ||
+ | |||
+ | .monster_list_item a { | ||
+ | display:block; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* .monster_list_item img { | ||
+ | max-width:150px; | ||
+ | } */ | ||
+ | |||
+ | .monster { | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | -webkit-transform: perspective(1px) translateZ(0); | ||
+ | transform: perspective(1px) translateZ(0); | ||
+ | box-shadow: 0 0 1px rgb(0 0 0 / 0%); | ||
+ | position: relative; | ||
+ | -webkit-transition-property: color; | ||
+ | transition-property: color; | ||
+ | -webkit-transition-duration: 0.3s; | ||
+ | transition-duration: 0.3s; | ||
+ | } | ||
+ | |||
+ | .monster:before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | z-index: -1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | background: rgba(0,0,0,0.1); | ||
+ | -webkit-transform: scaleX(0); | ||
+ | transform: scaleX(0); | ||
+ | -webkit-transform-origin: 0 50%; | ||
+ | transform-origin: 0 50%; | ||
+ | -webkit-transition-property: transform; | ||
+ | transition-property: transform; | ||
+ | -webkit-transition-duration: 0.3s; | ||
+ | transition-duration: 0.3s; | ||
+ | -webkit-transition-timing-function: ease-out; | ||
+ | transition-timing-function: ease-out; | ||
+ | } | ||
+ | |||
+ | .monster_list_item:hover > .monster:before { | ||
+ | -webkit-transform: scaleX(1); | ||
+ | transform: scaleX(1); | ||
+ | } | ||
+ | |||
+ | .table_link a { | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | |||
+ | .table_link a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* Hide / Show CSS (Buttons, etc) */ | ||
+ | /* Standard Navigationsleisten, aka box hiding thingy | ||
+ | from .de. Documentation at [[Wikipedia:NavFrame]]. */ | ||
+ | div.NavFrame { | ||
+ | margin: 0; | ||
+ | padding: 4px 10px; | ||
+ | border-collapse: collapse; | ||
+ | margin-bottom:15px; | ||
+ | } | ||
+ | div.NavFrame + div.NavFrame { | ||
+ | border-top-style: none; | ||
+ | border-top-style: hidden; | ||
+ | } | ||
+ | div.NavFrame div.NavHead { | ||
+ | line-height: 1.6em; | ||
+ | position: relative; | ||
+ | font-size:0.9rem; | ||
+ | } | ||
+ | div.NavFrame p, | ||
+ | div.NavFrame div.NavContent, | ||
+ | div.NavFrame div.NavContent p { | ||
+ | font-size: .75rem; | ||
+ | display: block; | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | color: white; | ||
+ | padding: 10px; | ||
+ | margin: 5px 0; | ||
+ | } | ||
+ | div.NavEnd { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | line-height: 1px; | ||
+ | clear: both; | ||
+ | } | ||
+ | .NavToggle { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | font-weight: normal; | ||
+ | padding: 4px; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | .client-js .NavFrame.collapsed > .NavContent { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* 28-12-2016 */ | ||
+ | |||
+ | |||
+ | @media (min-width: 1400px) { | ||
+ | .container { | ||
+ | max-width: 1600px !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 28-12-2016 responsive layout */ | ||
+ | @media screen and (max-width:991px) { | ||
+ | #content-sidebar-wrap>div { | ||
+ | width: 100% !important; | ||
+ | display: block !important; | ||
+ | padding: 0 !important; | ||
+ | } | ||
+ | |||
+ | div#content-sidebar-wrap { | ||
+ | display: block !important; | ||
+ | } | ||
+ | |||
+ | .main-categories .tile-half { | ||
+ | margin-right: 9px; | ||
+ | margin-bottom: 20px; | ||
+ | flex: 30%; | ||
+ | } | ||
+ | |||
+ | .main-categories .tile-top { | ||
+ | margin: 10% 5% 20%; | ||
+ | } | ||
+ | |||
+ | .tile-top { | ||
+ | height: 20vw; | ||
+ | max-height: 20em; | ||
+ | } | ||
+ | |||
+ | .xp-table{ | ||
+ | overflow-y: auto; | ||
+ | overflow-x: scroll; | ||
+ | height: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width:767px) { | ||
+ | #content-sidebar-wrap { | ||
+ | display: block !important; | ||
+ | } | ||
+ | |||
+ | div#mw-panel { | ||
+ | padding: 0 !important; | ||
+ | width: 100% !important; | ||
+ | display: block !important; | ||
+ | } | ||
+ | |||
+ | .mw-contributions-form { | ||
+ | overflow: auto; | ||
+ | width: 100% !important; | ||
+ | } | ||
+ | |||
+ | #mw-history-search { | ||
+ | line-height: 30px !important; | ||
+ | } | ||
+ | |||
+ | .ipsDataItem, | ||
+ | .ipsDataList.ipsDataList_zebra>.ipsDataItem { | ||
+ | border-top: none !important; | ||
+ | border-bottom: none !important; | ||
+ | } | ||
+ | |||
+ | .main-top-cstm { | ||
+ | padding: 0 10px; | ||
+ | } | ||
+ | |||
+ | .main-content-cstm { | ||
+ | padding: 0; | ||
+ | margin-top:30px; | ||
+ | } | ||
+ | |||
+ | div#p-search { | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | #main-wrapper .container::before { | ||
+ | left: -75px; | ||
+ | } | ||
+ | |||
+ | #main-wrapper .container::after { | ||
+ | right: -75px; | ||
+ | } | ||
+ | |||
+ | .mainpage-left { | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | |||
+ | .play-link { | ||
+ | margin: 0; | ||
+ | padding-left:0; | ||
+ | } | ||
+ | .footer-top { | ||
+ | max-width: 100%; | ||
+ | flex-wrap: wrap; | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-70 { | ||
+ | width: 100%; | ||
+ | flex-wrap: wrap; | ||
+ | } | ||
+ | |||
+ | .footer-top .cw-30, .footer-top .cw-70 .cw-33 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content-sidebar-wrap { | ||
+ | padding: 65px 0; | ||
+ | } | ||
+ | |||
+ | .gs-flex{ | ||
+ | flex-flow: column; | ||
+ | } | ||
+ | .grid3 { | ||
+ | grid-template-columns: repeat(1,1fr); | ||
+ | } | ||
+ | |||
+ | .hp_popular { | ||
+ | margin-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .tile-half:not(:last-child) { | ||
+ | margin-right: 0; | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | table.wikitable { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #footer-info p span { | ||
+ | display: block; | ||
+ | left: 0; | ||
+ | position: unset!important; | ||
+ | } | ||
+ | |||
+ | #noticeTitle, #welcome_title { | ||
+ | padding: 0; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | div#navigation { | ||
+ | margin-bottom: 120px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width:450px) { | ||
+ | div#right-navigation { | ||
+ | margin-top: 40px; | ||
+ | position: static; | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 28-12-2016 responsive layout */ |
Latest revision as of 20:06, 2 April 2023
/* Footer Timestamp Removal - Please delete if you want it back ul#footer-info { display: none !important; } */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700); body { background: url(https://www.grinderscape.org/images/home-bg.jpeg); font-family: Open Sans, sans-serif !important; line-height: 20px; font-size: 12px; } a { text-decoration: underline; } a, .link a { color: #272525; } .link a:hover { color: #593018; } a.new { color: #b24040; } .mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle { float: right; margin-left: 10px; } /* Utility Colors */ .u_colorWarning{ color: #ab0000 } .u_bgWarning { background-color: rgb(247 166 166 / 37%); border: 1px dashed #ab000066; } /* End Utility Colors */ /* nav ul { list-style-type: none; list-style-image: none; text-align: center; margin: auto; } nav ul li { margin: 0; display: inline-flex; } */ header { min-width: auto; } div#logo { padding: 30px 0; margin: auto; text-align: center; } div#main-wrapper { } div#mw-navigation { display: none; } div#mw-head { position: initial; } div#p-personal { position: initial; text-align: right; padding-bottom: 0; } #p-personal ul { padding: 0 20px;; display: inline-block; } #p-personal ul li { float: initial; margin: 0; display: inline-block; padding: 0 !important; background: none; } #p-personal ul li a { /* margin: 0 10px; */ margin: 10px; padding: 0; display: block; } div#mw-head div.vectorMenu h3 { display: none; } div#siteNotice, .welcomeText, pageText { padding: 30px 30px 0; text-align:center; } #noticeTitle, #welcome_title { margin-bottom: 10px; font-size: 18px; padding: 0 0 10px 30px; color: #592c0d; margin-bottom: 30px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); overflow: initial; } div#localNotice { margin-bottom: 0; } div#localNotice>p { margin: 0; } div#pageInfo { margin: 0 0 30px 0; padding: 30px; } h1#firstHeading { background: url(https://i.imgur.com/qpqwLFJ.png) no-repeat; padding: 0 0 0 30px; line-height: 20px; margin: 0; border-bottom: none; font-size: 13px; color: #592c0d; } span.subpages { position: relative; border-top: 2px solid rgba(0,0,0,0.1); padding-top: 10px; margin-top: 10px; } div#content-sidebar-wrap { display: table; width: 100%; } div#mw-panel { position: initial; width: 220px; display: table-cell; vertical-align: top; box-sizing: border-box; border-left: 1px solid rgba(0,0,0,0.1); } div#p-logo { display: none; } div#p-search { margin: 0 auto; float: initial; padding: 30px; width:45%; } div#p-search div#searchTitle { background: url(https://i.imgur.com/X1fC0qz.png) no-repeat; } span.subpages:before { content: ""; position: absolute; height: 2px; width: 20px; background-color: #afafaf; top: -2px; left: 0; } form#searchform { padding: 0; margin: 0; } div#simpleSearch { margin: 0; padding: 0; width: 100%; height: initial; border: 0; background: none; } div#simpleSearch #searchInput, input#database_input { padding: 10px; line-height: 20px; font-family: Open Sans, sans-serif; background-color: transparent; border: 1px solid #161b20; outline: none; } div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { text-indent: initial; width: 4.65em; } div#mw-panel div.portal { margin: 0; padding: 15px 30px; margin-bottom: 30px; background-image:none; } div#mw-panel div.portal h3 { cursor: initial; display: block !important; } div#mw-panel div.portal h3#p-In_the_wiki-label { background: url(https://i.imgur.com/7DeMxyz.png) no-repeat; } div#mw-panel div.portal h3#p-Popular_pages-label { background: url(https://i.imgur.com/qtaf1a3.png) no-repeat; } div#mw-panel div.portal h3#p-Categories-label { background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat; } div#mw-panel div#p-Management { display: none; } div#mw-panel div.portal h3#p-Management-label { background: url(https://i.imgur.com/vcNXF6N.png) no-repeat; } div#mw-panel div.portal div.body { margin: 0 !important; } div#mw-panel div.portal div.body ul li { line-height: 20px; display: flex; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } div#mw-panel div.portal div.body ul li:last-child { border-bottom: none; } div#content-wrap { box-sizing: border-box; } div#content-navigation-wrap { margin-bottom: 30px; overflow: hidden; } div#navigation { display: flex; height: 42px; position: relative; margin-bottom: 60px; } div#navigation:before { content: ""; position: absolute; bottom: 0; border-bottom: 2px solid rgba(0, 0, 0, 0.1); width: 100%; } div#left-navigation { margin: 0; position: absolute; } div#right-navigation { position: absolute; right: 0; margin: 0; } div.vectorTabs { background: none; padding: 0; height: initial; } div.vectorTabs ul { background: none; } div.vectorTabs ul li { background: none !important; font-size: 0; } div.vectorTabs ul li.selected a { cursor: initial; border-bottom: 2px solid #5C3219; } div.vectorTabs span { background: none; } div.vectorTabs ul li a { line-height: 20px; padding: 10px; font-size: 13px; height: initial; border-bottom: 2px solid transparent; } div.vectorTabs ul li a:hover { border-bottom: 2px solid rgba(0, 0, 0, 0.2); } h3#p-cactions-label { padding: 0; margin: 0 !important; } h3#p-cactions-label span { display: none; } div.vectorMenu h3 a { position: initial; display: block; width: 46px; height: 40px; background: url(https://i.imgur.com/l1cW7qY.png) no-repeat center !important; background-position: initial; outline: none; } div.vectorMenu h3 a:hover { background: #transparent !important; } div.vectorMenu div.menu { top: 40px; left: initial; right: 0; border: none; background: #c7b07c; } div.vectorMenu div.menu li { line-height: 20px; } div.vectorMenu li:first-child a { border-top: 1px solid #151A1E; } div.vectorMenu li a { padding: 10px 15px; font-size: 12px; border-bottom: 1px solid #151A1E; } div.vectorMenu li a:hover { background: rgba(255, 255, 255, 0.1); } div#content { margin: 0; padding: 30px; border: none; background: none; } #contentSub, #contentSub2 { margin: 30px 0; } ul#footer-info { margin: 0 30px; border-top: 2px solid rgba(0, 0, 0, 0.2); } div#footer { margin: 0; padding: 0; min-width: auto; } div#customFooter { margin: 0; background: #252525; margin-top: 30px; padding: 30px; text-align: center; } div#customFooter div a { width: 20px; height: 20px; display: inline-block; margin: 0 5px !important; } ul#footer-places, ul#footer-icons, li#ca-unwatch, li#ca-watch, div#jump-to-nav, span#wpSummaryLabel, input#wpSummary, div.editCheckboxes, div#editpage-copywarn { display: none; } /*div#siteNotice, div#pageInfo, div#content-navigation-wrap, div#p-search, div#mw-panel div.portal { background: #bca674 !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } */ div#searchTitle, div#mw-panel div.portal h3 { position: relative; font-size: 13px; padding: 0 0 10px 30px; color: #592c0d; margin-bottom: 30px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); overflow: initial; } body, .mw-body p, p, a:hover, div#mw-panel div.portal div.body ul li a, span.subpages a, div#simpleSearch #searchInput, div.vectorTabs ul li a, table, .mw-body-content, .mw-body pre, textarea#wpTextbox1, #contentSub, #contentSub2, input#database_input, div#mw-panel div.portal div.body ul li a:visited, a:visited, .mw-body a.external, .mw-body a.external:visited { color: #272525; } a:hover, a:focus, .mw-body a.external:hover { text-decoration: none; color: #5c3219; } div.portal h3:before, div#searchTitle:before { content: ""; position: absolute; height: 2px; width: 20px; background-color: #5c3219; bottom: -2px; left: 0; } div.editButtons input[type="submit"], div#simpleSearch #searchButton, div.editButtons span a, div#customFooter div a, button#database_button { color: #afafaf; border: 1px solid #5c3219; background-color: #5c3219; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); padding: 10px; margin: 0; font-family: Open Sans, sans-serif; font-size: 12px; line-height: 20px; cursor: pointer; outline: none; } div.editButtons span a:hover, div.editButtons input[type="submit"]:hover { background-color: #bca674; color: #593018; } a#mw-editform-cancel:hover { background-color: #bca674; } /* New Site Design */ /* Base Classes */ div, table, tr, th, td, figure, th, video, audio, h1, h2, h3, h4, h5, h6, aside, canvas, section, header, footer, nav, span, p, small, big, b, strong, img, hr, pre, button, input, textarea, optgroup, ol, select, option, blockquote, nav { margin: 0; padding: 0; outline: none; border: none; text-decoration: none; list-style-type: none } ul { margin-bottom: 0 } .dFlx { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex } .u_w_100 { width:100%; } /* Header */ .container { max-width: 1600px; margin: auto } header { position: relative; width: 100% } .header-top { padding: 14px 0; box-sizing: border-box; position: relative; width: 100%; background: #110901 } .header-top .container { justify-content: space-between } .header-top .logo { position: absolute; top: 0; right: 0; left: 0; margin: auto; max-width: 380px; width: 380px; z-index: 99 } .header-top .login { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .header-top .login li { margin-right: 10px; display:inline-flex; } .header-top .login li:last-child { margin-right: 0 } .header-top .login li:last-child a:hover { text-decoration: underline } .play-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .play-link li { margin-right: 15px; display: inline-flex; } .play-link li a { color: #fff; text-shadow: 0 3px 15px rgba(0, 0, 0, .75); font-size: 22px } .play-link li a:hover { color: #ff8936; text-shadow: 0 3px 15px rgba(0, 0, 0, .75) } .login a { color: #90b41a; text-transform: uppercase; font-size: 15px; padding: 2px; } .header-bottm { padding: 30px 0; box-sizing: border-box; width: 100%; background: #060402; background: linear-gradient(90deg, rgba(6, 4, 2, 0.6026785714285714) 0%, rgba(38, 26, 6, 0.45) 10%, rgba(38, 26, 6, 0.45) 90%, rgba(6, 4, 2, 0.6) 100%) } .header-bottm .main-nav { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow: row } .header-bottm .main-nav li { margin-right: 5.75%; position: relative; display:inline-flex; } .header-bottm .main-nav li:last-child { margin-right: 0 } .header-bottm .main-nav li:nth-child(4) { margin-right: 32.41% } .header-bottm ul li a { text-transform: uppercase; color: #fe9826; font-size: 17px; display: block; transition: .2s all ease-in-out; text-shadow: 0 1px 0 rgba(0, 0, 0, .3) } .header-bottm ul li.acitve a { color: #90b41a; text-shadow: 0 2px 28px #ffaa0a } .header-bottm ul li a:hover { color: #90b41a; text-shadow: 0 2px 28px #ffaa0a } .header-bottm ul li::after { position: absolute; content: ''; background: url(https://www.grinderscape.org/images/menu-after-icon.png) no-repeat; width: 16px; height: 16px; right: -50px; top: 5px } .header-bottm .main-nav li:nth-child(4)::after { position: absolute; content: ''; background: 0 0; width: 0; height: 0; margin: 0; right: 0 } .header-bottm ul li:last-child::after { position: absolute; content: ''; background: 0 0; width: 0; height: 0; margin: 0; right: 0 } .mobile-logo { display: none } /* Body */ #main-wrapper { overflow: hidden } #main-wrapper .container { position: relative; padding: 0 20px; box-sizing: border-box } #main-wrapper .container::before { position: absolute; content: ''; background: url(https://www.grinderscape.org/images/left-sidebar.png); background-repeat: repeat-y; width: 110px; height: 100%; left: -60px; z-index: 99; top: 0; background-size: 100% } #main-wrapper .container::after { position: absolute; content: ''; background: url(https://www.grinderscape.org/images/right-sidebar.png); background-repeat: repeat-y; width: 110px; height: 100%; right: -60px; z-index: 99; top: 0; background-size: 100% } .main-top-cstm { background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y; background-size: 100%; background-color: #9f895a; padding: 0 70px; } .main-content-cstm { box-sizing: border-box; padding: 42px 40px; padding-bottom: 30px; box-sizing: border-box; background: #ab915a; background: linear-gradient(180deg, rgba(171, 145, 90, 0.28335084033613445) 0%, rgba(171, 145, 90, 0) 95%) } #content-sidebar-wrap { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; position: relative; background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y; background-size: 100%; padding: 65px 35px; padding-bottom: 5px; box-sizing: border-box } #content-sidebar-wrap::before { content: ''; position: absolute; background: url(https://www.grinderscape.org/images/middle-cover-top-bg.png) repeat-x; height: 7px; bottom: -6px; width: 100%; left: 0; top: -4px } #content-sidebar-wrap::after { content: ''; position: absolute; background: url(https://www.grinderscape.org/images/middle-cover-foot-bg.png) repeat-x; height: 7px; width: 100%; left: 0; bottom: -6px } #content-sidebar-wrap::before { box-sizing: border-box } /* Footer */ footer { position: relative; padding: 25px 25px 30px; box-sizing: border-box; background: #282013; background: linear-gradient(180deg, rgba(40, 32, 19, 0.8267506831834296) 0%, rgba(39, 31, 16, 0.6754901789817489) 7%, rgba(36, 27, 9, 1) 25%, rgba(30, 21, 4, 1) 50%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 100%); background: url(https://grinderscape.org/images/total-futr.png) no-repeat; background-position: 100% 50%; background-size: cover } footer ul { padding-left: 0; margin-left: 0; } .footer-top { border-bottom: 1px solid #140e01; position: relative; z-index: 9; justify-content: space-between; padding-bottom: 40px; padding-top: 30px; max-width: 82%; margin: auto } .footer-top .cw-30 { width: 29% } .footer-top .cw-70 { width: 65% } .footer-top .cw-70 .cw-33 { width: 31%; margin-right: 4% } .footer-top .cw-70 .cw-33:last-child { margin-right: 0 } .footer-top li { display:flex; } .footer-top li a, .footer-top p { color: #f6e6c2; font-family: pt sans caption, sans-serif; font-weight: 400; font-size: 15px; } .footer-top li a:hover { color: #fe9826 } .footer-top p { line-height: 1.7 } .footer-top li a { line-height: 1.9 } .footer-top h5 { font-family: pt sans caption, sans-serif; font-weight: 700; color: #fff; font-size: 20px; position: relative; margin-bottom: 26px } .footer-top h5::before { content: ''; position: absolute; height: 3px; background: #fff; width: 30px; top: -14px } .footer-btm { width: 100%; box-sizing: border-box; flex-flow: column; justify-content: center; position: relative; z-index: 9; padding: 50px 0 0 } .footer-btm .footer-logo { width: 63px; margin: auto; margin-bottom: 40px } .footer-btm p { text-align: center; color: #fff; font-size: 12px; } /* END MAIN */ /* FONT AWESOME */ /*! * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa, .fab, .fad, .fal, .far, .fas { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1 } .fa-plus:before { content: "\f067" } .fa-minus:before { content: "\f068" } .fa-discord:before { content: "\f392" } .fa-facebook:before { content: "\f09a" } .fa-facebook-f:before { content: "\f39e" } .fa-facebook-messenger:before { content: "\f39f" } .fa-facebook-square:before { content: "\f082" } .fa-youtube:before { content: "\f167" } .fa-youtube-square:before { content: "\f431" } @font-face { font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url(../resources/fonts/fa-brands-400.eot); src: url(../resources/fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-brands-400.woff2) format("woff2"), url(../resources/fonts/fa-brands-400.woff) format("woff") } .fab { font-family: "Font Awesome 5 Brands" } @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: block; src: url(../resources/fonts/fa-regular-400.eot); src: url(../resources/fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-regular-400.woff2) format("woff2"), url(../resources/fonts/fa-regular-400.woff) format("woff") } .fab, .far { font-weight: 400 } @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: block; src: url(../resources/fonts/fa-solid-900.eot); src: url(../resources/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-solid-900.woff2) format("woff2"), url(../resources/fonts/fa-solid-900.woff) format("woff") } .fa, .far, .fas { font-family: "Font Awesome 5 Free" } .fa, .fas { font-weight: 900 } /* MOBILE */ @media(max-width:1680px) { body { font-size: 16px } .container { max-width: 1370px } .header-top .logo, .header-top .logo img { max-width: 330px; width: 330px } .header-top { padding: 11px 0 9px } .header-bottm { padding: 24px 0 } .header-bottm ul li a { font-size: 16px } .header-bottm .main-nav li { margin-right: 5.44%; position: relative } } @media(max-width:1440px) { body { font-size: 14px } .container { max-width: 1200px } .header-bottm ul li::after { right: -35px; } .header-top .logo, .header-top .logo img { max-width: 310px; width: 310px } .header-top { padding: 9px 0; } .header-bottm .main-nav li { margin-right: 4.9% } .header-bottm ul li a { font-size: 15px } .header-bottm { padding: 20px 0 } } @media(max-width:1200px) { .container { max-width: 96% } .header-top { padding: 7px 0; } .header-top .logo, .header-top .logo img { max-width: 285px; width: 285px } .header-bottm ul li a { font-size: 14px } .login a { font-size: 14px } .header-bottm { padding: 14px 0 } .header-bottm .main-nav li { margin-right: 4.8% } } @media(max-width:1080px) { .header-bottm .main-nav li { margin-right: 4.5% } } @media(max-width:1024px) { .mobile-menu { width: 40px; height: 38px; position: relative; float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; overflow: hidden } .mobile-menu span { display: block; position: absolute; height: 5px; width: 100%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out } .mobile-menu span:nth-child(1) { top: 0 } .mobile-menu span:nth-child(2) { top: 11px } .mobile-menu span:nth-child(3) { top: 22px } .mobile-menu.open span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) } .mobile-menu.open span:nth-child(2) { opacity: 0; left: -60px } .mobile-menu.open span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg) } ul.main-menu { display: none } .header-bottm .main-nav { flex-flow: column } .header-bottm .container { position: relative } .header-bottm .main-nav { opacity: 0 } .header-bottm .main-nav { position: absolute; z-index: 999; width: 100%; top: 42px; left: -100%; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out } .header-bottm .main-nav.side-open { left: 0; display: block; opacity: 1; height: 100vh; background: #5a2f02; z-index: 999; margin-top: 1em; } .header-bottm .container .mobile-menu { position: absolute; right: 0 } .header-bottm ul li::after { content: ''; background: 0 0; width: 0; height: 0; right: 0 } .header-bottm .main-nav li { margin-right: 0; display:block; } .header-bottm .main-nav li:nth-child(4) { margin-right: 0 } .header-bottm ul li a { padding: 1em; display: block; text-align: center; background-color: #5a2f02; border-bottom: 1px solid #222; font-size: 1.5em; } .header-bottm { padding: 10px 0; min-height: 50px } .middle-bx-middle .img-wrp { padding-bottom: 30px; max-width: 70%; margin: auto } .container { max-width: 96% } } @media(max-width:768px) { .mobile-menu span { height: 3px } .mobile-menu span:nth-child(2) { top: 10px } .mobile-menu span:nth-child(3) { top: 21px } .mobile-menu.open span:nth-child(1) { top: 16px } .mobile-menu.open span:nth-child(3) { top: 16px } } @media(max-width:680px) { .header-top .logo, .header-top .logo img { max-width: 240px; width: 240px } .header-top { padding: 7px 0 1px } } @media(max-width:480px) { .header-top .logo { display: none } .header-top .mobile-logo, .header-top .mobile-logo img { display: block; position: absolute; top: 0; right: 0; left: 0; margin: auto; z-index: 99; max-width: 180px; width: 180px } } @media(max-width:414px) { .header-top .mobile-logo, .header-top .mobile-logo img { max-width: 160px; width: 160px } } @media(max-width:380px) { .header-top .mobile-logo, .header-top .mobile-logo img { max-width: 152px; width: 152px } } @media(max-width:375px) { .header-top .container { justify-content: space-between; max-width: 98% } } @media(max-width:320px) { .header-top .mobile-logo, .header-top .mobile-logo img { max-width: 120px; width: 120px } } /* END MOBILE */ /* END NEW DESIGN CSS */ div#mw-page-base { background: #151515 url(https://www.grinderscape.org/assets/images/background.png); position: fixed; height: 100%; width: 100%; z-index: 9999; } div#mw-head-base { position: fixed; left: 50%; top: 50%; z-index: 9999; margin: -75px 0 0 -75px; border: 16px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.7); border-radius: 50%; border-top: 16px solid #627924; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Specific Pages */ form#editform { border: 1px solid rgba(0, 0, 0, 0.3); } div#toolbar { padding: 10px 5px; background: #5c3219; border-bottom: 1px solid #161b20; line-height: 0; } div#toolbar>div { width: 20px; height: 20px; display: inline-block; vertical-align: middle; cursor: pointer; margin: 0 5px; } div#mw-editbutton-bold, div#mw-editbutton-italic, div#mw-editbutton-headline, div#mw-editbutton-nowiki { display: none !important; } div#mw-editbutton-link { background: url(https://i.imgur.com/Wrs4VMn.png); } div#mw-editbutton-extlink { background: url(https://i.imgur.com/HKLvTBX.png); } div#mw-editbutton-hr { background: url(https://i.imgur.com/J9is2iW.png); } textarea#wpTextbox1 { resize: vertical; outline: none; background: rgba(0, 0, 0, 0.1); font-family: monospace; line-height: 16px; font-size: 12px; border: none; padding: 10px; } .editOptions { border: none; padding: 10px 5px; margin: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.2); } .editButtons { display: flex; } span.cancelLink { margin: 0; display: flex; } div.editButtons input[type="submit"], div.editButtons span a { margin: 0 5px; } .mw-editTools, .templatesUsed, .hiddencats, .limitreport, span.editHelp, span.mw-editButtons-pipe-separator { display: none; } ul#index { margin-left: 0; } ul#index li { display: flex; } ul#index li:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 10px; } div.img { width: 40px; height: 40px; margin-right: 10px; display: flex; justify-content: center; align-items: center; } #index li div.img img { max-height: 40px; max-width: 40px; } /* New #index */ #index { margin-left: 0; } #index .homepage-list { display: flex; padding: 10px; } #index .homepage-list:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #index .img img { max-height: 40px; max-width: 40px; } .homepage-list:hover { background-color: rgba(0,0,0,0.1); } /* General */ body, div#mw-panel div.portal div.body ul li a, div#simpleSearch #searchButton, div#simpleSearch #searchInput, div#siteNotice, .mw-body p, table, .mw-body-content, #contentSub, #contentSub2, #p-personal ul li, nav ul li, input#database_input { font-size: 12px; line-height: 20px; } div#mw-panel div.portal div.body ul li a:hover, span.subpages a:hover, div.vectorTabs ul li.selected a, div.vectorTabs ul li a:hover, th, span.cancelLink a:hover { color: #593018 !important; } .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { font-family: Open Sans, sans-serif; color: #afafaf; line-height: 20px; font-weight: normal; margin: 30px 0; font-size: 13px; } .mw-body img { max-width: 100%; } .mw-body p, p { margin: 30px 0; line-height: 20px; } .mw-body h1 { border-bottom: 1px solid #161b20; padding-bottom: 10px; } .mw-body h2 { border-bottom: none; } span.mw-editsection { display: none; } table { margin: 30px 0 !important; background: rgba(0, 0, 0, 0.2) !important; border-collapse: collapse; } td, th { padding: 10px !important; border: 1px solid #161b20 !important; } th { background: #1f272f !important; font-weight: normal; text-align: left !important; } .mw-body pre { background-color: rgba(0, 0, 0, 0.1); } hr { background-color: #161b20; margin: 30px 0; } .mw-body .external { padding: 0; background: none; } .mw-body ul { margin: 30px 0px 30px 10px; list-style-position: inside; list-style-image: none; } .mw-body ul li { margin: 0; } .mw-body ul li ul { margin: 10px 0 10px 30px; } div#customFooter { background: #5C3219 !important; color: #bca674 !important; } div#mw-head a { color: #bca674 !important; } div#customFooter p { color: #bca674 !important; } div#customFooter a { color: #fff !important; } fieldset { border: 1px solid rgba(0, 0, 0, 0.2) !important; } .mw-changeslist-legend { border: 1px solid #97855d !important; } input[type="submit"], input[type="checkbox"], select { background: #5c3219; border-color: #5c3219; } ::-webkit-input-placeholder { color: #717171; } :-moz-placeholder { color: #717171; } ::-moz-placeholder { color: #717171; } :-ms-input-placeholder { color: #717171; } .p_toggle { cursor:pointer; } .p_toggle_content a.external.text { color: white; } .searchresults h2 { font-weight: bold; border-bottom: 1px solid #252525; margin: 0 0 10px 0; } ul.mw-search-results { margin: 0 0 30px 0; float: none; } /* 28-12-2016 */ /* nav ul li { display: inline-block !important; padding: 10px 0 !important; } nav ul li a:hover { color: #fff !important; } */ #mw-watchlist-resetbutton>input { color: #afafaf !important; } #mw-watchlist-options input { color: #afafaf !important; } .namespaceselector { color: #afafaf !important; } .mw-submit { color: #afafaf !important; } .namespaceselector { margin-left: 5px !important; } .mw-month-selector { color: #fdfdfd !important; } #index li { list-style: none !important; } .sicon1 { background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center, linear-gradient(transparent, rgba(0, 0, 0, 0.15)), #3a589e !important; } #customFooter>div>a:nth-child(1) { background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center !important; background-color: #3a589e !important; color: #fff !important; } #customFooter>div>a:nth-child(2) { background: url("https://i.imgur.com/GZzo3yV.png") no-repeat center !important; background-color: #3a89c4 !important; color: #fff !important; } #customFooter>div>a:nth-child(3) { background: url("https://i.imgur.com/wF3Xf61.png") no-repeat center !important; background-color: #c8312b !important; color: #fff !important; } .mw-headline { color: #272525 !important; } #mw-history-search>input { color: #999 !important; } .historysubmit.mw-history-compareselectedversions-button { color: #fdfdfd !important; } #toc, .toc, .mw-warning, .toccolours { background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important; border: medium none !important; margin-bottom:20px; } .diff-currentversion-title { color: #222 !important; } #toctitle>h2 { color: #222; } td.diff-context { background: rgba(254, 254, 254, 0.3) !important; } td.diff-addedline .diffchange { background: rgba(237, 237, 237, 0.5) !important; } #pagehistory li.selected { background-color: rgba(254, 254, 254, 0.5) !important; border: 1px dashed #272525 !important; padding: 5px !important; } #pagehistory li { border: 1px solid #222 !important; padding: 5px !important; } .results-info { color: #222 !important; } .mw-ui-input { background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important; border: medium none !important; padding: 6px !important; } #mw-searchoptions { background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important; } #mw-searchoptions h4 { color: #222 !important; } .ipsDataItem, .ipsDataList.ipsDataList_zebra>.ipsDataItem { border: none !important; } .wikitable th { color: #fff !important; } .ipsPad_half { text-align: center !important; } #mw-history-search>input { background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important; color: #272525 !important; } .mw-search-profile-tabs { background-color: rgba(254, 254, 254, 0.2) !important; border: none !important; } .highlight-hover { background-color: #b39f71; } .highlight { font-weight: normal; } /* Remove any unwanted underline from <a> */ .tile-bottom a, .mainpage-left a, .mainpage-right a, #toc a, td a, #navigation a, #mw-panel a, #pageInfo a, .header-bottm a, footer a, #index a, #contentFooter a, .mw-specialpages-list a, .searchresults a, .mw-body .mw-content-text a { text-decoration:none; } /* Start atomic classes */ .gs-atomic h1{ border-bottom: 1px solid rgba(0,0,0,.3); font-size: 1.5em; font-family: roboto, sans-serif; font-weight: bold; padding: 10px 0; margin: 0 0 20px 0 !important; } .padS { padding:5px; } .padM { padding: 10px; } .padL { padding: 20px; } .padXL { padding: 25px; } .padXXL { padding: 35px; } .marBS { margin-bottom:5px; } .marBM { margin-bottom: 10px; } .marBL { margin-bottom: 20px; } .marBXL { margin-bottom: 25px; } .marBXXL { margin-bottom: 35px; } .bgLight { background-color: rgba(247,219,166,.2); border: 1px solid #bda062; } .titleS { font-size: 1em; font-family: roboto, sans-serif; font-weight: bold; } .titleM { font-size: 1.5em; font-family: roboto, sans-serif; font-weight: bold; } .titleL { font-size: 2em; font-family: roboto, sans-serif; font-weight: bold; } .gs-grid { display:grid; grid-gap:10px; } .grid2 { grid-template-columns:repeat(2,1fr); } .grid3 { grid-template-columns:repeat(3,1fr); } .text_center { text-align:center; } a .gs-btn { text-decoration: none; } .gs-btn { padding: 12px 0; margin: 0 !important; color: #0F0C07!important; font-weight: bold; font-family: Roboto, sans-serif; font-size: 1.2em; } .gs-btn:hover { background-color: rgba(0,0,0,0.4); color: white!important; } .gs-btnColor1 { background-color: #A2894E; } /*HOMEPAGE*/ .gs-flex { display:flex; flex-flow:row wrap; margin-bottom: 20px; } .tile-half:not(:last-child) { margin-right: 9px; } .tile-half { flex: 1; } .tile-top { display: flex; align-items: center; background-color: #5C6168; overflow: hidden; padding: 0; height: 13vw; max-height: 12em; transition: 0.4s ease-out; } .tile-bottom { background-color: rgba(247,219,166,.2); padding: 12px 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; align-self: end; min-height: 5vw; border: 1px solid #bda062; } .tile-date { margin: 0 !important; font-size: 0.8em !important; color: #999 !important; line-height: 14px !important; } .tile-title { margin-bottom: 5px; font-size: 1.4em; color: #272525; } .tile-info { line-height: 1.4em; color: #272525; } .click-to-view { font-size: 0.85em; color: #e01818; } .tile-half:hover>.tile-bottom { background-color: #e8dcbe; } .mainpage-left { flex: 2; display: flex; flex-flow: column wrap; margin-right: 0.9rem; } .mainpage-right { flex: 1; display: flex; flex-flow: column wrap; } .mainpage-social { margin-bottom: 20px; } .mainpage-social .social-tile { display: flex; align-items: center; background: #7289da; padding: 1em 1.75em; } .mainpage-social .fa-social-icon { color: #fff; font-size: 40px; margin-right: 15px; } .mainpage-social .server-name { color: #ffffff; font-weight: bold; font-size: 1.25em; margin: 0.5em 0 -0.15em; } .mainpage-social .server-tagline { color: rgba(255,255,255,0.9); margin: 0.5em 0; } .mainpage-social .social-tile-bottom { background: #697ec4; border: none; padding: 1em 1.75em; } .mainpage-social .social-tile-bottom p { color: #ffffff; font-weight: bold; font-size: 0.9em; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; } .hp_categories { margin-bottom: 20px; padding: 20px; border-radius: 3px; } .hp_popular { padding:1.3rem 1.5rem 0.6rem; } #toc a { color: #272525; } #toc a:hover { color: #5c3219; } ul#footer-info { padding-left: 0; padding-top: 10px; } #contentFooter, span.subpages { font-size: 12px; } /* Social Specific Styles */ .mainpage-social .discord-tile { background: #7289da; } .mainpage-social .discord-tile-bottom { background: #697ec4; } .mainpage-social .youtube-tile { background: #e43131; } .mainpage-social .youtube-tile-bottom { background: #3e3b3b; } .mainpage-social .facebook-tile { background: #4267B2; } .mainpage-social .facebook-tile-bottom { background: #304d88; } /* Dropdown CSS */ .dropbtn { background-color: #1f272f; color: #ffffff; padding: 9px; font-size: 12px; margin: 8px 8px 0; border: outset; border-color: rgb(193, 193, 193); cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #1f272f; min-width: 210px; max-width: 250px; max-height: 400px; overflow: scroll; overflow-x: hidden; box-shadow: 0px 8px 16px 0px rgba(167, 167, 167, 0.2); z-index: 1; margin-left: 8px; } .dropdown-content a { color: #ffffff !important; padding: 12px 16px !important; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #9b5d00 } .dropdown img { height: 16px; width: 16px; vertical-align: text-bottom; margin-right: 5px; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #9b5d00; } /* Dropdown images */ div.dropdown-content > pre > a:nth-child(1):before { content: url(https://wiki.grinderscape.org/images/c/c0/13.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(2):before { content: url(https://wiki.grinderscape.org/images/5/59/11.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(3):before { content: url(https://wiki.grinderscape.org/images/c/c9/17.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(4):before { content: url(https://wiki.grinderscape.org/images/9/9e/7.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(5):before { content: url(https://wiki.grinderscape.org/images/5/58/10.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(6):before { content: url(https://wiki.grinderscape.org/images/d/d6/15.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(7):before { content: url(https://wiki.grinderscape.org/images/4/4a/1.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(8):before { content: url(https://wiki.grinderscape.org/images/1/10/3.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(9):before { content: url(https://wiki.grinderscape.org/images/f/fb/2.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(10):before { content: url(https://wiki.grinderscape.org/images/6/60/8.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(11):before { content: url(https://wiki.grinderscape.org/images/7/75/22.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(12):before { content: url(https://wiki.grinderscape.org/images/0/07/20.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(13):before { content: url(https://wiki.grinderscape.org/images/b/ba/19.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(14):before { content: url(https://wiki.grinderscape.org/images/7/7a/9.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(15):before { content: url(https://wiki.grinderscape.org/images/0/05/0.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(16):before { content: url(https://wiki.grinderscape.org/images/f/f1/6.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(17):before { content: url(https://wiki.grinderscape.org/images/0/09/4.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(18):before { content: url(https://wiki.grinderscape.org/images/1/1e/16.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(19):before { content: url(https://wiki.grinderscape.org/images/9/9e/12.png); vertical-align: middle; margin-right: 5px; } div.dropdown-content > pre > a:nth-child(20):before { content: url(https://wiki.grinderscape.org/images/8/82/5.png); vertical-align: middle; margin-right: 5px; } /* div.dropdown-content > pre > a:nth-child(21):before { content: url(https://wiki.grinderscape.org/images/7/71/21.png); vertical-align: middle; margin-right: 5px; } Construction*/ div.dropdown-content > pre > a:nth-child(21):before { content: url(https://wiki.grinderscape.org/images/8/88/18.png); vertical-align: middle; margin-right: 5px; } /* XP Table */ .xp-table .xp-table-image { height: 20px; width: 20px; margin: 0 auto; } .xp-table td, .xp-table th { padding: 5px 10px !important; } /*New Template 9-6-21*/ .monster_list_items { height: 175px; overflow: hidden; border: 1px solid #592c0d; } .monster div { font-size: 14px; } .no_underline, .no_underline a { text-decoration: none; } /*Change to Bootstrap CSS btns*/ .btn-primary { color: #272525 !important; background-color: #A2894E !important; border-color: #A2894E !important } .btn-primary:hover { color: #fff !important; background-color: #5c3219 !important; border-color: #5c3219 !important } .btn-check:focus+.btn-primary, .btn-primary:focus { color: #fff !important; background-color: #5c3219 !important; border-color: #5c3219 !important; } .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle { color: #fff !important; background-color: #5c3219 !important; border-color: #5c3219 !important } .btn-primary.disabled, .btn-primary:disabled { color: #AAA !important; background-color: #EEE !important; border-color: #EEE !important; cursor: not-allowed; pointer-events: none; } /* DROP TABLE CSS */ .avatar { width: 50px; height: 50px; position: absolute; background-color: #15151b; top: -40px; left: 35px; border-radius: 80px; } .droptable { display: inline-block; height: 115px; width: 120px; background-color: #15151b; border: 1px solid rgba(128, 128, 128, 0.087); border-radius: 5px; box-shadow: -0.1rem 0 0.2rem #000; transition: 0.4s ease-out; position: relative; left: 85px; } .droptable:not(:first-child) { margin-left: -50px; } .droptable:hover { transform: translateY(-20px); transition: 0.4s ease-out; } .droptable:hover ~ .droptable { position: relative; left: 140px; transition: 0.4s ease-out; } .itemname { color: white; font-size: 12px; font-weight: bold; position: absolute; top: 30px; transform: translateY(-50%); width: 100%; text-align: center; line-height: 1.4em; } .card_info { color:white; font-size: 10px; display: inline-block; } .droprate_common { color: #1ff078; } .droprate_uncommon { color: #ff9100; } .droprate_rare { color: #ff0000; } .card_info_container { background-color: rgba(255, 149, 0, 0.204); border: 1px solid rgba(128, 128, 128, 0.243); position: absolute; width: 102%; left: -1px; } .dropratebox { bottom: 35px; } .dropamountbox { bottom: 8px; } .card:hover .stroke { stroke-dashoffset: 100; transition: 0.6s ease-out; } .card_item_center { display: block; margin-left: auto; margin-right: auto; margin-top: 10px; } /*End New Monster Template*/ .monster_list_item a { display:block; text-decoration: none; } /* .monster_list_item img { max-width:150px; } */ .monster { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgb(0 0 0 / 0%); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .monster:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.1); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .monster_list_item:hover > .monster:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .table_link a { text-decoration:underline; } .table_link a:hover { text-decoration: none; } /* Hide / Show CSS (Buttons, etc) */ /* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at [[Wikipedia:NavFrame]]. */ div.NavFrame { margin: 0; padding: 4px 10px; border-collapse: collapse; margin-bottom:15px; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavFrame div.NavHead { line-height: 1.6em; position: relative; font-size:0.9rem; } div.NavFrame p, div.NavFrame div.NavContent, div.NavFrame div.NavContent p { font-size: .75rem; display: block; background-color: rgba(0,0,0,0.4); color: white; padding: 10px; margin: 5px 0; } div.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } .NavToggle { position: absolute; top: 0; right: 0; font-weight: normal; padding: 4px; font-size: 15px; } .client-js .NavFrame.collapsed > .NavContent { display: none; } /* 28-12-2016 */ @media (min-width: 1400px) { .container { max-width: 1600px !important; } } /* 28-12-2016 responsive layout */ @media screen and (max-width:991px) { #content-sidebar-wrap>div { width: 100% !important; display: block !important; padding: 0 !important; } div#content-sidebar-wrap { display: block !important; } .main-categories .tile-half { margin-right: 9px; margin-bottom: 20px; flex: 30%; } .main-categories .tile-top { margin: 10% 5% 20%; } .tile-top { height: 20vw; max-height: 20em; } .xp-table{ overflow-y: auto; overflow-x: scroll; height: auto; } } @media screen and (max-width:767px) { #content-sidebar-wrap { display: block !important; } div#mw-panel { padding: 0 !important; width: 100% !important; display: block !important; } .mw-contributions-form { overflow: auto; width: 100% !important; } #mw-history-search { line-height: 30px !important; } .ipsDataItem, .ipsDataList.ipsDataList_zebra>.ipsDataItem { border-top: none !important; border-bottom: none !important; } .main-top-cstm { padding: 0 10px; } .main-content-cstm { padding: 0; margin-top:30px; } div#p-search { width: 80%; } #main-wrapper .container::before { left: -75px; } #main-wrapper .container::after { right: -75px; } .mainpage-left { margin-right: 0; } .play-link { margin: 0; padding-left:0; } .footer-top { max-width: 100%; flex-wrap: wrap; } .footer-top .cw-70 { width: 100%; flex-wrap: wrap; } .footer-top .cw-30, .footer-top .cw-70 .cw-33 { width: 100%; } #content-sidebar-wrap { padding: 65px 0; } .gs-flex{ flex-flow: column; } .grid3 { grid-template-columns: repeat(1,1fr); } .hp_popular { margin-bottom: 25px; } .tile-half:not(:last-child) { margin-right: 0; margin-bottom: 15px; } table.wikitable { width: 100%; } #footer-info p span { display: block; left: 0; position: unset!important; } #noticeTitle, #welcome_title { padding: 0; padding-bottom: 10px; } div#navigation { margin-bottom: 120px; } } @media screen and (max-width:450px) { div#right-navigation { margin-top: 40px; position: static; display: block !important; } } /* 28-12-2016 responsive layout */