group colours together in table, fix the vertical spacing issue
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(min-content, 1fr);
|
||||
grid-template-rows: minmax(min-content, 0.75fr) 1fr;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
grid-template-areas:
|
||||
"vbox info"
|
||||
@@ -37,7 +37,7 @@
|
||||
grid-area: info;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-rows: 12em min-content;
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"combos";
|
||||
@@ -50,16 +50,20 @@
|
||||
.combos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-content: center;
|
||||
|
||||
.table-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-bottom: 2px solid #222;
|
||||
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"ingr";
|
||||
|
||||
.item {
|
||||
border-top: 2px solid #222;
|
||||
border-bottom: 2px solid #222;
|
||||
flex: 1;
|
||||
grid-area: item;
|
||||
@@ -68,15 +72,14 @@
|
||||
|
||||
div {
|
||||
border-right: 2px solid #222;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:first-child {
|
||||
div {
|
||||
border-right: 0;
|
||||
border-left: 2px solid #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -101,29 +104,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.instance .combos {
|
||||
margin: 0 0 1em 1em;
|
||||
|
||||
table {
|
||||
tr {
|
||||
svg {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.table-button {
|
||||
padding:5px;
|
||||
cursor: pointer;
|
||||
animation: border-co 0.75s ease-in-out 0s infinite alternate;
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
background-color: @gray-hover;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.instance .info figcaption {
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
|
||||
Reference in New Issue
Block a user