☰

Reddit CSS

New Design with new functionalities

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

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