diff options
| author | Cristiano Almeida <[email protected]> | 2016-11-26 14:18:41 +0000 |
|---|---|---|
| committer | Cristiano Almeida <[email protected]> | 2016-11-26 14:18:41 +0000 |
| commit | db5cb86b6ffaa0525b0078591adb7121152c072a (patch) | |
| tree | 5992c4e32cacc0fe237ef50b9ca71f2cdcf2ea74 | |
| parent | 167153d1abfd4e068b11e37f1154ead2e09fff38 (diff) | |
| download | protonmail-themes-db5cb86b6ffaa0525b0078591adb7121152c072a.tar.xz protonmail-themes-db5cb86b6ffaa0525b0078591adb7121152c072a.zip | |
Added screenshots of themes. Updated readme.
Added a folder with all themes that are up-to-date.
Now all folders are named in lowercase.
Linked screenshots to readme file.
Tweaked readme file text.
| -rw-r--r-- | README.md | 29 | ||||
| -rw-r--r-- | Themes/v3.5.16/green_lume/green_lume_temp.css | 332 | ||||
| -rw-r--r-- | screenshots/blue_and_orange_3.5.16.png | bin | 0 -> 36610 bytes | |||
| -rw-r--r-- | screenshots/dark_bubble_gum_3.5.16.png | bin | 0 -> 36584 bytes | |||
| -rw-r--r-- | screenshots/green_lume_3.5.16.png | bin | 0 -> 36510 bytes |
5 files changed, 24 insertions, 337 deletions
@@ -1,11 +1,30 @@ # ProtonMail Themes Since [v1.16](https://blog.protonmail.ch/protonmail-beta-v1-16-release-notes/), the encrypted mail service now allows themes using the Cascading Style Sheets! So feel free to pick one and use it. Now with [v3.5.16](https://blog.protonmail.ch/protonmail-beta-v2-0-release-notes/) comes updated theme goodness. -## Version 3.0 of ProtonMail is here! (v3.5.16 to be precise) +## Version v3.5.16 of ProtonMail is here! -### How to use these -Simply pick one from the themes folder and copy the code over to ProtonMail by heading over to **Settings**, click the **Appearance** tab and paste the code under the *Custom Theme* section and press save. -The theme should be applied. -### Feedback is amazing! +### How to use a theme. +1. Pick one from the themes folder in the repository. +2. Select the theme and select the raw view to see all the code. +3. Select all and copy the code. +4. At ProtonMail's website head over to **Settings**, click the **Appearance** tab. +5. Paste the code under the *Custom Theme* section and press save. +*In order to remove a theme, press clear.* + +The theme should be applied and you should see the changes immediately. + +### Feedback is always good! You like the themes in this repository but you have found a bug? Have awesome ideas? Want to say hello? Then feel free to get in touch via [twitter](https://twitter.com/_csalmeida) or [any other way](http://www.csalmeida.com/). Later :) + +### Available themes. +Check out some of the available themes you can choose from. + +####[Green Lume v3.5.16](https://raw.githubusercontent.com/csalmeida/protonmail-themes/master/Themes/v3.5.16/green_lume/green_lume.min.css) + + +####[Dark Bubble Gum v3.5.16](https://raw.githubusercontent.com/csalmeida/protonmail-themes/master/Themes/v3.5.16/dark_bubble_gum/dark_bubble_gum.min.css) + + +####[Blue and Orange v3.5.16](https://raw.githubusercontent.com/csalmeida/protonmail-themes/master/Themes/v3.5.16/blue_and_orange/blue_and_orange.min.css) + diff --git a/Themes/v3.5.16/green_lume/green_lume_temp.css b/Themes/v3.5.16/green_lume/green_lume_temp.css deleted file mode 100644 index 79aad9d..0000000 --- a/Themes/v3.5.16/green_lume/green_lume_temp.css +++ /dev/null @@ -1,332 +0,0 @@ -/* =========================================== * - * GREEN LUME 3.0 THEME BY CRISTIANO ALMEIDA - * - * @_csalmeida - * http://www.csalmeida.com - * https://www.behance.net/_csalmeida - * - * =========================================== */ - -/* Frame (topbar and sidebar.) */ - -header#pm_header { - background: #1a1a1a; -} - -body section.sidebar { - background: #1a1a1a; -} - -header#pm_header .logo { - background: #1a1a1a; -} - -/* Search bar */ -header#pm_header form.searchForm fieldset { - background-color: #1a1a1a; - border-radius: 2px; -} - -header#pm_header form.searchForm fieldset button[type="button"] { - background-color: #1a1a1a; - color: #8cc63f; - border-radius: 2px 0 0 2px; -} - -header#pm_header form.searchForm fieldset button[type="button"]:hover { - background-color: #8cc63f; - color: #fff; -} - -header#pm_header form.searchForm fieldset #closeAdvSearch, header#pm_header form.searchForm fieldset button[type="submit"] { - color: #8cc63f; - border-radius: 0 2px 2px 0; -} - -.pm_form .input-icon .fa { - color: #8cc63f; -} - -/* Top Navigation */ - -header#pm_header ul.navigation li.active a, header#pm_header ul.navigation li:hover a { - border-top-color: #8cc63f !important; -} - -header#pm_header ul.navigation li a strong { - color: #fff; -} - -header#pm_header ul.navigation li a .fa { - color: #fff; -} - -header#pm_header ul.navigation li a strong:hover { - color: #8cc63f; -} - -/* TN Dropdown Menu */ -header#pm_header .pm_buttons .pm_button.primary, header#pm_header .pm_buttons .pm_button.primary:hover { - background-color: #8cc63f !important; - border-color: #8cc63f !important; -} - -/* TN Links Hover */ -header#pm_header-desktop ul.navigation li.active a, header#pm_header-desktop ul.navigation li:hover a { - border-top-color: #8cc63f !important; -} - -header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong { - color: #8cc63f; -} - -header#pm_header-desktop ul.navigation li.active a .fa, header#pm_header-desktop ul.navigation li:hover a .fa { - color: #8cc63f; -} - -header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong { - color: #8cc63f; -} - -/* Sidebar Navigation */ -section.sidebar a.compose { - background-color: #8cc63f; - border-color: #8cc63f; -} - -section.sidebar a.compose:hover { - background-color: #75ba1a; - border-color: #75ba1a; -} - -section.sidebar ul.menu li.active a i.fa { - color: #8cc63f; -} - -section.sidebar ul.menu li a i.fa { - color: #373737; -} - -section.sidebar ul.menu li a { - color: #fff; -} - -section.sidebar ul.menu li a:hover { - color: #8cc63f; -} - -/* Storage */ - -section.sidebar div.footer .bar em { - background-color: #8cc63f; -} - -section.sidebar div.footer div.storage strong { - color: #8cc63f; -} - -section.sidebar div.footer a.version { - color: #fff; -} - -section.sidebar div.footer a.version:hover { - color: #8cc63f; -} - -/* Settings Navigation */ - -#pm_settings .pm_tabs li.active a.pm_button { - background: #fff !important; - color: #1c1c1c; -} - -#pm_settings .pm_tabs li a.pm_button { - border-color: #1c1c1c; - background: #1c1c1c; - color: #fff; -} - -#pm_settings .pm_tabs li a.pm_button:hover { - background: #373737; -} - -#pm_settings .pm_tabs { - /*background: #2f2e2e;*/ - background: #474747; -} - -/* Accounts Settings */ -.pm_button.primary { - background-color: #373737; - border-color: #373737; -} - -.pm_button.primary:hover { - background-color: #8cc63f; - border-color: #8cc63f; -} - -.pm_button.primary.disabled, .pm_button.primary[disabled] { - background-color: #373737; - border-color: #373737; -} - -.pm_sort ul li .fa.fa-check { - color: #1c1c1c; -} - -/* Dashboard Settings */ - -#pm_settings #plans header .link { - color: #8cc63f; -} - -#pm_settings #plans .plans .plan header { - background: #1c1c1c; - border: 1px solid #1c1c1c; -} - -#pm_settings #plans .plans .plan .price, #pm_settings #plans .plans .plan h3 { - color: #1c1c1c; -} - -.pm_button.primary:active, .pm_button.primary:focus { - background: #8cc63f; - border-color: #8cc63f; -} - -html.protonmail .text-purple { - color: #8cc63f; -} - -/* Label Settings */ - -.pm_button.round { - border-radius: 2px; - border: 1px solid #7b7b7b; -} - -.pm_button.round .fa { - color: #8cc63f; -} - -/* Security Settings */ -.pm_button { - color: #1c1c1c; -} - -.pm_table td { - color: #1c1c1c; -} - -/* Contacts */ -.pm_table th a { - color: #1c1c1c; -} - -.pm_table th .fa { - color: #1c1c1c; -} - -/* Report Bug */ -.pm_toggle.off .off { - background: #8cc63f; -} - -p a { - color: #8cc63f; -} - -/* Links */ - -.pm_button.link { - color: #8cc63f; -} - -/* Inbox */ - -.pm_buttons a { - color: #1c1c1c; -} - -body #conversation-list-rows .conversation.read { - color: #1c1c1c !important; -} - -/* Reading e-mail. */ -#conversation-view .message .toggleDetails { - color: #8cc63f; -} - -#pm_conversations.rows .list .message.selected { - border-left: 5px solid #8cc63f; -} - -/* Composing e-mail */ -#pm_composer .composer header { - background: #2c2b2b; -} - -#pm_composer .composer header .pm_button { - color: #8cc63f; -} - -#pm_composer .composer footer .pm_button.primary { - background: #8cc63f; - border-color: #8cc63f; -} - -#pm_view article.message .toggleDetails { - color: #8cc63f; -} - -#pm_view article.message a.compose { - color: #1c1c1c; -} - -/* Notifications */ -body .cg-notify-message.notification-success { - background-color: #8cc63f; - border-color: #8cc63f; -} - -/* Tootips */ - -/* -div.tooltip.inner { - background: #2c2b2b !important; -}*/ - -/* Mobile 1030px */ -header#pm_header a.logoMobile { - color: #fff; -} - -header#pm_header .compose { - background-color: #8cc63f; -} - -body.secure section#pm_sidebarMobile { - background-color: #1c1c1c; -} - -section#pm_sidebarMobile .pm_button.round { - background-color: #373737; -} - -section#pm_sidebarMobile .pm_button.round .fa { - color: #8cc63f; -} - -/* Mobile 500px */ -header#pm_header .compose { - color: #8cc63f; -} - -header#pm_header > a.logoMobile { - color: #fff; -} - -header#pm_header > a { - color: #8cc63f; -}
\ No newline at end of file diff --git a/screenshots/blue_and_orange_3.5.16.png b/screenshots/blue_and_orange_3.5.16.png Binary files differnew file mode 100644 index 0000000..2866c03 --- /dev/null +++ b/screenshots/blue_and_orange_3.5.16.png diff --git a/screenshots/dark_bubble_gum_3.5.16.png b/screenshots/dark_bubble_gum_3.5.16.png Binary files differnew file mode 100644 index 0000000..53a09bc --- /dev/null +++ b/screenshots/dark_bubble_gum_3.5.16.png diff --git a/screenshots/green_lume_3.5.16.png b/screenshots/green_lume_3.5.16.png Binary files differnew file mode 100644 index 0000000..698cf4a --- /dev/null +++ b/screenshots/green_lume_3.5.16.png |
