Reddit CSS

New Design with new functionalities

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

  1. // ==UserScript==
  2. // @name Reddit CSS
  3. // @namespace https://www.reddit.com
  4. // @version 4.3
  5. // @description New Design with new functionalities
  6. // @author Agreasyforkuser
  7. // @match https://*.reddit.com/*
  8. // @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  9. // @license MIT
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12.  
  13.  
  14. /////////////////////////////////// redirect to old.reddit ////////////////////////////////////
  15.  
  16. if ( window.location.host != "old.reddit.com" ) {
  17. var oldReddit = window.location.protocol + "//" + "old.reddit.com" + window.location.pathname + window.location.search + window.location.hash;
  18. window.location.replace (oldReddit);
  19. }
  20.  
  21. /////////////////// sort by new ////////////////////////////////////////////////////////////////////////
  22.  
  23. 'use strict';
  24. const re = /https?:\/\/(?:www\.|old\.|new\.)?reddit\.com/i;
  25. for (var i=0, l=document.links.length; i<l; i++) {
  26. if (re.test(document.links[i].href)) {
  27. var path = document.links[i].pathname;
  28. if (path === '/' || path.startsWith('/r/')) {
  29. var pathlen = path.split('/').length - 1 - (path.endsWith('/') ? 1 : 0);
  30. if ((pathlen <= 2) && (document.links[i].closest('.tabmenu') === null)) {
  31. document.links[i].href += path.endsWith('/') ? 'new/' : '/new/';
  32. }
  33. }
  34. }
  35. }
  36. //////////////////////////////////////////////////////////////////////////////////////////////////
  37.  
  38.  
  39. (function() {
  40. 'use strict';
  41.  
  42. // Define the CSS to enlarge the thumbnails and modify the styling
  43. var customCSS = `
  44.  
  45. /* Video Controls for Mobile */
  46. video::-webkit-media-controls-panel {background: none; opacity:.7}
  47. video::-webkit-media-controls-overlay-play-button {opacity: 0}
  48.  
  49. /* Flair Labels */
  50. .flairrichtext {border-radius: 20px;}
  51. .linkflairlabel {border-radius: 5px;}
  52. .nsfw-stamp {background: white;}
  53.  
  54. /* Subreddit Name */
  55. body.with-listing-chooser #header .pagename {position:inherit; color: white}
  56. .pagename a {color: black; margin-left:4px; margin-right:4px}
  57. .pagename {background-color:white; font-variant: normal; border-radius:0px; margin: 0;}
  58.  
  59. /* Increase the width and height of the thumbnail */
  60. .thumbnail img {
  61. width: 170px !important;
  62. height: 170px !important;
  63. }
  64.  
  65. /* Adjust the size of the thumbnail container */
  66. .thumbnail {
  67. width: 170px !important;
  68. height: 170px !important;
  69. position: relative;
  70. margin-bottom: 0;
  71. }
  72.  
  73.  
  74. /* OP indicator */
  75. .tagline .submitter, .search-result-meta .submitter {color: #228822}
  76.  
  77. /* sort menu*/
  78. .menuarea {border:none}
  79.  
  80. /* Post */
  81. .thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
  82. .subreddit {font-weight: bold;font-size: larger;color: #000;}
  83. .link .flat-list {font-size:larger}
  84. .link.last-clicked {border: 3px dotted red;}
  85.  
  86. /* Text Posts Background*/
  87. .link .usertext-body .md {background: none; border: 1px dotted gray}
  88.  
  89. /* Post Details */
  90. .entry .buttons li a {color:#000000c7; font-weight:normal}
  91.  
  92. .entry .buttons li {background: #0000000d;border-radius: 10px;}
  93. .entry .buttons li:hover {opacity:1 !important} //revert graying-out function on hover
  94.  
  95. .tagline {color: #8880; margin-bottom: 15px;}
  96. .tagline .live-timestamp {color: #369}
  97. .domain {display: none;}
  98. .reportbtn {display:none}
  99. .post-crosspost-button {display:none}
  100. .post-sharing-button {display:none}
  101. .buttons .give-gold.gold-give-gold {display: none}
  102. .hide-button {display:none !important}
  103. .expando-button {opacity:0.5;float:right}
  104.  
  105.  
  106. /* Header Font Size and Icon */
  107. #header-bottom-left {font-size: large;}
  108. #header-img.default-header:not(:hover) {opacity: 0}
  109.  
  110. /* Upper Bars */
  111. #sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
  112. #sr-header-area .redesign-beta-optin {display:none}
  113. #sr-more-link {background-color: #cee3f8 }
  114.  
  115. /* Hide Username */
  116. .user:not(:hover) {opacity: 0;}
  117.  
  118. .pref-lang {font-weight: normal}
  119. #header-bottom-right:not(:hover) {background: none; border-radius:0}
  120. #header-bottom-right {font-size: larger;}
  121. #header {border-bottom: 3px solid white;}
  122.  
  123.  
  124. .separator {color: transparent;}
  125. #header-bottom-left {margin-top: -10px;}
  126. a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  127. .tabmenu li a {background:none;opacity:0.6;font-weight: normal}
  128. .tabmenu li a:hover {background:white}
  129. .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: none}
  130. .tabmenu li.selected a {text-transform: uppercase}
  131.  
  132.  
  133.  
  134.  
  135. /* Sidebar */
  136. .sidecontentbox .content {border: none}
  137. .premium-banner {display:none}
  138. .giftgold {display: none}
  139. .login-form-side {border-radius: 5px;}
  140. .titlebox .bottom {border:none}
  141.  
  142.  
  143.  
  144. /* Videoplayer Background */
  145. .reddit-video-player-root {background: #0000;}
  146.  
  147. /* Video Duration Info */
  148. .duration-overlay {font-size: 10pt; font-weight: bold;}
  149. .duration-overlay {border-top-left-radius: 50px;border-top-right-radius: 50px;}
  150.  
  151. /* Space between Posts */
  152. .link {margin-bottom: 0px;}
  153.  
  154. /* Expanded Post Margins */
  155. .expando {margin: 0}
  156.  
  157. /* Gallery Buttons */
  158. .media-gallery .gallery-nav-bar {font-size:large}
  159.  
  160.  
  161. /* Rank / Scores */
  162. .link .rank {display: none}
  163. .arrow.up {display: none}
  164. .arrow.down {display: none}
  165.  
  166. /* Comment Page */
  167. .panestack-title { padding-bottom: 0px; border-bottom: none;}
  168. .commentarea .menuarea {font-size: large;}
  169. .comment .author {font-size: larger;float:left}
  170. .comment .expand {font-size: large;float:left; opacity:1;margin: 0 !important;padding: 0 !important; opacity:0}
  171. .comment .expand {width:6px}
  172. .comment.collapsed .expand { opacity:1;width:auto}
  173. .comment .midcol {z-index:9999}
  174.  
  175. .commentarea > .usertext:not(:hover) {opacity:0.2; height: 18px}
  176. .commentarea .entry .buttons:not(:hover) {opacity:0;}
  177. .comments-page #siteTable .thing {display: flex !important;border: none;}
  178. .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  179. .comment .child {border-left: dotted 3px #000000}
  180. .comment .score {font-size: larger}
  181. .comments-page .arrow.up {display:block}
  182. .comments-page .arrow.down {display:block}
  183. .pinnable-content.pinned {background-color: #FFFFFFF7 !important;box-shadow: none !important}
  184.  
  185. /* Bottom Page */
  186. .footer {display:none}
  187. .footer-parent {opacity:0}
  188. .debuginfo {display:none}
  189. .bottommenu {opacity:0}
  190.  
  191. .email-collection-banner {display:none !important}
  192.  
  193. .infobar.listingsignupbar {display: none !important;}
  194.  
  195. /* promoted posts/ads */
  196. .link.promotedlink.promoted, .link.promotedlink.external {display:none !important}
  197.  
  198. /* Navbar */
  199. .nav-buttons {
  200. display:table;
  201. bottom: 0 !important;
  202. right: 0 !important;
  203. text-align: center !important;
  204. border: 3px solid;
  205. border-color: #cee3f8;
  206. border-top-left-radius: 15px;
  207. background-color: #cee3f8;
  208. font-size: larger;
  209. z-index: 9998 !important;
  210. }
  211. .nextprev a {background:none !important}
  212.  
  213.  
  214.  
  215. `;
  216.  
  217. // Add the custom CSS to the page
  218. GM_addStyle(customCSS);
  219.  
  220. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  221.  
  222. function removePostsWithoutImages() {
  223. var posts = document.querySelectorAll('.thumbnail');
  224. for (var i = 0; i < posts.length; i++) {
  225. if (!posts[i].querySelector('img')) {
  226. posts[i].parentNode.removeChild(posts[i]);
  227. }
  228. }
  229. }
  230. setInterval(removePostsWithoutImages, 1000);
  231. })();
  232.  
  233.  
  234. ////////////////////////////////////// comments page //////////////////////////////////
  235.  
  236. var commentpage = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  237. if (commentpage.test(window.location.href)) {
  238. GM_addStyle(`.reportbtn {display:block}
  239. .post-crosspost-button {display:block}
  240. a.comments {display:none}
  241. .buttons .give-gold.gold-give-gold {display:block}
  242. .expando-button {opacity: 1 }
  243. .hide-button {display:block !important}
  244.  
  245.  
  246. .thumbnail,.thumbnail img {width: 100px !important;height: 100px !important;}
  247. #sr-header-area {display:none}`
  248. );
  249.  
  250. /////////////////////add profile pictures next to comments ///////////////////////
  251.  
  252. const addAvatars = async(root=document)=>{
  253. Array.from(root.querySelectorAll('.thing:not(.morechildren)')).forEach(async(thing)=>{
  254. if (!thing) return;
  255. if (thing.hasAttribute('data-reddit-profile-picture')) return;
  256. const img = document.createElement('img'); {
  257. img.classList.add('reddit-profile-picture');
  258. img.style.height = '24px';
  259. img.style.width = '24px';
  260. img.style.float = 'left';
  261. img.style.margin = '0px';
  262. img.style.borderRadius = '12px';
  263. img.style.border = '1px solid #fff0'
  264. thing.insertBefore(img, thing.querySelector('.entry'));
  265. }
  266. thing.setAttribute('data-reddit-profile-picture', 1);
  267. if (!thing.id) return;
  268. const authorElement = thing.querySelector('.author');
  269. if (authorElement && authorElement.href) {
  270. const xhr = new XMLHttpRequest();
  271. xhr.open('GET', `${authorElement.href}/about.json`);
  272. xhr.addEventListener('load', async()=>{
  273. const profile = JSON.parse(xhr.responseText).data;
  274. const ta = document.createElement('textarea');
  275. ta.innerHTML = profile.icon_img;
  276. img.src = ta.value;
  277. });
  278. xhr.send();
  279. }
  280. });
  281. };
  282. addAvatars();
  283.  
  284. const mo = new MutationObserver((muts)=>{
  285. muts.forEach(mut=>{
  286. Array.from(mut.addedNodes).forEach(node=>{
  287. if (node instanceof HTMLElement) {
  288. addAvatars();
  289. }
  290. });
  291. });
  292. });
  293. mo.observe(document.body, {childList: true, subtree: true});
  294. };
  295.  
  296. ////////////////////////////// userpage ///////////////////////////////////////////////////////////////////
  297.  
  298. var userpage = /https:\/\/.*\.reddit\.com\/user\/.*/;
  299. if (userpage.test(window.location.href)) {
  300.  
  301. GM_addStyle(`.comment, .content .details {border-bottom: 2px solid #5f99cf !important}`);
  302.  
  303. const addProfilePictures = async (root = document) => {
  304. Array.from(root.querySelectorAll('.pagename')).forEach(async (pagename) => {
  305. if (!pagename) return;
  306. if (pagename.hasAttribute('data-reddit-profile-picture')) return;
  307.  
  308. const username = pagename.textContent.trim();
  309. if (!username) return;
  310.  
  311. const img = document.createElement('img');
  312. img.classList.add('reddit-profile-picture');
  313. img.style.height = '35px';
  314. img.style.width = '35px';
  315. img.style.verticalAlign = 'middle';
  316.  
  317.  
  318. pagename.parentNode.insertBefore(img, pagename.nextSibling);
  319.  
  320. pagename.setAttribute('data-reddit-profile-picture', 1);
  321.  
  322. const xhr = new XMLHttpRequest();
  323. xhr.open('GET', `https://www.reddit.com/user/${username}/about.json`);
  324. xhr.addEventListener('load', async () => {
  325. const profile = JSON.parse(xhr.responseText).data;
  326. const ta = document.createElement('textarea');
  327. ta.innerHTML = profile.icon_img;
  328. img.src = ta.value;
  329. });
  330. xhr.send();
  331. });
  332. };
  333.  
  334. addProfilePictures();
  335.  
  336. const mo = new MutationObserver((muts) => {
  337. muts.forEach((mut) => {
  338. Array.from(mut.addedNodes).forEach((node) => {
  339. if (node instanceof HTMLElement) {
  340. addProfilePictures(node);
  341. }
  342. });
  343. });
  344. });
  345.  
  346. mo.observe(document.body, { childList: true, subtree: true });
  347. };
  348.  
  349.  
  350. //////////////////////////////////////////// red numbers if score is less than one //////////////////////////////////////
  351.  
  352. if (userpage.test(window.location.href) || commentpage.test(window.location.href)) {
  353. (function() {
  354. 'use strict';
  355.  
  356. // Function to check if the text starts with a "-" or "0"
  357. function startsWithNegativeSymbolOrZero(text) {
  358. return text.trim().startsWith('-') || text.trim().startsWith('0');
  359. }
  360.  
  361. // Get all elements with class "score likes"
  362. var scoreElements = document.querySelectorAll('.score');
  363.  
  364. // Iterate over each score element using forEach
  365. scoreElements.forEach(function(scoreElement) {
  366. var scoreText = scoreElement.textContent.trim();
  367.  
  368. // Check if the score starts with a "-" or "0"
  369. if (startsWithNegativeSymbolOrZero(scoreText)) {
  370. // Change the color to red
  371. scoreElement.style.color = 'red';
  372. scoreElement.style.fontWeight = 'bold';
  373. } else if (parseFloat(scoreText) > 1) {
  374. // Change the color to green
  375. scoreElement.style.color = 'green';
  376. scoreElement.style.fontWeight = 'bold';
  377. }
  378. });
  379. })();
  380. }
  381.  
  382. /////////////////////////grey out comment-buttons if no comments were written /////////////////////////////////
  383.  
  384.  
  385. if (!commentpage.test(window.location.href)) {
  386.  
  387. 'use strict';
  388.  
  389. const removeCommentsCount = element => {
  390. const text = element.textContent.trim();
  391. if (!isNaN(parseInt(text.charAt(0), 10))) return;
  392. element.closest('.entry .buttons li').style.opacity = '0.2';
  393. };
  394.  
  395. const commentElements = document.querySelectorAll('a.comments');
  396. commentElements.forEach(removeCommentsCount);
  397.  
  398. const observer = new MutationObserver(mutationsList => {
  399. for (const mutation of mutationsList) {
  400. if (mutation.type === 'childList') {
  401. const newCommentElements = mutation.addedNodes;
  402. newCommentElements.forEach(node => {
  403. if (node instanceof HTMLElement) {
  404. const element = node.querySelector('a.comments');
  405. if (element) removeCommentsCount(element);
  406. }
  407. });
  408. }
  409. }
  410.  
  411. });
  412.  
  413. observer.observe(document.body, { childList: true, subtree: true });
  414. };
  415.  
  416. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  417.  
  418. // Custom CSS for the clicked thumbnail
  419. const customCSS = `
  420. /* Makes Clicking Easier */
  421. .thumbnail {z-index:99}
  422.  
  423. .thumbnail.clicked {
  424. width: 80px !important;
  425. height: 80px !important;
  426. border-radius: 15px;
  427. }
  428.  
  429. .thumbnail.clicked img {
  430. width: 80px !important;
  431. height: 80px !important;
  432. }
  433.  
  434. .thing.clicked .arrow.up {display: block}
  435. .thing.clicked .arrow.down {display:block}
  436. `;
  437.  
  438. function expandPostOnElementClick(element) {
  439. const expandoButton = element.closest('.thing').querySelector('.expando-button');
  440.  
  441. if (expandoButton) {
  442. expandoButton.click();
  443. }
  444. }
  445.  
  446. function handleElementClick(event) {
  447. event.stopPropagation();
  448. event.preventDefault();
  449.  
  450. const element = event.currentTarget;
  451. const thumbnail = element.closest('.thumbnail');
  452. const thing = element.closest('.thing');
  453.  
  454. // Check if the thumbnail has the 'clicked' class
  455. const isClicked = thumbnail.classList.contains('clicked');
  456.  
  457. if (isClicked) {
  458. // Remove the 'clicked' class to revert the changes
  459. thumbnail.classList.remove('clicked');
  460. thing.classList.remove('clicked');
  461. } else {
  462. // Add 'clicked' class to the thumbnail
  463. thumbnail.classList.add('clicked');
  464. thing.classList.add('clicked');
  465. }
  466.  
  467. expandPostOnElementClick(element);
  468. }
  469.  
  470. function attachClickListenersToElements() {
  471. const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  472.  
  473. elements.forEach((element) => {
  474. element.addEventListener('click', handleElementClick);
  475. });
  476. }
  477.  
  478. // Add custom CSS styles
  479. GM_addStyle(customCSS);
  480.  
  481. // Attach click listeners to elements initially
  482. attachClickListenersToElements();
  483.  
  484. // Create a MutationObserver to monitor the page for changes
  485. const observer = new MutationObserver(() => {
  486. // Attach click listeners to elements whenever new content is added to the page
  487. attachClickListenersToElements();
  488. });
  489.  
  490. // Start observing the document for changes
  491. observer.observe(document, { childList: true, subtree: true });
  492.  
  493. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  494.  
  495.  
  496. 'use strict';
  497.  
  498. var navButtons = document.getElementsByClassName('nav-buttons');
  499. if (navButtons.length > 0) {
  500. var nav = navButtons[0];
  501. nav.style.position = 'fixed';
  502. }
  503.  
  504. //var headerHeight = header.offsetHeight;
  505. var lastScrollTop = 0;
  506.  
  507.  
  508. window.addEventListener('scroll', function() {
  509. var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  510. var windowHeight = window.innerHeight;
  511. var documentHeight = document.documentElement.scrollHeight;
  512.  
  513. if (scrollTop === 0) {
  514. // Reached the top of the page
  515. nav.style.opacity = '1';
  516. nav.style.pointerEvents = 'auto';
  517. } else {
  518. // Scrolling up
  519. nav.style.opacity = '.8';
  520. nav.style.pointerEvents = 'auto';
  521. }
  522.  
  523. if (scrollTop + windowHeight + 10 >= documentHeight) {
  524. // Reached the end of the page
  525. nav.style.opacity = '1';
  526. nav.style.pointerEvents = 'auto';
  527. } else {
  528. if (scrollTop > lastScrollTop) {
  529. // Scrolling down
  530. nav.style.opacity = '0';
  531. nav.style.pointerEvents = 'none';
  532. }
  533. }
  534.  
  535. lastScrollTop = scrollTop;
  536. });
  537.  
  538.  
  539.  
  540.  
  541. ////////////////////////////////////// Subreddit Icon next to Subreddit name /////////////////////////
  542.  
  543. (function() {
  544. 'use strict';
  545.  
  546. function setSubredditIcon() {
  547. const pagenameLink = document.querySelector('.pagename');
  548. const subredditIcon = document.createElement('img');
  549. subredditIcon.style.verticalAlign = 'middle';
  550. subredditIcon.style.width = 'auto';
  551. subredditIcon.style.height = '35px';
  552.  
  553. const srName = getSrName();
  554.  
  555.  
  556. const srDataUrl = `https://www.reddit.com/r/${srName}/about.json`;
  557. fetch(srDataUrl)
  558. .then(response => response.json())
  559. .then(data => {
  560. const communityIcon = cleanUpCommunityIcon(data.data.community_icon);
  561. const iconUrl = communityIcon || data.data.icon_img || data.data.header_img;
  562. if (!iconUrl || iconUrl.length === 0)
  563. {
  564. return;
  565. }
  566. subredditIcon.src = iconUrl;
  567. pagenameLink.parentNode.insertBefore(subredditIcon, pagenameLink.nextSibling);
  568. })
  569.  
  570. }
  571.  
  572. function getSrName() {
  573. const srNameRegex = /https:[/][/](www|old|new)[.]reddit[.]com[/]r[/](\w+)/g;
  574. const match = srNameRegex.exec(document.location.href);
  575.  
  576. return match[2];
  577. }
  578.  
  579. function cleanUpCommunityIcon(url) {
  580. if (!url || url.length === 0) {
  581. return url;
  582. }
  583. function htmlDecode(input) {
  584. const doc = new DOMParser().parseFromString(input, 'text/html');
  585. return doc.documentElement.textContent;
  586. }
  587. const decodedUrl = htmlDecode(url);
  588. return decodedUrl;
  589. }
  590.  
  591. setSubredditIcon();
  592. })();
  593.  
  594.  
  595.