csalmeida / quark Goto Github PK
View Code? Open in Web Editor NEWA theme creator for ProtonMail.
Home Page: https://demo.csalmeida.com/quark/
A theme creator for ProtonMail.
Home Page: https://demo.csalmeida.com/quark/
The themes created don't bode well for the latest ProtonMail web client version (3.7.3). I'm aware that keeping the tool updated with the latest version may be troublesome, but I think it would be nice to show the compatibility version in the tool itself, just so anyone's aware right away of unforeseen issues.
(Colors are the default of the theme creator)
header#pm_header-desktop{background:#1A1A1A}header#pm_header-desktop ul.navigation{background:#1A1A1A}header#pm_header-desktop ul.navigation>li>a{color:#F2F2F2}header#pm_header-desktop ul.navigation>li>a:hover{color:#662D91}header#pm_header-desktop ul.navigation>li>a>span .fa{color:#F2F2F2}header#pm_header-desktop ul.navigation>li>a>span .fa{color:#F2F2F2}header#pm_header-desktop ul.navigation>li.active{box-shadow:0 6px 0 0 #662D91 inset;color:#662D91}header#pm_header-desktop ul.navigation>li:hover{box-shadow:0 6px 0 0 #662D91 inset;color:#662D91;border-radius:0px}header#pm_header-desktop ul.navigation>li .pm_dropdown .user b,header#pm_header-desktop ul.navigation>li .pm_dropdown .user strong,html.protonmail .help{color:#0d0d0d !important}header#pm_header-desktop ul.navigation>li .pm_dropdown .user b:hover,header#pm_header-desktop ul.navigation>li .pm_dropdown .user strong:hover,html.protonmail .help:hover{color:#0d0d0d}header#pm_header-desktop ul.navigation>li .pm_dropdown .pm_button.primary{background:#1A1A1A !important;color:#F2F2F2 !important}header#pm_header-desktop ul.navigation>li .pm_dropdown .pm_button.primary:hover{background:#662D91 !important;border-color:#662D91;color:#F2F2F2 !important}form.searchForm fieldset{background:#0C0C0c !important;border-radius:2px}form.searchForm fieldset input.query{background:#0C0C0c !important;color:#F2F2F2 !important;border-radius:2px}form.searchForm fieldset #closeAdvSearch,form.searchForm fieldset button[type=submit]{color:#F2F2F2}form.searchForm fieldset #closeAdvSearch:hover,form.searchForm fieldset button[type=submit]:hover{color:#662D91}form.searchForm fieldset button[type=button]{color:#F2F2F2;border-radius:2px}form.searchForm fieldset button[type=button]:hover{background:#0C0C0c;color:#662D91}form.searchForm #advancedSearchDropdown{border-radius:2px}form.searchForm.adv fieldset{border-radius:2px 2px 0 0}.pm_button.primary{background:#1A1A1A;border-color:#1A1A1A;color:#F2F2F2}.pm_button.primary:hover{background:#662D91;border-color:#662D91;color:#F2F2F2}.pm_button.primary:active,.pm_button.primary:focus{background:#1A1A1A;border-color:#1A1A1A;color:#F2F2F2}header#pm_header-desktop a.logo{background-color:#1A1A1A}body section.sidebar{background:#1A1A1A}body section.sidebar a.compose{background:#662D91;color:#F2F2F2}body section.sidebar a.compose:hover{background:#F2F2F2;border-color:#F2F2F2;color:#1A1A1A}body section.sidebar ul.menu li a{color:#F2F2F2}body section.sidebar ul.menu li a:hover{color:#662D91}body section.sidebar ul.menu li.active a,body section.sidebar ul.menu li.active a{color:#F2F2F2}body section.sidebar ul.menu li.active a i.fa,body section.sidebar ul.menu li.active a i.fa:hover{color:#662D91 !important;opacity:1}body section.sidebar ul.menu li a .fa-repeat{color:#F2F2F2;opacity:1}body section.sidebar ul.menu li a i.fa{color:#F2F2F2;opacity:0.5}body section.sidebar ul.menu li a i.fa:hover,body section.sidebar ul.menu li a:hover i.fa{color:#F2F2F2;opacity:1}body section.sidebar ul.menu li a em{color:#F2F2F2;opacity:0.5}body section.sidebar div.labels ul li a{color:#F2F2F2;opacity:0.5}body section.sidebar div.labels ul li a:hover{color:#F2F2F2;opacity:1}body section.sidebar div.footer div.link a,body section.sidebar a.version{color:#F2F2F2;opacity:0.5}body section.sidebar div.footer div.link a:hover,body section.sidebar a.version:hover{color:#662D91;opacity:1}body section.sidebar div.footer div.storage strong{color:#F2F2F2;opacity:0.5}body section.sidebar div.footer .bar em{background:#662D91;height:3px}body section.sidebar div.footer .bar{background:#F2F2F2;height:3px}.pm_buttons,.pm_buttons a{color:#1A1A1A}.conversation.marked::before{background:#662D91;width:5px}#pm_composer .composer header{background:#1A1A1A;color:#F2F2F2}p a{color:#662D91}#pm_composer .composer footer .pm_button{background:#F2F2F2;color:#1A1A1A}#pm_composer .composer footer .pm_button:hover{background:#F2F2F2;color:#1A1A1A}#pm_composer .composer footer .pm_button.primary{background:#1A1A1A;color:#F2F2F2}#pm_composer .composer footer .pm_button.primary:hover{background:#662D91;color:#F2F2F2}#pm_settings .pm_tabs{background:#e6eaf0}#pm_settings .pm_tabs li a.pm_button{color:#1A1A1A;border-color:#e6eaf0}#pm_settings .pm_tabs li a.pm_button:hover{color:#662D91}#pm_settings .pm_tabs li.active a.pm_button{color:#662D91}.pm_button.link{color:#662D91}.pm_toggle.off .off,.pm_toggle.on .on{background:#1A1A1A;color:#F2F2F2}.alert.alert-info{background:#e6eaf0;color:#000}html.protonmail .text-purple{color:#662D91}#pm_settings .bar em{background:#662D91;height:4px}#pm_settings .bar{background:#1A1A1A;opacity:0.5;height:4px}#plans .plans .plan h3{background:#1A1A1A;color:#F2F2F2}#plans .plans .plan.plus-plan h3 span,#plans .plans .plan.visionary-plan h3 span,#plans .plans .plan.visionary-plan header{color:#F2F2F2}#plans .plans .plan footer .cycle strong{color:#662D91}#plans .plans .plan footer .cycle .discount{border-color:transparent #662D91 transparent transparent}#plans .plans .plan footer .cycle .discount span{color:#F2F2F2}.pm_modal .modal-dialog{border-color:#1A1A1A}.pm_modal .modal-dialog .close{color:#F2F2F2;background:#1A1A1A}.pm_badge{color:#F2F2F2}.pm_badge.primary{background:#1A1A1A;color:#F2F2F2}.pm_badge.success{background:#662D91;color:#F2F2F2}.pm_table table th a,.pm_table table th .fa{color:#662D91}body .cg-notify-message.notification-success{background-color:#662D91;color:#F2F2F2}
ProtonMail gives an Invalid input
message when I click Save.
CSSlint.net gives warnings but the CSS is valid. I added spaces and line break before { and after }, but that didn't help.
Hi again!
What I really would like to have, is a dark skin: with light text and dark backgrounds.
Quark lets me do this for the framing UI, but not for
Any chance you could add that?
I had made some theming a couple of months ago, but ProtonMail CSS updates broke it quite often, so I gave up :(
I Have No Issues With This Project And Think It Is Awesome! Keep Up The Great Work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.