Skip to content

Instantly share code, notes, and snippets.

@thundernixon
Last active December 25, 2021 02:08
Show Gist options
  • Save thundernixon/bd84eca959565db33390797807566f7d to your computer and use it in GitHub Desktop.
Save thundernixon/bd84eca959565db33390797807566f7d to your computer and use it in GitHub Desktop.
Make GMail more readable with this CSS in the Chrome Extension *Stylus*
/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
/* Use with the Stylus Chrome extension */
/* Paste it into a Stylus style for URLs starting with https://mail.google.com */
/* (Probably won't work forever, but works as of November 2018) */
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/* =========================================================================== */
/* A bunch of styles to replace Google Sans & Roboto with SF or Segoe ======== */
/* =========================================================================== */
body,
input,
textarea,
select,
*,
.TO .nU>.n0,
.TO.NQ .nU>.n0,
.TO.nZ .nU>.n0,
.ah9>.CJ,
.n3>.CL>.CK,
.ha>.hP,
.hP,
.ha,
h1,
h2,
h3,
h4,
h5,
h6,
.z0>.L3,
.zA>.a4W,
.aKz,
.yW,
.a3s,
.g6,
.amn>.ams {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}
/* =========================================================================== */
/* Constrains center column to keep email readable on large screens ========== */
/* =========================================================================== */
.Tm.aeJ {
background: rgba(0, 0, 0, 0.04);
}
.aeF {
max-width: 1000px;
margin: 0 auto;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
font-size: 1.25em;
}
@media (min-width: 2000px) {
.aeF {
position: relative;
left: -92px;
}
}
.aXjCH *,
.Am,
.LW-avf.Am {
/* font-size: 1rem; */
line-height: 1.65;
}
/* =========================================================================== */
/* Makes email compose pop-up constrained ==================================== */
/* =========================================================================== */
.aSs {
display:grid;
justify-content: center;
}
.aSt, .aVN {
max-width: 1000px;
position: relative;
left: auto !important;
}
/* =========================================================================== */
/* The styles below allow text styling to show up in emails ================== */
/* =========================================================================== */
[face='monospace, monospace'] {
font-family: 'SFMono-Regular', monospace !important;
}
[face='times new roman, serif'] {
font-family: 'Charter', 'Georgia', 'times new roman', serif !important;
/* font-size: 1.1em !important; */
}
[face='arial black, sans-serif'] {
font-family: 'SFProText', 'arial black', sans-serif !important;
font-weight: 900;
}
[face='arial narrow, sans-serif'] {
font-family: 'InputSansCompressed-Regular', 'arial narrow', sans-serif !important;
}
[face='comic sans ms, sans-serif'] {
font-family: 'comic sans ms', fantasy !important;
}
[face='Georgia, serif'] {
font-family: 'Georgia', serif !important;
/* font-size: 1.05em !important; */
}
[face='garamond, serif'] {
font-family: 'garamond', serif !important;
/* font-size: 1.1em !important; */
}
[face='tahoma, sans-serif'] {
font-family: 'tahoma', sans-serif !important;
}
[face='trebuchet ms, sans-serif'] {
font-family: 'trebuchet ms', sans-serif !important;
}
[face='verdana, sans-serif'] {
font-family: 'verdana', sans-serif !important;
/* font-size: 0.95em !important; */
}
@eliheuer
Copy link

Installed, thanks!

@PuzzleHeaded555
Copy link

Love the script. Is there a way to restrict the width on images?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment