83d82a1caa* Fix touch gesture conflicts in WebGL example apps on mobile * Format with prettier * fix(examples): improve mobile support for map, pdf, and threejs examples - map-server: fullscreen button respects safe area insets, hover/opacity pattern with always-visible on touch devices - pdf-server: fit-to-width scale for narrow viewports, responsive toolbar with compact controls on mobile, safe area in fullscreen toolbar via CSS custom properties - threejs-server: fullscreen button respects safe area and always visible on touch, ResizeObserver for responsive width, host containerDimensions for fullscreen height, no container padding in fullscreen, replace useHostStyles with inline style application to avoid overwriting onhostcontextchanged handler
110 lines
1.8 KiB
CSS
110 lines
1.8 KiB
CSS
html,
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 400px;
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main.fullscreen {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
touch-action: none;
|
|
}
|
|
|
|
#canvas.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#code-preview {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-background-secondary) 0%,
|
|
var(--color-background-tertiary) 100%
|
|
);
|
|
color: var(--color-text-ghost);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-text-xs-size);
|
|
line-height: var(--font-text-xs-line-height);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#code-preview.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Fullscreen button */
|
|
.fullscreen-btn {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: white;
|
|
cursor: pointer;
|
|
display: none; /* Hidden by default, shown when fullscreen available */
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
background 0.2s,
|
|
opacity 0.2s;
|
|
opacity: 0; /* Initially invisible, shown on View hover */
|
|
z-index: 100;
|
|
}
|
|
|
|
.fullscreen-btn:hover {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
opacity: 1;
|
|
}
|
|
|
|
.fullscreen-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.fullscreen-btn .collapse-icon {
|
|
display: none;
|
|
}
|
|
|
|
.fullscreen-btn.available {
|
|
display: flex;
|
|
}
|
|
|
|
/* Show button on View hover */
|
|
.main:hover .fullscreen-btn.available {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Fullscreen mode */
|
|
.main.fullscreen .fullscreen-btn .expand-icon {
|
|
display: none;
|
|
}
|
|
|
|
.main.fullscreen .fullscreen-btn .collapse-icon {
|
|
display: block;
|
|
}
|