mirror of
https://github.com/AlecM33/Werewolf.git
synced 2026-01-02 01:03:24 +01:00
webpack
This commit is contained in:
Alec
508
client/src/styles/GLOBAL.css
Normal file
508
client/src/styles/GLOBAL.css
Normal file
@@ -0,0 +1,508 @@
|
||||
canvas, caption, center, cite, code,
|
||||
dd, del, dfn, div, dl, dt, em, embed,
|
||||
fieldset, font, form, h1, h2, h3, h4,
|
||||
h5, h6, hr, i, iframe, img, ins, kbd,
|
||||
label, legend, li, menu, object, ol, p,
|
||||
pre, q, s, samp, small, span, strike,
|
||||
strong, sub, sup, table, tbody, td, tfoot,
|
||||
th, thead, tr, tt, u, ul, var {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'diavlo';
|
||||
src: url("../webfonts/Diavlo_LIGHT_II_37.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'signika-negative';
|
||||
src: url("../webfonts/SignikaNegative-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'signika-negative', sans-serif !important;
|
||||
background-color: #121314 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'diavlo', sans-serif;
|
||||
color: #ab2626;
|
||||
filter: drop-shadow(2px 2px 4px black);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: whitesmoke;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #d7d7d7;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
color: #d7d7d7;
|
||||
font-size: 14px;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#footer a img {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #f7f7f7;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#footer div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#footer > div, #footer > a {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
#footer div:nth-child(2) > a, #footer div:nth-child(2) > p {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #d7d7d7;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
border-radius: 3px;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button, input[type="submit"] {
|
||||
font-family: 'signika-negative', sans-serif !important;
|
||||
padding: 10px;
|
||||
background-color: #13762b;
|
||||
border-radius: 3px;
|
||||
color: whitesmoke;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color 0.3s ease-out;
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
button:active, input[type=submit]:active {
|
||||
border: 2px solid #21ba45;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button:hover, input[type="submit"]:hover, #game-link:hover {
|
||||
background-color: #326243;
|
||||
border: 2px solid #1c8a36;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-weight: 100;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||
0 2px 2px rgba(0,0,0,0.11),
|
||||
0 4px 4px rgba(0,0,0,0.11),
|
||||
0 8px 8px rgba(0,0,0,0.11),
|
||||
0 16px 16px rgba(0,0,0,0.11),
|
||||
0 32px 32px rgba(0,0,0,0.11);
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: fit-content;
|
||||
max-width: 80%;
|
||||
min-width: 15em;
|
||||
font-size: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
background-color: #333243;
|
||||
}
|
||||
|
||||
#navbar img {
|
||||
margin: 0 1em;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
color: #f7f7f7;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
}
|
||||
|
||||
#navbar a:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-row-container-left-align {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.animated-placeholder {
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: pulse-background;
|
||||
animation-timing-function: ease-in;
|
||||
animation-direction: alternate;
|
||||
background: rgb(238,238,238);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
opacity: 0.15;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.animated-placeholder-short {
|
||||
width: 100%;
|
||||
max-width: 15em;
|
||||
height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.animated-placeholder-long {
|
||||
width: 100%;
|
||||
max-width: 30em;
|
||||
height: 8em;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
|
||||
.animated-placeholder-invisible {
|
||||
background-color: transparent;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.placeholder-row {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.placeholder-row .animated-placeholder-short {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.good, .compact-card.good .card-role {
|
||||
color: #4b6bfa;
|
||||
}
|
||||
|
||||
.evil, .compact-card.evil .card-role {
|
||||
color: #e73333;
|
||||
}
|
||||
|
||||
@keyframes placeholder {
|
||||
0%{
|
||||
background-position: 50% 0
|
||||
}
|
||||
100%{
|
||||
background-position: -50% 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-background {
|
||||
from {
|
||||
background-color: rgb(120 120 120);
|
||||
} to {
|
||||
background-color: rgb(255 255 255);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fade-in-slide-down-then-exit {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
5% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
5% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 550px) {
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#step-1 div {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 551px) {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#step-1 div {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% + 100px);
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
|
||||
/* via https://loading.io/css/ */
|
||||
|
||||
.spinner-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spinner-container p {
|
||||
margin: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: -8em;
|
||||
font-size: 20px;
|
||||
z-index: 51;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
color: #d7d7d7;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.lds-spinner {
|
||||
margin: auto;
|
||||
position: fixed;
|
||||
top: -80px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 51;
|
||||
right: 0;
|
||||
height: fit-content;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
}
|
||||
.lds-spinner div {
|
||||
transform-origin: 40px 40px;
|
||||
animation: lds-spinner 1.2s linear infinite;
|
||||
}
|
||||
.lds-spinner div:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 37px;
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
border-radius: 20%;
|
||||
background: #d7d7d7;
|
||||
}
|
||||
.lds-spinner div:nth-child(1) {
|
||||
transform: rotate(0deg);
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
.lds-spinner div:nth-child(2) {
|
||||
transform: rotate(30deg);
|
||||
animation-delay: -1s;
|
||||
}
|
||||
.lds-spinner div:nth-child(3) {
|
||||
transform: rotate(60deg);
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
.lds-spinner div:nth-child(4) {
|
||||
transform: rotate(90deg);
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-spinner div:nth-child(5) {
|
||||
transform: rotate(120deg);
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
.lds-spinner div:nth-child(6) {
|
||||
transform: rotate(150deg);
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
.lds-spinner div:nth-child(7) {
|
||||
transform: rotate(180deg);
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.lds-spinner div:nth-child(8) {
|
||||
transform: rotate(210deg);
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.lds-spinner div:nth-child(9) {
|
||||
transform: rotate(240deg);
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
.lds-spinner div:nth-child(10) {
|
||||
transform: rotate(270deg);
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
.lds-spinner div:nth-child(11) {
|
||||
transform: rotate(300deg);
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
.lds-spinner div:nth-child(12) {
|
||||
transform: rotate(330deg);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.bmc-button span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.bmc-button {
|
||||
line-height: 35px !important;
|
||||
height:40px !important;
|
||||
text-decoration: none !important;
|
||||
display:inline-flex !important;
|
||||
align-items: center !important;
|
||||
color:#ffffff !important;
|
||||
background-color:#333243 !important;
|
||||
border-radius: 5px !important;
|
||||
border: 1px solid transparent !important;
|
||||
padding: 7px 15px 7px 10px !important;
|
||||
font-size: 15px !important;
|
||||
box-shadow: 0px 1px 1px rgba(190, 190, 190, 0.5) !important;
|
||||
-webkit-box-shadow: 0px 1px 2px 1px rgba(190, 190, 190, 0.5) !important;
|
||||
font-family: sitewide-sans-serif, sans-serif !important;
|
||||
-webkit-box-sizing: border-box !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.bmc-button:hover, .bmc-button:active, .bmc-button:focus {
|
||||
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
|
||||
text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
|
||||
opacity: 0.85 !important;color:#ffffff !important;
|
||||
}
|
||||
|
||||
|
||||
@keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
363
client/src/styles/create.css
Normal file
363
client/src/styles/create.css
Normal file
@@ -0,0 +1,363 @@
|
||||
.compact-card {
|
||||
border: 2px solid transparent;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 0.3em;
|
||||
background-color: #393a40;
|
||||
color: gray;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
max-width: 15em;
|
||||
min-width: 9em;
|
||||
display: flex;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.compact-card h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.compact-card .card-role {
|
||||
color: #bfb8b8;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 8em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.selected-card {
|
||||
border: 2px solid #c5c5c5;
|
||||
}
|
||||
|
||||
.card-role {
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.compact-card-right p {
|
||||
font-size: 40px;
|
||||
margin: 0 10px 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.compact-card-left p {
|
||||
font-size: 40px;
|
||||
margin: 0 0 0 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.compact-card-left, .compact-card-right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.compact-card .card-quantity {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.compact-card-header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#deck-container, #deck, #custom-roles-container {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#deck-container, #custom-roles-container {
|
||||
margin: 1em 0;
|
||||
background-color: #1f1f1f;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#step-3 {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #1f1f1f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#step-4 > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
width: 25em;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
#step-4 > div label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#deck {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
max-height: 20em;
|
||||
}
|
||||
|
||||
#moderation-self span {
|
||||
color: gray;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
background-color: transparent;
|
||||
color: #d7d7d7;
|
||||
border-radius: 3px;
|
||||
min-width: 10em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#game-form > div {
|
||||
background-color: #1f1f1f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
width: fit-content;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#game-form > div > label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#game-time {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #1f1f1f;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.step {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#game-time label, #game-time input {
|
||||
margin-right: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#game-time div {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
|
||||
color: whitesmoke;
|
||||
font-size: 20px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
min-width: 3em;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#add-card-to-deck-form {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#create-game {
|
||||
background-color: #1c8a36;
|
||||
color: whitesmoke;
|
||||
font-size: 30px;
|
||||
padding: 10px 50px;
|
||||
}
|
||||
|
||||
#create-game:hover {
|
||||
background-color: #326243;
|
||||
border: 2px solid #1c8a36;
|
||||
}
|
||||
|
||||
#deck-select {
|
||||
margin: 0.5em 1em 1.5em 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.creation-step {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
border: 2px solid whitesmoke;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.creation-step-filled {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
#creation-step-container {
|
||||
margin-top: 2em;
|
||||
width: 100%;
|
||||
min-height: 16em;
|
||||
}
|
||||
|
||||
#creation-step-container > div:nth-child(2) {
|
||||
animation: fade-in 0.5s ease-out;
|
||||
}
|
||||
|
||||
#step-title {
|
||||
margin: 0 auto 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#creation-step-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2em;
|
||||
position: relative;
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
#game-creation-container {
|
||||
width: 95%;
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
#tracker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 2em;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#creation-step-tracker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
#step-forward-button, #step-back-button, #create-game {
|
||||
font-family: sans-serif;
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#step-forward-button, #create-game {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
#step-back-button {
|
||||
left: 15%;
|
||||
background-color: #762323;
|
||||
}
|
||||
|
||||
#step-1 div {
|
||||
background-color: black;
|
||||
color: whitesmoke;
|
||||
padding: 1em;
|
||||
max-width: 20em;
|
||||
margin: 0.5em;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
#step-1 div.option-selected {
|
||||
border: 2px solid whitesmoke;
|
||||
background-color: #3a3c46;
|
||||
}
|
||||
|
||||
#step-1 div > strong {
|
||||
color: #00a718;
|
||||
}
|
||||
|
||||
#step-1 div:hover {
|
||||
border: 2px solid whitesmoke;
|
||||
}
|
||||
|
||||
.review-option {
|
||||
background-color: #1f1f1f;
|
||||
color: whitesmoke;
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
width: fit-content;
|
||||
border-radius: 3px;
|
||||
margin: 0.5em 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
} to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 550px) {
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
#step-1 div {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.creation-step {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
#step-forward-button, #step-back-button, #create-game {
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 551px) {
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#step-1 div {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
762
client/src/styles/game.css
Normal file
762
client/src/styles/game.css
Normal file
@@ -0,0 +1,762 @@
|
||||
.lobby-player, #moderator {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: black;
|
||||
color: whitesmoke;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 17px;
|
||||
width: fit-content;
|
||||
min-width: 15em;
|
||||
border: 2px solid transparent;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
#lobby-players {
|
||||
overflow-y: auto;
|
||||
max-height: 30em;
|
||||
overflow-x: hidden;
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#lobby-people-container label {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.lobby-player-client {
|
||||
border: 2px solid #21ba45;
|
||||
}
|
||||
|
||||
.lobby-player div:nth-child(2) {
|
||||
color: #21ba45;
|
||||
}
|
||||
|
||||
#moderator.moderator-client {
|
||||
border: 2px solid lightgray;
|
||||
}
|
||||
|
||||
#game-state-container {
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
width: 95%;
|
||||
margin: 1em auto 0 auto;
|
||||
}
|
||||
|
||||
#game-state-container h2 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
#lobby-header {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
#game-state-container > div:not(#transfer-mod-modal-background):not(#transfer-mod-modal){
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#game-content .placeholder-row:nth-child(1) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#footer.game-page-footer {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#footer.game-page-footer a {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#end-of-game-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#end-of-game-header button {
|
||||
margin: 0.5em;
|
||||
}
|
||||
.potential-moderator {
|
||||
display: flex;
|
||||
color: #d7d7d7;
|
||||
background-color: black;
|
||||
border: 2px solid transparent;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
justify-content: space-between;
|
||||
margin: 0.5em 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.potential-moderator:hover {
|
||||
border: 2px solid #d7d7d7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.potential-moderator:active {
|
||||
border: 2px solid #21ba45;
|
||||
transition: border 0.2s ease-out;
|
||||
}
|
||||
|
||||
#game-link {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
padding: 7px;
|
||||
border-radius: 3px;
|
||||
background-color: #121314;
|
||||
border: 2px solid #333243;
|
||||
color: whitesmoke;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.role-info-name {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.role-info-name h5:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
color: #21ba45;
|
||||
}
|
||||
|
||||
#role-info-button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#role-info-button img {
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#game-role-info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 1em 0;
|
||||
overflow-y: auto;
|
||||
max-height: 35em;
|
||||
}
|
||||
|
||||
#game-role-info-container > div {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#transfer-mod-modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: 35em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.potential-moderator {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#role-info-modal #modal-button-container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#game-role-info-container .role-info-name {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 20px;
|
||||
font-family: signika-negative, sans-serif;
|
||||
margin: 0.5em 0;
|
||||
background-color: #15191c;
|
||||
}
|
||||
|
||||
#role-info-modal h2 {
|
||||
color: #d7d7d7;
|
||||
font-family: diavlo, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#game-role-info-container p, #game-role-info-container h5 {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#game-role-info-container p {
|
||||
color: #d7d7d7;
|
||||
font-size: 14px;
|
||||
font-family: signika-negative, sans-serif;
|
||||
}
|
||||
|
||||
#game-role {
|
||||
position: relative;
|
||||
border: 5px solid transparent;
|
||||
background-color: #e7e7e7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
max-width: 17em;
|
||||
border-radius: 3px;
|
||||
height: 23em;
|
||||
margin: 0 auto 2em auto;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||
0 2px 2px rgba(0,0,0,0.11),
|
||||
0 4px 4px rgba(0,0,0,0.11),
|
||||
0 8px 8px rgba(0,0,0,0.11),
|
||||
0 16px 16px rgba(0,0,0,0.11),
|
||||
0 32px 32px rgba(0,0,0,0.11);
|
||||
/*perspective: 1000px;*/
|
||||
/*transform-style: preserve-3d;*/
|
||||
}
|
||||
|
||||
#game-role-back {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #171522;
|
||||
border: 5px solid #61606a;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
max-width: 17em;
|
||||
border-radius: 3px;
|
||||
height: 23em;
|
||||
margin: 0 auto 2em auto;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||
0 2px 2px rgba(0,0,0,0.11),
|
||||
0 4px 4px rgba(0,0,0,0.11),
|
||||
0 8px 8px rgba(0,0,0,0.11),
|
||||
0 16px 16px rgba(0,0,0,0.11),
|
||||
0 32px 32px rgba(0,0,0,0.11);
|
||||
/*perspective: 1000px;*/
|
||||
/*transform-style: preserve-3d;*/
|
||||
}
|
||||
|
||||
#game-role-back h4 {
|
||||
font-size: 24px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
|
||||
#game-role-back p {
|
||||
color: #c3c3c3;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#game-timer {
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
background-color: #262626;
|
||||
color: whitesmoke;
|
||||
border-radius: 3px;
|
||||
font-size: 35px;
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
|
||||
border: 1px solid #747474;
|
||||
}
|
||||
|
||||
#game-timer.low {
|
||||
color: #e71c0d;
|
||||
border: 1px solid #ca1b17;
|
||||
background-color: #361a1a;
|
||||
}
|
||||
|
||||
#role-name {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
width: 95%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#role-image {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
#role-description {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 15px;
|
||||
width: 78%;
|
||||
max-height: 6em;
|
||||
}
|
||||
|
||||
#game-link img {
|
||||
width: 20px;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
#game-title {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#client-container {
|
||||
max-width: 35em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#client {
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #333243;
|
||||
border-radius: 3px;
|
||||
min-width: 15em;
|
||||
}
|
||||
|
||||
#client-name {
|
||||
color: whitesmoke;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
font-size: 30px;
|
||||
margin: 0.25em 2em 0.25em 0;
|
||||
}
|
||||
|
||||
#client-user-type {
|
||||
color: #21ba45;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-size: 25px;
|
||||
background-color: black;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
label[for='moderator'] {
|
||||
font-family: 'diavlo', sans-serif;
|
||||
color: lightgray;
|
||||
filter: drop-shadow(2px 2px 4px black);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#start-game-prompt, #end-game-prompt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
border-radius: 3px;
|
||||
font-family: 'signika-negative', sans-serif;
|
||||
font-weight: 100;
|
||||
box-shadow: 0 -2px 6px 0 rgb(0 0 0 / 45%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* width: fit-content; */
|
||||
font-size: 20px;
|
||||
height: 85px;
|
||||
margin: 0 auto;
|
||||
animation: fade-in-slide-up 10s ease;
|
||||
animation-fill-mode: forwards;
|
||||
animation-direction: normal;
|
||||
width: 100%;
|
||||
background-color: #333243;
|
||||
}
|
||||
|
||||
#end-game-prompt {
|
||||
box-shadow: 0 -6px 40px black;
|
||||
}
|
||||
|
||||
#start-game-button, #end-game-button {
|
||||
font-family: 'signika-negative', sans-serif !important;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
color: whitesmoke;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color, border 0.3s ease-out;
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#start-game-button {
|
||||
background-color: #1c8a36;
|
||||
}
|
||||
|
||||
#end-game-button {
|
||||
background-color: #8a1c1c;
|
||||
}
|
||||
|
||||
#start-game-button:hover {
|
||||
background-color: #326243;
|
||||
border: 2px solid #1c8a36;
|
||||
}
|
||||
|
||||
#end-game-button:hover {
|
||||
background-color: #623232;
|
||||
border: 2px solid #8a1c1c;
|
||||
}
|
||||
|
||||
#play-pause {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#play-pause img {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#play-pause img:hover {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
|
||||
#play-pause img:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.paused {
|
||||
animation: pulse 0.75s linear infinite alternate;
|
||||
}
|
||||
|
||||
.paused-low {
|
||||
animation: pulse-low 0.75s linear infinite alternate;
|
||||
}
|
||||
|
||||
#game-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.timer-container-moderator {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.game-player {
|
||||
border-left: 3px solid #21ba45;
|
||||
display: flex;
|
||||
color: #d7d7d7;
|
||||
background-color: black;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
margin: 0.5em 0;
|
||||
position: relative;
|
||||
box-shadow: 2px 3px 6px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.game-player-name {
|
||||
position: relative;
|
||||
width: 10em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kill-player-button, .reveal-role-button {
|
||||
font-family: 'signika-negative', sans-serif !important;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
color: whitesmoke;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color, border 0.3s ease-out;
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
|
||||
margin: 5px 0 5px 25px;
|
||||
width: 117px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.placeholder-button {
|
||||
font-family: 'signika-negative', sans-serif !important;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
color: #767676;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border: 2px solid transparent;
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
|
||||
margin: 5px 0 5px 25px;
|
||||
width: 103px;
|
||||
}
|
||||
|
||||
#game-link:hover {
|
||||
background-color: #26282a;
|
||||
border: 2px solid #d7d7d7;
|
||||
}
|
||||
|
||||
.reveal-role-button {
|
||||
background-color: #3f5256;
|
||||
}
|
||||
|
||||
.reveal-role-button img {
|
||||
width: 18px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#game-player-list > .game-player.killed::after {
|
||||
content: '\01F480';
|
||||
font-size: 24px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.killed, .killed .game-player-role {
|
||||
/*color: gray !important;*/
|
||||
}
|
||||
|
||||
.game-player.killed {
|
||||
border-left: 3px solid #444444;
|
||||
}
|
||||
|
||||
.reveal-role-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.make-mod-button {
|
||||
background-color: #3f5256;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.good-players {
|
||||
background-color: #1c1a36;
|
||||
}
|
||||
|
||||
.evil-players {
|
||||
background-color: #361a1a;
|
||||
}
|
||||
|
||||
.kill-player-button {
|
||||
background-color: #9f4747;
|
||||
}
|
||||
|
||||
.killed-card {
|
||||
width: 55% !important;
|
||||
}
|
||||
|
||||
.game-player > div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#game-player-list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
max-height: 37em;
|
||||
}
|
||||
|
||||
#game-player-list > div {
|
||||
padding: 2px 10px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#game-parameters {
|
||||
color: #d7d7d7;
|
||||
font-size: 25px;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
#game-parameters > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#game-parameters img {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#players-alive-label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#transfer-mod-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#transfer-mod-form #modal-button-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#transfer-mod-modal #modal-button-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#change-name-modal-background {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#lobby-people-container , #game-people-container {
|
||||
background-color: #333243;
|
||||
padding: 10px 10px 0 10px;
|
||||
border-radius: 3px;
|
||||
min-height: 25em;
|
||||
min-width: 15em;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
#transfer-mod-modal-content {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#game-state-container.vertical-flex {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
#client-name {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#client-user-type, #game-parameters {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#game-state-container {
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#play-pause img {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.make-mod-button {
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.game-player-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#game-timer {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#players-alive-label {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#start-game-prompt, #end-game-prompt {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
#start-game-button, #end-game-button {
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#game-role, #game-role-back {
|
||||
height: 20em;
|
||||
max-width: 15em;
|
||||
}
|
||||
|
||||
#client-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#game-role-back p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#game-role-back h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
} to {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-low {
|
||||
from {
|
||||
color: rgba(231, 28, 13 , 0.1);
|
||||
} to {
|
||||
color: rgba(231, 28, 13, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-slide-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
5% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
91
client/src/styles/home.css
Normal file
91
client/src/styles/home.css
Normal file
@@ -0,0 +1,91 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 20px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
background-color: #1f1f1f;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a button {
|
||||
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
|
||||
}
|
||||
|
||||
#join-button {
|
||||
min-width: 6em;
|
||||
max-height: 3em;
|
||||
background-color: #1c8a36;
|
||||
color: whitesmoke;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#join-button:hover {
|
||||
background-color: #326243;
|
||||
border: 2px solid #1c8a36;
|
||||
}
|
||||
|
||||
#join-form div:nth-child(1) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
max-width: 23em;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
}
|
||||
|
||||
img[src='../images/logo_cropped.gif'] {
|
||||
max-width: 400px;
|
||||
width: 63vw;
|
||||
min-width: 250px;
|
||||
margin: 3em 0 1em 0;
|
||||
}
|
||||
|
||||
form > div {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#join-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#join-container > label {
|
||||
font-size: 35px;
|
||||
font-family: 'diavlo', sans-serif;
|
||||
color: #ab2626;
|
||||
filter: drop-shadow(2px 2px 4px black);
|
||||
}
|
||||
|
||||
label[for="room-code"], label[for="player-name"] {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
button {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 701px) {
|
||||
button {
|
||||
font-size: 5vw;
|
||||
}
|
||||
}
|
||||
51
client/src/styles/modal.css
Normal file
51
client/src/styles/modal.css
Normal file
@@ -0,0 +1,51 @@
|
||||
.modal {
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 85%;
|
||||
z-index: 100;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #23282b;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 25em;
|
||||
height: fit-content;
|
||||
font-family: sans-serif;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% + 100px);
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal > form > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.modal > form > div > label {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#close-modal-button {
|
||||
background-color: #762323;
|
||||
}
|
||||
|
||||
#modal-button-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
Reference in New Issue
Block a user