Fix visual bugs in GridRep

* Fixes the mainhand height not always being full height when the container was being responsively resized
* Adjusts the color of empty grid rectangles for dark and light mode and when being hovered over
This commit is contained in:
Justin Edmund 2023-07-02 02:27:34 -07:00
parent 83d7d6df15
commit 33d0d9f6e4

View file

@ -18,13 +18,12 @@
text-decoration: none; text-decoration: none;
} }
h2, .weaponGrid {
.Grid {
cursor: pointer; cursor: pointer;
}
.Grid .Weapon { .weapon {
box-shadow: inset 0 0 0 1px var(--grid-border-color); background: var(--unit-bg-hover);
}
} }
@include breakpoint(phone) { @include breakpoint(phone) {
@ -43,7 +42,7 @@
grid-gap: $unit; /* add a gap of 8px between grid items */ grid-gap: $unit; /* add a gap of 8px between grid items */
.weapon { .weapon {
background: var(--card-bg); background: var(--unit-bg);
border-radius: 4px; border-radius: 4px;
} }
@ -51,7 +50,7 @@
aspect-ratio: 73/153; aspect-ratio: 73/153;
display: grid; display: grid;
grid-column: 1 / 2; /* spans one column */ grid-column: 1 / 2; /* spans one column */
max-height: 153px; height: calc(100% - $unit-fourth);
} }
.weapons { .weapons {