Spaces:
Running
Running
File size: 2,775 Bytes
724d243 65c73d1 31d536d b709609 31d536d 65c73d1 b709609 65c73d1 31d536d 65c73d1 31d536d 6dd86f0 b709609 65c73d1 b709609 65c73d1 1c04116 31d536d b709609 65c73d1 31d536d 1c04116 65c73d1 31d536d 65c73d1 b709609 65c73d1 b709609 1c04116 65c73d1 31d536d 65c73d1 724d243 b709609 724d243 65c73d1 b709609 65c73d1 31d536d 08d001f 65c73d1 b709609 65c73d1 31d536d 08d001f 65c73d1 b709609 724d243 31d536d 08d001f 65c73d1 724d243 b709609 724d243 31d536d 724d243 08d001f 724d243 31d536d b709609 724d243 b709609 724d243 65c73d1 724d243 b709609 724d243 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 | /* 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;
/* Square corners only */
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;
/* Square corners */
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;
/* Square corners */
overflow: hidden;
box-sizing: border-box;
}
/* Canvas fills the viewer container */
.ply-canvas {
width: 100%;
height: 100%;
display: block;
/* Background is set by JS using JSON */
}
/* Progress dialog styling */
.progress-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
background: #B4B4B4;
padding: 10px;
/* Square corners */
z-index: 1000;
display: none;
}
/* Menu (instructions) content styling */
.menu-content {
display: none;
position: absolute;
top: 35px;
right: 10px;
background: #B4B4B4;
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: #B4B4B4;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 16px;
color: #333;
}
/* Position buttons on the top right (grouped with no gap) */
/* 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; /* 4px + 40px */
}
/* Reset camera button: immediately to the left of fullscreen */
.reset-camera-btn {
position: absolute;
top: 0px;
right: 80px; /* 4px + 40px + 40px */
}
/* Help button: positioned in the middle on the right side of the canvas */
.help-toggle {
position: absolute;
top: 50%;
right: 4px;
border-radius: 2;
width: 50px;
height: 40px;
transform: translateY(-50%);
}
/* Hover effects */
.close-btn:hover {
background-color: #d32f2f;
color: #fff;
}
.fullscreen-toggle:hover,
.reset-camera-btn:hover {
background-color: #e0e0e0;
color: #333;
}
.help-toggle:hover {
background-color: #c0c0c0; /* Darker on hover */
color: #000;
}
|