Last active
May 27, 2019 15:00
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* --- 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