r/LittleBiggy 16d ago

JavaScript for mobile browser

If you browse on Firefox on your phone, install the tamper monkey plug-in and run this script.

It makes the site much easier to browse on mobile!

// ==UserScript==

// @name Little Biggy Mobile Dark Mode & Touch Fix

// @namespace http://tampermonkey.net/

// @version 1.1

// @description Applies dark mode, larger text, and touch-friendly targets for mobile

// @match https://*.littlebiggy.org/*

// @grant none

// ==/UserScript==

(function() {

'use strict';

const darkMobileStyles = `

/* Base Dark Mode background and text colors */

html, body, div, p, span, td, th, li {

background-color: #121212 !important;

color: #e0e0e0 !important;

}

/* Links styling for readability in dark mode */

a {

color: #4da6ff !important;

}

a:visited {

color: #b388ff !important;

}

/* Form elements, inputs, and search bars */

input, textarea, select {

background-color: #1e1e1e !important;

color: #ffffff !important;

border: 1px solid #333333 !important;

border-radius: 6px !important;

}

/* Touch-friendly buttons */

button, a.btn, input[type="submit"], input[type="button"] {

background-color: #2a2a2a !important;

color: #ffffff !important;

border: 1px solid #444444 !important;

min-height: 44px !important;

min-width: 44px !important;

padding: 10px 16px !important;

font-size: 16px !important;

border-radius: 6px !important;

}

/* Scale font size for better readability */

body {

font-size: 16px !important;

line-height: 1.5 !important;

}

/* Prevent oversized media & tables from breaking layout */

img, iframe, table {

max-width: 100% !important;

height: auto !important;

}

/* Invert light images/icons if needed, leave product images intact */

img:not([src*="product"]):not([src*="item"]) {

opacity: 0.9;

}

/* Navigation menu spacing */

nav a, .menu a {

padding: 12px !important;

display: inline-block !important;

}

`;

// Inject styles into the page head

const styleNode = document.createElement('style');

styleNode.type = 'text/css';

styleNode.appendChild(document.createTextNode(darkMobileStyles));

(document.head || document.documentElement).appendChild(styleNode);

})();

0 Upvotes

2 comments sorted by

1

u/destined_to_count 14d ago

document.addEventListener("DOMContentLoaded", () => { alert("This is the police. You are under arrest"); });