☰

Reddit CSS

Bigger Thumbnails and Clicking Functionality

当前为 2023-07-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Reddit CSS
  3. // @namespace    https://www.reddit.com
  4. // @version      3.0
  5. // @description  Bigger Thumbnails and Clicking Functionality
  6. // @author       Agreasyforkuser
  7. // @match        https://*.reddit.com/*
  8. // @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  9. // @license      MIT
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Define the CSS to enlarge the thumbnails and modify the styling
  17.     var customCSS = `
  18.         /* Video Controls for Mobile */
  19.         video::-webkit-media-controls-panel {background: none; opacity:.6}
  20.         video::-webkit-media-controls-overlay-play-button {opacity: 0;}
  21.  
  22.         /* Flair Labels */
  23.         .flairrichtext {border-radius: 20px;}
  24.         .linkflairlabel {border-radius: 5px;}
  25.  
  26.         /* Subreddit Name */
  27.         body.with-listing-chooser #header .pagename {position:inherit; color: white}
  28.         .pagename a {color: black; margin-left:4px; margin-right:4px}
  29.         .pagename {background-color:white; border-radius:0px; margin: 0;}
  30.  
  31.         /* Increase the width and height of the thumbnail */
  32.         .thumbnail img {
  33.             width: 170px !important;
  34.             height: 170px !important;
  35.         }
  36.  
  37.         /* Adjust the size of the thumbnail container */
  38.         .thumbnail {
  39.             width: 170px !important;
  40.             height: 170px !important;
  41.             position: relative;
  42.             margin-bottom: 0;
  43.         }
  44.  
  45.         /* Post */
  46.         .thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
  47.         .subreddit {font-weight: bold;font-size: larger;color: #000;}
  48.         .link .flat-list       {font-size:larger}
  49.         .link.last-clicked {border: 3px dotted red;}
  50.  
  51.         /* Text Posts Background*/
  52.         .link .usertext-body .md {background: none; border: 1px dotted gray}
  53.  
  54.         /* Post Details */
  55.         .entry .buttons li a {color:#000000c7; font-weight:normal}
  56.  
  57.         .entry .buttons li   {background: #0000000d;border-radius: 10px;}
  58.         .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
  59.  
  60.         .tagline {color: #8880; margin-bottom: 15px;}
  61.         .tagline .live-timestamp {color: #369}
  62.         .domain {display: none;}
  63.         .reportbtn {display:none}
  64.         .post-crosspost-button {display:none}
  65.         .post-sharing-button {display:none}
  66.         .buttons .give-gold.gold-give-gold {display: none}
  67.         .hide-button {display:none !important}
  68.         .expando-button {opacity:0.5}
  69.  
  70.  
  71.         /* Header Font Size and Icon */
  72.         #header-bottom-left {font-size: large;}
  73.         #header-img.default-header:not(:hover) {opacity: 0.04}
  74.         /* Hide Username */
  75.         .user:not(:hover) {opacity: 0.04;}
  76.         #header-bottom-right:not(:hover) {background: none}
  77.         #header-bottom-right {font-size: larger;}
  78.         #header {border-bottom: 3px solid #5f99cf;}
  79.         #header-bottom-left {margin-top: -10px;}
  80.  
  81.  
  82.         /* Upper Bars */
  83.         #sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
  84.         #sr-header-area:not(:hover) .redesign-beta-optin {opacity: 0}
  85.  
  86.         .separator {color: transparent;}
  87.         #header-bottom-left {margin-top: -10px;}
  88.         a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  89.         .tabmenu li a          {background:none;opacity:0.6;font-weight: normal;}
  90.         .tabmenu li a:hover    {background:white}
  91.         .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;}
  92.         .tabmenu li.selected a {border-top-right-radius: 5px;border-top-left-radius: 5px;}
  93.  
  94.  
  95.  
  96.  
  97.         /* Sidebar */
  98.         .sidecontentbox .content {border: none}
  99.         .premium-banner {display:none}
  100.         .login-form-side {border-radius: 5px;}
  101.  
  102.         /* Search */
  103.         #search input[type="text"] {border-radius:5px}
  104.         #searchexpando {border-radius:9px}
  105.  
  106.         /* Videoplayer Background */
  107.         .reddit-video-player-root {background: #0000;}
  108.  
  109.         /* Video Duration Info */
  110.         .duration-overlay {font-size: 10pt; font-weight: bold;}
  111.         .duration-overlay {border-top-left-radius: 50px;border-top-right-radius: 50px;}
  112.  
  113.         /* Space between Posts */
  114.         .link {margin-bottom: 0px;}
  115.  
  116.         /* Expanded Post Margins */
  117.         .expando {margin: 0}
  118.  
  119.         /* Gallery Buttons */
  120.         .media-gallery .gallery-nav-bar {font-size:large}
  121.  
  122.  
  123.         /* Rank / Scores */
  124.         .link .rank {display: none}
  125.         .arrow.up {display: none}
  126.         .arrow.down {display: none}
  127.  
  128.         /* Comment Page */
  129.         .panestack-title { padding-bottom: 0px; border-bottom: none;}
  130.         .commentarea .menuarea {font-size: large;}
  131.         .comment .author {font-size: larger;float:left}
  132.         .comment .expand {font-size: large;float:left; opacity:1}
  133.         .comment .expand:not(:hover) { opacity:0.1}
  134.         .commentarea > .usertext:not(:hover) {opacity:0.3; height: 20px}
  135.         .commentarea .entry .buttons:not(:hover) {opacity:0;}
  136.         .comments-page #siteTable .thing {display: flex !important;border: none;}
  137.         .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  138.         .comment .child {border-left: dotted 3px #000000}
  139.         .comment .score {font-size: larger}
  140.         .comments-page .arrow.up {display:block}
  141.         .comments-page .arrow.down {display:block}
  142.         .comments-page .thumbnail {display:none}
  143.  
  144.         /* Bottom Page */
  145.         .footer {display:none}
  146.         .footer-parent {opacity:0}
  147.         .debuginfo {display:none}
  148.         .bottommenu {opacity:0}
  149.  
  150.         /* Navbar */
  151.         .nav-buttons {
  152.          display:table;
  153.          bottom: 0 !important;
  154.          right: 0 !important;
  155.          text-align: center !important;
  156.          border: 3px solid;
  157.          border-color: #cee3f8;
  158.          border-top-left-radius: 15px;
  159.          background-color: #cee3f8;
  160.          font-size: larger;
  161.          z-index: 9998 !important;
  162.          }
  163.          .nextprev a {background:none !important}
  164.  
  165.  
  166.  
  167.     `;
  168.  
  169.     // Add the custom CSS to the page
  170.     GM_addStyle(customCSS);
  171.  
  172. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  173.  
  174.     function removePostsWithoutImages() {
  175.         var posts = document.querySelectorAll('.thumbnail');
  176.         for (var i = 0; i < posts.length; i++) {
  177.             if (!posts[i].querySelector('img')) {
  178.                 posts[i].parentNode.removeChild(posts[i]);
  179.             }
  180.         }
  181.     }
  182.     setInterval(removePostsWithoutImages, 1000);
  183. })();
  184.  
  185.  
  186. ///////////////////////// Show all post options on comments page /////////////////////////////
  187.  
  188. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  189. if (excludedPattern.test(window.location.href)) {
  190.     GM_addStyle(`.reportbtn                         {display:block}
  191.                  .post-crosspost-button             {display:block}
  192.                  .post-sharing-button               {display:block}
  193.                  .buttons .give-gold.gold-give-gold {display:block}
  194.                  .expando-button                    {opacity: 1 }
  195.                  .hide-button                       {display:block !important}`);
  196.  
  197. }
  198.  
  199.  
  200. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  201.  
  202. // Custom CSS for the clicked thumbnail
  203. const customCSS = `
  204.   /* Makes Clicking Easier */
  205.   .thumbnail {z-index:99}
  206.  
  207.   .thumbnail.clicked {
  208.     width: 80px !important;
  209.     height: 80px !important;
  210.     border-radius: 15px;
  211.   }
  212.  
  213.   .thumbnail.clicked img {
  214.     width: 80px !important;
  215.     height: 80px !important;
  216.   }
  217.  
  218.   .thing.clicked .arrow.up {display: block}
  219.   .thing.clicked .arrow.down {display:block}
  220. `;
  221.  
  222. function expandPostOnElementClick(element) {
  223.   const expandoButton = element.closest('.thing').querySelector('.expando-button');
  224.  
  225.   if (expandoButton) {
  226.     expandoButton.click();
  227.   }
  228. }
  229.  
  230. function handleElementClick(event) {
  231.   event.stopPropagation();
  232.   event.preventDefault();
  233.  
  234.   const element = event.currentTarget;
  235.   const thumbnail = element.closest('.thumbnail');
  236.   const thing = element.closest('.thing');
  237.  
  238.   // Check if the thumbnail has the 'clicked' class
  239.   const isClicked = thumbnail.classList.contains('clicked');
  240.  
  241.   if (isClicked) {
  242.     // Remove the 'clicked' class to revert the changes
  243.     thumbnail.classList.remove('clicked');
  244.     thing.classList.remove('clicked');
  245.   } else {
  246.     // Add 'clicked' class to the thumbnail
  247.     thumbnail.classList.add('clicked');
  248.     thing.classList.add('clicked');
  249.   }
  250.  
  251.   expandPostOnElementClick(element);
  252. }
  253.  
  254. function attachClickListenersToElements() {
  255.   const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  256.  
  257.   elements.forEach((element) => {
  258.     element.addEventListener('click', handleElementClick);
  259.   });
  260. }
  261.  
  262. // Add custom CSS styles
  263. GM_addStyle(customCSS);
  264.  
  265. // Attach click listeners to elements initially
  266. attachClickListenersToElements();
  267.  
  268. // Create a MutationObserver to monitor the page for changes
  269. const observer = new MutationObserver(() => {
  270.   // Attach click listeners to elements whenever new content is added to the page
  271.   attachClickListenersToElements();
  272. });
  273.  
  274. // Start observing the document for changes
  275. observer.observe(document, { childList: true, subtree: true });
  276.  
  277. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  278.  
  279.  
  280. 'use strict';
  281.  
  282. var navButtons = document.getElementsByClassName('nav-buttons');
  283. if (navButtons.length > 0) {
  284.   var nav = navButtons[0];
  285.   nav.style.position = 'fixed';
  286. }
  287.  
  288. //var headerHeight = header.offsetHeight;
  289. var lastScrollTop = 0;
  290.  
  291.  
  292. window.addEventListener('scroll', function() {
  293.   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  294.   var windowHeight = window.innerHeight;
  295.   var documentHeight = document.documentElement.scrollHeight;
  296.  
  297.   if (scrollTop === 0) {
  298.     // Reached the top of the page
  299.     nav.style.opacity = '1';
  300.     nav.style.pointerEvents = 'auto';
  301.     } else {
  302.       // Scrolling up
  303.       nav.style.opacity = '.8';
  304.       nav.style.pointerEvents = 'auto';
  305.     }
  306.  
  307.   if (scrollTop + windowHeight + 10 >= documentHeight) {
  308.     // Reached the end of the page
  309.     nav.style.opacity = '1';
  310.     nav.style.pointerEvents = 'auto';
  311.     } else {
  312.     if (scrollTop > lastScrollTop) {
  313.       // Scrolling down
  314.       nav.style.opacity = '0';
  315.       nav.style.pointerEvents = 'none';
  316.     } 
  317.   }
  318.  
  319.   lastScrollTop = scrollTop;
  320. });
  321.  
  322.  
  323. /////////////////////////grey out comment-buttons if no comments were written /////////////////////////////////
  324. (function() {
  325.  
  326.     var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/; //dont grey out on comment page
  327.     if (!excludedPattern.test(window.location.href)) {
  328.  
  329.     'use strict';
  330.  
  331.     const removeCommentsCount = element => {
  332.         const text = element.textContent.trim();
  333.         if (!isNaN(parseInt(text.charAt(0), 10))) return;
  334.         element.closest('.entry .buttons li').style.opacity = '0.2';
  335.     };
  336.  
  337.     const commentElements = document.querySelectorAll('a.comments');
  338.     commentElements.forEach(removeCommentsCount);
  339.  
  340.     const observer = new MutationObserver(mutationsList => {
  341.         for (const mutation of mutationsList) {
  342.             if (mutation.type === 'childList') {
  343.                 const newCommentElements = mutation.addedNodes;
  344.                 newCommentElements.forEach(node => {
  345.                     if (node instanceof HTMLElement) {
  346.                         const element = node.querySelector('a.comments');
  347.                         if (element) removeCommentsCount(element);
  348.                     }
  349.                 });
  350.             }
  351.         }
  352.  
  353.     });
  354.  
  355.     observer.observe(document.body, { childList: true, subtree: true }); }
  356. })();
  357.  
  358. ////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
  359.  
  360. (function() {
  361.   'use strict';
  362.  
  363.   const LOG_PREFIX = '[Reddit Subreddit Icon]';
  364.   const DEBUG_ENABLED = false;
  365.  
  366.   function error(...toLog) {
  367.     console.error(LOG_PREFIX, ...toLog);
  368.   }
  369.  
  370.   function warn(...toLog) {
  371.     console.warn(LOG_PREFIX, ...toLog);
  372.   }
  373.  
  374.   function log(...toLog) {
  375.     console.log(LOG_PREFIX, ...toLog);
  376.   }
  377.  
  378.   function debug(...toLog) {
  379.     console.debug(LOG_PREFIX, ...toLog);
  380.   }
  381.  
  382.   function setSubredditIcon() {
  383.     const pagenameLink = document.querySelector('.pagename');
  384.     if (!pagenameLink) {
  385.       warn('Could not find .pagename a element.');
  386.       return;
  387.     }
  388.  
  389.     const subredditIcon = document.createElement('img');
  390.     subredditIcon.style.verticalAlign = 'middle';
  391.     subredditIcon.style.width = '35px';
  392.     subredditIcon.style.height = '35px';
  393.  
  394.     const srName = getSrName();
  395.     if (!srName) {
  396.       warn('Could not determine subreddit name.');
  397.       return;
  398.     }
  399.  
  400.     const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
  401.     fetch(srDataUrl)
  402.       .then(response => response.json())
  403.       .then(data => {
  404.         const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
  405.         const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
  406.         if (!iconUrl || iconUrl.length === 0) {
  407.           warn(`Subreddit "${srName}" does not have an icon.`);
  408.           return;
  409.         }
  410.  
  411.         subredditIcon.src = iconUrl;
  412.         pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
  413.       })
  414.       .catch(err => {
  415.         error(`Error fetching subreddit data for ${srName}:`, err);
  416.       });
  417.   }
  418.  
  419.   function getSrName() {
  420.     const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
  421.     const match = srNameRegex.exec(document.location.href);
  422.     if (!match || match.length < 3) {
  423.       error(`Could not find subreddit URL in "${document.location.href}".`);
  424.       return '';
  425.     }
  426.     return match[2];
  427.   }
  428.  
  429.   function cleanUpCommunityIcon(url) {
  430.     if (!url || url.length === 0) {
  431.       return url;
  432.     }
  433.     function htmlDecode(input) {
  434.       const doc = new DOMParser().parseFromString(input, 'text/html');
  435.       return doc.documentElement.textContent;
  436.     }
  437.     const decodedUrl = htmlDecode(url);
  438.     return decodedUrl;
  439.   }
  440.  
  441.   setSubredditIcon();
  442. })();
  443.