Skip to content

Instantly share code, notes, and snippets.

@kellishouts
Last active October 20, 2023 04:42
Show Gist options
  • Star 46 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save kellishouts/e733874f7510934c4def87adf221016d to your computer and use it in GitHub Desktop.
Save kellishouts/e733874f7510934c4def87adf221016d to your computer and use it in GitHub Desktop.
I Hacked Gmail with an Inbox-Inspired Theme :D
/*--- #3. Hack the Tab Labels ---*/
/* Hide Ugly Tab Labels */
.aAy.aIf-aLe .aKx .aKz,
.aAy.aJi-aLe .aKx .aKz,
.aAy.aH2-aLe .aKx .aKz,
.aAy.aHE-aLe .aKx .aKz{
display: none;
}
/* New Tab Label Font */
.aAy.aIf-aLe .aKx:after,
.aAy.aJi-aLe .aKx:after,
.aAy.aH2-aLe .aKx:after,
.aAy.aHE-aLe .aKx:after{
display:block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: .875rem;
color: #5f6368;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
order: 0;
}
/* Tab: Active Font Color */
.aAy.aIf-aLe.J-KU-KO .aKx:after,
.aAy.aJi-aLe.J-KU-KO .aKx:after,
.aAy.aH2-aLe.J-KU-KO .aKx:after,
.aAy.aHE-aLe.J-KU-KO .aKx:after{
color: #3eb1ad;
}
/* Tab: Active Underline Color */
.aAy.aIf-aLe.J-KU-KO:before,
.aAy.aJi-aLe.J-KU-KO:before,
.aAy.aH2-aLe.J-KU-KO:before,
.aAy.aHE-aLe.J-KU-KO:before{
background-color: #3eb1ad;
}
/* Tab: Hides "New" Count */
.aKx>.aDG{
display: none;
}
.aJi-aLe .aDG,
.aAy.J-KU-JW.aAy.aJi-aLe .aKo,
.aAy.J-KU-KO.aAy.aJi-aLe .aKo{
display: none;
}
/* Tab: Important */
.aAy.aIf-aLe .aKx:after{
content: "Important";
}
/* Tab: Important Icon */
.aAy.aIf-aLe .aKp.aIf-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553030473/media/email_t4wvmi.svg');
background-size:18px;
}
/* Tab: Important Icon Active */
.aAy.aIf-aLe.J-KU-KO .aKp.aIf-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553032741/media/email-teal_ip8ci6.svg');
background-size:18px;
}
/* Tab: Fun & Events */
.aAy.aJi-aLe .aKx:after{
content: "Fun & Events";
}
/* Tab: Fun & Events Icon */
.aAy.aJi-aLe .aKp.aJi-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553031289/media/music_maycua.svg');
background-size:18px;
}
/* Tab: Fun & Events Icon Active */
.aAy.aJi-aLe.J-KU-KO .aKp.aJi-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553032741/media/music-teal_lho3c2.svg');
background-size:18px;
}
/* Tab: Work & Receipts */
.aAy.aH2-aLe .aKx:after{
content: "Work & Receipts";
}
/* Tab: Work & Receipts Icon */
.aAy.aH2-aLe .aKp.aH2-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553033425/media/suitcase_yrfiac.svg');
background-size:22px;
}
/* Tab: Work & Receipts Icon Active */
.aAy.aH2-aLe.J-KU-KO .aKp.aH2-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553033425/media/suitcase-teal_lf8pmp.svg');
background-size:22px;
}
/* Tab: Github */
.aAy.aHE-aLe .aKx:after{
content: "Github";
}
/* Tab: Github Icon */
.aAy.aHE-aLe .aKp.aHE-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553033424/media/github_efugnj.svg');
background-size:20px;
}
/* Tab: Github Icon Active */
.aAy.aHE-aLe.J-KU-KO .aKp.aHE-aLf{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553033424/media/github-teal_mk16yp.svg');
background-size:20px;
}
/*--- #4. Get rid of Hangouts ---*/
/*--- #5. Get rid of Ads ---*/
.BltHke.nH.oy8Mbf.aE3 .aKB{
display: none;
}
/*--- #5.1 Nov 5, 2019 Google updated & ads are showing again. ---*/
.aDP .ae4.aDM{
/* border: 1px solid pink; */
}
.aDP .ae4.aDM + .ae4.aDM{
/* border: 1px solid orange; */
}
.aDP .ae4.aDM + .ae4.aDM + .ae4.aDM{
/* border: 1px solid yellow; */
}
.aDP .ae4.aDM + .ae4.aDM + .ae4.aDM + .ae4.aDM{
/* border: 1px solid green; */
}
/*--- June 20, 2020 Google updated & it causes this whole block to be hidden if targeted this way.
.aDP .ae4.aDM + .ae4.aDM .Cp{
display: none;
}
THIS NO LONGER WORKS ---*/
/*--- #5.2 June 20, 2020 ---*/
.aDP .ae4.aDM + .ae4.aDM .Cp + .Cp{
display: none;
}
.aDP .ae4.aDM + .ae4.aDM .Cp + div + .Cp{
/* border: none; */
display: block;
}
.aDP .ae4.aDM + .ae4.aDM + .ae4.aDM .Cp{
/* border: none; */
}
.aDP .ae4.aDM + .ae4.aDM + .ae4.aDM + .ae4.aDM .Cp{
/* border: none; */
}
/*--- #6. Even MORE line-height for Emails ---*/
.Cp tr{
padding-top: 18px;
padding-bottom: 18px;
}
/*--- #7. Minimal Sidebar ---*/
/* Change Inbox icon to Envelope Icon */
.aHS-bnt .qj {
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553030473/media/email_t4wvmi.svg') !important;
background-size: 18px !important;
}
.nZ>.aHS-bnt .qj,
.aHS-bnt .qj::before{
background-image: url('https://res.cloudinary.com/airship/image/upload/v1553030473/media/email_t4wvmi.svg') !important;
background-size: 18px !important;
}
/* Set Grey Sidebar Highlight */
.byl .TO.nZ>.aHS-bnt .n0,
.nZ>.aHS-bnt .bsU{
color: #333333 !important;
}
.wT>.n3 .byl:first-child .aim:first-child .nZ {
background-color: #e8eaed !important;
}
/* Hide Sidebar Label Icons */
.zw .TK .qj.qr{
display: none;
}
/* Add space between sidebar labels */
.aim, .ain {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0;
}
/* Simplify "More" */
.n6 span.ait {
display: none;
}
/* Adjust Compose Button Margin */
.aeN .z0>.L3{
margin-left: 8px;
}
/*--- #8. Get rid of Notification Dots and Unread Counts ---*/
.zw .TK .aio.aip .bsU{
display: none;
}
/*--- #11. Bring back the delightful cleared inbox graphic ---*/
.DVI7hd .aRu{
background-image: url('https://res.cloudinary.com/airship/image/upload/f_auto/v1553218540/media/airship-unicorny_gpgyga.png');
background-size: 240px auto;
background-repeat: no-repeat;
background-position: center center;
height: 200px;
margin-top: 40px;
}
.DVI7hd .aRu .aRv{
display: none;
}
.DVI7hd .aRu .aRv + p{
display: none;
}
.DVI7hd .aRu .aRv + p + p{
display: none;
}
/*--- #12. Use "Product Sans" in the sidebar ---*/
/* Set Sidebar Label Font */
.TO .nU>.n0, .TO.NQ .nU>.n0,
.TO.nZ .nU>.n0, .ah9>.CJ,
.n3>.CL>.CK{
font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-weight: 500;
font-size: .85rem;
color: #333;
}
/* Hide Gmail Logo */
.gb_ja:not(.gb_ka) .gb_qc .gb_Rb,
.a.gb_Vd.gb_Tb.gb_ce{
display: none !important;
}
/* Hides Gmail Footer */
.l2.pfiaof {
display: none;
}
/*--- #13. Unicorn empty state for split screen view. ---*/
.apb, .apO{
display: none;
}
.apa{
background-image: url('https://res.cloudinary.com/airship/image/upload/f_auto/v1553218540/media/airship-unicorny_gpgyga.png');
background-size: 275px auto;
background-repeat: no-repeat;
background-position: center 80px;
height: 100%;
}
@g-rohit
Copy link

g-rohit commented Dec 3, 2019

@kellishouts
Copy link
Author

@g-rohit thanks for including that link!!! :D 👾 I also just updated the snippet to include additions to hide ads again. Last month, Google updated their code to make it harder to hide ads.

Also, the original blog post:
https://medium.com/@airshipcms/gmail-ux-sucks-so-i-fixed-it-for-my-own-sanity-b6f33898ebe3

@g-rohit
Copy link

g-rohit commented Dec 4, 2019

@kellishouts yeah it's hard indeed to keep it up to date coz Gmail keeps changing their class names for security reasons. But, must appreciate your hard work on this.

@yunanmr
Copy link

yunanmr commented Jan 11, 2020

Nice

@lucasduete
Copy link

lucasduete commented Jan 18, 2020

In Firefox I use this extension: Custom Style Script

@kellishouts
Copy link
Author

Also, here's the GitHub Repo for the Chrome Extension:
https://github.com/kellishouts/unicorny-gmail

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