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