Updated list standard, sticky header and fixed colours vars

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 16 insertions, 94 deletions

diff --git a/css/mail.scss b/css/mail.scss
index b2fffe091..a93dce273 100755
--- a/css/mail.scss
+++ b/css/mail.scss
@@ -209,16 +209,16 @@
 	height: 100%;
 	overflow-x: hidden;
 	overflow-y: auto;
-	border-right: 1px solid #ebebeb;
+	border-right: 1px solid var(--color-border);
 }
 #mail-message-list-loading {
 	position: fixed;
 	width: 22%;
 	height: 40px;
 	z-index: 1;
-	background: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
-	background: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,1),rgba(255,255,255,0) 70%);
-	background: radial-gradient(ellipse at top, rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
+	background: -moz-radial-gradient(top, ellipse cover, var(--color-main-background), rgba(255,255,255,0) 70%);
+	background: -webkit-radial-gradient(top, ellipse cover, var(--color-main-background),rgba(255,255,255,0) 70%);
+	background: radial-gradient(ellipse at top, var(--color-main-background),rgba(255,255,255,0) 70%);
 }
 #load-more-mail-messages {
 	margin: 10px auto;
@@ -232,95 +232,14 @@
 	background-position: 9px center;
 }
 
-.mail-message-header {
-	height: 68px;
-}
-
-.mail-message-summary {
-	border-top: 1px solid #eee;
-	position: relative;
-}
-.mail-message-summary:hover,
-.mail-message-summary:focus,
-.mail-message-summary.active {
-	background-color: #f8f8f8;
-}
-
-.mail-message-summary * {
-	cursor: pointer;
-}
-
-.sender-image {
-	display: inline-block;
-	position: absolute;
-	padding: 5px;
-	padding-left: 10px;
-}
-
-.sender-image img {
-	object-fit: cover;
-}
-
-.mail-message-summary-from,
-.mail-message-summary-subject,
-.mail-message-summary .date {
-	display: inline-block;
-	padding: 12px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.mail-message-summary-from {
-	width: 55%;
-	margin-left: 37px;
-	padding-bottom: 0;
-	opacity: .5;
-}
-
-.mail-message-summary-subject {
-	padding-top: 0;
-	width: 75%;
-	margin-left: 37px;
-}
-
-.mail-message-summary .date {
-	position: absolute;
-	font-size: 80%;
-	right: 0;
-	top: 0;
-	max-width: 40%;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	opacity: .5;
-}
-
-.mail-message-summary.unseen .mail-message-summary-from,
-.mail-message-summary.unseen .mail-message-summary-subject {
-	font-weight: bold;
-}
-
-#mail-messages .action.delete {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	padding: 20px;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
-	opacity: .15;
-}
-#mail-messages .action.delete:hover,
-#mail-messages .action.delete:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	opacity: .5;
-}
-
 #app-navigation .msg.success {
 	color: #fff;
-	background-color: #47a447;
+	background-color: var(--color-success);
 	padding: 3px;
 }
 #app-navigation .msg.error {
 	color: #fff;
-	background-color: #d2322d;
+	background-color: var(--color-error);
 	padding: 3px;
 }
 
@@ -559,10 +478,13 @@ input.submit-message,
 	height: 90px;
 	width: 50%;
 	z-index: 100;
-	background: -webkit-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
-	background: -o-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
-	background: -moz-linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
-	background: linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.9) 80%, rgba(255,255,255,0));
+	position: fixed; // ie fallback
+	position: sticky;
+	top: $header-height;
+	background: -webkit-linear-gradient(var(--color-main-background) , var(--color-main-background) 80%, rgba(255,255,255,0));
+	background: -o-linear-gradient(var(--color-main-background) , var(--color-main-background)  80%, rgba(255,255,255,0));
+	background: -moz-linear-gradient(var(--color-main-background) , var(--color-main-background)  80%, rgba(255,255,255,0));
+	background: linear-gradient(var(--color-main-background) , var(--color-main-background)  80%, rgba(255,255,255,0));
 }
 
 #mail-message-header h2,
@@ -644,14 +566,14 @@ input.submit-message,
 .mail-message-attachments .attachments > div {
 	position: relative;
 	display: inline-block;
-	border: 1px solid #f5f5f5;
+	border: 1px solid var(--color-border);
 	border-radius: 3px;
 	margin: 0 10px 10px 0;
 	padding: 5px;
 }
 .mail-message-attachments .attachments > div:hover,
 .mail-message-attachments .attachments > div span:hover {
-	background-color: #f8f8f8;
+	background-color: var(--color-background-dark);
 	cursor: pointer;
 }
 @media only screen and (max-width: 768px) {
@@ -925,7 +847,7 @@ input.submit-message,
 				box-sizing: border-box;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				color: $color-main-text;
+				color: var(--color-main-text);
 				opacity: .57;
 				flex: 1 1 0;
 				z-index: 100; /* above the bullet */