jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix hotspot styles on mobile

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-31 19:30:43 -07:00
parent d59958f110
commit 75b5b1b279
1 changed files with 50 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
modules/glmv.css
View File

@@ -22,9 +22,9 @@
& [hidden] { & [hidden] {
display: none; display: none;
} }
} }
.HotspotAnnotation{ .HotspotAnnotation{
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
border-radius: 4px; border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px; box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
@@ -42,14 +42,14 @@
transform: translateY(-50%); transform: translateY(-50%);
transition: height 0.3s; transition: height 0.3s;
width: max-content; width: max-content;
} }
.HiddenAnnotation{ .HiddenAnnotation{
height: 0; height: 0;
opacity: 0; opacity: 0;
} }
.material-symbols-outlined.button-show-model{ .material-symbols-outlined.button-show-model{
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@@ -61,22 +61,22 @@
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
transition: opacity 0.3s, display 0s; transition: opacity 0.3s, display 0s;
} }
.button-show-model.button-used{ .button-show-model.button-used{
opacity: 0; opacity: 0;
display: none; display: none;
} }
.gallerybox .gallerytext div:has(model-viewer) { .gallerybox .gallerytext div:has(model-viewer) {
display: none; display: none;
} }
.glmv-container { .glmv-container {
position: relative; position: relative;
} }
.glmv-menu { .glmv-menu {
border: solid 2px #0000008F; border: solid 2px #0000008F;
background: #FFFFFFCC; background: #FFFFFFCC;
overflow: hidden; overflow: hidden;
@@ -99,17 +99,17 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.glmv-menu-image { .glmv-menu-image {
width: 32px; width: 32px;
height: 32px; height: 32px;
position: relative; position: relative;
transition: transform .5s; transition: transform .5s;
flex: 0 0 32px; flex: 0 0 32px;
} }
.glmv-menu-button { .glmv-menu-button {
width: 28px; width: 28px;
height: 28px; height: 28px;
position: relative; position: relative;
@@ -131,8 +131,21 @@
pointer-events: none; pointer-events: none;
opacity: .3; opacity: .3;
} }
}
.prev-hs img {
transform: scaleX(-1);
}
@media (pointer: coarse) {
.Hotspot {
width: 60px;
height: 60px;
font-size: 40px;
} }
.prev-hs img { .HotspotAnnotation{
transform: scaleX(-1); max-width: 240px;
width: auto;
} }
}