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.js"

From GrinderScape Wiki
Jump to: navigation, search
 
(45 intermediate revisions by the same user not shown)
Line 1: Line 1:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700);
+
// ***************************** Structure *****************************
@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;
+
    line-height: 20px;
+
}
+
  
a {
+
/* Load fontawesome and bootstrap css dependencies */
    color: #272525;
+
mw.loader.load('https://use.fontawesome.com/releases/v5.8.1/css/all.css', 'text/css');
    text-decoration: none;
+
mw.loader.load('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', 'text/css');
}
+
  
a.new {
 
    color: #b24040;
 
}
 
  
/* nav ul {
+
// Remove unnecessary elements
    list-style-type: none;
+
    list-style-image: none;
+
    text-align: center;
+
    margin: auto;
+
}
+
  
nav ul li {
+
$("div#p-tb").remove();
    margin: 0;
+
$("img").removeAttr("height");
    display: inline-flex;
+
} */
+
  
header {
+
// Wrap the content
    min-width: auto;
+
}
+
  
div#logo {
+
$("div#content, div#mw-navigation").wrapAll("<div id='main-wrapper'><div class='container'></div></div>");
    padding: 30px 0;
+
    margin: auto;
+
    text-align: center;
+
}
+
  
div#main-wrapper {
+
// Insert the header
}
+
  
div#mw-navigation {
+
$("<header> <div class='entire-header'> <div class='header-top'> <div class='container dFlx'> <ul class='play-link'> <li><a itemprop='url' href='https://www.facebook.com/Grinderscape.org'><i class='fab fa-facebook-square'></i></a></li><li><a itemprop='url' href='https://www.youtube.com/user/dokenfilm/feed'><i class='fab fa-youtube'></i></a></li><li><a itemprop='url' href='https://discord.gg/b46xx5u'><i class='fab fa-discord'></i></a></li></ul> <div class='logo'> <a itemprop='url' href='https://www.grinderscape.org/home'><img src='https://www.grinderscape.org/images/grinderscape-logo.png' alt='GrinderScape'></a> </div><div class='mobile-logo'> <a itemprop='url' href='https://www.grinderscape.org/home'><img src='https://www.grinderscape.org/images/grinderscape-logo-mobile.png' alt='GrinderScape'></a> </div><ul class='login'> <li id='n-Log-in'><a href='/Special:UserLogin' data-toggle='modal' data-target='#myModal-user'>Wiki Login</a></li></ul> </div></div><div class='header-bottm'> <div class='container'> <div class='mobile-menu'> <span></span> <span></span> <span></span> </div><ul class='main-nav'> <li><a itemprop='url' href='https://www.grinderscape.org'>HOME</a></li><li><a itemprop='url' href='http://forum.grinderscape.org/'>FORUM</a></li><li><a itemprop='url' href='https://www.grinderscape.org/store'>STORE</a></li><li><a itemprop='url' href='https://www.grinderscape.org/download'>DOWNLOAD</a></li><li><a href='javascript:void(0);' data-toggle='modal' data-target='#myModal-vote'>VOTE</a></li><li><a itemprop='url' href='https://www.grinderscape.org/highscores'>HIGHSCORES</a></li><li class='acitve'><a itemprop='url' href='http://wiki.grinderscape.org/'>WIKI</a></li><li><a itemprop='url' href='https://www.grinderscape.org/contact'>CONTACT</a></li></ul> </div></div></div></header>").insertBefore("div#main-wrapper");
    display: none;
+
}
+
  
div#mw-head {
 
    position: initial;
 
}
 
  
div#p-personal {
+
// Organize the elements
    position: initial;
+
    text-align: right;
+
    padding-bottom: 0;
+
}
+
  
#p-personal ul {
+
// if(window.matchMedia("(max-width: 1024px)").matches){
     padding: 0 20px;;
+
//     // The viewport is less than 1024 pixels wide
     display: inline-block;
+
//    console.log("This is a mobile device.");
}
+
//    $("div#mw-navigation").appendTo(".main-nav");
 +
// } else{
 +
//     // The viewport is at least 1024 pixels wide
 +
//    console.log("This is a tablet or desktop.");
 +
//    $("div#mw-navigation").insertBefore(".login");  
 +
// }
  
