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

No edit summary
No edit summary
Line 67: Line 67:
}
}


/* ---- MODE TOGGLE — top-right ---- */
/* ---- MODE TOGGLE — single button, top-right ---- */
.rm-mode-toggle {
.rm-mode-toggle {
     position: absolute;
     position: absolute;
Line 73: Line 73:
     right: 8px;
     right: 8px;
     z-index: 10;
     z-index: 10;
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.rm-mode-btn {
     display: inline-flex;
     display: inline-flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     min-width: 36px;
     width: 40px;
     height: 32px;
     height: 40px;
     padding: 4px 8px;
     border-radius: 8px;
     background: rgba(30, 30, 30, 0.55);
     background: rgba(30, 30, 30, 0.55);
    border: none;
     cursor: pointer;
     cursor: pointer;
     transition: background 0.15s, opacity 0.15s;
     transition: background 0.15s, transform 0.1s;
     opacity: 0.7;
     box-shadow: 0 1px 4px rgba(0,0,0,0.3);
     pointer-events: auto;
     pointer-events: auto;
}
}
.rm-mode-btn:first-child {
.rm-mode-toggle:hover {
     border-right: 1px solid rgba(255,255,255,0.15);
     background: rgba(30, 30, 30, 0.8);
    transform: scale(1.05);
}
}
.rm-mode-btn:hover {
.rm-mode-toggle:active {
    opacity: 1;
     transform: scale(0.95);
    background: rgba(30, 30, 30, 0.75);
}
.rm-mode-btn.rm-active {
     background: rgba(60, 130, 230, 0.85);
    opacity: 1;
}
.rm-mode-btn.rm-active:hover {
    background: rgba(60, 130, 230, 1);
}
}


/* Icons inside mode buttons */
/* Icon inside toggle button */
.rm-mode-icon {
.rm-mode-icon {
     width: 22px;
     width: 24px;
     height: 22px;
     height: 24px;
     object-fit: contain;
     object-fit: contain;
     pointer-events: none;
     pointer-events: none;
Line 118: Line 102:
}
}


/* Text fallback for mode buttons */
/* Text fallback */
.rm-mode-btn {
.rm-mode-toggle {
     font-size: 13px;
     font-size: 14px;
     font-weight: 700;
     font-weight: 700;
     color: #fff;
     color: #fff;
Line 126: Line 110:
}
}


/* ---- ROTATION ICON — bottom-right (BIGGER) ---- */
/* ---- ROTATION ICON — bottom-right ---- */
.rm-rotate-icon {
.rm-rotate-icon {
     position: absolute;
     position: absolute;