User:Monster Domosed/common.cssGive feedback
Note: After publishing, you may need to reload with your cache disabled to see your changes.
- Windows / Linux: Press Ctrl-Shift-R
- macOS: Press ⌘-Shift-R
/* @import url('//deadlock.wiki/index.php?title=Wiki_Redesign.css&action=raw&ctype=text/css'); */
.feedback-box {
margin: 0.8em 0;
padding: 1.5em 2em 1em;
border: 1px solid var(--border-color-subtle);
border-radius: 10px;
background: var(--background-color-neutral-subtle);
color: var(--color-base);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
max-width: 40em;
}
.feedback-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.65em;
font-size: 0.85rem;
color: var(--color-subtle);
}
.feedback-user {
font-weight: 700;
color: var(--color-emphasized);
}
.feedback-separator {
opacity: 0.7;
}
.feedback-status {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 4px;
}
.feedback-status--unresolved {
color: var(--text-color);
background: var(--color-destructive);
}
.feedback-status--resolved {
color: var(--text-color);
background: var(--color-content-added);
}
.oo-ui-icon-feedback {
filter:none !important;
background: var(--text-color);
-webkit-mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.16683 8.982C4.10732 8.39081 3.83847 7.42694 4.15486 7.17995C4.46877 6.93489 4.7797 6.90487 5.90123 7.31306L31.1931 17.2282C32.2693 17.6503 32.2686 18.335 31.1931 18.7564L5.90123 28.6715C4.77972 29.1235 4.46864 29.0497 4.15487 28.8049C3.83836 28.5579 4.0953 27.5939 4.15484 27.0028L4.7797 21.2151C4.89862 20.0374 5.92644 18.9801 7.0706 18.854L15.467 18.4429C24.1686 17.9924 24.1686 17.9924 15.467 17.5419L7.0706 17.1314C5.92423 17.0053 4.89825 15.9476 4.7797 14.7706L4.16683 8.982Z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.16683 8.982C4.10732 8.39081 3.83847 7.42694 4.15486 7.17995C4.46877 6.93489 4.7797 6.90487 5.90123 7.31306L31.1931 17.2282C32.2693 17.6503 32.2686 18.335 31.1931 18.7564L5.90123 28.6715C4.77972 29.1235 4.46864 29.0497 4.15487 28.8049C3.83836 28.5579 4.0953 27.5939 4.15484 27.0028L4.7797 21.2151C4.89862 20.0374 5.92644 18.9801 7.0706 18.854L15.467 18.4429C24.1686 17.9924 24.1686 17.9924 15.467 17.5419L7.0706 17.1314C5.92423 17.0053 4.89825 15.9476 4.7797 14.7706L4.16683 8.982Z'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
width: 1.25em;
height: 1.25em;
}
/* ===== Rotatable Model Viewer ===== */
.rotatable-model-wrapper {
display: block;
text-align: center;
}
.rotatable-model {
position: relative;
overflow: hidden;
cursor: grab;
background: #f8f9fa;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.rotatable-model.rm-dragging {
cursor: grabbing;
}
/* 3D sprite strip */
.rotatable-model img.rm-strip {
position: absolute;
top: 0;
left: 0;
max-width: none !important;
max-height: none !important;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
/* 2D static image */
.rotatable-model img.rm-static {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
display: none;
}
/* 2D mode */
.rotatable-model.rm-is-2d {
cursor: default;
}
.rotatable-model.rm-is-2d img.rm-strip {
display: none !important;
}
.rotatable-model.rm-is-2d img.rm-static {
display: block !important;
}
.rotatable-model.rm-is-2d .rm-rotate-icon,
.rotatable-model.rm-is-2d .rotatable-model-hint {
display: none !important;
}
.rotatable-model-wrapper.rm-is-2d .rotatable-model-nav {
visibility: hidden;
pointer-events: none;
}
/* ---- MODE TOGGLE — single button, top-right ---- */
.rm-mode-toggle {
position: absolute;
top: 2px;
right: 2px;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
}
.rm-mode-toggle:hover {
background: rgba(30, 30, 30, 0.8);
transform: scale(1.05);
}
.rm-mode-toggle:active {
transform: scale(0.95);
}
/* Icon inside toggle button */
.rm-mode-icon {
width: 24px;
height: 24px;
object-fit: contain;
pointer-events: none;
filter: brightness(0) invert(1);
}
/* Text fallback */
.rm-mode-toggle {
font-size: 14px;
font-weight: 700;
color: #fff;
font-family: sans-serif;
}
/* ---- ROTATION ICON — bottom-right ---- */
.rm-rotate-icon {
position: absolute;
bottom: 2px;
right: 2px;
z-index: 5;
pointer-events: none;
opacity: 0.55;
transition: opacity 0.3s;
}
.rotatable-model:hover .rm-rotate-icon {
opacity: 0.85;
}
.rm-rotate-icon img {
width: 48px;
height: 48px;
object-fit: contain;
filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
/* Loading */
.rotatable-model-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #72777d;
font-size: 0.9em;
z-index: 1;
}
/* ---- Nav buttons ---- */
.rotatable-model-nav {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 4px;
transition: visibility 0.2s;
}
.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;
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;
}