Merge branch 'account' into develop
This commit is contained in:
ntr
@@ -0,0 +1,55 @@
|
||||
@import 'colours.less';
|
||||
|
||||
.account {
|
||||
margin-top: 2em;
|
||||
grid-area: bottom;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 0 1em;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
// height: 3em;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 75%;
|
||||
height: 3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.list {
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
|
||||
figure {
|
||||
font-size: 125%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stripe-btn {
|
||||
background: @yellow;
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
border-width: 0;
|
||||
|
||||
&:active, &:focus, &:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid @yellow;
|
||||
color: @yellow;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
#mnml.acp {
|
||||
user-select: text;
|
||||
-moz-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
|
||||
.bottom {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
@blue: #3050f8;
|
||||
@white: #f5f5f5; // whitesmoke
|
||||
@purple: #9355b5; // 6lack - that far cover
|
||||
@yellow: #ffa100;
|
||||
|
||||
@black: black;
|
||||
@gray: #222;
|
||||
@@ -30,3 +31,33 @@ svg {
|
||||
stroke: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
color: @green;
|
||||
stroke: @green;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: @red;
|
||||
stroke: @red;
|
||||
}
|
||||
|
||||
.red-fill {
|
||||
fill: @red;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: @blue;
|
||||
stroke: @blue;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #333;
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: @white;
|
||||
stroke: @white;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
aside {
|
||||
grid-area: ctrl;
|
||||
display: grid;
|
||||
|
||||
grid-template-areas:
|
||||
"timer controls"
|
||||
"timer controls"
|
||||
"timer controls";
|
||||
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 0.5em 0;
|
||||
|
||||
padding: 1em;
|
||||
padding: 1em 1em 1em 0;
|
||||
|
||||
// fix chrome being inconsistent
|
||||
table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: right;
|
||||
@@ -28,6 +40,30 @@ aside {
|
||||
border-color: forestgreen;
|
||||
}
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
grid-area: timer;
|
||||
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
width: 0.25em;
|
||||
max-width: 0.25em;
|
||||
|
||||
margin: 0 1em 0 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.timer {
|
||||
background: whitesmoke;
|
||||
transition-property: all;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
}
|
||||
|
||||
.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
footer {
|
||||
display: none;
|
||||
flex-flow: row wrap;
|
||||
grid-area: footer;
|
||||
margin: 0;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: #222;
|
||||
font-size: 1.5em;
|
||||
padding: 0.25em;
|
||||
|
||||
&[disabled] {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
background: #222;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
.ready {
|
||||
background: forestgreen;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: 0.25em;
|
||||
max-height: 0.25em;
|
||||
|
||||
border: none;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.timer {
|
||||
background: whitesmoke;
|
||||
transition-property: all;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-btn, #instance-nav {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
@import 'colours.less';
|
||||
/* GAME */
|
||||
|
||||
.game {
|
||||
@@ -322,15 +323,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*@keyframes rotate {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(50deg);
|
||||
}
|
||||
}
|
||||
*/
|
||||
.resolving .skills button {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -338,80 +330,9 @@
|
||||
.skill-animation {
|
||||
opacity: 0;
|
||||
stroke-width: 5px;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
/*
|
||||
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-width: 1000px) {
|
||||
.game {
|
||||
grid-template-areas:
|
||||
|
||||
@@ -426,6 +426,12 @@
|
||||
margin-top: 1em;
|
||||
grid-area: playername;
|
||||
}
|
||||
|
||||
.team {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Nav*/
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
@import 'colours.less';
|
||||
|
||||
.menu {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: minmax(min-content, 2fr) 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"top"
|
||||
"bottom";
|
||||
|
||||
.top {
|
||||
grid-area: top;
|
||||
padding: 0 0 0.5em 2em;
|
||||
border-bottom: 0.1em solid #222;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
grid-area: bottom;
|
||||
}
|
||||
|
||||
.team {
|
||||
display: grid;
|
||||
grid-area: top;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
|
||||
max-height: 100%;
|
||||
|
||||
.team-select:not(:nth-child(3n)) {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.construct {
|
||||
flex: 1 1 33%;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid black;
|
||||
transition-property: border;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
|
||||
button:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inventory {
|
||||
margin-top: 2em;
|
||||
grid-area: bottom;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.list {
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 1em;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
figure {
|
||||
font-size: 125%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
nav {
|
||||
grid-area: nav;
|
||||
padding-left: 2em;
|
||||
margin-right: 2em;
|
||||
max-height: 100%;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
h2:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1em 0;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
button {
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
color: #888;
|
||||
flex: 1 1 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
button[disabled], button[disabled]:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: whitesmoke;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button:focus, button:active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account-header {
|
||||
letter-spacing: 0.05em;
|
||||
flex: 1;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.account-info svg {
|
||||
margin: 0.5em 0 0 1em;
|
||||
height: 1em;
|
||||
background-color: black;
|
||||
stroke: whitesmoke;
|
||||
}
|
||||
|
||||
.ping-path {
|
||||
fill: none;
|
||||
stroke-width: 4px;
|
||||
stroke-dasharray: 121, 242;
|
||||
animation: saw 2s infinite linear;
|
||||
|
||||
transition-property: stroke-color;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.ping-text {
|
||||
margin-left: 1em;
|
||||
min-width: 3em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes saw {
|
||||
0% {
|
||||
stroke-dashoffset: 363;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
@import 'colours.less';
|
||||
|
||||
/*
|
||||
GLOBAL
|
||||
*/
|
||||
|
||||
html, body, #mnml {
|
||||
/*width: 100%;*/
|
||||
margin: 0;
|
||||
|
||||
background-color: black;
|
||||
@@ -48,6 +43,9 @@ html {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -66,6 +64,7 @@ h4 {
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #222;
|
||||
margin: 1.5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -85,70 +84,11 @@ figure {
|
||||
"nav main ctrl";
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: nav;
|
||||
padding-left: 2em;
|
||||
margin-right: 2em;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
nav h2:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
nav hr {
|
||||
margin: 1em 0;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
nav button {
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
color: #888;
|
||||
flex: 1 1 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
nav button.active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
nav button[disabled], nav button[disabled]:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav button:hover {
|
||||
color: whitesmoke;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav button:focus, nav button:active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1em;
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
tr.right:focus, tr.right:hover {
|
||||
box-shadow: inset -0.5em 0 0 0 whitesmoke;
|
||||
}
|
||||
|
||||
tr {
|
||||
transition-property: color, background;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
button, input {
|
||||
font-family: 'Jura';
|
||||
color: whitesmoke;
|
||||
@@ -166,22 +106,34 @@ button, input {
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: whitesmoke;
|
||||
border-color: @gray-hover;
|
||||
}
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
border-color: @gray-hover;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
/*colour necesary to bash skellington*/
|
||||
color: @gray-focus;
|
||||
border-color: @gray-focus;
|
||||
&:focus {
|
||||
/*colour necesary to bash skellington*/
|
||||
color: @gray-focus;
|
||||
border-color: @gray-focus;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: whitesmoke;
|
||||
font-size: 150%;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
border-color: @gray-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
/*colour necesary to bash skellington*/
|
||||
color: @gray-focus;
|
||||
border-color: @gray-focus;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -191,19 +143,6 @@ svg {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.skill-animation {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.team .avatar {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
@@ -246,64 +185,19 @@ button[disabled] {
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
/*
|
||||
COLOURS
|
||||
*/
|
||||
|
||||
.green {
|
||||
color: #1FF01F;
|
||||
stroke: #1FF01F;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #a52a2a;
|
||||
stroke: #a52a2a;
|
||||
}
|
||||
|
||||
.red-fill {
|
||||
fill: #a52a2a;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #3050f8;
|
||||
stroke: #3050f8;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: #FFD123;
|
||||
stroke: #FFD123;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #A25AC1;
|
||||
stroke: #A25AC1;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
color: #6AD1BF;
|
||||
stroke: #6AD1BF;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #333;
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: whitesmoke;
|
||||
stroke: whitesmoke;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
LOGIN
|
||||
*/
|
||||
|
||||
.login {
|
||||
width: 25%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-bottom: 2em;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
#mnml input, #mnml select {
|
||||
@@ -316,242 +210,6 @@ button[disabled] {
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
/*
|
||||
account
|
||||
*/
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
grid-area: hd;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.account {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.account-status {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account-header {
|
||||
letter-spacing: 0.05em;
|
||||
flex: 1;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.account-status svg {
|
||||
margin: 0.5em 0 0 1em;
|
||||
height: 1em;
|
||||
background-color: black;
|
||||
stroke: whitesmoke;
|
||||
}
|
||||
|
||||
.ping-path {
|
||||
fill: none;
|
||||
stroke-width: 4px;
|
||||
stroke-dasharray: 121, 242;
|
||||
animation: saw 2s infinite linear;
|
||||
|
||||
transition-property: stroke-color;
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.ping-text {
|
||||
margin-left: 1em;
|
||||
min-width: 3em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes saw {
|
||||
0% {
|
||||
stroke-dashoffset: 363;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
TEAM
|
||||
*/
|
||||
|
||||
.team {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.menu-construct {
|
||||
margin: 0.5em;
|
||||
flex: 1 1 auto;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid black;
|
||||
transition-property: border;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
|
||||
button:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn-btn.menu-construct {
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spawn-btn.menu-construct.selected {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.spawn-btn.menu-construct:hover {
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.spawn-btn input {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.spawn-btn button {
|
||||
flex: 1 1 100%;
|
||||
margin: 0.5em 1em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.spawn-btn input[disabled], .spawn-btn button[disabled] {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.play {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: minmax(min-content, 2fr) 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"team"
|
||||
"inventory";
|
||||
|
||||
.team {
|
||||
grid-area: team;
|
||||
|
||||
/* poor man's <hr>*/
|
||||
padding: 0.5em 2em 0 0;
|
||||
border-bottom: 0.1em solid #444;
|
||||
|
||||
}
|
||||
|
||||
.menu-construct {
|
||||
flex: 1 0 33%;
|
||||
}
|
||||
|
||||
.inventory {
|
||||
margin: 2em 2em 0 0;
|
||||
grid-area: inventory;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.list {
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 1em;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
figure {
|
||||
font-size: 125%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-instance-btn {
|
||||
flex: 1 1 100%;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.stripe-btn {
|
||||
width: 100%;
|
||||
padding: 0 0.5em;
|
||||
margin: 0.25em 0;
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.stripe-btn:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
border: 1px solid #222;
|
||||
float: right;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.create-form {
|
||||
grid-area: create;
|
||||
flex: 1;
|
||||
|
||||
justify-self: flex-end;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.create-form button {
|
||||
flex: 1;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.create-form button:first-child {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.create-form button:hover, .create-form button:focus {
|
||||
border-color: whitesmoke;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure.gray {
|
||||
color: #333;
|
||||
stroke-color: #333;
|
||||
@@ -562,56 +220,9 @@ figure.gray {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
main .top button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: 0.25em;
|
||||
max-height: 0.25em;
|
||||
|
||||
border: none;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.timer {
|
||||
background: whitesmoke;
|
||||
transition-property: all;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
flex-flow: row wrap;
|
||||
grid-area: footer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer button {
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: #222;
|
||||
font-size: 1.5em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
footer button:disabled {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
footer button:not(:last-child) {
|
||||
background: #222;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
footer button .ready {
|
||||
background: forestgreen;
|
||||
color: black;
|
||||
.credits {
|
||||
color: @yellow;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@@ -624,10 +235,6 @@ footer button .ready {
|
||||
}
|
||||
}
|
||||
|
||||
#nav-btn, #instance-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
main {
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.login {
|
||||
|
||||
Reference in New Issue
Block a user