1
0
Fork 0
forked from OpenNeo/impress

Tweak styles for item preview area sizes

I noticed the last row of the species faces required a scroll, I forget
when that happened! But I made some tweaks, most notably widened the
container from the normal 800px, so that on bigger screens everything
lays out and aligns nice, without requiring any scrolling of the face
container!
This commit is contained in:
Emi Matchu 2024-09-08 18:54:11 -07:00
parent 9f62d7cdbe
commit 3f4e864a17

View file

@ -3,6 +3,9 @@
@import "../partials/item_header" @import "../partials/item_header"
body.items-show body.items-show
#container
width: 900px // A bit more generous to the preview area!
.item-header .item-header
+item-header +item-header
@ -207,7 +210,7 @@ body.items-show
species-face-picker species-face-picker
display: block display: block
position: relative position: relative
top: -10px margin-top: -10px
species-face-picker-options species-face-picker-options
display: flex display: flex
@ -219,8 +222,8 @@ body.items-show
padding: 10px // leave enough room for the zoomed-in selected face padding: 10px // leave enough room for the zoomed-in selected face
img img
width: 50px width: 54px
height: 50px height: 54px
transition: all 0.2s transition: all 0.2s
// Calm down the default color, just a smidge! There's a lot of color // Calm down the default color, just a smidge! There's a lot of color
@ -352,7 +355,7 @@ body.items-show
flex-direction: column flex-direction: column
gap: .75em gap: .75em
@media (min-width: 600px) @media (min-width: 700px)
display: grid display: grid
grid-template-areas: "viewer faces" "picker meta" grid-template-areas: "viewer faces" "picker meta"
gap: .5em gap: .5em
@ -360,8 +363,8 @@ body.items-show
.preview-area .preview-area
grid-area: viewer grid-area: viewer
outfit-viewer outfit-viewer
width: 350px width: 380px
height: 350px height: 380px
species-color-picker species-color-picker
grid-area: picker grid-area: picker
@ -369,7 +372,7 @@ body.items-show
species-face-picker species-face-picker
grid-area: faces grid-area: faces
species-face-picker-options species-face-picker-options
max-height: 340px max-height: 370px
.item-preview-meta-info .item-preview-meta-info
grid-area: meta grid-area: meta