From 05b48c97f52172cf4f7d9408caec909508385717 Mon Sep 17 00:00:00 2001
From: bmFtZQ <aaaa2048@outlook.com>
Date: Mon, 11 Apr 2022 01:23:06 +0800
Subject: [PATCH] basic styling of password autofill panel

---
 chrome/global/popup.css | 67 +++++++++++++++++++++++++++++++++--------
 chrome/icons/icons.css  | 14 ++++++---
 2 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/chrome/global/popup.css b/chrome/global/popup.css
index 2efb59b..26d2a2c 100644
--- a/chrome/global/popup.css
+++ b/chrome/global/popup.css
@@ -12,6 +12,9 @@
   --panel-separator-margin-horizontal: 0 !important;
   --uc-panel-zoom-button-padding: 8px;
   --uc-panel-zoom-button-inline-padding: 13px;
+  --uc-autocomplete-panel-menuitem-margin: 4px;
+  --uc-autocomplete-panel-menuicon-padding-inline: 12px;
+  --uc-autocomplete-panel-separator-margin-vertical: 4px;
 }
 
 /* app menu */
@@ -194,17 +197,55 @@
 }
 
 /* context menus */
-menupopup {
-  --panel-color: var(--arrowpanel-color) !important;
-  --panel-border-radius: 4px !important;
-  --panel-padding: 4px 0px !important;
-  --panel-border-color: var(--arrowpanel-border-color) !important;
-  --panel-background: var(--arrowpanel-background) !important;
-  --nested-margin: -6px !important;
-  --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important;
-  --menu-background-color: var(--arrowpanel-background) !important;
-  --menu-color: var(--arrowpanel-color) !important;
-  --menuitem-disabled-hover-background-color: #0000 !important;
-  --menu-disabled-color: var(--panel-disabled-color) !important;
-  --menu-border-color: var(--panel-separator-color) !important;
+@media (-moz-os-version: windows-win10) {
+  menupopup {
+    --panel-color: var(--arrowpanel-color) !important;
+    --panel-border-radius: 4px !important;
+    --panel-padding: 4px 0px !important;
+    --panel-border-color: var(--arrowpanel-border-color) !important;
+    --panel-background: var(--arrowpanel-background) !important;
+    --nested-margin: -6px !important;
+    --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important;
+    --menu-background-color: var(--arrowpanel-background) !important;
+    --menu-color: var(--arrowpanel-color) !important;
+    --menuitem-disabled-hover-background-color: #0000 !important;
+    --menu-disabled-color: var(--panel-disabled-color) !important;
+    --menu-border-color: var(--panel-separator-color) !important;
+  }
+}
+
+/* auto complete popup */
+menupopup,
+panel[type="autocomplete-richlistbox"] {
+  /* -moz-window-shadow: none !important; */
+  appearance: none !important;
+}
+
+#PopupAutoComplete>.autocomplete-richlistbox {
+  background: var(--arrowpanel-background) !important;
+  color: var(--arrowpanel-color) !important;
+  box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important;
+}
+
+.autocomplete-richlistitem[originaltype="loginsFooter"] {
+  -moz-box-pack: start !important;
+  color: inherit !important;
+  border-color: var(--panel-separator-color) !important;
+  background-color: transparent !important;
+  height: 40px !important;
+  padding-inline-start: var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+}
+
+.autocomplete-richlistitem:hover {
+  background-color: var(--panel-item-hover-bgcolor) !important;
+}
+
+.autocomplete-richlistitem[selected] {
+  background-color: var(--panel-item-active-bgcolor) !important;
+  color: inherit !important;
+}
+
+.ac-site-icon {
+  fill: currentColor !important;
+  margin: auto var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
 }
diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 7214c8a..d5b0a1b 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -2,7 +2,7 @@
 
 /* windows 11 style window controls (no known way to detect between windows 10
 and 11 so applied to both) */
-@media (-moz-os-version: windows-win10) {
+@media (-moz-windows-compositor) {
   .titlebar-min {
     list-style-image: url("win11-minimize.svg") !important;
   }
@@ -49,6 +49,10 @@ and 11 so applied to both) */
     list-style-image: url("reload.svg") !important;
   }
 
+  #context-stop {
+    list-style-image: url("close.svg") !important;
+  }
+
   #context-bookmarkpage {
     list-style-image: url("bookmark-hollow.svg") !important;
   }
@@ -71,8 +75,7 @@ and 11 so applied to both) */
 }
 
 #stop-button,
-.close-icon,
-#context-stop {
+.close-icon {
   list-style-image: url("close.svg") !important;
 }
 
@@ -95,7 +98,10 @@ and 11 so applied to both) */
   list-style-image: url("downloads.svg") !important;
 }
 
-#appMenu-passwords-button {
+#appMenu-passwords-button,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
   list-style-image: url("passwords.svg") !important;
 }