Skip to content

Tutanota Modern (rewritten) by Freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/tutanota/tutanotamodern.user.css

Screenshot of Tutanota Modern (rewritten)

Details

AuthorFreeplay

LicenseNo License

CategoryTutanota

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Minimal, Neater, And makes drastically better use of space than Tutanota's current design.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==

@name           Tutanota Modern (rewritten)
@version        2.0.3
@description    Minimal, Neater, And makes drastically better use of space than Tutanota's current design.
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues

@var range sidebarWidth "Sidebar width" [230, 190, 400, 10, "px"]
@var range emailsWidth "Emails list width" [32, 20, 40, 1, "vw"]
@var range emailWidth "Email view width (max = full)" [1200, 800, 1200, 50, "px"]
@var color bgColor "Background Color (keep the transparency)" rgba(130,130,150,0.1)
@var text wallpaper "Wallpaper" '""'
@var range wallpaperOpacity "Wallpaper: Opacity" [.1, .1, 1, .1]
@var range wallpaperBlur "Wallpaper: Blur" [0, 0, 20, 2, "px"]

==/UserStyle== */

@-moz-document domain("mail.tutanota.com"), domain("app.tuta.com") {
	muted = wallpaper == ""
	muted = true
	
/* 	transitionW = width .4s, inset .4s, grid .4s cubic-bezier(0.5,0,0,1) */
	
	:root {
		--muted bgColor
		--tbHeight 55px
		if bgColor == rgba(130,130,150,0.1) {
			--muted rgba(100,100,150, 0.04)
		}
	}
	
	* {
		scrollbar-width unset !important
	}
	
	// Animations
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1 }t
	}
	@keyframes slideIn {
		from { opacity: 0; transform: translateY(2px) }
		to { opacity: 1 }
	}
	@keyframes slideInBig {
		from { opacity: 0; transform: translateY(2px) }
		to { opacity: 1 }
	}
	@keyframes slideLeftIn {
		from { opacity: 0; transform: translateX(4px) }
		to { opacity: 1 }
	}
	#overlay {
		/.dialog {
			animation: slideIn .4s .15s backwards;
		}
		/.dropdown-panel {
			animation: fadeIn .2s .1s backwards;
		}
		/.dropdown-content {
			position static !important
			padding 8px 6px !important
			display flex
			flex-direction column
			width unset !important
			button {
				width unset !important
				border-radius 12px
				flex-grow 1
				padding-inline 16px 32px
			}
		}
		/.dropdown-shadow.dropdown-panel, .dropdown-shadow {
			box-shadow 0 6px 40px -24px rgba(0,0,0,0.2)
			border-radius: 12px;
		}
		.dropdown-shadow.dropdown-panel {
			width min-content !important
		}
		> .border-radius {
			border-radius 12px
			animation slideIn 1s !important
		}
		> [class="abs elevated-bg dropdown-shadow border-radius"] {
			width 'calc(%s - 20px)' % emailsWidth !important
			left sidebarWidth + 10 !important
			max-width 500px
			.list {
				animation slideIn .4s !important
			}
		}
	}
	
