Material Gmail by blankshade98

/* ==UserStyle==
@name         Material Gmail
@version      20220209.08.46
@namespace    userstyles.world/user/blankshade98
@description  A better, material-like look for the Gmail webpage. 
@author       blankshade98
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://mail.google.com/"), domain("mail.google.com") {
/* LOADING SPLASHSCREEN */

#loading{
    background-color: rgb(51,51,51);
}

.la-k .la-m {
    background: rgb(51,51,51)!important;
}

.la-b .la-m {
    background: rgb(51,51,51);
}

.la-r, .la-l {
    border: rgb(51,51,51)!important;
}

.la-b{
    background: rgb(51,51,51)!important;
}

.la-b .la-l, .la-b .la-r {
    background: rgb(51,51,51);
}

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

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

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

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

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

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

.msgb {
    color: #fff;
}

.msgb .submit_as_link{
    color: #4285f4;
    text-decoration: none;
}

/* GMAIL UI */

.aKh {
    width: 99%;
    padding-bottom:1px;
}

.J-KU-KO.aIf-aLe:before, .J-KU-KO.aKe-aLe:before, .J-KU-KO.aJi-aLe:before, .J-KU-KO.aH2-aLe:before, .J-KU-KO.aHE-aLe:before {
    border-top-left-radius:10px!important;
    border-top-right-radius:10px!important;
    height: 5pt;
}

.J-KU-KO.aIf-aLe:before{
    background-color: #4285F4;
}

.J-KU-KO.aKe-aLe:before{
    background-color: #DB4437;
}

.J-KU-KO.aJi-aLe:before{
    background-color: #F4B400;
}

.J-KU-KO.aH2-aLe:before{
    background-color: #0F9D58;
}

.J-KU-KO.aHE-aLe:before{
    background-color: #4285F4;
}

.Tm .ya {
    width: 99%;
    border-radius:10px!important;
    background:rgba(51,51,51,0.902)!important;
}

.F {
    width: 99%;
}

.zA {
    background:rgba(51,51,51,0.902)!important;
    border:none!important;
    border-radius:10px!important;
    margin-top:10px!important;
}

.zA:hover {
    background:rgba(80, 80, 80, .902)!important;
}

.aKh {
    border-radius:10px!important;
}

.G-atb::before {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bAt, .AO, .if, .aeJ, .iY .Bu {
    border-radius:10px!important;
}

.adC {
    margin: 0;
}

.aeJ{
    margin-right: 15pt;
}

.aRs {
    background-color: rgba(0,0,0,0);
}

.aRu {
    background-color: rgba(35,35,35,.9);
    margin-top: 50pt;
    padding: 30pt;
    border-radius: 10px;
    color: white;
}

.aRv{
    color: white;
}

.aRq {
    color: #4285f4;
}

.aZ6::-webkit-scrollbar, .Tm::-webkit-scrollbar {
    display: none!important;
}

.gb_Dd:not(.gb_xe) .gb_ye{
    max-width: 720px!important;
    width: 50%;
    margin: 0 auto;
}

.gb_Sd.gb_Le .gb_Ce .gb_Qe {
    margin-left: auto;
    margin-right: auto;
}

.UI .TB {
    border: none;
    width: 22%;
    margin: 0 auto;
    margin-top: 30pt;
}

.UI .TB .TD {
    background: none;
}

.Tm .TC {
    background-color: rgba(35,35,35,.9);
    padding: 20pt;
    border-radius: 10px;
}

.l6 {
    margin-right: 25pt;
}

/*CONTEXT MENUS*/

.J-N, .J-JK, .J-Ks-KO .J-N-Jz {
    color: #fff!important;
    background: none;
}

.J-awr, .J-N:hover, .J-JK:hover, .J-N-JT .J-N-Jz {
    color: #cacaca!important;
    background: none;
}

.J-N-JX, .J-Ph-hFsbo{
    filter: invert(100%);
}

/* OTHER WINDOWS */

div.Kj-JD {
    background-color: rgb(51,51,51);
    border-radius: 10px;
}

span.Kj-JD-K7-K0, div.Kj-JD-Jl>button{
    color: #fff;
}

div.Kj-JD-Jz, div.Kj-JD-Jl>button:hover{
    color: #cacaca;
}

span.Kj-JD-K7-Jq::after{
    filter: invert(100%);
}

.SK.ZF-zT {
    position: absolute;
    margin: 0 auto;
    margin-top: 10pt;
    background-color: rgb(51,51,51);
    border-radius: 10px;
    border: none;
}

.boo>.ZG {
    color: #fff;
}

.boo .aQl>.J-JN-M-I-Jm, .boo .aaa>.J-JN-M-I-Jm, .boo .ZE>.J-JN-M-I-Jm, .bs1+.bs3, .btj+.aD, .J-N-Jz:hover, .J-Ks:hover {
    color: #cacaca;
}

.boo .nr, .boo .nr:focus, .J-M, .J-N-JT, .J-N-JW, .J-N-Jz, .J-Ks {
    background-color: rgb(68, 68, 68);
    color: #fff;
}

.J-M {
    border-radius: 10px;
    margin-top: 5pt;
}

.bs1+.bs3::before, .btj+.aD::before, .bs1:checked+.bs3::before, .btj:checked+.aD::before, .bs5::after, .T-axO .J-JN-M-I-JG {
    filter: invert(100%);
}

.bs5::after{
    margin-left: 5pt;
}

.bs0>.acM.acN {
    color: rgba(202,202,202,0.38);
}

.ZF-zT{
    color: #cacaca;
}

.T-axO .J-JN-M-I-Jm:hover{
    color: #fff;
}

.lZ>.T-axO.J-JN-M-I:not(.J-JN-M-I-JW):not(.J-JN-M-I-JO){
    color: #cacaca;
    box-shadow: inset 0 -1px 0 0 rgba(183, 183, 183, .12);
}

.btl.acK{
    filter: invert(100%);
}

.btn{
    color: #cacaca;
}

.btn:before{
    filter: invert(100%);
}
}