/* In-Place Edit Button CSS ĐỘC LẬP của plugin — không dùng chung biến/sass của theme. Nút bút chì nổi góc trên-phải card, hover vào card thì trượt từ phải sang trái và hiện lên. */ .ipeb-editable { position: relative; } /* Nút "pending": user chưa có session cổ điển lúc render (vd. chỉ đăng nhập qua admin2/JWT — xem renderEditButton() trong in-place-edit-button.php). Ẩn hẳn bằng display:none (không chỉ opacity/visibility) để không lộ ra dù hover. theme://js/admin2-bridge.js gắn class .is-admin2-authed vào sau khi tự xác thực JWT đó phía client -> mở khóa lại đúng display gốc. */ .ipeb-edit-btn--pending { display: none; } body.is-admin2-authed .ipeb-edit-btn--pending { display: inline-flex; } .ipeb-edit-btn { /* Màu riêng của plugin (đổi tại đây nếu cần, không phụ thuộc theme) */ --ipeb-bg: #1C3D66; /* navy = màu chính của site */ --ipeb-bg-hover: #2E5C99; /* bản SÁNG HƠN của màu chính (không phải xanh lá) */ --ipeb-slide: 18px; position: absolute; top: 12px; right: 12px; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ipeb-bg); color: #fff; text-decoration: none; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); /* Trạng thái ẩn: lệch sang phải, mờ, không nhận click */ opacity: 0; visibility: hidden; transform: translateX(var(--ipeb-slide)); pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s ease, background-color .2s ease; } /* Hover vào ĐÚNG card/khối chứa nút (direct child '>') -> trượt vào và hiện. Dùng '>' để khi section ngoài cũng là .ipeb-editable, hover section KHÔNG lộ nút của mọi card con — mỗi card chỉ hiện nút của chính nó. */ .ipeb-editable:hover > .ipeb-edit-btn, .ipeb-edit-btn:focus-visible { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; color: #fff; /* chặn rule toàn site "a:hover { color: ... }" đổi màu icon */ text-decoration: none; /* chặn "a:hover { text-decoration: underline }" của site */ } /* Hover trực tiếp lên nút: giữ vị trí đã trượt + phóng nhẹ */ .ipeb-edit-btn:hover { background: var(--ipeb-bg-hover); transform: translateX(0) scale(1.08); color: #fff; text-decoration: none; } .ipeb-edit-btn svg { display: block; width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .ipeb-edit-btn { transition: opacity .15s ease, visibility .15s ease, background-color .2s ease; transform: none; } .ipeb-editable:hover > .ipeb-edit-btn, .ipeb-edit-btn:focus-visible { transform: none; } .ipeb-edit-btn:hover { transform: scale(1.08); } }