☰

Nexusmods Old UI

Style new nexusmods site closer to how it used to look

// ==UserScript==
// @name        Nexusmods Old UI
// @namespace   zys52712
// @match       https://www.nexusmods.com/*
// @match       https://www.nexusmods.com/games/*
// @grant       none
// @version     1.1
// @author      zys52712
// @license     GNU GPLv3
// @description Style new nexusmods site closer to how it used to look
// ==/UserScript==

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

styles.innerHTML = `
#mainContent {
	& > div > .bg-gradient-to-b,
	& > div > div > .size-full.object-cover[src*="media.nexusmods"],
	& > div > div > .size-full.object-cover[src*="media.nexusmods"] + div,
	div:has(> img.w-screen) {
		display: none;
	}
}

img.max-w-none[src*='home/hero-bg'] {
	display: none;
}

.next-container-fluid,
.next-container {
	@media screen and (min-width: 1640px) {
		width: 1552px;
	}

	section:has(> div > div[class*='group/mod-tile']):nth-child(2) > div:nth-child(2),
	div:has(+ .mods-grid) {
		margin-bottom: 0;
		background: #2d2d2d;

		div[aria-label*='Mods filter'] {
			gap: 0;

			button {
				border-radius: 0;
				padding: 13px 16px;
				border: 0;
				color: white;

				&[aria-checked='true'] {
					background: #444;
					box-shadow: inset 0 3px 0 0 #8197ec;
				}

				&[aria-checked='false'] {
					border-right: 1px solid #414141;
				}
			}
		}

		button[aria-haspopup='listbox'] {
			padding: 11px 15px;
			border-radius: 0;
		}
	}

	div[class*='group/mod-tile'] {
		background: #383838;

		& > div > div > div:nth-child(3) *,
		& > div > div > div:nth-child(4),
		& > div:last-child * {
			color: #c2c2c2;
		}
	}

	& > div:has(div[class*='group/mod-tile']),
	& > div:has(.mods-grid) {
		padding: 20px;
		background: #383838;

		.mods-grid,
		div:has(> div[class*='group/mod-tile']) {
			margin-top: 0;
			padding: 20px;
			background: #444;
			gap: 16px;

			.typography-body-md {
				font-size: 13px;
			}

			a.typography-body-xl {
				font-size: 15px;
			}
		}
	}

	/*
	div:has(> div[aria-label*='Filters panel']) {
		flex-direction: column;
		padding: 20px;
		background: #383838;

		div:has(> div[class*='group/checkbox']) {
			display: flex;
			column-gap: 10px;
			flex-wrap: wrap;
			align-items: center;
		}

		div[class*='group/checkbox'] {
			width: unset;
		}
	}

	div[aria-label*='Filters panel'] {
		width: unset;

		display: grid;

		& > div:first-child {
			grid-row: 1;
		}
		& > button {
			grid-row: 2;
		}
		& > div {
			grid-row: 3;
		}
	}
	*/

	div:has(> div[aria-label*='Filters panel']) {
		div.items-center:has(> .flex-wrap > button) {
			background: #383838;
			margin-bottom: 24px;

			button {
				padding: 10px 0;
			}
		}
	}

	div[aria-label*='Filters panel'] + div {
		padding-left: 0;
	}
}

body:has(.next-container-fluid, .next-container) {
	* {
		font-family: Roboto, sans-serif !important;
	}
}

body {
	background: none;

	&::before {
		content: ' ';
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #060702;
		background-image: url('/assets/images/default/bg_game_index.jpg');
		background-position: center top;
		background-size: cover;
		background-repeat: no-repeat;
		will-change: transform;
		z-index: -1;
	}

	footer {
		background-color: rgb(15 15 16 / var(--tw-bg-opacity));
	}
}
`;

document.body.appendChild(styles);

function replaceDates() {
	const timeElements = document.querySelectorAll('time[datetime*="20"]');

	timeElements.forEach((time) => {
		time.innerHTML = formatDate(time.dateTime);
	});
}

function formatDate(iso) {
	const date = new Date(iso);
	return date.toLocaleDateString('en-GB', {
		day: '2-digit',
		month: 'short',
		year: 'numeric',
	});
}

function arraysEqual(a, b) {
	if (a.length !== b.length) return false;
	return [...a].sort().toString() === [...b].sort().toString();
}

let elements = [];

const observer = new MutationObserver((mutations) => {
	if (
		!arraysEqual([...document.querySelectorAll('.mods-grid time')], elements)
	) {
		elements = [...document.querySelectorAll('.mods-grid time')];
		replaceDates();
	}
});

observer.observe(document.documentElement, {
	childList: true,
	subtree: true,
});