gmail dark theme by thealphareturns

/* ==UserStyle==
@name         gmail dark theme
@version      20221001.01.24
@namespace    userstyles.world/user/thealphareturns
@description  A fully-featured (and updated) Gmail dark theme. Runs on top of the default dark mode -- make sure its already on.

Don't kill me bc it doesn't work on IFrames!!
@author       thealphareturns
@license      gpl-3.0
==/UserStyle== */

@-moz-document domain("mail.google.com") {
:root {
    --backdrop: #111111;
    --body-background: #2c2c2c;
    
    --default-text: #e0e0e0;
    --darker-text: #9d9d9d;
    --quoted-text: #e0e0e0;
    --link-text: #4285f4;
    
    --overlay-1: #2d2e30;
    --overlay-2: #3b3b3b;
    --overlay-3: #4a4a4a;
    
    --hover: #595959;
    --border: #5c5e5d;
}

::selection {
    background: #003f9c; /* WebKit/Blink Browsers */
}



/* Email backdrop */
.gb_ia {
    background: var(--backdrop) !important;
}

/* Email Body Background */
.Bu.bAn, .wR > .amn, .zA, .gssb_e, .aRs, .ya, .aB6, .BltHke, .IU, .QW, .aJ7, .aJ9, .Kj-JD-Jz, .fY, .f1, .r4, .alO, .Kj-JD, .aC2, .aC3, .aoY, .TD, .azX, div[style="padding:24px;background-color:rgb(239,234,249)"], .Bu, .Bt, .nH.a98 {
    background: var(--body-background) !important;
}

/* Email Overlay Background (Search, Extra Info Dropdown, etc.) */
.hN, .hO, .gssb_e, .gssb_m, .ajA, .aRp, .HW, .gb_yc .gb_Qe, .vO, .wO, .Ht, #\:2em, .afx, .aiL:not(.a3s), .aoT, .Am, .IN, .hn, .Ar, .aDj, .Ur, .t9, .IG, .et, .qK, .qL, .J-jxwiSc, .J-JB-KA-JS, .vh, .J-JB-KA-LG, .aoD, .aoI, .aDj::after, .adx, .Ia, .If, .Ap, div[style="background-color:#fff;border-bottom:1px solid #e0e0e0;margin:0 auto;max-width:480px;min-width:154px;padding:0 24px"], table[style="background-color:#fff"][role="presentation"][align="center"], #\:ng:not(.a3s), .agP.aFw {
    background: var(--overlay-1) !important;
}

/* Email Over-Overlay Background */
.J-Z, .J-JB-KA-Jk, .aDp, .Ig, .a8B, #\:u9\.se, #\:u9\.pa, .a8F, .afC, .afB, .agJ {
    background: var(--overlay-2) !important;
}

/* Email Over-Over-Overlay Background (e.g. font selector(3) that comes out of toolbar(2) for email compose(1)) */
.fx, .J-M, .bqf, .ah, .vN {
    background: var(--overlay-3) !important;
}

/* Hover Background */
.gssb_i, .J-Z-M-I-JW, .J-Z-I-JW, .e9, .J-N-JT, .J-LC-JT, .J-JK-JT, .bk5, .Ze, .alB, .J-JB-KA-JB:not(.J-JB-KA-a1R-JB):hover, .J-JB-KA-Jk:hover, .agJ:hover, .bjE {
    background: var(--hover) !important;
}







/* Default Text */
.ha > .hP, .gs, .hx .gD, .amn > .ams, .hI .iA, .gssb_c, .gssb_m, .gb_bf, .HW, .aB9, .vO, .aoT, .ZyRVue, .Ao, .J-J5-Ji, .J-N-Jz, .aAi, .J-LC-Jz, .bqf, .J-JK-Jz, .ao5, .rc, .aI7, .asc, .oL, .ua, .VO, .aIY, .OG, .Vk, .QW, .Q2, .Kj-JD-K7-K0, .aKx, .ST, .r9, .ra, .alL, .al6, .alR, .alS, .alC, .aJa, .CZ, .qV, .yV, .G9, .J-JB-KA-JB, div[style="color:#424242;font-size:13px;font-weight:700;line-height:13px"], span[style="color:#333;font-size:13px;font-weight:400"], .J-JB-KA-Kl, .J-JB-KA-Jk, .J-JB-KA-LG, .Jy, .Jx, .nx, .Kj-JD-Jz, .Am, .q9, .bAq, .Aj, .jA, .button[name="datetimepicker_dialog_confirm"], div[style="color:#424242;font-size:16px;line-height:16px;padding-bottom:8px"], .Hp, .Ih, .agP.aFw, .aL8 {
    color: var(--default-text) !important;
}

/* Darker Text*/
button[name="cancel"], .ig .g3, .hI .g3, .iv .g3, .hx .hb, .go, .hN, .hO, .aB8, .Sr, .vT, .f0, .rz, .gmail_signature, .g2, .l7, .Ay, button[name="datetimepicker_dialog_cancel"], .J-JB-KA-a1R-JB, div[style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;color:#26282a"], .aXS {
    color: var(--darker-text) !important;
}

/* Quoted View Text */
.im {
    color: var(--quoted-text) !important;
}

