ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mostly working

Browse Source
This commit is contained in:
Mashy
2019-05-17 23:48:37 +10:00
parent 0b026a2cdc
commit 90fd71ede7
4 changed files with 124 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/instance.css
+22 -21
View File
@@ -125,11 +125,11 @@
.cryp-list {
grid-area: cryps;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
display: flex;
flex: 1 1 auto;
}
.instance-cryp {
.instance-cryp, .instance-cryp-active {
display: grid;
grid-template-rows: min-content min-content min-content 250px min-content;
grid-template-areas:
@@ -152,49 +152,50 @@
margin-left: 0;
}
.instance-cryp .name {
.cryp-list .name {
grid-area: name;
margin-bottom: 0.5em;
}
.instance-cryp .avatar {
.cryp-list .avatar {
grid-area: avatar;
display: flex;
flex: 1 1 auto;
}
.instance-cryp img {
.cryp-list img {
justify-self: center;
grid-area: avatar;
min-width: 150px;
}
.instance-cryp .name {
.cryp-list .name {
text-align: center;
}
.instance-cryp .avatar figure {
.cryp-list .avatar figure {
margin: 0;
height: 80%;
text-align: center;
box-sizing: border-box;
}
.instance-cryp .avatar figcaption {
.cryp-list .avatar figcaption {
font-size: 90%;
}
.instance-cryp .skills {
.cryp-list .skills {
grid-area: skills;
display: flex;
border-width: 0px;
}
.instance-cryp .skills button {
.cryp-list .skills button {
flex: 1;
border-width: 0px;
}
/*button.action {
animation: action 1s infinite ease-in-out alternate;
}
@@ -208,7 +209,7 @@
}
}
*/
.instance-cryp .specs {
.cryp-list .specs {
margin-top: 1em;
grid-area: specs;
display: flex;
@@ -217,18 +218,18 @@
border-width: 0px;
}
.instance-cryp .specs figure {
.cryp-list .specs figure {
flex: 1;
border: 0;
align-items: center;
text-align: center;
}
.instance-cryp .specs figcaption {
.cryp-list .specs figcaption {
font-size: 75%;
}
.instance-cryp .stats {
.cryp-list .stats {
grid-area: stats;
display: grid;
grid-template-rows: 1fr 3fr;
@@ -239,11 +240,11 @@
border-width: 0px;
}
.instance-cryp .stats figcaption {
.cryp-list .stats figcaption {
font-size: 75%;
}
.instance-cryp .stats .icons {
.cryp-list .stats .icons {
grid-area: st;
display: flex;
flex-flow: row;
@@ -261,25 +262,25 @@
fill: none;
}
.instance-cryp .stat-icon {
.cryp-list .stat-icon {
width: 100%;
}
.instance-cryp .stats .damage-label {
.cryp-list .stats .damage-label {
grid-area: dl;
display: flex;
justify-content: center;
color: #666;
}
.instance-cryp .stats .speed-label {
.cryp-list .stats .speed-label {
grid-area: sl;
display: flex;
justify-content: center;
color: #666;
}
.instance-cryp .stats .life-label {
.cryp-list .stats .life-label {
grid-area: ll;
display: flex;
justify-content: center;
client/assets/styles/instance.mobile.css
+94 -27
View File
@@ -2,42 +2,17 @@
.instance {
display: grid;
grid-template-columns: 100%;
grid-template-rows: min-content min-content min-content min-content;
grid-template-rows: repeat(4, min-content);
grid-template-areas:
"top"
"controls"
"first"
"second"
}
/* Default view */
.instance .equip { display: none; }
.instance .info { display: none; }
.instance .cryp-list { display: none; }
#toggle-vbox-label {
text-align: center;
border: 2px solid #555;
}
#toggle-vbox-label:after{
content: "Cryps";
}
#toggle-vbox:checked ~ #toggle-vbox-label:after{
content: "Vbox";
}
#toggle-vbox:checked ~ .vbox { display: none; }
#toggle-vbox:checked ~ .cryp-list {
display: initial;
grid-area: second;
}
#toggle-vbox:checked ~ .equip {
display: initial;
grid-area: first;
}
.vbox {
grid-area: first;
display: grid;
@@ -56,6 +31,34 @@
.vbox-combiner {
margin-left: 0;
}
/* Toggled view (cryps)*/
#toggle-vbox-label {
text-align: center;
border: 2px solid #555;
}
#toggle-vbox-label:after{
content: "Cryps";
}
#toggle-vbox:checked ~ #toggle-vbox-label:after{
content: "Vbox";
}
#toggle-vbox:checked ~ .vbox { display: none; }
#toggle-vbox:checked ~ .equip {
grid-area: first;
display: initial;
}
#toggle-vbox:checked ~ .cryp-list {
grid-area: second;
display: flex;
justify-content: center;
flex-flow: row wrap;
flex: 1;
width: 100%;
}
#toggle-vbox { display: none; }
@@ -69,5 +72,69 @@
margin-right: 0.5em;
}
.cryp-list .skills {
flex-flow: row;
align-items: stretch;
}
.instance-cryp {
flex: 1;
display: grid;
grid-template-rows: min-content min-content;
grid-template-areas:
"name "
"avatar "
/*margin: 0 2em;*/
padding: 0.5em;
border: 2px solid #222;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-cryp img {
width: 35px;
}
.instance-cryp .skills {
display: none;
}
.instance-cryp .specs {
display: none;
}
.instance-cryp .stats {
display: none;
}
.instance-cryp-active {
flex: 1;
order: 3;
display: grid;
grid-template-rows: min-content min-content min-content min-content min-content;
grid-template-areas:
"name "
"skills "
"specs "
"avatar "
"stats ";
/*margin: 0 2em;*/
padding: 0.5em;
border: 2px solid #222;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-cryp-active img {
width: 55px;
}
/* Cryp Stuff */
}
client/assets/styles/styles.css
-4
View File
@@ -508,10 +508,6 @@ main .top {
svg {
height: 1em;
}
.instance-cryp .skills {
flex-flow: column;
}
}
/* Mobile Nav*/