Mailplane CSS - Helvetica theme

gistfile1.css

/*=====
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;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
opacity: 0.5;
font-weight: 500;
}

/* 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: 500;
        font-size: 10pt;}

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

*/