Reddit CSS

Bigger Thumbnails and Clicking Functionality

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

  1. // ==UserScript==
  2. // @name Reddit CSS
  3. // @namespace https://www.reddit.com
  4. // @version 2.5
  5. // @description Bigger Thumbnails and Clicking Functionality
  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. (function() {
  14. 'use strict';
  15.  
  16. // Define the CSS to enlarge the thumbnails and modify the styling
  17. var customCSS = `
  18. /* Video Controls for Mobile */
  19. video::-webkit-media-controls-panel {background: none; opacity:.6}
  20. video::-webkit-media-controls-overlay-play-button {opacity: 0;}
  21.  
  22. /* Flair Labels */
  23. .flairrichtext {border-radius: 20px;}
  24. .linkflairlabel {border-radius: 5px;}
  25.  
  26. /* Subreddit Name */
  27. body.with-listing-chooser #header .pagename {position:inherit; color: white}
  28. .pagename a {color: black; margin-left:4px; margin-right:4px}
  29. .pagename {background-color:white; border-radius:5px}
  30.  
  31. /* Increase the width and height of the thumbnail */
  32. .thumbnail img {
  33. width: 180px !important;
  34. height: 180px !important;
  35. }
  36.  
  37. /* Adjust the size of the thumbnail container */
  38. .thumbnail {
  39. width: 180px !important;
  40. height: 180px !important;
  41. position: relative;
  42. margin-bottom: 0;
  43. }
  44.  
  45. /* Post */
  46. .thing .title {font-weight: normal;color: #000; ;margin-bottom: 15px;}
  47. .subreddit {font-weight: bold;font-size: larger;color: #000;}
  48. .link .flat-list {font-size:larger}
  49. .link.last-clicked {border: 3px dotted red;}
  50.  
  51. /* Text Posts Background*/
  52. .link .usertext-body .md {background: none; border: 1px dotted gray}
  53.  
  54. /* Post Details */
  55. .entry .buttons li a {color:#000000c7; font-weight:normal}
  56. .entry .buttons li {background: #0000000d;border-radius: 10px;}
  57. .stamp {background-color:white; font-weight: bold}
  58. .tagline {color: #8880; margin-bottom: 15px;}
  59. .tagline .live-timestamp {color: #369}
  60. .domain {display: none;}
  61. .reportbtn {display:none}
  62. .post-crosspost-button {display:none}
  63. .post-sharing-button {display:none}
  64. .buttons .give-gold.gold-give-gold {display: none}
  65. .expando-button {opacity:0.5}
  66.  
  67.  
  68. /* Header Font Size and Icon */
  69. #header-bottom-left {font-size: large;}
  70. #header-img.default-header:not(:hover) {opacity: 0.05}
  71. /* Hide Username */
  72. .user:not(:hover) {opacity: 0;}
  73. #header-bottom-right:not(:hover) {background: none}
  74. #header-bottom-right {font-size: larger;}
  75. #header {border-bottom: 3px solid #5f99cf;}
  76. #header-bottom-left {margin-top: -10px;}
  77.  
  78.  
  79. /* Upper Bars */
  80. #sr-header-area:not(:hover) {background: none !important;border-bottom: none; opacity:0.3 }
  81. #sr-header-area:not(:hover) .redesign-beta-optin {opacity: 0}
  82. .separator {color: transparent;}
  83. #header-bottom-left {margin-top: -10px;}
  84. a[href="https://old.reddit.com/wiki/"].choice {display: none;}
  85. .tabmenu li a {background:none;opacity:0.6;font-weight: normal;}
  86. .tabmenu li.selected a {opacity:1;font-weight: bold;font-size: x-large; background-color: white; border: 3px solid #5f99cf;border-bottom-color: rgb(95, 153, 207);border-bottom-style: solid;border-bottom-width: 3px;border-bottom: 3px solid white;}
  87. .tabmenu li.selected a {border-top-right-radius: 5px;border-top-left-radius: 5px;}
  88.  
  89.  
  90.  
  91.  
  92. /* Sidebar */
  93. .sidecontentbox .content {border: none}
  94. .premium-banner {display:none}
  95. .login-form-side {border-radius: 5px;}
  96.  
  97. /* Search */
  98. #search input[type="text"] {border-radius:5px}
  99. #searchexpando {border-radius:9px}
  100.  
  101. /* Videoplayer Background */
  102. .reddit-video-player-root {background: #0000;}
  103.  
  104. /* Video Duration Info */
  105. .duration-overlay {font-size: 10pt; font-weight: bold;}
  106. .duration-overlay {border-top-left-radius: 50px;border-top-right-radius: 50px;}
  107.  
  108. /* Space between Posts */
  109. .link {margin-bottom: 0px;}
  110.  
  111. /* Expanded Post Margins */
  112. .expando {margin: 0}
  113.  
  114. /* Gallery Buttons */
  115. .media-gallery .gallery-nav-bar {font-size:large}
  116.  
  117.  
  118. /* Rank / Scores */
  119. .link .rank {display: none}
  120. .arrow.up {display: none}
  121. .arrow.down {display: none}
  122.  
  123. /* Comment Page */
  124. .panestack-title { padding-bottom: 0px; border-bottom: none;}
  125. .commentarea .menuarea {font-size: large;}
  126. .comment .author {font-size: larger;float:left}
  127. .comment .expand {font-size: large;float:left; opacity:1}
  128. .comment .expand:not(:hover) { opacity:0.1}
  129. .commentarea > .usertext:not(:hover) {opacity:0.3; height: 20px}
  130. .commentarea .entry .buttons:not(:hover) {opacity:0;}
  131. .comments-page #siteTable .thing {display: flex !important;border: none;}
  132. .comment .tagline {color: #00000069 ; margin-bottom: 15px; text-align:left}
  133. .comment .child {border-left: dotted 3px #000000}
  134. .comment .score {font-size: larger}
  135. .comments-page .arrow.up {display:block}
  136. .comments-page .arrow.down {display:block}
  137. .comments-page .thumbnail {display:none}
  138.  
  139. /* Bottom Page */
  140. .footer {display:none}
  141. .footer-parent {opacity:0}
  142. .debuginfo {display:none}
  143. .bottommenu {opacity:0}
  144.  
  145. /* Navbar */
  146. .nav-buttons {
  147. display:table;
  148. bottom: 0 !important;
  149. right: 0 !important;
  150. text-align: center !important;
  151. border: 3px solid;
  152. border-color: #cee3f8;
  153. border-radius: 10px;
  154. background-color: #cee3f8;
  155. font-size: larger;
  156. z-index: 9998 !important;
  157. }
  158. .nextprev a {background:none !important}
  159.  
  160.  
  161.  
  162. `;
  163.  
  164. // Add the custom CSS to the page
  165. GM_addStyle(customCSS);
  166.  
  167. ////////////////////// Remove thumbnails from posts without thumbnails////////////////////////
  168.  
  169. function removePostsWithoutImages() {
  170. var posts = document.querySelectorAll('.thumbnail');
  171. for (var i = 0; i < posts.length; i++) {
  172. if (!posts[i].querySelector('img')) {
  173. posts[i].parentNode.removeChild(posts[i]);
  174. }
  175. }
  176. }
  177. setInterval(removePostsWithoutImages, 1000);
  178. })();
  179.  
  180.  
  181. ///////////////////////// Show all post options on comments page /////////////////////////////
  182.  
  183. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  184. if (excludedPattern.test(window.location.href)) {
  185. GM_addStyle(`.reportbtn {display:block}
  186. .post-crosspost-button {display:block}
  187. .post-sharing-button {display:block}
  188. .buttons .give-gold.gold-give-gold {display: block}
  189. .expando-button {opacity: 1 } `);
  190. }
  191.  
  192.  
  193. /////////////////////////////////////////////////Thumbnail Click Functionality //////////////////
  194.  
  195. // Custom CSS for the clicked thumbnail
  196. const customCSS = `
  197. /* Makes Clicking Easier */
  198. .thumbnail {z-index:99}
  199.  
  200. .thumbnail.clicked {
  201. width: 80px !important;
  202. height: 80px !important;
  203. border-top-right-radius: 15px;
  204. border-bottom-right-radius: 15px;
  205. }
  206.  
  207. .thumbnail.clicked img {
  208. width: 80px !important;
  209. height: 80px !important;
  210. }
  211.  
  212. .thing.clicked .arrow.up {display: block}
  213. .thing.clicked .arrow.down {display:block}
  214. `;
  215.  
  216. function expandPostOnElementClick(element) {
  217. const expandoButton = element.closest('.thing').querySelector('.expando-button');
  218.  
  219. if (expandoButton) {
  220. expandoButton.click();
  221. }
  222. }
  223.  
  224. function handleElementClick(event) {
  225. event.stopPropagation();
  226. event.preventDefault();
  227.  
  228. const element = event.currentTarget;
  229. const thumbnail = element.closest('.thumbnail');
  230. const thing = element.closest('.thing');
  231.  
  232. // Check if the thumbnail has the 'clicked' class
  233. const isClicked = thumbnail.classList.contains('clicked');
  234.  
  235. if (isClicked) {
  236. // Remove the 'clicked' class to revert the changes
  237. thumbnail.classList.remove('clicked');
  238. thing.classList.remove('clicked');
  239. } else {
  240. // Add 'clicked' class to the thumbnail
  241. thumbnail.classList.add('clicked');
  242. thing.classList.add('clicked');
  243. }
  244.  
  245. expandPostOnElementClick(element);
  246. }
  247.  
  248. function attachClickListenersToElements() {
  249. const elements = document.querySelectorAll('.thumbnail, img[src*="external-preview.redd.it"]');
  250.  
  251. elements.forEach((element) => {
  252. element.addEventListener('click', handleElementClick);
  253. });
  254. }
  255.  
  256. // Add custom CSS styles
  257. GM_addStyle(customCSS);
  258.  
  259. // Attach click listeners to elements initially
  260. attachClickListenersToElements();
  261.  
  262. // Create a MutationObserver to monitor the page for changes
  263. const observer = new MutationObserver(() => {
  264. // Attach click listeners to elements whenever new content is added to the page
  265. attachClickListenersToElements();
  266. });
  267.  
  268. // Start observing the document for changes
  269. observer.observe(document, { childList: true, subtree: true });
  270.  
  271. /////////////////////Toggle Nav-Bar On Scroll /////////////////////////////////////////////////////////////
  272.  
  273.  
  274. 'use strict';
  275.  
  276. var navButtons = document.getElementsByClassName('nav-buttons');
  277. if (navButtons.length > 0) {
  278. var nav = navButtons[0];
  279. nav.style.position = 'fixed';
  280. }
  281.  
  282. //var headerHeight = header.offsetHeight;
  283. var lastScrollTop = 0;
  284.  
  285.  
  286. window.addEventListener('scroll', function() {
  287. var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  288. var windowHeight = window.innerHeight;
  289. var documentHeight = document.documentElement.scrollHeight;
  290.  
  291. if (scrollTop === 0) {
  292. // Reached the top of the page
  293. nav.style.opacity = '1';
  294. nav.style.pointerEvents = 'auto';
  295. } else {
  296. // Scrolling up
  297. nav.style.opacity = '.8';
  298. nav.style.pointerEvents = 'auto';
  299. }
  300.  
  301. if (scrollTop + windowHeight >= documentHeight) {
  302. // Reached the end of the page
  303. nav.style.opacity = '1';
  304. nav.style.pointerEvents = 'auto';
  305. } else {
  306. if (scrollTop > lastScrollTop) {
  307. // Scrolling down
  308. nav.style.opacity = '0';
  309. nav.style.pointerEvents = 'none';
  310. }
  311. }
  312.  
  313. lastScrollTop = scrollTop;
  314. });
  315.  
  316.  
  317. /////////////////////////grey out post-buttons if no comments were written /////////////////////////////////
  318. (function() {
  319.  
  320. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/; //dont grey out on comment page
  321. if (!excludedPattern.test(window.location.href)) {
  322.  
  323. 'use strict';
  324.  
  325. const removeCommentsCount = element => {
  326. const text = element.textContent.trim();
  327. if (!isNaN(parseInt(text.charAt(0), 10))) return;
  328. element.closest('ul.flat-list.buttons').style.opacity = '0.2';
  329. };
  330.  
  331. const commentElements = document.querySelectorAll('a.comments');
  332. commentElements.forEach(removeCommentsCount);
  333.  
  334. const observer = new MutationObserver(mutationsList => {
  335. for (const mutation of mutationsList) {
  336. if (mutation.type === 'childList') {
  337. const newCommentElements = mutation.addedNodes;
  338. newCommentElements.forEach(node => {
  339. if (node instanceof HTMLElement) {
  340. const element = node.querySelector('a.comments');
  341. if (element) removeCommentsCount(element);
  342. }
  343. });
  344. }
  345. }
  346.  
  347. });
  348.  
  349. observer.observe(document.body, { childList: true, subtree: true }); }
  350. })();
  351.  
  352.