SoFurry mobile helper

// ==UserScript==
// @name         SoFurry Mobile Chat Helper
// @namespace    http://tampermonkey.net/
// @version      2024-05-20
// @description  try to take over the world!
// @author       You
// @match        https://www.sofurry.com/chat
// @icon         href="https://www.sofurryfiles.com/static/icons/touch-icon-iphone4.png"
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    setTimeout(()=>{
        var _is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);

        if (_is_mobile) {
            let _meta = document.createElement("meta")
            _meta.setAttribute("name", "viewport")
            _meta.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
            document.head.appendChild(_meta)

            _meta = document.createElement("script")
            _meta.setAttribute("src", "https://kit.fontawesome.com/47e7557a3b.js")
            _meta.setAttribute("crossorigin", "anonymous")
            document.head.appendChild(_meta)

            document.querySelector(".topbar-nav .logo").nextSibling.remove()

            let update_nav_button = function(_selector, _class, _index = 0) {
                document.querySelectorAll(_selector)[_index].innerText = ""
                document.querySelectorAll(_selector)[_index].setAttribute("class", _class)
                document.querySelectorAll(_selector)[_index].setAttribute("style", "padding: 8px 4px; font-size: 24px !important")
            }
            update_nav_button(".topbar-nav a[href=\"/browse/all\"]", "fas fa-search")
            update_nav_button(".topbar-nav a[href=\"/market\"]", "fas fa-store")
            update_nav_button(".topbar-nav a[href=\"/groups\"]", "fas fa-users")
            update_nav_button(".topbar-nav a[href=\"/chat\"]", "fas fa-comments")
            update_nav_button(".topbar-nav a[href=\"/forum\"]", "fas fa-newspaper")

            document.querySelectorAll(".sfbutton .button")[0].innerHTML = "+"
            document.querySelectorAll(".sfbutton .button")[0].setAttribute("style", "padding: 8px 4px; font-size: 24px !important")
            document.querySelectorAll(".sfbutton .button")[1].innerHTML = "-"
            document.querySelectorAll(".sfbutton .button")[1].setAttribute("style", "padding: 8px 4px; font-size: 24px !important")
            document.querySelectorAll(".sfbutton .button")[2].innerHTML = "<span class=\"fa-solid fa-list\"></span>"
            document.querySelectorAll(".sfbutton .button")[2].setAttribute("style", "padding: 4px 6px !important; font-size: 19px !important;")
            document.querySelectorAll(".sfbutton .button")[3].innerHTML = "<span class=\"fa-solid fa-eraser\"></span>"
            document.querySelectorAll(".sfbutton .button")[3].setAttribute("style", "padding: 4px 6px !important; font-size: 19px !important;")
            document.querySelectorAll(".sfbutton .button")[4].innerHTML = "RP character..."
            document.querySelectorAll(".sfbutton .button")[5].innerHTML = "<span class=\"fa-solid fa-palette\"></span>"
            document.querySelectorAll(".sfbutton .button")[5].setAttribute("style", "padding: 4px 6px !important; font-size: 19px !important;")
            document.querySelectorAll(".sfbutton .button")[5].parentNode.parentNode.parentNode.style.float ="none"
            document.querySelector("#sf-chat-messages-cont").style.width = "px"


            _meta = document.createElement("div")
            _meta.setAttribute("class", "sfbutton")
            _meta.innerHTML = `<span id="toggle_users"></span>`
            document.querySelector(".sf-align-left").appendChild(_meta)

            _meta = document.createElement("a")
            _meta.setAttribute("class", "button buttonsmall")
            _meta.href = "#"
            _meta.setAttribute("style", "padding: 4px 6px !important; font-size: 19px !important;")
            _meta.innerHTML = `<span class="fa-solid fa-user" aria-hidden="true"></span>`
            _meta.onclick = function() { document.querySelector("#sf-userlist-cont").style.left = document.querySelector("#sf-userlist-cont").style.left == "0px" ? "100vw" : "0px"}
            document.querySelector("#toggle_users").appendChild(_meta)

            _meta = document.createElement("style")
            _meta.innerHTML = `
            .fa, .far, .fas, .sfbutton .button span{
                font-family: "Font Awesome 5 Free" !important;
            }
            #sf-chat-roomcontrols div {
                display: flex;  margin-right: 4px;
            }
            #sf-chat-right {
                width: 100px;
            }
            #sf-userlist-cont {
                width: 100%;
                background-color: #000e;
                z-index: 9699;
                position: fixed;
            }
            #sf-chat-messages td {
                max-width: none;
            }
            body, div.sf-main {
                min-width:auto;
            }
            .topbar-nav input[type="text"][value=""] {
                width: 4em
            }
            #sf-chat-messages-cont {
                width: 94vw;
            }
            .sf-chat-timestamp {
                font-size: 8px !important;
            }
            #sf-chat-input {
                width: 80% !important;
                max-width: 80% !important;
                min-width: 80% !important;
            }
            #sf-chat-submit {
                float: unset;
                height: 52px;
                text-align: center;
                padding: 0;
                width: 48px;
                margin-top: -2px;
            }
            #sf-chat-center {
                padding-left: 0;
            }
            `

            document.head.appendChild(_meta)

       }
    }, 3000)
    // Your code here...
})();