#p-personal ul li {
+
$("div#content").wrap("<section class='main-content-cstm'></section>");
    float: initial;
+
$("div#mw-navigation").insertBefore(".main-content-cstm");
    margin: 0;
+
$("div#content").wrap("<div id='content-sidebar-wrap'></div>");
    display: inline-block;
+
$("div#mw-panel").insertAfter("div#content");
    padding: 0 !important;
+
$("div#content").wrap("<div id='content-wrap'></div>");
    background: none;
+
}
+
  
#p-personal ul li a {
+
$("<div id='navigation'></div>").prependTo("div#content");
    /* margin: 0 10px; */
+
$("div#left-navigation").appendTo("div#navigation");
    margin: 10px;
+
$("div#right-navigation").appendTo("div#navigation");
    padding: 0;
+
    display: block;
+
}
+
  
div#mw-head div.vectorMenu h3 {
+
$("<div id='pageInfo'></div>").insertBefore("div#content");
    display: none;
+
$("div#content").wrap("<div id='content-navigation-wrap'></div>");
}
+
$("ul#footer-info").insertAfter("div#content");
  
div#siteNotice, .welcomeText, pageText {
+
// Insert the footer
    padding: 30px 30px 0;
+
    text-align:center;
+
}
+
  
#noticeTitle, #welcome_title {
+
$("<footer> <div class='footer-top dFlx'> <div class='cw-30'> <h5>ABOUT</h5> <p>GrinderScape has been a dedicated server since 2008, with helpful staff and dedicated members. If you need help in how to start, you can see the Wiki. If you wish to get involved with the community as a whole, join our Forums, for the latest threads and game suggestions.</p></div><div class='cw-70 dFlx'> <div class='cw-33'> <h5>GENERAL</h5> <ul> <li><a itemprop='url' href='https://www.grinderscape.org/download'>Play Now</a></li><li><a itemprop='url' href='https://www.grinderscape.org/contact' target='_blank'>Contact Us</a></li><li><a itemprop='url' href='https://www.grinderscape.org/tos' target='_blank'>Terms of Services</a></li><li><a itemprop='url' href='https://www.grinderscape.org/user/manage' target='_blank'>Account Management</a></li><li><a itemprop='url' href='https://www.grinderscape.org/faq' target='_blank'>Frequently Asked Questions</a></li></ul> </div><div class='cw-33'> <h5>GUIDES</h5> <ul> <li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/topic/132-in-game-drops-guide-mystery-boxes/' target='_blank'>NPC Drops Guide</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Skill_guides/Slayer' target='_blank'>Slayer Guide</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/topic/132-in-game-drops-guide-mystery-boxes/' target='_blank'>Drops Guide</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Monster_hunting_guides' target='_blank'>Monster Hunting Guides</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/General_guides/Commands' target='_blank'>In-Game Commands </a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Skill_guides' target='_blank'>Skilling Guides</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/General_guides' target='_blank'>General Guides</a></li></ul> </div><div class='cw-33'> <h5>FORUM THREADS</h5> <ul> <li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/2-news-announcements/' target='_blank'>News &amp; Announcements</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/39-report-in-game-bugs/' target='_blank'>Report In-Game Bugs</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/11-submit-appeal/' target='_blank'>Submit In-Game Appeal</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/59-recover-a-lost-account/' target='_blank'>Recover a Lost Account</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/10-submit-player-report/' target='_blank'>Submit Player Report</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/5-rules/' target='_blank'>In-Game Rules</a></li></ul> </div></div></div><div class='footer-btm dFlx'> <div class='footer-logo'> <a itemprop='url' href='https://www.grinderscape.org'><img src='https://www.grinderscape.org/images/footer-logo-trans.png' alt='GrinderScape'></a> </div><p>GrinderScape is not affiliated with Jagex or Runescape in any way.</p></div></footer>").insertAfter(".main-content-cstm");
    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 {
+
// Mobile Navigation Click Function
     margin-bottom: 0;
+
$(".mobile-menu").click(function () {
}
+
     $(this).toggleClass('open');
 +
    $(".main-nav").toggleClass("side-open");
 +
});
  
div#localNotice>p {
+
// Set up the page footer info
    margin: 0;
+
}
+
  
div#pageInfo {
+
if ($("li#footer-info-credits").length > 0) {
     margin: 0 0 30px 0;
+
     $("li#footer-info-credits").html($("li#footer-info-credits").html().replace(/\[/g, "<span style='position: absolute; right: 0;'>").replace(/\]/g, "</span>").replace(/\{/g, "<p id='contentFooter' style='position: relative;'>").replace(/\}/g, "</p>"));
     padding: 30px;
+
     $("p#contentFooter").insertBefore("li#footer-info-credits");
 +
    $("li#footer-info-credits").remove();
 
}
 
}
  
h1#firstHeading {
+
// Set up the page title and breadcrumb
    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 {
+
var title = $("h1#firstHeading").html().split('/');
    position: relative;
+
$("h1#firstHeading").html(title[title.length - 1]);
    border-top: 2px solid #161b20;
+
$("h1#firstHeading").appendTo("div#pageInfo");
    padding-top: 10px;
+
    margin-top: 10px;
+
}
+
  
div#content-sidebar-wrap {
+
$("span.subpages").appendTo("div#pageInfo");
    display: table;
+
$("span.subpages").html($("span.subpages").children());
    width: 100%;
+
$("<span>" + title[title.length - 1] + "</span>").appendTo("span.subpages");
}
+
$("<span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>").insertAfter("span.subpages > a");
  
div#mw-panel {
+
// Set up the page title
    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 {
+
document.title = title[title.length - 1] + " - GrinderScape Wiki";
    display: none;
+
}
+
  
div#p-search {
+
// Hide mw-panel on HP
    margin: 0 auto;
+
if (window.location.href == 'https://wiki.grinderscape.org/Main_page/New' || window.location.href == 'https://wiki.grinderscape.org/Main_page') {
    float: initial;
+
     $('#mw-panel').remove();
     padding: 30px;
+
    width:45%;
+
 
}
 
}
  
div#p-search div#searchTitle {
+
// Remove href from selected tabs
    background: url(https://i.imgur.com/X1fC0qz.png) no-repeat;
+
}
+
  
span.subpages:before {
+
$.each($("div.vectorTabs li.selected"), function () {
     content: "";
+
     $(this).find("a").removeAttr("href");
    position: absolute;
+
});
    height: 2px;
+
    width: 20px;
+
    background-color: #afafaf;
+
    top: -2px;
+
    left: 0;
+
}
+
  
form#searchform {
+
// Remove title from links
    padding: 0;
+
    margin: 0;
+
}
+
  
div#simpleSearch {
+
$("a").removeAttr("title");
    margin: 0;
+
    padding: 0;
+
    width: 100%;
+
    height: initial;
+
    border: 0;
+
    background: none;
+
}
+
  
div#simpleSearch #searchInput,
+
// Set up the search box
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 {
+
$("div#p-search").insertBefore(".main-content-cstm");
    text-indent: initial;
+
$("div#p-search").wrap("<section class='main-top-cstm'></section>")
    width: 4.65em;
+
$("input#searchInput").val("Search...").removeAttr("placeholder").attr("onfocus", "if (this.value == 'Search...') {this.value = '';}").attr("onblur", "if (this.value == '') {this.value = 'Search...';}");
}
+
  
div#mw-panel div.portal {
+
// Set up the announcement
    margin: 0;
+
    padding: 15px 30px;
+
    margin-bottom: 30px;
+
    background-image:none;
+
}
+
  
div#mw-panel div.portal h3 {
+
$("div#siteNotice").insertBefore("div#p-search");
    cursor: initial;
+
$("<div id='noticeTitle'>Welcome to the GrinderScape Wiki!</div>").prependTo("div#siteNotice");
    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 {
+
// Show/Hide Plugin
    background: url(https://i.imgur.com/qtaf1a3.png) no-repeat;
+
$('.p_hide').hide(); // Hides any element with p_hide class
}
+
$('.p_toggle').on('click', function(){
 +
    var $this = $(this);
 +
    var toggleChild = $this.find('.p_toggle_content');
 +
    var toggleIcon = $this.find('.p_toggle_icon')
  
div#mw-panel div.portal h3#p-Categories-label {
+
    console.log(toggleIcon);
    background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat;
+
}
+
  
div#mw-panel div#p-Management {
+
     toggleChild.slideToggle("fast");
     display: none;
+
    toggleIcon.toggleClass("fa-plus fa-minus");
}
+
  
div#mw-panel div.portal h3#p-Management-label {
+
    // if (toggleIcon == '.fa-plus'){
     background: url(https://i.imgur.com/vcNXF6N.png) no-repeat;
+
    //    toggleIcon.toggleClass("fa-plus", "fa-minus");
}
+
    // } else {
 +
     //     toggleIcon.toggleClass("fa-minus", "fa-plus");
 +
    // }
 +
});
  
