Proton Suite Alternative Layout by freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/proton/better-layout.user.css

Proton Suite Alternative Layout screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created atOctober 30, 2021 18:16

Updated atMay 25, 2022 20:31

Applies toProton

Statistics

Learn how we calculate statistics in the FAQ.

Total views259

Total installs253

Weekly installs9

Description

A better, more compact, nicer looking layout for ProtonMail, ProtonCalendar, and ProtonDrive.

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-10-302021-11-122021-11-252021-12-072021-12-202022-01-022022-01-142022-01-272022-02-092022-02-212022-03-062022-03-18Date0.002.805.508.3011.0013.8016.5019.3022.00Daily countDaily installsDaily updatesDaily views
2021-10-302021-11-122021-11-252021-12-072021-12-202022-01-022022-01-142022-01-272022-02-092022-02-212022-03-062022-03-18Date0.0025.0050.0075.00100.00125.00150.00175.00200.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Proton Suite Alternative Layout
@version        1.0.5
@description    A better, more compact, nicer looking layout for ProtonMail, ProtonCalendar, and ProtonDrive.
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/proton/better-layout.user.css
@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, 170, 300, 5, "px"]
@var range toolbarHeight "Toolbar Height" [50, 35, 50, 5, "px"]
@var checkbox footer    "Hide Sidebar Footer" 1
@var text  image       "Sidebar Background (Place in quotes)" '""'
@var range allignment  "Sidebar Background: Alignment" [0, 0, 100, "%"]
@var range blur        "Sidebar Background: Blur"      [0, 0, 20, 2]
@var range opac        "Sidebar Background: Opacity"   [.5, .1, 1, 0.1]

@var checkbox collapseSidebar "[WIP] Collapse Sidebar" 0

==/UserStyle== */

