amdelamar / pm-theme Goto Github PK

Screenshots are outdated. Please take new screenshots and update soon!

Maybe add some shadow around the borders as well. Like on Mac.

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image)
• Browser name and version: Firefox 60
• OS/Device version:

Describe the Problem

Using @import doesn't work anymore. The default default-src 'self'; security policy of the page is blocking the loading of remote content (CSS).

Hi their,
when I click onto a label in the sidebar their text color changes to white. So I can't read that anymore. I hope you could maybe fix this in your css code :)

Have a nice start into the new year!
Timo

Your Environment

• Theme used: "Dark Theme"
• Browser name and version: Google Chrome Version 64.0.3282.85 (Official Build) beta (64-bit)

What is the Problem?

Email entries in the "horizontal layout" (toggle view) are obfuscated and barely visible, as of the 15/16th January. Vertical layout seem's fine, or "better". The dark colouring has also changed substantially.

This is on both Windows 7 and Xubuntu 16.04.3 desktop machines. It's the same for me in Chrome, Firefox, and Brave web browsers.

I'm using @import url("https://austindelamar.com/pm-theme/themes/pm-dark-theme.min.css"); in the settings custom theme box.

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image)
• Browser name and version: n/a
• OS/Device version: n/a

Describe the Problem

This makes the BG colour correct but I think it needs to match the style of the other dropdowns where
only the text highlight

.pm_dropdown {
	background: var(--theme3)!important;
}

Your Environment

• Theme used: Dark

Describe the Problem

Currency EUR/USD selector has wrong background color and hover color

Your Environment

• Theme used: Dark
• Browser name and version: Firefox 64.0 64-bit
• OS/Device version: Windows 10

Describe the Problem

the mail contents window and the compose window still have white background. Is this because of a limitation? The Dark Reader addon is able to darken those backgrounds but I don't know whether it's because that has more access as an extension.

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image)

Describe the Problem

Each Key row is slightly off. The bg color, arrow twisty, action dropdown, action link (maybe it should be a button?) and more. BG-image theme has transparent issue with the arrows, and GM theme has some shading issues. Dark/Flat have issues with the action dropdown mainly, and the left twisty.

Could use a media query to get users preferred color scheme, light/dark:

@media (prefers-color-scheme: dark) {
  /* set colors */
}

Read more here

Since I'm publishing to NPM for unpkg CDN links already. (#31)
I can use jsDelivr CDN as well.

Links already work like so:

@import url("https://cdn.jsdelivr.net/npm/pm-theme/themes/pm-dark-theme.min.css");

Just need to update the README. And maybe clarify the x3 different options somehow. Especially for new users.

Your Environment

• Theme used: Default (Proton)
• Browser name and version: Firefox 59 x64
• OS/Device version: Linux / Ubuntu 16 x64

What is the Problem?

Most of the time the conversation texts are gray and so they are hard to read. I want them black all the time to get full contrast. Could you help me with a short CSS code to make it? Thanks for your work.

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image)

Describe the Problem

Looking at an email in a folder, the folder indicator at the top has the wrong bg color.

Ever since I added my custom domain to my github page profile, ProtonMail fails to load the custom theme via the CSS @import url.

Error:
Blocked loading mixed active content “http://austindelamar.com/pm-theme/themes/pm-flat-theme.css”[Learn More]

Solution:
Encrypt the custom domain with HTTPS / SSL. And then update the README links to point to the new URL.

ProtonMail logo:

• webkit filter not working on Flat theme.

Search form:

• location background color
• address background color

Settings Dashboard:

• bottom halves of overview and subscription
• plans section

Updates for contacts and composing.

• Contacts -> left side -> Contact Groups
• Compose -> right toolbar -> dropdown -> Request Read Receipt
• Compose -> To -> "@gail.com" red border

https://protonmail.com/blog/protonmail-v3-15-release-notes/

Your Environment

• Theme used: Tested with dark and gm
• Browser name and version: Firefox 57
• OS/Device version: Win10

What is the Problem?

Color selector in composer shows the --theme1 color and not the colors of the fields.

Hi,
When entering something into the label search box the background colour changes to white. This looks really crazy. Here is a screenshot of the behaviour. And also sorry for the wrong issue title.

Your Environment

• Theme used: PM-Dark
• Browser name and version: Firefox 57.0.4
• OS/Device version: Windows 10