div#mw-panel div.portal div.body {
 
    margin: 0 !important;
 
}
 
  
div#mw-panel div.portal div.body ul li {
+
// Set up the edit box
    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 {
+
function wrapText(elementID, openTag, closeTag) {
     border-bottom: none;
+
    var textArea = $("#" + elementID);
 +
    var len = textArea.val().length;
 +
     var start = textArea[0].selectionStart;
 +
    var end = textArea[0].selectionEnd;
 +
    var selectedText = textArea.val().substring(start, end);
 +
    var replacement = openTag + selectedText + closeTag;
 +
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
 
}
 
}
  
div#content-wrap {
+
$("input#wpWatchthis").prop("checked", false);
    box-sizing: border-box;
+
}
+
  
div#content-navigation-wrap {
+
$("<div class='customButton' id='CB-Nowiki' style='background: url(https://i.imgur.com/Fx2AsCt.png);' title='Ignore wiki formatting'></div>").appendTo("div#toolbar");
     margin-bottom: 30px;
+
$("#CB-Nowiki").click(function () {
    overflow: hidden;
+
     wrapText("wpTextbox1", "<nowiki>", "</nowiki>");
}
+
});
  
div#navigation {
+
$("<div class='customButton' id='CB-Heading2' style='background: url(https://i.imgur.com/8uajyYO.png);' title='Level 2 heading'></div>").prependTo("div#toolbar");
    display: flex;
+
$("#CB-Heading2").click(function () {
    height: 42px;
+
     wrapText("wpTextbox1", "<h2>", "</h2>");
    position: relative;
+
});
     margin-bottom: 60px;
+
}
+
  
div#navigation:before {
+
$("<div class='customButton' id='CB-Heading1' style='background: url(https://i.imgur.com/jKOOZnF.png);' title='Level 1 heading'></div>").prependTo("div#toolbar");
    content: "";
+
$("#CB-Heading1").click(function () {
    position: absolute;
+
     wrapText("wpTextbox1", "<h1>", "</h1>");
     bottom: 0;
+
});
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+
    width: 100%;
+
}
+
  
div#left-navigation {
+
$("<div class='customButton' id='CB-Italic' style='background: url(https://i.imgur.com/zdPfv0X.png);' title='Italic text'></div>").prependTo("div#toolbar");
     margin: 0;
+
$("#CB-Italic").click(function () {
    position: absolute;
+
     wrapText("wpTextbox1", "<i>", "</i>");
}
+
});
  
div#right-navigation {
+
$("<div class='customButton' id='CB-Bold' style='background: url(https://i.imgur.com/lyqhAM9.png);' title='Bold text'></div>").prependTo("div#toolbar");
    position: absolute;
+
$("#CB-Bold").click(function () {
    right: 0;
+
     wrapText("wpTextbox1", "<b>", "</b>");
     margin: 0;
+
});
}
+
  
div.vectorTabs {
+
// Remove auto correct from text boxes
    background: none;
+
    padding: 0;
+
    height: initial;
+
}
+
  
