☰

ProtonMail | Compact

A compact version of Protonmail's beta layout with customizable options

  1. /* ==UserStyle==
  2. @name           ProtonMail | Compact
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.0
  5. @description    A compact version of Protonmail's beta layout with customizable options
  6. @author         Freeplay(https://pages.codeberg.org/freeplay/)
  7. @preprocessor   stylus
  8.  
  9.  
  10.  -- OPTIONS --
  11. @var checkbox compactHeader "Compact Header" 1
  12.  
  13. @var checkbox compactToolbar "Compact Toolbar" 1
  14. @var checkbox toolbarText "Toolbar Text (English Only)" 0
  15. @var text mainWidth "Main Width" 600px 
  16.  
  17. @var checkbox compactPreview "Compact Preview" 1
  18.  
  19. @var checkbox compactSidebar "Compact Sidebar" 1
  20. @var text sidebarWidth "Sidebar Open Width" 250px
  21.  
  22. ==/UserStyle== */
  23. @-moz-document domain("beta.protonmail.com") {
  24. 	* {
  25. 		transition: width .2s, height .2s, padding .2s;
  26. 	}
  27. 	if compactHeader {
  28. 		.header {
  29. 			height: 55px;
  30. 			padding: 0;
  31. 			padding-right: 5px;
  32. 		}
  33. 	}
  34. 	
  35. 	/* TOOLBAR */
  36. 	if compactToolbar {
  37. 		.toolbar {
  38. 			height: 35px;
  39. 		}
  40. 	}
  41. 	if toolbarText {
  42. 		.pm-group-button, .toolbar-button--dropdown {
  43. 			align-items: center;
  44. 			text-decoration: none !important;
  45. 			color: var(--fillcolor-icons);
  46. 			padding: 0 1rem;
  47. 		}
  48. 		.toolbar .pm-group-buttons > .pm-group-button > svg, .toolbar-button--dropdown > svg:not(.dropdownv4-icon):not([data-name="caret"]) { 
  49. 			display: none;
  50. 		}
  51. 			.pm-group-button[data-action="read"]::before {
  52. 				content: "Mark as read";
  53. 				min-width: 80px;
  54. 			}
  55. 			.pm-group-button[data-action="unread"]::before {
  56. 				content: "Mark as unread";
  57. 				min-width: 96px;
  58. 			}
  59. 			.pm-group-button[data-action="trash"]::before {
  60. 				content: "Move to trash";
  61. 				min-width: 87px;
  62. 			}
  63. 			.pm-group-button[data-action="archive"]::before {
  64. 				content: "Move to archive";
  65. 				min-width: 99px;
  66. 			}
  67. 			.pm-group-button[data-action="spam"]::before {
  68. 				content: "Move to spam";
  69. 				min-width: 89px;
  70. 			}
  71.  
  72. 			.toolbar-button--dropdown[pt-tooltip="Move to"]::after {
  73. 				content: "Move to";
  74. 				min-width: 52px;
  75. 			}
  76. 			.toolbar-button--dropdown[pt-tooltip="Label as"]::after {
  77. 				content: "Label as";
  78. 				min-width: 49px;
  79. 			}
  80.  
  81. 			.toolbar-button--dropdown[pt-tooltip="Advanced options"]::after {
  82. 				content: "Advanced options";
  83. 				min-width: 110px;
  84. 			}
  85. 			.toolbar-button--dropdown[pt-tooltip="Sort view messages/conversations"]::after {
  86. 				content: "Sort view";
  87. 				min-width: 56px;
  88. 			}
  89. 	}
  90. 	/* COLUMN */
  91. 	.items-column-list {
  92. 		width: mainWidth;
  93. 	}
  94. 	
  95. 	if compactPreview {
  96. 		.p2 {
  97. 			padding: 0px;
  98. 			padding-top: 25px;
  99. 		}
  100. 		#conversation-view header {
  101. 			padding-left: 25px;
  102. 		}
  103. 		.message.marked {
  104. 			border: none;
  105. 		}
  106.  
  107. 		.message-container {
  108. 			border: none;
  109. 		}
  110. 	}
  111. 	
  112. 	/* Sidebar */
  113. 	.sidebar {
  114. 		width: sidebarWidth;
  115. 	}
  116. 	if compactSidebar {
  117. 		.sidebar{
  118. 			width: 55px;
  119. 			max-height: 100%;
  120. 			transition: width .2s;
  121. 		}
  122. 		.sidebar:hover {
  123. 			width: sidebarWidth;
  124. 			margin-right: -sidebarWidth;
  125. 		}
  126. 		.sidebar .pm-button--large {
  127. 			overflow: hidden;
  128. 			font-size: 0;
  129. 			filter: opacity(0);
  130. 			transition: font-size .7s, filter 1s;
  131. 		}
  132. 		.sidebar:hover .pm-button--large {
  133. 			font-size: 1.4rem;
  134. 			filter: opacity(1);
  135. 		}
  136. 		.navigation__icon, .menuLabel-item svg {
  137. 			min-width: 16px;
  138. 			margin-right: 2.5rem;
  139. 			transition: margin .5s;
  140. 		}
  141. 		.sidebar:hover .navigation__icon, .sidebar:hover .menuLabel-item svg {
  142. 			margin-right: .5rem;
  143. 		}
  144. 		.sidebar .navigation__sublink {
  145. 			padding-left: 2.5rem;
  146. 			transition: padding .5s;
  147. 		}
  148. 		.sidebar:hover .navigation__sublink {
  149. 			padding-left: 1.5rem;
  150. 		}
  151. 		/* Sidebar Footer */
  152. 		.sidebar .aligncenter.opacity-50.mb0-5 {
  153. 			display: none;
  154. 			height: 17px;
  155. 		}
  156. 		.sidebar:hover .aligncenter.opacity-50.mb0-5 {
  157. 			display: inline;
  158. 		}
  159. 	}
  160. }