diff --git a/board.php b/board.php index d8d7c6f..efda77f 100644 --- a/board.php +++ b/board.php @@ -22,55 +22,62 @@ $isAdmin = ($userRole === 'ADMIN'); width: 100% !important; } -/* --- Realistische Echte Post-it Sticky Note Styling --- */ +/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */ .postit-note { position: relative; - border-top-left-radius: 2px; - border-top-right-radius: 3px; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 14px; + border-radius: 2px; + /* Uitgesproken, zachte schaduw zoals in referentie */ box-shadow: - 0 1px 1px rgba(0, 0, 0, 0.08), - 0 4px 6px -1px rgba(0, 0, 0, 0.08), - 0 10px 18px -4px rgba(0, 0, 0, 0.12), - -2px 6px 8px -2px rgba(0, 0, 0, 0.08); + 0 2px 4px rgba(0, 0, 0, 0.06), + 0 8px 16px -2px rgba(0, 0, 0, 0.12), + 0 18px 28px -6px rgba(0, 0, 0, 0.14), + 8px 16px 20px -4px rgba(0, 0, 0, 0.18); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; } .postit-note:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: - 0 2px 4px rgba(0, 0, 0, 0.06), - 0 8px 12px -2px rgba(0, 0, 0, 0.12), - 0 16px 24px -4px rgba(0, 0, 0, 0.16), - -4px 8px 12px -2px rgba(0, 0, 0, 0.12); + 0 4px 8px rgba(0, 0, 0, 0.08), + 0 12px 22px -3px rgba(0, 0, 0, 0.16), + 0 24px 34px -6px rgba(0, 0, 0, 0.18), + 10px 20px 24px -4px rgba(0, 0, 0, 0.22); } -/* Echte sticky note curl & schaduw links onder */ + +/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */ .postit-note::after { content: ''; position: absolute; bottom: -1px; - left: -1px; - width: 24px; - height: 24px; + right: -1px; + width: 34px; + height: 34px; background: - linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%), - linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%); - border-bottom-left-radius: 4px; + linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.28) 60%, transparent 68%), + linear-gradient(225deg, #fef08a 0%, #facc15 48%, transparent 52%); + border-bottom-right-radius: 2px; pointer-events: none; - z-index: 5; + z-index: 10; + box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.3); + clip-path: polygon(100% 0, 0 100%, 100% 100%); } -/* Subtiele klevende plakrand aan de bovenkant */ -.postit-note::before { - content: ''; + +.dark .postit-note::after { + background: + linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 68%), + linear-gradient(225deg, #eab308 0%, #ca8a04 48%, transparent 52%); + box-shadow: 5px 5px 12px -2px rgba(0, 0, 0, 0.6); +} + +/* 3D Rode Punaise (Pushpin) linksboven met naald en schaduw conform de afbeelding */ +.postit-pin { position: absolute; - top: 0; - left: 0; - right: 0; - height: 6px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent); - border-top-left-radius: 2px; - border-top-right-radius: 3px; + top: -10px; + left: 20px; + width: 22px; + height: 22px; pointer-events: none; + z-index: 25; + filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.35)); } @@ -843,6 +850,37 @@ function renderCards() { oncontextmenu="openBoardCardContextMenu(event, ${card.id}); return false;" class="group/card relative p-3 rounded-xl border ${colorClass} shadow-2xs hover:shadow-md hover:-translate-y-0.5 transition cursor-grab active:cursor-grabbing mb-2.5 postit-note" > + + +

${escapeHtml(card.title)} diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php index 104c205..d90c570 100644 --- a/brainstorm_canvas.php +++ b/brainstorm_canvas.php @@ -87,55 +87,64 @@ $categories = [ ?> @@ -238,6 +247,51 @@ $categories = [ oncontextmenu="openCardContextMenu(event, ); return false;" class="brainstorm-card postit-note group relative p-4 border transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between" > + +
@@ -653,12 +707,18 @@ $categories = [
- + + + + + +
@@ -2028,7 +2059,7 @@ if ($isAjaxRequest) {
-