Reddit CSS

New Design with new functionalities

当前为 2023-12-14 提交的版本,查看 最新版本

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