div.vectorTabs ul {
+
$("textarea#wpTextbox1, input#searchInput, input#database_input").attr("spellcheck", "false");
    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 {
+
// Table Highlight
     line-height: 20px;
+
$('.highlight tr').mouseover(function () {
    padding: 10px;
+
     $(this).addClass('highlight-hover'); //Add Hover Class to toggle css
    font-size: 13px;
+
})
     height: initial;
+
$('.highlight tr').mouseout(function () {
    border-bottom: 2px solid transparent;
+
     $(this).removeClass('highlight-hover'); //remove the class when not on hover of .highlight tr
}
+
})
  
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 {
+
// ***************************** Indices *****************************
    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 {
+
$.each($("div.timestamp"), function () {
    background: #transparent !important;
+
     var str = $(this).html();
}
+
     var year = str.substr(0, 4);
 
+
     var month = str.substr(4, 2);
div.vectorMenu div.menu {
+
     if (month == 01) {
    top: 40px;
+
        month = " January "
    left: initial;
+
     } else if (month == 02) {
    right: 0;
+
        month = " February "
    border: none;
+
     } else if (month == 03) {
    background: #c7b07c;
+
        month = " March "
}
+
     } else if (month == 04) {
 
+
        month = " April "
div.vectorMenu div.menu li {
+
     } else if (month == 05) {
    line-height: 20px;
+
        month = " May "
}
+
     } else if (month == 06) {
 
+
        month = " June "
div.vectorMenu li:first-child a {
+
     } else if (month == 07) {
    border-top: 1px solid #151A1E;
+
        month = " July "
}
+
     } else if (month == 08) {
 
+
        month = " August "
div.vectorMenu li a {
+
     } else if (month == 09) {
    padding: 10px 15px;
+
        month = " September "
    font-size: 12px;
+
     } else if (month == 10) {
    border-bottom: 1px solid #151A1E;
+
        month = " October "
}
+
     } else if (month == 11) {
 
+
        month = " November "
div.vectorMenu li a:hover {
+
     } else if (month == 12) {
    background: rgba(255, 255, 255, 0.1);
+
         month = " December "
}
+
 
+
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 {
+
    border-radius: 3px;
+
    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,
+
a,
+
b,
+
strong,
+
img,
+
hr,
+
pre,
+
button,
+
input,
+
textarea,
+
optgroup,
+
ul,
+
li,
+
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
+
}
+
 
+
/* 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::after {}
+
 
+
.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
+
}
+
 
+
/* 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-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: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
+
 
     }
 
     }
 
+
     var day = str.substr(6, 2);
     .mobile-menu span {
+
    $(this).html("Last modified on " + day + month + year + ".");
        display: block;
+
    if (str == "") {
        position: absolute;
+
         $(this).html("This page is under construction.");
        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
+
 
     }
 
     }
 +
});
 +
$.each($("div.link > a"), function () {
 +
    var link = $(this).html().split("/");
 +
    $(this).html(link[link.length - 1].replace(/\_/g, " "));
 +
});
  
    .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 {
+
// ***************************** Databases *****************************
        position: relative
+
    }
+
  
     .header-bottm .main-nav {
+
function commaSeparateNumber(val) {
         opacity: 0
+
     while (/(\d+)(\d{3})/.test(val.toString())) {
     }
+
         val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');
 +
     };
 +
    return val;
 +
};
  
    .header-bottm .main-nav {
+
$("button#database_button").click(function () {
        position: absolute;
+
    searchDatabase();
        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 {
+
// ***************************** Close *****************************
        padding-bottom: 30px;
+
        max-width: 70%;
+
        margin: auto
+
    }
+
  
    .container {
 
        max-width: 96%
 
    }
 
  
   
 
}
 
  
/* END MOBILE */
 
  
/* END NEW DESIGN CSS */
 
  
  
Line 1,202: Line 263:
  
  
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 {
+
// Remove the loader
    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;
+
}
+
 
+
ul#index li div.img img {
+
    max-height: 40px;
+
    max-width: 40px;
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/* 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 !important;
+
    color: #afafaf;
+
    line-height: 20px;
+
    font-weight: normal !important;
+
    margin: 30px 0 !important;
+
    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;
+
}
+
 
+
 
+
/* 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;
+
}
+
 
+
.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;
+
}
+
 
+
/*HOMEPAGE*/
+
.tile-half {
+
    flex: 1;
+
    margin-right: 9px;
+
}
+
 
+
.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: #ECE6D8;
+
    padding: 12px 10px;
+
    border-bottom-right-radius: 5px;
+
    border-bottom-left-radius: 5px;
+
    align-self: end;
+
    min-height: 5vw;
+
}
+
 
+
.tile-date {
+
    margin: 0 !important;
+
    font-size: 0.8em !important;
+
    color: #999 !important !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;
+
}
+
 
+
/* 28-12-2016 */
+
 
+
 
+
 
+
 
+
/* 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;
+
    }
+
}
+
 
+
@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 */
+
setTimeout(function () {
 +
    $("div#mw-head-base").fadeOut(500);
 +
    $("div#mw-page-base").fadeOut(500);
 +
}, 600);

Latest revision as of 21:01, 17 September 2021

// ***************************** Structure *****************************

/* Load fontawesome and bootstrap css dependencies */
mw.loader.load('https://use.fontawesome.com/releases/v5.8.1/css/all.css', 'text/css');
mw.loader.load('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', 'text/css');


// Remove unnecessary elements

$("div#p-tb").remove();
$("img").removeAttr("height");

// Wrap the content

$("div#content, div#mw-navigation").wrapAll("<div id='main-wrapper'><div class='container'></div></div>");

// Insert the header

$("<header> <div class='entire-header'> <div class='header-top'> <div class='container dFlx'> <ul class='play-link'> <li><a itemprop='url' href='https://www.facebook.com/Grinderscape.org'><i class='fab fa-facebook-square'></i></a></li><li><a itemprop='url' href='https://www.youtube.com/user/dokenfilm/feed'><i class='fab fa-youtube'></i></a></li><li><a itemprop='url' href='https://discord.gg/b46xx5u'><i class='fab fa-discord'></i></a></li></ul> <div class='logo'> <a itemprop='url' href='https://www.grinderscape.org/home'><img src='https://www.grinderscape.org/images/grinderscape-logo.png' alt='GrinderScape'></a> </div><div class='mobile-logo'> <a itemprop='url' href='https://www.grinderscape.org/home'><img src='https://www.grinderscape.org/images/grinderscape-logo-mobile.png' alt='GrinderScape'></a> </div><ul class='login'> <li id='n-Log-in'><a href='/Special:UserLogin' data-toggle='modal' data-target='#myModal-user'>Wiki Login</a></li></ul> </div></div><div class='header-bottm'> <div class='container'> <div class='mobile-menu'> <span></span> <span></span> <span></span> </div><ul class='main-nav'> <li><a itemprop='url' href='https://www.grinderscape.org'>HOME</a></li><li><a itemprop='url' href='http://forum.grinderscape.org/'>FORUM</a></li><li><a itemprop='url' href='https://www.grinderscape.org/store'>STORE</a></li><li><a itemprop='url' href='https://www.grinderscape.org/download'>DOWNLOAD</a></li><li><a href='javascript:void(0);' data-toggle='modal' data-target='#myModal-vote'>VOTE</a></li><li><a itemprop='url' href='https://www.grinderscape.org/highscores'>HIGHSCORES</a></li><li class='acitve'><a itemprop='url' href='http://wiki.grinderscape.org/'>WIKI</a></li><li><a itemprop='url' href='https://www.grinderscape.org/contact'>CONTACT</a></li></ul> </div></div></div></header>").insertBefore("div#main-wrapper");


// Organize the elements

// if(window.matchMedia("(max-width: 1024px)").matches){
//     // The viewport is less than 1024 pixels wide
//     console.log("This is a mobile device.");
//     $("div#mw-navigation").appendTo(".main-nav");
// } else{
//     // The viewport is at least 1024 pixels wide
//     console.log("This is a tablet or desktop.");
//     $("div#mw-navigation").insertBefore(".login"); 
// }

$("div#content").wrap("<section class='main-content-cstm'></section>");
$("div#mw-navigation").insertBefore(".main-content-cstm");
$("div#content").wrap("<div id='content-sidebar-wrap'></div>");
$("div#mw-panel").insertAfter("div#content");
$("div#content").wrap("<div id='content-wrap'></div>");

$("<div id='navigation'></div>").prependTo("div#content");
$("div#left-navigation").appendTo("div#navigation");
$("div#right-navigation").appendTo("div#navigation");

$("<div id='pageInfo'></div>").insertBefore("div#content");
$("div#content").wrap("<div id='content-navigation-wrap'></div>");
$("ul#footer-info").insertAfter("div#content");

// Insert the footer

$("<footer> <div class='footer-top dFlx'> <div class='cw-30'> <h5>ABOUT</h5> <p>GrinderScape has been a dedicated server since 2008, with helpful staff and dedicated members. If you need help in how to start, you can see the Wiki. If you wish to get involved with the community as a whole, join our Forums, for the latest threads and game suggestions.</p></div><div class='cw-70 dFlx'> <div class='cw-33'> <h5>GENERAL</h5> <ul> <li><a itemprop='url' href='https://www.grinderscape.org/download'>Play Now</a></li><li><a itemprop='url' href='https://www.grinderscape.org/contact' target='_blank'>Contact Us</a></li><li><a itemprop='url' href='https://www.grinderscape.org/tos' target='_blank'>Terms of Services</a></li><li><a itemprop='url' href='https://www.grinderscape.org/user/manage' target='_blank'>Account Management</a></li><li><a itemprop='url' href='https://www.grinderscape.org/faq' target='_blank'>Frequently Asked Questions</a></li></ul> </div><div class='cw-33'> <h5>GUIDES</h5> <ul> <li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/topic/132-in-game-drops-guide-mystery-boxes/' target='_blank'>NPC Drops Guide</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Skill_guides/Slayer' target='_blank'>Slayer Guide</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/topic/132-in-game-drops-guide-mystery-boxes/' target='_blank'>Drops Guide</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Monster_hunting_guides' target='_blank'>Monster Hunting Guides</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/General_guides/Commands' target='_blank'>In-Game Commands </a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/Skill_guides' target='_blank'>Skilling Guides</a></li><li><a itemprop='url' href='https://wiki.grinderscape.org/Main_page/Guides/General_guides' target='_blank'>General Guides</a></li></ul> </div><div class='cw-33'> <h5>FORUM THREADS</h5> <ul> <li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/2-news-announcements/' target='_blank'>News &amp; Announcements</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/39-report-in-game-bugs/' target='_blank'>Report In-Game Bugs</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/11-submit-appeal/' target='_blank'>Submit In-Game Appeal</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/59-recover-a-lost-account/' target='_blank'>Recover a Lost Account</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/10-submit-player-report/' target='_blank'>Submit Player Report</a></li><li><a itemprop='url' href='https://forum.grinderscape.org/index.php?/forum/5-rules/' target='_blank'>In-Game Rules</a></li></ul> </div></div></div><div class='footer-btm dFlx'> <div class='footer-logo'> <a itemprop='url' href='https://www.grinderscape.org'><img src='https://www.grinderscape.org/images/footer-logo-trans.png' alt='GrinderScape'></a> </div><p>GrinderScape is not affiliated with Jagex or Runescape in any way.</p></div></footer>").insertAfter(".main-content-cstm");

// Mobile Navigation Click Function
$(".mobile-menu").click(function () {
    $(this).toggleClass('open');
    $(".main-nav").toggleClass("side-open");
});

// Set up the page footer info

if ($("li#footer-info-credits").length > 0) {
    $("li#footer-info-credits").html($("li#footer-info-credits").html().replace(/\[/g, "<span style='position: absolute; right: 0;'>").replace(/\]/g, "</span>").replace(/\{/g, "<p id='contentFooter' style='position: relative;'>").replace(/\}/g, "</p>"));
    $("p#contentFooter").insertBefore("li#footer-info-credits");
    $("li#footer-info-credits").remove();
}

// Set up the page title and breadcrumb

var title = $("h1#firstHeading").html().split('/');
$("h1#firstHeading").html(title[title.length - 1]);
$("h1#firstHeading").appendTo("div#pageInfo");

$("span.subpages").appendTo("div#pageInfo");
$("span.subpages").html($("span.subpages").children());
$("<span>" + title[title.length - 1] + "</span>").appendTo("span.subpages");
$("<span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>").insertAfter("span.subpages > a");

// Set up the page title

document.title = title[title.length - 1] + " - GrinderScape Wiki";

// Hide mw-panel on HP
if (window.location.href == 'https://wiki.grinderscape.org/Main_page/New' || window.location.href == 'https://wiki.grinderscape.org/Main_page') {
    $('#mw-panel').remove();
}

// Remove href from selected tabs

$.each($("div.vectorTabs li.selected"), function () {
    $(this).find("a").removeAttr("href");
});

// Remove title from links

$("a").removeAttr("title");

// Set up the search box

$("div#p-search").insertBefore(".main-content-cstm");
$("div#p-search").wrap("<section class='main-top-cstm'></section>")
$("input#searchInput").val("Search...").removeAttr("placeholder").attr("onfocus", "if (this.value == 'Search...') {this.value = '';}").attr("onblur", "if (this.value == '') {this.value = 'Search...';}");

// Set up the announcement

$("div#siteNotice").insertBefore("div#p-search");
$("<div id='noticeTitle'>Welcome to the GrinderScape Wiki!</div>").prependTo("div#siteNotice");


// Show/Hide Plugin
$('.p_hide').hide(); // Hides any element with p_hide class
$('.p_toggle').on('click', function(){
    var $this = $(this);
    var toggleChild = $this.find('.p_toggle_content');
    var toggleIcon = $this.find('.p_toggle_icon')

    console.log(toggleIcon);

    toggleChild.slideToggle("fast");
    toggleIcon.toggleClass("fa-plus fa-minus");

    // if (toggleIcon == '.fa-plus'){
    //     toggleIcon.toggleClass("fa-plus", "fa-minus");
    // } else {
    //     toggleIcon.toggleClass("fa-minus", "fa-plus");
    // }
});


// Set up the edit box

function wrapText(elementID, openTag, closeTag) {
    var textArea = $("#" + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$("input#wpWatchthis").prop("checked", false);

$("<div class='customButton' id='CB-Nowiki' style='background: url(https://i.imgur.com/Fx2AsCt.png);' title='Ignore wiki formatting'></div>").appendTo("div#toolbar");
$("#CB-Nowiki").click(function () {
    wrapText("wpTextbox1", "<nowiki>", "</nowiki>");
});

$("<div class='customButton' id='CB-Heading2' style='background: url(https://i.imgur.com/8uajyYO.png);' title='Level 2 heading'></div>").prependTo("div#toolbar");
$("#CB-Heading2").click(function () {
    wrapText("wpTextbox1", "<h2>", "</h2>");
});

$("<div class='customButton' id='CB-Heading1' style='background: url(https://i.imgur.com/jKOOZnF.png);' title='Level 1 heading'></div>").prependTo("div#toolbar");
$("#CB-Heading1").click(function () {
    wrapText("wpTextbox1", "<h1>", "</h1>");
});

$("<div class='customButton' id='CB-Italic' style='background: url(https://i.imgur.com/zdPfv0X.png);' title='Italic text'></div>").prependTo("div#toolbar");
$("#CB-Italic").click(function () {
    wrapText("wpTextbox1", "<i>", "</i>");
});

$("<div class='customButton' id='CB-Bold' style='background: url(https://i.imgur.com/lyqhAM9.png);' title='Bold text'></div>").prependTo("div#toolbar");
$("#CB-Bold").click(function () {
    wrapText("wpTextbox1", "<b>", "</b>");
});

// Remove auto correct from text boxes

$("textarea#wpTextbox1, input#searchInput, input#database_input").attr("spellcheck", "false");




// Table Highlight
$('.highlight tr').mouseover(function () {
    $(this).addClass('highlight-hover'); //Add Hover Class to toggle css
})
$('.highlight tr').mouseout(function () {
    $(this).removeClass('highlight-hover'); //remove the class when not on hover of .highlight tr
})




// ***************************** Indices *****************************

$.each($("div.timestamp"), function () {
    var str = $(this).html();
    var year = str.substr(0, 4);
    var month = str.substr(4, 2);
    if (month == 01) {
        month = " January "
    } else if (month == 02) {
        month = " February "
    } else if (month == 03) {
        month = " March "
    } else if (month == 04) {
        month = " April "
    } else if (month == 05) {
        month = " May "
    } else if (month == 06) {
        month = " June "
    } else if (month == 07) {
        month = " July "
    } else if (month == 08) {
        month = " August "
    } else if (month == 09) {
        month = " September "
    } else if (month == 10) {
        month = " October "
    } else if (month == 11) {
        month = " November "
    } else if (month == 12) {
        month = " December "
    }
    var day = str.substr(6, 2);
    $(this).html("Last modified on " + day + month + year + ".");
    if (str == "") {
        $(this).html("This page is under construction.");
    }
});
$.each($("div.link > a"), function () {
    var link = $(this).html().split("/");
    $(this).html(link[link.length - 1].replace(/\_/g, " "));
});









// ***************************** Databases *****************************

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');
    };
    return val;
};

$("button#database_button").click(function () {
    searchDatabase();
});








// ***************************** Close *****************************










// Remove the loader

setTimeout(function () {
    $("div#mw-head-base").fadeOut(500);
    $("div#mw-page-base").fadeOut(500);
}, 600);