<https://lh3.googleusercontent.com/-QhK8y3OvqFs/U2UPVpl_GpI/AAAAAAAAAH4/zRpqAO7jyKY/s1600/mailplane+clean+css.jpg>
I am a big fan of the Helvetimail <http://www.josefrichter.com/helvetimail/>
css
style sheet which didn't look right in the most recent version of
Mailplane. I also liked the simplicity of the OSX11 stylesheet in this
thread so I thought I would take a shot at modifying to get a blend of
both. I've attached my version in a text file for anyone who is interested.
Of course the credit goes to Cjsnet who did all the heavy lifting.
--
You received this message because you are subscribed to the Google Groups
"mailplaneapp" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/mailplaneapp.
For more options, visit https://groups.google.com/d/optout.
/*=====
HIDING
======
/* Hide the Google+ buttons */
/*
.gb_ea,
.gb_fa
{ display: none; }
*/
/* Hide unnecessary toolbar buttons */
/*
.lR,
.nN,
.nX,
.nu,
.aic,
.lS,
.Bq
{ display: none; }
*/
/* Hide reply placeholder */
/*
.iq,
.aaq
{ display: none; }
*/
/* Hide unnecessary trash */
/*
.og
{ display: none; }
*/
/* Hide ads (sorry Google) */
.oM,
/* .V3vJRb, */
.PS
{ display: none; }
/* Hide Google logo */
.gb_na
{ display: none; }
/* Hide footers */
.wIFnie,
.uXhw3b,
.ap0,
/* .l6, */
.l2
{ display: none; }
/*============
REORGANIZING
=============
/* move the whole body up 60 px for comfortable, change to 44 for compact */
.aAU {
position: relative;
top: -60px;
}
.aAU {
height: 1000px;
}
/ * Move and resize search bar */
#gbqf {
position: absolute;
top: 116px;
left: 0px;
}
#gbqfw {
position: relative;
top: 53px;
left: 0px;
max-width: 450px;
}
/* move the buttons left of the search bar over */
.G-atb {
margin-left: 70px !important;
}
/* move notification bars down */
.vh {
top:50px !important;
/*left:-200px !important;*/
}
/* rescue the compose iframe */
.aSt {
margin-top:50px !important;
}
/* rescue the Drive iframe */
.KA-Kj-JD {
top:80px !important;
}
/* rescue the compose minimized window */
.AD
{
position: relative;
margin-bottom:-61px !important;
}
/*=============
PAGE COLOURS
==============
/* page colour top */
.nH
{background-color: #FFF !important;}
/* tabs colour */
.aAy
{background-color: #FAFAFA !important;}
/* chat bg colour */
.no
{background-color: #FAFAFA !important;}
/* mailbox column colour */
.nM,
.aj9,
.apa
{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#FFF));}
/* search row colour */
.gb_ib
{background-color: #FFF !important;}
/* subject bg colour */
.ha,
.if
{background-color: #fff !important;}
/* email stack colour */
.adf,
.G3,
.adx
{background-color: #fff !important;}
/* message rows colour */
table.zt tr.yO
{background-color: #FAFAFA !important;}
/* active tab top colour */
.aKm
{background-color: #fff !important;}
/* email paper colour */
.adn
{background-color: #fff !important;}
/* paper borders colour */
.apj,
.Bu,
.gA,
.aC2,
.aC3,
.aE0,
.hx,
.i
{background-color: #fff !important;}
/* people widget colour */
.anT,
.u5,
.y4,
.anr,
.am6
{background-color: #fff !important;}
/* right column colour */
.age,
.ao8
{background-color: #fff !important;}
/* chat title bg */
.Ht
{background-color: #424647 !important;}
/* contacts view colour */
.no
{background-color: #FAFAFA !important;}
/* Save to Drive icons view colour */
.aSK,
.wtScjd
{background-color: #424647 !important;}
/*=============
FONT COLOURS
==============
/* "Mail" colour */
.akh
{color: #CC0000 !important;}
/* Subject colour */
.ha
{color: #CC0000 !important;}
./* toolbar icon font colour */
.ns,
.ar7,
.nu
{color: #CC0000 !important;}
/* counter icon font colour */
.Dj,
.adl
{color: #CC0000 !important;}
/* tab text font colour */
{color: #CC0000 !important;}
/*=====
FONTS
======
/* set mailboxes font & size */
body {
font-family: Helvetica Neue;
font-weight: 400;
font-size: 12pt;}
/* set other font & size */
.ha {
font-family: Helvetica Neue;
font-weight: 200;
font-size: 11pt;}
/* set "Mail" font & size */
.akh {
font-family: Helvetica Neue;
font-weight: 200;
font-size: 24pt;}
/* set header font & size */
.gD {
font-family: Helvetica Neue;
font-size: 10pt;}
./* set toolbar font & size */
.ns,
.ar7,
.nu,
{
font-family: Helvetica Neue;
font-weight: 200;
font-size: 8pt;}
/* set counter font & size */
.Dj,
.adl
{
font-family: Helvetica Neue;
font-weight: 100;
font-size: 9.5pt;}
/* set tabs font & size */
.aKx {
font-family: Helvetica Neue;
font-size: 10pt;}
/* set inbox */
.ar4 {
font-family: Helvetica Neue;
font-size: 12pt;}
/* Change sender styles */
.yP {
font-family: "Helvetica Neue";
font-weight: 400;
color: #000;
}
/*=======
EFFECTS
========
/* -----------------------------------------------------
Message height span
----------------------------------------------------- */
/* body .zA .xY { height: 30px; margin-top: -1px; margin-bottom: -1px;
padding-top: 2px; padding-bottom: 0px; }
/* column - checkbox */
/*body .zt col.Ci { width: 22px; }
/*body .UI>.nH>.no col.ao6 { width:30px; }
/* column - star */
/*body .UI>.nH>.no col.y5 { width:18px; }
/* column - from */
/*body .UI>.nH>.apP col.yY { width:150px; }
/* column - tags */
/*body .UI>.nH>.no col.xX { width:4.8ex; }
/* column - star */
body .UI>.nH>.no col.apl { width:20px; }
body .UI>.nH>.no col.apl { width:20px; }
/* column - date */
/*body .UI>.nH>.no .apt .apm { max-width: 80px; }
/* -----------------------------------------------------
Date font/size to be much smaller
----------------------------------------------------- */
/* date (.apm>span in vert split .xW>span in horiz split) */
body .apm *, body .zt .xW * { font-size: 11px; font-family: Helvetica Neue;
opacity:1.0; text-transform:lowercase; font-variant: ; }
body .zA.zE .yf,body .zA.zE .yf *, body .zA.zE .xW * { opacity:1.0; }
body .apm *, body .zt .xW * { font-weight: 120; }
body .apm { padding: 4px; margin: -3px -3px 0 2px; vertical-align:top; }
body .zt .xW { padding-right: 10px; }
/* -----------------------------------------------------
Labels appear smaller in Message list
----------------------------------------------------- */
.apu : tag wrapper vert split - .yi : tag wrapper horiz split
body .apt { margin-right: 0px; padding-right: 3px; }
body div.UI>.nH>.no .xY { display: relative; }
body .apu { margin-right: 0; margin-left: -8px; padding-top: 4px; float:right;
max-width: 65%; text-align: right; text-overflow: ellipsis; display: flex;
display:-webkit-flex; }
body .apu > .ar { flex: 0 1 auto; -webkit-flex: 0 1 auto;
display:inline-block; float:none; max-width: 80px; }
body .apu > .ar > div[title*="/"] {} /* nested tags */
/*body div.UI>.nH>.apP .xY { overflow: visible; }
body div.UI>.nH>.apP .xT { max-width: 89%; }
body div.UI>.nH>.apP .ar { float:right; } */
body .ar { font-size: 71%; padding: 0 0 1px 2px; }
body .ar > * { border-radius:2px; }
body .yi .ar { max-width: 7%; margin-top: 1px; }
body .ar .av { padding: 1px 1px 1px 2px; }
body .ar * { padding: 0; text-overflow: ellipsis; overflow: hidden; max-width:
100%; text-align: center; }
/* specific tags */
body .ar > div[title="Inbox"], body div.hN[title="Search for all messages with
label Inbox"] { text-transform:uppercase; font-size:79%; }
/* -----------------------------------------------------
Highlight message row in overview while hovering (yellow option)
----------------------------------------------------- */
/*
tr.zA:hover {
background-color: #FAFAFA;
}
*/
/* dim People Widget/Rapportive column, fade in on hover */
div.ej iframe.editable {
height: 500px !important;}
.y3 {
opacity: .05;
-webkit-transition:opacity .2s ease-in-out;
-moz-transition:opacity .2s ease-in-out;
-o-transition:opacity .2s ease-in-out;
transition:opacity .2s ease-in-out;}
.y3:hover {
opacity: 1;}
#gbzw:hover {
top: 0;}
/* -----------------------------------------------------
Shrink, and dim buttons… and brighten on hover
----------------------------------------------------- */
body .G-Ni, body .T-I { opacity: 0.60; }
body .G-Ni:hover, body .T-I:hover { opacity: 1; }*/
/* body .G-Ni > div, body .G-Ni > * > .J-J5-Ji, body .T-I-ax7 {
background:rgba(230,230,230,0.2) !important; }
body .G-Ni > div:hover, body .G-Ni > * > .J-J5-Ji:hover, body .T-I-ax7:hover {
background:rgba(230,230,230,1) !important; }
*/
body div.T-I-ax7,body div.T-I-ax7 { background:rgba(230,230,230,0.2)
!important; border-color:rgba(0,0,0,0.2) !important; }
body div.T-I-ax7[role="button"]:hover,body div.T-I-ax7[role="button"]:hover {
background:rgba(255,255,255,0.5) !important; border-color:rgba(0,0,0,0.5)
!important; }
body div.T-I-ax7[role="button"] * { text-shadow:none !important; }
body .T-I { min-width: 24px; margin-right: 3px; }
body .T-I-Js-IF { margin-right: 0px; }
body .apF { margin-left: 3px !important; }
body .T-I.apF { min-width: 12px; }
body .ash.T-I { margin-left: 3px; }
body .T-I.apG { padding: 0 3.5px 0 0px; min-width: 1px; }
/* compose/newcontact button */
body .pp .T-I-KE { background:rgba(230,230,230,0.2) !important; border: 1px
solid rgba(0,0,0,0.1); color: rgba(0,0,0,0.7); z-index:2;/* fix to place behind
chat menu dropdown */ }
body .pp .T-I-KE:hover { background:rgba(255,255,255,0.5) !important;
border-color: rgba(0,0,0,0.3); color: rgba(0,0,0,0.8);!important; }
/* fix create filter search button */
body .ZZ .T-I { min-width: 54px; }
/* remove borders and backgrounds from buttons, add transitions for hover */
.T-I-ax7,
.D
{
background-color: transparent !important;
background-image: none !important;
border: 0px solid transparent !important;
/* -webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
*/
}
.T-I-JW {
/*
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
*/
webkit-box-shadow: 0 0px 4px rgba(0,0,0,0) inset;
moz-box-shadow: 0 0px 4px rgba(0,0,0,0) inset;
box-shadow: 0 0px 4px rgba(0,0,0,0) inset;
}
/*
.T-I-ax7 .T-I-J3 {
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
opacity: .35;
}
.TI .T-I-ax7, .z0 .T-I-ax7, .G-atb .T-I-ax7 {
border: none;
color: #FAFAFA;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
.TI .T-I-ax7.T-I-JW, .z0 .T-I-ax7.T-I-JW, .G-atb .T-I-ax7.T-I-JW, .G-atb
.T-I-ax7.J-JN-M-I-JW {
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
*/
/*=====
NOTES
======
*/
