A better, more compact, nicer looking layout for ProtonMail, ProtonCalendar, and ProtonDrive.
Proton Suite Alternative Layout by Freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/proton/better-layout.user.css
Details
AuthorFreeplay
LicenseNo License
Created
Updated
CategoryProton
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
Notes
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Proton Suite Alternative Layout
@version 1.1.1
@description A better, more compact, nicer looking layout for ProtonMail, ProtonCalendar, and ProtonDrive.
@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 sat "Theme Color Saturation" [.6, 0, 1, .1]
@var range sidebarWidth "Sidebar Width" [250, 170, 300, 5, "px"]
@var range toolbarHeight "Toolbar Height" [40, 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;
}
.file-preview {
z-index: 99999999 !important;
animation: scaleIn .5s;
}
.file-preview > div:first-child {
padding: 0px 5px;
padding-left: 10px;
}
.navigation-counter-item,
.bg-primary
[class*="button-"], button, .logo,
.items-column-list-inner > div {
filter saturate(sat) !important
}
.border-primary {
border-color transparent
&::before {
content ""
position absolute
inset 0
border inherit
border-radius inherit
border-color var(--primary)
pointer-events none
filter saturate(sat) !important
}
}
@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;
// right -20px !important
width: calc(var(--sidebar-width) + 24px);
if image != "" {
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 {
background var(--background-weak)
}
.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
// background var(--background-weak)
padding-bottom: 8px;
margin-bottom 0 !important
padding-inline 4px
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: 15px 0;
margin-bottom 10px
.apps-dropdown-button svg {
transform scale(.8)
}
}
.searchbox, [class="w35 flex-item-centered-vert"], .searchfield-container {
border-radius 100px
margin-bottom 10px
margin-top 0
padding: 0 14px;
border-radius 100px !important
// margin-top 5px
// --border-radius-md 100px
}
/[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;
&:not(:hover) {
// background none
}
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="px0-5 pb0-5 flex-item-noshrink"] {
padding-bottom: 0;
margin-bottom 0
margin-top 2px
z-index: 3;
padding-inline 18px
font-size .8em
width auto !important
button {
// width unset
// padding .8em 1.7em
// border-radius 100px
font-weight 600
font-size 1em
}
}
.flex.flex-align-items-center {
flex-wrap nowrap
}
& > .scroll-if-needed {
margin-top: -30px;
background: linear-gradient(200deg, transparent, var(--background-weak) );
// background var(--background-weak)
scrollbar-color: transparent transparent;
transition: scrollbar-color .2s;
overflow-y: scroll;
mask linear-gradient(transparent, black 50px)
&:hover, &:focus-within {
scrollbar-color: unset;
}
}
& > .scroll-if-needed::before {
content: "";
position: sticky;
top: 0;
min-height: 40px;
width: 100%;
// background var(--background-weak)
// background: linear-gradient(var(--background-norm), transparent);
z-index: 2;
pointer-events: none;
}
// Separators
.my0-25 {
margin-inline 20px
height 0
border-bottom 1px solid var(--border-norm)
margin-block .4em
}
.app-infos {
background var(--background-weak)
}
if footer {
.app-infos {
display: none;
}
}
}
}
.main {
border-radius 24px 0 0 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: toolbarHeight;
min-height: 36px;
padding-right 30px
border-bottom: 0;
background: var(--background-norm);
box-shadow: var(--shadow-norm) !important;
z-index: 100;
overflow-x: auto;
flex-wrap: nowrap;
transition: height .2s
// filter brightness(1.5)
if toolbarHeight == 35px {
display none
}
& > div {
min-width: max-content;
> * {
max-height 100%
min-height unset !important
}
}
.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;
margin-bottom -10px
margin-top 10px
& > * {
min-width: max-content;
}
}
.items-column-list-inner {
.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.item-is-selected {
background: none;
box-shadow: inset 350px 0 100px var(--email-item-selected-background-color,var(--interaction-norm));
}
}
// .message-container {
// // border-left: 0;
// // border-right: 0;
// // border-radius: 0 !important;
// margin: 0 !important;
// // border: 0;
// border-inline 0 !important
// border-radius 0 !important
// border-color: var(--border-weak) !important;
// margin-inline -1em !important
// // padding-top: 10px;
// .border-top {
// border: none;
// padding-top: 0;
// }
// .message-header {
// border-radius 0
// }
// }
// Header
.message-conversation-summary {
margin: 0 !important;
// padding: 8px 10px;
// padding-top: 8px;
// padding-bottom: 8px;
// border-bottom: 0;
padding 20px
padding-bottom 12px
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;
}
}
}
.drawer-visibility-control {
top 0 !important
height toolbarHeight
z-index 101
& ~ .drawer-sidebar {
position absolute
top 0
right 0
padding-right 50px !important
padding-left 20px !important
height too...