Gmail with old Inbox design
Inbox Google Design by kast
Details
Authorkast
LicenseNo License
CategoryGmail
Created
Updated
Size7.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Inbox Google Design
@version 20220501.12.44
@namespace userstyles.world/user/kast
@description Gmail with old Inbox design
@author kast
@license No License
==/UserStyle== */
@-moz-document domain("mail.google.com") {
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
:root {
--accent-color: #4185F4;
--accent-color-light: #6BA0F7;
--bg-color: #FFFFFF;
--border-color: #EAEBED;
}
* {
font-family: 'Lato', sans-serif !important;
}
body, .h4020c, .aeN, .aj5 .J-KU, .aj5.J-KU-Jg, .brC-aT5-aOt-Jw {
background-color: var(--bg-color) !important;
background: var(--bg-color) !important;
border: none !important;
border-color: transparent;
}
.w-asV.aiw {
background-color: var(--accent-color);
box-shadow: 0 2px 4px 0 rgba(18, 18, 18, 0.18);
}
.gb_Te {
border-radius: 50px;
background-color: var(--accent-color-light) !important;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1) !important;
}
.gb_oa svg, .gb_Ec svg, .gb_1c .gb_3d, .gb_Qc .gb_3d {
color: white;
}
.aJf:not(.gb_Oe) {
border-radius: 50px;
background-color: var(--accent-color-light) !important;
border: 1px solid #83AFF8;
}
.gb_Re.gb_Se {
border-radius: 25px;
}
.aJf:not(.gb_Oe) svg, .gb_ef, input::placeholder, .gb_na svg, .gb_Hc svg, .gb_3c .gb_5d, .gb_Sc .gb_5d, .Yc {
color: white !important;
}
.qp:not(.aBA):not(.aTO) a[href="#inbox"] {
border-left: 0;
padding: 0;
font-family: 'Lato', sans-serif !important;
font-weight: 400;
}
a[href="#inbox"]>img:first-of-type {
display: none;
}
a[href="#inbox"] {
text-decoration: none !important;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: .875rem;
letter-spacing: .2px;
}
a[href="#inbox"]::before {
content: "Inbox";
text-decoration: none !important;
color: white;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: 20px;
letter-spacing: .2px;
}
.bkK>.nH, .aqn, .WR.aeN {
background-color: var(--bg-color);
}
.WR.aeN {
display: none;
}
.Wg {
box-shadow: none !important;
-webkit-box-shadow: none;
}
.qh {
color: #7B7B7B;
font-family: Google Sans !important;
font-weight: 500;
}
.gb_Vd.gb_Oe .gb_Fe .gb_Te {
border: none !important;
border-radius: 0;
}
.qd, .F {
border: 1px solid var(--border-color);
border-radius: 8px;
font-family: Google Sans !important;
font-weight: 500;
}
.yO {
background-color: transparent;
box-shadow: none;
border-radius: 8px;
border: 0;
}
.zA:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.18);
border: 0;
}
.TK .TO, .n6 .ah9, .CL {
border-radius: 2px;
}
.aBO>.aic {
position: absolute;
bottom: 64px;
right: 64px;
z-index: 1;
}
.nn {
z-index: 999999999;
}
.at9, .aqn {
height: 100%;
width: 210px;
min-width: 210px;
}
.z0>.L3 {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 50px;
height: 54px;
background-color: var(--accent-color-light) !important;
color: white !important;
}
.z0>.L3:hover, z0>.L3:focus {
background-color: #D23F31;
filter: brightness(1.2);
}
.aIH .L3::before, .nZ .qj, .ol .qj {
filter: brightness(0) invert(1);
}
.aib {
padding: 0;
}
.aim, .TK .TO, .n6 .ah9, .CL {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.TK .TO, .n6 .ah9, .CL, .TN {
width: 200px;
height: 46px;
}
.aio {
width: 100px !important;
flex: inherit;
padding-left: 6px;
font-family: Google Sans !important;
font-weight: 500;
letter-spacing: 0.05rem;
}
.TO .nU>.n0, .TO.NQ .nU>.n0, .TO.nZ .nU>.n0, .ah9>.CJ, .n3>.CL>.CK {
font-family: Google Sans !important;
font-weight: 500;
letter-spacing: 0.02rem;
}
.nZ .nU, .nZ .n0 {
color: white;
}
.TK .TO.nZ:active, .TK .TO.ol:active, .TO.nZ, .TO.ol, .byl .nZ.aBP, .byl .nZ.aS3, .byl .nZ.aS4, .byl .nZ.aS5, .byl .nZ.aS6 {
background-color: var(--accent-color);
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.nZ>.aHS-bnt .qj, .nZ>.aHS-bnt .qj::before {
filter: brightness(0) invert(1);
}
.n6 .ah9:hover, .n6 .ah9.aiu:hover {
background-color: transparent;
}
.TN {
width: 160px !important;
padding-left: 24px;
}
.byl .TO.nZ>.aHS-bnt .n0, .nZ>.aHS-bnt .bsU, .byl .nZ.aS3 .nU>.n0, .nZ.aS3 .bsU, .byl .nZ.aS4 .nU>.n0, .nZ.aS4 .bsU, .byl .nZ.aS5 .nU>.n0, .nZ.aS5 .bsU, .byl .nZ.aS6 .nU>.n0, .nZ.aS6 .bsU, .TO.nZ .nU>.n0, .ol.NQ .nU>.n0, .TO.ol .nU>.n0, .nZ .bsU, .ol .bsU {
color: white;
font-family: Google Sans !important;
font-weight: 500;
}
.bkK, .bkL {
background-color: white;
}
.Hy .m {
background: transparent;
}
.aCk tr {
height: 64px;
}
.aCk tr td {
height: 100%;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.aCk tr td:first-child {
background: #F8F8F8;
width: 500px !important;
}
.Hp {
margin-left: 34px;
}
.Hp .aYF span {
color: #696969;
font-family: Google Sans !important;
font-weight: 500;
}
.aCk tr {
display: flex;
align-items: center;
}
.Hm {
width: 84px !important;
background-color: #616161;
border-top-right-radius: 8px;
}
.I5 .fX, .I5 .hl, .I5 .az6 {
border: 0;
box-shadow: none;
}
.aZ>.J-Z {
border-radius: 50px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.18);
}
.dC {
border-radius: 50px;
}
.T-I-atl {
background-color: var(--accent-color);
}
.v7.T-I-atl {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.hG.T-I {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.Bu {
background: transparent;
border: 1px solid #EAEBED;
border-radius: 8px;
}
}