Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #179 from AlecM33/color-consistency

Browse Source 
more consistent colors, change global color for evil alignment
This commit is contained in:
Alec
2023-09-10 12:16:34 -04:00
committed by GitHub
parent 95f214824a 43a7205046
commit df56da16c7
9 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -2,7 +2,7 @@ export const HTMLFragments = {
LOBBY: LOBBY:
`<div id='lobby-header'> `<div id='lobby-header'>
<div> <div>
<label for='game-link'>Share Link</label> <label for='game-link'>Share this Room:</label>
<div tabindex='0' id='game-link'></div> <div tabindex='0' id='game-link'></div>
<div id='game-code'></div> <div id='game-code'></div>
</div> </div>

20
client/src/styles/GLOBAL.css
View File

@@ -45,7 +45,7 @@ body {
h1 { h1 {
font-family: 'signika-negative', sans-serif; font-family: 'signika-negative', sans-serif;
color: #b1afcd; color: #c9c9c9;
filter: drop-shadow(2px 2px 4px black); filter: drop-shadow(2px 2px 4px black);
margin: 0.5em 0; margin: 0.5em 0;
} }
@@ -245,13 +245,13 @@ button {
} }
.cancel { .cancel {
background-color: #7a1a1a !important; background-color: #832b2b !important;
border: 3px solid transparent !important; border: 3px solid transparent !important;
} }
.cancel:hover { .cancel:hover {
background-color: #623232 !important; background-color: #832b2b8a !important;
border: 3px solid #7a1a1a !important; border: 3px solid #832b2b !important;
} }
.submitted { .submitted {
@@ -290,12 +290,12 @@ button {
font-family: signika-negative, sans-serif; font-family: signika-negative, sans-serif;
color: #d7d7d7; color: #d7d7d7;
font-size: 20px; font-size: 20px;
margin: 0.5em;
} }
#game-parameters > div { #game-parameters > div {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 25px;
} }
#game-parameters img { #game-parameters img {
@@ -317,7 +317,7 @@ button {
#how-to-use-container h1 { #how-to-use-container h1 {
color: #21ba45; color: #21ba45;
font-family: signika-negative, sans-serif; font-family: signika-negative, sans-serif;
background-color: #1e1b26; background-color: #252525;
width: fit-content; width: fit-content;
padding: 0 5px; padding: 0 5px;
border-radius: 5px; border-radius: 5px;
@@ -375,10 +375,10 @@ input {
} }
#how-to-use-container h3 { #how-to-use-container h3 {
color: #b1afcd; color: #c9c9c9;
font-weight: bold; font-weight: bold;
font-family: signika-negative, sans-serif; font-family: signika-negative, sans-serif;
background-color: #1e1b26; background-color: #252525;
width: fit-content; width: fit-content;
padding: 0 5px; padding: 0 5px;
border-radius: 5px; border-radius: 5px;
@@ -601,11 +601,11 @@ input {
} }
.evil-players, #deck-evil { .evil-players, #deck-evil {
border: 2px solid #e7333363; border: 2px solid rgba(231, 51, 51, 0.39);
} }
.evil, .compact-card.evil .card-role { .evil, .compact-card.evil .card-role {
color: #dd2929 !important; color: #e75555 !important;
font-weight: bold; font-weight: bold;
} }

13
client/src/styles/create.css
View File

