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
| Line 8: | Line 8: | ||
} | } | ||
| − | a { | + | a, .link a { |
color: #272525; | color: #272525; | ||
text-decoration: underline; | text-decoration: underline; | ||
Revision as of 14:16, 11 May 2021
@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, .link a {
color: #272525;
text-decoration: underline;
}
.link a:hover {
color: #593018;
}
a.new {
color: #b24040;
}
/* 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);
line-height: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 30px 0;
}
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;
}
.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;
}
/* 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;
}
}
@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;
}
}
@media screen and (max-width:450px) {
div#right-navigation {
margin-top: 40px;
position: static;
display: block !important;
}
}
/* 28-12-2016 responsive layout */
