mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-03-20 15:41:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update popup styling to be more explicit (#541)

Browse Source
This commit is contained in:
Leendert de Borst
2025-02-14 15:45:00 +01:00
parent 11a33d5ea7
commit 53246a3d99
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
browser-extensions/chrome/src/contentScript/Popup.ts
View File

@@ -40,13 +40,14 @@ export function createBasePopup(input: HTMLInputElement) : HTMLElement {
border-radius: 4px;
box-shadow: 0 2px 10px ${isDarkMode() ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.4)'};
width: ${popupWidth}px;
letter-spacing: 0 !important;
color: ${isDarkMode() ? '#f8f9fa' : '#000000'};
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
`;
// Position popup below input
const rect = input.getBoundingClientRect();
popup.style.top = `${rect.bottom + window.scrollY + 6}px`;
popup.style.top = `${rect.bottom + window.scrollY + 4}px`;
popup.style.left = `${rect.left + window.scrollX + 2}px`;
return popup;
@@ -145,6 +146,7 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: ${isDarkMode() ? '#4b5563 #1f2937' : '#d1d5db #ffffff'};
line-height: 1.3;
`;
popup.appendChild(credentialList);
@@ -189,6 +191,7 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
background: ${isDarkMode() ? '#374151' : '#f3f4f6'};
color: ${isDarkMode() ? '#e5e7eb' : '#374151'};
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
cursor: pointer;
border: none;
display: flex;
@@ -196,6 +199,7 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
justify-content: center;
gap: 4px;
transition: background-color 0.2s ease;
line-height: 1;
`;
createButton.innerHTML = `
@@ -294,8 +298,10 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
background: ${isDarkMode() ? '#374151' : '#f3f4f6'};
color: ${isDarkMode() ? '#e5e7eb' : '#374151'};
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
border: 1px solid ${isDarkMode() ? '#4b5563' : '#e5e7eb'};
outline: none;
line-height: 1;
`;
// Add focus styles
@@ -357,7 +363,7 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
}
// Update popup content with filtered results
updatePopupContent(filteredCredentials, credentialList);
updatePopupContent(filteredCredentials, credentialList, input);
}
});
});
@@ -370,6 +376,7 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
background: ${isDarkMode() ? '#374151' : '#f3f4f6'};
color: ${isDarkMode() ? '#e5e7eb' : '#374151'};
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
cursor: pointer;
border: none;
display: flex;
@@ -601,6 +608,7 @@ function createCredentialList(credentials: Credential[], input: HTMLInputElement
font-size: 14px;
text-overflow: ellipsis;
color: ${isDarkMode() ? '#f3f4f6' : '#111827'};
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
`;
serviceName.textContent = cred.ServiceName;
@@ -613,6 +621,7 @@ function createCredentialList(credentials: Credential[], input: HTMLInputElement
font-size: 12px;
text-overflow: ellipsis;
color: ${isDarkMode() ? '#9ca3af' : '#6b7280'};
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
`;
// Combine full name (if available) and username