Skip to content

Instantly share code, notes, and snippets.

@orhan
Last active May 27, 2019 15:00
Show Gist options
  • Save orhan/6b05e61d39a808f61d87f03b0bad4ff3 to your computer and use it in GitHub Desktop.
Save orhan/6b05e61d39a808f61d87f03b0bad4ff3 to your computer and use it in GitHub Desktop.
This is a refinement for Gmail's 2018 redesign. It brings a whole lot more color into the interface and fixes some whitespace issues I had.
/* --- Topbar ---*/
/* Background */
.nH.oy8Mbf.qp {
background: #D64541;
}
/* Icons */
.gb_ja svg {
color: rgba(255, 255, 255, 0.6) !important;
transition: all 0.4s;
}
.gb_3b:hover svg,
.gb_6d:hover svg,
.gb_x:hover svg {
color: rgba(255, 255, 255, 1) !important;
}
/* Gmail Logo */
a[href="#inbox"][title="Gmail"] {
position: relative;
top: -2px;
width: 50px;
padding: 4px 0 1px 9px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
transition: all 0.2s;
overflow: hidden;
}
a[href="#inbox"][title="Gmail"]:hover {
background: rgba(255, 255, 255, 0.4);
}
/* Search */
form[role="search"][id="aso_search_form_anchor"] {
border-radius: 3px;
background: white !important;
}
.gb_Se .gb_pf.gb_rf {
position: absolute;
}
.gb_rf.gb_lf {
background: white !important;
}
/* --- Left slide-out panel --- */
.aj9 {
border-right: solid 1px #EEE;
}
.aim {
padding: 4px;
}
.z0 {
display: flex;
}
.bym .z0 .T-I {
flex: 1 !important;
margin-right: 10px !important;
transition: all 0.2s, box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1) !important;
}
.bym .z0 .T-I:before {
transition: all 0.4s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bym .z0 .T-I:hover {
background: #D64541;
color: #FEFEFE;
}
.bym .z0 .T-I:hover:before {
transform: rotate(270deg)
}
/* --- Main view top header --- */
.aeH {
border-bottom: solid 1px #EEE !important
;
}
.G-atb {
height: 60px !important;
}
.G-atb::before {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.aRz.J-KU {
border-right: solid 1px #F5F5F5 !important;
}
/* --- Mail preview snippets --- */
.Cp table tr {
padding: 14px 0 !important;
}
/* --- Mail preview attachments --- */
.brd {
margin-top: 10px !important;
margin-bottom: 1px !important;
margin-left: 0 !important;
}
.brc {
border-radius: 4px !important;
}
/* --- Mail header --- */
.nH.br6.byY {
padding-top: 26px !important;
padding-right: 16px !important;
padding-bottom: 20px !important;
background: #FBFBFB;
border-bottom: solid 1px #EEE;
}
.ha>.hP {
font-size: 24px !important;
color: #555;
}
/* --- Mail --- */
.nH.if {
margin-right: 0;
}
.gH.bAk:last-of-type {
margin-right: 16px;
}
tr.acZ td:last-child {
margin-right: 16px;
}
.kQ {
background: #FBFBFB;
}
.adv .adx {
background-color: #FBFBFB !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment