EmailDiscussions.com - CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylish!

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)

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...

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

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 ;)

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/

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

Quote:

Originally Posted by Gsptlsnz (Post 602883)

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

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

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

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;
}

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

If you want something a bit fancier...

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

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.

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.

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

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

Expect more of this chicanery...

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."

Frankly, it is not realistic to expect FastMail to stop developing the current interface in case it causes unsupported Stylish scripts to be affected. As a practical matter, most tweaks will probably continue to work (as did the CSS tweaks in the classic interface) but occasional upwards compatibility issues should be expected.

For that reason, it is probably prudent to restrict use of such tweaks to situations where it really makes a significant difference to your FastMail experience.

hmm.. even so.... they use to care more about their customers needs/etc.
hence features like the custom-ui folder in FILE storage for css and js tweaks... ;):D

now I have to rely on Firefox extension like:
- Grease Monkey, for JS Tweaks
- Stylish, for CSS Tweaks
both of which are Firefox Extensions anyway..
which I have used since FF v2.0 came out wayy back when....

I'm not saying they have to stop developing the New UI,
but they SHOULDN'T be scrapping FastMail's best features... :confused::(:(

I installed maybe 70% to 85% of the Stylish CC tweaks created by Gsptlsnz... :D ;) they are really great and make it soo much better and more tolerable

Most of the complaints I heard about the new interface (over and over and over again) is loss of functionality. The Stylish stylesheet posted here make only cosmetic changes.

Please tell me I'm wrong: was this entire drama ("doomsday" and "the sky is falling") all over a font color?!

Quote:

Originally Posted by sflorack (Post 603012)

ahh lol... yeah... :D

have u looked at the actual list of tweaks at the top?
here just one I find very usable! because currently in the New UI the list of emails in a large list have NO divider in between emails so its hard to read and distinguish one from the next.. anyway the code..

Code:

  /* Puts a thin border between the emails */

  .v-MailboxItem

  {

  border-top:2px solid green;

  }

ps: I increased it from 1pixel to 2 pixel to make it a little more visible.. ;) :D

LOL nO...
these were the primary features I utlized in the Classic UI.. THAT were lost i the New UI..
1) ever present folder counts "(NEW/Total)" aligned to the right margin for each folder
2) Empty link on the Trash folder (requires to clicks to empty ;p )
3) the Search results in the Classic UI SEPARATED results displayed by folder with the folder name as a header and a [HR] to separate each folder readout to make it EASIER to read!! lol ;p

NEW TWEAKS REQUEST TO "Gsptlsnz"!!

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...

on another note.. I just though of a few new tweaks I wouldn't mind seeing
if you could "create" them... ;) ;) :confused: :D

for the root system folders like
- Inbox
- Sent
- Drafts
- Trash
for "Archive" I hide it since I don't use it, as I have an "extensive"
folder system I use to sort mail into.. and "SPAM" I hide it UNLESS there is new mail which I promptly ANNIHILATE!!

for the above 4 mentioned system folders..
- different Colors whether it be the text or the background

and a single divider [hr] line after Trash! to make it a little more clear separation from the root system folder to my custom folders..
in what ever color and thickness I want..

In my case I would go with "green" or "blue" as those are my favorite colors and a thickness of 2pixels or 3pixels...

lol ;) :D :D :D please and thanks!

I'll work on those later! Keep 'em coming!

Quote:

Originally Posted by Gsptlsnz (Post 603017)

I'll work on those later! Keep 'em coming!

OK! and THANKS!! ^_^ ^_^ :D:D:D:D:D:D:D:D:cool::cool:

Quote:

Originally Posted by sflorack (Post 603012)

No, the tweaks (bright, shiny objects) merely act as a distraction from the truly bad changes.

I suspect there would have been a lot less b*tchin' if they hadn't changed the color scheme, 'cuz that was very noticeable. :eek:

Quote:

Originally Posted by joe_devore (Post 603013)

You're defending your argument that this drama has been more than just a change to a font color (which was a tongue-in-cheek comment) with a horizontal rule tweak?

Quote:

Originally Posted by joe_devore (Post 603016)

