// ==UserScript==
// @name GreasyFork Theme Engine
// @namespace https://naeembolchhi.github.io/
// @version 0.3
// @description A sleek GeasyFork redesign with support for custom colors. Supports both light mode and dark mode.
// @author NaeemBolchhi
// @license GPL-3.0-or-later
// @icon data:image/svg+xml;utf8,
// @match https://greasyfork.org/*
// @match https://sleazyfork.org/*
// @run-at document-end
// @grant none
// @downloadURL none
// ==/UserScript==
// SVG Icons
const forumSVG = '',
helpSVG = '',
librarySVG = '',
logSVG = '',
otherSVG = '',
scriptSVG = '',
searchSVG = '',
userSVG = '',
clearSVG = '',
findSVG = '';
// Function for inserting new elements in the DOM.
function elemake(tag, innr, attr) {
let element = document.createElement(tag);
if (innr) {element.innerHTML = innr;}
if (!attr) {return element;}
for (let x = 0; x < attr.key.length; x++) {
element.setAttribute(attr.key[x], attr.val[x]);
}
return element;
}
//let sample = elemake("div","ja monchay",{"key":["id","class"],"val":["oneDiv","nav pointer"]});
//document.body.appendChild(sample);
// Dark Theme Colors
const duskCSS = `
:root {
--engine-body-bg: #fbfbfb;
--engine-nav-bg: #f6f6f6;
--engine-nav-shade: #e0e0e0;
--engine-text-color: #000000;
--engine-accent-color-1: #a42121;
}
`,
duskELM = elemake("style",duskCSS,{"key":["type","id"],"val":["null","duskCSS"]});
// Light Theme Colors
const dawnCSS = `
:root {
--engine-body-bg: #ffffff;
--engine-nav-bg: #f6f6f6;
--engine-nav-shade: #e0e0e0;
--engine-text-color: #000000;
--engine-accent-color-1: #a42121;
}
`,
dawnELM = elemake("style",dawnCSS,{"key":["type","id"],"val":["text/css","dawnCSS"]});
// General Redesign Excluding Colors
const normCSS = `
:root {
--engine-border-radius: 4px;
}
body {
display: flex;
flex-direction: column;
background-color: var(--engine-body-bg);
}
a {
text-decoration: none;
}
#main-header {
background: var(--engine-nav-bg);
color: var(--engine-text-color);
box-shadow: initial;
padding: 1rem 0;
}
#main-header, #main-header a, #main-header a:visited, #main-header a:active {
text-decoration: none;
color: var(--engine-text-color);
fill: var(--engine-text-color);
}
#site-nav > nav a:hover {
color: var(--engine-body-text);
}
#language-selector-locale {
background: transparent;
border: 1px solid var(--engine-nav-shade);
border-radius: var(--engine-border-radius);
cursor: pointer;
}
#language-selector-locale:hover,
#language-selector-locale:focus {
color: var(--engine-accent-color-1);
background: var(--engine-nav-shade);
}
#nav-user-info {
display: flex;
gap: .8rem;
}
#nav-user-info select, #nav-user-info input {
font-size: .8rem;
}
#nav-user-info .sign-in-link a {
display: block;
padding: 1px 6px;
border: 1px solid var(--engine-nav-shade);
border-radius: var(--engine-border-radius);
color: var(--engine-text-color);
text-decoration: none;
}
#nav-user-info .sign-in-link a:hover,
#nav-user-info .sign-in-link a:focus {
background: var(--engine-nav-shade);
color: var(--engine-accent-color-1);
}
#site-nav > nav nav {
background: var(--engine-nav-bg);
color: var(--engine-text-color);
padding: 1rem;
transform: translateX(1rem);
border-radius: 0 0 var(--engine-border-radius) var(--engine-border-radius);
}
#site-nav > nav {
display: flex;
gap: 16px;
}
nav a:hover + nav, nav nav:hover, nav a:focus + nav {
display: flex;
}
#site-nav > nav nav {
gap: 16px;
}
#site-nav > nav > li + li {
margin: 0;
}
#site-nav > nav > li > a,
#site-nav > nav nav > li > a {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
line-height: 1;
gap: 6px;
border: 1px solid var(--engine-nav-shade);
padding: .5rem .65rem;
border-radius: var(--engine-border-radius);
}
#site-nav > nav > li > a:hover,
#site-nav > nav > li > a:focus,
#site-nav > nav nav > li > a:hover,
#site-nav > nav nav > li > a:focus {
color: var(--engine-accent-color-1);
fill: var(--engine-accent-color-1);
background: var(--engine-nav-shade);
}
#site-nav > nav > li > a > svg,
#site-nav > nav nav > li > a > svg {
height: 16px;
width: auto;
}
nav .with-submenu {
padding-right: 0;
}
nav .with-submenu > a::after {
display: none;
}
nav .with-submenu a {
position: relative;
z-index: 2;
}
#site-nav > nav nav {
z-index: 1;
}
.script-list, .user-list, .text-content, .discussion-list, .list-option-group ul, #script-info {
border-color: transparent;
box-shadow: initial;
background: var(--engine-body-bg);
}
.width-constraint {
width: 100%;
}
.engine-search-main {
--height: 3.5rem;
display: flex;
width: 100%;
height: var(--height);
max-width: 46.75rem;
background: var(--engine-nav-bg);
border-radius: var(--engine-border-radius);
overflow: hidden;
box-shadow: 0 3px 0 0 var(--engine-nav-shade);
}
.engine-search-input {
flex-grow: 1;
background: transparent;
border: 0;
outline: 0;
font-size: 1.1rem;
padding: .8rem 0 .8rem .8rem;
color: var(--engine-text-color);
fill: var(--engine-text-color);
}
.engine-search-clear,
.engine-search-submit {
height: var(--height);
width: calc(var(--height) * 1.2);
background: transparent;
border: 0;
outline: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.engine-search-clear {
display: none;
}
.engine-search-clear svg {
height: calc(var(--height) / 3.5);
width: auto;
}
.engine-search-submit svg {
height: calc(var(--height) / 3);
width: auto;
}
.engine-search-clear:hover,
.engine-search-clear:focus {
fill: var(--engine-accent-color-1);
}
.engine-search-submit:hover,
.engine-search-submit:focus {
background: rgba(0,0,0,0.06);
fill: var(--engine-accent-color-1);
}
.engine-search-main.active .engine-search-submit {
background: rgba(0,0,0,0.06);
}
.engine-search-main.active .engine-search-clear {
display: flex;
}
.engine-stretch-home {
height: calc(100svh - var(--header-height));
}
.engine-stretch-home .text-content {
height: 100%;
width: 100%;
padding: 1rem 1rem 8rem 1rem;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#engine-top-sites {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin-top: 1rem;
flex-wrap: wrap;
width: 100%;
max-width: 46.75rem;
}
#engine-top-sites a {
border: 1px solid var(--engine-nav-shade);
border-radius: var(--engine-border-radius);
padding: .25rem .35rem;
color: var(--engine-body-text);
}
#engine-top-sites a:hover,
#engine-top-sites a:focus {
color: var(--engine-accent-color-1);
background: var(--engine-nav-bg);
}
`,
normELM = elemake("style",normCSS,{"key":["type","id"],"val":["text/css","normCSS"]});
document.head.appendChild(normELM);
document.head.appendChild(duskELM);
document.head.appendChild(dawnELM);
// Update NAV with Icons
function forkNAV() {
let navList = document.querySelector('#site-nav > nav'),
scriptL = navList.querySelector('.scripts-index-link a'),
forumL = navList.querySelector('.forum-link a'),
otherL = navList.querySelector('.with-submenu a'),
helpL = navList.querySelector('.help-link');
scriptL.innerHTML = scriptSVG + '' + scriptL.innerText + '';
forumL.innerHTML = forumSVG + '' + forumL.innerText + '';
otherL.innerHTML = otherSVG + '' + otherL.innerText + '';
helpL.innerHTML = '' + helpSVG + '' + helpL.innerText + '';
let searchL = navList.querySelector('nav li a[href$="/search"]'),
userL = navList.querySelector('nav li a[href$="/users"]'),
libraryL = navList.querySelector('nav li a[href$="/libraries"]'),
logL = navList.querySelector('nav li a[href$="/moderator_actions"]');
searchL.innerHTML = searchSVG + '' + searchL.innerText.replace('Advanced search','Search') + '';
userL.innerHTML = userSVG + '' + userL.innerText.replace('User list','Users') + '';
libraryL.innerHTML = librarySVG + '' + libraryL.innerText + '';
logL.innerHTML = logSVG + '' + logL.innerText.replace('Moderator log','Mod Logs') + '';
}
// Update HOMEPAGE with new Search
function forkHOME() {
if (!document.getElementById('home-script-nav')) {return;}
let topSites = document.querySelectorAll('#home-top-sites a'),
siteTags = '';
for (let x = 0; x < topSites.length; x++) {
siteTags = siteTags + topSites[x].outerHTML;
}
document.querySelector('body > div.width-constraint > section.text-content').innerHTML = `
What are we forking today?
${siteTags}
`.replace(/>\s+<');
let div = document.querySelector('body > .width-constraint'),
header = document.querySelector('#main-header'),
input = document.querySelector('.engine-search-input'),
clear = document.querySelector('.engine-search-clear'),
submit = document.querySelector('.engine-search-submit');
div.classList.add('engine-stretch-home');
div.setAttribute('style','--header-height: ' + header.offsetHeight + 'px');
function checkInput() {
if (input.value === '') {
input.parentNode.classList.remove('active');
} else {
input.parentNode.classList.add('active');
}
}
input.addEventListener('input', checkInput);
clear.addEventListener('click', function() {
clear.parentNode.children[0].value = '';
checkInput();
clear.parentNode.children[0].focus();
});
submit.addEventListener('click', function() {
submit.parentNode.submit();
});
}
forkNAV();
forkHOME();