Postit
This commit is contained in:
@@ -25,59 +25,51 @@ $isAdmin = ($userRole === 'ADMIN');
|
||||
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
|
||||
.postit-note {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
/* Uitgesproken, zachte schaduw zoals in referentie */
|
||||
border-radius: 2px 2px 0 2px;
|
||||
box-shadow:
|
||||
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);
|
||||
0 1px 3px rgba(0, 0, 0, 0.05),
|
||||
0 6px 14px -2px rgba(0, 0, 0, 0.10),
|
||||
0 16px 26px -6px rgba(0, 0, 0, 0.12),
|
||||
6px 14px 18px -4px rgba(0, 0, 0, 0.15);
|
||||
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 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);
|
||||
0 3px 6px rgba(0, 0, 0, 0.08),
|
||||
0 10px 20px -3px rgba(0, 0, 0, 0.14),
|
||||
0 22px 32px -6px rgba(0, 0, 0, 0.16),
|
||||
8px 18px 22px -4px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
/* De opkrullende flap rechtsonder met realistische 3D vouw en diepe slagschaduw */
|
||||
/* De echte opkrullende flap rechtsonder rechtstreeks uit de referentieafbeelding */
|
||||
.postit-note::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background:
|
||||
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;
|
||||
bottom: -18px;
|
||||
right: -16px;
|
||||
width: 60px;
|
||||
height: 52px;
|
||||
background-image: url('/assets/images/postit_curl_corner.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.3);
|
||||
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.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 */
|
||||
/* 3D Rode Punaise (Pushpin) linksboven rechtstreeks uit de referentieafbeelding */
|
||||
.postit-pin {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -15px;
|
||||
left: 18px;
|
||||
width: 36px;
|
||||
height: 31px;
|
||||
background-image: url('/assets/images/postit_pin.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
z-index: 25;
|
||||
filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -850,36 +842,8 @@ 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"
|
||||
>
|
||||
<!-- Realistische 3D Rode Punaise conform referentie linksboven -->
|
||||
<div class="postit-pin" aria-hidden="true">
|
||||
<svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
|
||||
<defs>
|
||||
<radialGradient id="boardPinHeadGrad" cx="35%" cy="30%" r="65%">
|
||||
<stop offset="0%" stop-color="#ff8585"/>
|
||||
<stop offset="35%" stop-color="#dc2626"/>
|
||||
<stop offset="85%" stop-color="#991b1b"/>
|
||||
<stop offset="100%" stop-color="#5a0b0b"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="boardPinBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#b91c1c"/>
|
||||
<stop offset="40%" stop-color="#ef4444"/>
|
||||
<stop offset="80%" stop-color="#991b1b"/>
|
||||
<stop offset="100%" stop-color="#7f1d1d"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="boardPinHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<ellipse cx="14" cy="19" rx="7" ry="2.8" fill="#7f1d1d"/>
|
||||
<ellipse cx="14" cy="18" rx="6.5" ry="2.5" fill="url(#boardPinBodyGrad)"/>
|
||||
<path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#boardPinBodyGrad)"/>
|
||||
<circle cx="14" cy="11" r="7.5" fill="url(#boardPinHeadGrad)"/>
|
||||
<ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#boardPinHighlight)" transform="rotate(-30 11.5 8.5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Realistische Rode Punaise rechtstreeks uit referentieafbeelding -->
|
||||
<div class="postit-pin" aria-hidden="true"></div>
|
||||
|
||||
<div class="flex items-start justify-between gap-1.5 mb-1.5">
|
||||
<h4 class="text-xs font-bold leading-snug line-clamp-2 break-words">
|
||||
|
||||
Reference in New Issue
Block a user