1 files changed, 108 insertions, 21 deletions

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 16db44c..4ef8661 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -140,8 +140,6 @@ main.compose form label { margin-top: 5px; }
 main.compose form label span { display: inline-block; font-weight: bold; min-width: 100px; }
 main.compose form input { width: 80%; }
 main.compose form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
-main.compose button[type="submit"] { padding: 0.4rem 1rem 0.35rem; font-weight: bold; }
-main.compose .actions { text-align: right; }
 main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
 main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
   overflow: hidden;
@@ -159,29 +157,49 @@ main.message table { background-color: white; }
 main.message th { width: 5%;}
 main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
 
-.message-list-subject a { color: #77c; }
+main.compose .actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 
+main.compose .actions button,
+main.compose .actions .button-link {
+  padding: 0.4rem 1rem 0.35rem;
+  font-weight: bold;
+}
 
-.message-list-unread .message-list-sender,
-.message-list-unread .message-list-subject,
-.message-list-unread .message-list-date { font-weight: bold; }
+main.compose .actions > *:not(:last-child) {
+  margin-right: 1rem;
+}
 
-.message-list-unread .message-list-sender,
-.message-list-unread .message-list-date { color: black;}
+.message-list-subject a { color: #77c; }
+
+.message-list-unread.message-list-sender,
+.message-list-unread.message-list-subject,
+.message-list-unread.message-list-date { font-weight: bold; }
+
+.message-list-unread.message-list-sender,
+.message-list-unread.message-list-date { color: black;}
 
 .message-list-date {
   text-align: right;
-  padding-right: 0.5rem;
 }
 
-.message-list-unread .message-list-subject a { color: #00c; }
+.message-list-unread.message-list-subject a { color: #00c; }
 
 .message-list-unread {
   background-color: white;
+  opacity: 1;
+}
+
+.message-list-unread:nth-child(4n+1) {
   border-left: 1px solid #f2f2f2;
+}
+
+.message-list-unread:nth-child(4n+4) {
   border-right: 1px solid #f2f2f2;
 }
-.message-list-unread td { opacity: 1; }
 
 aside .compose-mail {
   color: #008d47;
@@ -204,23 +222,89 @@ main table tfoot {
   background-color: white;
 }
 
-th form { display: inline; }
-th input[type="text"] {
+.message-list {
+  display: flex;
+}
+
+.message-list section {
+  width: 100%;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+  padding: 0.3rem;
+}
+
+.message-list .actions:first-child {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.message-list .actions:last-child {
+  border-top: 1px solid #e0e0e0;
+}
+
+.actions input[type="text"] {
   flex: 1;
   margin: 0;
 }
-th input[type="text"] + button {
+
+.actions input[type="text"] + button {
   margin-left: -4rem;
   width: 4rem;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+.message-list .actions-wrap {
+  flex-grow: 1;
+}
+
 .actions-wrap { display: flex; flex-direction: row; }
-.actions-message { margin-right: 1rem; }
 .actions-pagination { margin-left: 1rem; display: flex; flex-direction: row; }
-.actions-search { flex: 1 auto; display: flex; flex-direction: row; }
+.actions-search { display: flex; flex-direction: row; flex-grow: 1; }
+
+.actions-wrap .action-group {
+  margin-left: 0.3rem;
+}
+
+.action-group.grow {
+  flex-grow: 1;
+}
+
+.actions-message {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.message-list-checkbox {
+  display: none;
+  align-self: center;
+}
 
+.message-list .messages {
+  flex-grow: 1;
+}
+
+.message-grid {
+  display: grid;
+  grid-template-columns: auto 1fr 10fr auto;
+  grid-template-rows: auto;
+}
+
+.message-list .messages .message-grid > * {
+  white-space: nowrap;
+  padding: 0.3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.followups a:not(:first-child) {
+  margin-left: 0.3rem;
+}
 
 input[type="submit"],
 .button,
@@ -238,6 +322,7 @@ button,
   border: 1px solid #ddd;
   border-radius: 3px;
   vertical-align: middle;
+  color: #000;
 }
 .button-link {
   border: 1px solid transparent;
@@ -249,21 +334,23 @@ button,
 
 input[type="submit"],
 .button,
-button {
+button,
+.button-link {
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   color: black;
 }
 
 .button:hover,
-button:hover {
+button:hover,
+.button-link:hover {
   background-color: white;
+  text-decoration: none;
 }
 
 .button:active,
-button:active {
+button:active,
+.button-link:active {
   color: #ccc;
   background-color: #f8f8f8;
 }
-
-.message-list-checkbox { display: none; }