Simpl Gmail userstyle https://github.com/leggett/simplify

gistfile1.txt

@-moz-document domain("mail.google.com") {
/* Last updated March 29, 2019 
 * Show tasks for Nicholas
 * Tell people to turn off chat and use icon actions
 * Search for TODO
 */
/* ================================================== */
/* APP BAR (menu and account switcher + container for search) */
/* Hide Gmail logo and name */
html a[title="Gmail"] {
    /* .gb_Vd - changes */
    display: none;
}
html .gb_qc {
    min-width: 58px !important;
    padding-right: 0px;
}

/* Hide App Switcher */
html #gbwa {
    display: none !important;
}

/* Give more space for Settings icon to live to left of profile photo */
html .gb_mc {
    padding-left: 52px;
}

/* Hiding company logo from identy */
html header#gb .gb_fa {
    width: 48px !important;
    border: none !important;
}
html .gb_ga {
    display: none !important;
}

/* Hide Google One color ring */
html .gb_Oa {
    display: none;
}

/* Add drop shadow when scrolled -- NEVER SETUP SCROLL LISTENER */
html.scrolled .w-asV {
    box-shadow: inset 0 -1px 0 rgba(100, 121, 143, 0.122), 0 3px 2px -2px rgba(0, 0, 0, .1);
}



/* ================================================== */
/* SETTINGS */
/* Show back button when in settings */
html.inSettings header#gb div[aria-label="Main menu"] {
    display: none !important;
}
html.inSettings header#gb div[aria-label="Go back"] {
    display: block !important;
}

/* Hide app bar and action bar when in Settings */
html.inSettings .aeH,
html.inSettings.hideSearch .aeH {
    width: calc(100vw - 138px) !important;
    left: 70px !important;
}
html.inSettings .aeH .G-atb,
html.inSettings.hideSearch .aeH .G-atb {
    display: none;
}
html.inSettings .aeH .nH,
html.inSettings.hideSearch .aeH .nH {
    box-shadow: none;
    -webkit-box-shadow: none;
}
html.inSettings .aeH .nH > div,
html.inSettings.hideSearch .aeH .nH > div {
    padding: 4px 8px !important;
}
html.inSettings header#gb form,
html.inSettings.hideSearch header#gb form {
    display: none;
}
html.inSettings .aeH .f2 .fY {
    margin: 16px 0 0 0 !important;
    padding: 0 8px !important;
    border-radius: 8px;
}
/* I'm not sure what this is for but it is ugly when using themes */
html.inSettings .aeH .f2 .dJ {
    display: none;
}


/* Add a little padding above Settings content */
html.inSettings .nH > table {
    margin-top: 24px;
}

/* Move Save buttons to top right of Settings -- a bit janky
html.inSettings tr[guidedhelpid="save_changes_row"] div {
	position: fixed;
	top: 64px;
	background-color: #fff;
	width: 62%;
	text-align: right;
	padding: 12px 0px;
}
html.inSettings tr[guidedhelpid="save_changes_row"] div button {
	padding: 8px 12px;
	border-radius: 4px;
	font-weight: bold;
}
*/
/* TODO: Leaving Settings is a bit janky 
   Settings bar flashes before leaving b/c urlHash changes before view */
/* ================================================== */
/* ACTION BAR (actions, pagination, and settings) */
/* Move action bar on top of app bar and to right of menu button */
html .aeH {
    position: absolute !important;
    z-index: 987;
    top: 0px !important;
    left: 60px !important;
    width: calc(65% - 112px);
}
html .aeH .G-atb {
    height: 64px;
}