and a single divider [hr] line after Trash!

to make it a little more clear separation from the root system folder to my custom folders.. in what ever color and thickness I want..

In my case I would go with "green" or "blue" as those are my favorite colors and a thickness of 2pixels or 3pixels...

Code:

/* Puts a border under the 'Trash' folder */

.v-FolderSource--trash

{

border-bottom:2px solid blue;

}

Thanks For The New Tweak!!

Quote:

Originally Posted by Gsptlsnz (Post 603024)

/* Puts a border under the 'Trash' folder */
.v-FolderSource--trash
{
border-bottom:2px solid blue;
}

WAHoooO! UPDATE/NEW TWEAK
:D :D:D:D:D:D:D:D:D:D:D:D:D:D <-- "I can hardly contain my EXCITEMENT!" lol ;)

THANKS Gsptlsnz!!

on a side note and I don't mean to seem ungrateful lol ;p but
perhaps you could put "code" in a code tag?? lol ;)
-->

Code:

/* Puts a border under the 'Trash' folder */

.v-FolderSource--trash

{

border-bottom:2px solid blue;

}

ps: I will ADD it to the root POST! right this very second!!

Latest Tweak:

Code:

/* Makes all grey buttons look shaded */

.v-Button {

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;

}

Quote:

Originally Posted by joe_devore (Post 603016)

for the root system folders like

- Inbox
- Sent
- Drafts
- Trash

for the above 4 mentioned system folders..
- different Colors whether it be the text or the background

Code:

/* 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-FolderSource--inbox {

background-color:limegreen;

}



/* 2a - '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;

}



/* 2b - 'Drafts' Folder Path Is Now Orange */

.v-FolderSource--drafts {

background-color:orange;

}



/* 3a - 'Sent' Icon Has A White Background And Is 3D */

i.icon.icon-paper-plane {

background-color:white;

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 - 'Sent' Folder Path Is Now White */

.v-FolderSource--sent {

background-color:white;

}



/* 4a - 'Trash' Icon Has A Red Background And Is 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;

}



/* 4b - 'Trash' Folder Path Is Now Red */

.v-FolderSource--trash {

background-color:red;

}



/* 5a - 'Archive' Icon Is Now Goldenrod */

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;

}



/* 5b - Archive Folder Path Is Now Goldenrod */

.v-FolderSource--archive {

background-color:goldenrod;

}

WOW your A SCRIPTING WIZARD!!!
THX ;) :D I'll check them out and find the ones I like, and or tweak em..
:D:D

OK I made some tweaks to the color:

First I resorted the order of the code because "Sent" code was after the "Drafts" code
and since Sent comes before in the actual order I resorted them and re-numbed the comment tag to show that
lol ;)

now for the colors..
"BLUE" was too dark so I changed it to "lightblue"
and red is my least favorite color lol ;p so
"RED" became 'Turquoise"
ie. I have a color codes page bookmarked!
Flat Design Color Chart — HTML Color Codes

and as long as you don't mind I gonna go update the first post lol ah yeah ;p

When posting code always select,

Disable smilies in text

or the code may not show correctly. :eek:

Quote:

Originally Posted by Gsptlsnz (Post 603030)

When posting code always select,

Disable smilies in text

or the code may not show correctly. :eek:

ooh... hmmm is some of the code above messed up??!!
I hadn't noticed.. ok I'l go GO take care of THAT this VERY SECOND!!! ;) ;)
:D:D:D

EDIT:
ooh ok I see two smiles above... ok smiles DISABLED for the OPENING POST!!
lol ;) ;) :D :D

I guess I thought the [code] tags were supposed to take care of such things.. I guess NOT! ?_?

i updated the code to comply with their changes that negated my previous code. i just added:

Code:

i.icon

to the icon names. :D

Quote:

Originally Posted by Gsptlsnz (Post 603051)

i updated the code to comply with their changes that negated my previous code. i just added:

Code:

i.icon

to the icon names. :D

hmm.. so I should replace what? with this new code... O_o
:confused::confused::confused:

i fixed my code on this page. you don't need to update... example:

