bigtime renaming
This commit is contained in:
ntr
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
|
||||
.opponent .game-cryp {
|
||||
.opponent .game-construct {
|
||||
align-items: flex-start;
|
||||
grid-template-rows: min-content min-content min-content 2fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -47,12 +47,12 @@
|
||||
"avatar target";
|
||||
}
|
||||
|
||||
.opponent .game-cryp .name {
|
||||
.opponent .game-construct .name {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.game-cryp {
|
||||
.game-construct {
|
||||
display: grid;
|
||||
|
||||
/*justify-items: center;*/
|
||||
@@ -74,7 +74,7 @@
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.game-cryp .targeting {
|
||||
.game-construct .targeting {
|
||||
grid-area: target;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
@@ -84,36 +84,36 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-cryp .img {
|
||||
.game-construct .img {
|
||||
grid-area: avatar;
|
||||
}
|
||||
|
||||
.game-cryp .name {
|
||||
.game-construct .name {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25em;
|
||||
text-align: center;
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.game-cryp .stats {
|
||||
.game-construct .stats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.game-cryp figure {
|
||||
.game-construct figure {
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.game-cryp figcaption {
|
||||
.game-construct figcaption {
|
||||
white-space: nowrap;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.game-cryp figure {
|
||||
.game-construct figure {
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
}
|
||||
*/}
|
||||
|
||||
.game-cryp .skills {
|
||||
.game-construct .skills {
|
||||
grid-area: skills;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
@@ -131,13 +131,13 @@
|
||||
}
|
||||
|
||||
/*@media (max-width: 1000px) {
|
||||
.game-cryp .skills {
|
||||
.game-construct .skills {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.game-cryp .effects {
|
||||
.game-construct .effects {
|
||||
grid-area: effects;
|
||||
font-size: 1.5em;
|
||||
white-space: nowrap;
|
||||
@@ -153,7 +153,7 @@
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.game-cryp button {
|
||||
.game-construct button {
|
||||
color: #888;
|
||||
flex: 1 1 100%;
|
||||
padding: 0;
|
||||
@@ -161,35 +161,35 @@
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.game-cryp button.active {
|
||||
.game-construct button.active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-cryp button[disabled], .game-cryp button[disabled]:hover {
|
||||
.game-construct button[disabled], .game-construct button[disabled]:hover {
|
||||
color: #333333;
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
.game-cryp button:hover {
|
||||
.game-construct button:hover {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-cryp.ko {
|
||||
.game-construct.ko {
|
||||
animation: none;
|
||||
opacity: 0.35;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.game-cryp.ko button:hover {
|
||||
.game-construct.ko button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.game-cryp.unfocus {
|
||||
.game-construct.unfocus {
|
||||
opacity: 0.65;
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.game-cryp.unfocus.ko {
|
||||
.game-construct.unfocus.ko {
|
||||
filter: blur(5px) grayscale(100%);
|
||||
}
|
||||
|
||||
@@ -202,18 +202,18 @@
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
CRYP DAMAGE
|
||||
CONSTRUCT DAMAGE
|
||||
|
||||
.game-cryp.active-skill {
|
||||
.game-construct.active-skill {
|
||||
filter: drop-shadow(0 0 0.2em silver);
|
||||
|
||||
/*border-color: silver;*/
|
||||
}
|
||||
|
||||
.game-cryp.red-damage {
|
||||
.game-construct.red-damage {
|
||||
filter: drop-shadow(0 0 0.2em red);
|
||||
color: red;
|
||||
/*ensure cryp doesn't get opacity lowered because of being KO before the KO animation*/
|
||||
/*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
|
||||
opacity: 1;
|
||||
|
||||
/*border-color: red;*/
|
||||
@@ -232,7 +232,7 @@ CRYP DAMAGE
|
||||
/*border-top: 1px solid red;*/
|
||||
}
|
||||
|
||||
.game-cryp.blue-damage {
|
||||
.game-construct.blue-damage {
|
||||
filter: drop-shadow(0 0 0.2em blue);
|
||||
color: blue;
|
||||
opacity: 1;
|
||||
@@ -252,7 +252,7 @@ CRYP DAMAGE
|
||||
/*border-top: 1px solid blue;*/
|
||||
}
|
||||
|
||||
.game-cryp.green-damage {
|
||||
.game-construct.green-damage {
|
||||
filter: drop-shadow(0 0 0.2em green);
|
||||
color: green;
|
||||
opacity: 1;
|
||||
@@ -272,7 +272,7 @@ CRYP DAMAGE
|
||||
/*border-top: 1px solid green;*/
|
||||
}
|
||||
|
||||
.game-cryp.purple-damage {
|
||||
.game-construct.purple-damage {
|
||||
filter: drop-shadow(0 0 0.2em purple);
|
||||
color: purple;
|
||||
border-color: purple;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"top top info"
|
||||
"vbox vbox info"
|
||||
"equip equip info"
|
||||
"cryps cryps info";
|
||||
"constructs constructs info";
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.instance .scoreboard {
|
||||
grid-area: cryps;
|
||||
grid-area: constructs;
|
||||
}
|
||||
|
||||
.instance-ui-btn {
|
||||
@@ -60,8 +60,8 @@
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.instance .cryps {
|
||||
grid-area: cryps;
|
||||
.instance .constructs {
|
||||
grid-area: constructs;
|
||||
}
|
||||
|
||||
.instance .equip {
|
||||
@@ -148,16 +148,16 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CRYP LIST */
|
||||
/* CONSTRUCT LIST */
|
||||
|
||||
.cryp-list {
|
||||
grid-area: cryps;
|
||||
.construct-list {
|
||||
grid-area: constructs;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.instance-cryp, .instance-cryp-active {
|
||||
.instance-construct, .instance-construct-active {
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
@@ -177,17 +177,17 @@
|
||||
transition-timing-function: ease;
|
||||
*/}
|
||||
|
||||
.instance-cryp:first-child, .instance-cryp-active:first-child {
|
||||
.instance-construct:first-child, .instance-construct-active:first-child {
|
||||
margin-left: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.cryp-list .name {
|
||||
.construct-list .name {
|
||||
grid-area: name;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.cryp-list .avatar {
|
||||
.construct-list .avatar {
|
||||
grid-area: avatar;
|
||||
object-fit: contain;
|
||||
background-size: contain;
|
||||
@@ -196,28 +196,28 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cryp-list .name {
|
||||
.construct-list .name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cryp-list .avatar figure {
|
||||
.construct-list .avatar figure {
|
||||
margin: 0;
|
||||
height: 80%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cryp-list .avatar figcaption {
|
||||
.construct-list .avatar figcaption {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.cryp-list .skills {
|
||||
.construct-list .skills {
|
||||
grid-area: skills;
|
||||
display: flex;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.cryp-list .skills button {
|
||||
.construct-list .skills button {
|
||||
flex: 1;
|
||||
border-width: 0px;
|
||||
}
|
||||
@@ -236,7 +236,7 @@
|
||||
}
|
||||
}
|
||||
*/
|
||||
.cryp-list .specs {
|
||||
.construct-list .specs {
|
||||
margin-top: 1em;
|
||||
grid-area: specs;
|
||||
display: flex;
|
||||
@@ -245,18 +245,18 @@
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.cryp-list .specs figure {
|
||||
.construct-list .specs figure {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cryp-list .specs figcaption {
|
||||
.construct-list .specs figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.cryp-list .stats {
|
||||
.construct-list .stats {
|
||||
grid-area: stats;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 3fr;
|
||||
@@ -267,11 +267,11 @@
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.cryp-list .stats figcaption {
|
||||
.construct-list .stats figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.cryp-list .stats .icons {
|
||||
.construct-list .stats .icons {
|
||||
grid-area: st;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
@@ -289,25 +289,25 @@
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cryp-list .stat-icon {
|
||||
.construct-list .stat-icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cryp-list .stats .damage-label {
|
||||
.construct-list .stats .damage-label {
|
||||
grid-area: dl;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cryp-list .stats .speed-label {
|
||||
.construct-list .stats .speed-label {
|
||||
grid-area: sl;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cryp-list .stats .life-label {
|
||||
.construct-list .stats .life-label {
|
||||
grid-area: ll;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
"top"
|
||||
"controls"
|
||||
"vbox"
|
||||
"cryps"
|
||||
"constructs"
|
||||
}
|
||||
/* Default view */
|
||||
.instance .equip { display: none; }
|
||||
.instance .info { display: none; }
|
||||
.instance .cryp-list { display: none; }
|
||||
.instance .construct-list { display: none; }
|
||||
.vbox {
|
||||
grid-area: vbox;
|
||||
display: grid;
|
||||
@@ -31,13 +31,13 @@
|
||||
.vbox-combiner {
|
||||
margin-left: 0;
|
||||
}
|
||||
/* Toggled view (cryps)*/
|
||||
/* Toggled view (constructs)*/
|
||||
#toggle-vbox-label {
|
||||
text-align: center;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
#toggle-vbox-label:after{
|
||||
content: "Cryps";
|
||||
content: "Constructs";
|
||||
}
|
||||
|
||||
#toggle-vbox:checked ~ #toggle-vbox-label:after{
|
||||
@@ -54,8 +54,8 @@
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#toggle-vbox:checked ~ .cryp-list {
|
||||
grid-area: cryps;
|
||||
#toggle-vbox:checked ~ .construct-list {
|
||||
grid-area: constructs;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
|
||||
@@ -75,12 +75,12 @@
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.cryp-list .skills {
|
||||
.construct-list .skills {
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.instance-cryp {
|
||||
.instance-construct {
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr;
|
||||
@@ -95,20 +95,20 @@
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.instance-cryp .skills {
|
||||
.instance-construct .skills {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.instance-cryp .specs {
|
||||
.instance-construct .specs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.instance-cryp .stats {
|
||||
.instance-construct .stats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.instance-cryp-active {
|
||||
.instance-construct-active {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / 3;
|
||||
display: grid;
|
||||
@@ -129,11 +129,11 @@
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.instance-cryp-active img {
|
||||
.instance-construct-active img {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
|
||||
/* Cryp Stuff */
|
||||
/* Construct Stuff */
|
||||
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
GLOBAL
|
||||
*/
|
||||
|
||||
html, body, #cryps {
|
||||
html, body, #constructs {
|
||||
/*width: 100%;*/
|
||||
margin: 0;
|
||||
|
||||
@@ -61,7 +61,7 @@ figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#cryps {
|
||||
#constructs {
|
||||
padding: 0 2em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr;
|
||||
@@ -277,13 +277,13 @@ button[disabled] {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
#cryps input, #cryps select {
|
||||
#constructs input, #constructs select {
|
||||
border-color: #444;
|
||||
background-color: #333;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#cryps input:focus {
|
||||
#constructs input:focus {
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
@@ -349,7 +349,7 @@ header {
|
||||
MENU
|
||||
*/
|
||||
|
||||
.menu-cryps {
|
||||
.menu-constructs {
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content;
|
||||
|
||||
@@ -358,14 +358,14 @@ header {
|
||||
"list";
|
||||
}
|
||||
|
||||
.menu-cryps .list {
|
||||
.menu-constructs .list {
|
||||
grid-area: list;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.menu-cryp-ctr {
|
||||
.menu-construct-ctr {
|
||||
/*flex: 0 0 30%;*/
|
||||
|
||||
display: flex;
|
||||
@@ -374,7 +374,7 @@ header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spawn-btn .menu-cryp {
|
||||
.spawn-btn .menu-construct {
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
display: flex;
|
||||
@@ -399,7 +399,7 @@ header {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.menu-cryp {
|
||||
.menu-construct {
|
||||
height: 100%;
|
||||
margin: 0.5em;
|
||||
box-sizing: border-box;
|
||||
@@ -512,7 +512,7 @@ main .top {
|
||||
}
|
||||
|
||||
@media (max-height: 900px), (max-width: 1500px) {
|
||||
#cryps {
|
||||
#constructs {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@media (max-height: 800px), (max-width: 1000px) {
|
||||
#cryps {
|
||||
#constructs {
|
||||
font-size: 8pt;
|
||||
padding: 0;
|
||||
grid-template-columns: min-content 1fr;
|
||||
|
||||
Reference in New Issue
Block a user