Last active
October 10, 2025 08:37
-
-
Save guillaumealgis/3a205f2cddb2ee8f73c33ce66da475cb to your computer and use it in GitHub Desktop.
Larger Trello CSS injection
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /********************** | |
| Larger cards | |
| ***********************/ | |
| #layer-manager-card-back div[role="dialog"] { | |
| width: 90vw; | |
| } | |
| #layer-manager-card-back div[role="dialog"] main > div { | |
| max-width: none; | |
| } | |
| #layer-manager-card-back div[role="dialog"] aside, | |
| #layer-manager-card-back div[role="dialog"] aside > div, | |
| div[role="dialog"]:has(#board-switcher) { | |
| width: 45vw !important; | |
| } | |
| /****************************** | |
| Smaller notifications count label | |
| *******************************/ | |
| div:has(> div > button[data-testid="header-notifications-button"]) > div:nth-child(2) span { | |
| font-size: 90%; | |
| } | |
| /****************************** | |
| Larger notifications panel | |
| *******************************/ | |
| .atlaskit-portal > section { | |
| inset: 48px auto auto calc(100vw - 636px) !important; | |
| width: 632px !important; /* 432px + 200px */ | |
| } | |
| /* Hide "Mark all as read" */ | |
| #notifications-menu-popover-content > div:nth-child(2) { | |
| // width: 604px; /* 404px + 200px */ | |
| display: none; | |
| } | |
| #notifications-menu-popover-content div[data-testid="unread-notification"] > div { | |
| width: 560px; /* 360px + 200px */ | |
| } | |
| #notifications-menu-popover-content div[data-testid="unread-notification"] > div > div:nth-child(2) { | |
| width: 560px !important; /* 360px + 200px */ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function waitForElm(selector) { | |
| return new Promise((resolve) => { | |
| if (document.querySelector(selector)) { | |
| return resolve(document.querySelector(selector)); | |
| } | |
| const observer = new MutationObserver((mutations) => { | |
| if (document.querySelector(selector)) { | |
| observer.disconnect(); | |
| resolve(document.querySelector(selector)); | |
| } | |
| }); | |
| observer.observe(document.body, { | |
| childList: true, | |
| subtree: true, | |
| }); | |
| }); | |
| } | |
| function waitForSibling(elt) { | |
| return new Promise((resolve) => { | |
| if (elt.nextSibling) { | |
| return resolve(elt.nextSibling); | |
| } | |
| const observer = new MutationObserver((mutations) => { | |
| if (elt.nextSibling) { | |
| observer.disconnect(); | |
| resolve(elt.nextSibling); | |
| } | |
| }); | |
| observer.observe(elt.parentElement, { | |
| childList: true, | |
| }); | |
| }); | |
| } | |
| // Always show the full notifications count, not "9+". | |
| function updateNotifCountLabel(maxNotifShown = 999) { | |
| waitForElm('[data-testid="header-notifications-button"]').then( | |
| (notificationsButton) => { | |
| const parentElement = notificationsButton.parentElement; | |
| waitForSibling(parentElement).then((nextSibling) => { | |
| const notifLabel = nextSibling.firstChild; | |
| let notifCount = notificationsButton.ariaLabel; | |
| notifCount = notifCount.replace(/\s+notifications?/i, ""); | |
| if (parseInt(notifCount, 10) > maxNotifShown) { | |
| notifCount = maxNotifShown + "+"; | |
| } | |
| notifLabel.textContent = notifCount; | |
| }); | |
| }, | |
| ); | |
| } | |
| document.addEventListener("DOMContentLoaded", (event) => { | |
| updateNotifCountLabel(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment