☰

Reddit old CSS

Bigger Thumbnails and Clicking Functionality

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

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