User:Monster Domosed/common.css: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 22: Line 22:
}
}


/* ---- 3D sprite strip ---- */
/* 3D sprite strip */
.rotatable-model img.rm-strip {
.rotatable-model img.rm-strip {
     position: absolute;
     position: absolute;
Line 35: Line 35:
}
}


/* ---- 2D static image ---- */
/* 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;                       /* hidden by default (3D mode) */
     display: none;
}
}


/* ---- 2D mode state ---- */
/* 2D mode */
.rotatable-model.rm-is-2d {
.rotatable-model.rm-is-2d {
     cursor: default;
     cursor: default;
Line 67: Line 67:
}
}


/* ==============================
/* ---- MODE TOGGLE — top-right ---- */
  MODE TOGGLE — top-right corner
  ============================== */
.rm-mode-toggle {
.rm-mode-toggle {
     position: absolute;
     position: absolute;
Line 111: Line 109:
}
}


/* Icon images inside buttons */
/* Icons inside mode buttons */
.rm-mode-icon {
.rm-mode-icon {
     width: 20px;
     width: 22px;
     height: 20px;
     height: 22px;
     object-fit: contain;
     object-fit: contain;
     pointer-events: none;
     pointer-events: none;
     filter: brightness(0) invert(1);     /* make icons white */
     filter: brightness(0) invert(1);
}
}
/* No filter needed for text-only fallback */
 
.rm-mode-btn:not(:has(img)) {
/* 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) ---- */
  ROTATION ICON — bottom-right corner
  ========================================== */
.rm-rotate-icon {
.rm-rotate-icon {
     position: absolute;
     position: absolute;
     bottom: 10px;
     bottom: 12px;
     right: 10px;
     right: 12px;
     z-index: 5;
     z-index: 5;
     pointer-events: none;
     pointer-events: none;
     opacity: 0.6;
     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.9;
     opacity: 0.85;
}
}
.rm-rotate-icon img {
.rm-rotate-icon img {
     width: 32px;
     width: 48px;
     height: 32px;
     height: 48px;
     object-fit: contain;
     object-fit: contain;
     filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
     filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
}


/* ==========================================
/* ---- HINT TEXT — bottom-center ---- */
  TEXT HINT — bottom-center (fades on drag)
  ========================================== */
.rotatable-model-hint {
.rotatable-model-hint {
     position: absolute;
     position: absolute;