fix(drag-handle): restore visibility CSS cascade and pointer-events
This commit is contained in:
Antigravity
@@ -1035,8 +1035,254 @@ html.font-system * {
|
||||
/* --- Editor Wrapper --- */
|
||||
.notion-editor-wrapper {
|
||||
position: relative;
|
||||
padding-left: 36px; /* Espace gutter pour la poignée */
|
||||
}
|
||||
|
||||
/* --- Drag Handle Gutter --- */
|
||||
.notion-drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 28px; /* Légèrement plus grand pour faciliter la sélection */
|
||||
border-radius: 6px;
|
||||
color: var(--muted-foreground);
|
||||
/* Animation de glissement fluide (top) et d'échelle au clic */
|
||||
transition: opacity 0.2s ease,
|
||||
top 0.12s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.notion-drag-handle:hover {
|
||||
background-color: rgba(59, 130, 246, 0.15); /* blue-500 @ 15% */
|
||||
color: #3b82f6; /* blue-500 */
|
||||
}
|
||||
|
||||
.dark .notion-drag-handle:hover {
|
||||
background-color: rgba(59, 130, 246, 0.25);
|
||||
color: #60a5fa; /* blue-400 */
|
||||
}
|
||||
|
||||
.notion-drag-handle:active {
|
||||
transform: scale(0.9);
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.notion-drag-handle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* --- Styles pour l'extension officielle Tiptap DragHandle --- */
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: grab;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease, transform 0.12s ease;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drag-handle.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.drag-handle[data-dragging="true"] {
|
||||
cursor: grabbing;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Inner content wrapper - positioned in gutter */
|
||||
.drag-handle > .notion-drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
min-height: 28px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted-foreground);
|
||||
background: transparent;
|
||||
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drag-handle.visible > .notion-drag-handle:hover {
|
||||
background-color: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.dark .drag-handle.visible > .notion-drag-handle:hover {
|
||||
background-color: rgba(59, 130, 246, 0.25);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.drag-handle:active > .notion-drag-handle {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* --- Block Action Menu (glassmorphism dropdown) --- */
|
||||
.block-action-menu {
|
||||
min-width: 200px;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
animation: blockMenuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.dark .block-action-menu {
|
||||
background: rgba(30, 30, 30, 0.88);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@keyframes blockMenuIn {
|
||||
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.block-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 7px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.block-action-item:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.dark .block-action-item:hover {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.block-action-item:first-child:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.dark .block-action-item:first-child:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.block-action-separator {
|
||||
height: 1px;
|
||||
margin: 4px 8px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dark .block-action-separator {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.block-action-submenu-trigger {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.block-action-submenu {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
margin-left: 4px;
|
||||
min-width: 180px;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
animation: blockMenuIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.dark .block-action-submenu {
|
||||
background: rgba(30, 30, 30, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* --- Drop Indicator Line --- */
|
||||
.notion-drop-indicator {
|
||||
position: absolute;
|
||||
left: 36px; /* Alignement sur le texte */
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, top 0.1s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.dark .notion-drop-indicator {
|
||||
background-color: #60a5fa !important;
|
||||
box-shadow: 0 0 10px rgba(96, 165, 250, 0.9);
|
||||
}
|
||||
|
||||
/* --- Selected Node Visual Highlight during Drag --- */
|
||||
.notion-editor-wrapper .ProseMirror-selectednode {
|
||||
outline: none !important;
|
||||
background-color: rgba(59, 130, 246, 0.08) !important;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.dark .notion-editor-wrapper .ProseMirror-selectednode {
|
||||
background-color: rgba(96, 165, 250, 0.15) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5) !important;
|
||||
}
|
||||
|
||||
/* --- Premium Drag Target Line (Dropcursor) --- */
|
||||
.notion-editor-wrapper .ProseMirror-dropcursor {
|
||||
background-color: #3b82f6 !important;
|
||||
height: 2px !important;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 8px #3b82f6;
|
||||
animation: pulse-drop 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-drop {
|
||||
0% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
|
||||
/* --- ProseMirror Base --- */
|
||||
.notion-editor-wrapper .ProseMirror {
|
||||
outline: none;
|
||||
|
||||
Reference in New Issue
Block a user