User:Monster Domosed/common.css: Difference between revisionsGive feedback
blanked Tags: Blanking Manual revert |
testing |
||
| Line 1: | Line 1: | ||
/* ============================ | |||
Rotatable Model Viewer | |||
============================ */ | |||
.rotatable-model-wrapper { | |||
display: inline-block; | |||
vertical-align: top; | |||
text-align: center; | |||
margin: 0.5em; | |||
} | |||
.rotatable-model { | |||
position: relative; | |||
overflow: hidden; | |||
cursor: grab; | |||
border: 1px solid #a2a9b1; | |||
background: #f8f9fa; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
touch-action: none; /* prevent browser pan/zoom on touch */ | |||
} | |||
.rotatable-model.rm-dragging { | |||
cursor: grabbing; | |||
} | |||
/* The full-width sprite strip sitting inside the viewport */ | |||
.rotatable-model img.rm-strip { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
max-width: none !important; /* override wiki default */ | |||
max-height: none !important; | |||
pointer-events: none; | |||
-webkit-user-drag: none; | |||
user-select: none; | |||
} | |||
/* "Drag to rotate" hint pill */ | |||
.rotatable-model-hint { | |||
position: absolute; | |||
bottom: 8px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
background: rgba(0, 0, 0, 0.65); | |||
color: #fff; | |||
padding: 4px 14px; | |||
border-radius: 14px; | |||
font-size: 0.85em; | |||
white-space: nowrap; | |||
pointer-events: none; | |||
opacity: 1; | |||
transition: opacity 0.4s ease; | |||
z-index: 2; | |||
} | |||
.rotatable-model-hint.rm-hidden { | |||
opacity: 0; | |||
} | |||
/* Loading text centred in the viewport */ | |||
.rotatable-model-loading { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
color: #72777d; | |||
font-size: 0.9em; | |||
z-index: 1; | |||
} | |||
/* ◀ ↺ ▶ button bar */ | |||
.rotatable-model-nav { | |||
display: flex; | |||
justify-content: center; | |||
gap: 4px; | |||
margin-top: 4px; | |||
} | |||
.rotatable-model-btn { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: 28px; | |||
height: 28px; | |||
padding: 0 6px; | |||
background: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 3px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
color: #202122; | |||
-webkit-user-select: none; | |||
user-select: none; | |||
transition: background 0.1s; | |||
} | |||
.rotatable-model-btn:hover { | |||
background: #eaecf0; | |||
border-color: #72777d; | |||
} | |||
.rotatable-model-btn:active { | |||
background: #c8ccd1; | |||
} | |||
.rotatable-model-caption { | |||
font-size: 0.9em; | |||
color: #54595d; | |||
margin-top: 4px; | |||
padding: 0 8px; | |||
} | |||