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
| (389 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: | + | 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 | + | a, .link a { |
| − | color: # | + | 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-type: none; | ||
list-style-image: none; | list-style-image: none; | ||
| Line 82: | 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 114: | 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; | display: none; | ||
} | } | ||
| − | + | div#siteNotice, .welcomeText, pageText { | |
| − | + | padding: 30px 30px 0; | |
| − | + | text-align:center; | |
| − | padding: 30px | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | text-align: | + | |
} | } | ||
| − | + | #noticeTitle, #welcome_title { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
| − | border-bottom: 2px solid | + | 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; | 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/qpqwLFJ.png) no-repeat; | |
| − | background: url(https://i.imgur.com/ | + | |
padding: 0 0 0 30px; | padding: 0 0 0 30px; | ||
line-height: 20px; | line-height: 20px; | ||
margin: 0; | margin: 0; | ||
border-bottom: none; | border-bottom: none; | ||
| − | font-size: | + | 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/X1fC0qz.png) no-repeat; | |
| − | background: url(https://i.imgur.com/ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | span.subpages:before { | |
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
height: 2px; | height: 2px; | ||
width: 20px; | width: 20px; | ||
| − | background-color: # | + | background-color: #afafaf; |
top: -2px; | top: -2px; | ||
left: 0; | left: 0; | ||
} | } | ||
| − | + | form#searchform { | |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
} | } | ||
| − | + | div#simpleSearch { | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
width: 100%; | width: 100%; | ||
| − | |||
height: initial; | height: initial; | ||
border: 0; | border: 0; | ||
| + | background: none; | ||
} | } | ||
| − | + | 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: transparent; |
| − | background-color: | + | border: 1px solid #161b20; |
| − | border: 1px solid # | + | 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 | + | 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/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; | 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; | ||
position: relative; | position: relative; | ||
| − | margin-bottom: | + | margin-bottom: 60px; |
} | } | ||
| − | + | 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 402: | Line 301: | ||
} | } | ||
| − | + | div.vectorTabs { | |
background: none; | background: none; | ||
padding: 0; | padding: 0; | ||
| Line 408: | Line 307: | ||
} | } | ||
| − | + | div.vectorTabs ul { | |
background: none; | background: none; | ||
} | } | ||
| − | + | div.vectorTabs ul li { | |
| − | background: none | + | background: none !important; |
| − | + | ||
font-size: 0; | font-size: 0; | ||
| − | |||
} | } | ||
| − | + | div.vectorTabs ul li.selected a { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
cursor: initial; | cursor: initial; | ||
| − | + | 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; | ||
| − | font-size: | + | font-size: 13px; |
| − | + | ||
| − | + | ||
height: initial; | 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; | 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 496: | 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; | ||
border: none; | border: none; | ||
| + | background: none; | ||
} | } | ||
| − | + | #contentSub, | |
| − | margin: 0 | + | #contentSub2 { |
| − | + | margin: 30px 0; | |
} | } | ||
| − | + | ul#footer-info { | |
| − | margin: 0; | + | margin: 0 30px; |
| + | border-top: 2px solid rgba(0, 0, 0, 0.2); | ||
} | } | ||
| Line 518: | 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 529: | 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 { | ||
| + | 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 */ | ||
| Line 547: | 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 563: | 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 593: | 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 654: | 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 { | + | body, |
| − | font-size: | + | 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, span.subpages a { | + | 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 | + | .mw-body h5, |
| + | .mw-body h6 { | ||
| + | font-family: Open Sans, sans-serif; | ||
| + | color: #afafaf; | ||
line-height: 20px; | line-height: 20px; | ||
| + | font-weight: normal; | ||
margin: 30px 0; | margin: 30px 0; | ||
| − | + | font-size: 13px; | |
} | } | ||
| − | .mw-body | + | .mw-body img { |
| − | + | max-width: 100%; | |
| − | + | } | |
| + | |||
| + | .mw-body p, | ||
| + | p { | ||
| + | margin: 30px 0; | ||
line-height: 20px; | line-height: 20px; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
.mw-body h1 { | .mw-body h1 { | ||
| − | border-bottom: 1px solid # | + | border-bottom: 1px solid #161b20; |
| − | padding-bottom: | + | padding-bottom: 10px; |
} | } | ||
| Line 695: | Line 1,691: | ||
table { | table { | ||
| − | margin: | + | margin: 30px 0 !important; |
| − | + | background: rgba(0, 0, 0, 0.2) !important; | |
| − | background: | + | |
| − | + | ||
| − | + | ||
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
| − | + | td, | |
| − | padding: 10px | + | th { |
| − | border: 1px solid # | + | padding: 10px !important; |
| + | border: 1px solid #161b20 !important; | ||
} | } | ||
| − | + | th { | |
| − | + | background: #1f272f !important; | |
| − | + | ||
font-weight: normal; | font-weight: normal; | ||
| + | text-align: left !important; | ||
} | } | ||
.mw-body pre { | .mw-body pre { | ||
| − | background: linear-gradient(rgba( | + | background-color: rgba(0, 0, 0, 0.1); |
| − | color: # | + | } |
| − | line-height: | + | |
| + | 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; | 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 */
