mates
dc17fa0f0f
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 44s
CI / Playwright E2E tests (push) Successful in 2m4s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
476 lines
14 KiB
SCSS
476 lines
14 KiB
SCSS
.wheel-confetti {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2000; // nad modalem (bootstrap 1055)
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
|
|
> span {
|
|
position: absolute;
|
|
will-change: transform, opacity;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
|
|
@keyframes confetti-throw {
|
|
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
|
|
6% { opacity: 1; }
|
|
38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
|
|
88% { opacity: 1; }
|
|
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
|
|
}
|
|
|
|
// Déšť: plynulý pád shora s mírným houpáním
|
|
@keyframes confetti-rain {
|
|
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
|
|
8% { opacity: 1; }
|
|
40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
|
|
88% { opacity: 1; }
|
|
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
|
|
}
|
|
|
|
// Samolepky Umamusume — stín pro čitelnost na libovolném pozadí
|
|
.confetti-uma {
|
|
filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
|
|
}
|
|
|
|
.confetti-uma-emoji {
|
|
line-height: 1;
|
|
}
|
|
|
|
.confetti-uma-badge {
|
|
padding: 4px 14px;
|
|
border-radius: 999px;
|
|
border: 3px solid #fff;
|
|
color: #fff;
|
|
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
font-weight: 900;
|
|
font-size: 1.15rem;
|
|
white-space: nowrap;
|
|
text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
|
|
box-shadow: 0 4px 0 rgb(0 0 0 / 0.15);
|
|
}
|
|
|
|
.confetti-uma-img img {
|
|
width: 92px;
|
|
height: auto;
|
|
}
|
|
|
|
// Portréty (bez průhlednosti) jako kulaté samolepky s barevným lemem
|
|
.confetti-uma-img.round img,
|
|
.confetti-uma-voice img.round {
|
|
width: 84px;
|
|
height: 84px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
border: 4px solid #fff;
|
|
box-shadow: 0 0 0 3px #ff6fa3, 0 4px 8px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
.confetti-uma-voice img.round {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.confetti-uma-banner {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 12px 48px;
|
|
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
font-weight: 900;
|
|
font-size: clamp(2rem, 7vw, 4rem);
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #e84d86, #ff6fa3);
|
|
clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
|
|
text-shadow: 0 3px 0 rgb(0 0 0 / 0.2);
|
|
border-top: 5px solid #ffc531;
|
|
border-bottom: 5px solid #ffc531;
|
|
animation: uma-banner 1.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
|
|
}
|
|
|
|
@keyframes uma-banner {
|
|
0% { transform: translate(-150%, -50%) skewX(-12deg); opacity: 0; }
|
|
25% { transform: translate(-50%, -50%) skewX(-12deg); opacity: 1; }
|
|
75% { transform: translate(-50%, -50%) skewX(-12deg) scale(1.04); opacity: 1; }
|
|
100% { transform: translate(60%, -50%) skewX(-12deg); opacity: 0; }
|
|
}
|
|
|
|
// „Hláška" postavy při finálním výsledku
|
|
.confetti-uma-voice {
|
|
position: absolute;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
max-width: min(460px, calc(100vw - 32px));
|
|
animation: uma-voice 4.6s ease both;
|
|
|
|
img {
|
|
flex: none;
|
|
width: 110px;
|
|
height: auto;
|
|
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3));
|
|
}
|
|
}
|
|
|
|
.confetti-uma-bubble {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
padding: 12px 16px;
|
|
background: #fff;
|
|
color: #1d3322;
|
|
border: 3px solid #ff6fa3;
|
|
border-radius: 18px;
|
|
box-shadow: 0 4px 0 #e84d86;
|
|
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-weight: 800;
|
|
font-size: 0.95rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
small {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: #e84d86;
|
|
font-weight: 800;
|
|
}
|
|
|
|
// ocásek bubliny směrem k postavě
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -14px;
|
|
bottom: 14px;
|
|
border: 8px solid transparent;
|
|
border-right: 10px solid #ff6fa3;
|
|
}
|
|
}
|
|
|
|
@keyframes uma-voice {
|
|
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
|
|
10% { opacity: 1; transform: translateY(0) scale(1.03); }
|
|
15% { transform: translateY(0) scale(1); }
|
|
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);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Konfety ve stylu Hell Girl
|
|
// ============================================
|
|
.confetti-hg {
|
|
filter: drop-shadow(0 0 6px rgb(200 16 46 / 0.55)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.3));
|
|
}
|
|
|
|
.confetti-hg-badge {
|
|
padding: 4px 14px;
|
|
border: 1px solid #c8102e;
|
|
outline: 1px solid rgb(200 16 46 / 0.4);
|
|
outline-offset: 2px;
|
|
color: #fff4ee;
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
font-weight: 800;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 1px;
|
|
white-space: nowrap;
|
|
text-shadow: 0 0 8px rgb(232 52 79 / 0.7);
|
|
}
|
|
|
|
// Nápis „poslání do pekla" — černá deska s rudým lemem, vynoří se z mlhy
|
|
.confetti-hg-banner {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 14px 48px;
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
font-weight: 800;
|
|
font-size: clamp(2rem, 7vw, 4rem);
|
|
letter-spacing: 0.3em;
|
|
white-space: nowrap;
|
|
color: #fff4ee;
|
|
background: linear-gradient(90deg, transparent, #12070a 15%, #12070a 85%, transparent);
|
|
border-top: 2px solid #c8102e;
|
|
border-bottom: 2px solid #c8102e;
|
|
text-shadow: 0 0 18px rgb(232 52 79 / 0.9), 0 0 4px #c8102e;
|
|
animation: hg-banner 2.6s ease both;
|
|
}
|
|
|
|
@keyframes hg-banner {
|
|
0% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; filter: blur(12px); }
|
|
25% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
|
75% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
|
|
100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0; filter: blur(8px); }
|
|
}
|
|
|
|
// Postava s hláškou — tmavý odznak s rudou září a bublina jako svitek
|
|
.confetti-hellgirl-voice {
|
|
.confetti-mlp-avatar {
|
|
border-color: #12070a;
|
|
background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
|
|
box-shadow: 0 0 0 3px var(--mlp-speaker, #c8102e), 0 0 18px rgb(200 16 46 / 0.6);
|
|
}
|
|
|
|
.confetti-mlp-bubble {
|
|
background: #170c0f;
|
|
color: #f3e6e2;
|
|
border: 1px solid var(--mlp-speaker, #c8102e);
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 16px rgb(0 0 0 / 0.6), 0 0 10px rgb(200 16 46 / 0.3);
|
|
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Konfety ve stylu K-ON!
|
|
// ============================================
|
|
.confetti-kon {
|
|
filter: drop-shadow(0 3px 3px rgb(39 49 95 / 0.25));
|
|
}
|
|
|
|
// Samolepky jako na pouzdru kytary — bílý okraj a lehce natočené
|
|
.confetti-kon-badge {
|
|
padding: 4px 14px;
|
|
border-radius: 10px;
|
|
border: 3px solid #fff;
|
|
color: #fff;
|
|
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
|
font-weight: 900;
|
|
font-size: 1.05rem;
|
|
white-space: nowrap;
|
|
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
|
box-shadow: 0 3px 0 rgb(39 49 95 / 0.25);
|
|
}
|
|
|
|
// Nápis „Houkago Tea Time" — vstupenka na školní koncert s notovou osnovou
|
|
.confetti-kon-banner {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 14px 44px;
|
|
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
|
font-weight: 900;
|
|
font-size: clamp(1.6rem, 6vw, 3.4rem);
|
|
white-space: nowrap;
|
|
color: #27315f;
|
|
border-radius: 18px;
|
|
background:
|
|
repeating-linear-gradient(180deg, transparent 0 9px, rgb(39 49 95 / 0.12) 9px 10px) center / 100% 50px no-repeat,
|
|
#fffaf0;
|
|
border: 4px solid #27315f;
|
|
box-shadow: 0 0 0 6px #fffaf0, 0 0 0 9px #d43f62, 0 12px 26px rgb(0 0 0 / 0.25);
|
|
animation: kon-banner 2.2s cubic-bezier(0.3, 1.5, 0.5, 1) both;
|
|
}
|
|
|
|
// Vyskočí do rytmu (raz-dva) a odplave nahoru
|
|
@keyframes kon-banner {
|
|
0% { transform: translate(-50%, -50%) scale(0.3) rotate(6deg); opacity: 0; }
|
|
18% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); opacity: 1; }
|
|
28% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
|
|
40% { transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); }
|
|
50% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
|
|
80% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
|
|
100% { transform: translate(-50%, -150%) scale(0.9) rotate(-2deg); opacity: 0; }
|
|
}
|
|
|
|
// Postava s hláškou — krémový odznak a bublina jako stránka notového sešitu
|
|
.confetti-kon-voice {
|
|
.confetti-mlp-avatar {
|
|
background: radial-gradient(circle at 40% 35%, #fffaf0, #fbe6c8);
|
|
box-shadow: 0 0 0 4px var(--mlp-speaker, #d43f62), 0 4px 10px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
.confetti-mlp-bubble {
|
|
background:
|
|
repeating-linear-gradient(180deg, transparent 0 21px, rgb(39 49 95 / 0.08) 21px 22px),
|
|
#fffaf0;
|
|
color: #27315f;
|
|
border-radius: 16px;
|
|
font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
|
|
|
|
p {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Konfety ve stylu Bocchi the Rock!
|
|
// ============================================
|
|
.confetti-bocchi {
|
|
filter: drop-shadow(3px 3px 0 rgb(29 26 34 / 0.85));
|
|
}
|
|
|
|
// Samolepky z flyeru live house — černá linka a tvrdý stín
|
|
.confetti-bocchi-badge {
|
|
padding: 4px 14px;
|
|
border-radius: 6px;
|
|
border: 3px solid #1d1a22;
|
|
color: #fff;
|
|
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
|
font-size: 1.05rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Nápis „Kessoku Band" — žlutá samolepka s růžovým stínem, při dopadu se zachvěje jako Bocchi
|
|
.confetti-bocchi-banner {
|
|
position: absolute;
|
|
top: 38%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 12px 40px;
|
|
font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif;
|
|
font-size: clamp(1.8rem, 7vw, 4rem);
|
|
white-space: nowrap;
|
|
color: #1d1a22;
|
|
background: #ffcf33;
|
|
border: 5px solid #1d1a22;
|
|
border-radius: 10px;
|
|
box-shadow: 10px 10px 0 #e0457b, 18px 18px 0 #1d1a22;
|
|
animation: bocchi-banner 2.4s ease both;
|
|
}
|
|
|
|
@keyframes bocchi-banner {
|
|
0% { transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); opacity: 0; }
|
|
14% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
|
|
17% { transform: translate(calc(-50% - 6px), -50%) rotate(-3deg); }
|
|
20% { transform: translate(calc(-50% + 6px), -50%) rotate(-3deg); }
|
|
23% { transform: translate(calc(-50% - 3px), -50%) rotate(-3deg); }
|
|
26%, 80% { transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
|
|
100% { transform: translate(-50%, 60%) rotate(4deg); opacity: 0; }
|
|
}
|
|
|
|
// Postava s hláškou — hranatý odznak a bublina jako z mangy s tvrdým stínem
|
|
.confetti-bocchi-voice {
|
|
.confetti-mlp-avatar {
|
|
border-radius: 12px;
|
|
border: 3px solid #1d1a22;
|
|
background: #ffcf33;
|
|
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
|
}
|
|
|
|
.confetti-mlp-bubble {
|
|
background: #fff;
|
|
color: #1d1a22;
|
|
border: 3px solid #1d1a22;
|
|
border-radius: 10px;
|
|
box-shadow: 5px 5px 0 var(--mlp-speaker, #e0457b);
|
|
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
|
|
p {
|
|
font-weight: 800;
|
|
}
|
|
|
|
&::before {
|
|
border-right-color: #1d1a22;
|
|
}
|
|
}
|
|
}
|