Ivan Fontosh
d9fbecf5a7
Move audio scrub/volume and brush drafts off root React ticks, coalesce overlay layout IPC, cache machine fingerprint and asset URLs, share one scene overlay host, and stop idle Pixi ticker. Also harden console against EPIPE on window load failures. Co-authored-by: Cursor <cursoragent@cursor.com>
173 lines
2.6 KiB
CSS
173 lines
2.6 KiB
CSS
.root {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
.interactive {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.passive {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/** Общий host: клики проходят сквозь dim к сцене; кадры/кнопки ловят сами. */
|
|
.hostHitThrough {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.captureZoom {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.cursorZoomIn {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.cursorZoomOut {
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
.dim {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.62);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.frame {
|
|
position: absolute;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.frameEditable {
|
|
pointer-events: auto;
|
|
cursor: move;
|
|
}
|
|
|
|
.image {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
display: block;
|
|
object-fit: fill;
|
|
border-radius: 6px;
|
|
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
|
|
user-select: none;
|
|
pointer-events: none;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.handle {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
background: var(--color-accent, #c9a227);
|
|
padding: 0;
|
|
z-index: 2;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.handle_nw {
|
|
left: -6px;
|
|
top: -6px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.handle_ne {
|
|
right: -6px;
|
|
top: -6px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.handle_sw {
|
|
left: -6px;
|
|
bottom: -6px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.handle_se {
|
|
right: -6px;
|
|
bottom: -6px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.closeStack {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.close {
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
z-index: 3;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: rgba(12, 12, 16, 0.72);
|
|
color: #fff;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.close:hover {
|
|
background: rgba(24, 24, 32, 0.9);
|
|
}
|
|
|
|
/** Standalone-оверлей (без host): одна кнопка в углу. */
|
|
.root > .close {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
}
|
|
|
|
.frameRotate {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
z-index: 3;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: rgba(12, 12, 16, 0.78);
|
|
color: #fff;
|
|
padding: 0;
|
|
cursor: grab;
|
|
display: grid;
|
|
place-items: center;
|
|
pointer-events: auto;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.frameRotate:hover {
|
|
background: rgba(24, 24, 32, 0.95);
|
|
}
|
|
|
|
.frameRotate:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.frameRotateSvg {
|
|
display: block;
|
|
}
|