☰

Hacker News Double Click Collapse and Better Styles

A user script to enchance Hacker News page styles

  1. // ==UserScript==
  2. // @name         Hacker News Double Click Collapse and Better Styles
  3. // @namespace    https://greasyfork.org/en/users/1019658-aayush-dutt
  4. // @version      2.1
  5. // @description  A user script to enchance Hacker News page styles
  6. // @author       aayushdutt
  7. // @match        https://news.ycombinator.com/*
  8. // @grant        none
  9. // @link         https://greasyfork.org/en/scripts/459217-better-hackernews-styles
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.   "use strict";
  15.  
  16.   const styles = `<style>
  17.     .comment,
  18.     .toptext,
  19.     .subtext,
  20.     .spacer {
  21.         font-size: 15px;
  22.         line-height: 1.5;
  23.     }
  24.  
  25.     .toptext {
  26.       color: black;
  27.     }
  28.  
  29.     .title {
  30.         font-size: 16px;
  31.     }
  32.  
  33.     .title a:hover {
  34.       text-decoration: underline;
  35.     }
  36.  
  37.     .comhead,
  38.     .pagetop {
  39.         font-size: 14px;
  40.         line-height: 1.5;
  41.     }
  42.  
  43.     .spacer {
  44.       height: 12px !important;
  45.     }
  46.  
  47.     td > table {
  48.       padding-left: 14px;
  49.     }
  50.   </style>`;
  51.  
  52.   document.head.insertAdjacentHTML("beforeend", styles);
  53.  
  54.   document.querySelectorAll(".comtr").forEach((comment) => {
  55.     let collapseTimeout = null;
  56.  
  57.     comment.addEventListener("dblclick", function (e) {
  58.       const commentId = this.id;
  59.       const toggler = document.querySelector(`a.togg[id="${commentId}"]`);
  60.  
  61.       if (toggler) {
  62.         // Use a small timeout to allow text selection to complete
  63.         clearTimeout(collapseTimeout);
  64.         collapseTimeout = setTimeout(() => {
  65.           toggler.click();
  66.         }, 50);
  67.       }
  68.     });
  69.  
  70.     // Add subtle hover effect
  71.     comment.style.transition = "background-color 0.3s ease";
  72.     comment.addEventListener("mouseenter", () => {
  73.       comment.style.backgroundColor = "rgba(255,102,0,0.03)";
  74.     });
  75.     comment.addEventListener("mouseleave", () => {
  76.       comment.style.backgroundColor = "";
  77.     });
  78.   });
  79.  
  80.   // Add style for visual feedback
  81.   const style = document.createElement("style");
  82.   style.textContent = `
  83.         .comtr {
  84.             position: relative;
  85.             border-radius: 3px;
  86.         }
  87.         .comtr:hover:after {
  88.             content: '';
  89.             position: absolute;
  90.             left: -8px;
  91.             top: 0;
  92.             height: 100%;
  93.             width: 3px;
  94.             background: rgba(255,102,0,0.3);
  95.         }
  96.     `;
  97.   document.head.appendChild(style);
  98. })();