From 1363f57c2be571902614e30f1742dc4283aca296 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Tue, 5 May 2026 21:19:21 -0500
Subject: [PATCH] Fix colors on the proctor login page for dark mode.

The colors for this were inline style.  Colors cannot be inline anymore
since the server cannot detect if the user will have the browser in dark
mode or not.  So classes are used instead.
---
 htdocs/js/System/system.scss                    | 17 +++++++++++++++++
 templates/ContentGenerator/LoginProctor.html.ep | 10 +++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/htdocs/js/System/system.scss b/htdocs/js/System/system.scss
index ff6afbef75..ea4da94212 100644
--- a/htdocs/js/System/system.scss
+++ b/htdocs/js/System/system.scss
@@ -1197,6 +1197,23 @@ input.changed[type='text'] {
 	}
 }
 
+// Login proctor styles
+.proctor-login-info {
+	background-color: #ddf;
+
+	&.proctor-login-overtime {
+		background-color: #ffa;
+	}
+
+	[data-bs-theme='dark'] & {
+		background-color: #00d;
+
+		&.proctor-login-overtime {
+			background-color: #550;
+		}
+	}
+}
+
 mjx-help-background {
 	z-index: 1055;
 }
diff --git a/templates/ContentGenerator/LoginProctor.html.ep b/templates/ContentGenerator/LoginProctor.html.ep
index 02635f8309..8de72085a1 100644
--- a/templates/ContentGenerator/LoginProctor.html.ep
+++ b/templates/ContentGenerator/LoginProctor.html.ep
@@ -16,14 +16,14 @@
 % # Print a message about submission times if we're submitting an answer.
 % if (param('submitAnswers')) {
 	% my $dueTime = $userSet->due_date;
-	% my ($color, $msg) = ('#ddddff', '');
+	% my ($overtimeClass, $msg) = ('', '');
 	% if ($dueTime + $ce->{gatewayGracePeriod} < $submitTime) {
-		% $color = '#ffffaa';
+		% $overtimeClass = ' proctor-login-overtime';
 		% $msg = maketext('The time limit on this assignment was exceeded. The assignment may be checked, '
 			% . 'but the result will not be counted.');
 	% }
 	%
-	<div class="card mb-2" style="background-color:<%= $color %>;">
+	<div class="proctor-login-info card mb-2<%= $overtimeClass %>">
 		<div class="card-body p-2">
 			<div class="card-title"><strong><%= maketext('Grading Assignment') %></strong></div>
 			<div class="card-text">
@@ -52,7 +52,7 @@
 		% || ($userSet->restricted_login_proctor eq '' || $userSet->restricted_login_proctor eq 'No'))
 	% {
 		% # The user info and username field for the proctor.
-		<div class="card p-2 mb-2" style="background-color:#ddddff;">
+		<div class="proctor-login-info card p-2 mb-2">
 			<div><%= maketext(q{User's username is:}) %> <strong><%= param('effectiveUser') // '' %></strong></div>
 			<div>
 				<%= maketext(q{User's name is:}) %>
@@ -68,7 +68,7 @@
 		</div>
 	% } else {
 		% # Restricted set login
-		<div class="card p-2 mb-2" style="background-color:#ddddff;">
+		<div class="proctor-login-info card p-2 mb-2">
 			<em>
 				<%= maketext(
 					'This set has a set-level proctor password to authorize logins. Enter the password below.') =%>