A more modern, compact layout for Tutanota!
Dark mode is best used with Dark Reader with Tutanota's light theme.
Tutanota Modern by Freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/tutanota/tutanotamodern.user.css
Details
AuthorFreeplay
LicenseNo License
Created
Updated
CategoryTutanota
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
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
@version 1.0.2
@description A more modern, compact layout for Tutanota!
@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" [220, 190, 300, 1, "px"]
@var range emailsWidth "Emails Width" [300, 300, 600, 1, "px"]
@var checkbox miniSide "[WORK IN PROGRESS] Collapse Sidebar" 0
==/UserStyle== */
@-moz-document domain("mail.tutanota.com") {
body[data-darkreader-inline-bgcolor] {
background-color: inherit !important;
// --darkreader-inline-bgcolor: var(--darkreader-neutral-background) !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 }
}
.dialog {
animation: slideIn .4s .15s backwards;
}
.dropdown-panel {
// width: 600px;
animation: fadeIn .2s .12s backwards;
}
.dropdown-content {
padding-inline: 8px;
}
.dropdown-shadow.dropdown-panel {
box-shadow: 0 8px 24px rgba(0,0,0,0),
0 0px 12px rgba(0,0,0, .05),
0 0 0 100vw rgba(0,0,0,0.1);
border-radius: 12px;
}
@media only screen and (min-width: 1140px) {
/*** HEADER ***/
.header-nav {
position: absolute;
height: 93px;
// height 140px
width: sidebarWidth;
// display: flex;
// flex-direction: column;
display: block;
padding: 20px;
padding-bottom: 0;
box-shadow: none !important;
border: none !important;
background: none !important;
.abs.full-width {
top: 0;
left: 0;
overflow: hidden;
position: fixed;
height: 5px;
& > div {
// height: 100px;
filter: blur(200px);
transform: scale(50);
animation-duration: 1s;
}
}
.header-right, .header-left {
position: static;
padding: 0 !important;
margin: 0 !important;
.logo {
margin: 0 !important;
padding: 0 !important;
margin-bottom: 5px !important;
svg {
height: 30px;
}
}
&.header-right {
flex-wrap wrap
.button-height {
height: 30px;
}
.nav-bar-spacer {
display: none;
}
.nav-bar, & > .flex {
display: contents;
&[href="#"] {
display flex !important
flex-direction row
order -1
margin 0
position fixed
bottom 0
left 0
right unset
padding 10px 20px
span {
margin-right 10px
}
}
}
.plr-nav-button, .search-bar {
padding: 0;
flex: unset !important;
&:not(.search-bar) {
width: 0 !important;
flex-grow: 2 !important;
}
max-width: sidebarWidth - 40px !important;
flex-grow: 1 !important;
padding: 0 !important;
margin: 0 !important;
justify-content: center;
.nav-button {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
.label {
display: none;
}
}
svg {
height: 20px;
max-width: 90%;
}
& > button {
flex-grow: 1;
display: flex;
justify-content: center;
}
}
}
}
}
/*** COLUMNS ***/
// Layout
.view-columns {
display: flex;
// z-index: 2;
position: static;
transform: none !important;
& > div {
position: static !important;
width: unset !important;
&.view-column:first-child {
transition: width .2s;
width: sidebarWidth !important;
if miniSide {
width: 70px !important;
&:hover, &:focus, &:focus-within, .header-nav:hover ~ & {
width: sidebarWidth !important;
}
.folder-row > a {
padding-inline: 30px !important;
}
[class*="button-"] {
transition: margin .2s, width .2s, height .2s, min-width .2s;
}
button.button-width-fixed {
overflow: visible;
}
&:not(:hover), .header-nav:not(:hover) ~ &:not(:hover) {
.button-content {
padding: 0;
min-width: unset;
display: flex !important;
justify-content: center;
// margin-left: -4px;
}
drawer-menu {
opacity: 0;
height: 0 !important;
}
}
}
}
&.view-column:nth-child(2) {
width: emailsWidth !important;
}
#mail-viewer {
& > div, & > .header > div {
padding-left: 10px !important;
}
}
}
}
}
.view-columns {
& > div {
& > div {
transition: width .2s, flex .2s;
}
drawer-menu {
height: 35px !important;
padding-bottom 30px
opacity: 1;
overflow: hidden;
transition: opacity .2s, height .3s !important;
}
drawer-menu + div {
padding-top: 88px;
.scroll {
margin-top: 10px;
}
.mlr-l + .scroll {
margin-top: -18px;
padding-top: 20px;
transition: scrollbar-color .2s;
&:not(:hover) {
scrollbar-color: transparent transparent;
}
}
}
&.view-column:first-child {
border: 0;
& > .flex {
flex-direction: column;
}
[class="mlr-l mt mb"] {
margin: 16px 18px;
margin-bottom: 0;
background-color: inherit;
z-index: 2;
border-radius: 100px !important;
button {
border-radius: 100px !important;
height: 38px;
& > div {
max-height: 100%;
}
}
}
.folder-row {
&.flex-row {
padding-inline: 0;
& > a {
padding-inline: 26px;
}
}
small {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
text-transform: lowercase !important;
white-space: nowrap;
&:first-letter {
text-transform: uppercase !important;
}
}
}
drawer-menu {
width: auto;
height: auto;
border: 0;
order: 2;
& > .flex {
flex-direction: row;
padding: 0;
& > div:first-child {
max-width: 15px !important;
}
button {
width: auto !important;
height: 35px;
& > div {
width: auto !important;
min-width: unset !important;
max-height: 100%;
padding: 0;
.text-ellipsis {
display: none;
}
}
}
svg {
width: 18px;
height: 18px;
}
}
}
}
.list-alternate-background {
background: none;
}
&.view-column:nth-child(2) {
flex-grow: 1;
border: 0;
z-index: 100;
#settings & {
width: 400px !important;
}
}
// EMAILS LIST
.list-bg {
background: none;
}
.list-header {
border: 0;
box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1);
}
.list-container {
transition: scrollbar-color .2s;
&:not(:hover) {
scrollbar-color: transparent transparent !important;
}
}
.list {
margin-top: 10px;
display: flex !important;
flex-direction: column;
justify-content: flex-start;
min-height: 100%;
background: none !important;
position: relative;
overflow: visible;
&::before {
content: "";
position: absolute;
inset: -20px;
background-color: rgba(255,255,255,0.05);
opacity: .2;
z-index: -1;
}
.list-row, .row-selected {
background: none !important;
border-left: 0;
padding-inline: 14px !important;
& > div {
margin-left: 0 !important;
}
& > .flex {
margin-left: -4px !important;
}
&::after, &::before {
content: "";
opacity: 0;
background: transparent;
border: 0px solid transparent;
transition: opacity .2s, inset .1s .1s, background .2s !important;
pointer-events: none;
}
&::after {
content: "";
position: absolute;
border-top-color: currentColor;
border-top: .1px solid;
inset: 0 12px;
opacity: .1;
}
&.row-selected::before {
content: "";
position: absolute;
inset: 24px 0px;
border-left-color: inherit;
opacity: 1;
border-left: 3px solid;
}
.text-ellipsis.b, &.row-selected .text-ellipsis, &:hover {
&:not(:hover), &.row-selected {
font-weight: 600;
}
&::after {
content: "";
position: absolute;
inset: 5px 6px;
border-radius: 6px;
background-color: currentColor;
opacity: .05;
transition: opacity .2s, inset .1s, background .2s !important;
}
& + .list-row::after {
// border: 0 !important;
opacity: 0;
top: -5px;
left: 12px;
right: 12px;
}
}
&:hover + div::after {
}
.dot {
display: none;
}
}
.list-loading {
position: absolute;
height: 100%;
}
}
// EMAIL VIEWER
&.view-column:nth-child(3) {
flex-grow: 99999;
overflow: hidden;
}
#mail-viewer {
overflow-y: scroll !important;
&::before {
content: "";
position: fixed;
background-color: inherit;
top: 0;
height: 100%;
width: 10px;
z-index: 2;
mask: linear-gradient(to right, black, transparent) !important;
}
.bg-white {
animation: slideIn .2s .2s backwards; // Sometimes flashes occur while the email loads in, so I delayed it a little to fix
}
.header {
display: contents;
background: inherit;
& > div {
padding-inline: 20px;
border: 0 !important;
}
.subject-actions {
order: -1;
position: sticky;
top: 0;
left: 0;
margin: 0;
padding: 16px 20px;
padding-bottom: 12px;
background-color: inherit;
opacity: .95;
box-shadow: 24px 0px 24px rgba(0,0,0,0.1);
z-index: 2;
backdrop-filter: blur(20px...