View Single Post
Old 5 Jul 2017, 10:58 AM   #1
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Lightbulb 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.. lol

This is to show off and discus his and any others tweaks
IN AN EFFORT to SAVE FastMail FROM certain DOOM..!



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 View Post
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 {
colorurple;
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;
cursorointer;
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;
cursorointer;
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 View Post
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-colorrange;
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-colorrange;
}

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

Last edited by joe_devore : 27 Feb 2019 at 09:52 AM. Reason: ADDING MORE TWEAKS!
joe_devore is offline   Reply With Quote