show exam reserved text even during screensaver

Author: FreekBes

static/index.html

@@ -46,8 +46,8 @@ <h4 id="active-user-session-login-name">username</h4>
 
 			<!-- Exam mode form -->
 			<form action="POST" id="exam-form" spellcheck="false" autocomplete="off" autocapitalize="off" style="display: none;">
-				<h3>This computer is reserved for an exam between <span id="exam-mode-start">...</span> and <span id="exam-mode-end">...</span>.</h3>
-				<p><span id="exam-mode-projects"></span></p>
+				<h3 class="exam-mode-reserved-text">This computer is reserved for an exam between <span id="exam-mode-start">...</span> and <span id="exam-mode-end">...</span>.</h3>
+				<p class="exam-mode-reserved-text"><span id="exam-mode-projects"></span></p>
 				<br>
 				<p>Click the arrow below to start your exam.</p>
 				<button type="submit" id="exam-mode-start-button" title="Start your exam">&#10149;</button>

static/styles.css

@@ -347,6 +347,11 @@ form p {
 	text-shadow: var(--text-shadow);
 }
 
+.exam-mode-reserved-text {
+	/* overlap even the screensaver */
+	z-index: 9999;
+}
+
 #exam-mode-projects {
 	font-size: small;
 	font-style: italic;