janusweb
Version:
Web client for JanusVR worlds
115 lines (113 loc) • 2.04 kB
CSS
ui-grid.models {
height: 20vh;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(60px, 1fr));
overflow-y: auto;
overflow-x: hidden;
}
ui-grid.models>* {
height: 60px;
padding: 0;
position: relative;
transition: transform ease-out 100ms;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.5);
margin: 0;
display: flex;
}
ui-grid.models>* h2 {
font-size: .8em;
font-weight: bold;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
color: white;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
padding: .2em .4em;
border-radius: 0 0 10px 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
ui-grid.models>* h3 {
font-size: .8em;
margin: 0;
display: none;
}
ui-grid.models>* img {
width: 100%;
max-height: 100%;
border-radius: .5em;
margin: 0 auto;
display: block;
object-fit: contain;
}
ui-grid.models>* a {
margin: 0;
padding: 0;
flex: 1 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: white;
}
ui-grid.models>* p {
display: none;
font-size: .8em;
}
ui-grid.models>*:hover p {
position: absolute;
display: none;
width: 100%;
background: rgba(0,0,0,.5);
border: 1px solid black;
}
ui-grid.models>*:hover {
transform: scale(1.1);
position: relative;
z-index: 1;
}
/*
#pagination {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
ui-input {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
padding: .5em;
}
*/
janus-ui-inventory>ui-tabs>ui-tab {
height: 40vh;
padding: 0;
}
janus-ui-inventory ui-flexpanel {
padding: 0;
max-height: 20vh;
width: 100%;
}
janus-ui-inventory-roomassets {
display: block;
height: 20vh;
overflow-x: hidden;
overflow-y: scroll;
}
janus-ui-inventory-roomassets ui-grid.models {
height: auto;
overflow-x: visible;
overflow-y: visible;
}