diff --git a/truthseeker/static/css/game_ui_lobby.css b/truthseeker/static/css/game_ui_lobby.css new file mode 100644 index 0000000..571f343 --- /dev/null +++ b/truthseeker/static/css/game_ui_lobby.css @@ -0,0 +1,207 @@ +/* Global properties */ +html { + background-color: black; + color: white; +} + +:root { + --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; +} + +.join_room_view, .room_view { + height: calc(100vh - var(--body-margin) * 2); +} + +/* 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; +} + +.multi_player_mode_choice .action_button, .room_code_text .action_button { + font-size: 1.5em; + min-width: 10em; +} + +/* Room view major elements */ +.room_title { + color: var(--button-background-color); + font-family: "Spicy Rice", sans-serif; + font-weight: bold; + font-size: 4em; + margin: 0.25em; +} + +.room_view_container { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +/* Room code */ +.room_code { + color: var(--button-background-color); +} + +.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 { + font-size: 1em; + text-transform: none; + background-color: #c2c0c0; + border-radius: 0.5em; +} + +#invite_friends_button:hover { + 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 { + padding: 1em; +} + +.multi_player_mode_choice { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + text-align: center; +} + +.multi_player_mode_choice_title { + font-size: 2em; + margin: 0.5em; +} + +.multi_player_mode_choice_number { + align-items: center; + display: flex; + flex-direction: row; + margin: 0.75em; +} + +/* 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; +} + +/* Players list */ +.players_title { + align-content: center; + align-items: center; + display: flex; + font-size: 3em; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + margin: 1em; +} + +.player_names { + border: 0.25em white solid; + border-radius: 0.75em; + max-height: 12em; + overflow-y: scroll; +} + +.player_name { + font-size: 1.5em; + margin-bottom: 0.5em; + margin-top: 0.5em; + 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; + border: none; + border-radius: 0.375em; + color: black; + font-family: "Titan One", sans-serif; + font-size: 1.25em; + margin: 0.5em; + padding: 0.5em; +} + +#join_game_button { + font-size: 1.25em; + margin: 1em; +} + +/* Game start failure */ +.game_start_failed { + color: var(--button-background-color); + font-family: "Roboto Mono", sans-serif; + font-weight: bold; + font-size: 1em; +}