A compact version of Protonmail's beta layout with customizable options
/* ==UserStyle==
@name ProtonMail | Compact
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A compact version of Protonmail's beta layout with customizable options
@author Freeplay(https://pages.codeberg.org/freeplay/)
@preprocessor stylus
-- OPTIONS --
@var checkbox compactHeader "Compact Header" 1
@var checkbox compactToolbar "Compact Toolbar" 1
@var checkbox toolbarText "Toolbar Text (English Only)" 0
@var text mainWidth "Main Width" 600px
@var checkbox compactPreview "Compact Preview" 1
@var checkbox compactSidebar "Compact Sidebar" 1
@var text sidebarWidth "Sidebar Open Width" 250px
==/UserStyle== */
@-moz-document domain("beta.protonmail.com") {
* {
transition: width .2s, height .2s, padding .2s;
}
if compactHeader {
.header {
height: 55px;
padding: 0;
padding-right: 5px;
}
}
/* TOOLBAR */
if compactToolbar {
.toolbar {
height: 35px;
}
}
if toolbarText {
.pm-group-button, .toolbar-button--dropdown {
align-items: center;
text-decoration: none !important;
color: var(--fillcolor-icons);
padding: 0 1rem;
}
.toolbar .pm-group-buttons > .pm-group-button > svg, .toolbar-button--dropdown > svg:not(.dropdownv4-icon):not([data-name="caret"]) {
display: none;
}
.pm-group-button[data-action="read"]::before {
content: "Mark as read";
min-width: 80px;
}
.pm-group-button[data-action="unread"]::before {
content: "Mark as unread";
min-width: 96px;
}
.pm-group-button[data-action="trash"]::before {
content: "Move to trash";
min-width: 87px;
}
.pm-group-button[data-action="archive"]::before {
content: "Move to archive";
min-width: 99px;
}
.pm-group-button[data-action="spam"]::before {
content: "Move to spam";
min-width: 89px;
}
.toolbar-button--dropdown[pt-tooltip="Move to"]::after {
content: "Move to";
min-width: 52px;
}
.toolbar-button--dropdown[pt-tooltip="Label as"]::after {
content: "Label as";
min-width: 49px;
}
.toolbar-button--dropdown[pt-tooltip="Advanced options"]::after {
content: "Advanced options";
min-width: 110px;
}
.toolbar-button--dropdown[pt-tooltip="Sort view messages/conversations"]::after {
content: "Sort view";
min-width: 56px;
}
}
/* COLUMN */
.items-column-list {
width: mainWidth;
}
if compactPreview {
.p2 {
padding: 0px;
padding-top: 25px;
}
#conversation-view header {
padding-left: 25px;
}
.message.marked {
border: none;
}
.message-container {
border: none;
}
}
/* Sidebar */
.sidebar {
width: sidebarWidth;
}
if compactSidebar {
.sidebar{
width: 55px;
max-height: 100%;
transition: width .2s;
}
.sidebar:hover {
width: sidebarWidth;
margin-right: -sidebarWidth;
}
.sidebar .pm-button--large {
overflow: hidden;
font-size: 0;
filter: opacity(0);
transition: font-size .7s, filter 1s;
}
.sidebar:hover .pm-button--large {
font-size: 1.4rem;
filter: opacity(1);
}
.navigation__icon, .menuLabel-item svg {
min-width: 16px;
margin-right: 2.5rem;
transition: margin .5s;
}
.sidebar:hover .navigation__icon, .sidebar:hover .menuLabel-item svg {
margin-right: .5rem;
}
.sidebar .navigation__sublink {
padding-left: 2.5rem;
transition: padding .5s;
}
.sidebar:hover .navigation__sublink {
padding-left: 1.5rem;
}
/* Sidebar Footer */
.sidebar .aligncenter.opacity-50.mb0-5 {
display: none;
height: 17px;
}
.sidebar:hover .aligncenter.opacity-50.mb0-5 {
display: inline;
}
}
}