Skip to content

Instantly share code, notes, and snippets.

@orta
Forked from ttscoff/mailplane.css
Last active December 17, 2015 18:19
Show Gist options
  • Save orta/5652099 to your computer and use it in GitHub Desktop.
Save orta/5652099 to your computer and use it in GitHub Desktop.
/* This stylesheet is designed to work with the grey theme for GMail
- hides the top bar and Google+ notifications
- simplifies buttons (remove border/background, add hover state back)
- dim Rapportive until hovered
This is only partially tested at this point and may cause some issues
Please let me know if you find problems: <http://brettterpstra.com/contact/>
Brett Terpstra 2013 <http://brettterpstra.com> /*
/* move the whole body up 64 px for comfortable, change to 44 for compact */
body {
position: relative;
top: -44px;
}
/ * grab the search bar and move it down in comfortable */
#gbqf {
position: absolute;
top: 116px;
left: 0px;
}
/* in compact */
#gbqfw {
position: absolute;
top: 74px;
}
/* move the buttons left of the search bar */
.G-atb {
margin-left:-0px !important;
}
/* hide share rapportive */
#share-button-container {
display:none !important;
}
/* rescue the compose iframe */
iframe body {
top: auto;
}
/* hide google plus notifications */
#gbu { display: none }
/* remove borders and backgrounds from buttons, add transitions for hover */
.T-I-ax7 {
background-color: transparent !important;
background-image: none !important;
border: 1px 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 1px 4px rgba(0,0,0,.25) inset;
moz-box-shadow: 0 1px 4px rgba(0,0,0,.25) inset;
box-shadow: 0 1px 4px rgba(0,0,0,.25) 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: #999;
-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;
}
/* dim rapportive column, fade in on hover */
.y3 {
opacity: .15;
-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;
}
/* alternative means of hiding black bar with appear-on-hover */
/*#gbzw {
position: relative;
top: -50px;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#gbzw:hover {
top: 0;
}
*/
@Perifractic
Copy link

Thanks for this!

The search bar breaks unless you use "relative":

/* in compact */

gbqfw {

position: relative;
top: 52px;
left: 120px;

}

Any idea how to get the bottom of the window back once you have moved it all up the screen? It just leaves a blank bar at the bottom, the same size as the bar we removed from the top.

@Perifractic
Copy link

Also I couldn't seem to /* rescue the compose iframe */
iframe body {
top: auto;
}

It still stays up the top, partially concealed.

This worked:

.aSt {
margin-top:45px !important;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment