Merge pull request #83 from ThomasRubini/css_refactor
This commit is contained in:
commit
e9d3781a30
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user