☰

Reddit CSS

New Design with new functionalities

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

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