Mail app Feature Requests : UI enhance
-
show read mail in different colour, not simply a non-bold same colour as unread mail
I've been using this code with the Stylus plugin locally in Firefox to fix this same issue on Roundcube (class name is different though). This one is using the proper class for the CR mail app. It adds a pulsating green dot (customizable) for all unread mail.
.mail-item.unread::before { content: "●"; color:#0dff00; font-size: 16px; animation: pulseUnread 1s infinite; } @keyframes pulseUnread { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }Preview

-
@humpty installed Firefox Stylus plugin.
Works a treat.
Thanks for the recommendation.@timconsidine I also use with Youtube & Facebook to "declutter" the UI a bit
There's a section that redirects you to a site that has user codes that you can browse/add.
-
-
N nebulon marked this topic as a question
-
N nebulon has marked this topic as solved
-
Ok so I think I have fixed all of the original issues:

new package requires new cloudron version, so that is a bit delayed for testing
Ok so I think I have fixed all of the original issues:
Looking forward to testing. BTW, but "the original issues" I presume that's just these ones?
ability to star certain messages
show read mail in different colour, not simply a non-bold same colour as unread mail
sort options include Date up/down and From up/down but To up/down would also be helpful (mail in an inbox is not always to mailbox address)
filter for unread would also be usefulAnd therefore any other UI or additional suggestions shared in this now solved thread ought to get their own new thread to make it easier for you to track?
-
-
ah yes please create a new one for the non-split view to keep track.
from the above issues the toplevel folder creation and the spam mail direct deletion is also fixed
@nebulon I've added three new feature request posts:
https://forum.cloudron.io/topic/16084/mail-app-feature-request-improve-minimized-compose-ux
Thanks!
-
-
-
-
@humpty installed Firefox Stylus plugin.
Works a treat.
Thanks for the recommendation.@timconsidine the latest mail updates changed the code and the circle got wonky so here's an updated version. I went with gold, similar to the app's native yellow for the unread bar and still matches with the blue nicely.
.mail-item.unread { color: #ffbf00 !important; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; }
Edit: This version modifies the starred icon as well (drop in replacement code for the above).
.mail-item.unread { color: #ffbf00 !important; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; } .col-star.starred { color: #ffbf00 !important; animation: glowUnread 1.8s ease-in-out infinite; } @keyframes glowUnread { 0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 1px #f50); } 50% { opacity: 1; filter: drop-shadow(0 0 5px #f50); } } -
@timconsidine the latest mail updates changed the code and the circle got wonky so here's an updated version. I went with gold, similar to the app's native yellow for the unread bar and still matches with the blue nicely.
.mail-item.unread { color: #ffbf00 !important; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; }
Edit: This version modifies the starred icon as well (drop in replacement code for the above).
.mail-item.unread { color: #ffbf00 !important; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; } .col-star.starred { color: #ffbf00 !important; animation: glowUnread 1.8s ease-in-out infinite; } @keyframes glowUnread { 0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 1px #f50); } 50% { opacity: 1; filter: drop-shadow(0 0 5px #f50); } } -
My bad! I did that code when my system was in dark mode and now the yellow isn't visible on the white. I added a dark blue background to make the text pop.
.mail-item.unread { color: #ffbf00 !important; background: #124978; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; } .col-star.starred { color: #ffbf00 !important; animation: glowUnread 1.8s ease-in-out infinite; } @keyframes glowUnread { 0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 1px #f50); } 50% { opacity: 1; filter: drop-shadow(0 0 5px #f50); } } -
My bad! I did that code when my system was in dark mode and now the yellow isn't visible on the white. I added a dark blue background to make the text pop.
.mail-item.unread { color: #ffbf00 !important; background: #124978; animation: pulseUnread 2.3s ease-in-out infinite; } @keyframes pulseUnread { 0%, 100% { opacity: 0.50; } 50% { opacity: 1; } } .mail-item.unread::after { width: 4px !important; background-color: #ffbf00 !important; } .col-star.starred { color: #ffbf00 !important; animation: glowUnread 1.8s ease-in-out infinite; } @keyframes glowUnread { 0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 1px #f50); } 50% { opacity: 1; filter: drop-shadow(0 0 5px #f50); } }
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login
