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 #175 from AlecM33/styling

Browse Source 
Styling, small fixes
This commit is contained in:
Alec
2023-08-18 17:48:28 -04:00
committed by GitHub
parent e6a9d61220 87d1560dd4
commit 21dc8c9b77
9 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/modules/game_creation/DeckStateManager.js
View File

@@ -254,6 +254,9 @@ export class DeckStateManager {
}
function populateRoleElementInfo (roleEl, sortedDeck, i) {
roleEl.classList.remove(ALIGNMENT.GOOD);
roleEl.classList.remove(ALIGNMENT.EVIL);
roleEl.classList.add(sortedDeck[i].team);
roleEl.querySelector('.role-name').innerHTML =
`<span class="role-quantity"></span>
<span class="name"></span>`;

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

@@ -359,7 +359,7 @@ input {
align-items: center;
padding: 8px 0;
width: 100%;
background-color: #16141e;
background-color: #0f0f10;
height: 45px;
z-index: 53000;
}
@@ -511,7 +511,7 @@ input {
padding-bottom: 2em;
width: 100%;
z-index: 51000;
background-color: #16141e;
background-color: #1e1e1e;
}
}
@@ -557,7 +557,7 @@ input {
overflow: hidden;
height: 20px;
border-radius: 5px;
opacity: 0.15;
opacity: 0.20;
margin: 0.5em 0;
}
@@ -815,7 +815,7 @@ input {
display:inline-flex !important;
align-items: center !important;
color:#ffffff !important;
background-color:#3b3a4a !important;
background-color:#4b4b4b !important;
border-radius: 5px !important;
border: 1px solid transparent !important;
padding: 7px 15px 7px 10px !important;

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

@@ -7,7 +7,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #16141e;
background-color: #1e1e1e;
align-items: center;
justify-content: center;
max-width: 25em;
@@ -23,7 +23,7 @@
width: 100%;
height: calc(100% + 100px);
background-color: rgba(0, 0, 0, 0.80);
z-index: 100000;
z-index: 100001;
cursor: pointer;
}

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

