Skip to content

GMail- Old Table Layout by ivyclaw22

Write a review Install Get Stylus

Details

Authorivyclaw22

LicenseNo License

Categorygoogle

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Applies A classic-style (2013(11 maybe)-18(maybe)) table layout to gmail. Also brings a few other changes, like a white background

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.

UPDATES:
08/25/24: fixed alignment error, new compact mode soon

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, .yF {
		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 3px, 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_purple3.png)!important;
		background: none!important;
		opacity: 1
	}

	.T-KT-JW.xm::before {
		content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_purple_hover3.png)!important;
		background: none!important;
		opacity: 1
	}

	.T-KT.xm:active::before {
		content: url(//ssl.gstatic.com/ui/v1/icons/mail/superstars/star_lit_purple_active3.png)!important;
		...

Reviews

No reviews yet.