Reddit CSS

New Design with new functionalities

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

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