☰

Reddit CSS

Bigger Thumbnails and Clicking Functionality

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

  1. // ==UserScript==
  2. // @name         Reddit CSS
  3. // @namespace    https://www.reddit.com
  4. // @version      2.6
  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:5px}
  30.  
  31.         /* Increase the width and height of the thumbnail */
  32.         .thumbnail img {
  33.             width: 180px !important;
  34.             height: 180px !important;
  35.         }
  36.  
  37.         /* Adjust the size of the thumbnail container */
  38.         .thumbnail {
  39.             width: 180px !important;
  40.             height: 180px !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.         .expando-button {opacity:0.5}
  68.  
  69.  
  70.         /* Header Font Size and Icon */
  71.         #header-bottom-left {font-size: large;}
  72.         #header-img.default-header:not(:hover) {opacity: 0.05}
  73.         /* Hide Username */
  74.         .user:not(:hover) {opacity: 0.04;}
  75.         #header-bottom-right:not(:hover) {background: none}
  76.         #header-bottom-right {font-size: larger;}
  77.         #header {border-bottom: 3px solid #5f99cf;}
  78.         #header-bottom-left {margin-top: -10px;}
  79.  
  80.  
  81.         /* Upper Bars */
  82.         #sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
  83.         #sr-header-area:not(:hover) .redesign-beta-optin {opacity: 0}
  84.  
  85.         .separator {color: transparent;}
  86.         #header-bottom-left {margin-top: -10px;}
  87.         a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  88.         .tabmenu li a          {background:none;opacity:0.6;font-weight: normal;}
  89.         .tabmenu li a:hover    {background:white}
  90.         .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;}
  91.         .tabmenu li.selected a {border-top-right-radius: 5px;border-top-left-radius: 5px;}
  92.  
  93.  
  94.  
  95.  
  96.         /* Sidebar */
  97.         .sidecontentbox .content {border: none}
  98.         .premium-banner {display:none}
  99.         .login-form-side {border-radius: 5px;}
  100.  
  101.         /* Search */
  102.         #search input[type="text"] {border-radius:5px}
  103.         #searchexpando {border-radius:9px}
  104.  
  105.         /* Videoplayer Background */
  106.         .reddit-video-player-root {background: #0000;}
  107.  
  108.         /* Video Duration Info */
  109.         .duration-overlay {font-size: 10pt; font-weight: bold;}
  110.         .duration-overlay {border-top-left-radius: 50px;border-top-right-radius: 50px;}
  111.  
  112.         /* Space between Posts */
  113.         .link {margin-bottom: 0px;}
  114.  
  115.         /* Expanded Post Margins */
  116.         .expando {margin: 0}
  117.  
  118.         /* Gallery Buttons */
  119.         .media-gallery .gallery-nav-bar {font-size:large}
  120.  
  121.  
  122.         /* Rank / Scores */
  123.         .link .rank {display: none}
  124.         .arrow.up {display: none}
  125.         .arrow.down {display: none}
  126.  
  127.         /* Comment Page */
  128.         .panestack-title { padding-bottom: 0px; border-bottom: none;}
  129.         .commentarea .menuarea {font-size: large;}
  130.         .comment .author {font-size: larger;float:left}
  131.         .comment .expand {font-size: large;float:left; opacity:1}
  132.         .comment .expand:not(:hover) { opacity:0.1}
  133.         .commentarea > .usertext:not(:hover) {opacity:0.3; height: 20px}
  134.         .commentarea .entry .buttons:not(:hover) {opacity:0;}
  135.         .comments-page #siteTable .thing {display: flex !important;border: none;}
  136.         .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  137.         .comment .child {border-left: dotted 3px #000000}
  138.         .comment .score {font-size: larger}
  139.         .comments-page .arrow.up {display:block}
  140.         .comments-page .arrow.down {display:block}
  141.         .comments-page .thumbnail {display:none}
  142.  
  143.         /* Bottom Page */
  144.         .footer {display:none}
  145.         .footer-parent {opacity:0}
  146.         .debuginfo {display:none}
  147.         .bottommenu {opacity:0}
  148.  
  149.         /* Navbar */
  150.         .nav-buttons {
  151.          display:table;
  152.          bottom: 0 !important;
  153.          right: 0 !important;
  154.          text-align: center !important;
  155.          border: 3px solid;
  156.          border-color: #cee3f8;
  157.          border-top-left-radius: 15px;
  158.          background-color: #cee3f8;
  159.          font-size: larger;
  160.          z-index: 9998 !important;
  161.          }
  162.          .nextprev a {background:none !important}
  163.  
  164.  
  165.  
  166.     `;
  167.  
  168.     // Add the custom CSS to the page
  169.     GM_addStyle(customCSS);
  170.  
  171. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  172.  
  173.     function removePostsWithoutImages() {
  174.         var posts = document.querySelectorAll('.thumbnail');
  175.         for (var i = 0; i < posts.length; i++) {
  176.             if (!posts[i].querySelector('img')) {
  177.                 posts[i].parentNode.removeChild(posts[i]);
  178.             }
  179.         }
  180.     }
  181.     setInterval(removePostsWithoutImages, 1000);
  182. })();
  183.  
  184.  
  185. ///////////////////////// Show all post options on comments page /////////////////////////////
  186.  
  187. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  188. if (excludedPattern.test(window.location.href)) {
  189.     GM_addStyle(`.reportbtn                         {display:block}
  190.                  .post-crosspost-button             {display:block}
  191.                  .post-sharing-button               {display:block}
  192.                  .buttons .give-gold.gold-give-gold {display: block}
  193.                  .expando-button                    {opacity: 1 }   `);
  194. }
  195.  
  196.  
  197. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  198.  
  199. // Custom CSS for the clicked thumbnail
  200. const customCSS = `
  201.   /* Makes Clicking Easier */
  202.   .thumbnail {z-index:99}
  203.  
  204.   .thumbnail.clicked {
  205.     width: 80px !important;
  206.     height: 80px !important;
  207.     border-radius: 15px;
  208.   }
  209.  
  210.   .thumbnail.clicked img {
  211.     width: 80px !important;
  212.     height: 80px !important;
  213.   }
  214.  
  215.   .thing.clicked .arrow.up {display: block}
  216.   .thing.clicked .arrow.down {display:block}
  217. `;
  218.  
  219. function expandPostOnElementClick(element) {
  220.   const expandoButton = element.closest('.thing').querySelector('.expando-button');
  221.  
  222.   if (expandoButton) {
  223.     expandoButton.click();
  224.   }
  225. }
  226.  
  227. function handleElementClick(event) {
  228.   event.stopPropagation();
  229.   event.preventDefault();
  230.  
  231.   const element = event.currentTarget;
  232.   const thumbnail = element.closest('.thumbnail');
  233.   const thing = element.closest('.thing');
  234.  
  235.   // Check if the thumbnail has the 'clicked' class
  236.   const isClicked = thumbnail.classList.contains('clicked');
  237.  
  238.   if (isClicked) {
  239.     // Remove the 'clicked' class to revert the changes
  240.     thumbnail.classList.remove('clicked');
  241.     thing.classList.remove('clicked');
  242.   } else {
  243.     // Add 'clicked' class to the thumbnail
  244.     thumbnail.classList.add('clicked');
  245.     thing.classList.add('clicked');
  246.   }
  247.  
  248.   expandPostOnElementClick(element);
  249. }
  250.  
  251. function attachClickListenersToElements() {
  252.   const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  253.  
  254.   elements.forEach((element) => {
  255.     element.addEventListener('click', handleElementClick);
  256.   });
  257. }
  258.  
  259. // Add custom CSS styles
  260. GM_addStyle(customCSS);
  261.  
  262. // Attach click listeners to elements initially
  263. attachClickListenersToElements();
  264.  
  265. // Create a MutationObserver to monitor the page for changes
  266. const observer = new MutationObserver(() => {
  267.   // Attach click listeners to elements whenever new content is added to the page
  268.   attachClickListenersToElements();
  269. });
  270.  
  271. // Start observing the document for changes
  272. observer.observe(document, { childList: true, subtree: true });
  273.  
  274. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  275.  
  276.  
  277. 'use strict';
  278.  
  279. var navButtons = document.getElementsByClassName('nav-buttons');
  280. if (navButtons.length > 0) {
  281.   var nav = navButtons[0];
  282.   nav.style.position = 'fixed';
  283. }
  284.  
  285. //var headerHeight = header.offsetHeight;
  286. var lastScrollTop = 0;
  287.  
  288.  
  289. window.addEventListener('scroll', function() {
  290.   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  291.   var windowHeight = window.innerHeight;
  292.   var documentHeight = document.documentElement.scrollHeight;
  293.  
  294.   if (scrollTop === 0) {
  295.     // Reached the top of the page
  296.     nav.style.opacity = '1';
  297.     nav.style.pointerEvents = 'auto';
  298.     } else {
  299.       // Scrolling up
  300.       nav.style.opacity = '.8';
  301.       nav.style.pointerEvents = 'auto';
  302.     }
  303.  
  304.   if (scrollTop + windowHeight >= documentHeight) {
  305.     // Reached the end of the page
  306.     nav.style.opacity = '1';
  307.     nav.style.pointerEvents = 'auto';
  308.     } else {
  309.     if (scrollTop > lastScrollTop) {
  310.       // Scrolling down
  311.       nav.style.opacity = '0';
  312.       nav.style.pointerEvents = 'none';
  313.     } 
  314.   }
  315.  
  316.   lastScrollTop = scrollTop;
  317. });
  318.  
  319.  
  320. /////////////////////////grey out comment-buttons if no comments were written /////////////////////////////////
  321. (function() {
  322.  
  323.     var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/; //dont grey out on comment page
  324.     if (!excludedPattern.test(window.location.href)) {
  325.  
  326.     'use strict';
  327.  
  328.     const removeCommentsCount = element => {
  329.         const text = element.textContent.trim();
  330.         if (!isNaN(parseInt(text.charAt(0), 10))) return;
  331.         element.closest('.entry .buttons li').style.opacity = '0.2';
  332.     };
  333.  
  334.     const commentElements = document.querySelectorAll('a.comments');
  335.     commentElements.forEach(removeCommentsCount);
  336.  
  337.     const observer = new MutationObserver(mutationsList => {
  338.         for (const mutation of mutationsList) {
  339.             if (mutation.type === 'childList') {
  340.                 const newCommentElements = mutation.addedNodes;
  341.                 newCommentElements.forEach(node => {
  342.                     if (node instanceof HTMLElement) {
  343.                         const element = node.querySelector('a.comments');
  344.                         if (element) removeCommentsCount(element);
  345.                     }
  346.                 });
  347.             }
  348.         }
  349.  
  350.     });
  351.  
  352.     observer.observe(document.body, { childList: true, subtree: true }); }
  353. })();
  354.  
  355.