bilca/module_de_visualisation

1/* Critical fixes for page scrolling */2html, body {3  overflow: auto !important;4  height: auto !important;5  position: static !important;6}7 8/* Widget container styling */9.ply-widget-container {10  position: relative !important;11  width: 100%;12  height: 0;13  z-index: 1 !important;14  touch-action: pan-x pan-y !important;15  overflow: visible !important;16  /* padding-bottom is set dynamically inline for aspect ratio */17}18 19/* When in fake fullscreen mode (iOS fallback) */20.ply-widget-container.fake-fullscreen {21  position: fixed !important;22  top: 0 !important;23  left: 0 !important;24  width: 100vw !important;25  height: 100vh !important;26  padding-bottom: 0 !important;27  z-index: 9999 !important;28}29 30/* GIF Preview styling */31.gif-preview-container {32  position: absolute;33  top: 0;34  left: 0;35  width: 100%;36  height: 100%;37  border: 1px solid #474558;38  border-radius: 10px;39  overflow: hidden;40  cursor: pointer;41  background-color: black;42}43 44.gif-preview-container img {45  width: 100%;46  height: 100%;47  object-fit: cover;48}49 50/* Viewer Container styling */51.viewer-container {52  display: none;53  position: absolute;54  top: 0;55  left: 0;56  width: 100%;57  height: 100%;58  background: black;59  border: 1px solid #474558;60  border-radius: 10px;61  overflow: hidden;62  box-sizing: border-box;63  touch-action: pan-x pan-y !important;64}65 66/* Canvas fills the viewer container */67.ply-canvas {68  width: 100%;69  height: 100%;70  display: block;71  background-color: transparent;72  touch-action: pan-x pan-y !important;73}74 75/* Progress dialog styling (centered) */76.progress-dialog {77  position: absolute;78  top: 50%;79  left: 50%;80  transform: translate(-50%, -50%);81  border: none;82  background: rgba(0,0,0,0.7);83  padding: 20px;84  border-radius: 5px;85  z-index: 1000;86  display: none;87  color: white;88}89 90/* Progress bar styling */91progress {92  width: 250px;93  height: 15px;94  appearance: none;95  border: none;96  border-radius: 10px;97  overflow: hidden;98}99 100progress::-webkit-progress-bar {101  background-color: #333;102  border-radius: 10px;103}104 105progress::-webkit-progress-value {106  background-color: #4682B4;107  border-radius: 10px;108}109 110progress::-moz-progress-bar {111  background-color: #4682B4;112  border-radius: 10px;113}114 115/* Menu (instructions) content styling */116.menu-content {117  display: none;118  position: absolute;119  top: 70px;120  right: 15px;121  background: rgba(0, 0, 0, 0.8);122  border: 1px solid #474558;123  border-radius: 5px;124  padding: 10px;125  font-size: 15px;126  line-height: 1.4;127  color: white;128}129 130/* Button styling */131.widget-button {132  position: absolute;133  width: 45px;134  height: 45px;135  background-color: rgba(0, 0, 0, 0.6);136  border: 1px solid #474558;137  border-radius: 50%;138  cursor: pointer;139  font-size: 14px;140  color: white;141  display: flex;142  align-items: center;143  justify-content: center;144  transition: background-color 0.2s ease;145}146 147.widget-button:hover {148  background-color: rgba(70, 130, 180, 0.5);149}150 151/* Specific button positions */152.close-btn {153  top: 17px;154  left: 15px;155  font-family: sans-serif;156}157 158.fullscreen-toggle {159  top: 17px;160  right: 15px;161}162 163.help-toggle {164  top: 17px;165  right: 70px;166  font-size: 22px;167}168 169.reset-camera-btn {170  top: 17px;171  right: 123px;172  font-size: 22px;173  line-height: normal;174  padding: 0;175}176 177/* Adjust the reset icon position */178.reset-icon {179  display: inline-block;180  transform: translateY(-3px);181}182 183/* --- Mobile adjustments: when the widget container has the "mobile" class --- */184.ply-widget-container.mobile .widget-button {185  width: 30px;    /* 45px * 2/3 */186  height: 30px;   /* 45px * 2/3 */187  font-size: 10px; /* 14px * approx 0.67 */188}189 190.ply-widget-container.mobile .help-toggle {191  font-size: 15px; /* 22px * approx 0.67 */192}193 194/* Adjust button positions for mobile */195.ply-widget-container.mobile .close-btn {196  top: 11px;    /* 17px * approx 0.67 */197  left: 10px;   /* 15px * approx 0.67 */198}199 200.ply-widget-container.mobile .fullscreen-toggle {201  top: 11px;202  right: 10px;203}204 205.ply-widget-container.mobile .help-toggle {206  top: 11px;207  right: 47px;  /* 70px * approx 0.67 */208}209 210.ply-widget-container.mobile .reset-camera-btn {211  top: 11px;212  right: 82px;  /* 123px * approx 0.67 */213}214 215.ply-widget-container.mobile .menu-content {216  font-size: 10px;217  top: 45px;218  right: 5px;219}220 221/* Additional styles for PlayCanvas compatibility */222#application-canvas {223  width: 100%;224  height: 100%;225  display: block;226  touch-action: pan-x pan-y !important;227}228 229/* Error message styling */230.progress-dialog p {231  margin: 0;232  padding: 5px;233}