Skip to content

Instantly share code, notes, and snippets.

@tostr7191
Created May 31, 2020 11:59
Show Gist options
  • Save tostr7191/dd01145ce445895c24ea54714cf3ea33 to your computer and use it in GitHub Desktop.
Save tostr7191/dd01145ce445895c24ea54714cf3ea33 to your computer and use it in GitHub Desktop.

A compact theme that does not waste space for protonmail v4

For future reference. Not my work, I found it here: https://old.reddit.com/r/ProtonMail/comments/fgndnf/a_crammed_css_theme_for_beta/

.navigation__link, .navigation__link--groupHeader {
    padding: 0.3rem 0.3em 0.3rem 0.5rem;
}

.navigation__sublink {
    padding: 0rem 0rem 0rem 1rem;
}

.pm-button.toolbar-button, .toolbar-button, .toolbar-button.pm-button--info, .toolbar-button.pm-button--redborder {
    padding-left: 0.8em;
    padding-right: 0.8em;
}

.toolbar {
    height: 4rem;
}

.logo-container, .sidebar {
    width: var(--width-sidebar,19rem);
    max-width: 16rem;
}

.p2 {
    padding: 0.5em;
}

.pt1 {
    padding-top: 0.5em;
}

.message-container:not(.sent):not(.draft) .message-header.message-summary:before, .message-header.is-inbound:before {
    left: 7px;
    transform: skewX(16deg) translateX(-10px);
}

.main {
    margin-right: 9px;
}

.logo-container {
    padding-left: 0rem;
}

.logo {
    transform: scale(0.9);
}

.header {
    padding: 0rem 1rem 0rem 0;
    height: 6rem;
}

#conversation-view header h1 {
    padding-top: 3px;
}

.containsMessage p.bordered-container {
    margin: 0.6em 0;
}

.content-wrapper {
    height: calc(100vh - 6.1rem);
    max-height: calc(100vh - 6.1rem);
}

.sidebar {
    min-height: calc(100vh - 6.1rem);
    max-height: calc(100vh - 6.1rem);
}

.main-area--withToolbar, .main-area--withToolbar--noHeader {
    height: calc(100vh - 10.1rem);
    max-height: calc(100vh - 10.1rem);
}

.items-column-list, .items-column-list--mobile, .view-column-detail {
    height: calc(100vh - 10.1rem);
}

.message-container.sent:not(.draft) .message-header.message-summary:before, .message-header.is-outbound:before {
    right: 6px;
    transform: skewX(-16deg) translateX(10px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment