style.js (8049B)
1 // Inspired by the Stylus app: <https://addons.mozilla.org/en-GB/firefox/addon/styl-us/> 2 3 // NOTE: This file is moved to /opt/rosenrot, so editing it here doesn't have direct effects on the runtime!! 4 5 // Main part of the code: switch on the domain and select the corresponding style 6 var styles = null; 7 // console.log(document.domain); 8 switch (document.domain) { 9 case "forum.effectivealtruism.org": 10 styles = ` 11 /* 12 .Layout-main { 13 margin-left: 100px; 14 } 15 .SingleColumnSection-root { 16 width: 1000px !important; 17 max-width: 1400px !important; 18 padding-left: 100px !important; 19 } 20 .NavigationStandalone-sidebar { 21 display: none; 22 } 23 .intercom-lightweight-app{ 24 display: none; 25 } 26 */ 27 `; 28 break; 29 case "nationstates.net": 30 styles = ` 31 .adidentifier { 32 display: none; 33 } 34 `; 35 break; 36 case "mail.proton.me": 37 styles = ` 38 /* 39 .item-container-row.read, .item-container.read { 40 background-color: white; 41 } 42 .item-container-row.unread, .item-container.unread { 43 background-color: #E8E8E8; 44 } 45 .selection .item-container-row.item-is-selected, .item-container.item-is-selected { 46 background-color: var(--selection-background-color) !important; 47 } 48 zoom: 0.625 !important; 49 */ 50 `; 51 break; 52 case "forum.nunosempere.com": 53 styles = ` 54 body { 55 zoom: 0.625 !important; 56 } 57 `; 58 break; 59 case "search.brave.com": 60 styles = ` 61 .download-button, 62 a[href^="https://brave.com/download/"] { 63 display: none !important; 64 } 65 `; 66 break; 67 case "search.nunosempere.com": 68 styles = ` 69 /* 70 body { 71 zoom: 1.8; 72 } 73 */ 74 75 footer { 76 display: none; 77 } 78 `; 79 break; 80 case "reddit.com": 81 // fallthrough 82 case "old.reddit.com": 83 styles = ` 84 /* kill sidebar ads */ 85 .ad-container, 86 a[href^="https://alb.reddit.com"] 87 a[href="/premium"], 88 [data-promoted^="true"], 89 #eu-cookie-policy, 90 .infobar-toaster-container, 91 .listingsignupbar, 92 .native-ad-container, 93 .native-sidebar-ad, 94 .premium-banner-outer, 95 .promotedlink, 96 .promoted 97 { 98 display: none !important; 99 } 100 `; 101 break; 102 case "twitter.com": 103 case "x.com": 104 styles = ` 105 /* hide promoted tweets */ 106 :has(meta[property="og:site_name"][content="Twitter"]) 107 [data-testid="cellInnerDiv"]:has(svg + [dir="auto"]) { 108 display: none; 109 } 110 [data-testid^="placementTracking"] { 111 display: none; 112 } 113 114 /* hide what's happening section */ 115 :has(meta[property="og:site_name"][content="Twitter"]) 116 [aria-label="Timeline: Trending now"] { 117 display: none !important; 118 } 119 [data-testid^="sidebarColumn"] { 120 display: none !important; 121 } 122 123 /* Hide DMs v2 */ 124 [data-testid^="DMDrawerHeader"] { 125 display: none; 126 } 127 128 /* Tweak main column */ 129 [data-testid^="primaryColumn"] { 130 min-width: 900px; 131 max-width: 900px; 132 } 133 [data-testid^="cellInnerDiv"] { 134 min-width: 700px; 135 max-width: 700px; 136 } 137 [aria-label^="Timeline: Conversation"]{ 138 margin-left: 145px; 139 } 140 [data-testid^="DMDrawer"]{ 141 display: none; 142 } 143 144 /* Delete a few unused or annoying elements */ 145 [aria-label^="Verified Orgs"] { 146 display: none; 147 } 148 [aria-label^="Lists"] { 149 display: none; 150 } 151 [aria-label^="Communities"] { 152 display: none; 153 } 154 [aria-label^="Primary"] { 155 margin-top: 50px; 156 } 157 [role^="progressbar"]{ 158 display: none; 159 } 160 161 /* hide video */ 162 [data-testid^="videoPlayer"] { 163 display: none !important; 164 } 165 166 /* 167 No change of colors in hover: seemed like a good idea 168 but it fucks up going back and forth 169 *:hover { 170 background-color: white !important; 171 background-color: inherit !important; 172 transition: none !important; 173 } 174 */ 175 /* Hide go to top button */ 176 [aria-label^="New posts are available. Push the period key to go to the them."]{ 177 display: none; 178 } 179 180 /* No transparency at the top */ 181 [aria-live^="polite"]{ 182 background: white !important; 183 } 184 `; 185 break; 186 default: 187 console.log(`Domain: ${document.domain}`); 188 console.log("No custom style"); 189 } 190 191 if (styles != null) { 192 var styleSheet = document.createElement("style"); 193 styleSheet.innerText = styles; 194 document.head.appendChild(styleSheet); 195 console.log("Style changed"); 196 } 197 198 // Extra: Replace default alert with new function 199 // whose style can be changed! 200 window.alert = (message) => { 201 let alertDiv = document.getElementById("customAlert"); 202 if (!alertDiv) { 203 const html = ` 204 <div id="customAlert" class="custom-alert"> 205 <div class="custom-alert-content"> 206 <p id="alertMessage"></p> 207 <button id="alertOkButton">OK</button> 208 </div> 209 </div> 210 <style> 211 .custom-alert { 212 display: none; 213 position: fixed; 214 z-index: 999; 215 left: 0; 216 top: 0; 217 width: 100%; 218 height: 100%; 219 overflow: auto; 220 background-color: rgba(0,0,0,0.4); 221 } 222 .custom-alert-content { 223 background-color: #fefefe; 224 margin: 15% auto; 225 padding: 20px; 226 border: 1px solid #888; 227 width: 80%; 228 font-family: monospace; /* Use monospace font */ 229 } 230 .visible { 231 display: block; 232 } 233 </style> 234 `; 235 document.body.insertAdjacentHTML("beforeend", html); 236 alertDiv = document.getElementById("customAlert"); 237 document.getElementById("alertOkButton").onclick = () => { 238 alertDiv.classList.remove("visible"); 239 document.removeEventListener("keydown", dismissAlert); 240 }; 241 } 242 243 const dismissAlert = (event) => { 244 if ( 245 event.key === "Enter" /*&& event.ctrlKey*/ && 246 alertDiv.classList.contains("visible") 247 ) { 248 alertDiv.classList.remove("visible"); 249 document.removeEventListener("keydown", dismissAlert); 250 } 251 }; 252 253 document.addEventListener("keydown", dismissAlert); 254 document.getElementById("alertMessage").textContent = message; 255 alertDiv.classList.add("visible"); 256 }; 257 258 // Extra: hide video players on twitter 259 if (document.domain == "twitter.com" || document.domain == "x.com") { 260 // Function to hide the grandparent of video players 261 // takes 0.014ms to run, so performance is not the concern here. 262 // timed with console.time, console.timeEnd 263 264 function hideVideoPlayerGrandparent() { 265 document 266 .querySelectorAll('[data-testid="videoPlayer"]') 267 .forEach(function (videoPlayer) { 268 var grandparentElement = 269 videoPlayer.parentElement.parentElement.parentElement.parentElement 270 .parentElement.parentElement; 271 var newTextElement = document.createElement("div"); 272 newTextElement.textContent = " [ twitter video ] "; 273 newTextElement.style["margin-top"] = "10px"; 274 newTextElement.style["margin-left"] = "10px"; 275 newTextElement.style["margin-bottom"] = "10px"; 276 grandparentElement.replaceWith(newTextElement); 277 }); 278 } 279 280 // Create a new MutationObserver instance 281 var observer = new MutationObserver(function (mutations) { 282 mutations.forEach(function (mutation) { 283 if (mutation.addedNodes.length) { 284 hideVideoPlayerGrandparent(); // Call the function to hide video players 285 } 286 }); 287 }); 288 289 // Options for the observer (which mutations to observe) 290 var config = { childList: true, subtree: true }; 291 292 // Start observing the target node for configured mutations 293 observer.observe(document.body, config); 294 295 // Call the function initially to hide any video players on initial load 296 hideVideoPlayerGrandparent(); 297 } 298 299 // document.body.style.visibility = "visible";