Multi-level menus (dropdowns): Fix chevron elements

Chevron (Arrow)

- Use existing icon and re-use it instead of a text character
  - sing text depending on font size and the width we were giving
  - could be dangerous
- Fix alignment: before this commit the chevron was almost glued to
the edge
- Make the hover state less dark so the chevron is visible at all times

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I3b79c6b9df324727fd0c217f869d9bb8a4df2d72

browser/css/jsdialogs.css

@@ -807,8 +807,7 @@ input[type='number']:hover::-webkit-outer-spin-button {
 }
 
 .ui-combobox-entry span:hover {
-	border: 1px solid var(--color-border-darker);
-	background-color: var(--color-background-darker);
+	background-color: var(--color-background-dark);
 }
 
 .ui-combobox-entry.selected span:not(:hover) {
@@ -845,16 +844,27 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	filter: invert(1);
 }
 
+/* Combobox entry with menu and thus arrow/chevron */
 .ui-combobox-entry.ui-has-menu {
 	display: grid;
 	grid-template-columns: 1fr 25px;
 	align-items: center;
 }
-
+/* Arrow/chevron */
 .ui-combobox-entry.ui-has-menu::after {
-	content: '>';
+	content: '';
 	display: inline-block;
-	width: 25px;
+	width: 9px;
+	background: url('images/lc_menu_chevron.svg') no-repeat;
+	height: 9px;
+	margin-inline-start: -9px;
+}
+
+.ui-combobox-entry.ui-has-menu > span {
+	/* menu entries have 5px all around padding,
+	 add extra 9px at the horizontal end = 14px
+	 so we can re-position the arrow/chevron  */
+	padding-inline-end: 14px;
 }
 
 /* Apply style always show real colors */
@@ -1869,4 +1879,3 @@ kbd,
 #modal-dialog-online-help-content-box {
 	min-width: 75%;
 }
-