What is the Problem?

The link editor in the composer for both emails and signatures is hard to read. When writing something in the textboxes it's white on white and can't be read.

New PM version with new features.

Shift + Tab command window text isn't readable with dark theme. Colors need to be adapted.

A "Shaken not stirred" kinda theme. Copy paste into the custom theme box:

/* First load the theme. */
@import url("https://austindelamar.com/pm-theme/themes/pm-flat-theme.css");

/* Now override colors. */
:root {
    --theme1: #6d5e4e;
    --theme2: #68635e;
    --theme4: #bbbebf;
    --theme5: #82807a;
    --theme6: #afa067;
}

/* Set fonts */
body,h1,h2,h3,h4,h5,h6,p,span,b,strong,em,th,td{
    font-family: "Georgia", Times, serif !important;
}
/* Button is by itself or some icons will break. */
button {
    font-family: "Georgia", Times, serif;
}

Some changes to ui classes.

• Header - background color
• Logo - shadow and color
• Checkboxes & Radio buttons color
• Compose to pencil icon - color
• Dashboard table - color and some fonts
• Donate link - color
  Need to analyze what CSS to fix.

The text and dark background need to be adjusted to make it more readable.

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image): Dark
• Browser name and version: Firefox 61.0.1
• OS/Device version: Pop!_OS

Describe the Problem

White around time/date in meta infomation in ProtonMail 3.14.

This fixes it but wasn't sure how to incorporate it into your CSS

.summary-right {
	background: var(--theme3)!important;
}

Before

After

Your Environment

• Theme used: Dark / Flat

Describe the Problem

Your Environment

• Theme used: (Dark / Flat / GM / BG-Image):
  Flat
• Browser name and version:
  Chrome 73.0.3683.103
• OS/Device version:
  Windows 10 Build 17763

Describe the Problem

Proton VPN icon color does not match

Some changes to ui classes. Background coloring being the most noticeable. Need to analyze what CSS to fix.

The search modal's close button looks wonky when :hover is active. Also, the select inputs could use some shadow to match the text inputs. Like so:

`
.pm_form select, .pm_form select:active, .pm_form select:focus {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .15);
border: 1px solid var(--theme4);
}

form.searchForm fieldset button[type="button"]:hover, .searchForm-action-button:hover {
background: transparent;
color: var(--theme4);
}
`

The color of the currently selected label in the menu bar is white for the flat theme. Makes it hard to read in front of the light background. I think the font-style should be consistent with the other menu items.

Your Environment

• Theme used: Dark / Flat / GM / BG-Image
• Browser name and version: n/a
• OS/Device version: n/a

Describe the Problem

When receiving a calendar event / invitation the theme doesn't apply to it. Things like border/background/font colors are not covered in the current CSS rules.

Lot of CSS changes in v3.12.23

• Inbox toolbar buttons
• Composer
• Conversation toolbar buttons
• Conversations list (vertical & horizontal)
• Compose Button (And "back to inbox" button on Settings)
• Search bar background
• Settings page content
• Contacts page content

A sophisticated theme. Copy paste into the custom theme box:

/* First load the theme. */
@import url("https://austindelamar.com/pm-theme/themes/pm-flat-theme.css");

/* Now override colors. */
:root {
    --theme1: #4f4f4f;
    --theme6: #777777;
}

/* Set fonts */
body,h1,h2,h3,h4,h5,h6,p,span,b,strong,em,th,td{
    font-family: "Georgia", Times, serif !important;
}
/* Button is by itself or some icons will break. */
button {
    font-family: "Georgia", Times, serif;
}

Your Environment

• Theme used: Flat theme
• Browser name and version: Firefox v57
• OS/Device version: Windows 10

What is the Problem?

Drop down list for alternate emails "From" list is hard to read. Text color should contrast with bg color.

So we can see how themes look like.

Your Environment

• Theme used: (GM)
• Browser name and version: Chrome 68.0.3440.106
• OS/Device version: macOS 10.13.6

It seems there has been an update in the PM CSS that broke some of the elements, i'm unable to figure this out unfortunately :(

Your Environment

• Theme used: Flat Theme
• Browser name and version: Firefox v57
• OS/Device version: Windows 10

What is the Problem?

Some conversation views have the wrong background color, or aren't getting the correct background color for some reason.

