bilca/module_de_visualisation

1/* Classical Chrome-Like CSS (Updated) */2 3/* Widget container styling */4.ply-widget-container {5  position: relative;6  width: 100%;7  height: 0;8  padding-bottom: var(--aspect-percent);9  background: #fff;10  border: 1px solid #ccc;11  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;12}13 14/* GIF Preview styling */15.gif-preview-container {16  position: absolute;17  top: 0;18  left: 0;19  width: 100%;20  height: 100%;21  border: 1px solid #ccc;22  overflow: hidden;23  cursor: pointer;24  background: #f9f9f9;25}26.gif-preview-container img {27  width: 100%;28  height: 100%;29  object-fit: cover;30}31 32/* Viewer Container styling */33.viewer-container {34  display: none;35  position: absolute;36  top: 0;37  left: 0;38  width: 100%;39  height: 100%;40  background: #fff;41  border: 0px solid #ccc;42  overflow: hidden;43  box-sizing: border-box;44}45 46/* Canvas fills the viewer container */47.ply-canvas {48  width: 100%;49  height: 100%;50  display: block;51}52 53/* Progress dialog styling */54.progress-dialog {55  position: absolute;56  top: 50%;57  left: 50%;58  transform: translate(-50%, -50%);59  border: 1px solid #ccc;60  background: #c8c8c8;61  padding: 10px;62  z-index: 1000;63  display: none;64}65 66/* Instruction text (menu) styling */67/* Positioned to the left of the help button */68.menu-content {69  display: none;70  position: absolute;71  right: 65px; /* Help button is at right: 4px with width:50px */72  top: 50%;73  transform: translateY(-50%);74  background: #ccd0d7;75  border: 1px solid #ccc;76  padding: 8px;77  font-size: 13px;78  color: #333;79}80 81/* Shared base style for all buttons */82.widget-button {83  width: 40px;84  height: 30px;85  background-color: #eeeef2;86  cursor: pointer;87  padding: 0;88  margin: 0;89  box-shadow: none;90  display: flex;91  align-items: center;92  justify-content: center;93  font-family: inherit;94  font-size: 16px;95  color: #333;96  border: 1px solid #ccc;97}98 99/* Positioning the three control buttons flush in the top–right corner */100/* Close button: far right */101.close-btn {102  position: absolute;103  top: 0px;104  right: 0px;105}106/* Fullscreen button: immediately to the left */107.fullscreen-toggle {108  position: absolute;109  top: 0px;110  right: 40px;111}112/* Reset camera button: immediately to the left of fullscreen */113.reset-camera-btn {114  position: absolute;115  top: 0px;116  right: 80px;117}118 119/* Help button: positioned in the middle on the right side of the canvas */120.help-toggle {121  position: absolute;122  top: 50%;123  right: 4px;124  width: 50px;125  height: 40px;126  transform: translateY(-50%);127  background-color: #eeeef2;128  border: 1px solid #ccc;129  cursor: pointer;130  padding: 0;131  display: flex;132  align-items: center;133  justify-content: center;134  font-family: inherit;135  font-size: 16px;136  color: #333;137  box-shadow: none;138}139 140 141/* Hover effects for all buttons */142.widget-button:hover,143.close-btn:hover,144.fullscreen-toggle:hover,145.reset-camera-btn:hover,146.help-toggle:hover {147  background-color: #ccd0d7;148  color: #333;149}150