/* Hide extra drop shadow on action bar - it bleeds through on the filter pop-up */
html .aeH .G-atb::before {
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Make bar wider when search is hidden */
html.hideSearch .aeH {
    width: calc(100vw - 215px) !important;
}

/* Move Settings to far right */
html .aeH .G-atb .aqJ .G-Ni.J-J5-Ji,
html .aeH .G-atb .adF .G-Ni.J-J5-Ji {
    position: absolute;
    left: calc(100vw - 182px);
    top: 0px;
}

/* Dim pagination controls unless hovered over */
html .aeH .G-atb .aqJ > div:first-child,
html .aeH .G-atb .adF > div:first-child {
    display: flex;
    opacity: 0.3;
    transition: opacity 0.2s ease-in 0s;
}
html .aeH .G-atb .aqJ > div:first-child:hover,
html .aeH .G-atb .adF > div:first-child:hover {
    opacity: 1;
}

/* Below 1100px wide, when search is expanded, hide pagination controls */
@media only screen and (max-width: 1100px) {
    html:not(.hideSearch) .aeH .G-atb .aqJ > div:first-child,
    html:not(.hideSearch) .aeH .G-atb .adF > div:first-child {
        display: none;
    }
}

/* Put drop down menus on top of everything */
html .J-M {
    z-index: 995;
}

/* Remove drop shadow from action bar */
html .aeI .G-atb {
    box-shadow: none;
    -webkit-box-shadow: none;
}


/* ================================================== */
/* SEARCH */
/* Push search to the right */
html #gb form {
    float: right;
    width: 35%;
    margin-right: 8px;
}

/* Minimize search to an icon when hidden */
html.hideSearch #gb form:not(.gb_oe) {
    width: 58px;
    margin-right: 0px;
}

/* Make search box white when hidden */
html.hideSearch #gb form:not(.gb_oe) {
    background-color: transparent;
}

/* Hide all search form buttons except search button when search is hidden */
html.hideSearch #gb form:not(.gb_oe) button:not([aria-label="Search Mail"]) {
    display: none;
}

/* Move filter form to be under search box? */
html .ZF-Av {
    left: auto !important;
    right: 121px !important;
    width: 500px !important;
}
html .ZF-Av > div {
    border: 0px;
}



/* ================================================== */
/* NAV */
/* Hide nav when minimized or in Settings */
html .bhZ:not(.bym),
html.inSettings .aeN {
    max-width: 0px !important;
    min-width: 0px !important;
    position: relative;
    z-index: 3 !important;
}

/* No shadow or label on compose button */
html .z0 > .L3 {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.15) !important;
    border-radius: 28px;
    font-size: 0;
    height: 56px;
    padding: 0;
    width: 56px;
}

/* Move compose button out of menu */
html .z0 {
    position: absolute;
    left: calc(100vw - 92px);
    top: calc(100vh - 140px);
    z-index: 3 !important;
    width: 54px;
    margin: 0;
    padding: 0;
}

/* Don't show the nav when hovering over the compose button */
html .bym {
    max-width: 0px !important;
    min-width: 0px !important;
    box-shadow: none !important;
    z-index: 3 !important;
}

/* Add some padding above the nav that the compose button used to provide */
html .wT {
    padding-top: 20px;
}

/* Hide bottom Hangouts tabs in nav -- BETTER TO JUST DISABLE CHAT IN SETTINGS
html .akc {
	display: none;
}
*/
/* ================================================== */
/* COMPOSER */
/* Raise the z-index of the compose window so it can go on top of the app bar */
html .dw {
    z-index: 988;
}
html .ah {
    z-index: 989;
}
html .aSs {
    z-index: 990;
}

/* Make it shorter by default */
html .dw > div > .nH > .nH > .no > .nH.nn:not(:first-child):not(:last-child):not(.aJl) .LW-avf.Am {
    min-height: 220px !important;
}
html .dw > div > .nH > .nH > .no > .nH.nn:not(:first-child):not(:last-child):not(.aJl) .qz {
    max-height: 540px !important;
}
html .dw > div > .nH > .nH > .no > .nH.nn:not(:first-child):not(:last-child):not(.aJl) .GP {
    height: 33vh !important;
    min-height: 240px !important;
    max-height: 540px !important;
}

/* A touch more padding above the from field and subject */
html .dw form.bAs,
html .aSs .aSt .I5 > form.bAs {
    padding-top: 6px;
}

/* Make full screen composer less wide */
html .aSs > .aSt {
    width: 900px !important;
    left: calc(50vw - 450px) !important;
}
html .aSs .aDg > .aDj {
    width: 865px !important;
    left: calc(50vw - 435px) !important;
}

/* Make scrim behind full screen composer darker */
html .aSs {
    background-color: rgba(0, 0, 0, .7);
}

/* Move extended compose buttons inline  */
html .aSs .aDl > .Ur,
html .aSs .aDn > .aDl > .Ur,
html .aSs .aDi > .aDl > .Ur {
    left: 205px !important;
    bottom: -54px !important;
}
html .aSs .aZ > .J-Z {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Hide useless buttons in full screen compose and move bar inline */
html .aSs .aZ .J-Z-I[command^="+undo"],
html .aSs .aZ .J-Z-I[command^="+redo"],
html .aSs .aZ .J-Z-I[command^="+bold"],
html .aSs .aZ .J-Z-I[command^="+italic"],
html .aSs .aZ .J-Z-I[command^="+underline"],
html .aSs .btC .oc.gU,
html .aSs .a8X .wG[command^="docs"],
html .aSs .a8X .wG[command^="op.money"] {
    display: none !important;
}



/* ================================================== */
/* MISC / MAIN VIEW (LIST AND CONVERSATION) */
/* Right and bottom padding on inbox and messages */
html .aeF {
    padding-right: 56px !important;
    margin-bottom: 150px;
}

/* Not sure why, but sometimes this div below the conversation gets 440px bottom padding */
html .pfiaof {
    padding-bottom: 0px !important;
}

/* Max width conversation */
html .AO .aeF > .nH {
    margin: 40px auto 0 auto;
    max-width: 900px;
}

/* Hide right panel & toggle */
html .brC-dA-I-Jw,
html .bAw {
    display: none;
}

/* Add extra padding between inbox groups */
html div[role="tabpanel"] {
    padding-bottom: 1em;
}

/* Hide toggle next to inbox groups */
html div[role="tabpanel"] h3 img {
    display: none;
}

/* TODO: Support Tasks being toggled */
/* Change The right sidebar's drop shadow to a stroke */
html .bq9,
html .bq9 div {
    box-shadow: none;
}
html .bq9 {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hide footer */
html .aeG {
    display: none;
}

/* Different treatment of read items in inbox */
html .yO {
    /* Gray bg with medium grey text
	background-color: rgba(242,245,245,0.4);
	color: #333;
	*/
    /* White with lighter text */
    background-color: rgba(255, 255, 255, 0.8);
    color: #555;
}
/* Back to defaults for selected items */
html .yO.x7 {
    background-color: #c2dbff;
    color: #202124;
}
/* TODO: Provide better support for dark themes */
/* Round corners of conversation for themes */
html .bAn {
    border-radius: 8px;
}

/* Dim print and pop-out icons in conversation view */
html .bAn .ade span.hk {
    opacity: 0.2;
    transition: opacity 0.4s ease-in 0s;
}
html .bAn .ade span.hk {
    opacity: 1;
}

/* Less shadow on items on hover */
html .zA:hover {
    box-shadow: inset 1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.15) !important;
}

/* Dim inbox tabs */
html .aKh {
    opacity: 0.5;
    transition: opacity 0.2s ease-in 0s;
    border-radius: 8px 8px 0 0;
}
html .aKh:hover {
    opacity: 1;
}

/* Make "new" badges on tabs grayscale */
html .aKh .aDG {
    filter: grayscale(100%);
}

/* Hide ads in top of inbox tabs */
html .aKB {
    display: none;
}

/* Increase z-index of loading butter bar */
html .ata-asE {
    z-index: 999 !important;
    /* TODO: make it less ugly too */
}

/* Put dialogs on top */
html div[role="alertdialog"] {
    z-index: 998 !important;
}
}