dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Improve noscript species face picker styles

Browse source 
Fix z-index conflicts, and not always covering the whole option set
This commit is contained in:
Emi Matchu 2024-09-08 13:29:34 -07:00
parent 5f2c454423
commit 09572b5c05
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/items/_show.sass
View file

@ -207,15 +207,16 @@ body.items-show
species-face-picker species-face-picker
display: block display: block
position: relative position: relative
max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below top: -10px
padding: 10px // leave enough room for the zoomed-in selected face
margin-top: -10px
overflow: auto
species-face-picker-options species-face-picker-options
display: flex display: flex
justify-content: center justify-content: center
flex-wrap: wrap flex-wrap: wrap
isolation: isolate // avoid z-index conflicts between pets and noscript
overflow: auto
max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
padding: 10px // leave enough room for the zoomed-in selected face
img img
width: 50px width: 50px
@ -271,7 +272,8 @@ body.items-show
noscript noscript
position: absolute position: absolute
inset: 0 inset: 0
background: rgba(white, .75) padding: 1em
background: rgba(white, .8)
z-index: 1 z-index: 1
cursor: auto cursor: auto
@ -366,8 +368,8 @@ body.items-show
species-face-picker species-face-picker
grid-area: faces grid-area: faces
max-height: 350px species-face-picker-options
margin: -10px max-height: 340px
.item-preview-meta-info .item-preview-meta-info
grid-area: meta grid-area: meta