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:
parent
9f62d7cdbe
commit
3f4e864a17
1 changed files with 10 additions and 7 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue