Slightly calmer gmail

peacefuleasygmail.css

@-moz-document url-prefix("https://mail.google.com/mail/") {

/*
*****
This style is based off of Nicer New Gmail but it's really more of a slash and burn approach. 
  NO COLORS except tiny bit of red and yellow and some blue I can't get rid of.
I know just enough CSS to be dangerous and not enough to really make things work correctly. Some things it 
chokes on:
  - tabs! I don't use them so who cares what they look like
  - hangout/chat tab - I disabled this as soon as they added it, maybe it's blue, I don't know
  - loading page - I think that big grey dot looks sort of nice, don't you?

Original: https://userstyles.org/styles/159843/nicer-new-gmail
  
CC BY-SA 2.0 license. You want to use it, give me credit and share what you make.
  My name is jessamyn. You can find me @jessamyn on twitter or at jessamyn.com
  
  TO INSTALL
  - Install Stylus or Sylish in your broswer (I use Firefox YMMV in other browsers)
  - Go to Preferences once it's installed and write/add a new style
  - Copy and paste this text into the box, give it a name, click save
  - Voila! I hope.
  
*****
*/

/*
*****
Two other things you want to do for this clean style

1. Using your ad blocker filter, block

https://www.gstatic.com/images/icons/material/colored_icons/1x/create_32dp.png (stupid colorful plus sign)
https://www.gstatic.com/images/icons/material/system/1x/arrow_drop_down_gm_googlered600_20dp.png (stupid red thing)

2.  Right-click on the gmail icon in the upper left and block that image using AdBlock or ublock
*****
*/

/*
*****
This part kills loading animation and other transitions dead
  thanks to this forum post https://dev.webonomic.nl/how-to-disable-css-transforms-transistions-and-animations
*****
*/
  
 *, *:before, *:after {
    /*CSS transitions*/
    transition-property: none !important;
    /*CSS transforms*/
    transform: none !important;
    /*CSS animations*/
    animation: none !important;
}
  
/* 
*****
Do not know if this part is totally necessary but turns everything into Tahoma 
Thank you to this PD style
https://userstyles.org/styles/163128/gmail-tahoma-2018
*****
*/
  
 body, td, input, textarea, select {
    font-family: Tahoma, RobotoDraft, Helvetica, Arial, sans-serif !important;
}
.TO .nU > .n0, .TO.NQ .nU > .n0, .TO.nZ .nU > .n0, .ah9 > .CJ, .n3 > .CL > .CK {
    font-family: Tahoma, RobotoDraft, Helvetica, Arial, sans-serif !important;
}
.zA > .a4W {
    font-family: Tahoma, RobotoDraft, Helvetica, Arial, sans-serif !important;
}
.yW {
    font-family: Tahoma, RobotoDraft, Helvetica, Arial, sans-serif !important;
}
.a3s, .g6 {
    font: small/1.5 Tahoma, Helvetica, sans-serif !important;
}
.amn > .ams {
    font-family: Tahoma, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}
  
/* 
*****
Colors 

This section makes almost everything grey or white

#ccc is a light grey
#000 is black
#fff is white
*****
  
*/
 .nH .qp,
/* header */
 .aic,
/* compose button */
 #p2DdMb,
/* add button */
 .HM .IG,
/* reply header */
 .aeH, .G-atb {
    /* action bar */
    background-color: #ccc !important;
}
.HM .I5,
/* reply form (top) */
 .HM .I5:hover,
/* reply form (top) */
 .HM .I5 .aDi::before,
/* reply form (bottom) */
 .HM .I5:hover .aDi::before {
    /* reply form (bottom) */
    border-color: #fff;
}
.byl .TO.nZ > .aHS-bnt .n0, .nZ > .aHS-bnt .bsU {
    background-color: #ccc;
    color: #fff;
}
.wT > .n3 .byl:first-child .aim:first-child .nZ {
    background-color: #ccc;
    color: #fff;
}
.btA .Uo {
    background-color: #ccc;
    box-shadow: none;
}
.btA .Uo:hover {
    background-color: #ccc;
    box-shadow: none;
}
body.aAU {
    background-color: #ccc;
}
.btA .Uo::focus {
    background-color: #ccc;
}
.bqf:focus {
    box-shadow: none;
}
div.Kj-JD-Jl > button.J-at1-atl, div.Kj-JD-Jl > button.J-at1-auR {
    background-color: #ccc;
}
div.Kj-JD-Jl > button.J-at1-atl, div.Kj-JD-Jl > button.J-at1-auR:hover {
    background-color: #ccc;
    outline: none;
}
div.Kj-JD-Jl > button.J-at1-atl, div.Kj-JD-Jl > button.J-at1-auR:focus {
    background-color: #ccc;
    box-shadow: none;
    outline: none;
}
.nH .ya .x8, .nH .ya .x2 {
    color: #ccc;
}
.bAp.b8.UC .vh {
    background-color: #ccc;
}
.z-b-ga {
    background-color: #ccc;
}
/* Header bar */
 .gb_Dc svg
  
/* Apps/Notifications buttons */
, .gb_gc svg
  
/* Hamburger menu */
 {
    color: #ccc;
    opacity: 0.8;
}
.gb_Xa:not(.gb_Za) .gb_Ed {
    padding: 4px;
}
  
/*
*****
Search focus underline
*****
*/
 .ZF-Av .boo .nr:focus {
    box-shadow: inset 0 -1px 0 0 #ccc;
}
  
/*
*****
Search button inside advanced search
*****
*/
  
 .T-I-atl {
    background-color:#ccc;
    box-shadow: none;
}
.T-I-atl:focus {
    background-color:#ccc;
}
.T-I-atl:hover {
    background-color:#ccc;
    box-shadow: none;
}
  
/* Logo */
  
 .gb_le .gb_Wa {
    background-size: 109px 40px;
    box-sizing: border-box;
    padding-left: 109px;
}
  
/*
 *****
 * Search bar
 *
 * Layout:
 * div (.gb_Bc.gb_Ud.gb_5d.gb_2d)
 *   div (.gb_Rd)
 *     form (.gb_Qe.gb_of) -- Search form
 *       div (.gb_rf.gb_lf) -- Search text field container
 *         input (.gb_9e) -- Search text field
 *****
 */

/* Outer search field */
 .gb_Qe {
    background-color: rgba(255, 255, 255, 0);
}
.gb_Qe button svg, .gb_Qe button img {
    color: rgba(0, 0, 0, 0);
    margin: 4px;
    padding: 4px;
}
.gb_Ac, .gb_Bc,
/* Top-right nav area */
 .gb_Rd, .gb_rf {
    height: 38px;
}
/* Search input */
 .gb_9e {
    padding: 11px;
}
.gb_9e {
    height: 36px;
}
.qj.qr {
    display: none;
}
  
/*
*****
hides labels - remove this if you like the little tag-looking things
*****
*/
 .qj {
    display: none;
}
  
/*
 * G Suite button
 ******
 * div (.gb_Qa.gb_Ng.gb_R) -- Outer button
 *   div (.gb_Ra) -- "G Suite" image container
 *     img (.gb_Va.gb_Ua) -- "G Suite" image
 *
 *   div (.gb_eb.gb_7c.gb_Ng.gb_R.gb_Ib.gb_Bf.gb_nb) -- Avatar outer container
 *   See top for how to get that stupid plus sign out of there
 *****
 */
 .gb_Qaa .gb_Ra {
    padding-bottom: 0;
}
.gb_Qa > .gb_eb {
    padding: 0 0 0 4px;
}
/* Body */
 .bkL>.no {
    background: #fff;
}
/* Sidebar */
 .aeN {
    margin: 0.8em;
    margin-left: 0;
    background: #fff;
    min-width: 240px !important;
}
/* Sidebar collapsed */
 .bhZ {
    margin-left: 0.8em;
}
/* Compose button container */
 .aic {
    margin-bottom: 1em;
    height: 24px;
}
/* Compose button inner container */
 .z0 {
    height: 24px;
    margin: 0;
    padding: 0;
}
/* Compose button */
 .z0 > .L3 {
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-size: 100%;
    height: 26px;
    padding: 8px 8px 8px 24px;
    width: 100%;
}
.z0 > .L3::before {
    background-size: 20px;
    box-sizing: border-box;
    width: 43px;
    height: 36px;
}
.z0 > .L3:hover {
    color: #fff;
    background-color: #555;
}
.bhZ:not(.bym) .z0>.L3 {
    padding: 8px 8px 8px 24px;
}
.wT {
    max-width: 230px;
    min-width: 220px;
}
/* Main pane */
 .bkK {
    margin-top: 0.8em;
    margin-right: 0.8em;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}
/*
 * Main pane action bar
 */
 .G-atb {
    height: 42px;
    margin-right: 0 !important;
}
/* Action bar text */
 .Bn, .v .f1, .v .f1 .f0 {
    color: #fffe;
}
/* Action bar text: Current page */
 .v .fZ {
    box-shadow: inset 0 -2px 0 0 #ccc;
}
.v .fZ .f0 {
    color: #fff;
    font-weight: bold;
}
/* Action bar icons */
 .T-I-ax7 .T-I-J3 {
    opacity: 0.9;
}
/* Disabled icon */
 .T-I-ax7.T-I-JE .T-I-J3 {
    opacity: 0.5;
}
/* Checkbox icon */
 .G-tF .T-Jo {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/check_box_outline_blank_white_20dp.png');
    opacity: 0.9;
}
/* Dropdown arrow */
 .G-asx, .d-Na-J3.d-Na-JX-ax3.d-Na-hFsbo, .az2 > .J-JN-M-I-JG, .Un::after {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/arrow_drop_down_white_20dp.png');
    opacity: 0.9;
}
/* Reload icon */
 .asf {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/refresh_white_20dp.png');
}
/* Menu icon */
 .asa.bjy::after {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/more_vert_white_20dp.png');
    opacity: 0.9;
}
/* Page left icon */
 .adj, .amI {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/chevron_left_white_20dp.png');
}
/* Page right icon */
 .adk, .amJ {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/chevron_right_white_20dp.png');
}
/* Split pane icon */
 .apI {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/horizontal_split_white_20dp.png');
}
.apJ {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/reorder_white_20dp.png');
}
.apK {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/vertical_split_white_20dp.png');
}
/* Settings icon */
 .aos {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/settings_white_20dp.png');
}
/* Back icon */
 .ar6 {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/arrow_back_white_20dp.png);
}
/* Archive icon */
 .ar8 {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/archive_white_20dp.png);
}
/* Report Spam icon */
 .asl {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/report_white_20dp.png);
}
/* Delete icon */
 .ar9 {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/delete_white_20dp.png);
}
/* Mark Unread icon */
 .bAP {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/mark_as_unread_white_20dp.png);
}
/* Snooze icon */
 .brW {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/watch_later_white_20dp.png);
}
/* Move To icon */
 .ase {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/drive_file_move_white_20dp.png);
}
/* Label icon */
 .asb {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/label_white_20dp.png);
}
/* Reply icon */
 .hB, .mL {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/reply_white_20dp.png);
}
/* Reply to All icon */
 .mK {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/reply_all_white_20dp.png);
}
/* Forward icon */
 .mI {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/forward_white_20dp.png);
}
/* Messages count */
 .Dj, .adl {
    color: #FFf;
    font-weight: bold;
}
/*
*****
 * Tabs - I do not use tabs so I don't know how this works with them
*****
 */

