diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css index 8b20984..844da78 100644 --- a/truthseeker/static/css/game_ui_game.css +++ b/truthseeker/static/css/game_ui_game.css @@ -1,12 +1,13 @@ +:root { + --grey-color: #5A5656; + --red-color: #BD1E1E; +} + html { background-color: black; color: white; } -:root { - --button-color : #FF0000; -} - .game_app { margin: 0; } @@ -21,15 +22,55 @@ html { z-index: -9999; } +.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; +} + +.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; +} + +.reveal_culprit_explaination, .question_button, .players_list, .reveal_culprit, .scores, .summary, .suspect, .suspect_emotion_chooser { + margin: 1em; +} + +.suspect_picture { + margin: 1em; + height: 15em; + width: 15em; +} + +.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 { border-color: black; border-style: solid; border-width: 0.125em; - background-color: var(--button-color); + background-color: var(--red-color); border-radius: var(--button-and-dialog-border-radius); cursor: pointer; - font-family: "Titan One", sans-serif; font-size: 1.5em; min-width: 10em; padding-bottom: 0.5em; @@ -50,14 +91,14 @@ html { background-color: transparent; border: none; cursor: pointer; - fill: var(--button-color); + fill: var(--red-color); height: 5em; padding: 0; transform: rotate(180deg); width: 5em; } -#emotion_and_culprit_choices_next_btn, #interrogation_next_btn { +#emotion_and_culprit_choices_next_btn, #interrogation_next_btn, #interrogation_suspect_previous_btn { position: fixed; left: calc(100% - 6em); top: 1em; @@ -70,23 +111,13 @@ html { } .introduction_title { - color: var(--button-color); - font-family: "Spicy Rice", serif; - font-size: 5em; + color: var(--red-color); font-weight: bold; -} - -.introduction_title { - color: #BD1E1E; - font-family: "Spicy Rice", serif; - font-weight: bold; - font-size: 5em; margin: 0; text-align: left; } .introduction_text { - font-family: "Spicy Rice", serif; font-size: 2em; margin-bottom: 1em; margin-top: 1em; @@ -102,12 +133,9 @@ html { } .interrogation_title { - color: var(--button-color); - font-family: "Spicy Rice", sans-serif; + color: var(--red-color); font-size: 3em; font-weight: bold; - margin: 1em; - text-transform: uppercase; } .suspects { @@ -125,25 +153,6 @@ html { flex-direction: column; flex-wrap: nowrap; justify-content: center; - margin: 1em; -} - -.suspect_picture { - margin-bottom: 1em; - height: 15em; - width: 15em; -} - -.suspect_picture[alt] { - align-content: center; - align-items: center; - display: flex; - font-family: "Roboto Mono", sans-serif; - font-size: 1em; - flex-direction: column; - flex-wrap: wrap; - justify-content: center; - text-align: center; } .ask_button { @@ -152,6 +161,24 @@ html { text-transform: none; } +#interrogation_suspect_previous_btn { + margin-right: 1em; +} + +.anwser_title { + font-size: 2.5em; + margin: 0.25em; +} + +.suspect_answer { + font-size: 1.375em; + font-weight: bold; + margin-left: 0.25em; + margin-right: 0.25em; + margin-top: 1em; + margin-bottom: 1em; +} + /* Emotion and culprit choices */ .culprit_btn { align-items: center; @@ -178,186 +205,102 @@ html { } .suspect_emotion_chooser { - background-color: #5A5656; + background-color: var(--grey-color); border: none; border-radius: var(--button-and-dialog-border-radius); color: white; - font-family: "Roboto Mono", sans-serif; font-size: 1em; - margin: 1em; padding: 0.5em; } .emotion_and_culprit_choices_title { + color: var(--red-color); font-size: 2em; margin: 0.5em; text-align: center; - font-family: "Spicy Rice", sans-serif; - color: var(--button-color); } .question_button { - text-transform: none; + background-color: var(--grey-color); border-radius: 2em; - margin-top: 1em; - margin-bottom: 1em; - margin-right: 1em; - background-color: rgb(90, 86, 86); + text-transform: none; } .questions_list { + align-items: flex-end; display: flex; flex-direction: column; - align-items: flex-end; - margin-right: 2em; - margin-top: 3em; -} - -.questions_answer { - position: absolute; - bottom: 10%; - right: 60%; - /* Aligner le texte pour la version mobile */ - transform: translateX(-50%); -} - -#next_button { - background-color: transparent; - border: transparent; - bottom: 0; - position: absolute; - right: 50; -} - -.results_game { - grid-template-columns: 1fr; } +/* Results and scores */ .results_title { - color: #BD1E1E; - font-family: "Spicy Rice", serif; + color: var(--red-color); font-weight: bold; font-size: 4.5em; - margin: 0; - margin-left: 0.6em; - text-align: left; - margin-bottom: 0.3em; -} - -.reveal { - justify-content: left; -} - -.scores { - font-family: "Titan One", sans-serif; -} - -.summary { - font-family: "Titan One", sans-serif; text-align: center; - margin-left: 1.3; - display: flex; - flex-direction: column; - align-content: center; - align-items: center; - margin: 1em; -} - -.scores { - font-family: "Titan One", sans-serif; - display: flex; - flex-direction: column; - align-content: center; - align-items: center; - margin: 1em; } .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; } -@media (max-width: 500px) { - .reveal_and_scores { - display: flex; - flex-direction: column; - } -} - .reveal_culprit_title { - color: #B94444; - font-family: "Spicy Rice", serif; - font-weight: bold; + color: var(--red-color); font-size: 2em; - margin-left: 1.3em; -} - -.explain_culprit_reveal, .explain_suspect { - font-family: "Roboto Mono", sans-serif; + font-weight: bold; + text-align: center; } .score_title { - color:#b94444; - font-family: "Spicy Rice", serif; + color: var(--red-color); + font-size: 2em; + font-weight: bold; text-align: center; + text-transform: uppercase; } .reveal_score { - display: flex; align-items: center; + color: var(--red-color); + display: flex; + font-size: 2em; justify-content: center; - color:#BD1E1E; - font-size: 3em; - margin: 0.2em; -} - -.players_list { - margin-left: 5em; - margin-top: 1em; -} - -.player_names, .player_scores { - display: inline-block; } .summary_title { - font-family: "Spicy Rice", sans-serif; - text-align: center; - font-size: 4em; - color:#b94444; -} - -.suspect_title { - font-family: "Titan One", sans-serif; + color: var(--red-color); display: flex; + font-size: 4em; flex-direction: row; - display: inline-block; + text-align: center; } .suspects_list { + align-content: center; + align-items: center; display: flex; - justify-content: space-between; - margin-left: 1em; - margin-right: 1em; -} - -@media (max-width: 650px) { - .suspects_list { - display: flex; - flex-direction: column; - } -} - -.rtrn_lob_btn { - fill: #BD1E1E; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin: 1em; } #return_lobby_button { @@ -365,9 +308,50 @@ html { border: transparent; } -.summary_suspect{ +.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 { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; +} + +.player_name_and_score { + font-size: 1.5em; + font-weight: normal; + padding: 0.25em; +} + +.reveal_culprit { + align-content: center; + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: wrap; +}