Theme used: Dark
Brave browser 0.59.35 Chromium 72.0.3626.81
Windows 10
ProtonMail web 3.15.16

Problem with white drop-down lists at dashboard settings. I can't read text on it. It should be dark like when I click on it. Pricing summary at the bottom should be also better.

First, this depends on NPM publish.

But then, the unpkg link would be as simple as:

https://unpkg.com/[email protected]/themes/pm-dark-theme.min.css

The background color of these buttons are not being applied.
Move to Trash
Move to Archive
Move to Spam
Change Layout (both)

Hi their,
it would be really awesome if you could update the theme wo work with Protonmail 3.7 the new settings sidebar menu does requier some makeup (the back button) and the searchbar too.

Thank you,
Timo

First, thanks for the amazing job with the the dark them.

I just want to flag that the block div.autocompleteEmails-field.autocomplete-container > .awesomplete > ul seems to lack the right background colour.

To reproduce:

1. Create a new email
2. Click in the "To:" field
3. Start typing some text to trigger the suggestions

Thanks!

Your Environment

• Theme used: GM
• Browser name and version: Chrome 69/win64
• OS/Device version: Windows 10/64

Describe the Problem

I've found a few additional bugs and perhaps improvements of the GM theme:

1. Left and top bar: The gray used could/should perhaps be a little darker each. The left one and the red font on the bottom don't match that well - the contrast is a bit too low so it's hard to read. So I changed theme2 to #3f3f40 and theme5 to #696a6c. That's a personal thing obviously but as I worked in webdesign, those minor things (like color matching/blocking) nag a bit on me ;) Just thinking those two changes would appear in a bit more harmonious default

2. Settings / Dashboard: The red "Info" text next to the (i) Button for more information on the professional option have borders around. Those aren't nice to look at nor are they in the default theme.

3. Settings / Folders/Labels: (and any page with toggles) The toggles have a fine border and background around them. Shouldn't be there. Edit & Delete Buttons have no spacing between them and look crowded.

4. Settings / Filters: Same as 3, toggles with borders, three buttons on the right with no spacing. Also the Whitelist Buttons for move and delete look too big and crowded with the box border.

5. Settings / Autorespond: Biggest issue with the toggle background and border as it get's stretched the whole 50% grid and interferes with the "Answer" text on the right if enabled.

6. Settings / Security: The toggles again ;)

7. Settings / Design: Toggles! And didn't notice it before but the Dropdowns all look like white text boxes, the down arrow seems missing. And for german text the last box (left to right) is too narrow. Did a quick test and it seems the "z-index: 3" is the problem with the missing arrow.

8. Settings / Payment: The download buttons again shows it's a tad too big and touches the bottom divider line so it just looks "crowded". Either adding margin:2px to .pm_button or reducing it's height and line-height from 34 to ~30 would do fine.

But even if that list starts sounding like nitpicking, I just want to say a big thank you, as the all-around quality of the theme/changes is amazing and makes using protonmail much more fun (for me at least) and eye-candy ;)

Greets,
Jens

The header/masthead, search dialog, message info section, and possibly more, have changed in v3.7.1...

This will make it simpler to copy the CSS source without getting that intermediate step of clicking "raw" on a github source page.

What is the Problem?

Search Modal background color is uneven.

Do you know what would fix it?

// flat-theme, gm-theme
.searchForm-advanced-container, .searchForm-advanced-main, .searchForm-advanced-wrapper {
  background-color: var(--theme3);
}
// dark-theme
.searchForm-advanced-container, .searchForm-advanced-main, .searchForm-advanced-wrapper {
  background-color: var(--theme7);
}

Any other relevant information

I'm using the bg-image-theme.css and I'm wondering which line of code controls the colour of protonmail's icons and text as pointed by the blue arrow in the image below. My background is quite light so the white text is hard to read properly.

Environment

• Theme used: BG-Image
• Browser name and version: any
• OS/Device version: any

Describtion

I'd make a feature suggestion to include a dark-style version of the Background Image Theme just like e.g. the current GMail style with a little bigger search bar fonts, font-spacings etc.

Your Environment

• Theme used: Flat
• Browser name and version: Firefox v57
• OS/Device version: Windows 10

What is the Problem?

In the search modal, some of the input fields like "Location" have a different background color than others.