feat: přidání vzhledu My Little Pony
CI / Generate TypeScript types (push) Successful in 11s
CI / Build server (push) Successful in 30s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 1m53s
CI / Server unit tests (push) Successful in 27s
CI / Build and push Docker image (push) Successful in 57s
CI / Notify (push) Successful in 2s

This commit is contained in:
mates committed 2026-10-12 11:04:54 +02:00
1 parent bf631eb913
commit 93d86fe0a5
10 files changed
+865 -9

No files matched your search

+99
View File
@@ -161,3 +161,102 @@
85% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(20px); }
}
// ============================================
// Konfety ve stylu My Little Pony
// ============================================
.confetti-mlp {
filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}
.confetti-mlp-badge {
padding: 4px 14px;
border-radius: 999px;
border: 3px solid #fff;
color: #fff;
font-family: 'Fredoka', 'Nunito', sans-serif;
font-weight: 700;
font-size: 1.1rem;
white-space: nowrap;
text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
box-shadow: 0 0 12px rgb(255 255 255 / 0.7), 0 4px 0 rgb(0 0 0 / 0.15);
}
// Duhový nápis „Sonic Rainboom" přes celou obrazovku
.confetti-mlp-banner {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
padding: 12px 44px;
font-family: 'Fredoka', 'Nunito', sans-serif;
font-weight: 700;
font-size: clamp(1.8rem, 6.5vw, 3.6rem);
white-space: nowrap;
color: #fff;
border-radius: 999px;
background: linear-gradient(90deg, #ee4144, #f37033, #e3b829, #62bc4d, #1e98d3, #672f89);
border: 5px solid #fff;
text-shadow: 0 3px 0 rgb(0 0 0 / 0.25);
box-shadow: 0 0 30px rgb(236 61 143 / 0.5), 0 8px 0 rgb(0 0 0 / 0.12);
animation: mlp-banner 2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes mlp-banner {
0% { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); opacity: 0; }
25% { transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1; }
35% { transform: translate(-50%, -50%) scale(1); }
75% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
100% { transform: translate(-50%, -160%) scale(0.9); opacity: 0; }
}
// Postava s hláškou — místo obrázku kulatý „cutie mark" s emoji
.confetti-mlp-avatar {
flex: none;
display: grid;
place-items: center;
width: 84px;
height: 84px;
margin-bottom: 8px;
font-size: 46px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #f6ecff);
border: 4px solid #fff;
box-shadow: 0 0 0 4px var(--mlp-speaker, #8e4fd1), 0 4px 10px rgb(0 0 0 / 0.3);
}
.confetti-mlp-bubble {
position: relative;
margin-bottom: 40px;
padding: 12px 16px;
background: #fff;
color: #2e1f47;
border: 3px solid var(--mlp-speaker, #8e4fd1);
border-radius: 22px;
box-shadow: 0 4px 0 var(--mlp-speaker, #8e4fd1);
font-family: 'Fredoka', 'Nunito', sans-serif;
p {
margin: 0;
font-weight: 600;
font-size: 1rem;
line-height: 1.35;
}
small {
display: block;
margin-top: 4px;
color: var(--mlp-speaker, #8e4fd1);
font-weight: 700;
}
// ocásek bubliny směrem k postavě
&::before {
content: '';
position: absolute;
left: -14px;
bottom: 14px;
border: 8px solid transparent;
border-right: 10px solid var(--mlp-speaker, #8e4fd1);
}
}