Carbon theme in Proton Mail is beautiful but not complete, so i fix this.
/* ==UserStyle==
@name Proton Mail Carbon Editor Theme + customizations
@description Carbon theme in Proton Mail is beautiful but not complete, so i fix this.
@version 2.1.0
@author BreatFR
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/proton-mail
@supportURL https://discord.gg/Q8KSHzdBxs
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var checkbox avatar "Avatar instead initials" 1
@var text avatarurl "Avatar URL" "URL between quotes"
@var checkbox carbontheme "Fix Carbon Theme" 1
@var checkbox meterbar "Fix Meter bar colors" 1
@var checkbox fixtop "Fix Space Top" 1
@var checkbox folders1st "Folders 1st" 1
@var checkbox hidelabels "Hide Labels" 1
@var checkbox hideleftnav "Hide Left Nav Icon" 1
@var checkbox hideless "Hide Less Toggle" 1
@var checkbox hideoffer "Hide Special Offer" 1
@var checkbox hidetips "Hide Tips" 1
@var checkbox hideview "Hide View" 0
@var checkbox nospace "No space between all messages and folders" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("account.proton.me"), domain("calendar.proton.me"), domain("docs.proton.me"), domain("drive.proton.me"), domain("mail.proton.me") {
/* Proton */
if avatar {
[data-testid="heading:userdropdown"] > span:nth-of-type(2) > span,
.user-initials-active > span {
display: none;
}
[data-testid="heading:userdropdown"] > span:nth-of-type(2) {
border: 0;
padding: 0;
}
[data-testid="heading:userdropdown"] > span:nth-of-type(2)::before {
aspect-ratio: 1 / 1;
background: url(avatarurl) center center / cover no-repeat;
border-radius: .5em;
content: "";
height: auto;
margin: auto;
margin-right: .5em;
padding: 0;
width: 32px;
}
.user-initials-active {
aspect-ratio: 1 / 1;
background: url(avatarurl) center center / cover no-repeat;
border-radius: .5em;
content: "";
height: auto;
margin: auto;
padding: 0;
width: 3.4rem;
}
}
if meterbar {
.meter-bar-thumb--success {
--meter-bar-thumb-color-success: var(--signal-success);
}
.meter-bar-thumb--warning {
--meter-bar-thumb-color-warning: var(--signal-warning);
}
.meter-bar-thumb--danger {
--meter-bar-thumb-color-danger: var(--signal-danger);
}
}
if hideoffer {
[data-testid="cta:special-offer"] {
display: none;
}
}
}
@-moz-document url-prefix("https://docs.proton.me/u/0/") {
/* Proton Docs home */
if carbontheme {
.homepage-header,
.homepage-header > header,
main.main-area--with-toolbar.main-area-border,
.content,
.sidebar {
background: #16151a !important;
background-color: #16151a !important;
}
main > div > div > div > div,
[class="flex h-[2.75rem] items-center text-left"],
.bg-norm {
background: rgb(52, 49, 64) !important;
background-color: rgb(52, 49, 64) !important;
border-color: #16141c !important;
border-radius: 0;
}
main > div > div > div > div,
[class="flex h-[2.75rem] items-center text-left"],
[class="divide-weak divide-y"] *,
.bg-norm {
color: white;
}
[class="divide-weak divide-y"]:hover * {
background: grey !important;
background-color: grey !important;
}
.homepage-header *,
.sidebar * {
color: white;
}
svg path {
fill: white;
}
}
}
@-moz-document url-prefix("https://docs.proton.me/doc"), url("https://docs-editor.proton.me/?type=doc&mode=edit") {
/* Proton Docs doc */
if carbontheme {
[data-testid="table-button-group"],
.main {
background: #16151a !important;
background-color: #16151a !important;
}
div[style="display: contents;"] > div:nth-of-type(1),
.DocumentEditor {
background: rgb(52, 49, 64) !important;
background-color: rgb(52, 49, 64) !important;
color: white;
}
.main *:not([data-testid="status-container"] *) {
color: white !important;
}
[data-testid="status-container"] span {
color: #16151a !important;
}
}
}
@-moz-document domain("mail.proton.me") {
/* Proton Mail */
if fixtop {
.app-root {
margin-bottom: 0 !important;
}
}
if hideleftnav {
.sidebar-collapse-button-container--above-scroll {
display: none;
}
}
/* Labels */
ul.unstyled.navigation-list:last-child {
padding-bottom: 0;
}
if hidelabels {
ul.unstyled.navigation-list > li:has([data-shortcut-target="toggle-labels"]) {
display: none;
}
}
li.navigation-item--label,
ul.unstyled.navigation-list > div.py-2.ml-7.text-sm.color-weak {
padding-left: 1.75em;
}
if hideless {
ul.unstyled.navigation-list > div:nth-of-type(5) {
display: none;
}
}
if hidetips {
.tip-box {
display: none;
}
}
if folders1st {
ul.unstyled.navigation-list {
display: flex;
flex-direction: column;
}
ul.unstyled.navigation-list > li:nth-of-type(2) {
order: 0;
}
ul.unstyled.navigation-list > li:nth-of-type(1) {
order: 1;
}
ul.unstyled.navigation-list > div:nth-of-type(10) {
order: 2;
}
}
/* View */
ul.unstyled.navigation-list > div:nth-of-type(10) {
padding-left: 1.75em;
}
if hideview {
ul.unstyled.navigation-list > li:nth-of-type(1) {
display: none;
}
}
if nospace {
ul.unstyled.navigation-list {
padding-bottom: 0 !important;
}
ul.unstyled.navigation-list > li:nth-of-type(1),
ul.unstyled.navigation-list > li:nth-of-type(2),
ul.unstyled.navigation-list > li:has([data-shortcut-target="toggle-labels"]) {
margin-top: 0;
}
}
if carbontheme {
#proton-editor-container,
#proton-editor-toggle-container,
#proton-root,
#proton-root *,
#rooster-editor,
#rooster-editor div,
#rooster-editor p,
.composer-content--rich-edition,
.message-content,
.message-iframe *,
.protonmail_quote,
blockquote div,
blockquote *,
iframe {
background-color: var(--email-message-view-background-color) !important;
color: var(--text-norm) !important;
}
blockquote {
border-bottom-color: #444444 !important;
border-left: 3px solid #444444 !important;
border-right-color: #444444 !important;
border-top-color: #444444 !important;
}
#ellipsis > svg {
stroke: var(--text-norm) !important;
}
/* Signature color */
.protonmail_signature_block-user,
.protonmail_signature_block-user table div,
.protonmail_signature_block-proton {
color: var(--text-norm) !important;
}
/* Link color */
#rooster-editor a,
.protonmail_signature_block-user a,
.protonmail_signature_block-proton a {
color: #657ee4 !important;
}
/* Message list */
.items-column-list-inner--mail {
background-color: var(--email-message-view-background-color) !important;
}
.item-container:hover {
box-shadow: var(--shadow-raised);
}
.item-container.read {
background-color: var(--email-message-view-background-color) !important;
color: var(--email-item-read-text-color) !important;
}
.item-container.unread {
background-color: var(--email-item-unread-background-color) !important;
color: var(--email-item-unread-text-color) !important;
}
.item-container.item-is-selected {
background-color: var(--email-item-selected-background-color) !important;
color: var(--email-item-selected-text-color) !important;
}
/* Settings */
.quickSettings,
.quickSettings .footer,
.quickSettings .header--drawer {
background-color: var(--email-message-view-background-color) !important;
}
/* Apps dropdown menu */
ul[style="--apps-dropdown-repeat: 3;"] {
display: flex !important;
flex-flow: wrap;
justify-content: space-evenly;
}
}
/* Images in emails */
.rio-asin-container-image img {
mix-blend-mode: normal !important;
}
.sidebar {
inline-size: 260px !important;
}
}
@-moz-document domain("pass.proton.me") {
/* Proton Pass */
if avatar {
.avatar {
aspect-ratio: 1 / 1;
background: url(avatarurl) center center / cover no-repeat;
border-radius: .5em;
content: "";
height: auto;
margin: auto;
padding: 0;
width: 32px;
}
}
}
@-moz-document domain("wallet.proton.me") {
/* Proton Wallet */
if avatar {
[data-testid="heading:userdropdown"]::before {
aspect-ratio: 1 / 1;
background: url(avatarurl) center center / cover no-repeat;
border-radius: .5em;
content: "";
display: inline-flex;
height: 38.19px;
order: 1;
width: auto;
}
.user-initials-active {
aspect-ratio: 1 / 1;
background: url(avatarurl) center center / cover no-repeat;
border-radius: .5em;
content: "";
height: auto;
margin: auto;
padding: 0;
width: 3.4rem;
}
}
.sidebar {
width: auto;
}
}