Add virtual keyboard during tests

Optional and with support for most languages

src/css/Button.css

@@ -82,6 +82,16 @@ main .button {
 	display: none;
 }
 
+.inline-option-buttons-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	column-gap: 24px;
+	row-gap: 8px;
+}
+
 @media screen and (max-width: 700px) {
 	.button.button--hide-text-mobile {
 		background: none;

src/css/ConfirmationDialog.css

@@ -1,8 +1,5 @@
 .confirmation-dialog {
-	width: 60%;
-	max-width: 290px;
-	height: 80%;
-	max-height: 130px;
+	max-width: min(290px,80%);
 }
 
 .confirmation-dialog > h3 {
@@ -11,4 +8,5 @@
 
 .confirmation-dialog > .button-container {
 	justify-content: space-between;
+	width: 100%;
 }

src/css/PopUp.css

@@ -31,13 +31,14 @@
 	z-index: 20;
 	background: var(--background-color);
 	border-radius: 12px;
-	display: flex;
-	flex-direction: column;
 	overflow: auto;
 	text-align: center;
-	flex-wrap: nowrap;
-	justify-content: center;
 	padding: 32px;
+	justify-items: center;
+	max-width: min(800px,80%);
+	max-height: min(600px,80%);
+	display: grid;
+	height: max-content;
 }
 
 .overlay-content > h1 {

src/css/Progress.css

@@ -67,19 +67,6 @@
 	margin: 0;
 }
 
-.progress-settings-overlay-content {
-	width: 80%;
-	max-width: 700px;
-	height: 70%;
-	max-height: 500px;
-	align-items: center;
-}
-
-.progress-settings-overlay-content > .settings-themes-container {
-	justify-content: center;
-	width: 75%;
-}
-
 .form-submit {
 	display: none;
 }
@@ -128,6 +115,23 @@
 	margin: 0 0 -2px 0;
 }
 
+.hide-virtual-keyboard-button {
+	margin: 16px auto;
+}
+
+.simple-keyboard.hg-theme-default {
+	background-color: var(--background-color);
+}
+
+.simple-keyboard.hg-theme-default .hg-button {
+	background-color: var(--background-color--light);
+	border: 1px solid var(--overlay-color);
+	box-shadow: none;
+}
+
+.simple-keyboard.hg-theme-default .hg-button:hover, .simple-keyboard.hg-theme-default .hg-button:focus {
+	background-color: var(--overlay-color);
+}
 
 @media screen and (max-width: 880px) {
 	.current-prompt {
@@ -139,9 +143,6 @@
 }
 
 @media screen and (max-width: 700px) {
-	.progress-settings-overlay-content > .settings-themes-container {
-		width: 100%;
-	}
 	.current-prompt {
 		font-size: 30px;
 	}
@@ -151,25 +152,10 @@
 }
 
 @media screen and (max-width: 500px) {
-	.progress-settings-overlay-content {
-		width: 75%;
-	}
 	.current-prompt {
 		font-size: 26px;
 	}
 	.answer-input-container > input {
 		font-size: 24px;
 	}
-}
-
-@media screen and (max-height: 700px) {
-	.progress-settings-overlay-content {
-		height: 75%;
-	}
-}
-
-@media screen and (max-height: 600px) {
-	.progress-settings-overlay-content {
-		justify-content: flex-start;
-	}
 }

src/css/SetPage.css

@@ -26,37 +26,15 @@
 	border-right: 8px solid transparent;
 }
 
-.set-page-group-overlay-content {
-	width: 70%;
-	max-width: 800px;
-	height: 70%;
-	max-height: 600px;
-	align-items: center;
+.set-page-group-button-container {
+	width: 80%;
 }
 
-.set-page-overlay-group-container {
-	width: 80%;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: center;
-	column-gap: 24px;
-	row-gap: 8px;
+.set-page-group-overlay-content {
+	min-width: min(500px,80%);
 }
 
 .no-groups-message-list {
 	padding: 0 18px;
 	margin: 4px 0;
-}
-
-@media screen and (max-width: 860px) {
-	.set-page-group-overlay-content {
-		width: 75%;
-	}
-}
-@media screen and (max-height: 700px) {
-	.set-page-group-overlay-content {
-		height: 75%;
-	}
 }

src/css/UserGroups.css

@@ -1,9 +1,7 @@
 .user-groups-overlay-content {
-	width: 40%;
-	max-width: 500px;
-	height: 50%;
-	max-height: 400px;
-	align-items: center;
+	max-width: min(500px,80%);
+	padding-top: 64px;
+	padding-bottom: 64px;
 }
 
 .user-groups-overlay-input-container {
@@ -11,7 +9,7 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
-	width: 80%;
+	width: 90%;
 }
 
 .user-groups-overlay-input-container > *:first-child {
@@ -56,28 +54,13 @@
 	text-decoration: none;
 }
 
-@media screen and (max-width: 1080px) {
-	.user-groups-overlay-content {
-		width: 50%;
-	}
-}
-@media screen and (max-width: 860px) {
-	.user-groups-overlay-content {
-		width: 70%;
-	}
-}
 @media screen and (max-width: 560px) {
-	.user-groups-overlay-input-container {
-		width: 90%;
-	}
 	.user-groups-overlay-input-container > .button {
 		margin-top: 4px;
 	}
 	.user-groups-overlay-input-container > input {
 		width: 100%;
 	}
-}
-@media screen and (max-width: 420px) {
 	.user-groups-overlay-input-container {
 		width: 100%;
 	}