Merge pull request #83 from ThomasRubini/css_refactor

This commit is contained in:
Thomas Rubini 2023-02-16 11:43:56 +01:00 committed by GitHub
commit e9d3781a30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 337 additions and 456 deletions

View File

@ -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;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: var(--button-and-dialog-border-radius);
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);
position: absolute;
background-color: var(--alert-dialog-background-color);
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;
}

View File

@ -1,15 +1,39 @@
:root {
--grey-color: #5A5656;
--red-color: #BD1E1E;
}
/* Common properties */
html {
background-color: black;
color: white;
background-color: var(--game-black);
color: var(--game-white);
}
.game_app {
margin: 0;
.action_button, .score_title {
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 {
font-family: "Titan One", sans-serif;
.emotion_and_culprit_choices_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .reveal_score, .score_title, .summary_title {
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 {
font-family: "Spicy Rice", serif;
.emotion_and_culprit_choices_title, .results_title, .reveal_culprit_title, .score_title, .summary, .summary_title, .suspect_picture[alt] {
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 {
border-color: black;
border-style: solid;
border-width: 0.125em;
background-color: var(--red-color);
border-radius: var(--button-and-dialog-border-radius);
.action_button, .next_btn {
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;
border: none;
cursor: pointer;
fill: var(--red-color);
fill: var(--game-red);
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;
color: black;
background-color: var(--game-white);
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;
}
.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;
background-color: var(--game-green);
}
.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 {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
.suspect_emotion_chooser {
background-color: var(--game-grey);
border-radius: var(--button-and-dialog-border-radius);
color: var(--game-white);
font-size: 1em;
padding: 0.5em;
}
/* 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 {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
.explain_suspect_emotion_title {
font-size: 1.75em;
margin: 0.5em;
}
.player_name_and_score {
@ -370,10 +247,39 @@ html {
padding: 0.25em;
}
.reveal_culprit {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
.results_title {
font-size: 4.5em;
}
.reveal_and_scores {
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;
}

View File

@ -1,40 +1,34 @@
/* Common properties */
html {
background-color: black;
}
body {
background-color: var(--game-black);
color: var(--game-white);
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 {

View File

@ -1,47 +1,73 @@
/* Global properties */
html {
background-color: black;
color: white;
background-color: var(--game-black);
color: var(--game-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 {
.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 {
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 {
color: var(--button-background-color);
font-family: "Spicy Rice", sans-serif;
font-weight: bold;
font-size: 4em;
margin: 0.25em;
.room_view_container {
justify-content: space-around;
}
.room_view_container {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
.room_title {
font-family: "Spicy Rice", sans-serif;
font-size: 4em;
font-weight: bold;
margin: 0.25em;
}
/* 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 {
padding: 1em;
.multi_player_challenge_mode_invalid_input {
font-size: 1em;
font-weight: bold;
margin: 0.5em;
}
.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_number {
margin: 0.75em;
}
.multi_player_mode_choice_title {
@ -123,54 +131,36 @@ html {
margin: 0.5em;
}
.multi_player_mode_choice_number {
align-items: center;
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;
.multi_player_mode_choices {
padding: 1em;
}
/* 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 {
align-content: center;
align-items: center;
display: flex;
font-size: 3em;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
margin: 1em;
.player_name {
color: var(--game-white);
font-size: 1.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.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 {
font-size: 1.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: center;
color: white;
.players_title {
align-content: center;
font-size: 3em;
margin: 1em;
}
/* 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;
background-color: var(--game-white);
border-radius: 0.375em;
color: black;
font-family: "Titan One", sans-serif;
color: var(--game-black);
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;
}

View File

@ -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;
flex-direction: column;
border-radius: 1.5em;
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;
align-items: center;
margin: 0.5em;
}
.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;
}
.game_mode_items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 0.5em;
}
.game_mode_choice_selector {
background-color: black;
border-color: white;
background-color: var(--game-black);
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 {
fill: white;
.theme_switcher_btn {
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;
}