EmailDiscussions.com

EmailDiscussions.com (http://www.emaildiscussions.com/index.php)
-   FastMail Forum (http://www.emaildiscussions.com/forumdisplay.php?f=27)
-   -   CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylish! (http://www.emaildiscussions.com/showthread.php?t=72816)

joe_devore 5 Jul 2017 10:58 AM

CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylus!
 
Gsptlsnz's CUSTOM CSS Tweaks for FastMail's New UI,
using the Firefox extension "Stylus"
https://addons.mozilla.org/en-US/firefox/addon/styl-us/



Thread STARTED by me since..
Gsptlsnz didn't feel like bothering lol.. :p lol ;)

This is to show off and discus his and any others tweaks
IN AN EFFORT to SAVE FastMail FROM certain DOOM..!
:D :D :D ;) ;) ;) :cool: :cool: :p


This is Gsptlsnz's main and first post of his major tweaks!
and some have been been updated for for new FastMail changes...
Quote:

Originally Posted by Gsptlsnz (Post 602857)
This is my custom CSS code. Makes the screen look similar to Concise.

---

@-moz-document domain("fastmail.com")
{
/* Puts a count badge on every folder except SENT and TRASH and shows number of unread */
.v-MailboxSource-badge
{
display:inline-block;
text-shadow:1px 1px 1px #808080;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
font-size:10.5pt;
}


/* Put a box around "MAIL Storage Quota" at bottom left of the screen. */
/* Tweaked version that also adds a 5 pixel thick border around the box. */
.v-Quota
{
border: 5px solid green;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}


/* Makes the check-boxes 3-D. */
.app-listItem-boxInput {
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Sets the color of email windows on the main screen */
.app-listItem {
background-color:#F5F5F5;
}

/* Makes pinned rows ivory */
.is-pinned {
background-color:aliceblue;
}

/* Puts a thin border between the emails */
.v-MailboxItem
{
border-top:3px solid green;
}

/* Makes Name of Sender Green */
.v-MailboxItem-from {
color:darkgreen;
}

/* Sets color/size of the previews */
.v-MailboxItem-preview {
color:black;
font-size:12pt;
}

/* Makes the address book drop-down menu larger */
.v-AutoComplete {
font-size:14pt;
}

/* Makes word 'To' crimson */
.s-compose-to {
font-size:16pt;
color:crimson;
}

/* Makes word 'Subject' green */
.s-compose-subject {
font-size:11pt;
color:green;
}

/* Shows name of Folder you are in */
.v-MessageCard-folder {
background-color:hotpink;
padding-left:4px;
padding-right:4px;
font-size:12.5pt;
color:white;
text-shadow:1px 1px 1px #000;
border-radius:5px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes email addy navy */
.v-EmailText-ghost {
color:navy;
}

/* Makes name of email writer green */
.v-MessageCard-fromAndPreview {
font-size:14pt;
color:darkgreen;
}

/* Affects 'Mail' in upper left corner */
.v-MainNavToolbar-appName {
color:gold;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}

/* User name in red letters */
.v-MainNavToolbar-userName {
color:red;
border-bottom:1px solid white;
}

/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}

a:link {
color:navy;
text-decoration:none;
}

a:hover {
color:#DD0000;
}

/* Affects 'Newer' and 'Older' links at page top */
.v-ThreadNav-text {
color:red;
font-weight:bold;
font-size:13pt;
text-shadow:1px 1px 1px #000;
}

/* Adds gold box around 'Show Details' link */
.u-subtleLink {
color:navy;
background-color:gold;
padding-left:3px;
padding-right:3px;
border-radius:4px;
}

/* Controls textarea where you read the email */
.v-Message-body {
background-color:#F5F5F5;
padding:5px;
width:748px;
font-family:verdana;
font-size:13pt;
margin-bottom:15px;
margin-top:15px;
border-radius:11px;
border:1px solid #F5F5F5;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

span {
font-size:11pt;
}

.v-MessageCard-time, .v-Compose-lastSaved {
margin-top:-5px;
padding:0px;
background-color:transparent;
color:darkgreen;
}

/* Affects the Red and White square on the upper left */
i.icon.icon-compose {
color:crimson;
background-color:white;
padding:3px;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes 'Reply' and 'Send' Buttons Green */
i.icon.icon-reply, i.icon.icon-paper-plane {
color:black;
background-color:lime;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Turns 'Draft' Button Yellow */
i.icon.icon-cloud-upload {
color:yellow;
background-color:black;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Adds shading to the toolbars */
.app-viewBar, .v-Toolbar, .app-toolbar {
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Controls the textarea where you write emails */
.v-Text {
border-radius:11px;
background-color:#F5DEB3;
border:2px solid #808080;
font-size:13pt;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes 'Trash Can' Icon Crimson */
i.icon.icon-remove {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* Makes 'Drafts' Icon Purple */
i.icon.icon-file {
color:purple;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* Affects 'Delete Draft' Icon */
i.icon.icon-blocked {
color:red;
background-color:white;
border-radius:9px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Affects 'Archive' Icon */
i.icon.icon-box {
color:goldenrod;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

h1 {
font-weight:bold;
color:#A10000;
border-bottom:0px solid black;
text-shadow:1px 1px 1px #808080;
}

.v-ComposeFrom-name {
margin-top:-8px;
}

.app-main {
background-color:beige;
}

select {
font-size:12.5pt;
font-weight:normal;
font-family:verdana,arial,helvetica,sans-serif;
cursor:pointer;
border-color:black;
color:#00FF00;
background-color:black;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
text-transform:capitalize;
}

option {
font-size:12.5pt;
font-weight:normal;
font-family:verdana,arial,helvetica,sans-serif;
cursor:pointer;
border-color:black;
color:#00FF00;
background-color:black;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

}



___________________________________________________________________________
NEW CSS TWEAK created by Gsptlsnz posted on (07/10/2017 @ 01:13 PM EST)

Quote:

Originally Posted by Gsptlsnz (Post 602959)
Some more tweaks...

/* Makes selected Folder crimson and shaded */
.is-selected {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Affects the folder count in the lower right corner */
.v-StatusBar {
color:crimson;
font-size:15pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

/* Affects the folder count (on hover) in the lower right corner */
.v-StatusBar:hover {
color:transparent;
background-color:transparent;
border:0px solid transparent;
}

/* Affects the Settings --> "RULES" page */
/* Affects the "Spam Rules" page */
.v-ResourceItem-explanation {
color:green;
font-size:13pt;
}

/* The 'Trash Can' Icon Has Red Background And 3D */
i.icon.icon-remove {
color:white;
background-color:red;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

NEW TWEAK FROM Gsptlsnz!
Quote:

Originally Posted by Gsptlsnz
/* Puts a border under the 'Trash' folder */
.v-MailboxSource--trash
{
border-bottom:2px solid blue;
}



Quote:

Originally Posted by Gsptlsnz
/* 1a - 'Inbox' Icon Has A LimeGreen Background And Is 3D */
i.icon.icon-drawer
{
background-color:limegreen;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 1b - 'Inbox' Folder Path Is Now LimeGreen */
.v-MailboxSource--inbox
{
background-color:limegreen;
}

/* 2a - 'Sent' Icon Has A Lightblue Background And Is 3D */
i.icon.icon-paper-plane
{
background-color:lightblue;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 2b - 'Sent' Folder Path Is Now Lightblue */
.v-MailboxSource--sent
{
background-color:lightblue;
}

/* 3a - 'Drafts' Icon Has An Orange Background And Is 3D */
i.icon.icon-file
{
background-color:orange;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 3b - 'Drafts' Folder Path Is Now Orange */
.v-MailboxSource--drafts
{
background-color:orange;
}

/* 4a - 'Trash' Icon Has A Turquoise Background And Is 3D */
i.icon.icon-remove
{
color:white;
background-color:turquoise;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 4b - 'Trash' Folder Path Is Now Red */
.v-MailboxSource--trash
{
background-color:turquoise;
}

ran out of room in the opening post so...
please read rest of the topic to find the rest of the css tweaks...

Terry 5 Jul 2017 04:58 PM

Thank you, all I have to now is work out how to change the colour a little on the left....:D:D:D

joe_devore 5 Jul 2017 05:01 PM

Quote:

Originally Posted by Terry (Post 602881)
Thank you, all I have to now is work out how to change the colour a little on the left....:D:D:D

lol :D ;) :cool:


you can try different color code words... or if its in a hex code you can just GOOGLE those ;) :p
and Stylish has a built in error checking too ;)

Gsptlsnz 5 Jul 2017 10:52 PM

Quote:

Originally Posted by Terry (Post 602881)
Thank you, all I have to do now is work out how to change the colour a little on the left.... :D :D :D

Edit this:

Code:

/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}

Color charts:
http://htmlcolorcodes.com/color-char...n-color-chart/

joe_devore 6 Jul 2017 12:45 AM

ok, done it a sec... OK done!
OOOh 'Gsptlsnz" THIS is why you should have started the topic..!!
lol :rolleyes: ;) ;) ;) :p :p :p

best thing is to ask a MODERATOR to see if they can add you as an author
to the opening post or switch it over to you from me :P

somdcomputerguy 6 Jul 2017 03:25 AM

Quote:

Originally Posted by Gsptlsnz (Post 602883)

I use the ColorZilla plugin. It is a Firefox add-on, but I don't use that browser. That plugin (and Stylish..) work with the browser I use primarily though. I have added that color code link to my bookmarks though, for when I have to use another browser. :)

- Bruce

Terry 6 Jul 2017 07:16 AM

Quote:

Originally Posted by Gsptlsnz (Post 602883)
Edit this:

Code:

/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}

Color charts:
http://htmlcolorcodes.com/color-char...n-color-chart/

Thank you....:D

Gsptlsnz 11 Jul 2017 02:13 AM

Some more tweaks...

/* Makes selected Folder crimson and shaded */
.is-selected {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Puts a badge on every folder */
.v-FolderSource-badge {
display:inline-block;
}

/* Affects the folder count in the lower right corner */
.v-StatusBar {
color:crimson;
font-size:15pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

/* Affects the folder count (on hover) in the lower right corner */
.v-StatusBar:hover {
color:transparent;
background-color:transparent;
border:0px solid transparent;
}

/* Affects the "Spam Rules" page */
.v-ResourceItem-explanation {
color:green;
font-size:13pt;
}

/* The 'Trash Can' Icon Has Red Background And 3D */
.icon-remove {
color:white;
background-color:red;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

joe_devore 11 Jul 2017 03:02 AM

Nice! :D I will go ahead and add them to the Opening Post as a new QUOTE after that first one and date it to shwo when they were added to this topic ;)

and I might try a few of these out myself ;) lol

though I'm still looking for one that does the folder like in the Classic UI, "(NEW/total)" aligned to right margin so its out of the way! and! not cluttering..

make it happen captain! lol if u can please.. if not ohh well!

EDIT:
this is not too bad..
I that it displays a constant NEW count badge..
:D and that's its automatically aligned to the right margin is GREAT!
makes it a bit more consistent in displaying NEW counts instead of only popping up when there is NEW mail in a folder, THANK!
Code:

    /* Puts a badge on every folder, displaying constant "NEW MAIL" count */
    /* Puts a badge on every folder */
  .v-FolderSource-badge
    {
    display:inline-block;
    }

ps: I have gone ahead and renamed the badge comment to be a bit more verbose if you don't mind.. I left the original comment tag too for reference..


I kinda like this one too, but I reduced the text size from 15 to 10.. :/
I guess I like that size.. consider it OPTIONAL lol ;)
Quote:

/* Affects the folder count in the lower right corner */
.v-StatusBar
{
color:crimson;
font-size:12pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

I like THIS one TOO! ;)
but I edited the comment.. its NOT specifically SPAM related
its the RULES page in general..
Code:

  /* Affects the Settings --> "RULES" page */
  .v-ResourceItem-explanation
  {
  color:green;
  font-size:13pt;
  }

SO yeah those are the three I liked, so I added them to my ACTIVE TWEAKS Style's code profile! :D

Gsptlsnz 11 Jul 2017 02:53 PM

If you want something a bit fancier...

.v-FolderSource-badge {
display:inline-block;
text-shadow:1px 1px 1px #808080;
}

joe_devore 11 Jul 2017 04:11 PM

Quote:

Originally Posted by Gsptlsnz (Post 602969)
If you want something a bit fancier... :cool:

.v-FolderSource-badge {
display:inline-block;
text-shadow:1px 1px 1px #808080;
}

hmm... I really didn't notice much difference.. that extra tweak is ok I guess
;) :confused: thx anyway.

Gsptlsnz 11 Jul 2017 08:33 PM

It just makes the numbers look shaded... a very minor tweak. I'm still working on getting the total count to show but it may not be possible.

joe_devore 12 Jul 2017 10:16 AM

Quote:

Originally Posted by Gsptlsnz (Post 602976)
It just makes the numbers look shaded... a very minor tweak. I'm still working on getting the total count to show but it may not be possible.

Thx for ALL your useful/HANDY/ much appreciated hacks/tweaks!! :D:D:D

Which is more then I can say for the FastMail Dev(s) these days lol. ;) p :p


for some reason I am not getting the email notifications for this thread even though I am subscribed and was getting them before... strange..
I guess I will try unsubscribing and then re-enabling it! ;) :D

AND thx for for workings on the total count! I hope you can ! :D :D :D :D : D
as it went in the Classic UI
display = (NEW/Total)
NEW = bold

Gsptlsnz 12 Jul 2017 06:56 PM

Be aware they're already making changes to their base code that are negating some of my tweaks! :mad:

Expect more of this chicanery...

joe_devore 12 Jul 2017 07:01 PM

Quote:

Originally Posted by Gsptlsnz (Post 603008)
Be aware they're already making changes to their base code that are negating some of my tweaks! :mad:

Expect more of this chicanery...

GOOD GAWD WTF!!!!!!!!!! :mad::mad::mad::mad::mad::mad::mad::mad::mad::mad::mad::mad::mad::mad:

what is with FastMail's DEVS THESE DAYS!
;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_;

DO THEY SERIOUSLY HATE US THEIR "PAYING" CUSTOMERS THESE DAYS THAT MUCH??!!!!
ie. that they feel the need to SCRAP EVERY LITTLE THING THAT MADE FastMail GREAT and customizable!!

I remember when some of the devs gave me css and js tweaks for the custom-ui folder in the mail's file storage area...
which did all sorts of great things..!

X( X( X( X( X( X( X( X( X( X( X( X( X(

EDIT:

which specific code snippets are not working anymore??

and since you are the code creator, might I suggest "you" open a support ticket with FastMail and
make you concerns/complaints/etc KNOWN to them.. They gotta know that they are HURTING the long term customer base
ie. US POWER users that have been with FastMail since pretty much the beginning!!

Quote:

chicanery:
"the use of trickeryto achieve a political, financial, or legal purpose."


All times are GMT +9. The time now is 09:49 AM.


Copyright EmailDiscussions.com 1998-2013. All Rights Reserved. Privacy Policy