Custom theme for ProtonMail website made to fix some UI problems and add own
1.0
All changes that fall into this update I will write later in one big post somewhere on the Internet. Thank you all for the feedback and help.
Copy-and-paste code from style.css if you want to make changes in the theme, or style.css.min inside the text area "Custom theme" in the Appearance tab.
- Sidebar
- Messages
- Navbar
- Alerts
The sidebar now with a cool image that I take from the background of ProtonMail website. I turn off logo with current plan label, for now, the reason for this was that header for the logo and sidebar locates in different DIV blocks so the image on the background of the sidebar duplicates. I will return logo for sure but I can't say when, and where it will be. Messages - even messages has its background color. Alerts now have the left border (not every alert receive it yet).
- Dashboard
(!experimental) - Messages
- Buttons
Dashboard page gets some experimental update - Plans takes much horizontal and vertical space, and because I can't entirely change the table I decide to hide it and reveal when the mouse cursor hovers plan's header. As for now it works incredibly bad and serves more like proof-of-work. You can look how it works here.
I want to listen from the users should I continue torture plans table or return to default state?
The message rows get some padding and cut on the borders. Buttons now have animations on click that I partially take from the RodrigoMatos user, for now, not every button has the animations.
- Fonts
- Spaces
- Buttons
A major change in the update is fonts, I apply "Times" for long texts like messages, alerts, and in Dashboard page, while "Helvetica" font to the rest text. Spaces in toolbar and header buttons so they weren't tied together. Fixed bug in small message layout when active message text color changed to white, at the same time hover changed background color to white as well resulting in just a white row. As well many other small updates provided but unfortunately, I forget to track them, my bad.
- Hover on messages
- Labels
- Colors
Today's update will be small but still have good changes to have. Begin with labels, by default they are not using full space in the row, and hard to read because most of the space took borders, not a text. Hover - with hover, you can see which message now under a cursor, not most useful feature you can imagine, but anyway it brings life to this lifeless place. Colors, change color for the sidebar to less contrast, change of grey color texts to black, developers use gray text on the smallest text possible which in the combination make it hard to read. Thanks to everyone who likes/dislikes the post and leave a comment.
- Notifications
- Sidebar folders
- Sidebar scrollbar
- Toolbar
- Message header
Notifications receive box-shadow removing treatment, so they don't look dirty. Sidebar folders height reduced so they do not take so much space. Sidebar scrollbar (a big one) receive the color of the smallest in the folders section. To toolbars, I added an upper border to distinguish it from the main header (again it temporary, I still not like an empty header). Finally, header inside the messages stay at one place, so it does not take so much space from the message itself.
- Scrollbar of the sidebar looks more like it's small predecessor in the "folder/labels" section
- Footer of the sidebar is gone ( it contains only the version of the product)
- The white background of the header (temporary)
- Violet indicator of active sidebar item
- Inputs and buttons are now round (options of input can't be modified only by CSS)
- The color of the star icon no more so yellowish (my favorite change so far)
- White-space set to "normal" for all items of the sidebar, so the name like "Addresses / Users" will be visible in some of the translations
- Obsessions with margins and paddings may be visible from time to time
- Others minor changes and bugs