Merge pull request #83 from ThomasRubini/css_refactor

truthinquiry/static/css/game_ui.css

@@ -1,36 +1,49 @@
 /* Custom fonts */
 @font-face {
+    font-display: swap;
     font-family: "Spicy Rice";
     font-style: normal;
     font-weight: 400;
-    font-display: swap;
     src: url("../fonts/spicy_rice_v21/spicy_rice_v21.woff2") format("woff2"), url("../fonts/spicy_rice_v21/spicy_rice_v21.woff") format("woff"), url("../fonts/spicy_rice_v21/spicy_rice_v21.ttf") format("truetype");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
+    font-display: swap;
     font-family: "Titan One";
     font-style: normal;
     font-weight: 400;
-    font-display: swap;
     src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format('woff2'), url("../fonts/titan_one_v13/titan_one_v13.woff") format('woff'), url("../fonts/titan_one_v13/titan_one_v13.ttf") format('truetype');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
+    font-display: swap;
     font-family: "Roboto Mono";
     font-style: normal;
     font-weight: 400;
-    font-display: swap;
     src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format('woff2'), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format('woff'), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format('truetype');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* Base elements */
+/* Common properties */
 :root {
+    /* Colors */
     color-scheme: dark;
-    --footer-links-height: 2em;
+    --alert-dialog-background-color: #000000DF;
+    --button-links-gray-color: #939393;
+    --dark-theme-background-color: #213C40;
+    --game-black: #000000;
+    --game-blue: #0096FF;
+    --game-green: #008000;
+    --game-grey: #5A5656;
+    --game-red: #BD1E1E;
+    --game-white: #FFFFFF;
+    --light-theme-background-color: #B1EDE8;
+    /* Sizes */
+    --body-margin: 0.375em;
     --button-and-dialog-border-radius: 1em;
+    --footer-links-height: 2em;
 }
   
 html {
@@ -38,17 +51,36 @@ html {
 }
 
 body {
-    --body-margin: 0.375em;
     margin: var(--body-margin);
 }
 
+.action_button {
+    background-color: var(--game-red);
+    border-color: var(--game-black);
+    border-radius: var(--button-and-dialog-border-radius);
+    border-style: solid;
+    border-width: 0.125em;
+    cursor: pointer;
+    overflow: hidden;
+    padding-bottom: 0.5em;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0.5em;
+    transition: box-shadow 0.5s, transform 0.5s;
+}
+
+.alert_dialog, .footer_links {
+    align-content: center;
+    align-items: center;
+}
+
 /* Themes */
 .dark {
-    background-color: #213C40;
+    background-color: var(--dark-theme-background-color);
 }
 
 .light {
-    background-color: #B1EDE8;
+    background-color: var(--light-theme-background-color);
 }
 
 /* Utility classes */
@@ -67,7 +99,7 @@ body {
 
 /* Footer */
 .footer_link {
-    color: white;
+    color: var(--game-white);
     font-family: sans-serif;
     font-size: 1em;
     font-weight: bold;
@@ -76,12 +108,10 @@ body {
 }
 
 .footer_link:hover {
-    color: #939393;
+    color: var(--button-links-gray-color);
 }
 
 .footer_links {
-    align-content: center;
-    align-items: center;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -89,7 +119,7 @@ body {
     justify-content: flex-end;
 }
 
-/* JavaScript browser message */
+/* Unsupported browser messages */
 .unsupported_browser_msg {
     display: none;
 }
@@ -100,19 +130,17 @@ body {
 
 /* Alert dialogs */
 .alert_dialog {
-    position: absolute;
+    border-radius: var(--button-and-dialog-border-radius);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     display: none;
-    align-content: center;
-    align-items: center;
     font-family: "Spicy Rice", serif;
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: center;
-    border-radius: var(--button-and-dialog-border-radius);
+    left: 50%;
     padding: 2em;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
     z-index: 2;
 }
 
@@ -132,20 +160,12 @@ body {
 }
 
 .alert_dialog_background {
-    background-color: rgba(0, 0, 0, 0.875);
+    background-color: var(--alert-dialog-background-color);
-    position: absolute;
     display: none;
-    top: 0;
-    left: 0;
     height: 100vh;
+    left: 0;
+    position: absolute;
+    top: 0;
     width: 100vw;
     z-index: 1;
 }
-
-.theme_switcher_btn {
-    transition: fill 0.5s;
-}
-
-.theme_switcher_btn:hover {
-   fill: #939393;
-}

truthinquiry/static/css/game_ui_game.css

@@ -1,15 +1,39 @@
-:root {
+/* Common properties */
-    --grey-color: #5A5656;
-    --red-color: #BD1E1E;
-}
-
 html {
-    background-color: black;
+    background-color: var(--game-black);
-    color: white;
+    color: var(--game-white);
 }
 
-.game_app {
+.action_button, .score_title {
-    margin: 0;
+    text-transform: uppercase;
+}
+
+.action_button, .scores, .summary {
+    font-family: "Titan One", sans-serif;
+}
+
+.anwser_title, .emotion_and_culprit_choices_title, .introduction_text, .introduction_title, .interrogation_title, .results_title, .reveal_culprit_title, .score_title, .summary_title {
+    font-family: "Spicy Rice", serif;
+}
+
+.culprit_btn, .interrogation, .player_score, .question_answer, .questions_and_image, .reveal_culprit, .reveal_score, .scores, .summary, .summary_suspect, .suspect_picture[alt], .suspect, .suspects, .suspects_list {
+    align-items: center;
+}
+
+.culprit_btn, .interrogation, .player_score, .question_answer, .questions_list, .questions_and_image, .reveal_culprit, .reveal_score, .reveal_and_scores, .scores, .summary, .summary_title, .suspect, .suspect_picture[alt], .suspects, .suspects_list, .summary_suspect {
+    display: flex;
+}
+
+.culprit_btn, .interrogation, .player_score, .question_answer, .questions_list, .reveal_score, .suspect_picture[alt], .suspect, .suspects, .suspects_list {
+    justify-content: center;
+}
+
+.culprit_btn, .player_score, .reveal_and_scores, .summary_title, .suspects, .suspects_list {
+    flex-direction: row;
+}
+
+.culprit_btn, .player_score, .suspect {
+    flex-wrap: nowrap;
 }
 
 .current_background {
@@ -24,26 +48,54 @@ html {
     z-index: -9999;
 }
 
-.action_button, .scores, .summary {
+.emotion_and_culprit_choices_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .reveal_score, .score_title, .summary_title {
-    font-family: "Titan One", sans-serif;
+    color: var(--game-red);
 }
 
-.anwser_title, .emotion_and_culprit_choices_title, .introduction_text, .introduction_title, .interrogation_title, .results_title, .reveal_culprit_title, .score_title, .summary_title {
+.emotion_and_culprit_choices_title, .results_title, .reveal_culprit_title, .score_title, .summary, .summary_title, .suspect_picture[alt] {
-    font-family: "Spicy Rice", serif;
+    text-align: center;
+}
+
+.explain_suspect_emotion_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .score_title, .suspect_answer {
+    font-weight: bold;
+}
+
+.game_app {
+    margin: 0;
+}
+
+.interrogation, .question_answer, .questions_and_image, .reveal_and_scores, .reveal_culprit, .summary_suspect, .suspect_picture[alt], .suspects, .suspects_list {
+    flex-wrap: wrap;
+}
+
+.interrogation, .question_answer, .questions_list, .reveal_culprit, .scores, .summary, .summary_suspect, .suspect, .suspect_picture[alt] {
+    flex-direction: column;
 }
 
 .introduction_title, .results_title, .summary_title {
     font-size: 4em;
 }
 
-.reveal_culprit_explaination, .explain_suspect_emotion_description, .reveal_score, .suspect_emotion_chooser, .suspect_answer, .suspect_picture[alt] {
-    font-family: "Roboto Mono", sans-serif;
-}
-
 .interrogation_title, .reveal_culprit_title, .reveal_score, .results_title, .score_title, .summary_title {
     margin: 0.25em;
 }
 
+.next_btn, .suspect_emotion_chooser {
+    border: none;
+}
+
+.next_btn, #return_lobby_button {
+    background-color: transparent;
+}
+
+.question_answer, .questions_list, .questions_and_image, .reveal_culprit, .suspect_picture[alt], .scores, .summary_suspect, .suspects, .suspects_list {
+    align-content: center;
+}
+
+.reveal_culprit_explaination, .explain_suspect_emotion_description, .reveal_score, .suspect_emotion_chooser, .suspect_answer, .suspect_picture[alt] {
+    font-family: "Roboto Mono", sans-serif;
+}
+
 .reveal_culprit_explaination, .question_button, .players_list, .reveal_culprit, .scores, .summary, .suspect, .suspect_emotion_chooser {
     margin: 1em;
 }
@@ -55,45 +107,26 @@ html {
 }
 
 .suspect_picture[alt] {
-    align-content: center;
-    align-items: center;
-    display: flex;
     font-size: 1em;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    text-align: center;
 }
 
 /* Buttons */
-.action_button {
+.action_button, .next_btn {
-    border-color: black;
-    border-style: solid;
-    border-width: 0.125em;
-    background-color: var(--red-color);
-    border-radius: var(--button-and-dialog-border-radius);
     cursor: pointer;
+}
+
+.action_button {
     font-size: 1.5em;
     min-width: 10em;
-    padding-bottom: 0.5em;
-    padding-top: 0.5em;
-    padding-left: 1em;
-    padding-right: 1em;
-    overflow: hidden;
-    text-transform: uppercase;
-    transition: box-shadow 0.5s, transform 0.5s;
 }
 
 .action_button:hover {
-    box-shadow: 10px 10px 0px 0px black;
+    box-shadow: 10px 10px 0px 0px var(--game-black);
     transform: translate(0.1em, 0.1em);
 }
 
 .next_btn {
-    background-color: transparent;
+    fill: var(--game-red);
-    border: none;
-    cursor: pointer;
-    fill: var(--red-color);
     height: 5em;
     padding: 0;
     transform: rotate(180deg);
@@ -112,87 +145,49 @@ html {
     max-width: 50vw;
 }
 
-.introduction_title {
-    color: var(--red-color);
-    font-weight: bold;
-    margin: 0;
-    text-align: left;
-}
-
 .introduction_text {
     font-size: 2em;
     margin-bottom: 1em;
     margin-top: 1em;
 }
 
+.introduction_title {
+    margin: 0;
+    text-align: left;
+}
+
 /* Interrogation */
-.interrogation {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.interrogation_title {
-    color: var(--red-color);
-    font-size: 3em;
-    font-weight: bold;
-    max-width: calc(100vw - 2em);
-}
-
-.suspects {
-    align-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.suspect {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-}
-
 .ask_button {
-    background-color: white;
+    background-color: var(--game-white);
-    color: black;
+    color: var(--game-black);
     text-transform: none;
 }
 
-#interrogation_suspect_previous_btn {
-    margin-right: 1em;
-}
-
 .anwser_title {
     font-size: 2.5em;
     margin: 0.25em;
 }
 
+.interrogation_title {
+    font-size: 3em;
+    max-width: calc(100vw - 2em);
+}
+
 .suspect_answer {
     font-size: 1.375em;
-    font-weight: bold;
+    margin-bottom: 1em;
     margin-left: 0.25em;
     margin-right: 0.25em;
     margin-top: 1em;
-    margin-bottom: 1em;
+}
+
+#interrogation_suspect_previous_btn {
+    margin-right: 1em;
 }
 
 /* Emotion and culprit choices */
-.culprit_btn {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: center;
-}
-
 .culprit_icon {
-    fill: white;
+    fill: var(--game-white);
     height: 1em;
     width: 1em;
 }
@@ -204,164 +199,46 @@ html {
 }
 
 .culprit_btn_checked {
-    background-color: green;
+    background-color: var(--game-green);
-}
-
-.suspect_emotion_chooser {
-    background-color: var(--grey-color);
-    border: none;
-    border-radius: var(--button-and-dialog-border-radius);
-    color: white;
-    font-size: 1em;
-    padding: 0.5em;
 }
 
 .emotion_and_culprit_choices_title {
-    color: var(--red-color);
     font-size: 2em;
     margin: 0.5em;
-    text-align: center;
 }
 
 .question_button {
-    background-color: var(--grey-color);
+    background-color: var(--game-grey);
     border-radius: 2em;
     text-transform: none;
 }
 
 .questions_and_image {
-    align-content: center;
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
     justify-content: space-evenly;
 }
 
 .questions_list {
-    align-content: center;
     align-items: normal;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
 }
 
-.question_answer {
+.suspect_emotion_chooser {
-    align-content: center;
+    background-color: var(--game-grey);
-    align-items: center;
+    border-radius: var(--button-and-dialog-border-radius);
-    display: flex;
+    color: var(--game-white);
-    flex-direction: column;
+    font-size: 1em;
-    flex-wrap: wrap;
+    padding: 0.5em;
-    justify-content: center;
 }
 
 /* Results and scores */
-.results_title {
-    color: var(--red-color);
-    font-weight: bold;
-    font-size: 4.5em;
-    text-align: center;
-}
-
-.summary {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-}
-
-.scores {
-    align-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    min-width: 15em;
-}
-
-.reveal_and_scores {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-}
-
-.reveal_culprit_title {
-    color: var(--red-color);
-    font-size: 2em;
-    font-weight: bold;
-    text-align: center;
-}
-
-.score_title {
-    color: var(--red-color);
-    font-size: 2em;
-    font-weight: bold;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-.reveal_score {
-    align-items: center;
-    color: var(--red-color);
-    display: flex;
-    font-size: 2em;
-    justify-content: center;
-}
-
-.summary_title {
-    color: var(--red-color);
-    display: flex;
-    font-size: 4em;
-    flex-direction: row;
-    text-align: center;
-}
-
-.suspects_list {
-    align-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 1em;
-}
-
-#return_lobby_button {
-    background-color: transparent;
-    border: transparent;
-}
-
-.summary_suspect {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    flex-direction: column;
-    flex-wrap: wrap;
-    margin-left: 1.5em;
-    margin-right: 1.5em;
-}
-
-.reveal_culprit_explaination {
-    font-size: 1.25em;
-}
-
-.explain_suspect_emotion_title {
-    font-size: 1.75em;
-    font-weight: bold;
-    margin: 0.5em;
-}
-
 .explain_suspect_emotion_description {
     font-size: 1.25em;
     font-weight: normal;
     margin: 1em;
 }
 
-.player_score {
+.explain_suspect_emotion_title {
-    align-items: center;
+    font-size: 1.75em;
-    display: flex;
+    margin: 0.5em;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: center;
 }
 
 .player_name_and_score {
@@ -370,10 +247,39 @@ html {
     padding: 0.25em;
 }
 
-.reveal_culprit {
+.results_title {
-    align-content: center;
+    font-size: 4.5em;
-    align-items: center;
+}
-    display: flex;
+
-    flex-direction: column;
+.reveal_and_scores {
-    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.reveal_culprit_explaination {
+    font-size: 1.25em;
+}
+
+.reveal_culprit_title, .reveal_score, .score_title {
+    font-size: 2em;
+}
+
+.scores {
+    min-width: 15em;
+}
+
+.summary_suspect {
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+}
+
+.summary_title {
+    font-size: 4em;
+}
+
+.suspects_list {
+    margin: 1em;
+}
+
+#return_lobby_button {
+    border: transparent;
 }

truthinquiry/static/css/game_ui_legal.css

@@ -1,40 +1,34 @@
+/* Common properties */
 html {
-    background-color: black;
+    background-color: var(--game-black);
-}
+    color: var(--game-white);
-
-body {
     font-family: "Roboto Mono", "sans-serif";
 }
 
+/* Legal links and texts */
+.legal_text_description, .legal_text_last_update, .legal_text_title {
+    margin: 0;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+
 .legal_link {
-    color: #0096FF;
+    color: var(--game-blue);
 }
 
 .legal_text_title {
     font-family: "Spicy Rice", sans-serif;
     font-size: 2.5em;
     text-align: center;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
 }
 
 .legal_text_last_update {
     font-family: "Titan One", serif;
     font-size: 1.5em;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
 }
 
 .legal_text_description {
     font-size: 1.25em;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
 }
 
 .legal_text_unordered_list {

truthinquiry/static/css/game_ui_lobby.css

@@ -1,47 +1,73 @@
 /* Global properties */
 html {
-    background-color: black;
+    background-color: var(--game-black);
-    color: white;
+    color: var(--game-white);
 }
 
-:root {
+.action_button, .multi_player_mode_choice_title, .multi_player_mode_waiting_for_host, .player_name, .players_title, .rounds_count_title, .room_code_text_title, .room_title, #game_username, #rounds_count {
-    --button-background-color: #FF0000;
-}
-
-.multi_player_mode_choice_title, .multi_player_mode_waiting_for_host, .player_name, .players_title, .rounds_count_title, .room_code_text_title, .room_title {
     font-family: "Titan One", sans-serif;
-    margin-bottom: 0.5em;
+}
-    margin-top: 0.5em;
+
+.game_start_failed, .multi_player_challenge_mode_invalid_input, .player_names {
+    font-family: "Roboto Mono", sans-serif;
+}
+
+.game_start_failed, .multi_player_challenge_mode_invalid_input, .room_code, .room_title {
+    color: var(--game-red);
+}
+
+.join_room_view, .multi_player_mode_choice, .multi_player_mode_choice_number, .players_title, .room_code_text, .room_view_container {
+    align-items: center;
+    display: flex;
+}
+
+.join_room_view, .multi_player_mode_choice, .player_name, .players_title, .room_code_text {
+    justify-content: center;
+}
+
+.join_room_view, .multi_player_mode_choice, .room_code_text {
+    flex-wrap: nowrap;
 }
 
 .join_room_view, .room_view {
     height: calc(100vh - var(--body-margin) * 2);
 }
 
+.multi_player_mode_choice, .join_room_view, .players_title, .room_code_text {
+    flex-direction: column;
+}
+
+.multi_player_mode_choice, .multi_player_mode_waiting_for_host {
+    text-align: center;
+}
+
+.multi_player_mode_choice_number, .room_view_container {
+    flex-direction: row;
+}
+
+.multi_player_mode_choice_title, .multi_player_mode_waiting_for_host, .player_name, .players_title, .rounds_count_title, .room_code_text_title, .room_title {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+
+.players_title, .room_view_container {
+    flex-wrap: wrap;
+}
+
+#game_username, #rounds_count {
+    border: none;
+}
+
 /* Action buttons */
 .action_button {
-    border-color: black;
-    border-style: solid;
-    border-width: 0.125em;
-    background-color: var(--button-background-color);
-    border-radius: var(--button-and-dialog-border-radius);
-    color: white;
-    cursor: pointer;
-    font-family: "Titan One", sans-serif;
     margin-left: auto;
     margin-right: auto;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    padding-left: 1em;
-    padding-right: 1em;
     text-transform: uppercase;
-    overflow: hidden;
-    transition: box-shadow 0.5s, transform 0.5s;
 }
 
 .action_button:hover {
     transform: translate(0.1em, 0.1em);
-    box-shadow: 10px 10px 0px 0px black;
+    box-shadow: 10px 10px 0px 0px var(--game-black);
 }
 
 .multi_player_mode_choice .action_button, .room_code_text .action_button {
@@ -50,72 +76,54 @@ html {
 }
 
 /* Room view major elements */
-.room_title {
+.room_view_container {
-    color: var(--button-background-color);
+    justify-content: space-around;
-    font-family: "Spicy Rice", sans-serif;
-    font-weight: bold;
-    font-size: 4em;
-    margin: 0.25em;
 }
 
-.room_view_container {
+.room_title {
-    align-items: center;
+    font-family: "Spicy Rice", sans-serif;
-    display: flex;
+    font-size: 4em;
-    flex-direction: row;
+    font-weight: bold;
-    flex-wrap: wrap;
+    margin: 0.25em;
-    justify-content: space-around;
 }
 
 /* Room code */
 .room_code {
-    color: var(--button-background-color);
     text-decoration: none;
 }
 
-.room_code_text {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-}
-
 .room_code_text_title {
     font-size: 2em;
     margin: 0.25em;
 }
 
 #invite_friends_button {
+    background-color: var(--game-grey);
+    border-radius: 0.5em;
     font-size: 1em;
     text-transform: none;
-    background-color: #c2c0c0;
-    border-radius: 0.5em;
 }
 
 #invite_friends_button:hover {
+    box-shadow: 10px 10px 0px 0px var(--game-black);
     transform: translate(0.1em, 0.1em);
-    box-shadow: 10px 10px 0px 0px black;
 }
 
 /* Waiting for host */
 .multi_player_mode_waiting_for_host {
     font-size: 2.5em;
     max-width: 20em;
-    text-align: center;
 }
 
 /* Multi-player mode choice */
-.multi_player_mode_choices {
+.multi_player_challenge_mode_invalid_input {
-    padding: 1em;
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0.5em;
 }
 
-.multi_player_mode_choice {
+.multi_player_mode_choice_number {
-    display: flex;
+    margin: 0.75em;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
 }
 
 .multi_player_mode_choice_title {
@@ -123,54 +131,36 @@ html {
     margin: 0.5em;
 }
 
-.multi_player_mode_choice_number {
+.multi_player_mode_choices {
-    align-items: center;
+    padding: 1em;
-    display: flex;
-    flex-direction: row;
-    margin: 0.75em;
-}
-
-.multi_player_challenge_mode_invalid_input {
-    color: var(--button-background-color);
-    font-family: "Roboto Mono", sans-serif;
-    font-size: 1em;
-    font-weight: bold;
-    margin: 0.5em;
 }
 
 /* Rounds count */
-#rounds_count {
-    background-color: white;
-    border: none;
-    border-radius: 0.5em;
-    color: black;
-    font-family: "Titan One", sans-serif;
-    font-size: 1em;
-    padding: 0.5em;
-    width: 2.5em;
-}
-
 .rounds_count_title {
     font-size: 1.375em;
     margin: 0.5em;
 }
 
+#rounds_count {
+    background-color: var(--game-white);
+    border-radius: 0.5em;
+    color: var(--game-black);
+    font-size: 1em;
+    padding: 0.5em;
+    width: 2.5em;
+}
+
 /* Players list */
-.players_title {
+.player_name {
-    align-content: center;
+    color: var(--game-white);
-    align-items: center;
+    font-size: 1.5em;
-    display: flex;
+    margin-bottom: 0.5em;
-    font-size: 3em;
+    margin-top: 0.5em;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 1em;
 }
 
 .player_names {
-    border: 0.25em white solid;
+    border: 0.25em var(--game-white) solid;
     border-radius: 0.75em;
-    font-family: "Roboto Mono", sans-serif;
     font-size: 1.25em;
     max-height: 12em;
     min-width: 25em;
@@ -178,29 +168,17 @@ html {
     padding: 0.25em;
 }
 
-.player_name {
+.players_title {
-    font-size: 1.5em;
+    align-content: center;
-    margin-bottom: 0.5em;
+    font-size: 3em;
-    margin-top: 0.5em;
+    margin: 1em;
-    text-align: center;
-    color: white;
 }
 
 /* Game join view */
-.join_room_view {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-}
-
 #game_username {
-    background-color: white;
+    background-color: var(--game-white);
-    border: none;
     border-radius: 0.375em;
-    color: black;
+    color: var(--game-black);
-    font-family: "Titan One", sans-serif;
     font-size: 1.25em;
     margin: 0.5em;
     padding: 0.5em;
@@ -213,8 +191,6 @@ html {
 
 /* Game start failure */
 .game_start_failed {
-    color: var(--button-background-color);
-    font-family: "Roboto Mono", sans-serif;
-    font-weight: bold;
     font-size: 1em;
+    font-weight: bold;
 }

truthinquiry/static/css/game_ui_start.css

@@ -1,8 +1,28 @@
+/* Common properties */
 :root {
     --game-begin-margin: 2em;
     --header-actions-height: 3em;
 }
 
+input, .action_button, .game_mode_item_title {
+    font-family: "Titan One", sans-serif;
+}
+
+.game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.game_begin, .game_mode_item, .game_mode_selection, .game_mode_items {
+    flex-direction: column;
+}
+
+.game_mode_item_input_text_single_line, .game_mode_items {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
 button {
     background-color: transparent;
     border: none;
@@ -11,36 +31,30 @@ button {
 }
 
 input {
-    background-color: white;
+    background-color: var(--game-white);
     border: none;
     border-radius: 1em;
-    font-family: "Titan One", sans-serif;
     font-size: 1em;
     padding: 0.5em;
-    color: black;
+    color: var(--game-black);
 }
 
 input::placeholder {
-    color: black;
+    color: var(--game-black);
     opacity: 0.5;
 }
 
 .back_btn {
-    fill: #BD1E1E;
+    fill: var(--game-red);
 }
 
 .game_begin {
-    align-items: center;
-    border-radius: 1.5em;
     background-image: url("../images/start_background.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    display: flex;
+    border-radius: 1.5em;
-    flex-direction: column;
     flex-wrap: wrap;
-    justify-content: center;
-    margin: var(--game-begin-margin);
     /*
     Viewport height - body margin (x2: top + bottom) - header actions height
     - footer links height - game begin margin
@@ -49,13 +63,15 @@ input::placeholder {
         - var(--game-begin-margin) * 2
         - var(--header-actions-height)
         - var(--footer-links-height));
+    justify-content: center;
+    margin: var(--game-begin-margin);
 }
 
 .game_title {
-    color: #BD1E1E;
+    color: var(--game-red);
     font-family: "Spicy Rice", serif;
-    font-weight: bold;
     font-size: 5em;
+    font-weight: bold;
     margin: 0.25em;
     text-align: center;
 }
@@ -66,107 +82,76 @@ input::placeholder {
 
 .header_actions {
     display: flex;
-    justify-content: flex-end;
     height: var(--header-actions-height);
+    justify-content: flex-end;
 }
 
 .action_button {
-    border-color: black;
-    border-style: solid;
-    border-width: 0.125em;
-    background-color: #BD1E1E;
-    border-radius: var(--button-and-dialog-border-radius);
-    cursor: pointer;
-    font-family: "Titan One", sans-serif;
     margin-left: auto;
     margin-right: auto;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    padding-left: 1em;
-    padding-right: 1em;
     text-transform: uppercase;
-    overflow: hidden;
-    transition: box-shadow 0.5s, transform 0.5s;
 }
 
 .action_button:hover {
+    box-shadow: 10px -10px 25px 0px var(--game-black), -10px 10px 25px 0px var(--game-black);
     transform: translate(0.1em, 0.1em);
-    box-shadow: 10px -10px 25px 0px black, -10px 10px 25px 0px black;
 }
 
 .game_mode_selection {
-    align-items: center;
     background-image: url("../images/start_background.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    display: flex;
-    flex-direction: column;
     flex-wrap: nowrap;
     height: 100vh;
-    justify-content: center;
 }
 
 .game_mode_item {
-    margin: 0.5em;
-    display: flex;
-    flex-direction: column;
     align-content: center;
-    justify-content: center;
+    margin: 0.5em;
-    align-items: center;
 }
 
 .game_mode_item_title {
-    font-family: "Titan One", sans-serif;
     font-size: 2em;
     margin: 0.25em;
 }
 
 .game_mode_item_input_text_single_line {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 0.5em;
     margin-bottom: 0.5em;
-}
+    margin-top: 0.5em;
-
-.game_mode_items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
 }
 
 .game_mode_choice_selector {
-    background-color: black;
+    background-color: var(--game-black);
-    border-color: white;
+    border-color: var(--game-white);
     border-style: solid;
     border-radius: 1.5em;
     padding: 1em;
 }
 
 .game_start_failed {
-    color: #BD1E1E;
+    color: var(--game-red);
     font-family: "Roboto Mono", sans-serif;
-    font-size: 1em;
     font-size: 1.5em;
     font-weight: bold;
     margin-bottom: 0.25em;
     margin-left: 0.5em;
-    margin-top: 0.25em;
     margin-right: 0.5em;
+    margin-top: 0.25em;
 }
 
-.theme_switcher {
+.theme_switcher_btn {
-    fill: white;
+    fill: var(--game-white);
+    transition: fill 0.5s;
+}
+
+.theme_switcher_btn:hover {
+    fill: var(--button-links-gray);
 }
 
 #back_button {
-    position: absolute;
     left: 0;
+    position: absolute;
     top: 0;
 }