Postit
This commit is contained in:
+28
-81
@@ -90,61 +90,51 @@ $categories = [
|
||||
/* --- Realistische Echte Post-it Sticky Note Styling (Conform referentie linksboven) --- */
|
||||
.postit-note {
|
||||
position: relative;
|
||||
border-radius: 2px 2px 2px 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: 38px;
|
||||
height: 38px;
|
||||
/* Subtiel opkrullend effect met highlight en slagschaduw */
|
||||
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: 64px;
|
||||
height: 56px;
|
||||
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: 6px 6px 12px -2px rgba(0, 0, 0, 0.3);
|
||||
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
||||
}
|
||||
|
||||
/* Donkere modus aanpassing voor de opkrulflap */
|
||||
.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: 6px 6px 14px -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: -12px;
|
||||
left: 28px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: -16px;
|
||||
left: 22px;
|
||||
width: 38px;
|
||||
height: 33px;
|
||||
background-image: url('/assets/images/postit_pin.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
z-index: 25;
|
||||
filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -247,51 +237,8 @@ $categories = [
|
||||
oncontextmenu="openCardContextMenu(event, <?= $cardJson ?>); return false;"
|
||||
class="brainstorm-card postit-note group relative p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> transition-all duration-150 cursor-grab active:cursor-grabbing hover:-translate-y-1 flex flex-col justify-between"
|
||||
>
|
||||
<!-- Realistische 3D Rode Punaise (Pushpin) met metalen pin & schaduw conform referentie linksboven -->
|
||||
<div class="postit-pin" aria-hidden="true">
|
||||
<svg viewBox="0 0 28 32" class="w-full h-full overflow-visible">
|
||||
<defs>
|
||||
<!-- Schaduw van de naald op het papier -->
|
||||
<filter id="pinNeedleShadow" x="-20%" y="-20%" width="160%" height="160%">
|
||||
<feDropShadow dx="3" dy="4" stdDeviation="1.5" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
<!-- Radiaal verloop voor de bolle kop van de punaise -->
|
||||
<radialGradient id="pinHeadGrad" 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>
|
||||
<!-- Verloop voor de hals en basis ring van de punaise -->
|
||||
<linearGradient id="pinBodyGrad" 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>
|
||||
<!-- Glans highlight op de kop -->
|
||||
<linearGradient id="pinHighlight" 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>
|
||||
<!-- Metalen naald die schuin in het papier prikt -->
|
||||
<path d="M14 20 L21 30" stroke="#71717a" stroke-width="2.5" stroke-linecap="round" filter="url(#pinNeedleShadow)"/>
|
||||
<path d="M14 20 L20.5 29.5" stroke="#e4e4e7" stroke-width="1.2" stroke-linecap="round"/>
|
||||
|
||||
<!-- Onderste rand / ring van de punaisekop -->
|
||||
<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(#pinBodyGrad)"/>
|
||||
|
||||
<!-- Getailleerde taille / hals van de punaise -->
|
||||
<path d="M9 14 C9 17, 10 18.5, 14 18.5 C18 18.5, 19 17, 19 14 Z" fill="url(#pinBodyGrad)"/>
|
||||
|
||||
<!-- Bolle kop van de punaise (rood met 3D glans) -->
|
||||
<circle cx="14" cy="11" r="7.5" fill="url(#pinHeadGrad)"/>
|
||||
<!-- Reflectie highlight linksboven op de ronde kop -->
|
||||
<ellipse cx="11.5" cy="8.5" rx="3" ry="1.8" fill="url(#pinHighlight)" transform="rotate(-30 11.5 8.5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Echte Rode Punaise rechtstreeks uit referentieafbeelding -->
|
||||
<div class="postit-pin" aria-hidden="true"></div>
|
||||
|
||||
<!-- Top: Checkbox voor selectie + Roadmap badge -->
|
||||
<div class="flex items-center justify-between gap-2 mb-2">
|
||||
|
||||
Reference in New Issue
Block a user