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.
Roman committed
Jul 17, 2025 at 17:37 UTC
baddb426641d17797be56893a900d0568e8c33ab
2 files changed
+7
-3
public/styles/style-bootstrap.css
+4
@@ -3315,6 +3315,10 @@ nav .lbbuttonsel2 {
3315
background-color: black !important;
3316
}
3317
3318
+.night .modal-content .backgroundContainer {
3319
+ color: #000;
3320
+}
3321
+
3322
.table td,
3323
.table th {
3324
padding: 0.05rem !important; /* Decrease padding to reduce row height */
views/default3.handlebars
+3
-3
@@ -3568,7 +3568,7 @@
3568
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>';
3569
var end = '</table></div></div>';
3570
var x = '<a href="https://www.yubico.com/" rel="noreferrer noopener" target="_blank">' + "Hardware keys" + '</a> ' + "are used as secondary login authentication.";
3571
- x += '<div style="max-height:150px;overflow-y:auto;overflow-x:hidden;margin-top:6px;margin-bottom:6px">';
3571
+ x += '<div class="backgroundContainer" style="max-height:150px;overflow-y:auto;overflow-x:hidden;margin-top:6px;margin-bottom:6px">';
3572
if (message.keys && message.keys.length > 0) {
3573
for (var i in message.keys) {
3574
var key = message.keys[i], type = (key.type == 2) ? 'OTP' : 'WebAuthn';
@@ -4468,14 +4468,14 @@
4468
if (message.events.length == 0) {
4469
x += 'No previous login.';
4470
} else {
4471
- x += '<div style=max-height:260px;overflow-y:scroll;overflow-x:hidden><table>';
4471
+ x += '<div class="backgroundContainer" style=max-height:260px;overflow-y:scroll;overflow-x:hidden><table>';
4472
for (var i in message.events) {
4473
var m = message.events[i].m;
4474
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' } }
4475
else if (m == 108) { m = "Invalid 2FA"; c = 'DD9DC3'; xx = 'x'; }
4476
else if (m == 109) { m = "Locked account"; c = 'E1BBBB'; xx = 'x'; }
4477
else if (m == 110) { m = "Invalid password"; c = 'E1BBBB'; xx = 'x'; }
4478
- 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>';
4478
+ 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>';
4479
}
4480
x += '</table></div>';
4481
}