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

simple chat css

Browse Source
This commit is contained in:
Djalim Simaila 2023-04-01 16:39:21 +02:00
parent 579d4ab0b9
commit fa554ef6e8
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
truthinquiry/static/css/game_ui_game.css
View File

@ -353,10 +353,11 @@ background-color: #000000d0;
/* chat */ /* chat */
/* Button used to open the chat form - fixed at the bottom of the page */ /* Button used to open the chat form - fixed at the bottom of the page */
.open-button { .open-button {
background-color: #555; background-color: #000000dd;
color: white; color: var(--game-dark-gold);
padding: 16px 20px; padding: 16px 20px;
border: none; border: var(--game-dark-gold) solid;
border-radius: 1em;
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
position: fixed; position: fixed;
@ -370,17 +371,20 @@ background-color: #000000d0;
display: none; display: none;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
color: #555; color: var(--game-dark-gold);
right: 15px; right: 15px;
border: 3px solid #f1f1f1;
z-index: 9; z-index: 9;
border: solid black 1px;
border-radius: 1em;
} }
/* Add styles to the form container */ /* Add styles to the form container */
.form-container { .form-container {
max-width: 300px; max-width: 300px;
padding: 10px; padding: 10px;
background-color: white; border: solid var(--game-dark-gold);
border-radius: 1em;
background-color: black;
} }
/* Full-width textarea */ /* Full-width textarea */
@ -395,17 +399,21 @@ background-color: #000000d0;
} }
/* When the textarea gets focus, do something */ /* When the textarea gets focus, do something */
.form-container textarea:focus { #chat_message_box{
background-color: #ddd; background-color: #505050;
outline: none; outline: none;
margin: 10px;
}
.message{
list-style-type: none
} }
/* Set a style for the submit/send button */ /* Set a style for the submit/send button */
.form-container .btn { .form-container .btn {
background-color: #04AA6D; background-color: black;
color: white; color: #04AA6D;
padding: 16px 20px; padding: 16px 20px;
border: none; border: #04AA6D solid;
border-radius: 1em;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
margin-bottom:10px; margin-bottom:10px;
@ -414,10 +422,12 @@ background-color: #000000d0;
/* Add a red background color to the cancel button */ /* Add a red background color to the cancel button */
.form-container .cancel { .form-container .cancel {
background-color: red; background-color: black;
color: red;
border-color: red;
} }
/* Add some hover effects to buttons */ /* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover { .form-container .btn:hover, .open-button:hover {
opacity: 1; opacity: 1;
} }

2
truthinquiry/templates/game.html
View File

@ -50,7 +50,7 @@
</ul> </ul>
</div> </div>
<label for="msg"><b>Message</b></label> <label for="msg"><b>Message</b></label>
<textarea id="chat_message_box" placeholder="Type message.." name="msg" required></textarea> <input type="text" id="chat_message_box" placeholder="Type message.." name="msg" required></textarea>
<button id="chat_button_send" class="btn">Send</button> <button id="chat_button_send" class="btn">Send</button>
<button id="close_chat_button" type="button" class="btn cancel">Close</button> <button id="close_chat_button" type="button" class="btn cancel">Close</button>