Skip to content

Instantly share code, notes, and snippets.

@jessamynwest
Last active April 23, 2024 18:35
Show Gist options
  • Save jessamynwest/5280d857030f2ec454ef1f3b4a83aea4 to your computer and use it in GitHub Desktop.
Save jessamynwest/5280d857030f2ec454ef1f3b4a83aea4 to your computer and use it in GitHub Desktop.
Slightly calmer gmail
@-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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment