From be66ab2ac8a3f4dd1507a353d5f5ef52a2875dab Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Mon, 22 Mar 2021 13:46:03 +0100
Subject: [PATCH] Improved mobile and admin CSS

---
 dev/Styles/Layout.less                        | 86 +++++++++++++++++++
 dev/Styles/Ui.less                            | 46 ----------
 dev/Styles/_BootstrapFix.less                 | 37 --------
 .../templates/Views/User/MailMessageList.html |  4 +-
 4 files changed, 88 insertions(+), 85 deletions(-)

diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less
index de9302a3a..3d59c2d71 100644
--- a/dev/Styles/Layout.less
+++ b/dev/Styles/Layout.less
@@ -96,6 +96,51 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
 	width: 5px;
 }
 
+.g-ui-menu {
+	max-height: 60vh;
+	max-width: 90vw;
+	overflow: auto;
+
+	.e-link {
+		text-decoration: none;
+		cursor: pointer;
+		color: var(--dropdown-menu-color, #333);
+		background-color: var(--dropdown-menu-bg-color, #fff);
+	}
+
+	.e-item.selected > .e-link {
+		background-color: var(--dropdown-menu-selected-bg-color, #eee);
+	}
+
+	.e-item:not(.disabled) > .e-link:focus,
+	.e-item:not(.disabled) > .e-link:hover {
+		background-color: var(--dropdown-menu-hover-bg-color, #444);
+		background-image: none;
+		color: var(--dropdown-menu-hover-color, #eee);
+	}
+
+	.e-item.disabled > .e-link {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+}
+
+.g-ui-table {
+
+	display: table;
+	width: 100%;
+
+	.e-row {
+		display: table-row;
+	}
+
+	.e-cell {
+		display: table-cell;
+		vertical-align: top;
+		text-align: left;
+	}
+}
+
 .b-message-list-wrapper.resizable {
 	resize: vertical;
 	overflow: hidden;
@@ -185,6 +230,43 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	padding:20px 20px 20px 30px;
 }
 
+.dropdown-menu * + .dividerbar {
+	margin-top: 9px;
+	padding-top: 9px;
+	border-top: 1px solid #e5e5e5;
+}
+
+.dropdown.colored-toggle.open .btn.dropdown-toggle {
+	color: #BD362F;
+
+	.caret {
+		border-top-color: #BD362F;
+	}
+}
+
+.btn.btn-transparent {
+	background: none !important;
+	border-color: transparent !important;
+	text-shadow: none !important;
+	box-shadow: none !important;
+	opacity: .6;
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.btn-group.open .btn.btn-transparent.dropdown-toggle {
+	color: #BD362F;
+	.caret {
+		border-top-color: #BD362F;
+	}
+}
+
+.btn-group > .btn.single {
+	border-radius: @btnBorderRadius !important;
+}
+
 /* desktop */
 @media screen and (min-width: 1000px) {
 }
@@ -221,6 +303,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	.b-settings-content {
 		padding: 10px 10px 10px 20px;
 	}
+
+	.dropdown-menu a {
+		line-height: 2.5;
+	}
 }
 
 html:not(.rl-ctrl-key-pressed) .visible-on-ctrl-btn,
diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less
index f2b1ccfcb..86e39f5ca 100644
--- a/dev/Styles/Ui.less
+++ b/dev/Styles/Ui.less
@@ -16,52 +16,6 @@
 	}
 }
 
-.g-ui-menu {
-	max-height: 400px;
-	max-width: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-
-	.e-link {
-		text-decoration: none;
-		cursor: pointer;
-		color: var(--dropdown-menu-color, #333);
-		background-color: var(--dropdown-menu-bg-color, #fff);
-	}
-
-	.e-item.selected > .e-link {
-		background-color: var(--dropdown-menu-selected-bg-color, #eee);
-	}
-
-	.e-item:not(.disabled) > .e-link:focus,
-	.e-item:not(.disabled) > .e-link:hover {
-		background-color: var(--dropdown-menu-hover-bg-color, #444);
-		background-image: none;
-		color: var(--dropdown-menu-hover-color, #eee);
-	}
-
-	.e-item.disabled > .e-link {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-}
-
-.g-ui-table {
-
-	display: table;
-	width: 100%;
-
-	.e-row {
-		display: table-row;
-	}
-
-	.e-cell {
-		display: table-cell;
-		vertical-align: top;
-		text-align: left;
-	}
-}
-
 .e-paginator {
 
 	.e-page {
diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less
index 57ba8dae2..460157a94 100644
--- a/dev/Styles/_BootstrapFix.less
+++ b/dev/Styles/_BootstrapFix.less
@@ -38,43 +38,6 @@ label.inline, span.inline {
 	padding: 4px 7px;
 }
 
-.btn.btn-transparent {
-	background: none !important;
-	border-color: transparent !important;
-	text-shadow: none !important;
-	box-shadow: none !important;
-	opacity: .6;
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.btn-group.open .btn.btn-transparent.dropdown-toggle {
-	color: #BD362F;
-	.caret {
-		border-top-color: #BD362F;
-	}
-}
-
-.dropdown-menu * + .dividerbar {
-	margin-top: 9px;
-	padding-top: 9px;
-	border-top: 1px solid #e5e5e5;
-}
-
-.btn-group > .btn.single {
-	border-radius: @btnBorderRadius !important;
-}
-
-.dropdown.colored-toggle.open .btn.dropdown-toggle {
-	color: #BD362F;
-
-	.caret {
-		border-top-color: #BD362F;
-	}
-}
-
 .alert a {
 	text-decoration: underline;
 	color: #c09853;
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
index 625e71c7e..9c08419c0 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
@@ -64,13 +64,13 @@
 							</li>
 							<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
 								<a class="e-link menuitem" href="#" tabindex="-1">
-									<i class="icon-none"></i>
+									<i class="fontastic flagged">★</i>
 									<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
 								</a>
 							</li>
 							<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
 								<a class="e-link menuitem" href="#" tabindex="-1">
-									<i class="icon-none"></i>
+									<i class="fontastic unflagged">☆</i>
 									<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
 								</a>
 							</li>