Reddit CSS

New Design with new functionalities

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

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