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.
This commit is contained in:
Roman 2025-07-17 17:37:20 +02:00 committed by GitHub
parent cebbb68fdd
commit baddb42664
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 3 deletions

View File

@ -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 */

View File

@ -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>';
}