// ==UserScript==
// @name UI changes
// @description Test resizing AH/DLP/SB/SV/QQ ui for mobile and remove a few buttons
// @author C89sd
// @version 1.24
// @namespace https://greasyfork.org/users/1376767
// @match https://*.alternatehistory.com/*
// @match https://*.spacebattles.com/*
// @match https://*.darklordpotter.net/*
// @match https://*.questionablequesting.com/*
// @match https://*.sufficientvelocity.com/*
// @grant GM_addStyle
// @run-at document-body
// @noframes
// ==/UserScript==
'use strict';
// Default dark mode text colors:
// SV 230, SB 204, QQ 177
const c = 217; // I like 217, 224
let site = location.hostname.split('.').slice(-2, -1)[0];
const IS_AH = site === 'alternatehistory'
const IS_QQ = site === 'questionablequesting'
const IS_SB = site === 'spacebattles'
const IS_SV = site === 'sufficientvelocity'
const DM = window.getComputedStyle(document.body).color.match(/\d+/g)[0] > 128;
let css;
// text color
if (DM) {
css +=
`.actionBar-set.actionBar-set--external .actionBar-actionBar, .message-footer .message-actionBar .actionBar-set a, .block-tabHeader.block-tabHeader--threadmarkCategoryTabs .tabs-tab, .block--messages .message-cell--threadmark-header, .node-statsMeta .pairs > dt, .structItem-cell .pairs > dt, .js-tagList .tagItem, .pairJustifier .pairs > dt, .p-body-header .p-description, .block-container , .structItem-minor .structItem-parts a, .structItem-cell.structItem-cell--main ul.structItem-statuses .structItem-status::before, .message-cell--main, li, ul, div, time, .structItem-tagBlock .tagItem.labelLink, .structItem-minor .username , .pairs.pairs--justified dt a.hl-base, .pairs.pairs--justified dd a.hl-base, .pairs.pairs--justified dd {
color: rgb(${c},${c},${c}); }`
} else { // Make light mode <a> links brighter like Wikipedia, not dark blue
css +=
`.bbWrapper a { color: #36c; }
.bbWrapper a:hover { color: #3056a9; }`;
}
// Boost title and link brightness per-site in dark mode
let brightness = 1.0;
if (IS_SB) brightness = 0.90;
if (IS_QQ) brightness = 0.90 * 1.232; // 1.232 adjuss from qq to SB
if (IS_SV) brightness = 0.90 * 1.20; // fake value
if (IS_AH) brightness = 0.90 * 1.25;
if (DM) css +=
`.structItem-title, .message-content a, .message-newIndicator, .notice-content a, .pollResult-bar, .js-badge--alerts::after, .pageNavWrapper, .p-navEl-link--splitMenu, .username , .reactionsBar-link, .itemListElement, .buttonGroup, .p-breadcrumbs , .p-title, button.button--link, .block-formSectionHeader {
filter: brightness(${brightness});
}
.structItem-statuses .message-newIndicator { color: black; }`
// Unhide page links at the top of thread
css += `.block-outer .pageNavWrapper { display: block !important; }`
// + `.pageNavWrapper--mixed .pageNav { display: block !important; } .pageNavSimple { display: none !important; }` // comment out to use simple (mobile) navbar
;
// Fix QQ tabheader being half hidden
css += `.block-tabHeader > .hScroller-scroll.is-calculated { margin-bottom: 0px !important; padding-bottom: 0px !important; overflow: auto; }`
// Attempt to make all sites about the same size
css += `
.flashMessage-content, .flashMessage { display: none !important; }
#XF, #XenForo { font-size: 0.9375em !important; }
html, body { font-size: 15px !important; line-height: 1.3 !important; }
h1.p-title-value { font-size: 18px !important; }
.threadmarkListingHeader-content.threadmarkListingHeader-content--info.with-icon { display: none !important; } /* QQ: hide title below img */
.structItem-title, .node-title { font-size: ${ IS_AH ? '15px' : '14px' } !important; }
.structItem-minor, .node-meta, .node-extra { font-size: 12px !important; line-height: 1.3 !important; }
.structItem-pageJump { font-size: 10px !important; }
.tagItem { font-size: 10px !important; }
.structItem-cell { font-size: 12px !important; }
.pageNavSimple-el { font-size: 12px !important; }
.p-breadcrumbs { font-size: 12px !important; }
.button--link { font-size: 12px !important;}
.threadmarkListingHeader-contentLink { font-size: 12px !important; }
#top, .inputGroup, .input--inline { font-size: 12px !important; }
.structItem-tagBlock {
padding-top: 4px !important;
display: block !important;
}
:root {
--padTOP: 1px;
--padBOTTOM: 2px;
}
.structItem-cell--icon {
width: 54px !important;
padding: calc(10px + var(--padTOP)) 9px 10px 9px !important; /* ADD TOP PADDING */
}
.structItem-cell--main, .node-main {
padding-top: calc(5px + var(--padTOP)) !important; /* ADD TOP PADDING */
padding-bottom: 2px !important;
}
.structItem-cell--latest, .structItem-cell--meta {
padding-right: 8px !important;
padding-bottom: calc(8px + var(--padBOTTOM)) !important; /* ADD BOTTOM PADDING */
}
/* Remove ignore button */
.structItem-ignore { display: none !important; }
`;
GM_addStyle(css);
addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.link--external[target="_blank"]').forEach(link => {
link.removeAttribute('target');
});
// Replace 'Thread Tools' with 'Mark threadmarks read'
const A = Array.from(document.querySelectorAll('.menuTrigger')).find(e => e.textContent.toLowerCase() === 'thread tools');
const B = Array.from(document.querySelectorAll('.menu-linkRow')).find(e => e.textContent === 'Mark threadmarks read');
if (A && B) {
A.classList.remove('menuTrigger');
A.style.display = 'flex';
A.textContent = B.textContent;
A.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
B.click();
});
}
// Remove thread ignore button.
const btn = document.querySelector('.button--link[data-sk-ignore="Ignore"]');
if (btn) btn.remove();
})
