This is my custom CSS code. Makes the screen look similar to Concise.
You'll need the FF add-on "Stylish",
https://addons.mozilla.org/en-US/firefox/addon/stylish/
---
@-moz-document domain("fastmail.com") {
/* Shows no. of files per folder */
.v-FolderSource:after {
content: " " attr(title);
font-size:12pt;
color:darkgreen;
}
/* Box at screen bottom that shows space left */
.v-UsageInfo {
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;
}
/* 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:1px solid black;
}
/* 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 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 */
.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 */
.icon-reply, .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 */
.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 */
.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 */
.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 */
.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 */
.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;
}
}
