bak

public/css/style.css

@@ -36,6 +36,7 @@ body::after {
 
 /* Cards */
 .card-bar { image-rendering: pixelated; height: 3px; }
+.board-card { min-height: 180px; }
 .card-layer { position: relative; z-index: 1; }
 .card-has-cover {
     background-size: cover;
@@ -43,6 +44,9 @@ body::after {
     background-repeat: no-repeat;
     overflow: hidden;
 }
+.card-group.card-has-cover {
+    overflow: visible;
+}
 .card-cover-overlay {
     position: absolute;
     inset: 0;
@@ -74,7 +78,10 @@ body::after {
     right: -6px;
     min-width: 20px;
     height: 20px;
-    border-radius: 10px;
+    padding: 0 6px;
+    border-radius: 999px;
+    box-sizing: border-box;
+    white-space: nowrap;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -185,6 +192,61 @@ body.detail-zen-open { overflow: hidden; }
 .overlay:not(.open) { opacity: 0; pointer-events: none; }
 .overlay.open { opacity: 1; }
 
+/* Detail image fullscreen */
+body.detail-image-fs-open { overflow: hidden; }
+#detail-body img { cursor: zoom-in; }
+.detail-image-fs-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 170;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: rgba(2, 6, 23, 0.94);
+}
+.detail-image-fs-overlay.open { display: flex; }
+.detail-image-fs-stage {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.detail-image-fs-img {
+    max-width: min(96vw, 1900px);
+    max-height: 94vh;
+    object-fit: contain;
+    border: 1px solid var(--t-border);
+    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
+    cursor: grab;
+    user-select: none;
+    -webkit-user-drag: none;
+    will-change: transform;
+}
+.detail-image-fs-overlay.dragging .detail-image-fs-img { cursor: grabbing; }
+.detail-image-fs-close {
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 171;
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #fff;
+    font-family: inherit;
+    cursor: pointer;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+    transition: color 0.12s, transform 0.12s;
+}
+.detail-image-fs-close:hover {
+    color: var(--t-accent);
+    transform: scale(1.06);
+}
+
 /* Theme picker */
 .theme-picker { position: relative; }
 .theme-menu { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 200; }
@@ -201,6 +263,14 @@ body.detail-zen-open { overflow: hidden; }
 }
 .bucket-tab.drag-over i,
 .bucket-tab.drag-over span { color: inherit !important; }
+.bucket-add.drag-over {
+    background: var(--t-accent) !important;
+    color: var(--t-bg) !important;
+    transform: scale(1.05);
+    transition: all 0.15s ease;
+}
+.bucket-add.drag-over i,
+.bucket-add.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; }
 
@@ -321,3 +391,45 @@ body.detail-zen-open { overflow: hidden; }
 .prose table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
 .prose th, .prose td { border: 1px solid var(--t-border); padding: 0.4em 0.8em; text-align: left; }
 .prose th { background: var(--t-raised); color: var(--t-bright); font-weight: 600; }
+
+/* Temporary reading aid in open detail view (not persisted) */
+#detail-body .detail-reading-resize {
+    position: relative;
+    padding-bottom: 1rem;
+    min-height: 1.8em;
+}
+#detail-body .detail-reading-resize:hover,
+#detail-body .detail-reading-resize.resizing {
+    outline: 1px dashed var(--t-border);
+    outline-offset: 1px;
+}
+#detail-body .detail-font-dragline {
+    position: absolute;
+    left: 0.4rem;
+    right: 0.4rem;
+    bottom: 0.2rem;
+    height: 10px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: ns-resize;
+    opacity: 0;
+    transition: opacity 0.12s ease;
+}
+#detail-body .detail-font-dragline::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 4px;
+    border-top: 1px dashed var(--t-border);
+    transition: border-color 0.12s ease;
+}
+#detail-body .detail-reading-resize:hover .detail-font-dragline,
+#detail-body .detail-reading-resize.resizing .detail-font-dragline {
+    opacity: 1;
+}
+#detail-body .detail-font-dragline:hover::before,
+#detail-body .detail-reading-resize.resizing .detail-font-dragline::before {
+    border-color: var(--t-accent);
+}