Pixel Pusher
Released
Draw pixels, stamp tiles, compose a stage, then play it as a platformer.
hud.razor.scss
Hud
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: Inter, Poppins, Roboto, Verdana, sans-serif;
color: #f5f8fe;
overflow: hidden;
pointer-events: all;
background-color: #04131c;
.root
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.screen
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title
{
background-color: #04131c;
}
.pause
{
background-color: #04131ccc;
}
.neon-frame
{
flex-direction: column;
align-items: center;
padding: 36px 48px;
background-color: #131820ee;
border: 1px solid #1e2432;
border-radius: 8px;
min-width: 420px;
}
.neon-frame.slim
{
min-width: 360px;
padding: 28px 36px;
}
.kicker
{
font-family: Poppins, Inter, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8f9aae;
margin-bottom: 10px;
}
.logo
{
font-family: Poppins, Inter, sans-serif;
font-size: 52px;
font-weight: 700;
color: #f5f8fe;
text-align: center;
line-height: 52px;
letter-spacing: 1px;
}
.logo.small
{
font-size: 28px;
line-height: 32px;
margin-bottom: 8px;
}
.tag
{
margin-top: 14px;
margin-bottom: 22px;
color: #abb8cf;
font-size: 14px;
}
.menu-links
{
flex-direction: column;
align-items: stretch;
width: 260px;
}
.btn
{
padding: 10px 16px;
margin-bottom: 8px;
background-color: #161923;
border: 1px solid #1e2432;
border-radius: 6px;
color: #c6d4ee;
text-align: center;
font-family: Poppins, Inter, sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.btn:hover
{
border-color: #3273eb;
color: #ffffff;
sound-in: "ui.button.over";
}
.btn:active
{
sound-in: "ui.button.press";
}
.btn.primary
{
background-color: #3273eb;
border-color: #3273eb;
color: #f5f8fe;
font-weight: 700;
}
.btn.primary:hover
{
background-color: #4a86f0;
border-color: #4a86f0;
}
.btn.quiet
{
background-color: transparent;
}
.btn.danger
{
color: #ff5d6a;
border-color: #37425d;
}
.btn.slim
{
padding: 6px 10px;
margin: 0 4px 0 0;
font-size: 12px;
}
.ver
{
margin-top: 18px;
font-size: 11px;
color: #556691;
}
.shell
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
background-color: #04131c;
}
.topbar
{
flex-direction: row;
align-items: center;
height: 44px;
padding: 0 12px;
background-color: #11141d;
border-bottom: 1px solid #1e2432;
flex-shrink: 0;
}
.brand
{
font-family: Poppins, Inter, sans-serif;
font-size: 14px;
font-weight: 700;
color: #f5f8fe;
letter-spacing: 0.5px;
margin-right: 18px;
flex-shrink: 0;
}
.tabs
{
flex-direction: row;
flex-grow: 1;
}
.tab
{
padding: 8px 12px;
margin-right: 4px;
font-family: Poppins, Inter, sans-serif;
font-size: 13px;
font-weight: 600;
color: #8f9aae;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab:hover
{
color: #c6d4ee;
sound-in: "ui.button.over";
}
.tab.on
{
color: #f5f8fe;
border-bottom-color: #3273eb;
}
.tab.later
{
opacity: 0.4;
}
.tab.later.on
{
opacity: 1;
}
.top-actions
{
flex-direction: row;
align-items: center;
flex-shrink: 0;
}
.stat
{
margin-right: 10px;
color: #c6d4ee;
font-size: 13px;
font-weight: 600;
}
.work
{
flex-direction: row;
flex-grow: 1;
overflow: hidden;
}
.rail
{
width: 168px;
flex-shrink: 0;
flex-direction: column;
padding: 10px 8px;
background-color: #11141d;
border-right: 1px solid #1e2432;
overflow: scroll;
}
.rail.right
{
border-right: 0;
border-left: 1px solid #1e2432;
width: 180px;
}
.rail.wide
{
width: 240px;
}
.rail-title
{
font-family: Poppins, Inter, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8f9aae;
margin: 8px 4px 6px;
}
.tool
{
padding: 7px 8px;
margin-bottom: 4px;
background-color: #161923;
border: 1px solid #1e2432;
border-radius: 4px;
color: #c6d4ee;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.tool:hover
{
border-color: #3273eb;
sound-in: "ui.button.over";
}
.tool:active
{
sound-in: "ui.button.press";
}
.tool.on
{
background-color: #3273eb;
border-color: #3273eb;
color: #f5f8fe;
}
.tool.primary
{
background-color: #3273eb;
color: #f5f8fe;
border-color: #3273eb;
}
.tool.slim
{
padding: 4px 6px;
margin: 0 3px 4px 0;
font-size: 11px;
}
.row
{
flex-direction: row;
align-items: center;
margin-bottom: 4px;
}
.row.wrap
{
flex-wrap: wrap;
}
.hint
{
font-size: 11px;
color: #687aa6;
padding: 4px;
}
.ref-url
{
width: 100%;
min-height: 28px;
margin-bottom: 4px;
padding: 4px;
background-color: #161923;
border: 1px solid #1e2432;
border-radius: 4px;
color: #c6d4ee;
font-size: 11px;
}
.tile-grid
{
flex-direction: row;
flex-wrap: wrap;
}
.tile
{
width: 32px;
height: 32px;
margin: 0 4px 4px 0;
align-items: center;
justify-content: center;
font-size: 10px;
color: #04131c;
border: 1px solid #1e2432;
border-radius: 3px;
cursor: pointer;
image-rendering: pixelated;
}
.tile.on
{
border-color: #3273eb;
border-width: 2px;
}
.swatches
{
flex-direction: row;
flex-wrap: wrap;
margin: 6px 0;
}
.swatch
{
width: 22px;
height: 22px;
margin: 0 4px 4px 0;
border: 1px solid #1e2432;
border-radius: 3px;
cursor: pointer;
}
.swatch.fg
{
border-color: #3273eb;
border-width: 2px;
}
.swatch.bg
{
border-color: #c6d4ee;
}
.lib-item
{
flex-direction: column;
padding: 8px;
margin-bottom: 6px;
background-color: #161923;
border: 1px solid #1e2432;
border-radius: 6px;
cursor: pointer;
}
.lib-item:hover
{
border-color: #3273eb;
sound-in: "ui.button.over";
}
.lib-title
{
font-family: Poppins, Inter, sans-serif;
font-size: 13px;
font-weight: 600;
color: #f5f8fe;
}
.lib-meta
{
font-size: 10px;
color: #8f9aae;
}
.stage
{
flex-grow: 1;
position: relative;
align-items: stretch;
justify-content: stretch;
background-color: #04131c;
overflow: hidden;
}
.crtview
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: all;
}
.play-hud
{
position: absolute;
top: 8px;
left: 12px;
flex-direction: row;
font-size: 13px;
font-weight: 600;
color: #c6d4ee;
pointer-events: none;
}
.play-hud div
{
margin-right: 16px;
}
.hurt
{
color: #ff5d6a;
}
.sign-read
{
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
padding: 8px 12px;
background-color: #131820ee;
border: 1px solid #3273eb;
border-radius: 6px;
color: #f5f8fe;
font-size: 13px;
letter-spacing: 0.5px;
pointer-events: none;
justify-content: center;
}
.status
{
flex-direction: row;
align-items: center;
height: 32px;
padding: 0 12px;
background-color: #11141d;
border-top: 1px solid #1e2432;
flex-shrink: 0;
}
.coach
{
flex-grow: 1;
font-size: 12px;
color: #c6d4ee;
}
.meta
{
font-size: 11px;
color: #556691;
flex-shrink: 0;
}
.toast
{
position: absolute;
bottom: 48px;
align-self: center;
left: 50%;
padding: 8px 14px;
background-color: #3273eb;
color: #f5f8fe;
font-family: Poppins, Inter, sans-serif;
font-size: 13px;
font-weight: 700;
border: 1px solid #4a86f0;
border-radius: 6px;
}
.lesson
{
position: absolute;
bottom: 52px;
left: 50%;
align-self: center;
flex-direction: column;
min-width: 420px;
max-width: 560px;
padding: 14px 18px;
background-color: #131820f2;
border: 1px solid #3273eb;
border-radius: 8px;
pointer-events: all;
}
.lesson-kicker
{
font-family: Poppins, Inter, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8f9aae;
margin-bottom: 6px;
}
.lesson-body
{
font-size: 15px;
color: #f5f8fe;
margin-bottom: 10px;
}
.lesson-actions
{
flex-direction: row;
justify-content: flex-end;
}
.glow
{
border-color: #3273eb;
box-shadow: 0px 0px 0px 2px #3273eb;
color: #f5f8fe;
opacity: 1;
}
.glow-stage
{
border: 2px solid #3273eb;
}
}