/* Link Text */
a:not([class])[style="color: rgb(32, 33, 36); font-weight: 400; text-decoration: none; --darkreader-inline-color: #c4c0ba;"] {
    color: var(--link-text) !important;
}









/* inputs, big buttons */
.a5p, button#\:k5, .rA, button#\:ja, .sE, .Da, .rtiTxf, .qR, [act="add"], button#\:2c, button#\:kb, button#\:f9, .a8T, button#\:bt, button#\:e6, .alZ, select#\:mx, select#\:nk, button#\:mo, button#\:mn, button#\:nt, .Gm, button#\:ag, button#\:po, button#\:3d, select#\:6f, select#\:fg, select#\:6t, select#\:nr, .jA, .ks {
    border: 1px solid var(--border);
    padding: 0;
    border-radius: 5px;
    background: var(--overlay-1);
    color: var(--default-text);
}

/* Disabled Buttons */
button[disabled=""] {
    background: var(--overlay-3) !important;
    color: var(--darker-text) !important;
    cursor: not-allowed !important;
    border: 2px solid var(--overlay-3) !important;
    padding: 0 !important;
    border-radius: 5px !important;
}



/* Border */
.Vo::before, .hn, .HM .I5, div[style="background-color:#fff;border-bottom:1px solid #e0e0e0;margin:0 auto;max-width:480px;min-width:154px;padding:0 24px"], .bra, .amr .amn > .ams {
    border: 1px solid var(--border) !important;
}

.Q3, .aC3, .btb {
    border-top: 1px solid var(--border) !important;
}

.btb, .biz, .a8F {
    border-bottom: 1px solid var(--border) !important;
}

.Tj, .byw, .adx, .zA.yO[jsaction="Tnvr6c:RNc9jf;PG1zDd:eyrEaf;WGbBt:UL4Ddb;nVvxM:UL4Ddb;"] {
    box-shadow: none !important;
    border: none !important;
}


.qX, .IU, .aC3, .aoI, .TD, .aI0, .Q1:checked + .Vo::before, .aKh{
    border: none !important;
    box-shadow: inset 0 0 0 0 transparent !important;
}

.bra {
    box-shadow: none !important;
}




/* Padding, Margin */
.aC3, .TD, .aI0 {
    margin: 0px !important;
    padding: 0px !important;
}

.aI0 {
    margin: 25px !important;
}

.aoI {
    padding-left: 10px !important;
}





/* Border Radius */
.J-Z-M-I-JW, .e9, .J-jxwiSc {
    border-radius: 5px !important;
}

.ajA, .QW, .hn, div[style="background-color:#fff;border-bottom:1px solid #e0e0e0;margin:0 auto;max-width:480px;min-width:154px;padding:0 24px"] {
    border-radius: 10px !important;
}

.Vo::before, .J-JB-KA-JB, .J-JB-KA-Jk {
    border-radius: 25px !important;
}

.hn {
    margin-left: 15px !important;
}

.AD {
    border-radius: 10px 10px 0px 0px;
}



/* Cursor */
.f0, .aDp {
    cursor: pointer !important;
}




/* Background and Colors */
.l7 {
    background: none !important;
}

.Vo::before {
    background-image: none;
}

.Q1:checked + .Vo::before {
    background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/radio_button_checked_googblue_24dp.png') !important;
}

.ajR {
    filter: invert(.75) !important;
}




/* Transitions */
.HM .I5 {
    transition: none !important;
}



/* Image Stuff */

.CToWUd[alt="Classroom"] {
    display: inline-block !important;
    filter: invert(1) !important
}



.J-JB-KA-JB:hover, .J-JB-KA-K8:not(.J-JB-KA-KO) {
    z-index: auto !important;
}

.T-I-J3:not(.amJ):not(.amI):not(.J-J5-Ji), .T-KT:not(.aXw), .T-KT-JX, .Ic, .Je, .aaA, .dv, .J-J5-Ji.J-JN-M-I-JG, .Sz.SB, .J-J5-Ji.J-Z-M-I-JG, #\:yg.mL, .Un::after, .J-N-JX {
    filter: invert(1) !important;
}


/* etc */
.Bu.y3, td[style="background-color:#eee;height:1px"] {
    display: none;
}

/* Select */
.J-Z-I.J-Z-I-KO::before, .J-Z-I-Jp {
    background: var(--border) !important;
}


/* loading screen (dont touch this) */
#loading, .la-k .la-m {
    background: var(--body-background) !important;
}

.la-b .la-m, .la-b .la-l, .la-b .la-r {
    background: var(--body-background);
}

.la-r, .la-l, .la-b {
    border: var(--body-background) !important;
}


.la-c.la-l {
    background: #c5221f;
}

.la-c.la-r {
    background: #fbbc04;
}

.la-i div {
    background: none !important;
}

#nlpt {
    background-color: #fff0;
    height: 10px;
    border-radius: 10px;
}

#nlpt::before {
    border-radius: 10px;
}

.msg img {
    filter: invert(100%);
    filter: brightness(100);
}

.msgb {
    color: var(--default-text);
}

.msgb .submit_as_link {
    color: var(--link-text);
    text-decoration: none;
}

.submit_as_link:hover {
    text-decoration: underline;
}
}