/* 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;
}

etc. etc.

hmm... BUT I still need to update the master/root/Opening post...

should I replace ALL of the code entries of:
".icon "

with

"i.icon.icon"
???

EDIT1:
there well 11 of them in my Stylish profile's code...
The update seems to have worked for my code usage...
no errors detected and I didn't see anything irrruglar with FastMail loaded..

the GREAT thing about Stylish.. is any update to the Code Profile... NO RESTART needed to apply code changes :D :D lol!!

EDIT2:
ok the root post has been updated! :D

Gsptlsnz,

Back on the subject of my most requested/used feature from the classic UI..
The ever present folder counts "(NEW/Total)"... wheres NEW is always BOLD..

so far you have made a Stylish/CSS tweak to display a badge showing the
NEW count at all times even if zero.. I like! lol ;) thanks!

but I was just looking into the
SETTINGS --> MAIL --> "Folders" screen just now AND
I noticed that not only did it display the folder total(s)
BUT since just noticing I had a single new email in my
- "Gaming Forums" folder... it displayed NEW counts as well..!!!

SO! IT! CAN! BEEE! DONE!!!!!!! LOL ;) ;) ;) :eek: :D :D :cool: :cool:

It has the following format on the
Folder screen (Right margin aligned, stacked before the "EDIT" buttons):
"Total(NEW)"

Classic UI format is: "(NEW/Total)"
while I like the Classic UI display better it can be argued that,
that I'm just used to that format more.. lol ;)

But If you can only make a NEW script that display using the NEW UI's Folder Screen
type.. THEN I think I can LIVE with it lol ;p

So PLEASE AND THANKS!! loi ;) :D :D :D

ooh I just noticed something ELSE lol ;) :D
when I do a hover/mouse-over the display numbers, pop-up text is displayed!
Total = "Total messages"
NEW = "Unread messages"

I used the Firefox "Inspect Element"..
This is what I FOUND! lol ;)

Code:

<div class="v-ResourceItem-rightCol">

<span class="v-FolderItem-count">

<span title="Total messages" class="v-FolderItem-total">19</span>

<b title="Unread messages"> (1)</b>

</span>

</div>



.v-ResourceItem-rightCol

{

    display: table-cell;

    width: 0;

    padding-left: 10px;

}





.v-FolderItem-count

{

    display: inline-block;

    min-width: 100px;

}



.v-FolderItem-total

{

display: inline-block;

min-width: 70px;

text-align: right;

}

Its not clear how or where they are getting/calling the NEW counts from or maybe it is.. :/
other then maybe..
NEW = ".v-FolderItem-count"
and
Totals = ".v-FolderItem-total"
I guess?_?

see what you can do with what I found... ;) Please :D

This just shows the folder count

.v-FolderSource:after {
content: " " attr(title);
font-size: 12px;
}

Quote:

Originally Posted by Terry (Post 603066)

This just shows the folder count

.v-FolderSource:after {
content: " " attr(title);
font-size: 12px;
}

ehh yeah I already know, have tried that one...
its no good it displays a rather EXTREMELY cluttering message(s)...
right after the folder name...

"This Folder is empty"
or
"# messages"

......... oh I see your not proposing your mentioning,
rechecked the code he had me put in the opening post...

yeah.. I guess I should delete that one and move its cousin code up to the top lol ;)

I guess I will go do that NOW! DONE!

the file count is done with javascript, so i doubt it's possible to show new/total.

https://www.fastmail.com/static/ajax...ap-283cbedb.js

https://www.fastmail.com/static/ajax...se-9a2e3082.js

Quote:

Originally Posted by Gsptlsnz (Post 603072)

that's javascript, so i doubt it's possible to show new/total.

https://www.fastmail.com/static/ajax...ap-283cbedb.js

https://www.fastmail.com/static/ajax...se-9a2e3082.js

hmm... X( the code looked similar.... :/

how is this JS???

Quote:

.v-FolderItem-count
{
display: inline-block;
min-width: 100px;
}

.v-FolderItem-total
{
display: inline-block;
min-width: 70px;
text-align: right;
}

it looks the same as any of the code you created... :/