/* Tab */
 .J-KU-Jg-K9.aAA > .aRz > .aAy {
    border-right: 1px rgba(255, 255, 255, .2) solid;
}
/* Last tab */
 .J-KU-Jg-K9.aAA > .aRz > .aAy::last-child {
    border-right: 0;
}
/* Selected tab */
 .J-KU-Jg-K9.aAA .aRz.J-KU .J-KU-KO {
    background: rgb(255, 255, 255) !important;
}
.J-KU-KO.aIf-aLe:before {
    background-color: #fff;
}
.J-KU-KO.aAy:before {
    border-radius: 0;
    margin: 0;
}
/*
 *****
 * Right sidebar be GONE FOREVER
 *****
 */
 .bAw {
    display:none;
}
/* Outer container */
 .bAw {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    width: 48px;
    min-width: 48px;
    margin-top: 0.8em;
}
.bAw.it
/* Outer container hidden */
 {
    min-width: 0;
}
/* Inner container */
 .brC-aT5-aOt-Jw {
    background: #fff;
    border-left: 0;
    width: 48px;
}
/* Add button */
 #p2DdMb {
    padding: 0;
    position: absolute;
    top: 0;
}
#p2DdMb::before {
    content: none;
}
.bvq {
    width: 48px;
}
.bse-bvF-I {
    height: 42px;
    text-align: center;
}
#p2DdMb .bse-bvF-JX-Jw {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/add_white_24dp.png) !important;
    box-sizing: border-box;
    height: inherit;
    opacity: 0.9;
    padding-left: 24px;
    top: 0;
}
/* App icons */

/*
.brC-aT5-aOt-bsf-Jw {
    position: absolute;
}
*/
 .bse-bvF-JX-Jw {
    left: 0;
    width: 48px;
    height: 48px;
}
/*
 * Reply window
 */

/* Field Text COntainer */
 .HM .Ar {
    padding-top: 16px;
}
/* Field Text */
 .HM .Iy .az9, .HM .gO, .HM .gQ, .HM .J-JN-M-I {
    color: #fff;
}
/* Labels */
 .HM .gO {
    font-weight: bold;
}
/* Icons */
 .Un.J-JN-M-I {
    opacity: 0.1;
}
/* Formatting bar */
 .aX {
    height: auto;
}
.Ur {
    background: #fff;
    border-top: 1px #DDD solid;
    border-bottom: 1px #DDD solid;
    margin: 0;
    width: 100%;
}
.aZ>.J-Z {
    background: inherit;
    box-shadow: none;
}
/*
 *****
 * Settings
 *****
*/

/* Page names are in yellow - make this in white if it calms you */
  
 .dt {
    color: #ffff00;
    font-weight: bold;
}
  
  /* I don't even remember what the hell this is. My eyes hurt.
  */
  
.gb_9a gbii {
    display: none;
}
}