Adds a simple CSS style to old.reddit.com
当前为
// ==UserScript==
// @name Reddit CSS
// @namespace https://www.reddit.com
// @version 1.0
// @description Adds a simple CSS style to old.reddit.com
// @match https://*.reddit.com/*
// @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Define the CSS to enlarge the thumbnails and modify the styling
var customCSS = `
/* Subreddit Name */
body.with-listing-chooser #header .pagename {position:inherit; color: white}
.pagename a {color:white;text-shadow: 0 0 3px #000000;}
/* Increase the width and height of the thumbnail */
.thumbnail img {
width: 200px !important;
height: 200px !important;
}
/* Adjust the size of the thumbnail container */
.thumbnail {
width: 200px !important;
height: 200px !important;
position: relative;
margin-bottom: 0;
}
/* Post */
.thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
.subreddit {font-weight: bold;font-size: larger;color: #000;}
.link .flat-list {font-size:larger}
.link.last-clicked {border: 3px dotted red;}
/* Post Details */
.tagline {color: #8880; margin-bottom: 15px;}
.tagline .live-timestamp {color: #369}
.domain {display: none;}
.reportbtn {display:none}
.post-crosspost-button {display:none}
.post-sharing-button {display:none}
.buttons .give-gold.gold-give-gold {display: none}
/* Header Font Size and Icon */
#header-bottom-left {font-size: large;}
#header-img.default-header:not(:hover) {opacity: 0}
/* Upper Bars */
#sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
#sr-header-area:not(:hover) .redesign-beta-optin {opacity: 0}
.separator {color: transparent;}
#header-bottom-left {margin-top: -10px;}
a[href="https://old.reddit.com/wiki/"].choice {display: none;}
.tabmenu li a {background:none;opacity:0.6;font-weight: normal;}
.tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: 3px solid #5f99cf;border-bottom-color: rgb(95, 153, 207);border-bottom-style: solid;border-bottom-width: 3px;border-bottom: 3px solid white;}
#header {border-bottom: 3px solid #5f99cf;}
/* Hide Username */
.user:not(:hover) {opacity: 0;}
#header-bottom-right:not(:hover) {background: none}
#header-bottom-right {font-size: larger;}
/* Sidebar */
.side:not(:hover) {opacity: 0.5;}
.sidebox .spacer:not(:hover) {opacity:0}
.sidecontentbox .content {border: none}
/* Videoplayer Background */
.reddit-video-player-root {background: #0000;}
/* Video Duration Info */
.duration-overlay {font-size: 10pt; font-weight: bold;}
/* Space between Posts */
.link {margin-bottom: 0px;}
/* Expanded Post Margins */
.expando {margin: 0}
/* Gallery Buttons */
.media-gallery .gallery-nav-bar {font-size:large}
/* Text Posts Background*/
.link .usertext-body .md {background: none; border: 2px solid #369;}
/* Rank / Scores */
.link .rank {display: none}
.arrow.up {display: none}
.arrow.down {display: none}
/* Comment Page */
.panestack-title { padding-bottom: 0px; border-bottom: none;}
.commentarea .menuarea {font-size: large;}
.comment .author {font-size: larger;float:left}
.comment .expand {font-size: large;float:left; opacity:1}
.comment .expand:not(:hover) { opacity:0.1}
.commentarea > .usertext:not(:hover) {opacity:0; height:10px}
.commentarea .entry .buttons:not(:hover) {opacity:0;}
.comments-page #siteTable .thing {display: flex !important;border: none;}
.comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
.comment .child {border-left: dotted 3px #000000}
.comment .score {font-size: larger}
.comments-page .arrow.up {display:block}
.comments-page .arrow.down {display:block}
.comments-page .thumbnail {display:none}
/* Bottom Page */
.footer {display:none}
.debuginfo {display:none}
.bottommenu {opacity:0}
`;
// Add the custom CSS to the page
GM_addStyle(customCSS);
// Remove thumbnails from posts without thumbnails
function removePostsWithoutImages() {
var posts = document.querySelectorAll('.thumbnail');
for (var i = 0; i < posts.length; i++) {
if (!posts[i].querySelector('img')) {
posts[i].parentNode.removeChild(posts[i]);
}
}
}
setInterval(removePostsWithoutImages, 1000);
})();
/////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
// Custom CSS for the clicked thumbnail
const customCSS = `
/* Makes Clicking Easier */
.thumbnail {z-index:99}
.thumbnail.clicked {
width: 80px !important;
height: 80px !important;
}
.thumbnail.clicked img {
width: 80px !important;
height: 80px !important;
}
.thing.clicked .arrow.up {display: block}
.thing.clicked .arrow.down {display:block}
`;
function expandPostOnElementClick(element) {
const expandoButton = element.closest('.thing').querySelector('.expando-button');
if (expandoButton) {
expandoButton.click();
}
}
function handleElementClick(event) {
event.stopPropagation();
event.preventDefault();
const element = event.currentTarget;
const thumbnail = element.closest('.thumbnail');
const thing = element.closest('.thing');
// Check if the thumbnail has the 'clicked' class
const isClicked = thumbnail.classList.contains('clicked');
if (isClicked) {
// Remove the 'clicked' class to revert the changes
thumbnail.classList.remove('clicked');
thing.classList.remove('clicked');
} else {
// Add 'clicked' class to the thumbnail
thumbnail.classList.add('clicked');
thing.classList.add('clicked');
}
expandPostOnElementClick(element);
}
function attachClickListenersToElements() {
const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
elements.forEach((element) => {
element.addEventListener('click', handleElementClick);
});
}
// Add custom CSS styles
GM_addStyle(customCSS);
// Attach click listeners to elements initially
attachClickListenersToElements();
// Create a MutationObserver to monitor the page for changes
const observer = new MutationObserver(() => {
// Attach click listeners to elements whenever new content is added to the page
attachClickListenersToElements();
});
// Start observing the document for changes
observer.observe(document, { childList: true, subtree: true });