From a46d1f335e742a42d6276043e31bfe35febad9fa Mon Sep 17 00:00:00 2001
From: Danielle <29378233+DanielleMiu@users.noreply.github.com>
Date: Mon, 1 May 2023 00:27:19 -0400
Subject: [PATCH] v0.2.3 Long-Lived Branch (#38)

* bump manifest versions to 0.2.3

* revert firefox manifest to v2

* add block interval timeout config and slider

* update makefile zip commands to not be single line and more readable

* fix slider thumb on chrome

* stop processing queue when the user is logged out

* add a logstr to the start of every log
---
 .gitignore            |   2 +
 firefox-manifest.json |  28 +++++-------
 makefile              |  28 +++++++++++-
 manifest.json         |   2 +-
 options.js            |  50 +++++++++++++-------
 popup.html            |  15 +++++-
 script.js             |  32 ++++++-------
 service_worker.js     |  13 +++++-
 shared.js             | 104 +++++++++++++++++++++++++++++-------------
 style.css             |  61 ++++++++++++++++++++++---
 10 files changed, 239 insertions(+), 96 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ff0e62b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# built package files
+*.zip
diff --git a/firefox-manifest.json b/firefox-manifest.json
index dba490f..1efac3e 100644
--- a/firefox-manifest.json
+++ b/firefox-manifest.json
@@ -1,27 +1,23 @@
 {
-	"manifest_version": 3,
+	"manifest_version": 2,
 	"name": "Blue Blocker",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"description": "Blocks all Twitter Blue verified users on twitter.com",
 	"icons": {
 		"128": "assets/icon-128.png"
 	},
 	"web_accessible_resources": [
-		{
-			"resources": [
-				"script.js",
-				"shared.js",
-				"inject.js"
-			],
-			"matches": [
-				"*://*.twitter.com/*",
-				"*://twitter.com/*"
-			]
-		}
+		"script.js",
+		"shared.js",
+		"inject.js"
 	],
-	"action": {
-		"default_popup": "popup.html",
-		"default_icon": "assets/icon.png"
+	"browser_action": {
+		"browser_style": true,
+		"default_icon": {
+			"128": "assets/icon-128.png"
+		},
+		"default_title": "Blue Blocker",
+		"default_popup": "popup.html"
 	},
 	"permissions": [
 		"storage"
diff --git a/makefile b/makefile
index 903adc8..536ea79 100644
--- a/makefile
+++ b/makefile
@@ -9,7 +9,19 @@ firefox:
 
 	mv manifest.json chrome-manifest.json
 	mv firefox-manifest.json manifest.json
-	zip "blue-blocker-firefox-${VERSION}.zip" manifest.json LICENSE readme.md popup.html style.css inject.js main.js options.js script.js service_worker.js shared.js assets/*
+	zip "blue-blocker-firefox-${VERSION}.zip" \
+		manifest.json \
+		LICENSE \
+		readme.md \
+		popup.html \
+		style.css \
+		inject.js \
+		main.js \
+		options.js \
+		script.js \
+		service_worker.js \
+		shared.js \
+		assets/*
 	mv manifest.json firefox-manifest.json
 	mv chrome-manifest.json manifest.json
 
@@ -18,4 +30,16 @@ chrome:
 	# ifneq (,$(wildcard blue-blocker-chrome-$(VERSION).zip))
 	# 	rm "blue-blocker-chrome-${VERSION}.zip"
 	# endif
-	zip "blue-blocker-chrome-${VERSION}.zip" manifest.json LICENSE readme.md popup.html style.css inject.js main.js options.js script.js service_worker.js shared.js assets/*
+	zip "blue-blocker-chrome-${VERSION}.zip" \
+		manifest.json \
+		LICENSE \
+		readme.md \
+		popup.html \
+		style.css \
+		inject.js \
+		main.js \
+		options.js \
+		script.js \
+		service_worker.js \
+		shared.js \
+		assets/*
diff --git a/manifest.json b/manifest.json
index f1d5447..ce6606c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Blue Blocker",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"description": "Blocks all Twitter Blue verified users on twitter.com",
 	"icons": {
 		"128": "assets/icon-128.png"
diff --git a/options.js b/options.js
index e6d38af..0fd95f5 100644
--- a/options.js
+++ b/options.js
@@ -10,6 +10,8 @@ document.addEventListener("DOMContentLoaded", () => {
 		document.getElementById("skip-affiliated").checked = items.skipAffiliated;
 		document.getElementById("skip-1mplus").checked = items.skip1Mplus;
 		document.getElementById("block-nft-avatars").checked = items.blockNftAvatars;
+		document.getElementById("block-interval").value = items.blockInterval;
+		document.getElementById("block-interval-value").innerText = items.blockInterval.toString() + "s";
 	});
 });
 
@@ -19,18 +21,18 @@ api.storage.local.get({ BlockCounter: 0, BlockQueue: [] }).then(items => {
 	document.getElementById("blocked-user-queue-length").innerText = commafy(items.BlockQueue.length);
 });
 api.storage.local.onChanged.addListener(items => {
-	if (items.hasOwnProperty('BlockCounter')) {
+	if (items.hasOwnProperty("BlockCounter")) {
 		document.getElementById("blocked-users-count").innerText = commafy(items.BlockCounter.newValue);
 	}
-	if (items.hasOwnProperty('BlockQueue')) {
+	if (items.hasOwnProperty("BlockQueue")) {
 		document.getElementById("blocked-user-queue-length").innerText = commafy(items.BlockQueue.newValue.length);
 	}
 	// if we want to add other values, add them here
 });
 
-document.getElementById("mute-instead-of-block").addEventListener("input", () => {
+document.getElementById("mute-instead-of-block").addEventListener("input", e => {
 	api.storage.sync.set({
-		mute: document.getElementById("mute-instead-of-block").checked,
+		mute: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("mute-instead-of-block-status");
@@ -39,9 +41,9 @@ document.getElementById("mute-instead-of-block").addEventListener("input", () =>
 	});
 });
 
-document.getElementById("block-following").addEventListener("input", () => {
+document.getElementById("block-following").addEventListener("input", e => {
 	api.storage.sync.set({
-		blockFollowing: document.getElementById("block-following").checked,
+		blockFollowing: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("block-following-status");
@@ -50,9 +52,9 @@ document.getElementById("block-following").addEventListener("input", () => {
 	});
 });
 
-document.getElementById("block-followers").addEventListener("input", () => {
+document.getElementById("block-followers").addEventListener("input", e => {
 	api.storage.sync.set({
-		blockFollowers: document.getElementById("block-followers").checked,
+		blockFollowers: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("block-followers-status");
@@ -61,9 +63,9 @@ document.getElementById("block-followers").addEventListener("input", () => {
 	});
 });
 
-document.getElementById("skip-verified").addEventListener("input", () => {
+document.getElementById("skip-verified").addEventListener("input", e => {
 	api.storage.sync.set({
-		skipVerified: document.getElementById("skip-verified").checked,
+		skipVerified: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("skip-verified-status");
@@ -72,9 +74,9 @@ document.getElementById("skip-verified").addEventListener("input", () => {
 	});
 });
 
-document.getElementById("skip-affiliated").addEventListener("input", () => {
+document.getElementById("skip-affiliated").addEventListener("input", e => {
 	api.storage.sync.set({
-		skipAffiliated: document.getElementById("skip-affiliated").checked,
+		skipAffiliated: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("skip-affiliated-status");
@@ -83,9 +85,9 @@ document.getElementById("skip-affiliated").addEventListener("input", () => {
 	});
 });
 
-document.getElementById("skip-1mplus").addEventListener("input", () => {
+document.getElementById("skip-1mplus").addEventListener("input", e => {
 	api.storage.sync.set({
-		skip1Mplus: document.getElementById("skip-1mplus").checked,
+		skip1Mplus: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("skip-1mplus-status");
@@ -94,9 +96,9 @@ document.getElementById("skip-1mplus").addEventListener("input", () => {
 	});
 });
 
-document.getElementById("block-nft-avatars").addEventListener("input", () => {
+document.getElementById("block-nft-avatars").addEventListener("input", e => {
 	api.storage.sync.set({
-		blockNftAvatars: document.getElementById("block-nft-avatars").checked,
+		blockNftAvatars: e.target.checked,
 	}, () => {
 		// Update status to let user know options were saved.
 		const status = document.getElementById("block-nft-avatars-status");
@@ -104,3 +106,19 @@ document.getElementById("block-nft-avatars").addEventListener("input", () => {
 		setTimeout(() => status.textContent = null, 1000);
 	});
 });
+
+const blockIntervalValueElement = document.getElementById("block-interval-value");
+document.getElementById("block-interval").addEventListener("input", e => {
+	blockIntervalValueElement.innerText = e.target.value.toString() + "s";
+});
+
+document.getElementById("block-interval").addEventListener("change", e => {
+	api.storage.sync.set({
+		blockInterval: parseInt(e.target.value),
+	}, () => {
+		// Update status to let user know options were saved.
+		const status = document.getElementById("block-interval-status");
+		status.textContent = "saved";
+		setTimeout(() => status.textContent = null, 1000);
+	});
+});
diff --git a/popup.html b/popup.html
index d147fe6..254836e 100644
--- a/popup.html
+++ b/popup.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
 	<head>
+		<meta charset='utf-8'/>
 		<title>Blue Blocker</title>
 		<link href="./style.css" rel="stylesheet">
 	</head>
@@ -67,7 +68,7 @@ <h2><img src="./assets/icon.png" alt="🅱️">lue Blocker</h2>
 			</label>
 			<span id="skip-1mplus-status"></span>
 		</div>
-		<div class="last option">
+		<div class="option">
 			<input type="checkbox" id="block-nft-avatars">
 			<label ref="label" for="block-nft-avatars" >
 				<div class="checkmark">
@@ -77,6 +78,16 @@ <h2><img src="./assets/icon.png" alt="🅱️">lue Blocker</h2>
 			</label>
 			<span id="block-nft-avatars-status"></span>
 		</div>
+		<div class="last">
+			<div class="last option">
+				<p>block interval</p>
+				<span id="block-interval-status"></span>
+			</div>
+			<div class="slider">
+				<input type="range" min="5" max="60" value="5" id="block-interval">
+				<span id="block-interval-value"></span>
+			</div>
+		</div>
 	</body>
 	<script src="options.js" type="module"></script>
 </html>
diff --git a/script.js b/script.js
index 903cd8e..dd65c5e 100644
--- a/script.js
+++ b/script.js
@@ -1,23 +1,17 @@
-import { api, ClearCache, DefaultOptions, SetOptions, HandleInstructionsResponse, HandleHomeTimeline } from './shared.js';
+import { logstr, ClearCache, HandleInstructionsResponse, HandleHomeTimeline } from './shared.js';
 
 document.addEventListener("blue-blocker-event", function (e) {
 	ClearCache();
-
-	// retrieve option
-	api.storage.sync.get(DefaultOptions, items => {
-		SetOptions(items);
-		const body = JSON.parse(e.detail.body);
-
-		switch (e.detail.parsedUrl[1]) {
-			case "HomeLatestTimeline":
-			case "HomeTimeline":
-			case "UserTweets":
-			case "TweetDetail":
-				return HandleInstructionsResponse(e, body);
-			case "timeline/home.json":
-				return HandleHomeTimeline(e, body);
-			default:
-				console.error("found an unexpected url that we don't know how to handle:", e.detail.url);
-		}
-	});
+	const body = JSON.parse(e.detail.body);
+	switch (e.detail.parsedUrl[1]) {
+		case "HomeLatestTimeline":
+		case "HomeTimeline":
+		case "UserTweets":
+		case "TweetDetail":
+			return HandleInstructionsResponse(e, body);
+		case "timeline/home.json":
+			return HandleHomeTimeline(e, body);
+		default:
+			console.error(logstr, "found an unexpected url that we don't know how to handle:", e.detail.url);
+	}
 });
diff --git a/service_worker.js b/service_worker.js
index 4e16ac2..8482042 100644
--- a/service_worker.js
+++ b/service_worker.js
@@ -1,7 +1,16 @@
 // we can't import things from shared, so re-initialize the api
-const api = chrome || browser;
+let _api = null;
+try {
+	_api = browser;
+	// manifest v2 has the action api stored in browserAction, so manually assign it to action
+	_api.action = browser.browserAction;
+}
+catch (ReferenceError) {
+	_api = chrome;
+}
+const api = _api;
 
-export function abbreviate(value) {
+function abbreviate(value) {
 	if (value >= 1000000000)
 	{ return `${Math.round(value / 100000000) / 10}B`; }
 	if (value >= 1000000)
diff --git a/shared.js b/shared.js
index 4746c46..af98240 100644
--- a/shared.js
+++ b/shared.js
@@ -1,12 +1,19 @@
-export const api = chrome || browser;
+let _api = null;
+try {
+	_api = browser;
+	// manifest v2 has the action api stored in browserAction, so manually assign it to action
+	_api.action = browser.browserAction;
+}
+catch (ReferenceError) {
+	_api = chrome;
+}
+export const api = _api;
+export const logstr = "[Blue Blocker]";
 
 var s = document.createElement("script");
 s.src = api.runtime.getURL("inject.js");
 s.id = "injected-blue-block-xhr";
 s.type = "text/javascript";
-// s.onload = function() {
-// 	this.remove();
-// };
 (document.head || document.documentElement).appendChild(s);
 
 export const DefaultOptions = {
@@ -19,6 +26,7 @@ export const DefaultOptions = {
 	skip1Mplus: true,
 	blockNftAvatars: false,
 	mute: false,
+	blockInterval: 10,
 };
 
 // when parsing a timeline response body, these are the paths to navigate in the json to retrieve the "instructions" object
@@ -64,7 +72,6 @@ export const IgnoreTweetTypes = new Set([
 ]);
 export const Headers = [
 	"authorization",
-	"x-csrf-token",
 	"x-twitter-active-user",
 	"x-twitter-auth-type",
 	"x-twitter-client-language",
@@ -81,11 +88,14 @@ export function commafy(x)
 	return parts.join('.');
 }
 
-var options = { };
+var options = { ...DefaultOptions };
 export function SetOptions(items) {
 	options = items;
 }
 
+// retrieve settings immediately on startup
+api.storage.sync.get(DefaultOptions).then(SetOptions);
+
 const ReasonBlueVerified = 0;
 const ReasonNftAvatar = 1;
 
@@ -184,7 +194,7 @@ export class BlockCounter {
 const queue = new BlockQueue(api.storage.local);
 const blockCounter = new BlockCounter(api.storage.local);
 const BlockCache = new Set();
-let BlockInterval = null;
+let BlockTimeout = null;
 
 export function ClearCache() {
 	BlockCache.clear();
@@ -196,25 +206,30 @@ function QueueBlockUser(user, user_id, headers, reason) {
 	}
 	BlockCache.add(user_id);
 	queue.push({user, user_id, headers, reason});
-	console.log(`queued ${user.legacy.name} (@${user.legacy.screen_name}) for a block due to ${ReasonMap[reason]}.`);
+	console.log(logstr, `queued ${user.legacy.name} (@${user.legacy.screen_name}) for a block due to ${ReasonMap[reason]}.`);
 
-	if (BlockInterval === null) {
-		BlockInterval = setInterval(CheckBlockQueue, 5000);
+	if (BlockTimeout === null) {
+		BlockTimeout = setTimeout(CheckBlockQueue, options.blockInterval * 1000);
 	}
 }
 
 function CheckBlockQueue() {
 	queue.shift().then(item => {
 		if (item === undefined) {
-			clearInterval(BlockInterval);
-			BlockInterval = null;
+			clearTimeout(BlockTimeout);
+			BlockTimeout = null;
 			return;
 		}
-		const {user, user_id, headers, reason} = item;
-		BlockUser(user, user_id, headers, reason);
+		api.storage.sync.get(DefaultOptions).then(items => {
+			SetOptions(items);
+			BlockTimeout = setTimeout(CheckBlockQueue, options.blockInterval * 1000);
+			const {user, user_id, headers, reason} = item;
+			BlockUser(user, user_id, headers, reason);
+		});
 	});
 }
 
+const CsrfTokenRegex = /ct0=\s*(\w+);/;
 function BlockUser(user, user_id, headers, reason, attempt=1) {
 	const formdata = new FormData();
 	formdata.append("user_id", user_id);
@@ -222,18 +237,33 @@ function BlockUser(user, user_id, headers, reason, attempt=1) {
 	const ajax = new XMLHttpRequest();
 
 	ajax.addEventListener('load', event => {
-		blockCounter.increment();
-		console.log(`blocked ${user.legacy.name} (@${user.legacy.screen_name}) due to ${ReasonMap[reason]}.`);
-	}, false);
+		if (event.target.status === 403) {
+			// user has been logged out, we need to stop queue and re-add
+			clearTimeout(BlockTimeout);
+			BlockTimeout = null;
+			queue.push({user, user_id, headers, reason});
+			console.log(logstr, "user is logged out, queue consumer has been ceased.");
+			return;
+		}
+		else if (event.target.status >= 300) {
+			queue.push({user, user_id, headers, reason});
+			console.error(logstr, `failed to block ${user.legacy.name} (@${user.legacy.screen_name}):`, user);
+		}
+		else {
+			blockCounter.increment();
+			console.log(logstr, `blocked ${user.legacy.name} (@${user.legacy.screen_name}) due to ${ReasonMap[reason]}.`);
+		}
+	});
 	ajax.addEventListener('error', error => {
-		console.error('error:', error);
+		console.error(logstr, 'error:', error);
 
 		if (attempt < 3) {
 			BlockUser(user, user_id, headers, reason, attempt + 1);
 		} else {
-			console.error(`failed to block ${user.legacy.name} (@${user.legacy.screen_name}):`, user);
+			queue.push({user, user_id, headers, reason});
+			console.error(logstr, `failed to block ${user.legacy.name} (@${user.legacy.screen_name}):`, user);
 		}
-	}, false);
+	});
 
 	if (options.mute) {
 		ajax.open('POST', "https://twitter.com/i/api/1.1/mutes/users/create.json");
@@ -245,6 +275,16 @@ function BlockUser(user, user_id, headers, reason, attempt=1) {
 	for (const header of Headers) {
 		ajax.setRequestHeader(header, headers[header]);
 	}
+
+	// attempt to manually set the csrf token to the current active cookie
+	const csrf = CsrfTokenRegex.exec(document.cookie);
+	if (csrf) {
+		ajax.setRequestHeader("x-csrf-token", csrf[1]);
+	}
+	else {
+		// default to the request's csrf token
+		ajax.setRequestHeader("x-csrf-token", headers["x-csrf-token"]);
+	}
 	ajax.send(formdata);
 }
 
@@ -258,31 +298,31 @@ export function BlockBlueVerified(user, headers) {
 			// group for block-following option
 			!options.blockFollowing && (user.legacy.following || user.super_following)
 		) {
-			console.log(`did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because you follow them.`);
+			console.log(logstr, `did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because you follow them.`);
 		}
 		else if (
 			// group for block-followers option
 			!options.blockFollowers && user.legacy.followed_by
 		) {
-			console.log(`did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they follow you.`);
+			console.log(logstr, `did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they follow you.`);
 		}
 		else if (
 			// group for skip-verified option
 			options.skipVerified && (user.legacy.verified || user.legacy.verified_type)
 		) {
-			console.log(`did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they are verified through other means.`);
+			console.log(logstr, `did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they are verified through other means.`);
 		}
 		else if (
 			// verified via an affiliated organisation instead of blue
 			options.skipAffiliated && user.affiliates_highlighted_label.label
 		) {
-			console.log(`did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they are verified through an affiliated organisation.`);
+			console.log(logstr, `did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they are verified through an affiliated organisation.`);
 		}
 		else if (
 			// verified by follower count
 			options.skip1Mplus && user.legacy.followers_count > 1000000
 		) {
-			console.log(`did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they have over a million followers and Elon is an idiot.`);
+			console.log(logstr, `did not block Twitter Blue verified user ${user.legacy.name} (@${user.legacy.screen_name}) because they have over a million followers and Elon is an idiot.`);
 		}
 		else {
 			QueueBlockUser(user, String(user.rest_id), headers, ReasonBlueVerified);
@@ -293,13 +333,13 @@ export function BlockBlueVerified(user, headers) {
 			// group for block-following option
 			!options.blockFollowing && (user.legacy.following || user.super_following)
 		) {
-			console.log(`did not block user with NFT avatar ${user.legacy.name} (@${user.legacy.screen_name}) because you follow them.`);
+			console.log(logstr, `did not block user with NFT avatar ${user.legacy.name} (@${user.legacy.screen_name}) because you follow them.`);
 		}
 		else if (
 			// group for block-followers option
 			!options.blockFollowers && user.legacy.followed_by
 		) {
-			console.log(`did not block user with NFT avatar ${user.legacy.name} (@${user.legacy.screen_name}) because they follow you.`);
+			console.log(logstr, `did not block user with NFT avatar ${user.legacy.name} (@${user.legacy.screen_name}) because they follow you.`);
 		}
 		else {
 			QueueBlockUser(user, String(user.rest_id), headers, ReasonNftAvatar);
@@ -315,7 +355,7 @@ function HandleTweetObject(obj, headers) {
 		}
 	}
 	if (ptr.__typename !== "User") {
-		console.error("could not parse tweet", obj);
+		console.error(logstr, "could not parse tweet", obj);
 		return;
 	}
 	BlockBlueVerified(ptr, headers);
@@ -345,7 +385,7 @@ export function HandleInstructionsResponse(e, body) {
 		}
 	}
 	catch (e) {
-		console.error("failed to parse response body for instructions object", e, body);
+		console.error(logstr, "failed to parse response body for instructions object", e, body);
 		return;
 	}
 
@@ -360,7 +400,7 @@ export function HandleInstructionsResponse(e, body) {
 		}
 	}
 	if (tweets === undefined) {
-		console.error("response object does not contain an instruction to add entries", body);
+		console.error(logstr, "response object does not contain an instruction to add entries", body);
 		return;
 	}
 
@@ -379,7 +419,7 @@ export function HandleInstructionsResponse(e, body) {
 		// parse each tweet for the user object
 		switch (tweet?.content?.entryType) {
 			case null:
-				console.error("tweet structure does not match expectation", tweet);
+				console.error(logstr, "tweet structure does not match expectation", tweet);
 				break;
 
 			case "TimelineTimelineItem":
@@ -395,7 +435,7 @@ export function HandleInstructionsResponse(e, body) {
 
 			default:
 				if (!IgnoreTweetTypes.has(tweet.content.entryType)) {
-					console.error(`unexpected tweet type found: ${tweet.content.entryType}`, tweet);
+					console.error(logstr, `unexpected tweet type found: ${tweet.content.entryType}`, tweet);
 				}
 		}
 	}
diff --git a/style.css b/style.css
index 0fafc9d..fef2d44 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 html {
 	--transition: ease;
 	--fadetime: 0.15s;
-	--icolor: #1da1f2;
+	--interact: #1da1f2;
 	--bg0color: #000000;
 	--bg1color: #1e1f25;
 	--bg2color: #151416;
@@ -10,7 +10,7 @@ html {
 	--textcolor: #DDD;
 	--bordercolor: #2D333A;
 	--linecolor: var(--bordercolor);
-	--borderhover: var(--icolor);
+	--borderhover: var(--interact);
 	--subtle: #EEEEEE80;
 	--shadowcolor: #00000080;
 	--activeshadowcolor: #000000B3;
@@ -54,7 +54,7 @@ a, input, label, textarea {
 	transition: var(--transition) var(--fadetime);
 }
 
-p {
+.option p {
 	text-align: center;
 	margin: 0;
 }
@@ -69,7 +69,7 @@ p {
 	margin-bottom: 0;
 }
 
-input {
+.option input {
 	position: absolute;
 	display: none;
 	top: -100vh;
@@ -86,7 +86,7 @@ label {
 	padding-left: 0.29em;
 }
 label:hover, label:active, label:focus {
-	color: var(--icolor);
+	color: var(--interact);
 }
 
 label.border {
@@ -130,7 +130,7 @@ label div.checkmark div {
 }
 
 input:checked + label div.checkmark div, label.checked div.checkmark div {
-	border-color: var(--icolor);
+	border-color: var(--interact);
 	border-width: 0 0.1875em 0.1875em 0;
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);
@@ -144,3 +144,52 @@ input:checked + label div.checkmark div, label.checked div.checkmark div {
 	margin-top: 0;
 	margin-bottom: 2em;
 }
+
+.slider {
+	display: flex;
+	width: 100%;
+	height: 1.5em;
+	align-items: center;
+}
+.slider span {
+	width: 2em;
+	text-align: right;
+	margin-left: 0.5em;
+}
+.slider input {
+	margin-top: 0.75em;
+	display: initial;
+	width: 100%;
+	border-top: solid 1px var(--subtle);
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	height: 0.25em;
+	background: var(--subtle);
+	opacity: 0.75;
+	-webkit-transition: ease var(--fadetime);
+	-moz-transition: ease var(--fadetime);
+	transition: ease var(--fadetime);
+	border-radius: 0.25em;
+	outline: none;
+}
+.slider input:hover {
+	opacity: 1;
+}
+.slider input::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 1em;
+	height: 1.5em;
+	background: var(--interact);
+	cursor: pointer;
+	border-radius: 0.5em;
+}
+.slider input::-moz-range-thumb {
+	outline: none;
+	width: 1em;
+	height: 1.5em;
+	background: var(--interact);
+	cursor: pointer;
+	border-radius: 1em;
+}