@media (min-width 1140px) {
	html {
		if wallpaper != "" {
			background none !important // dark reader fix
			&::before {
				content ""
				position absolute
				inset 0
				background url(wallpaper)
				background-size cover
				background-position center
				z-index -20
				opacity wallpaperOpacity
				filter blur(wallpaperBlur)
			}
		}
	}
	
	body {
		&::before, &::after {
			content ""
			position absolute
			top 0
			left sidebarWidth
			right 0
			height var(--tbHeight)
			z-index 1
			background inherit
			opacity .8
			transition transitionW
			border-bottom 1px solid rgba(150,150,150,0.2)
		}
		&::after {
			content ""
			opacity 1 !important
			background none !important
			z-index 1
			backdrop-filter blur(15px)
			if muted {
				background var(--muted) !important
			}
			
		}
		
		// Dark Reader Fix
		/[data-darkreader-mode="dynamic"] &[data-darkreader-inline-bgcolor] {
			background var(--darkreader-neutral-background) !important
			--muted transparent
		}
	}
	
	.main-view {
		position static !important
		overflow hidden !important
		max-height 100%
		if muted {
			background var(--muted) !important
		}
		> .fill-absolute {
			position static !important
			
			display grid
			grid-template-columns sidebarWidth emailsWidth 1fr
			grid-template-rows max-content 1fr
			height 100vh
			transition transitionW
						
			&::before, &::after {
				content ""
				position absolute
				inset 0
				right unset
				background rgba(100,100,100,0.05)
				width sidebarWidth
				pointer-events none
				backdrop-filter blur(12px)
				transition transitionW
			}
			&::after {
				background none
				backdrop-filter none
				if wallpaper != "" {
					/[data-darkreader-mode="dynamic"] & {
						background var(--darkreader-neutral-background) !important
						border-right 1px solid rgba(150,150,150,0.2)
						box-sizing border-box
						opacity .7
					}
				}
			}
			
			.header-nav {
				display flex
				flex-wrap wrap
				justify-content space-between
				gap 2px 15px
				align-items flex-start
				height auto
				padding 24px 18px
				padding-bottom 0
				background none !important
				z-index 9
				transition transitionW
				
				.logo-height {
					order -1
					margin 0 !important
					height 30px
					margin-bottom 14px !important
					margin-left 4px !important
					flex-grow 1
					svg {
						max-height 100%
					}
				}
				> .justify-end {
					display contents
					> button.small {
						position fixed
						top 0
						right 0
						order -1
						margin 0
						margin-left auto
						text-align right
						height var(--tbHeight)
						display flex
						justify-content center
						padding-inline 20px
					}
				}
				.nav-bar-spacer {
					display none
				}
				.search-bar {
					position fixed
					left sidebarWidth + 55
					width 'calc(%s - 120px)' % emailsWidth
					height var(--tbHeight)
					top 0
					z-index 99999
					margin 0 !important
					max-width unset !important
					padding 0
					box-shadow none !important
					background none
					.click {
						position absolute
						opacity 0
					}
					.items-center {
						padding 0 !important
						height 100%
					}
					&[focused=false] {
						* {
							cursor pointer !important
						}
					}
					> .icon {
						display none
					}
				}
				.nav-bar {
					margin-top 2px
					height 30px
					flex-grow 1
					justify-content unset
					align-items center
					gap 0 !important
					.plr-nav-button {
						padding 0
						flex-grow 1
						.icon {
							display block
							margin auto;
						}
						a {
							height 40px
						}
						.label {
							display none
						}
					}
				}
			}
			
			/.view-columns {
				position static !important
				display contents
				> .fill-absolute {
					position static !important
					transform unset !important
					will-change unset !important
				}
			}
			
			.view-column {
				width 100% !important
			}
			
			.header-nav,
 			.view-column:first-child {
				grid-column 1
			}
			// SIDEBAR 
			.view-column:first-child {
				position relative !important
				z-index 90 !important
				.plr-button-double, .folder-row {
					padding-inline 0
					margin-inline 0
				}
				> .flex {
					flex-direction column-reverse
				}
				.nav-bg, /.calendar-long-events-header {
					background none !important
				}
				/.folder-column {
					background none !important
					padding 8px 20px
					contain strict !important
					.overflow-x-hidden {
						overflow visible
					}
					[class="plr-m mt-form"] { // calendar
						padding 0
						.elevated-bg {
							background none
							padding 0
						}
					}
					.plr-button-double {
						margin-block 6px 2px
						button {
/* 							width auto */
							padding .5em 1.4em
							height unset !important
							border-width 1px !important
							border 0 !important
							border-radius 100px
							overflow hidden
							position relative
							&::before {
								content ""
								position absolute
								background currentcolor
								inset 0
								opacity .1
							}
							.button-content {
								height unset
							}
						}
					}
					.mlr-button, .nav-button {
						border-radius 12px
						padding-inline 8px 8px !important
						margin-inline -8px !important
						transition padding .4s, background .2s, margin .4s cubic-bezier(0,0,0,1.2), box-shadow 0s !important
						&[style*="background"] {
/* 							background white !important */
							box-shadow 0 0 60px rgba(0,0,0,0.07)
							padding-block 2px
							margin-block  4px !important
							font-weight 700
/* 							> button:nth-child(2) > .icon-large {
								transform translateX(2px)
							} */
						}
						> .icon {
							padding-inline 6px !important
						}
						> .label {
							padding-inline 0 !important
						}
						> button > .icon-large {
							height 1.3em !important
							width @height !important
							margin-top -1px
							transition transform .7s cubic-bezier(0,0.5,0,1)
							svg {
								height 100% !important
								width 100% !important
							}
						}
						[style="margin-left: 10px;"] {
							margin-left 25px !important
						}
						.abs {
							left 25px !important
						}
					}
					.folder-row.button-height {
						height auto
						margin-block 8px
					}
				}
				drawer-menu {
					width unset
					border-radius 0 !important
					background none
					border-top 1px solid rgba(150,150,150,0.2)
					flex-direction row !important
					overflow-x auto
					box-sizing border-box
					padding 4px !important
					.flex-grow {
						display none
					}
					.pb {
						padding 0
					}
					.text-ellipsis {
						display none
					}
					
				}
			}
			
			
			
			// EMAILS LIST
			.view-column:nth-child(2) {
				grid-column 2
				overflow visible !important
				> .list-column {
					position static
					height 100%
					background none !important
					display flex
					flex-direction column
					
					// HEADER
					> .list-bg {
						position absolute
						width emailsWidth
						margin 0 !important
						z-index 3
						border-radius 0 !important
						padding-inline 15px
						background none
						height var(--tbHeight)
						.button-height:first-of-type {
							margin-right auto
							padding 0
						}
						.icon-large {
							display flex
							svg {
								width 20px
								height 20px
								margin auto !important
							}
						}
					}
					> div:last-child {
						flex-grow 1
						height 0
						margin-...

Reviews

No reviews yet.