bak

public/css/style.css

@@ -107,7 +107,7 @@ body::after {
 }
 .group:hover .card-thumb { border-color: var(--t-muted); }
 .card-glow:hover { box-shadow: 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); }
-.card-dragging { opacity: 0.3; transform: scale(0.95); }
+.card-dragging { opacity: 0.15; transform: scale(0.95); }
 
 /* Drop indicators — thick glowing bar */
 .card-drop-before::before,
@@ -130,6 +130,56 @@ body::after {
     transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
+/* Zen mode */
+html.detail-zen-open,
+body.detail-zen-open { overflow: hidden; }
+#detail.zen > div { inset: 0 !important; border: none !important; border-radius: 0; overflow-y: auto; }
+#detail.zen #detail-sidebar { display: none !important; }
+#detail.zen .card-bar { display: none; }
+#detail.zen #detail-scroll {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    overflow: visible !important;
+}
+#detail.zen #detail-scroll #detail-title { font-size: 1.6rem; margin-bottom: 1.5rem; }
+#detail.zen #detail-scroll #detail-body { font-size: 1rem; line-height: 1.85; }
+#detail.zen #detail-scroll #detail-meta { display: none; }
+#detail.zen #detail-backlinks { display: none; }
+#detail.zen #detail-controls {
+    position: fixed !important;
+    top: 1rem !important;
+    right: 1rem !important;
+    z-index: 120;
+    opacity: 0.15;
+    transition: opacity 0.2s;
+}
+#detail.zen #detail-controls:hover { opacity: 1; }
+
+/* Detail close morph */
+.detail-close-frame {
+    z-index: 130;
+    pointer-events: none;
+    border: 3px solid var(--t-accent2);
+    border-radius: 10px;
+    background: transparent;
+    opacity: 0.95;
+    box-sizing: border-box;
+    will-change: left, top, width, height, opacity, border-radius;
+    transition: left 0.34s cubic-bezier(0.22, 1, 0.36, 1), top 0.34s cubic-bezier(0.22, 1, 0.36, 1), width 0.34s cubic-bezier(0.22, 1, 0.36, 1), height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, border-radius 0.34s ease;
+}
+.card-morph-target {
+    animation: cardMorphTarget 0.34s ease;
+}
+@keyframes cardMorphTarget {
+    0% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
+    45% { transform: scale(1.015); box-shadow: 0 0 0 2px var(--t-accent2); }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
+}
+
+/* Undo hint */
+#undo-hint { opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; border-radius: 4px; }
+
 /* Overlays */
 .overlay { transition: opacity 0.15s; }
 .overlay:not(.open) { opacity: 0; pointer-events: none; }
@@ -142,7 +192,17 @@ body::after {
 
 /* Buckets */
 .bucket-tab.active { border-color: var(--t-accent); color: var(--t-accent); }
-.bucket-tab.drag-over { border-color: var(--t-accent); background: var(--t-raised); }
+.bucket-tab.drag-over {
+    background: var(--t-accent) !important;
+    color: var(--t-bg) !important;
+    border-color: var(--t-accent) !important;
+    transform: scale(1.05);
+    transition: all 0.15s ease;
+}
+.bucket-tab.drag-over i,
+.bucket-tab.drag-over span { color: inherit !important; }
+.bucket-drop-left { border-left: 3px solid var(--t-accent) !important; }
+.bucket-drop-right { border-right: 3px solid var(--t-accent) !important; }
 
 /* Toolbar */
 .toolbar-btn { color: var(--t-muted); padding: 4px 6px; border-radius: 3px; transition: color 0.1s, background 0.1s; cursor: pointer; background: none; border: none; font-family: inherit; }
@@ -161,7 +221,7 @@ body::after {
 .search-hit mark, #search-preview-content mark { background: none; color: var(--t-accent); font-weight: 700; }
 
 /* Context menu */
-#ctx-menu .ctx-item {
+#ctx-menu .ctx-item, #bucket-ctx .ctx-item {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -176,10 +236,9 @@ body::after {
     font-family: inherit;
     text-align: left;
 }
-#ctx-menu .ctx-item:hover { background: var(--t-raised); }
-#ctx-menu .ctx-item.danger { color: var(--t-danger); }
-#ctx-menu .ctx-item.danger:hover { background: var(--t-danger); color: var(--t-bg); }
-#ctx-menu .ctx-sep { height: 1px; background: var(--t-border); margin: 2px 0; }
+#ctx-menu .ctx-item:hover, #bucket-ctx .ctx-item:hover { background: var(--t-raised); }
+#ctx-menu .ctx-item.danger, #bucket-ctx .ctx-item.danger { color: var(--t-danger); }
+#ctx-menu .ctx-item.danger:hover, #bucket-ctx .ctx-item.danger:hover { background: var(--t-danger); color: var(--t-bg); }
 
 /* Card links */
 .card-link { color: var(--t-accent2); cursor: pointer; border-bottom: 1px dashed var(--t-accent2); transition: color 0.1s; }