Jake.codes

Clean Fastmail Userstyle

Saturday, May 25, 2013

Removes bulk and a lot of colors from the Fastmail website and replaces their top navigation with the Entypo icon font.

/*
    Requires you have the the free Entypo font installed from http://entypo.com
    
    Allow:
        http://*.fastmail.fm/mail/*
        https://*.fastmail.fm/mail/*
        http://*.fastmail.fm/contacts/*
        https://*.fastmail.fm/contacts/*
        http://*.fastmail.fm/html/*
        https://*.fastmail.fm/html/*
*/
/*
    Base
*/
* {
    font-weight: 300 !important;
    color: #404040;
}
b, strong {
    font-weight: 600 !important;
}
#Settings .ButtonView span {
    color: #FFFFFF !important;
}
#header h1,
#pageHeader::before {
    background: none !important;
    color: transparent !important;
    width: 0px !important;
}
#tabs,
#navigation {
    left: 0px !important;
}
#header,
#header a,
#header a.selected,
#pageHeader,
#pageHeader a,
#pageHeader a:hover,
#pageHeader .selected,
#pageHeader .selected span,
#pageHeader .selected span:hover,
#navigation i,
#navigation em {
    background-color: #404040 !important;
    color: #FFFFFF !important;
    border: 0 none transparent !important;
}
#tabs, #admin, #tabs .selected, #admin .selected, #tabs a, #admin a, #tabs span, #admin span {
    font-weight: 100 !important;
}
div.NotificationView {
    top: 70px !important;
    border-radius: 3px !important;
}
div.NotificationView span {
    color: #FFFFFF !important;
}

/*
    Menu Tabs
*/
ul#tabs {
    height: 0 !important;
}
#header > #tabs > li {
    height: auto !important;
}

ul#tabs,
ul#navigation {
    padding: 0 0 0 16px !important;
}

ul#tabs li,
ul#navigation li {
    width: 20px !important;
    margin: 0 20px 0 0 !important;
}
ul#tabs li a,
ul#navigation li a,
ul#navigation li a:hover,
ul#navigation li span ,
ul#navigation li.selected span {
    font-weight: 100 !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 20px !important;
    height: 32px !important;
    overflow-y: hidden;
    margin: 0 5px !important;
}
ul#tabs li:nth-child(1) a:before,
ul#navigation li:nth-child(1) a:before,
ul#navigation li:nth-child(1) span:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "✉" !important;
    display: block !important;
}
ul#tabs li:nth-child(2) a:before,
ul#navigation li:nth-child(2) a:before,
ul#navigation li:nth-child(2) span:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "👥" !important;
    display: block !important;
}
ul#tabs li:nth-child(3) a:before,
ul#navigation li:nth-child(3) a:before,
ul#navigation li:nth-child(3) span:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "" !important;
    display: block !important;
}
ul#tabs li:nth-child(4) a:before,
ul#navigation li:nth-child(4) a:before,
ul#navigation li:nth-child(4) span:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "" !important;
    display: block !important;
}
ul#tabs li:nth-child(5) a:before,
ul#navigation li:nth-child(5) a:before,
ul#navigation li:nth-child(5) span:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "⚙" !important;
    display: block !important;
}

/*
    Admin Bar
*/
ul#admin li:nth-child(1),
div#admin span:nth-child(1) {
    display: none !important;
    color: transparent !important;
}
ul#admin {
    right: 0px !important;
}
ul#admin li,
div#admin span,
ul#admin li a,
div#admin span a {
    width: 32px !important;
    height: 32px !important;
    overflow-y: hidden;
    margin: 0 5px !important;
    padding: 0 !important;
    text-align: center !important;
}
ul#admin li a,
div#admin span a,
ul#admin li a:hover,
div#admin span a:hover {
    font-weight: 100 !important;
    color: transparent !important;
    font-size: 0 !important;
    width: auto !important;
}
ul#admin li:nth-child(2) a:before,
div#admin span:nth-child(3) a:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "⚒" !important;
    display: block !important;
}
ul#admin li:nth-child(3) a:before,
div#admin span:nth-child(5) a:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "👤" !important;
    display: block !important;
}
ul#admin li:nth-child(4) a:before,
div#admin span:nth-child(7) a:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "ℹ" !important;
    display: block !important;
}
ul#admin li:nth-child(5) a:before,
div#admin span:nth-child(9) a:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #FFFFFF !important;
    content: "" !important;
    display: block !important;
}
div#sidebar.mailbox {
    padding: 0 !important;
}
a.compose span.text {
    color: transparent !important;
}
a.compose span.text:before {
    font-weight: 100 !important;
    font-size: 32px !important;
    font-family: "Entypo" !important;
    color: #404040 !important;
    content: "🔿" !important;
    display: block !important;
}
a.FolderView.SidebarSourceView.spam span.badge {
    display: none !important;
}
div#usageInfo {
    display: none !important;
}
.FolderView span.badge.hidden {
    display: none !important;
}
.belowToolbar {
    border: 0 none transparent !important;
}
div#mail.app div#mail-right {
    border-left: 1px solid #ebebeb !important;
}
div.ListViewKBWidgetView {
    background-color: #ebebeb !important;
}
div.FooterView {
    display: none !important;
}