☰

Reddit CSS

Bigger Thumbnails and Clicking Functionality

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

  1. // ==UserScript==
  2. // @name         Reddit CSS
  3. // @namespace    https://www.reddit.com
  4. // @version      1.5
  5. // @description  Bigger Thumbnails and Clicking Functionality
  6. // @match        https://*.reddit.com/*
  7. // @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  8. // @license      MIT
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Define the CSS to enlarge the thumbnails and modify the styling
  16.     var customCSS = `
  17.  
  18.         /* Flair Labels */
  19.         .flairrichtext {border-radius: 20px;}
  20.  
  21.         /* Subreddit Name */
  22.         body.with-listing-chooser #header .pagename {position:inherit; color: white}
  23.         .pagename a {color:white;text-shadow: 0 0 3px #000000;}
  24.  
  25.         /* Increase the width and height of the thumbnail */
  26.         .thumbnail img {
  27.             width: 200px !important;
  28.             height: 200px !important;
  29.         }
  30.  
  31.         /* Adjust the size of the thumbnail container */
  32.         .thumbnail {
  33.             width: 200px !important;
  34.             height: 200px !important;
  35.             position: relative;
  36.             margin-bottom: 0;
  37.         }
  38.  
  39.         /* Post */
  40.         .thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
  41.         .subreddit {font-weight: bold;font-size: larger;color: #000;}
  42.         .link .flat-list {font-size:larger}
  43.         .link.last-clicked {border: 3px dotted red;}
  44.  
  45.         /* Post Details */
  46.         .tagline {color: #8880; margin-bottom: 15px;}
  47.         .tagline .live-timestamp {color: #369}
  48.         .domain {display: none;}
  49.         .reportbtn {display:none}
  50.         .post-crosspost-button {display:none}
  51.         .post-sharing-button {display:none}
  52.         .buttons .give-gold.gold-give-gold {display: none}
  53.  
  54.         /* Header Font Size and Icon */
  55.         #header-bottom-left {font-size: large;}
  56.         #header-img.default-header:not(:hover) {opacity: 0}
  57.  
  58.         /* Upper Bars */
  59.         #sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
  60.         #sr-header-area:not(:hover) .redesign-beta-optin {opacity: 0}
  61.         .separator {color: transparent;}
  62.         #header-bottom-left {margin-top: -10px;}
  63.         a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  64.         .tabmenu li a          {background:none;opacity:0.6;font-weight: normal;}
  65.         .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;}
  66.         .tabmenu li.selected a {border-top-right-radius: 20px;border-top-left-radius: 20px;}
  67.         #header {border-bottom: 3px solid #5f99cf;}
  68.  
  69.         /* Hide Username */
  70.         .user:not(:hover) {opacity: 0;}
  71.         #header-bottom-right:not(:hover) {background: none}
  72.         #header-bottom-right {font-size: larger;}
  73.  
  74.         /* Sidebar */
  75.         .side:not(:hover) {opacity: 0.5;}
  76.         .sidebox .spacer:not(:hover) {opacity:0}
  77.         .sidecontentbox .content {border: none}
  78.  
  79.         /* Search */
  80.         #search input[type="text"] {border-radius:5px}
  81.         #searchexpando {border-radius:9px}
  82.  
  83.         /* Videoplayer Background */
  84.         .reddit-video-player-root {background: #0000;}
  85.  
  86.         /* Video Duration Info */
  87.         .duration-overlay {font-size: 10pt; font-weight: bold;}
  88.         .duration-overlay {border-top-left-radius: 50px;border-top-right-radius: 50px;}
  89.  
  90.         /* Space between Posts */
  91.         .link {margin-bottom: 0px;}
  92.  
  93.         /* Expanded Post Margins */
  94.         .expando {margin: 0}
  95.  
  96.         /* Gallery Buttons */
  97.         .media-gallery .gallery-nav-bar {font-size:large}
  98.  
  99.         /* Text Posts Background*/
  100.         .link .usertext-body .md {background: none; border: 2px solid #369;}
  101.  
  102.         /* Rank / Scores */
  103.         .link .rank {display: none}
  104.         .arrow.up {display: none}
  105.         .arrow.down {display: none}
  106.  
  107.         /* Comment Page */
  108.         .panestack-title { padding-bottom: 0px; border-bottom: none;}
  109.         .commentarea .menuarea {font-size: large;}
  110.         .comment .author {font-size: larger;float:left}
  111.         .comment .expand {font-size: large;float:left; opacity:1}
  112.         .comment .expand:not(:hover) { opacity:0.1}
  113.         .commentarea > .usertext:not(:hover) {opacity:0.3; height: 20px}
  114.         .commentarea .entry .buttons:not(:hover) {opacity:0;}
  115.         .comments-page #siteTable .thing {display: flex !important;border: none;}
  116.         .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  117.         .comment .child {border-left: dotted 3px #000000}
  118.         .comment .score {font-size: larger}
  119.         .comments-page .arrow.up {display:block}
  120.         .comments-page .arrow.down {display:block}
  121.         .comments-page .thumbnail {display:none}
  122.  
  123.         /* Bottom Page */
  124.         .footer {display:none}
  125.         .debuginfo {display:none}
  126.         .bottommenu {opacity:0}
  127.     `;
  128.  
  129.     // Add the custom CSS to the page
  130.     GM_addStyle(customCSS);
  131.  
  132.     // Remove thumbnails from posts without thumbnails
  133.     function removePostsWithoutImages() {
  134.         var posts = document.querySelectorAll('.thumbnail');
  135.         for (var i = 0; i < posts.length; i++) {
  136.             if (!posts[i].querySelector('img')) {
  137.                 posts[i].parentNode.removeChild(posts[i]);
  138.             }
  139.         }
  140.     }
  141.     setInterval(removePostsWithoutImages, 1000);
  142. })();
  143.  
  144.  
  145. ///////////////////////// Show all post options on comments page ////////////
  146. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  147. if (excludedPattern.test(window.location.href)) {
  148.     GM_addStyle(`.reportbtn                         {display:block}
  149.                  .post-crosspost-button             {display:block}
  150.                  .post-sharing-button               {display:block}
  151.                  .buttons .give-gold.gold-give-gold {display: block}`);
  152. }
  153.  
  154. ///////////////////////////////////////////////////////////////////////////
  155.  
  156. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  157.  
  158. // Custom CSS for the clicked thumbnail
  159. const customCSS = `
  160.   /* Makes Clicking Easier */
  161.   .thumbnail {z-index:99}
  162.  
  163.   .thumbnail.clicked {
  164.     width: 80px !important;
  165.     height: 80px !important;
  166.   }
  167.  
  168.   .thumbnail.clicked img {
  169.     width: 80px !important;
  170.     height: 80px !important;
  171.     border-top-right-radius: 15px;
  172.   }
  173.  
  174.   .thing.clicked .arrow.up {display: block}
  175.   .thing.clicked .arrow.down {display:block}
  176. `;
  177.  
  178. function expandPostOnElementClick(element) {
  179.   const expandoButton = element.closest('.thing').querySelector('.expando-button');
  180.  
  181.   if (expandoButton) {
  182.     expandoButton.click();
  183.   }
  184. }
  185.  
  186. function handleElementClick(event) {
  187.   event.stopPropagation();
  188.   event.preventDefault();
  189.  
  190.   const element = event.currentTarget;
  191.   const thumbnail = element.closest('.thumbnail');
  192.   const thing = element.closest('.thing');
  193.  
  194.   // Check if the thumbnail has the 'clicked' class
  195.   const isClicked = thumbnail.classList.contains('clicked');
  196.  
  197.   if (isClicked) {
  198.     // Remove the 'clicked' class to revert the changes
  199.     thumbnail.classList.remove('clicked');
  200.     thing.classList.remove('clicked');
  201.   } else {
  202.     // Add 'clicked' class to the thumbnail
  203.     thumbnail.classList.add('clicked');
  204.     thing.classList.add('clicked');
  205.   }
  206.  
  207.   expandPostOnElementClick(element);
  208. }
  209.  
  210. function attachClickListenersToElements() {
  211.   const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  212.  
  213.   elements.forEach((element) => {
  214.     element.addEventListener('click', handleElementClick);
  215.   });
  216. }
  217.  
  218. // Add custom CSS styles
  219. GM_addStyle(customCSS);
  220.  
  221. // Attach click listeners to elements initially
  222. attachClickListenersToElements();
  223.  
  224. // Create a MutationObserver to monitor the page for changes
  225. const observer = new MutationObserver(() => {
  226.   // Attach click listeners to elements whenever new content is added to the page
  227.   attachClickListenersToElements();
  228. });
  229.  
  230. // Start observing the document for changes
  231. observer.observe(document, { childList: true, subtree: true });
  232.  
  233.