mailbox-declutter.js

// ==UserScript==
// @name         Decluttered mailbox.org
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Make io.ox (mailbox.org's webmailer) a bit nicer on the eyes
// @author       solarkraft@mailbox.org
// @match        https://office.mailbox.org/*
// @match        https://webmail.strato.de/appsuite/*
// ==/UserScript==

const apppendStyle = (css) => {
    const styleSheet = document.createElement("style")
    styleSheet.innerText = css//.replace(/\s+/g, '')
    document.head.appendChild(styleSheet)
    //document.body.appendChild(styleSheet) // Doesnt't help with e-mail list styles not being applied
}

(function() {
    'use strict';

    // Yep, only CSS for now.
    apppendStyle(`
/*** E-Mail view */

/* Add transitions (the original front-end has some, but they only work on the first invocation ... ? */
.detail-view-header,
.recipients,
.detail-view-header .from,
.detail-view-header .recipients,
.detail-view-header .date,
.detail-view-header .inline-toolbar-container,
.detail-view-header .flag,
.detail-view-header .flag-picker,
.mail-item .notification-item,
.mail-detail section.body,
#io-ox-topleftbar,
#io-ox-toprightbar {
    transition: 0.25s;
}

/* Let stuff gracefully appear */
.window-container,
.mail-detail section,
.mail-detail header,
#io-ox-appcontrol,
#io-ox-taskbar-container ul {
    animation-name: fadein;
    animation-duration: 0.25s;
    animation-fill-mode: backwards; /* Prevent flashing at animation start*/
}
/* Can be slower, since it happens early in the process while other stuff is still loading */
#io-ox-appcontrol { animation-duration: 0.5s; }

.thread-view-list>.thread-view-header .subject {
    font-size: 1.5rem;
    font-weight: initial;
    text-align: center;
    line-height: initial;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

.thread-view.list-view .list-item {
    background-color: transparent;
    /* Mail header (and rest, but is overridden by explicit mail content backgorund */
}

/* E-Mail container */
.thread-view-list {
    background-color: transparent;
    margin: 0 auto; /* Center */
}

.thread-view-header,
.thread-view {
    margin: 0 auto;
}

.thread-view-header {
    max-width: 60rem;
}

.thread-view {
    max-width: 50rem;
}

/** Mail header/meta informastion*/

.detail-view-header .from:not(:hover) {
    opacity: 0.75;
}
.mail-detail .from .person-link.person-from {
	font-weight: initial;
}

/* Show multiple senders ("via") side by side */
.mail-detail .sender {
    display: inline;
    margin-right: 1rem;
}

/* De-empathize meta information/actions */
/* I can already pretty reliably tell that I'm a recipient, lol */
.detail-view-header .recipients:not(:hover) {
    opacity: 0.1;
}

.detail-view-header .date:not(:hover) {
    opacity: 0.5;
}

/* .detail-view-header .inline-toolbar-container:not(:hover) {
    opacity: 0.25;
} */

/* You know what? We can do these things just as well in the toolbar right above */
.detail-view-header .inline-toolbar-container { display: none; }

.detail-view-header .flag:not(:hover),
.detail-view-header .flag-picker:not(:hover) {
    opacity: 0.25;
}

/* Hide pointless first-letter "avatar" */
.detail-view-header .contact-picture {
    display: none;
}

/* Hide unread toggle (there are enough ways to do it and it certainly doesn't belong there) */
.detail-view-header .unread-toggle { display: none; }

.mail-detail .detail-view-header {
    /* padding: 19px 72px 13px 40px; */
    /* padding: 0 0 0.25rem 2.5rem; */
    padding: 0;
    margin-bottom: -2rem; /* Compensate for hidden toolbar */
    z-index: -1; /* Below other elements to prevent click interactions */
}

/* Get rid of borders between sections */
.mail-detail.expanded .detail-view-header,
.mail-item .attachments,
.mail-item .notification-item {
    border: none;
}

/* .mail-item .notification-item:not(:hover) { opacity: 0.5; } */

/* Slimmer notifications */
.mail-item .notification-item,
.mail-item .attachments {
    padding: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    /* This would fix the weird positioning with Strato, but at the cost of weirdly aligning the items internally */
    /* display: block; */
}

/* Narrower and centered meta stuff above body */
.mail-item section:not(.body), .mail-item header {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
/* Header gets a bit less width for visual hierarchy */
/* .mail-item header {
    max-width: 40rem;
} */

/* E-mail body */
.mail-detail section.body {
    padding: 2rem;
    border-radius: 0.25rem;
    margin-top: 1rem; /* Just enough to not collide with an extra line in the header */
    box-shadow: 0 0.25rem 1rem hsla(1, 0%, 0%, 0.05);

    animation-delay: 0.1s; /* Stagger the entrance animation a tiny bit for visual flow */
}

/* E-Mail content */
.mail-detail .mail-detail-frame {
    border-radius: 0.25rem;
}

/* Mail content while loading */
/* Animation doesn't work because the element is replaced (?)*/
.mail-detail section.body.loading {
    background: transparent;
    box-shadow: none;
    border-radius: 10rem;
    animation-duration: 10s;
    animation-name: fadein;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* E-Mail loading spinner */
.io-ox-busy:before {
    /* top: 50%; */
    left: 50%;
    margin-top: 3rem;
    margin-left: -0.4em;
    font-size: 3rem;
}

/* Simplify search bar */
.form-control {
    box-shadow: none;
    border: none;
}

/* Vertically align text */
.tokenfield .twitter-typeahead>.token-input.tt-input {
    height: 1.8em;
}

/* Restyle plain text view */
.io-ox-mail-compose .editor .plain-text.monospace {
    font-family: inherit;
    font-size: 14px;
}

/* Deemphathize quota */
.io-ox-quota-view:not(:hover),
a[data-action="add-mail-account"]:not(:hover) {
    opacity: 0.2;
}

/* Less emphasis on sender, more on title (see tutanota) */
#io\.ox\/mail .list-item-content .from .person {
    font-weight: inherit;
    font-size: 0.8em;
}

#io\.ox\/mail .list-item-content .subject {
    font-size: 1em;
}

#io\.ox\/mail .unread .subject {
    font-weight: bolder;
}

/*** App frame thingy */

#io-ox-appcontrol {
    /* Same height as E-Mail control bar thingy */
    height: 40px;
    border-bottom: none;
    padding-left: 1rem;
    /* Prevent from overlapping controls*/
    z-index: initial;
}

/* Fix for Strato*/
#io-ox-appcontrol #io-ox-launcher > button,
#io-ox-appcontrol #io-ox-quicklaunch > button {
    height: 40px;
}

#io-ox-core #io-ox-screens {
    top: 40px;
}

/* Hide logo (not that I dislike the brand, it just doesn't fit */
#io-ox-appcontrol #io-ox-top-logo {
    display: none;
}

/* Drawer of more services I don't want and features that are rarely needed */
#io-ox-topleftbar:not(:hover),
#io-ox-toprightbar:not(:hover) {
    opacity: 0.25;
}

/* Smaller account icon */
#io-ox-appcontrol #io-ox-toprightbar .contact-picture {
    height: 28px;
    width: 28px;
}
`);


    // For some reason this doesn't go into effect when added here, while it does when added in the browser's style editor.
    apppendStyle(`
/* Less emphasis on sender, more on title (see tutanota) */
.window-body #io\.ox\/mail .list-item-content .from .person {
    font-weight: inherit !important;
    font-size: 0.8em !important;
}

.window-body #io\.ox\/mail .list-item-content .subject {
    font-size: 1em !important;
}

.window-body #io\.ox\/mail .unread .subject {
    font-weight: bolder !important;
}
`);


})();