prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix Autocomplete Menu border color on dark theme (#1770)

Browse source 
Fix Autocomplete Menu border color on dark theme
This commit is contained in:
Sami Vänttinen 2022-11-07 06:52:23 +02:00 committed by GitHub
parent d9b743f58a
commit 2ea0fe2b97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
keepassxc-browser/content/autocomplete.js
View file

@ -93,7 +93,7 @@ class Autocomplete {
this.shadowRoot.append(styleSheet);
this.list = kpxcUI.createElement('div', 'kpxcAutocomplete-items', { 'id': 'kpxcAutocomplete-list' });
initColorTheme(this.list);
initColorTheme(this.container);
this.container.append(this.list);
this.shadowRoot.append(this.container);

12
keepassxc-browser/css/autocomplete.css
View file

@ -1,9 +1,8 @@
#kpxcAutocomplete-container {
.kpxcAutocomplete-container {
display: none;
z-index: 2147483646;
position: absolute !important;
background-color: #ddd;
border: 1px solid rgba(0,0,0,.125);
border: var(--kpxc-autocomplete-menu-border);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden; /* this fixes an issue with the border radius not showing up clearly */
@ -37,8 +36,9 @@
color: #ffffff !important;
}
#kpxcAutocomplete-container footer {
.kpxcAutocomplete-container footer {
padding: 5px;
background-color: #ddd;
border-top: 1px solid rgba(0,0,0,.125) !important;
width: auto;
color: #000;
@ -47,6 +47,10 @@
}
@media (prefers-color-scheme: dark) {
.kpxcAutocomplete-container {
border: var(--kpxc-autocomplete-menu-border);
}
.kpxcAutocomplete-items {
background: var(--kpxc-background-color);
color: var(--kpxc-text-color);

4
keepassxc-browser/css/colors.css
View file

@ -1,4 +1,5 @@
:root, :host {
--kpxc-autocomplete-menu-border: 1px solid #ddd;
--kpxc-background-color: #fff;
--kpxc-card-background-color: #fff;
--kpxc-card-border-color: rgba(0,0,0,.125);
@ -22,6 +23,7 @@
@media (prefers-color-scheme: dark) {
:root, :host {
--kpxc-autocomplete-menu-border: 1px solid #3b3b3d;
--kpxc-background-color: #3b3b3d;
--kpxc-card-background-color: #2b2a2a;
--kpxc-card-border-color: #292a2a;
@ -45,6 +47,7 @@
/* Same colors for manual switching */
[data-color-theme='dark'] {
--kpxc-autocomplete-menu-border: 1px solid #3b3b3d;
--kpxc-background-color: #3b3b3d;
--kpxc-card-background-color: #2b2a2a;
--kpxc-card-border-color: #292a2a;
@ -66,6 +69,7 @@
}
[data-color-theme='light'] {
--kpxc-autocomplete-menu-border: 1px solid #ddd;
--kpxc-background-color: #fff;
--kpxc-card-background-color: #fff;
--kpxc-card-border-color: rgba(0,0,0,.125);