419 lines
7.3 KiB
CSS
419 lines
7.3 KiB
CSS
/* GAME */
|
|
|
|
.game {
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content 1fr 1.5fr;
|
|
grid-template-areas:
|
|
"ready"
|
|
"timer"
|
|
"opponent"
|
|
"player";
|
|
}
|
|
|
|
.team {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
|
|
/* stops overflow */
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.player {
|
|
grid-area: player;
|
|
}
|
|
|
|
.opponent {
|
|
grid-area: opponent;
|
|
}
|
|
|
|
.opponent .combat-text {
|
|
left: 40%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
.opponent .game-construct {
|
|
align-items: flex-start;
|
|
grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"stats ."
|
|
"name ."
|
|
"effects ."
|
|
"avatar target";
|
|
}
|
|
|
|
.opponent .game-construct .name {
|
|
margin-bottom: 0;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.opponent .game-construct .img {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.game-construct {
|
|
display: grid;
|
|
|
|
/*justify-items: center;*/
|
|
justify-items: start;
|
|
/*align-items: flex-end;*/
|
|
|
|
grid-template-rows: minmax(min-content, 2fr) min-content min-content min-content min-content;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"skills ."
|
|
"avatar target"
|
|
"effects ."
|
|
"name ."
|
|
"stats .";
|
|
|
|
transition-property: all;
|
|
transition-duration: 0.25s;
|
|
transition-delay: 0;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.game-construct .targeting {
|
|
grid-area: target;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.game-construct .img {
|
|
grid-area: avatar;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
|
|
.game-construct .name {
|
|
width: 100%;
|
|
margin-bottom: 0.25em;
|
|
text-align: center;
|
|
grid-area: name;
|
|
}
|
|
|
|
.game-construct .stats {
|
|
grid-area: stats;
|
|
display: flex;
|
|
flex-flow: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.game-construct .stats div {
|
|
padding: 0 0.5em;
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.game-construct .stats .value {
|
|
display: none;
|
|
}
|
|
|
|
.game-construct figcaption {
|
|
white-space: nowrap;
|
|
font-size: 100%;
|
|
}
|
|
|
|
@media (max-width: 1500px) {
|
|
.game-construct figure {
|
|
padding: 0 0.25em;
|
|
}
|
|
|
|
/* .game .stat-icon {
|
|
height: 1.5em;
|
|
stroke-width: 3px;
|
|
}
|
|
*/}
|
|
|
|
.game-construct .skills {
|
|
grid-area: skills;
|
|
display: flex;
|
|
flex-flow: column-reverse;
|
|
justify-self: center;
|
|
}
|
|
|
|
/*@media (max-width: 1000px) {
|
|
.game-construct .skills {
|
|
flex-flow: column;
|
|
}
|
|
}
|
|
*/
|
|
|
|
.game-construct .effects {
|
|
grid-area: effects;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 125%;
|
|
}
|
|
|
|
.game-btn {
|
|
flex: 0 0 25%;
|
|
}
|
|
|
|
.game-btn:first-child {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.game-construct button {
|
|
color: #888;
|
|
flex: 1 1 100%;
|
|
padding: 0;
|
|
margin: 0 0.5em;
|
|
border-width: 0px;
|
|
}
|
|
|
|
.game-construct button.active {
|
|
color: whitesmoke;
|
|
}
|
|
|
|
.game-construct button[disabled], .game-construct button[disabled]:hover {
|
|
color: #333333;
|
|
text-decoration: line-through
|
|
}
|
|
|
|
.game-construct button:hover {
|
|
color: whitesmoke;
|
|
}
|
|
|
|
.game-construct.ko {
|
|
animation: none;
|
|
opacity: 0.35;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.game-construct.ko button:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.game-construct.unfocus {
|
|
opacity: 0.65;
|
|
filter: blur(5px);
|
|
}
|
|
|
|
.game-construct.unfocus.ko {
|
|
filter: blur(5px) grayscale(100%);
|
|
}
|
|
|
|
.combat-text {
|
|
fill: whitesmoke;
|
|
font-size: 2em;
|
|
font-family: 'Jura';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
CONSTRUCT DAMAGE
|
|
|
|
.game-construct.active-skill {
|
|
filter: drop-shadow(0 0 0.2em silver);
|
|
|
|
/*border-color: silver;*/
|
|
}
|
|
|
|
.game-construct.red-damage {
|
|
filter: drop-shadow(0 0 0.2em red);
|
|
color: red;
|
|
/*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
|
|
opacity: 1;
|
|
|
|
/*border-color: red;*/
|
|
}
|
|
|
|
.red-damage button {
|
|
/*border: 1px solid red;*/
|
|
color: red;
|
|
}
|
|
|
|
.red-damage text {
|
|
fill: red;
|
|
}
|
|
|
|
.red-damage .stats {
|
|
/*border-top: 1px solid red;*/
|
|
}
|
|
|
|
.game-construct.blue-damage {
|
|
filter: drop-shadow(0 0 0.2em blue);
|
|
color: blue;
|
|
opacity: 1;
|
|
/*border-color: blue;*/
|
|
}
|
|
|
|
.blue-damage button {
|
|
/*border: 1px solid blue;*/
|
|
color: blue;
|
|
}
|
|
|
|
.blue-damage text {
|
|
fill: blue;
|
|
}
|
|
|
|
.blue-damage .stats {
|
|
/*border-top: 1px solid blue;*/
|
|
}
|
|
|
|
.game-construct.green-damage {
|
|
filter: drop-shadow(0 0 0.2em green);
|
|
color: green;
|
|
opacity: 1;
|
|
/*border-color: green;*/
|
|
}
|
|
|
|
.green-damage button {
|
|
/*border: 1px solid green;*/
|
|
color: green;
|
|
}
|
|
|
|
.green-damage text {
|
|
fill: green;
|
|
}
|
|
|
|
.green-damage .stats {
|
|
/*border-top: 1px solid green;*/
|
|
}
|
|
|
|
.game-construct.purple-damage {
|
|
filter: drop-shadow(0 0 0.2em purple);
|
|
color: purple;
|
|
border-color: purple;
|
|
}
|
|
|
|
.purple-damage button {
|
|
border: 1px solid purple;
|
|
color: purple;
|
|
}
|
|
|
|
.purple-damage text {
|
|
fill: purple;
|
|
}
|
|
|
|
.purple-damage .stats {
|
|
border-top: 1px solid purple;
|
|
}
|
|
|
|
.game .img {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
/*@keyframes rotate {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(50deg);
|
|
}
|
|
}
|
|
*/
|
|
.resolving .skills button {
|
|
opacity: 0;
|
|
}
|
|
|
|
/*
|
|
COMBAT ANIMATIONS
|
|
*/
|
|
|
|
/* ----------------------------------------------
|
|
* Generated by Animista on 2019-5-21 11:38:30
|
|
* w: http://animista.net, t: @cssanimista
|
|
* ---------------------------------------------- */
|
|
|
|
|
|
/*.attack-cast {
|
|
-webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
|
animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
|
}
|
|
|
|
@-webkit-keyframes attack-cast {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-5em);
|
|
transform: translateY(-5em);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes attack-cast {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-5em);
|
|
transform: translateY(-5em);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.attack-hit {
|
|
-webkit-animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
}
|
|
|
|
@-webkit-keyframes attack-hit {
|
|
0% {
|
|
-webkit-transform: translateY(-5em) translateX(5em);
|
|
transform: translateY(-5em) translateX(5em);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0) translateX(0);
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes attack-hit {
|
|
0% {
|
|
-webkit-transform: translateY(-5em) translateX(5em);
|
|
transform: translateY(-5em) translateX(5em);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0) translateX(0);
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
@media (max-height: 800px), (max-width: 1000px) {
|
|
.game .stats div {
|
|
padding: 0;
|
|
}
|
|
|
|
.game .stats .max {
|
|
display: none;
|
|
}
|
|
|
|
.game .stats .value {
|
|
display: flex;
|
|
}
|
|
|
|
.game .stats svg {
|
|
height: 1em;
|
|
}
|
|
|
|
.game .effects {
|
|
font-size: 100%;
|
|
}
|
|
}
|