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
77 lines
1.9 KiB
SCSS
77 lines
1.9 KiB
SCSS
// Kulatý portrét postavy vedle jména strávníka s více jídly (styl Umamusume)
|
|
.eater-badge {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: cover;
|
|
flex: none;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 0 0 2px #ff6fa3;
|
|
cursor: help;
|
|
transition: transform 0.2s ease;
|
|
|
|
&:hover {
|
|
transform: scale(2);
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
// Styl My Little Pony: cutie mark s emoji v kulatém odznaku
|
|
.eater-badge-mlp {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
background: radial-gradient(circle at 35% 30%, #fff, #f6ecff);
|
|
box-shadow: 0 0 0 2px #8e4fd1;
|
|
}
|
|
|
|
// Styl Hell Girl: emoji v černém odznaku s rudým lemem (rudá nit)
|
|
.eater-badge-hellgirl {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
border-color: #1c1012;
|
|
background: radial-gradient(circle at 50% 60%, #3a0d16, #12070a);
|
|
box-shadow: 0 0 0 2px #c8102e, 0 0 6px rgb(200 16 46 / 0.5);
|
|
}
|
|
|
|
// Styl K-ON!: emoji na krémovém „trsátku" s lemem v barvě kytary Gitah (cherry sunburst)
|
|
.eater-badge-kon {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
|
|
background: radial-gradient(circle at 40% 35%, #fffaf0, #fbe6c8);
|
|
box-shadow: 0 0 0 2px #d43f62, 0 2px 0 3px #27315f;
|
|
}
|
|
|
|
// Styl Bocchi the Rock!: emoji na žluté samolepce s černou linkou a růžovým stínem
|
|
.eater-badge-bocchi {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
border-radius: 6px;
|
|
border-color: #1d1a22;
|
|
background: #ffe066;
|
|
box-shadow: 2px 2px 0 #e0457b;
|
|
transform: rotate(-4deg);
|
|
|
|
&:hover {
|
|
transform: rotate(0deg) scale(2);
|
|
}
|
|
}
|
|
|
|
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
|
.user-info:has(.eater-badge) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|