wip getting client prep for changes
This commit is contained in:
Mashy
@@ -5,7 +5,7 @@
|
||||
.instance {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-rows: 7fr 12fr;
|
||||
|
||||
grid-template-areas:
|
||||
"vbox"
|
||||
@@ -31,13 +31,13 @@
|
||||
.instance-construct {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"name "
|
||||
"skills "
|
||||
"specs "
|
||||
"avatar "
|
||||
"stats ";
|
||||
"name name "
|
||||
"skills skills"
|
||||
"stats avatar"
|
||||
"defStats defStats";
|
||||
|
||||
/*padding: 0.5em;*/
|
||||
border: 0.1em solid #222;
|
||||
@@ -78,7 +78,6 @@
|
||||
z-index: 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
|
||||
button {
|
||||
@@ -89,58 +88,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
.specs {
|
||||
grid-area: specs;
|
||||
padding: 0 0.5em;
|
||||
margin-bottom: 0.75em;
|
||||
z-index: 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0 0.5em;
|
||||
|
||||
button {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
// font-size: 75%;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
.offStats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
border-width: 0px;
|
||||
text-align: center;
|
||||
|
||||
figcaption {
|
||||
// font-size: 75%;
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
// give speed some space
|
||||
div:nth-child(4n) {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
margin: 0.5em 0.75em;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.defStats {
|
||||
grid-area: defStats;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
margin: 0.5em 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
|
||||
|
||||
+30
-185
@@ -2,11 +2,11 @@
|
||||
align-content: space-between;
|
||||
grid-area: vbox;
|
||||
display: grid;
|
||||
grid-template-rows: 3fr minmax(min-content, 2fr);
|
||||
grid-template-columns: 1fr 4fr 6fr minmax(min-content, 2fr);;
|
||||
grid-template-rows: 1fr min-content;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-areas:
|
||||
"store-hdr store info-combiner combos"
|
||||
"stash-hdr stash info-combiner combos";
|
||||
"store-hdr info-combiner"
|
||||
"store store";
|
||||
margin-bottom: 1em;
|
||||
|
||||
// immediate children
|
||||
@@ -48,53 +48,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.stash {
|
||||
grid-area: stash;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
|
||||
align-items: center;
|
||||
border: 0.15em solid @gray;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.stash-hdr {
|
||||
grid-area: stash-hdr;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
text-align: center;
|
||||
border: 0.15em solid @gray;
|
||||
border-right: 0;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.15em;
|
||||
border-width: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.vbox-hdr {
|
||||
grid-area: vbox-hdr;
|
||||
margin-bottom: 1em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.vbox-colours {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.vbox-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 0.5em 1em;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -115,58 +77,6 @@
|
||||
border-width: 0.1em;
|
||||
};
|
||||
}
|
||||
|
||||
.Refunding {
|
||||
button:not([disabled]) {
|
||||
&, &:hover, &:active {
|
||||
background: @red;
|
||||
color: black;
|
||||
border: 0.1em solid black;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
.white {
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: 3.5em;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
// text-transform: none;
|
||||
&.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background: @silver;
|
||||
// overwrite the classes on white svg elements
|
||||
svg {
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// figures don't scale well
|
||||
figure {
|
||||
svg {
|
||||
height: 1.5em;
|
||||
stroke-width: 0.5em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.info-combiner {
|
||||
grid-area: info-combiner;
|
||||
display: grid;
|
||||
@@ -202,111 +112,46 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.combiner {
|
||||
grid-area: combiner;
|
||||
margin: 1em 0.5em;
|
||||
width: 50%;
|
||||
line-height: 1.3;
|
||||
font-size: 1.25em;
|
||||
letter-spacing: 0.1em;
|
||||
border: 0.1em solid @gray-exists;
|
||||
&:hover {
|
||||
border: 0.1em solid @gray-hover;
|
||||
}
|
||||
}
|
||||
// align-self: flex-end;
|
||||
}
|
||||
|
||||
.combos {
|
||||
display: grid;
|
||||
grid-area: combos;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
grid-template-rows: min-content min-content;
|
||||
width: 15.5em;
|
||||
grid-template-areas:
|
||||
"comboHeader"
|
||||
"comboList";
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
|
||||
button {
|
||||
height: 5em;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
// text-transform: none;
|
||||
&.empty {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
&.fade {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: inline;
|
||||
height: 0.5em;
|
||||
&.highlight {
|
||||
background: @silver;
|
||||
// overwrite the classes on white svg elements
|
||||
svg {
|
||||
margin-right: 0.5em;
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// figures don't scale well
|
||||
figure {
|
||||
svg {
|
||||
height: 1.5em;
|
||||
stroke-width: 0.5em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.combo-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combo-list {
|
||||
display: grid;
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
width: 15.5em;
|
||||
|
||||
.table-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"ingr";
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
background-color: @gray;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-top: 0.1em solid #222;
|
||||
border-bottom: 0.1em solid #222;
|
||||
flex: 1;
|
||||
grid-area: item;
|
||||
font-weight: bold;
|
||||
div {
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
border-left: 0.1em solid #222;
|
||||
border-right: 0.1em solid #222;
|
||||
height: 1.75em;
|
||||
width: 7.5em;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0.1em solid #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user