Applies A classic-style (2013(11 maybe)-18(maybe)) table layout to gmail. Also brings a few other changes, like a white background
GMail- Old Table Layout by ivyclaw22
Details
Authorivyclaw22
LicenseNo License
Categorygoogle
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Usage:
Use this style with either the Comfortable or Compact view (view will have to be manually changed in style) DO NOT USE WITH DEFAULT. The style has not been tested with hover actions so do not use those either unless you want to be a part of the testing process
Other Information:
Feel free to use this style however you like, even as part of a larger style. at one point i tried to make a full style, but the other parts (mainly the sidebar, like seriously, did you need to put the filters into a new section) were too annoying to work with.
if this looks broken to you(row is too long/extends off screen), I suggest looking at the colgroup in front of the table. This style has been tested with filters.
If you want to enable compact view, instructions are on line 67.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name GMail-Table Layout
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("mail.google.com") {
.cf {
border-collapse: unset;
}
.zA {
padding-bottom: 0px;
padding-top: 0px;
-moz-box-shadow: none;
box-shadow: none;
display: table-row;
position: relative;
}
.zt {
display: table;
}
.zt > tbody {
display: table-row-group;
}
.zA > .xY {
align-items: unset;
border-bottom: 1px solid #e5e5e5;
display: table-cell;
flex: none;
line-height: normal;
padding: 0;
vertical-align: middle;
}
.eSDBXb {
display: none
}
.null {
width: 100%
}
.yO {
background: rgba(243, 243, 243, 0.85);
color: #222;
}
.yO b {
font-weight: normal;
}
.zE {
background: rgba(255, 255, 255, 0.9);
color: #222;
}
.x7 {
background: #ffc;
color: #222;
}
.xY {
border-bottom: 1px solid #e5e5e5;
empty-cells: show;
font-size: 80%;
height: 2.83ex;
outline: none;
padding: 0;
vertical-align: middle;
white-space: nowrap;
}
.TC, .xY/*if you want compact, do 4px, 10 for default*/
{
padding-bottom: 10px!important;
padding-top: 10px!important;
}
td.apU {
padding-right: 0!Important;
}
.PF {
background: transparent;
width: 2px;
}
.PF.PE {
background: #4d90f0;
}
.F {
border-spacing: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
.a2q {
background: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid #d7d7d7;
font-size: 16px;
padding-bottom: 7px;
}
.a2q .cf {
border: solid #d7d7d7;
border-width: 0 1px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.zA > td.oZ-x3 {
padding-left: 0;
padding-right: 0;
}
td.oZ-x3 {
background: none;
padding: 10px 0;
}
.aqw td.oZ-x3 {
background: url(//ssl.gstatic.com/ui/v1/icons/mail/grippy_large.png) no-repeat 1px 50%;
}
td.oZ-x3::before, .xY > .T-Jo::before, .xY > .T-Jo::after, td.apU > .T-KT::after, .WA .a9q::after, .WA .a9q::before {
content: none!important
}
.T-Jo-auh {
display: block;
}
.xY .T-Jo.oZ-jc {
margin-left: 9px;
}
.T-Jo, .G-Ni .T-Jo {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid #c6c6c6;
border: 1px solid rgba(155, 155, 155, 0.57);
-webkit-border-radius: 0;
border-radius: 0;
font-size: 1px;
height: 11px;
margin: 0 4px 0 1px;
outline: 0;
vertical-align: text-bottom;
width: 11px;
background-image: none;
display: inline-block
}
.T-Jo:hover, .T-Jo:focus, .T-Jo:active {
border: 1px solid rgba(155, 155, 155, 0.57);
}
.T-Jo-ayH {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.65);
}
.T-Jo-Jp {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.65);
}
.T-Jo-JW {
border: 1px solid #b2b2b2;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.T-Jo-Je {
background-color: #ebebeb;
}
.T-Jo-JO {
border: 1px solid #4d90fe;
}
.T-Jo-auq.T-Jo-JO {
border: 1px solid #c6c6c6;
border: 1px solid rgba(155, 155, 155, 0.57);
}
.T-Jo-JE, .T-Jo-auq.T-Jo-JE {
background-color: #fff;
border: 1px solid #f1f1f1;
cursor: default;
}
.T-Jo-auh {
height: 15px;
left: 0;
outline: 0;
position: relative;
top: -3px;
width: 15px;
}
.T-Jo-ayH .T-Jo-auh {
background: url(//ssl.gstatic.com/ui/v1/menu/checkmark-partial.png) no-repeat -5px -3px;
background-image: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/menu/checkmark-partial.png) 1x, url(//ssl.gstatic.com/ui/v1/menu/checkmark-partial_2x.png) 2x);
}
.T-Jo-Jp .T-Jo-auh {
background: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png) no-repeat -5px -3px;
background-image: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/menu/checkmark.png) 1x, url(//ssl.gstatic.com/ui/v1/menu/checkmark_2x.png) 2x);
}
.xY > .T-Jo {
background-image: unset;
background-size: unset;
}
td.oZ-x3 {
text-align: left;
width: 24px!important;
}
.T-Jo {
display: inline-block
}
.aqw > td.oZ-x3::before, .xY > .T-Jo {
opacity: 1;
}
.T-KT, td.apU > .T-KT {
display: inline-block;
height: 19px;
padding: 2px;
text-align: center;
width: 19px;
}
.T-KT::before, td.apU > .T-KT.aXw::before {
content: url(//ssl.gstatic.com/ui/v1/star/star4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star4_2x.png) 2x);
background: none;
opacity: 1
}
.T-KT-JW::before {
content: url(//ssl.gstatic.com/ui/v1/star/star-hover4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star-hover4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star-hover4_2x.png) 2x);
background: none!important;
opacity: 1
}
.T-KT-Je::before {
content: url(//ssl.gstatic.com/ui/v1/star/star-active4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star-active4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star-active4_2x.png) 2x);
background: none!important;
opacity: 1
}
.T-KT-Jp::before {
content: url(//ssl.gstatic.com/ui/v1/star/star-lit4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star-lit4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star-lit4_2x.png) 2x);
background: none!important;
opacity: 1
}
.T-KT-Jp.T-KT-JW::before {
content: url(//ssl.gstatic.com/ui/v1/star/star-lit-hover4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star-lit-hover4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star-lit-hover4_2x.png) 2x);
background: none!important;
opacity: 1
}
.T-KT-Jp.T-KT-Je::before {
content: url(//ssl.gstatic.com/ui/v1/star/star-lit-active4.png);
content: -webkit-image-set(url(//ssl.gstatic.com/ui/v1/star/star-lit-active4.png) 1x, url(//ssl.gstatic.com/ui/v1/star/star-lit-active4_2x.png) 2x);
background: none!important;
opacity: 1
}
.T-KT-JX {
display: none
}
td.apU .T-KT.xn, td.apU .T-KT.xl, td.apU .T-KT.xk, td.apU .T-KT.xj, td.apU .T-KT.xm, td.apU .T-KT.xg, td.apU .T-KT.xe, td.apU .T-KT.xh, td.apU .T-KT.xd, td.apU .T-KT.xc, td.apU .T-KT.xf, td.apU .T-KT.aj7, td.apU .T-KT.aj6 {
top: 1px!important;
}
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
.bc2 {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/general_2x_black-7615b6cb194191f045f14420eaeb2583.png) 0 -440px;
-webkit-background-size: 24px 637px;
background-size: 24px 637px;
}
.yE {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/general_2x_black-7615b6cb194191f045f14420eaeb2583.png) 0 -506px;
-webkit-background-size: 24px 637px;
background-size: 24px 637px;
}
.Ab {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/general_2x_black-7615b6cb194191f045f14420eaeb2583.png) 0 -49px;
-webkit-background-size: 24px 637px;
background-size: 24px 637px;
}
.xM {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/general_2x_black-7615b6cb194191f045f14420eaeb2583.png) 0 -255px;
-webkit-background-size: 24px 637px;
background-size: 24px 637px;
}
.aVb {
background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/wbt/hangouts_icon32.png);
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
}
.xL {
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/general_2x_black-7615b6cb194191f045f14420eaeb2583.png) 0 -214px;
-webkit-background-size: 24px 637px;
background-size: 24px 637px;
}
}
.T-KT.xn::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_red3.png)!important;
background: none!important;
opacity: 1
}
.T-KT-JW.xn::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_red_hover3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xn:active::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_red_active3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xl::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_orange3.png)!important;
background: none!important;
opacity: 1
}
.T-KT-JW.xl::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_orange_hover3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xl:active::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_orange_active3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xk::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_green3.png)!important;
background: none!important;
opacity: 1
}
.T-KT-JW.xk::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_green_hover3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xk:active::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_green_active3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xj::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_blue3.png)!important;
background: none!important;
opacity: 1
}
.T-KT-JW.xj::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_blue_hover3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xj:active::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_blue_active3.png)!important;
background: none!important;
opacity: 1
}
.T-KT.xm::before {
content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_pu...