DjalimSimaila/SAE-A2-TruthInquiry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Client] Refactor lobby game style

Browse Source 
- Order properties alphabetically
- Use colors variables from global style
- Merge some common properties between selectors into a common declaration
- Do some minor improvements
This commit is contained in:
AudricV 2023-02-16 10:08:06 +01:00
parent c0486c70f2
commit b5648ebf53
No known key found for this signature in database
GPG Key ID: DA92EC7905614198
1 changed files with 90 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
truthinquiry/static/css/game_ui_lobby.css
View File

@ -1,47 +1,73 @@
/* Global properties */ /* Global properties */
html { 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; 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 { .join_room_view, .room_view {
height: calc(100vh - var(--body-margin) * 2); 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 buttons */
.action_button { .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-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
text-transform: uppercase; text-transform: uppercase;
overflow: hidden;
transition: box-shadow 0.5s, transform 0.5s;
} }
.action_button:hover { .action_button:hover {
transform: translate(0.1em, 0.1em); 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 { .multi_player_mode_choice .action_button, .room_code_text .action_button {
@ -50,72 +76,54 @@ html {
} }
/* Room view major elements */ /* 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 */
.room_code { .room_code {
color: var(--button-background-color);
text-decoration: none; text-decoration: none;
} }
.room_code_text {
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.room_code_text_title { .room_code_text_title {
font-size: 2em; font-size: 2em;
margin: 0.25em; margin: 0.25em;
} }
#invite_friends_button { #invite_friends_button {
background-color: var(--game-grey);
border-radius: 0.5em;
font-size: 1em; font-size: 1em;
text-transform: none; text-transform: none;
background-color: #c2c0c0;
border-radius: 0.5em;
} }
#invite_friends_button:hover { #invite_friends_button:hover {
box-shadow: 10px 10px 0px 0px var(--game-black);
transform: translate(0.1em, 0.1em); transform: translate(0.1em, 0.1em);
box-shadow: 10px 10px 0px 0px black;
} }
/* Waiting for host */ /* Waiting for host */
.multi_player_mode_waiting_for_host { .multi_player_mode_waiting_for_host {
font-size: 2.5em; font-size: 2.5em;
max-width: 20em; max-width: 20em;
text-align: center;
} }
/* Multi-player mode choice */ /* 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 { .multi_player_mode_choice_title {
@ -123,54 +131,36 @@ html {
margin: 0.5em; 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 */
#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 { .rounds_count_title {
font-size: 1.375em; font-size: 1.375em;
margin: 0.5em; 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 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 { .player_names {
border: 0.25em white solid; border: 0.25em var(--game-white) solid;
border-radius: 0.75em; border-radius: 0.75em;
font-family: "Roboto Mono", sans-serif;
font-size: 1.25em; font-size: 1.25em;
max-height: 12em; max-height: 12em;
min-width: 25em; min-width: 25em;
@ -178,29 +168,17 @@ html {
padding: 0.25em; 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 */ /* Game join view */
.join_room_view {
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
#game_username { #game_username {
background-color: white; background-color: var(--game-white);
border: none;
border-radius: 0.375em; border-radius: 0.375em;
color: black; color: var(--game-black);
font-family: "Titan One", sans-serif;
font-size: 1.25em; font-size: 1.25em;
margin: 0.5em; margin: 0.5em;
padding: 0.5em; padding: 0.5em;
@ -213,8 +191,6 @@ html {
/* Game start failure */ /* Game start failure */
.game_start_failed { .game_start_failed {
color: var(--button-background-color);
font-family: "Roboto Mono", sans-serif;
font-weight: bold;
font-size: 1em; font-size: 1em;
font-weight: bold;
} }