Fix CSS issues

keepassxc-browser/content/ui.js

@@ -7,6 +7,9 @@ const MIN_INPUT_FIELD_OFFSET_WIDTH = 60;
 const MIN_OPACITY = 0.7;
 const MAX_OPACITY = 1;
 
+let notificationWrapper;
+let notificationTimeout;
+
 const DatabaseState = {
     DISCONNECTED: 0,
     LOCKED: 1,
@@ -207,7 +210,7 @@ kpxcUI.createNotification = function(type, message) {
         return;
     }
 
-    const banner = kpxcUI.createElement('div', 'kpxc-notification kpxc-notification-' + type, {});
+    const notification = kpxcUI.createElement('div', 'kpxc-notification kpxc-notification-' + type, {});
     type = type.charAt(0).toUpperCase() + type.slice(1) + '!';
 
     const className = (isFirefox() ? 'kpxc-banner-icon-moz' : 'kpxc-banner-icon');
@@ -215,17 +218,31 @@ kpxcUI.createNotification = function(type, message) {
     const label = kpxcUI.createElement('span', 'kpxc-label', {}, type);
     const msg = kpxcUI.createElement('span', '', {}, message);
 
-    banner.addEventListener('click', function() {
-        document.body.removeChild(banner);
+    notification.addEventListener('click', function() {
+        if (notificationWrapper && window.parent.document.body.contains(notificationWrapper)) {
+            window.parent.document.body.removeChild(notificationWrapper);
+            notificationWrapper = undefined;
+        }
     });
 
-    banner.appendMultiple(icon, label, msg);
-    document.body.appendChild(banner);
+    notification.appendMultiple(icon, label, msg);
+
+    const styleSheet = createStylesheet('css/notification.css');
+    notificationWrapper = notificationWrapper || document.createElement('div');
+    this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });
+    this.shadowRoot.append(styleSheet);
+    this.shadowRoot.append(notification);
+    document.body.append(notificationWrapper);
+
+    if (notificationTimeout) {
+        clearTimeout(notificationTimeout);
+    }
 
     // Destroy the banner after five seconds
-    setTimeout(() => {
-        if ($('.kpxc-notification')) {
-            document.body.removeChild(banner);
+    notificationTimeout = setTimeout(() => {
+        if (notificationWrapper && window.parent.document.body.contains(notificationWrapper)) {
+            window.parent.document.body.removeChild(notificationWrapper);
+            notificationWrapper = undefined;
         }
     }, 5000);
 };

keepassxc-browser/css/colors.css

@@ -1,4 +1,4 @@
-:root {
+:root, :host {
     --kpxc-background-color: #fff;
     --kpxc-card-background-color: #fff;
     --kpxc-card-border-color: rgba(0,0,0,.125);
@@ -19,7 +19,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
+    :root, :host {
         --kpxc-background-color: #3b3b3d;
         --kpxc-card-background-color: #2b2a2a;
         --kpxc-card-border-color: #292a2a;