mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-11-06 21:50:40 +00:00
book(fix): tile action buttons + page-number chip always on top
The X / duplicate / proof / master-picker chrome on Pages overview tiles was rendering behind the composited master+page thumbnail because text layers carry their own zIndex inline (layer.z) and the actions container had no stacking context. - .bookPageTileActions gains z-index: 20 and the per-button children + master <select> get z-index: 21 with position: relative so they create their own stacking contexts (necessary for the select to dropdown above neighbouring tiles too). - .bookPageTileNum gains z-index: 10 + a translucent white background so the page-number chip stays legible over dark text layers. Reported: "the X button on the pages overview slide is behind the master content. The pages buttons like the X should always be rendered on top so the user can see them." Co-Authored-By: Claude Opus 4.7 <[email protected]>
This commit is contained in:
1 parent
5caf1d48cd
commit
e5721b67a7
1 file changed
+6
@@ -1800,6 +1800,9 @@
|
||||
.bookPageTileNum {
|
||||
position: absolute; top: 6px; left: 8px;
|
||||
font-size: .72rem; color: var(--muted); font-weight: 600;
|
||||
z-index: 10;
|
||||
background: rgba(255,255,255,.85);
|
||||
padding: 0 4px; border-radius: 2px;
|
||||
}
|
||||
/* Master layers shown as an underlay while editing a page —
|
||||
click-through and slightly faded so the page layers above
|
||||
@@ -1848,12 +1851,14 @@
|
||||
position: absolute; top: 4px; right: 4px;
|
||||
display: flex; gap: 4px;
|
||||
opacity: 0; transition: opacity .12s;
|
||||
z-index: 20; /* always above the composited preview's text layers */
|
||||
}
|
||||
.bookPageTile:hover .bookPageTileActions { opacity: 1; }
|
||||
.bookPageTileAction {
|
||||
width: 22px; height: 22px; padding: 0; border-radius: 0;
|
||||
border: 1px solid var(--line); background: #fff;
|
||||
cursor: pointer; font-size: .85rem; line-height: 1;
|
||||
position: relative; z-index: 21;
|
||||
}
|
||||
.bookPageTileAction.danger:hover {
|
||||
background: var(--warn, #fee2e2);
|
||||
@@ -1863,6 +1868,7 @@
|
||||
height: 22px; padding: 0 4px; font-size: .72rem;
|
||||
border: 1px solid var(--line); background: #fff;
|
||||
max-width: 120px;
|
||||
position: relative; z-index: 21;
|
||||
}
|
||||
.bookPageTile.dragging { opacity: .5; }
|
||||
.bookPageTile.dragover {
|
||||
|
||||
Reference in new issue
Block a user