diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 57c1872f88..d31becc859 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -75,6 +75,7 @@ collaborators: - &koibtw koibtw - &TheAnonymousCrusher TheAnonymousCrusher - &42willow 42willow + - &scarcekoi scarcekoi userstyles: advent-of-code: @@ -781,6 +782,12 @@ userstyles: color: mauve note: Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others. current-maintainers: [*soya-daizu] + purely-mail: + name: Purely Mail + link: https://purelymail.com + categories: [productivity, email_client] + color: mauve + current-maintainers: [*scarcekoi] pypi: name: PyPI link: https://pypi.org diff --git a/styles/purely-mail/catppuccin.user.less b/styles/purely-mail/catppuccin.user.less new file mode 100644 index 0000000000..43211d6de7 --- /dev/null +++ b/styles/purely-mail/catppuccin.user.less @@ -0,0 +1,675 @@ +/* ==UserStyle== +@name Purely Mail Catppuccin +@namespace github.com/catppuccin/userstyles/styles/purely-mail +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/purely-mail +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/purely-mail/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apurely-mail +@description Soothing pastel theme for Purely Mail +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("purelymail.com") { + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --pm-purple-50: @mantle; + --pm-purple-500: @accent; + --bg-color: @base; + --text-color: @text; + --nav-bg: @mantle; + --border-color: @surface0; + --link-color: @blue; + --error-color: @red; + --warning-color: @yellow; + --success-color: @green; + --slate-500: @subtext0; + --slate-900: @text; + + a[href="/"] { + color: @accent; + + &:visited { + color: @accent; + } + } + + a:not(header a):not(.no-underline) { + color: var(--link-color); + + &:hover { + color: @sky; + } + + &:visited { + color: @lavender; + } + } + + hr { + color: @surface0; + } + + button.delete { + color: @text; + background-color: @surface0; + } + + .b--black-10, .th.b--black-20 { + background-color: @mantle; + } + + .user-row .b--black-10 { + background-color: @base; + } + + .bg-black-80 { + color: @text; + background-color: fade(@crust, 80%); + } + + .bg-dark-red { + color: @base; + background-color: @red; + } + + .bg-pm-purple-400, .bg-pm-purple-500 { + color: @accent; + background-color: fade(@accent, 30%); + + &:hover { + color: @accent !important; + } + } + + .bg-white, .bg-near-white { + background-color: @mantle; + } + + .hover-bg-pm-purple-400:hover { + background-color: @accent; + + &:is(header a) { + color: @base; + } + } + + .hover-pm-purple-50:hover { + color: @base; + } + + [style="color: green;"] { + color: @green !important; + } + + img[src="/favicon.svg"] { + @dark-accent: darken(@accent, 15%); + @darker-accent: darken(@accent, 20%); + + & when not(@flavor = latte) { + @svg: escape(''); + content: url("data:image/svg+xml,@{svg}"); + } + & when (@flavor = latte) { + @svg: escape(''); + content: url("data:image/svg+xml,@{svg}"); + } + } + } +} + +@-moz-document url-prefix("https://news.purelymail.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + color: @text; + background-color: @base; + } + + a { + color: @accent; + } + + footer { + border-top-color: @text; + color: @text; + } + + header { + border-bottom-color: @text; + } + + .logo a { + color: @accent; + } + + img[src="/images/favicon.svg"] { + @dark-accent: darken(@accent, 15%); + + & when not(@flavor = latte) { + @svg: escape('Layer 3Layer 2Layer 5'); + content: url("data:image/svg+xml,@{svg}"); + } + + & when (@flavor = latte) { + @svg: escape('Layer 3Layer 2Layer 5'); + content: url("data:image/svg+xml,@{svg}"); + } + } + } +} + +@-moz-document url-prefix("https://inbox.purelymail.com") { + :root.dark-mode { + #catppuccin(@darkFlavor); + } + :root { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + scrollbar-color: @accent @surface0; + + body { + color: @text; + } + + a { + color: @blue; + + &:hover { + color: @sky; + } + + &:visited { + color: @lavender; + } + } + + .table { + color: @text; + } + + #layout-content, + #layout-list, + #layout-sidebar, + #layout > div > .footer, + #layout > div > .header, + .menu.pagenav.pagenav-list, + .menu.pagenav.pagenav-list + .navlist, + .menu.pagenav.pagenav-list.expanded + .navlist, + .popup .listbox .footer, + .table td, + .table th, + .table thead th { + border-color: @surface0; + } + + /* Sidebar */ + #layout-menu { + background: @mantle; + border-right-color: @surface0; + + .popover-header { + background-color: @mantle !important; + } + } + + /* Mail list */ + #layout-list { + background-color: @base; + } + + /* Sidebar (e.g. inbox, drafts, sent, etc.) */ + #layout-sidebar { + background-color: @base; + } + + #layout > div > .footer { + background-color: @base; + } + + #taskmenu { + /* Sidebar buttons (e.g. compose, contacts, settings, etc.) */ + a { + color: @text; + + &:focus { + color: @accent; + background-color: fade(@accent, 30%); + } + + &:hover { + color: @base; + background-color: @accent; + } + + /* Sidebar logout button */ + &.logout { + color: @red !important; + + &:hover { + color: @base !important; + background-color: @red; + } + } + + /* Selected sidebar button */ + &.selected { + color: @accent; + background-color: fade(@accent, 30%); + } + } + + .action-buttons a { + color: @accent; + + &:hover { + color: @base; + } + } + } + + .listing li { + border-color: @surface0; + + /* Mail sidebar button text */ + a { + color: @text; + } + + &.selected { + color: @accent; + + ul { + background-color: @base; + } + + /* Selected mail sidebar button (inbox, drafts, etc.) */ + > a { + color: @accent; + background-color: mix(@accent, @base, 30%); + } + } + } + + .listing tbody td { + color: @text; + border-color: @surface0; + + a { + color: @text; + } + } + + /* Selected email in mail list */ + .listing tr.selected td { + color: @accent; + background-color: fade(@accent, 30%); + } + + :not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td { + border-left-color: @accent; + } + + /* Focused mail sidebar button */ + :not(.touch) .listing li > a:focus { + border-left-color: @accent; + } + + /* Mail list */ + .messagelist { + color: @subtext0; + + /* Mail list text */ + tr:not(.flagged):not(.deleted) td.subject span.date, + tr:not(.flagged):not(.deleted) td.subject span.fromto, + tr:not(.flagged):not(.deleted) td.subject span.size { + color: @subtext0; + } + + tr:not(.flagged):not(.deleted).selected td.subject a { + color: @accent; + } + + tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status { + color: @accent; + } + } + + /* Unread mail count */ + .folderlist li.mailbox .unreadcount { + color: @text; + background-color: mix(@mantle, @accent, 75%); + } + + /* Menu (e.g. select, options, shortcuts, etc.) */ + .menu a:not(.disabled), .header a.button.icon:not(.disabled) { + &:hover { + background-color: @mantle; + } + + &:focus { + background-color: @mantle; + } + } + + /* Menu popup (from the select, options, etc. buttons) */ + .popover { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + + .popupmenu .listing li > a:not(.disabled):hover { + background-color: @crust; + } + + .nav-tabs { + border-color: @surface0; + } + + .nav-tabs .nav-link { + color: @text; + border-bottom-color: @surface0; + + &.active { + color: @text; + background-color: @base; + border-color: @surface0; + border-bottom-color: transparent; + } + + &:hover { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + } + + .searchbar { + border-color: @surface0; + } + + .form-control { + color: @text; + background-color: @base; + + &:not(.is-invalid) { + border-color: @surface0; + + &:focus { + color: @text !important; + border-color: @accent; + box-shadow: 0 0 0 .2rem fade(@accent, 25%); + } + } + + &:not(#searchfilter):not(#s_interval):not(#s_scope):not(#fftext) { + background-color: @mantle; + color: @text; + + &:focus { + background-color: @surface0; + } + } + } + + .input-group-text { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + + .custom-switch .custom-control-input:checked ~ .custom-control-label { + &::before { + background-color: @accent; + border-color: @text; + } + + &::after { + background-color: @base; + } + } + .custom-switch .custom-control-label { + &::before { + background-color: @mantle; + border-color: @text; + } + + &::after { + background-color: @text; + } + } + + .file-upload { + border-color: @surface0; + + &.droptarget::after { + @svg: escape(''); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .btn-primary { + color: @base; + background-color: @accent; + border-color: lighten(@accent, 10%); + + &:focus:not(:disabled), &:hover:not(:disabled) { + color: @base; + background-color: darken(@accent, 10%); + } + } + + .btn-secondary { + color: @text; + background-color: @mantle; + border-color: @surface0; + + &:focus:not(:disabled), &:hover:not(:disabled) { + color: @text; + background-color: @crust; + } + } + + .btn-danger { + color: @red; + background-color: fade(@red, 30%); + border-color: @red; + + &:hover { + color: @base; + background-color: @red; + border-color: @base; + } + } + + /* CodeMirror */ + .formcontent.raweditor .CodeMirror { + color: @text; + background-color: @base; + border-color: @surface0; + } + .CodeMirror-gutters { + background-color: @mantle; + } + + .html-editor .editor-toolbar { + background-color: @mantle; + border-color: @surface0; + } + + .iframe-loader { + background-color: @base; + } + + .tox { + /* Editor bar */ + .tox-toolbar-overlord > div { + @svg: escape(''); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @mantle; + } + + /* Editor bar button enabled */ + .tox-tbtn--enabled { + background-color: @surface0; + } + + /* Editor bar button hovered */ + .tox-tbtn:hover { + color: @text; + background-color: @surface0; + } + + &.tox-tinymce { + border-color: @surface0; + } + } + + /* Content window (displays content of mail) */ + > body:not(#tinymce) { + background-color: @base; + } + + /* Popup dialog (e.g. list options) */ + .ui-widget-header, .ui-widget-content { + background-color: @base; + } + .ui-widget { + border-color: @surface0; + } + .ui-dialog .ui-dialog-title { + color: @text; + } + + /* Resise icon */ + .ui-widget-content .ui-icon.ui-resizable-se { + @svg: escape(''); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* Alerts */ + #messagestack { + .alert-info { + background-color: @blue; + } + + .alert-success { + background-color: @green; + } + } + /* Alert icon */ + #messagestack div { + color: @base; + + i.icon::before { + color: @base; + } + } + + .alert[style*="color:#fff;background-color:#459B21;"] { + color: @base !important; + background-color: @green !important; + } + + .ui.alert { + a:not(.btn) { + color: @base; + } + + &.boxinformation { + color: @blue; + background-color: fade(@blue, 30%); + + i.icon::before { + color: @blue; + } + } + + &.boxerror { + color: @red; + background-color: fade(@red, 30%); + + i.icon::before { + color: @red; + } + } + + &.boxwarning { + color: @yellow; + background-color: fade(@yellow, 30%); + + i.icon::before { + color: @yellow; + } + } + + &.boxconfirmation { + color: @green; + background-color: fade(@green, 30%); + + i.icon::before { + color: @green; + } + } + } + + /* Valid signature check */ + img.authres-status-img { + filter: @green-filter; + } + + img.contactphoto, #contactpic { + background-color: @mantle !important; + + @svg: escape(''); + content: url("data:image/svg+xml,@{svg}"); + } + + #logo { + @dark-accent: darken(@accent, 15%); + + & when not(@flavor = latte) { + @svg: escape('Layer 3Layer 2Layer 5'); + content: url("data:image/svg+xml,@{svg}"); + } + + & when (@flavor = latte) { + @svg: escape('Layer 3Layer 2Layer 5'); + content: url("data:image/svg+xml,@{svg}"); + } + } + } +}