@@ -156,10 +156,10 @@
#custom-roles-container, #deck-status-container {
color: #d7d7d7;
margin: 1em 0.5em;
background-color: #16141e;
background-color: #1e1e1e;
padding: 10px;
border-radius: 5px;
border: 2px solid #3b3a4a;
border: 1px solid #4b4b4b;
position: relative;
}
@@ -173,7 +173,7 @@
#deck-count {
font-size: 30px;
background-color: #3b3a4a;
background-color: #4b4b4b;
width: fit-content;
padding: 0 5px;
border-radius: 5px;
@@ -230,9 +230,9 @@
}
#custom-role-actions {
background-color: #16141e;
background-color: #1e1e1e;
border-radius: 5px;
border: 2px solid #3b3a4a;
border: 2px solid #4b4b4b;
display: none;
color: #e7e7e7;
position: absolute;
@@ -244,7 +244,7 @@
}
#custom-role-actions div:nth-child(1) {
border-bottom: 2px solid #3b3a4a;
border-bottom: 2px solid #4b4b4b;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
@@ -258,7 +258,7 @@
display: flex;
width: 100%;
padding: 10px 0;
background-color: #16141e;
background-color: #1e1e1e;
border-radius: 5px;
text-align: center;
justify-content: center;
@@ -389,8 +389,8 @@ select {
display: flex;
flex-wrap: wrap;
border-radius: 5px;
background-color: #16141e;
border: 2px solid #3b3a4a;
background-color: #1e1e1e;
border: 1px solid #4b4b4b;
}
.step {
@@ -602,8 +602,8 @@ input[type="number"] {
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
background-color: #16141e;
border: 2px solid #3b3a4a;
background-color: #1e1e1e;
border: 1px solid #4b4b4b;
}
#step-forward-button:hover, #step-back-button:hover {
@@ -627,19 +627,19 @@ input[type="number"] {
}
#step-1 div {
background-color: #16141e;
background-color: #1e1e1e;
color: #e7e7e7;
padding: 1em;
max-width: 20em;
margin: 0.5em;
cursor: pointer;
border: 2px solid #3b3a4a;
border: 1px solid #4b4b4b;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}
#step-1 div.option-selected {
border: 2px solid #e7e7e7;
border: 1px solid #e7e7e7;
background-color: #3a3c46;
}
@@ -648,12 +648,12 @@ input[type="number"] {
}
#step-1 div:hover {
border: 2px solid #e7e7e7;
border: 1px solid #e7e7e7;
}
.review-option {
background-color: #191920;
border: 2px solid #3b3a4a;
border: 1px solid #4b4b4b;
color: #e7e7e7;
padding: 10px;
font-size: 18px;

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

@@ -44,7 +44,7 @@
#current-moderator {
border-radius: 5px;
color: #d7d7d7;
background-color: #16141e;
background-color: #1e1e1e;
padding: 0 10px;
width: 90%;
margin-bottom: 0.5em;
@@ -120,7 +120,7 @@
max-width: 16em;
border-radius: 5px;
justify-content: center;
background-color: #16141e;
background-color: #1e1e1e;
}
#timer-edit-prompt {
@@ -177,8 +177,8 @@
flex-wrap: wrap;
border-radius: 5px;
margin: 1em;
background-color: #16141e;
border: 2px solid #3b3a4a;
background-color: #1e1e1e;
border: 2px solid #4b4b4b;
}
#timer-parameters {
@@ -265,7 +265,7 @@ h1 {
}
#end-of-game-header h2 {
border: 1px solid #3b3a4a;
border: 1px solid #4b4b4b;
border-radius: 5px;
background-color: #1a1726;
padding: 7px;
@@ -300,7 +300,7 @@ h1 {
padding: 7px;
border-radius: 5px;
background-color: #121314;
border: 2px solid #3b3a4a;
border: 2px solid #4b4b4b;
color: #e7e7e7;
align-items: center;
display: flex;
@@ -467,7 +467,7 @@ h1 {
display: flex;
align-items: center;
justify-content: center;
background-color: #16141e;
background-color: #1e1e1e;
border: 4px solid #61606a;
position: relative;
flex-direction: column;
@@ -674,7 +674,7 @@ label[for='moderator'] {
height: 100px;
margin: 0 auto;
max-width: 100%;
background-color: #1b1a24;
background-color: #1e1e1e;
}
#game-control-prompt button, #start-game-prompt button, #leave-game-prompt button {

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

@@ -11,13 +11,18 @@ button#home-create-button {
padding: 20px;
}
#framed-phone-screenshot, #framed-phone-screenshot-2 {
#framed-phone-screenshot, #framed-phone-screenshot-2, .framed-phone-screenshot-container {
max-width: 250px;
width: 40vw;
min-width: 175px;
margin: 0;
border: 1px solid #464552;
border-radius: 21px;
aspect-ratio: 1522 / 3290;
}
.framed-phone-screenshot-container {
margin: 0 0 20px 0;
border: 1px solid #464552;
}
#about-container {
@@ -49,10 +54,6 @@ button#home-create-button {
margin: 0 15px;
}
#about-container img {
margin-bottom: 20px;
}
#homepage-logos {
display: flex;
align-items: center;
@@ -64,7 +65,7 @@ button#home-create-button {
justify-content: center;
align-items: center;
width: 100%;
background-color: #16141e;
background-color: #0f0f10;
}
form {
@@ -105,11 +106,12 @@ h3 {
font-family: 'signika-negative', sans-serif;
}
img[src='../images/new-logo.png'] {
img[src='../images/new-logo.png'], #new-logo-container {
max-width: 250px;
width: 25vw;
min-width: 180px;
margin: 1em 0 1em 0;
aspect-ratio: 500 / 641;
}
form > div {
@@ -143,7 +145,7 @@ form > div {
}
#room-code {
background-color: #16141e;
background-color: #1e1e1e;
}
label[for="room-code"], label[for="player-name"] {

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

@@ -3,7 +3,7 @@
transform-origin: center;
display: block;
z-index: 1 !important;
background-color: #16141e;
background-color: #1e1e1e;
}
#join-game-form .modal-button-container {

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

@@ -7,7 +7,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #16141e;
background-color: #1e1e1e;
align-items: center;
justify-content: center;
max-width: 25em;

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

@@ -25,7 +25,9 @@
<div id="mobile-menu-background-overlay"></div>
<div id="navbar"></div>
<div id="home-page-top-section">
<img alt="Werewolf App Logo" src="../images/new-logo.png"/>
<div id="new-logo-container">
<img alt="Werewolf App Logo" src="../images/new-logo.png"/>
</div>
<h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
<div id="create-join">
<a href="/create">
@@ -45,11 +47,15 @@
</div>
<div id="about-container">
<div>
<img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/>
<div class="framed-phone-screenshot-container">
<img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/>
</div>
<h2>Join a game and have a role dealt to your device.</h2>
</div>
<div>
<img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/>
<div class="framed-phone-screenshot-container">
<img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/>
</div>
<h2>Create your own game with default or custom roles.</h2>
</div>
</div>