From baddb426641d17797be56893a900d0568e8c33ab Mon Sep 17 00:00:00 2001
From: Roman <github.rsc@familieschick.at>
Date: Thu, 17 Jul 2025 17:37:20 +0200
Subject: [PATCH] Add backgroundContainer class for modal content in night mode
 in modern ui (#7162)

Introduces the .backgroundContainer class to improve styling of modal content in night mode by setting text color. Updates relevant divs in default3.handlebars to use this class for hardware keys and login events sections. Also adjusts the width of login event entries for better display.
---
 public/styles/style-bootstrap.css | 4 ++++
 views/default3.handlebars         | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/styles/style-bootstrap.css b/public/styles/style-bootstrap.css
index e3792230..001bea11 100644
--- a/public/styles/style-bootstrap.css
+++ b/public/styles/style-bootstrap.css
@@ -3315,6 +3315,10 @@ nav .lbbuttonsel2 {
     background-color: black !important;
 }
 
+.night .modal-content .backgroundContainer {
+    color: #000;
+}
+
 .table td,
 .table th {
     padding: 0.05rem !important; /* Decrease padding to reduce row height */
diff --git a/views/default3.handlebars b/views/default3.handlebars
index 9f6826ff..7ce6e457 100644
--- a/views/default3.handlebars
+++ b/views/default3.handlebars
@@ -3568,7 +3568,7 @@
                     var start = '<div style="border-radius:6px;border:2px solid #CCC;background-color:#BBB;width:100%;box-sizing:border-box;margin-bottom:6px"><div style="margin:3px;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold"><table style=width:100%;text-align:left>';
                     var end = '</table></div></div>';
                     var x = '<a href="https://www.yubico.com/" rel="noreferrer noopener" target="_blank">' + "Hardware keys" + '</a> ' + "are used as secondary login authentication.";
-                    x += '<div style="max-height:150px;overflow-y:auto;overflow-x:hidden;margin-top:6px;margin-bottom:6px">';
+                    x += '<div class="backgroundContainer" style="max-height:150px;overflow-y:auto;overflow-x:hidden;margin-top:6px;margin-bottom:6px">';
                     if (message.keys && message.keys.length > 0) {
                         for (var i in message.keys) {
                             var key = message.keys[i], type = (key.type == 2) ? 'OTP' : 'WebAuthn';
@@ -4468,14 +4468,14 @@
                     if (message.events.length == 0) {
                         x += 'No previous login.';
                     } else {
-                        x += '<div style=max-height:260px;overflow-y:scroll;overflow-x:hidden><table>';
+                        x += '<div class="backgroundContainer" style=max-height:260px;overflow-y:scroll;overflow-x:hidden><table>';
                         for (var i in message.events) {
                             var m = message.events[i].m;
                             if (m == 107) { m = "Valid login"; c = 'BBD1BB'; xx = ''; if (message.events[i].tn != null) { m = format("Token: {0}", message.events[i].tn); c = '88D188' } }
                             else if (m == 108) { m = "Invalid 2FA"; c = 'DD9DC3'; xx = 'x'; }
                             else if (m == 109) { m = "Locked account"; c = 'E1BBBB'; xx = 'x'; }
                             else if (m == 110) { m = "Invalid password"; c = 'E1BBBB'; xx = 'x'; }
-                            x += '<tr><td><img src=images/user-32' + xx + '.png height=32 width=32 style=float:left srcset="images/user-64' + xx + '.png 2x"><td><div style=width:300px;background-color:#' + c + ';border-radius:6px;margin-bottom:4px;padding:4px><div>' + printDateTime(new Date(message.events[i].t)) + ', <b>' + EscapeHtml(m) + '</b></div><div style=font-size:x-small>' + EscapeHtml(message.events[i].a.join(', ')) + '</div></div></tr>';
+                            x += '<tr><td><img src=images/user-32' + xx + '.png height=32 width=32 style=float:left srcset="images/user-64' + xx + '.png 2x"><td><div style=width:350px;background-color:#' + c + ';border-radius:6px;margin-bottom:4px;padding:4px><div>' + printDateTime(new Date(message.events[i].t)) + ', <b>' + EscapeHtml(m) + '</b></div><div style=font-size:x-small>' + EscapeHtml(message.events[i].a.join(', ')) + '</div></div></tr>';
                         }
                         x += '</table></div>';
                     }