☰

Reddit CSS

New Design with new functionalities

当前为 2025-02-03 提交的版本，查看 最新版本。

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