@@ -15,8 +15,8 @@
.role-category-button { .role-category-button {
background-color: transparent; background-color: transparent;
color: #b1afcd; color: #c9c9c9;
border: 1px solid #b1afcd; border: 1px solid #c9c9c9;
border-radius: 25px; border-radius: 25px;
font-size: 16px; font-size: 16px;
padding: 5px 10px; padding: 5px 10px;
@@ -27,7 +27,7 @@
.role-category-button-selected { .role-category-button-selected {
color: black; color: black;
background-color: #b1afcd; background-color: #c9c9c9;
} }
#role-category-buttons { #role-category-buttons {
@@ -102,8 +102,8 @@
} }
.template-option { .template-option {
background-color: #000000; background-color: #5555555c;
border: 1px solid #4b4b4b; border: 1px solid #55555599;
color: #d7d7d7; color: #d7d7d7;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -130,7 +130,6 @@
.template-option:hover, .template-option:active { .template-option:hover, .template-option:active {
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
background-color: #33343c;
cursor: pointer; cursor: pointer;
} }
@@ -651,7 +650,7 @@ input[type="number"] {
#step-1 div.option-selected { #step-1 div.option-selected {
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
background-color: #3a3c46; background-color: #494949;
} }
#step-1 div > strong { #step-1 div > strong {

46
client/src/styles/game.css
View File

@@ -52,8 +52,8 @@
.potential-moderator { .potential-moderator {
margin: 0.5em auto; margin: 0.5em auto;
border: 2px solid #46455299; border: 2px solid #55555599;
background: #4645525c; background: #5555555c;
} }
#transfer-mod-modal h2 { #transfer-mod-modal h2 {
@@ -73,7 +73,7 @@
} }
#spectator-count { #spectator-count {
color: #b1afcd; color: #c9c9c9;
text-decoration: underline; text-decoration: underline;
font-size: 17px; font-size: 17px;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
@@ -265,9 +265,7 @@ h1 {
} }
#end-of-game-header h2 { #end-of-game-header h2 {
border: 1px solid #4b4b4b;
border-radius: 5px; border-radius: 5px;
background-color: #232328;
padding: 7px; padding: 7px;
margin: 0.5em; margin: 0.5em;
} }
@@ -352,8 +350,8 @@ h1 {
#game-role-info-container > div { #game-role-info-container > div {
width: 95%; width: 95%;
border: 1px solid #46455299; border: 1px solid #55555599;
background: #4645525c; background: #5555555c;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 5px; margin-bottom: 5px;
@@ -379,8 +377,8 @@ h1 {
} }
.player-option { .player-option {
background-color: #4645525c; background-color: #5555555c;
border: 2px solid #46455299; border: 2px solid #55555599;
color: #d7d7d7; color: #d7d7d7;
display: flex; display: flex;
font-family: 'signika-negative', sans-serif !important; font-family: 'signika-negative', sans-serif !important;
@@ -544,6 +542,10 @@ h1 {
overflow: hidden; overflow: hidden;
} }
#game-role #role-name.evil {
color: #e15656 !important;
}
#role-image { #role-image {
user-select: none; user-select: none;
-ms-user-select: none; -ms-user-select: none;
@@ -582,10 +584,8 @@ h1 {
margin: 0.5em auto 0 auto; margin: 0.5em auto 0 auto;
font-family: 'signika-negative', sans-serif; font-family: 'signika-negative', sans-serif;
color: #d7d7d7; color: #d7d7d7;
font-size: 25px; font-size: 30px;
filter: drop-shadow(2px 2px 4px black); filter: drop-shadow(2px 2px 4px black);
border: 1px solid #46455299;
background: #4645525c;
padding: 2px 10px; padding: 2px 10px;
border-radius: 5px; border-radius: 5px;
} }
@@ -628,8 +628,8 @@ h1 {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-radius: 5px; border-radius: 5px;
border: 1px solid #46455299; border: 1px solid #55555599;
background: #4645525c; background: #5555555c;
} }
#client-name { #client-name {
@@ -732,7 +732,7 @@ label[for='moderator'] {
} }
#end-game-button, #leave-game-button { #end-game-button, #leave-game-button {
background-color: #8a1c1c; background-color: #832b2b;
} }
#start-game-button:hover { #start-game-button:hover {
@@ -741,8 +741,8 @@ label[for='moderator'] {
} }
#end-game-button:hover, #leave-game-button:hover { #end-game-button:hover, #leave-game-button:hover {
background-color: #623232; background-color: #832b2b8a;
border: 3px solid #8a1c1c; border: 3px solid #832b2b;
} }
#play-pause { #play-pause {
@@ -797,8 +797,8 @@ label[for='moderator'] {
margin-bottom: 1em; margin-bottom: 1em;
padding: 0.5em; padding: 0.5em;
border-radius: 5px; border-radius: 5px;
border: 1px solid #46455299; border: 1px solid #55555599;
background: #4645525c; background: #5555555c;
} }
canvas { canvas {
@@ -854,7 +854,7 @@ canvas {
} }
.kill-player-button:hover, .reveal-role-button:hover { .kill-player-button:hover, .reveal-role-button:hover {
border: 3px solid #b1afcd; border: 3px solid #c9c9c9;
} }
#game-players-container { #game-players-container {
@@ -942,8 +942,6 @@ canvas {
} }
#game-parameters { #game-parameters {
border: 1px solid #46455299;
background: #4645525c;
border-radius: 5px; border-radius: 5px;
padding: 5px 20px; padding: 5px 20px;
} }
@@ -1004,8 +1002,8 @@ canvas {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
min-height: 25em; min-height: 25em;
border: 1px solid #46455299; border: 1px solid #55555599;
background: #4645525c; background: #5555555c;
max-width: 35em; max-width: 35em;
min-width: 19em; min-width: 19em;
margin-top: 1em; margin-top: 1em;

4
client/src/styles/hamburgers.css
View File

@@ -28,7 +28,7 @@
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { .hamburger.is-active .hamburger-inner::after {
background-color: #b1afcd; } background-color: #c9c9c9; }
.hamburger-box { .hamburger-box {
width: 40px; width: 40px;
@@ -43,7 +43,7 @@
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px; width: 40px;
height: 4px; height: 4px;
background-color: #b1afcd; background-color: #c9c9c9;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
transition-property: transform; transition-property: transform;

4
client/src/styles/home.css
View File

@@ -142,8 +142,8 @@ form > div {
#join-container { #join-container {
max-width: 90%; max-width: 90%;
border: 1px solid #46455299; border: 1px solid #55555599;
background: #4645525c; background: #5555555c;
padding: 0.5em; padding: 0.5em;
border-radius: 5px; border-radius: 5px;
margin: 20px margin: 20px

4
client/src/styles/join.css
View File

@@ -1,5 +1,5 @@
#join-game-modal { #join-game-modal {
border-left: 5px solid #b1afcd; border-left: 5px solid #c9c9c9;
transform-origin: center; transform-origin: center;
display: block; display: block;
z-index: 1 !important; z-index: 1 !important;
@@ -22,7 +22,7 @@
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background-color: #4645525c; background-color: #5555555c;
} }
.modal-button-container > div > label { .modal-button-container > div > label {

11
client/src/styles/modal.css
View File

@@ -58,7 +58,8 @@
#custom-role-info-modal-image { #custom-role-info-modal-image {
margin: 0 auto; margin: 0 auto;
width: 200px; width: 200px;
background-color: #4645525c; background-color: #5555555c;
border: 1px solid #55555599;
border-radius: 5px; border-radius: 5px;
} }
@@ -81,12 +82,12 @@
#custom-role-info-modal-description { #custom-role-info-modal-description {
border-radius: 5px; border-radius: 5px;
background-color: #4645525c; background-color: #5555555c;
max-height: 10em; max-height: 10em;
overflow: auto; overflow: auto;
padding: 5px; padding: 5px;
margin-bottom: 2em; margin-bottom: 2em;
border: 1px solid #46455299; border: 1px solid #55555599;
} }
#player-options-modal { #player-options-modal {
@@ -108,8 +109,8 @@
#custom-role-info-modal-alignment { #custom-role-info-modal-alignment {
border-radius: 5px; border-radius: 5px;
background-color: #4645525c; background-color: #5555555c;
border: 1px solid #46455299; border: 1px solid #55555599;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;

2
client/src/views/home.html
View File

@@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<footer id="footer"> <footer id="footer">
<a href="https://www.buymeacoffee.com/alecm33"><img alt="Buy Me a Coffee" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=333243&font_colour=ffffff&font_family=Lato&outline_colour=b1afcd&coffee_colour=b1afcd" /></a> <a href="https://www.buymeacoffee.com/alecm33"><img alt="Buy Me a Coffee" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=252525&font_colour=d7d7d7&font_family=Lato&outline_colour=d7d7d7&coffee_colour=d7d7d7" /></a>
<div> <div>
<a aria-label="view the project on Github" href="https://github.com/AlecM33/Werewolf"><img alt="Github" src='/images/GitHub-Mark-Light-120px-plus.png'/></a> <a aria-label="view the project on Github" href="https://github.com/AlecM33/Werewolf"><img alt="Github" src='/images/GitHub-Mark-Light-120px-plus.png'/></a>
<a aria-label="email the creator with questions" href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top"><img alt="email" src='/images/email.svg'/></a> <a aria-label="email the creator with questions" href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top"><img alt="email" src='/images/email.svg'/></a>