bilca/module_de_visualisation

1/* viewer.css */2 3/* Widget container styling */4.ply-widget-container {5  position: relative;6  width: 100%;7  height: 0;8  /* padding-bottom is set dynamically inline for aspect ratio */9}10 11/* When in fake fullscreen mode (iOS fallback) */12.ply-widget-container.fake-fullscreen {13  position: fixed !important;14  top: 0 !important;15  left: 0 !important;16  width: 100vw !important;17  height: 100vh !important;18  padding-bottom: 0 !important;19  z-index: 9999 !important;20}21 22/* GIF Preview styling */23.gif-preview-container {24  position: absolute;25  top: 0;26  left: 0;27  width: 100%;28  height: 100%;29  border: 1px solid #474558;30  border-radius: 10px;31  overflow: hidden;32  cursor: pointer;33}34 35.gif-preview-container img {36  width: 100%;37  height: 100%;38  object-fit: cover;39}40 41/* Viewer Container styling */42.viewer-container {43  display: none;44  position: absolute;45  top: 0;46  left: 0;47  width: 100%;48  height: 100%;49  background: #FEFEFD;50  border: 1px solid #474558;51  border-radius: 10px;52  overflow: hidden;53  box-sizing: border-box;54}55 56/* Canvas fills the viewer container */57.ply-canvas {58  width: 100%;59  height: 100%;60  display: block;61}62 63/* Progress dialog styling (centered) */64.progress-dialog {65  position: absolute;66  top: 50%;67  left: 50%;68  transform: translate(-50%, -50%);69  border: none;70  background: rgba(255,255,255,0.9);71  padding: 20px;72  border-radius: 5px;73  z-index: 1000;74  display: none;75}76 77/* Menu (instructions) content styling */78.menu-content {79  display: none;80  position: absolute;81  top: 70px;82  right: 15px;83  background: #FFFEF4;84  border: 1px solid #474558;85  border-radius: 5px;86  padding: 10px;87  font-size: 15px;88  line-height: 1.4;89  color: #474558;90}91 92/* Button styling */93.widget-button {94  position: absolute;95  width: 45px;96  height: 45px;97  background-color: #FFFEF4;98  border: 1px solid #474558;99  border-radius: 50%;100  cursor: pointer;101  font-size: 14px;102  color: #474558;103  display: flex;104  align-items: center;105  justify-content: center;106}107 108/* Specific button positions for desktop */109.close-btn {110  top: 17px;111  left: 15px;112  font-family: sans-serif;113}114 115.fullscreen-toggle {116  top: 17px;117  right: 15px;118}119 120.help-toggle {121  top: 17px;122  right: 70px;123  font-size: 22px;124}125 126/* Reset camera button repositioned */127.reset-camera-btn {128  top: 17px;129  right: 120px;130  font-size: 22px;131  line-height: normal;132  padding: 0;133}134 135/* New toggle-quality button:136   - Placed to the left of the reset camera button.137   - Longer horizontally to fit the text.138   - Maintains the same height and uses horizontal padding for extra space.139*/140.toggle-quality-btn {141  top: 17px;142  right: 170px;143  min-width: 170px;  /* Ensures the text fits */144  height: 45px;145  padding: 0 10px;146  border-radius: 22.5px; /* Half the height for a pill shape */147  text-align: center;148  white-space: nowrap;149}150 151/* Adjust the reset icon position */152.reset-icon {153  display: inline-block;154  transform: translateY(-3px);155}156 157/* --- Mobile adjustments: when the widget container has the "mobile" class --- */158.ply-widget-container.mobile .widget-button {159  width: 30px;    /* 45px scaled down */160  height: 30px;161  font-size: 10px;162}163 164.ply-widget-container.mobile .help-toggle {165  font-size: 15px; /* Scaled down from 22px */166}167 168/* Adjust button positions for mobile */169.ply-widget-container.mobile .close-btn {170  top: 11px;    /* 17px scaled down */171  left: 10px;   /* 15px scaled down */172}173 174.ply-widget-container.mobile .fullscreen-toggle {175  top: 11px;176  right: 10px;177}178 179.ply-widget-container.mobile .help-toggle {180  top: 11px;181  right: 47px;182}183 184/* Mobile reset camera button remains at right:82px */185.ply-widget-container.mobile .reset-camera-btn {186  top: 11px;187  right: 82px;188}189 190/* Mobile toggle-quality button:191   - Placed to the left of the reset camera button.192   - Has a longer (wider) layout to accommodate text.193*/194.ply-widget-container.mobile .toggle-quality-btn {195  top: 11px;196  right: 110px;197  min-width: 80px;198  height: 30px;199  padding: 0 5px;200  border-radius: 15px;201  text-align: center;202  white-space: nowrap;203  font-size: 10px;204}205