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

Button fade animation on homepage, slide animation for other pages, fixed bug in landing page logo width

Browse Source
This commit is contained in:
Maier
2019-09-16 16:32:02 -04:00
parent 1067361a7c
commit d79d829bce
1 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/styles.css
View File

@@ -51,6 +51,15 @@
.app-title img {
width: 100%;
}
#card-select-header, #game-start {
align-items: center;
justify-content: center;
}
#card-select {
justify-content: center;
}
}
@media(min-width: 750.01px) {
@@ -152,18 +161,19 @@ html, body {
@keyframes slide-fade {
from {
opacity: 0;
margin-right: 0.5em;
left: -50px;
}
to {
opacity: 1;
margin-right: 0;
left: 0px;
}
}
#app-content {
text-align: center;
margin: 0 auto;
position: relative;
}
.app-title .app-header {
@@ -179,25 +189,6 @@ html, body {
line-height: 0.95;
}
.app-title h1:nth-child(1) {
margin: 0;
animation: slide-fade 0.7s ease-in-out;
animation-fill-mode: backwards;
animation-direction: normal;
}
.app-title h1:nth-child(2) {
margin: 0 0 0 1.5em;
animation: slide-fade 0.7s ease-in-out;
animation-delay: 0.4s;
animation-fill-mode: backwards;
animation-direction: normal;
}
.app-title .title-question-mark {
color: #171469;
}
#footer {
position: absolute;
bottom: 0;
@@ -387,7 +378,7 @@ button {
box-shadow: none !important;
cursor: pointer;
background-color: rgba(23, 20, 105, 0.15);
animation: press-down 0.1s;
animation: press-down 0.2s;
animation-fill-mode: forwards;
animation-direction: normal;
}
@@ -404,6 +395,23 @@ button {
justify-content: center;
}
#main-buttons a:nth-child(1) {
animation: fadein 0.3s ease-in;
animation-fill-mode: backwards;
}
#main-buttons a:nth-child(2) {
animation: fadein 0.3s ease-in;
animation-fill-mode: backwards;
animation-delay: 0.1s;
}
#main-buttons a:nth-child(3) {
animation: fadein 0.3s ease-in;
animation-fill-mode: backwards;
animation-delay: 0.2s;
}
#main-buttons button {
width: 100%;
padding: 1.2em;
@@ -434,7 +442,7 @@ button {
width: 50%;
padding: 0.8em;
height: 4em;
max-width: 15em;
width: 12em;
}
#game-start a button {
@@ -448,18 +456,18 @@ button {
}
#game-start a {
width: 50%;
margin-right: 0.3em;
max-width: 12em;
}
#game-start button {
margin-left: 0.3em;
width: 12em;
}
#game-start a button {
margin-right: 0.3em;
margin-left: 0;
width: 12em;
}
#card-select-header button:nth-child(1) {
@@ -503,7 +511,10 @@ button {
}
#create-game-container, #lobby-container, #join-game-container, #game-container, #launch, #message-box {
animation: fadein 0.8s ease-in;
position: absolute;
left: 0;
top: 0;
animation: slide-fade 0.5s;
}
a {