ProtonMail | Compact

A compact version of Protonmail's beta layout with customizable options
Wrap lines
/* ==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;
		}
	}
}
欢迎访问Greasy Fork镜像
