☰

Reddit CSS

New Design with new functionalities

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

  1. // ==UserScript==
  2. // @name         Reddit CSS
  3. // @namespace    https://www.reddit.com
  4. // @version      6.4
  5. // @description  New Design with new functionalities
  6. // @author       Agreasyforkuser
  7. // @match        https://old.reddit.com/*
  8. // @match        https://www.reddit.com/*
  9. // @match        https://rapidsave.com/*
  10. // @exclude      https://new.reddit.com/*
  11. // @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  12. // @license      MIT
  13. // @grant        GM_addStyle
  14. // ==/UserScript==
  15.  
  16.  
  17.  
  18. /////////////////// sort by new ////////////////////////////////////////////////////////////////////////
  19.  
  20. 'use strict';
  21. const re = /https?:\/\/(?:www\.|old\.|new\.)?reddit\.com/i;
  22. for (var i=0, l=document.links.length; i<l; i++) {
  23.     if (re.test(document.links[i].href)) {
  24.         var path = document.links[i].pathname;
  25.         if (path === '/' || path.startsWith('/r/')) {
  26.             var pathlen = path.split('/').length - 1 - (path.endsWith('/') ? 1 : 0);
  27.             if ((pathlen <= 2) && (document.links[i].closest('.tabmenu') === null)) {
  28.                 document.links[i].href += path.endsWith('/') ? 'new/' : '/new/';
  29.             }
  30.         }
  31.     }
  32. }
  33. //////////////////////////////// over 18 button ///////////////////////////////////////////////////////
  34.  
  35. const button = document.querySelector('button.c-btn.c-btn-primary[type="submit"][name="over18"][value="yes"]');
  36. if (button) {button.click();}
  37.  
  38. //////////////////////////////// auto-click on NSFW-disclaimers ////////////////////////////////////////
  39.  
  40. (function() {
  41.     'use strict';
  42.     // Function to click on elements with class 'expando-gate__show-once'
  43.     function clickExpandoGate() {
  44.         var elements = document.querySelectorAll('.expando-gate.expando-gate--overlay, .expando-gate.expando-gate--interstitial');
  45.         elements.forEach(function(element) {
  46.             if (!element.dataset.expandoClicked) {
  47.                 element.click();
  48.                 element.dataset.expandoClicked = true;
  49.             }
  50.         });
  51.     }
  52.     // Create a MutationObserver to watch for changes in the DOM
  53.     var observer = new MutationObserver(function(mutations) {
  54.         mutations.forEach(function(mutation) {
  55.             // Check if the target node or its descendants have elements with class 'expando-gate__show-once'
  56.             if (mutation.target.matches('.expando-gate.expando-gate--overlay') || mutation.target.querySelector('.expando-gate.expando-gate--overlay')) {clickExpandoGate();}
  57.             // embedded youtube-videos need this
  58.             if (mutation.target.matches('.expando-gate.expando-gate--interstitial') || mutation.target.querySelector('.expando-gate.expando-gate--interstitial')) {clickExpandoGate();}
  59.         });
  60.     });
  61.     // Define the configuration for the MutationObserver
  62.     var config = { subtree: true, childList: true };
  63.     // Start observing the document with the specified configuration
  64.     observer.observe(document.body, config);
  65.     // Initial click on elements with class 'expando-gate__show-once'
  66.     clickExpandoGate();
  67. })();
  68.  
  69. GM_addStyle(`.expando-gate.expando-gate--overlay {display:none !important}`);
  70.  
  71. /////////////////////////////// auto-click download link after opening the rapidsave page ///////////////
  72. const dbutton = document.querySelector('.downloadbutton');
  73. if (dbutton) {
  74.     dbutton.click();
  75. }
  76.  
  77. ///////////////////////////////////////////////////////////////////////////////////////////////////
  78. (function() {
  79.     'use strict';
  80.  
  81.     // Define the CSS to enlarge the thumbnails and modify the styling
  82.     var customCSS = `
  83.  
  84.          /* search placeholder text */
  85.          ::-moz-placeholder          {color:transparent !important}
  86.          ::-webkit-input-placeholder {color:transparent !important}
  87.  
  88.          /* View full thumbnails on search page */
  89.          .search-result :link {display:inline-table !important}
  90.  
  91.         .email-collection-banner, .email-verification-tooltip, #eu-cookie-policy {display:none !important}
  92.  
  93.         .infobar.listingsignupbar, .infobar.commentsignupbar {display: none !important;}
  94.         .infobar, .timeout-infobar {border:none}
  95.         .help-hoverable {display:none}
  96.         .reddit-infobar.with-icon {
  97.              min-height: 35px !important;
  98.              padding: 0 0 0 55px !important;
  99.              height: 35px !important;
  100.              }
  101.         .reddit-infobar.with-icon:not(:hover) {
  102.              min-height: 0 !important;
  103.              padding: 0 0 0 55px !important;
  104.              margin: 0 !important;
  105.              height: 9px !important;
  106.              opacity:0 !important
  107.              }
  108.  
  109.         /* Video Controls for Mobile */
  110.         video::-webkit-media-controls-panel {background: none; opacity: 1}
  111.         video::-webkit-media-controls-overlay-play-button {opacity: 0}
  112.  
  113.         /* Video controls for Desktop */
  114.         .reddit-video-controller-root.playback-controls       {background: rgba(0,0,0,0.75) !important; border-radius: 50px !important}
  115.         .reddit-video-controller-root.playback-controls:hover {background: rgba(0,0,0,0.95) !important}
  116.         .reddit-video-controller-root.playback-controls a.permalink {display: none !important}
  117.         .reddit-video-controller-root.ended-controls, .reddit-video-controller-root.buffering-controls {background: none !important}
  118.         .reddit-video-controller-root.ended-controls .centered span.replay-video {display: none !important}
  119.         .reddit-video-controller-root.playback-controls .reddit-video-seek-bar-root .seek-bar-thumb {opacity: 1 !important}
  120.         .reddit-video-controller-root.playback-controls .time-label {font-weight: bold}
  121.         /* hide some video control buttons unitl hover */
  122.         .reddit-video-controller-root.playback-controls       .control-button   {display:none}
  123.         .reddit-video-controller-root.playback-controls:hover .control-button   {display:block}
  124.         .reddit-video-controller-root.playback-controls       .volume-container {display:block}
  125.  
  126.  
  127.         /* Flair Labels */
  128.         .flairrichtext  {border-radius: 0px;border:none}
  129.         .linkflairlabel {border-radius: 0px;border:none}
  130.         .stamp      {background: white; border-radius: 0; padding:0}
  131.         .nsfw-stamp {background: #d10023; color:white; font-weight:bold !important; border: 2px solid #d10023 !important;}
  132.  
  133.  
  134.  
  135.         /* Buttons */
  136.         button, .preftable select, input[type="submit"] {border-radius:0}
  137.  
  138.         /* Subreddit Name */
  139.         body.with-listing-chooser #header .pagename {position:inherit; color: white}
  140.         .pagename a {color: black; margin-left:4px; margin-right:4px}
  141.         .pagename {background-color:white; font-variant: normal; border-radius:0px; margin: 0;}
  142.  
  143.  
  144.         /* Adjust the size of the thumbnails */
  145.  
  146.         .thumbnail, .thumbnail img{
  147.             width: 200px !important;
  148.             height: auto !important;
  149.             position: relative;
  150.             margin-bottom: 0;
  151.         }
  152.  
  153.         /* Visibility of text posts */
  154.         .expando-button.selftext {float:left}
  155.         .expando-button.selftext {height:50px !important; width:200px !important; background-image:none !important;background-color: black !important}
  156.  
  157.  
  158.         /* no margin left for expanded media */
  159.         .entry {margin-left:0}
  160.  
  161.         /* size videos correctly */
  162.         .no-constraints-when-pinned {min-width:0 !important; min-height: 0 !important;}
  163.  
  164.         /* Videoplayer Background */
  165.         .reddit-video-player-root {background: #0000;}
  166.  
  167.         /* Video Duration Info */
  168.         .duration-overlay {font-size: 10pt; font-weight: bold;}
  169.         .duration-overlay {border-top-left-radius: 10px; width:auto !important; padding:5px; right:0}
  170.  
  171.  
  172.         /* OP indicator */
  173.         .tagline .submitter, .search-result-meta .submitter {color: #228822}
  174.  
  175.         /* sort menu*/
  176.         .menuarea {border:none}
  177.         .dropdown.lightdrop .selected {text-decoration: none}
  178.  
  179.         /* Post */
  180.         .thing .title      {font-weight: normal;color: #000; margin-bottom: 13px}
  181.         .subreddit         {font-weight: bold;font-size: larger;color: #000;}
  182.         .link .flat-list   {font-size:larger}
  183.         .link.last-clicked {border: 3px dotted red;}
  184.  
  185.         /* Text Posts Background*/
  186.         .link .usertext-body .md {background: none; border: 1px solid gray; border-radius: 0}
  187.  
  188.         /* Post Details */
  189.         .entry .buttons li a {color:#000000c7; font-weight:normal}
  190.  
  191.         .entry .buttons li       {background: #0000000d}
  192.         .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
  193.  
  194.         .tagline {color: #8880;}
  195.         .tagline .live-timestamp {color: #369}
  196.         .domain {display: none;}
  197.         .reportbtn {display:none}
  198.         .post-crosspost-button {display:none}
  199.         .post-sharing-button {display:none}
  200.         .buttons .give-gold.gold-give-gold {display: none}
  201.         .hide-button {display:none !important}
  202.         .expando-button {opacity: 0.1;float:right}
  203.  
  204.         /* hide "submitted" and "by" text from post descriptions */
  205.         .tagline         {visibility: hidden}
  206.         .tagline::before {content: none}
  207.         .tagline time    {visibility: visible; margin-left: -55px}
  208.         .tagline a       {visibility: visible}
  209.         .tagline         {margin-bottom: 6px}
  210.  
  211.  
  212.         /* Header Font Size and Icon */
  213.         #header-bottom-left {font-size: large;}
  214.         #header-img.default-header:not(:hover) {opacity: 0}
  215.  
  216.         /* Upper Bars */
  217.         #sr-header-area:not(:hover)          {background: none !important; opacity:0.3 }
  218.         #sr-header-area                      {border-bottom: none}
  219.         #sr-header-area .redesign-beta-optin {display:none}
  220.         #sr-more-link                        {background-color: #cee3f8 }
  221.  
  222.  
  223.         .pref-lang {font-weight: normal}
  224.         #header-bottom-right:not(:hover) {background: none; border-radius:0}
  225.         #header-bottom-right {background: white; border-radius:0}
  226.         #header-bottom-right {font-size: larger;}
  227.         #header {border:none}
  228.      
  229.  
  230.         .separator {color: transparent;}
  231.         #header-bottom-left {margin-top: -10px;}
  232.         a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  233.         .tabmenu li a          {background:none;opacity:0.6;font-weight: normal}
  234.         .tabmenu li a:hover    {background:white}
  235.         .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: none}
  236.         .tabmenu li.selected a {text-transform: uppercase}
  237.  
  238.  
  239.  
  240.         /* Sidebar */
  241.         .sidecontentbox .content {border: none; background: none}
  242.         .sidebox .spacer         {display: none}
  243.         .premium-banner          {display: none}
  244.         .giftgold                {display: none}
  245.         .titlebox .bottom {border:none}
  246.         #searchexpando, .linkinfo, .linkinfo .shortlink input  {border: none}
  247.         .morelink .nub  {display: none}
  248.         .morelink       {border: none; background: #eff7ff;background-image:none}
  249.         .toggle .option {border: none; border-radius:0}
  250.         .c-btn-primary  {border: none; border-radius: 0;}
  251.         .subscription-box:not(:hover) {opacity: 0}
  252.  
  253.  
  254.         /* Space between Posts */
  255.         .link {margin-bottom: 0px;}
  256.  
  257.         /* Expanded Post Margins */
  258.         .expando {margin: 0}
  259.  
  260.         /* Gallery Buttons */
  261.         .media-gallery .gallery-nav-bar  {font-size:large; display:grid}
  262.         .media-gallery .gallery-nav-next {border:1px solid #336699;background:#eff7ff; float:right !important}
  263.         .media-gallery .gallery-nav-prev {border:1px solid #336699;background:#eff7ff}
  264.         .media-gallery .gallery-nav-back {border:1px solid #336699;background:#eff7ff}
  265.         /*.gallery-navigation {padding: 0px}*/
  266.         .gallery-navigation   {border: none}
  267.         .gallery-nav-disabled {opacity:0 !important}
  268.  
  269.         /* Rank / Scores */
  270.         .link .rank {display: none}
  271.         .arrow.up {display: none}
  272.         .arrow.down {display: none}
  273.  
  274.         /* Comment Page */
  275.         .panestack-title { padding-bottom: 0px; border-bottom: none;}
  276.         .commentarea .menuarea {font-size: large;}
  277.         .comment .author {font-size: larger;float:left}
  278.         .comment .expand {font-size: large;float:left; opacity:1;margin: 0 !important;padding: 0 !important; opacity:0}
  279.         .comment .expand {width:6px}
  280.         .comment.collapsed .expand { opacity:1;width:auto}
  281.         .comment .midcol {z-index:9999}
  282.       
  283.  
  284.         .commentarea > .usertext:not(:hover) {opacity:0.2; height: 18px}
  285.  
  286.         .commentarea .entry .buttons:not(:hover) {opacity:0;}
  287.         .comments-page #siteTable .thing {display: flex !important;border: none;}
  288.         .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  289.         .comment .child {border-left: dotted 3px #000000}
  290.         .comment .score {font-size: larger}
  291.         .comments-page .arrow.up {display:block}
  292.         .comments-page .arrow.down {display:block}
  293.         .pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
  294.         .reddiquette {display: none}
  295.  
  296.         /* Bottom Page */
  297.         .footer {display:none}
  298.         .footer-parent {opacity:0}
  299.         .debuginfo {display:none}
  300.         .bottommenu {opacity:0}
  301.  
  302.         /* promoted posts/ads */
  303.         .link.promotedlink.promoted, .link.promotedlink.external {display:none !important}
  304.  
  305.         /* submissions */
  306.         .formtabs-content .infobar {border:none}
  307.         .content.submit .info-notice {display: none;}
  308.         #items-required {display: none;}
  309.  
  310.  
  311.  
  312.         /* Navbar */
  313.         .nav-buttons {
  314.          display:table;
  315.          bottom: 0 !important;
  316.          right: 0 !important;
  317.          text-align: center !important;
  318.          border: 3px solid;
  319.          border-color: #cee3f8;
  320.          border-top-left-radius: 15px;
  321.          background-color: #cee3f8;
  322.          font-size: larger;
  323.          z-index: 9998 !important;
  324.          }
  325.         .nextprev a {background:none !important}
  326.  
  327.          /* Crossposts */
  328.         .crosspost-preview {border-radius: 0 !important}
  329.  
  330.  
  331.          /* Turn off custom subreddit styles */
  332.          #header        {background-image: none}
  333.          #header-img    {max-width: 50px; max-height: 50px;}
  334.          .link          {padding: 0}
  335.          .thumbnail, .thumbnail img {max-width: none; max-height: none; transform: none}
  336.          .link .entry .buttons li a.comments {color: color:#000000c7}
  337.          .link.odd {padding: 0 !important; margin-right: 0px !important}
  338.  
  339.  
  340.     `;
  341.  
  342.     // Add the custom CSS to the page
  343.     GM_addStyle(customCSS);
  344.  
  345. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  346.  
  347.     function removePostsWithoutImages() {
  348.         var posts = document.querySelectorAll('.thumbnail');
  349.         for (var i = 0; i < posts.length; i++) {
  350.             if (!posts[i].querySelector('img')) {
  351.                 posts[i].parentNode.removeChild(posts[i]);
  352.             }
  353.         }
  354.     }
  355.     setInterval(removePostsWithoutImages, 1000);
  356. })();
  357.  
  358.  
  359. ////////////////////////////////////// comments page //////////////////////////////////
  360.  
  361. var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  362. if (commentpage.test(window.location.href)) {
  363.     GM_addStyle(`.reportbtn                         {display:block}
  364.                  .post-crosspost-button             {display:block}
  365.                  a.comments                         {display:none}
  366.             /*   .buttons .give-gold.gold-give-gold {display:block}  */
  367.                  .expando-button                    {opacity: 1 }
  368.                  .hide-button                       {display:block !important}
  369.  
  370.                  a.embed-comment                    {display: none}
  371.             /*   a.bylink                           {display: none}  */
  372.  
  373.  
  374.                  .thumbnail,.thumbnail img  {width: 100px !important;height: 100px !important;}
  375.                  #sr-header-area {display:none}
  376.  
  377.             /* without this voting comments on mobile is impossible */
  378.                  .entry {margin-left:4px}
  379.  
  380.  
  381.             /* show "submitted" and "by" text in post descriptions again */
  382.                 .tagline         {visibility: visible}
  383.                 .tagline time    {margin-left: 0px}
  384.  
  385.  
  386.                  `
  387.                  );
  388.  
  389. ////////////////////////////////// Download Button ////////////////////////////////////
  390.  
  391.  
  392.     'use strict';
  393.  
  394.     function downloadVideo() {
  395.         var postUrl = window.location.href;
  396.         var baseUrl = 'https://rapidsave.com/info?url=';
  397.         var downloadUrl = baseUrl + encodeURIComponent(postUrl);
  398.         window.open(downloadUrl, '_blank');
  399.     }
  400.  
  401.     function createDownloadButton() {
  402.         var listItem = document.createElement('li');
  403.         listItem.classList.add('reddit-video-download-button');
  404.  
  405.         var button = document.createElement('button');
  406.         button.innerHTML = 'Download';
  407.         button.style.color = '#000000c7'; //same as .entry .buttons li a
  408.         button.style.background = 'none';
  409.         button.style.border = 'none';
  410.         button.style.fontSize = 'inherit';
  411.         // button.style.borderRadius = '10px';
  412.         // button.style.fontWeight = 'bold';
  413.         button.onclick = downloadVideo;
  414.  
  415.         listItem.appendChild(button);
  416.  
  417.         var buttonsList = document.querySelector('ul.buttons');
  418.         if (buttonsList) {
  419.             buttonsList.appendChild(listItem);
  420.         }
  421.     }
  422.  
  423.     createDownloadButton();
  424.  
  425.  
  426. /////////////////////add profile pictures next to comments ///////////////////////
  427.  
  428. const addAvatars = async (root = document) => {
  429.     Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async (thing) => {
  430.         if (!thing) return;
  431.         if (thing.hasAttribute('data-reddit-profile-picture')) return;
  432.         const img = document.createElement('img');
  433.         img.classList.add('reddit-profile-picture');
  434.         img.style.height = '22px';
  435.         img.style.width = '22px';
  436.         img.style.float = 'left';
  437.         img.style.margin = '0px';
  438.         thing.insertBefore(img, thing.querySelector('.entry'));
  439.         thing.setAttribute('data-reddit-profile-picture', 1);
  440.         if (!thing.id) return;
  441.         const authorElement = thing.querySelector('.author');
  442.         if (authorElement && authorElement.href) {
  443.             const xhr = new XMLHttpRequest();
  444.             xhr.open('GET', `${authorElement.href}/about.json`);
  445.             xhr.addEventListener('load', async () => {
  446.                 if (xhr.status === 200) {
  447.                     try {
  448.                         const profile = JSON.parse(xhr.responseText).data;
  449.                         const ta = document.createElement('textarea');
  450.                         ta.innerHTML = profile.icon_img;
  451.                         img.src = ta.value;
  452.                     } catch (error) {
  453.                         // Error parsing JSON or extracting URL
  454.                         console.error('Error parsing JSON or extracting URL:', error);
  455.                         removeAvatar(img);
  456.                     }
  457.                 } else {
  458.                     // Non-200 status, handle error
  459.                     console.error('Error fetching user data:', xhr.status, xhr.statusText);
  460.                     removeAvatar(img);
  461.                 }
  462.             });
  463.             xhr.addEventListener('error', () => {
  464.                 // Network error
  465.                 console.error('Network error while fetching user data.');
  466.                 removeAvatar(img);
  467.             });
  468.             xhr.send();
  469.         }
  470.     });
  471. };
  472.  
  473. const removeAvatar = (imgElement) => {
  474.     if (imgElement && imgElement.parentNode) {
  475.         imgElement.parentNode.removeChild(imgElement);
  476.     }
  477. };
  478.  
  479. addAvatars();
  480.  
  481. const mo = new MutationObserver((muts) => {
  482.     muts.forEach((mut) => {
  483.         Array.from(mut.addedNodes).forEach((node) => {
  484.             if (node instanceof HTMLElement) {
  485.                 addAvatars();
  486.             }
  487.         });
  488.     });
  489. });
  490. mo.observe(document.body, { childList: true, subtree: true });
  491. };
  492.  
  493. ////////////////////////////// userpage ///////////////////////////////////////////////////////////////////
  494.  
  495. var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
  496. if (userpage.test(window.location.href)) {
  497.  
  498.     GM_addStyle(`.comment, .content .details {border-bottom: 2px solid #5f99cf !important}`);
  499.  
  500.     const addProfilePictures = async (root = document) => {
  501.         Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
  502.             if (!pagename) return;
  503.             if (pagename.hasAttribute('data-reddit-profile-picture')) return;
  504.  
  505.             const username = pagename.textContent.trim();
  506.             if (!username) return;
  507.  
  508.             const img = document.createElement('img');
  509.             img.classList.add('reddit-profile-picture');
  510.             img.style.height = '35px';
  511.             img.style.width = '35px';
  512.             img.style.verticalAlign = 'middle';
  513.  
  514.  
  515.             pagename.parentNode.insertBefore(img, pagename.nextSibling);
  516.  
  517.             pagename.setAttribute('data-reddit-profile-picture', 1);
  518.  
  519.             const xhr = new XMLHttpRequest();
  520.             xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
  521.             xhr.addEventListener('load', async () => {
  522.                 const profile = JSON.parse(xhr.responseText).data;
  523.                 const ta = document.createElement('textarea');
  524.                 ta.innerHTML = profile.icon_img;
  525.                 img.src = ta.value;
  526.             });
  527.             xhr.send();
  528.         });
  529.     };
  530.  
  531.     addProfilePictures();
  532.  
  533.     const mo = new MutationObserver((muts) => {
  534.         muts.forEach((mut) => {
  535.             Array.from(mut.addedNodes).forEach((node) => {
  536.                 if (node instanceof HTMLElement) {
  537.                     addProfilePictures(node);
  538.                 }
  539.             });
  540.         });
  541.     });
  542.  
  543.     mo.observe(document.body, { childList: true, subtree: true });
  544. };
  545.  
  546.  
  547. //////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////
  548.  
  549. if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
  550.   (function() {
  551.     'use strict';
  552.  
  553.     // Function to check if the text starts with a "-" or "0"
  554.     function startsWithNegativeSymbolOrZero(text) {
  555.       return text.trim().startsWith('-') || text.trim().startsWith('0');
  556.     }
  557.  
  558.     // Get all elements with class "score likes"
  559.     var scoreElements = document.querySelectorAll('.score');
  560.  
  561.     // Iterate over each score element using forEach
  562.     scoreElements.forEach(function(scoreElement) {
  563.       var scoreText = scoreElement.textContent.trim();
  564.  
  565.       // Check if the score starts with a "-" or "0"
  566.       if (startsWithNegativeSymbolOrZero(scoreText)) {
  567.         // Change the color to red
  568.         scoreElement.style.color = 'red';
  569.         scoreElement.style.fontWeight = 'bold';
  570.       } else if (parseFloat(scoreText) > 1) {
  571.         // Change the color to green
  572.         scoreElement.style.color = 'green';
  573.         scoreElement.style.fontWeight = 'bold';
  574.       }
  575.     });
  576.   })();
  577. }
  578.  
  579. /////////////////////////grey out comment-buttons if no comments were written, also open comments in new tab /////////////////////////////////
  580.  
  581. if (!commentpage.test(window.location.href)) {
  582.  
  583.     'use strict';
  584.  
  585.     const removeCommentsCount = element => {
  586.         const text = element.textContent.trim();
  587.         if (!isNaN(parseInt(text.charAt(0), 10))) return;
  588.         element.closest('.entry .buttons li').style.opacity = '0.2';
  589.     };
  590.  
  591.     const openCommentsInNewTab = element => {
  592.         element.setAttribute('target', '_blank');
  593.     };
  594.  
  595.     const commentElements = document.querySelectorAll('a.comments');
  596.     commentElements.forEach(removeCommentsCount);
  597.     commentElements.forEach(openCommentsInNewTab);
  598.  
  599.     const observer = new MutationObserver(mutationsList => {
  600.         for (const mutation of mutationsList) {
  601.             if (mutation.type === 'childList') {
  602.                 const newCommentElements = mutation.addedNodes;
  603.                 newCommentElements.forEach(node => {
  604.                     if (node instanceof HTMLElement) {
  605.                         const element = node.querySelector('a.comments');
  606.                         if (element) {
  607.                             removeCommentsCount(element);
  608.                             openCommentsInNewTab(element);
  609.                         }
  610.                     }
  611.                 });
  612.             }
  613.         }
  614.     });
  615.  
  616.     observer.observe(document.body, { childList: true, subtree: true });
  617. };
  618.  
  619.  
  620. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  621.  
  622. // Custom CSS for the clicked thumbnail
  623. const customCSS = `
  624.   /* Makes Clicking Easier */
  625.   .thumbnail {z-index:99}
  626.  
  627.   .thumbnail.clicked {
  628.     width:  80px !important;
  629.     height: 80px !important;
  630.     border-radius: 15px;
  631.     opacity:0.5;
  632.   }
  633.  
  634.   .thumbnail.clicked img {
  635.     width:  80px !important;
  636.     height: 80px !important;
  637.   }
  638.  
  639.   .thing.clicked .arrow.up {display: block}
  640.   .thing.clicked .arrow.down {display:block}
  641. `;
  642.  
  643. function expandPostOnElementClick(element) {
  644.   const expandoButton = element.closest('.thing').querySelector('.expando-button');
  645.  
  646.   if (expandoButton) {
  647.     expandoButton.click();
  648.   }
  649. }
  650.  
  651. function handleElementClick(event) {
  652.   event.stopPropagation();
  653.   event.preventDefault();
  654.  
  655.   const element = event.currentTarget;
  656.   const thumbnail = element.closest('.thumbnail');
  657.   const thing = element.closest('.thing');
  658.  
  659.   // Check if the thumbnail has the 'clicked' class
  660.   const isClicked = thumbnail.classList.contains('clicked');
  661.  
  662.   if (isClicked) {
  663.     // Remove the 'clicked' class to revert the changes
  664.     thumbnail.classList.remove('clicked');
  665.     thing.classList.remove('clicked');
  666.   } else {
  667.     // Add 'clicked' class to the thumbnail
  668.     thumbnail.classList.add('clicked');
  669.     thing.classList.add('clicked');
  670.   }
  671.  
  672.   expandPostOnElementClick(element);
  673. }
  674.  
  675. function attachClickListenersToElements() {
  676.   const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  677.  
  678.   elements.forEach((element) => {
  679.     element.addEventListener('click', handleElementClick);
  680.   });
  681. }
  682.  
  683. // Add custom CSS styles
  684. GM_addStyle(customCSS);
  685.  
  686. // Attach click listeners to elements initially
  687. attachClickListenersToElements();
  688.  
  689. // Create a MutationObserver to monitor the page for changes
  690. const observer = new MutationObserver(() => {
  691.   // Attach click listeners to elements whenever new content is added to the page
  692.   attachClickListenersToElements();
  693. });
  694.  
  695. // Start observing the document for changes
  696. observer.observe(document, { childList: true, subtree: true });
  697.  
  698. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  699.  
  700.  
  701. 'use strict';
  702.  
  703. var navButtons = document.getElementsByClassName('nav-buttons');
  704. if (navButtons.length > 0) {
  705.   var nav = navButtons[0];
  706.   nav.style.position = 'fixed';
  707. }
  708.  
  709. //var headerHeight = header.offsetHeight;
  710. var lastScrollTop = 0;
  711.  
  712.  
  713. window.addEventListener('scroll', function() {
  714.   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  715.   var windowHeight = window.innerHeight;
  716.   var documentHeight = document.documentElement.scrollHeight;
  717.  
  718.   if (scrollTop === 0) {
  719.     // Reached the top of the page
  720.     nav.style.opacity = '1';
  721.     nav.style.pointerEvents = 'auto';
  722.     } else {
  723.       // Scrolling up
  724.       nav.style.opacity = '.8';
  725.       nav.style.pointerEvents = 'auto';
  726.     }
  727.  
  728.   if (scrollTop + windowHeight + 10 >= documentHeight) {
  729.     // Reached the end of the page
  730.     nav.style.opacity = '1';
  731.     nav.style.pointerEvents = 'auto';
  732.     } else {
  733.     if (scrollTop > lastScrollTop) {
  734.       // Scrolling down
  735.       nav.style.opacity = '0';
  736.       nav.style.pointerEvents = 'none';
  737.     } 
  738.   }
  739.  
  740.   lastScrollTop = scrollTop;
  741. });
  742.  
  743.  
  744. /////////////////////////////////////// remove some tabs /////////////////////////////////////////////////
  745.  
  746. (function() {
  747.     'use strict';
  748.  
  749.     // Function to remove the elements containing the text "gilded" or "best" from .tabmenu
  750.     function removeGildedAndBestTabs() {
  751.         const tabmenu = document.querySelector('.tabmenu');
  752.         if (!tabmenu) return;
  753.  
  754.         const tabs = tabmenu.querySelectorAll('a');
  755.         for (let i = 0; i < tabs.length; i++) {
  756.             const tab = tabs[i];
  757.             const tabText = tab.textContent.toLowerCase();
  758.             if (tabText.includes('gilded') || tabText.includes('best')) {
  759.                 tab.remove();
  760.             }
  761.         }
  762.     }
  763.  
  764.     // Call the function to remove the "gilded" and "best" tabs after the page has loaded
  765.     window.addEventListener('load', removeGildedAndBestTabs);
  766. })();
  767.  
  768. ////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
  769.  
  770. (function() {
  771.   'use strict';
  772.  
  773.   function setSubredditIcon() {
  774.     const pagenameLink = document.querySelector('.pagename');
  775.     const subredditIcon = document.createElement('img');
  776.     subredditIcon.style.verticalAlign = 'middle';
  777.     subredditIcon.style.width = 'auto';
  778.     subredditIcon.style.height = '35px';
  779.  
  780.     const srName = getSrName();
  781.  
  782.  
  783.     const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
  784.     fetch(srDataUrl)
  785.       .then(response => response.json())
  786.       .then(data => {
  787.         const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
  788.         const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
  789.         if (!iconUrl || iconUrl.length === 0)
  790.            {
  791.            return;
  792.            }
  793.         subredditIcon.src = iconUrl;
  794.         pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
  795.       })
  796.  
  797.   }
  798.  
  799.   function getSrName() {
  800.     const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
  801.     const match = srNameRegex.exec(document.location.href);
  802.  
  803.     return match[2];
  804.   }
  805.  
  806.   function cleanUpCommunityIcon(url) {
  807.     if (!url || url.length === 0) {
  808.       return url;
  809.     }
  810.     function htmlDecode(input) {
  811.       const doc = new DOMParser().parseFromString(input, 'text/html');
  812.       return doc.documentElement.textContent;
  813.     }
  814.     const decodedUrl = htmlDecode(url);
  815.     return decodedUrl;
  816.   }
  817.  
  818.   setSubredditIcon();
  819. })();
  820.  
  821.