Niu Lai (牛来)
Released
Walk the Chinese animation 牛来 as a crooked 3D calf: eat grass, fear the snake, feed the leopard, finish the migration
hud.razor.scss
Hud
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: "Microsoft YaHei UI", "Microsoft YaHei", "SimHei", "Noto Sans SC", sans-serif;
color: #f4e6c4;
overflow: hidden;
.root
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.screen
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: all;
}
.title
{
background-color: #f4ead4;
background-image: url( ui/thumbs/title_wide.png );
background-size: cover;
overflow: hidden;
}
.title-wide
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.title-tall
{
position: absolute;
top: 20px;
right: 18px;
bottom: 20px;
width: 210px;
border: 3px solid #1a0c0c;
background-image: url( ui/thumbs/poster_tall.png );
background-size: cover;
background-position: center;
}
.title-stamp
{
position: absolute;
left: 16px;
bottom: 16px;
width: 148px;
height: 148px;
border: 3px solid #1a0c0c;
background-image: url( ui/thumbs/icon_square.png );
background-size: cover;
}
.title-wash
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 58%;
background-color: #140808cc;
}
.title-stack
{
position: relative;
flex-direction: column;
align-items: center;
padding: 24px 40px 20px;
max-width: 720px;
}
.seal
{
font-size: 15px;
color: #e8c040;
letter-spacing: 3px;
margin-bottom: 4px;
}
.studio
{
font-size: 14px;
color: #c9a070;
margin-bottom: 10px;
}
.loading
{
font-size: 13px;
color: #8a6a4a;
margin-bottom: 18px;
}
.title-cn
{
font-size: 96px;
font-weight: 800;
color: #f2d27a;
text-shadow: 4px 6px 0 #5a1010;
letter-spacing: 18px;
}
.title-en
{
font-size: 28px;
color: #f0e0b0;
margin-top: -6px;
margin-bottom: 14px;
}
.tag
{
font-size: 20px;
color: #ffd36a;
margin-bottom: 4px;
}
.tag-en
{
font-size: 14px;
color: #b89a6a;
margin-bottom: 16px;
}
.poster-note
{
font-size: 13px;
color: #d8c4a0;
}
.poster-note.en
{
color: #9a8060;
margin-bottom: 22px;
}
.menu-links
{
flex-direction: column;
align-items: center;
gap: 8px;
}
.btn
{
padding: 10px 28px;
background-color: #5a1818;
border: 2px solid #e8c040;
color: #f4e6c4;
font-size: 18px;
min-width: 240px;
justify-content: center;
cursor: pointer;
}
.btn.primary
{
background-color: #8a1c1c;
color: #ffe9a0;
}
.btn:hover
{
background-color: #b42828;
}
.ver
{
position: absolute;
bottom: 16px;
right: 20px;
font-size: 12px;
color: #8a6a4a;
}
.pause, .ending
{
background-color: #000000aa;
}
.end-poster
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 32%;
height: 100%;
background-image: url( ui/thumbs/poster_tall.png );
background-size: cover;
background-position: center;
}
.end-stamp, .pause-stamp
{
width: 96px;
height: 96px;
border: 2px solid #e8c040;
margin-bottom: 10px;
background-image: url( ui/thumbs/icon_square.png );
background-size: cover;
}
.panel, .end-card
{
flex-direction: column;
align-items: center;
padding: 28px 36px;
background-color: #2a1010ee;
border: 3px solid #e8c040;
min-width: 420px;
}
.panel-title, .end-title
{
font-size: 32px;
color: #f2d27a;
margin-bottom: 8px;
}
.end-sub
{
font-size: 14px;
color: #b89a6a;
margin-bottom: 16px;
}
.end-line
{
font-size: 16px;
color: #f4e6c4;
margin-bottom: 2px;
}
.end-line.en
{
font-size: 13px;
color: #9a8060;
margin-bottom: 8px;
}
.end-stat
{
font-size: 14px;
color: #e8c040;
margin: 12px 0 16px;
}
.play
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.top
{
position: absolute;
top: 16px;
left: 18px;
right: 18px;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.quest
{
flex-direction: column;
padding: 8px 14px;
background-color: #1a0c0ccc;
border-left: 4px solid #e8c040;
max-width: 520px;
}
.q-cn
{
font-size: 18px;
color: #ffe9a0;
}
.q-en
{
font-size: 13px;
color: #b89a6a;
}
.meters
{
flex-direction: row;
gap: 10px;
}
.meter
{
flex-direction: column;
padding: 6px 10px;
background-color: #1a0c0ccc;
min-width: 110px;
align-items: flex-end;
}
.m-k
{
font-size: 11px;
color: #b89a6a;
}
.m-v
{
font-size: 16px;
color: #ffe9a0;
}
.banner
{
position: absolute;
top: 86px;
left: 0;
right: 0;
justify-content: center;
font-size: 14px;
color: #ffd0d0;
background-color: #6a1010cc;
padding: 4px 0;
}
.talk
{
position: absolute;
left: 80px;
right: 80px;
bottom: 48px;
flex-direction: column;
padding: 16px 22px;
background-color: #140808ee;
border: 2px solid #e8c040;
pointer-events: none;
}
.talk .who
{
font-size: 14px;
color: #e8c040;
margin-bottom: 6px;
}
.talk .cn
{
font-size: 22px;
color: #fff4d8;
}
.talk .en
{
font-size: 15px;
color: #b89a6a;
margin-top: 4px;
}
.talk .next
{
font-size: 12px;
color: #8a6a4a;
margin-top: 8px;
}
.bark
{
position: absolute;
left: 100px;
right: 100px;
bottom: 118px;
flex-direction: column;
align-items: center;
padding: 8px 16px;
background-color: #140808cc;
pointer-events: none;
}
.bark .who
{
font-size: 12px;
color: #e8c040;
}
.bark .cn
{
font-size: 18px;
color: #fff4d8;
}
.bark .en
{
font-size: 13px;
color: #b89a6a;
}
.prompt
{
position: absolute;
bottom: 72px;
left: 0;
right: 0;
align-items: center;
flex-direction: column;
}
.prompt .cn
{
font-size: 20px;
color: #ffe9a0;
text-shadow: 0 2px 0 #000;
}
.prompt .en
{
font-size: 13px;
color: #c9b080;
}
.help
{
position: absolute;
bottom: 12px;
left: 18px;
font-size: 12px;
color: #8a6a4a;
}
.ach
{
position: absolute;
right: 18px;
bottom: 44px;
flex-direction: column;
padding: 10px 16px;
background-color: #2a1010ee;
border: 2px solid #e8c040;
min-width: 260px;
max-width: 360px;
pointer-events: none;
}
.ach-k
{
font-size: 11px;
color: #e8c040;
letter-spacing: 2px;
margin-bottom: 4px;
}
.ach-t
{
font-size: 18px;
color: #ffe9a0;
}
.ach-d
{
font-size: 13px;
color: #b89a6a;
margin-top: 2px;
}
.letter-top, .letter-bot
{
position: absolute;
left: 0;
right: 0;
height: 72px;
background-color: #000000;
pointer-events: none;
}
.letter-top { top: 0; }
.letter-bot { bottom: 0; }
.cut-card
{
position: absolute;
left: 0;
right: 0;
top: 28%;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.cut-k
{
font-size: 12px;
color: #e8c040;
letter-spacing: 3px;
margin-bottom: 8px;
}
.cut-cn
{
font-size: 36px;
color: #ffe9a0;
text-shadow: 3px 4px 0 #5a1010;
}
.cut-en
{
font-size: 16px;
color: #b89a6a;
margin-top: 4px;
}
.cut-skip
{
font-size: 12px;
color: #8a6a4a;
margin-top: 14px;
}
}