User:Monster Domosed/common.css: Difference between revisionsGive feedback
No edit summary |
No edit summary |
||
| Line 22: | Line 22: | ||
} | } | ||
/* | /* 3D sprite strip */ | ||
.rotatable-model img.rm-strip { | .rotatable-model img.rm-strip { | ||
position: absolute; | position: absolute; | ||
| Line 35: | Line 35: | ||
} | } | ||
/* | /* 2D static image */ | ||
.rotatable-model img.rm-static { | .rotatable-model img.rm-static { | ||
position: absolute; | position: absolute; | ||
| Line 45: | Line 45: | ||
pointer-events: none; | pointer-events: none; | ||
user-select: none; | user-select: none; | ||
display: none; | display: none; | ||
} | } | ||
/* | /* 2D mode */ | ||
.rotatable-model.rm-is-2d { | .rotatable-model.rm-is-2d { | ||
cursor: default; | cursor: default; | ||
| Line 67: | Line 67: | ||
} | } | ||
/* | /* ---- MODE TOGGLE — top-right ---- */ | ||
.rm-mode-toggle { | .rm-mode-toggle { | ||
position: absolute; | position: absolute; | ||
| Line 111: | Line 109: | ||
} | } | ||
/* | /* Icons inside mode buttons */ | ||
.rm-mode-icon { | .rm-mode-icon { | ||
width: | width: 22px; | ||
height: | height: 22px; | ||
object-fit: contain; | object-fit: contain; | ||
pointer-events: none; | pointer-events: none; | ||
filter: brightness(0) invert(1); | filter: brightness(0) invert(1); | ||
} | } | ||
/* | |||
.rm-mode-btn | /* Text fallback for mode buttons */ | ||
.rm-mode-btn { | |||
font-size: 13px; | font-size: 13px; | ||
font-weight: 700; | font-weight: 700; | ||
| Line 127: | Line 126: | ||
} | } | ||
/* | /* ---- ROTATION ICON — bottom-right (BIGGER) ---- */ | ||
.rm-rotate-icon { | .rm-rotate-icon { | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 12px; | ||
right: | right: 12px; | ||
z-index: 5; | z-index: 5; | ||
pointer-events: none; | pointer-events: none; | ||
opacity: 0. | opacity: 0.55; | ||
transition: opacity 0.3s; | transition: opacity 0.3s; | ||
} | } | ||
.rotatable-model:hover .rm-rotate-icon { | .rotatable-model:hover .rm-rotate-icon { | ||
opacity: 0. | opacity: 0.85; | ||
} | } | ||
.rm-rotate-icon img { | .rm-rotate-icon img { | ||
width: | width: 48px; | ||
height: | height: 48px; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 1px | filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); | ||
} | } | ||
/* | /* ---- HINT TEXT — bottom-center ---- */ | ||
.rotatable-model-hint { | .rotatable-model-hint { | ||
position: absolute; | position: absolute; | ||