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
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:
10 files changed
+865
-9
No files matched your search
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user