☰

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