@-moz-document domain("mail.protonmail.com"), domain("calendar.protonmail.com"), domain("drive.protonmail.com"), domain("account.protonmail.com"), domain("account.protonvpn.com"), domain("proton.me") {
	
	@keyframes scaleIn {
		0% { transform: scale(1.1); opacity: 0 }
		30% { transform: scale(.99); opacity: 1 }
		60% { transform: scale(1.002); opacity: 1 }
		100%   { transform: scale(1); opacity: 1 }
	}

	
	:root {
		--sidebar-width: sidebarWidth;
	}
	
	html {
		position: sticky;
		top: 0;
	}
	
	.bordered {
		border: none !important;
	}
	
	.button-large {
		border-radius: 100px;
	}
	
	.navigation-link {
		margin-right: 8px;
		border-radius: 0 100px 100px 0;
		padding-right: 12px;
	}
	
	.file-preview {
		z-index: 99999999 !important;
		animation: scaleIn .5s;
	}
	.file-preview > div:first-child {
		padding: 0px 5px;
		padding-left: 10px;
	}
	
@media only screen and (min-width: 680px) {
	.content {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 100vh;
		overflow: hidden;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: var(--sidebar-width);
			background: url(image);
			background-position-x: allignment;
			background-size: cover;
			if not blur == 0 {
				filter: blur(blur px);
				transform: scale(1 + (blur / 100));
			}
			opacity: opac;
			transition: background-position-x .2s, transform .3s, filter .2s, opacity .2s;
		}
	}
	.content > [class="flex flex-item-fluid flex-nowrap"] {
		display: contents;
	}
	.main {
		height: 100vh;
		flex: none;
		min-width: unset;
		width: auto;
		transition margin .2s
	}
	.header {
		flex-direction: column;
		justify-content flex-start;
		width: var(--sidebar-width);
		height: auto;
		padding: 0;
		box-shadow: none !important;
		border: 0 !important;
		
		background: none;
		--background-norm transparent
		padding-bottom: 8px;
		z-index: 1;
        transition: width .4s, transform .2s cubic-bezier(0,0,0,1.5);
		& > * {
			width: auto;
			box-sizing: border-box !important;
		}
		.logo-container {
			padding: 0 14px;
			margin: 20px 0;
			.apps-dropdown-button svg {
				transform scale(.8)
			}
		}
		
		.searchbox-container {
			width calc(100% - 30px)
			border-radius 100px
			margin-bottom 10px
			// margin-top 5px
		}
		/[id*=advanced-search-overlay] {
			--width 600 !important
			--left 29 !important
			margin-top -5px
			&,.overlay-content {
				transform-origin top left
				animation popupIn .2s cubic-bezier(0,0,0,1)
			}
		}
		@keyframes popupIn {
			from {
				border-radius 18px
				transform scale(.9)
				opacity 0
			}
		}
		
		.topnav-container {
			flex: none;
			display: flex;
			// flex-wrap: wrap;
			padding: 0 14px;
			// overflow-x: auto;
			width: 100%;
			.topnav-list {
				// flex-wrap: wrap;
				overflow-x: auto;
				margin: 0 !important;
				width: 100% !important;
				li {
					min-width: 35px;
					flex-grow: 1;
					margin: 0 1px;
					--button-hover-background-color: var(--interaction-default-hover);
					button, a, span {
						width: 100% !important;
						justify-content: center;
						border: none !important;
						box-shadow: none;
						border-radius: 4px !important;
						span {
							width: 100%;
							border: none !important;
						}
					}
				}
				li:not(.relative) {
					flex: 1 1 auto;
					margin: 0;
					button, a {
						padding: 10px;
					}
				}
				.relative button {
					margin: 0;
				}
				.topnav-vr {
					display: none;
				}
				.topnav-link {
					svg {
						margin: 0;
					}
					span {
						display: none;
					}
				}
				.text-right {
					display: none;
				}
			}
		}
		& + .flex {
			display: contents;
		}
	}
	
	.sidebar {
		width: var(--sidebar-width) !important;
		background: none;
		z-index: 1;
		flex-grow: 1;
		button {
			white-space: nowrap;
		}
		& > [class="pl1 pr1 pb1 flex-item-noshrink"] {
			padding-bottom: 0;
			z-index: 3;
		}
		.flex.flex-align-items-center {
			flex-wrap nowrap
		}
		& > .scroll-if-needed {
			margin-top: -20px;
			background: linear-gradient(200deg, transparent, var(--background-weak) );
			scrollbar-color: transparent transparent;
			transition: scrollbar-color .2s;
			overflow-y: scroll;
			&:hover, &:focus-within {
				scrollbar-color: unset;
			}
		}
		& > .scroll-if-needed::before {
			content: "";
			position: sticky;
			top: 0;
			min-height: 40px;
			width: 100%;
			// background: linear-gradient(var(--background-norm),  transparent);
			z-index: 2;
			pointer-events: none;
		}
		if footer {
			.app-infos {
				display: none;
			}
		}
	}
}
	
	.main {
		border-radius: 0 !important;
		z-index: 2;
		border-top: 0;
		border-left: 0;
		max-width: unset !important;
		flex-wrap: nowrap;
		width: calc(100% - var(--sidebar-width));
		background-color: var(--background-norm);
		transition: width .2s, margin .2s !important;
		.toolbar {
			height: 36px;
			height: toolbarHeight;
			min-height: 36px;
			border-bottom: 0;
			background: none;
			box-shadow: var(--shadow-norm) !important;
			z-index: 100;
			overflow-x: auto;
			flex-wrap: nowrap;
			transition: height .2s
			& > div {
				min-width: max-content;
			}
			.vr, .toolbar-separator {
				margin: 10px 4px;
			}
			button {
				margin-bottom: 3px;
				margin-top: 3px;
				border-radius: 4px;
				min-height: 30px;
			}
		}
		
		.items-column-list-inner .sticky-top:first-child {
			position: relative;
			overflow-x: auto;
			flex-wrap: nowrap;
			border: 0;
			& > * {
				min-width: max-content;
			}
		}
		.items-column-list {
			// max-width: 400px;
			scrollbar-color: transparent transparent;
			transition: scrollbar-color .2s, flex .7s;
			overflow-y: scroll;
			&:hover, &:focus, &:focus-within {
				scrollbar-color: unset;
			}
		}
		.items-column-list-inner {
			// margin: 7px 6px !important;
			// margin-top: 0 !important;
			// margin-right: 0 !important;
			border: 0;
			background: var(--background-weak);
			.item-container {
				transition: color .2s, box-shadow .3s;
				// box-shadow: inset 0px 0 0 var(--email-item-selected-background-color,var(--interaction-norm));
				&::after {
					transition: all .1s;
					border-left-width: 0px;
				}
			}
			.item-container.item-is-focused {
				// opacity: 0;
				&::after {
					transition: all .2s, margin-left .4s !important;
					// border-right-width: 6px; !important;
					border-left-width: 6px !important;
					margin-left: 4px;
					margin-top: 16px;
					margin-bottom: 16px;
					box-sizing: border-box;
					box-shadow: none !important;
				}
			}
			.item-container:hover {
				// color: var(--text-norm);
			}
			.item-container.item-is-selected {
				background: none;
				box-shadow: inset 350px 0 100px var(--email-item-selected-background-color,var(--interaction-norm));
			}
			
		}
		
		.flex-item-fluid {
			padding: 0 !important;
		}
		.message-container {
			border-left: 0;
			border-right: 0;
			border-radius: 0 !important;
			margin-top: -1px !important;
			// border: 0;
			border-color: var(--border-weak) !important;
			margin: 0 0 !important;
			// padding-top: 10px;
			.border-top {
				border: none;
				padding-top: 0;
			}
			
		}
		// Header
		.message-conversation-summary {
			margin: 0 !important;
			padding: 8px 10px;
			// padding-top: 8px;
			padding-bottom: 8px;
			border-bottom: 0;
			box-shadow: var(--shadow-norm) !important;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				bottom: -10px;
				left: 0px;
				width: 10px;
				height: 10px;
				border-top-left-radius: 100px;
				box-shadow: -10px -10px 0 10px var(--background-norm);
			}
			
			.text-left.no-scroll.mt0-5 {
				display: none;
			}
		}
		
	}
	if collapseSidebar {
		.header {
			transform translate(3px, 2px)
			&:hover, &:focus-within {
				z-index 100
				transform translate(4px, 4px)
				border-radius 12px
				box-shadow 0 4px 12px rgba(0,0,0,0.2) !important
				border 1px solid var(--border-norm) !important
				background inherit !important
			}
		}
		.sidebar {
			transition width .2s
			.navigation-link-header-group, svg ~ span, .navigation-link, svg, .navigation-sublist > li {
				transition opacity .2s, min-width .2s, padding .2s, width .4s, margin .4s
			}
			.navigation-sublist {
				> li {
					width 100%
				}
				span {
					// white-space nowrap !important
					min-width sidebarWidth - 50px
					transition opacity .2s
				}
			}
			&:not(:hover) {
				width 70px !important
				.navigation-link {
					padding-left 1em
					svg {
						min-width 40px
					}
				}
				.navigation-link-header-group, svg ~ span {
					opacity 0
				}
				.navigation-sublist {
					margin-left 1em !important
					margin-right 8px !important
					padding-right 8px !important
					> li {
						width 2px !important
						margin 0 auto
						overflow hidden
						span {
							opacity 0
						}
					}
				}
				button {
					color transparent
				}
				& ~ .main {
					margin-left -150px
					width calc(100% - 70px)
				}
			}
		}
	}
	
}
@-moz-document domain("calendar.protonmail.com") {
	.calendar-grid-heading {
		display: flex;
		align-items: center;
		justify-content: center;
		// height: auto !important;
		padding: 8px 0 !important;
		height: 2em;
		& > span:first-child {
			// margin-top: 4px;
			margin-right: 6px;
			& + span {
				margin-top: 0;
				font-size: 1em;
			}
		}
	}
}

Reviews

No reviews yet.