message view: add part switcher

This also makes the appearance of HTML emails more consistent with
plaintext ones.

1 files changed, 31 insertions, 1 deletions

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 4ef8661..9b885ad 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -152,11 +152,41 @@ main table td a { text-decoration: none; }
 
 main table td a:hover { text-decoration: underline; }
 
-main.message pre { flex: 1 auto; padding: 1rem; white-space: pre-wrap; word-break: break-all; background-color: white; border: 1px solid #eee; max-width: 100% }
 main.message table { background-color: white; }
 main.message th { width: 5%;}
 main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
 
+main.message pre,
+main.message iframe {
+  flex: 1 auto;
+  padding: 1rem;
+  margin: 1rem 0;
+  background-color: white;
+  border: 1px solid #eee;
+  max-width: 100%;
+}
+
+main.message pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+main.message .message-header {
+  display: flex;
+  flex-direction: row;
+}
+
+main.message .message-header .parts {
+  margin-left: 0.3rem;
+  padding: 0.3rem 1rem;
+  background: white;
+  border-top: 1px solid #f2f2f2;
+}
+
+main.message .message-header .parts ul {
+  margin-left: 1rem;
+}
+
 main.compose .actions {
   display: flex;
   flex-direction: row;