195 lines
3.3 KiB
SCSS
195 lines
3.3 KiB
SCSS
|
|
MainMenu
|
|
{
|
|
background-color: #262934;
|
|
padding: 128px 128px;
|
|
opacity: 1;
|
|
flex-direction: column;
|
|
font-size: 25px;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: all 0.3s ease-out;
|
|
color: rgba( white, 0.8 );
|
|
|
|
.background
|
|
{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url( https://files.facepunch.com/tony/1b1311b1/boxes.webm );
|
|
opacity: 0.2;
|
|
background-size: cover;
|
|
filter: blur( 20px );
|
|
mask: linear-gradient( 45deg, white, white, black );
|
|
mask-scope: filter;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&:intro
|
|
{
|
|
opacity: 0;
|
|
transform: scaleX( 1.1 );
|
|
}
|
|
|
|
&.ingame
|
|
{
|
|
background-color: #262934ee;
|
|
backdrop-filter: blur(10px);
|
|
|
|
.background
|
|
{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.scroll
|
|
{
|
|
flex-direction: column;
|
|
max-height: 386px;
|
|
overflow: scroll;
|
|
gap: 50px;
|
|
}
|
|
|
|
.spacer
|
|
{
|
|
height: 1px;
|
|
background-image: linear-gradient( to right, rgba( white, 0.4 ), rgba( white, 0 ) );
|
|
width: 512px;
|
|
margin: 16px 0px;
|
|
}
|
|
|
|
.game-title
|
|
{
|
|
font-family: Roboto Condensed;
|
|
font-weight: 700;
|
|
font-size: 70px;
|
|
color: rgba( white, 1 );
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.col
|
|
{
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.controls
|
|
{
|
|
flex-direction: column;
|
|
gap: 50px;
|
|
align-items: flex-start;
|
|
text-transform: uppercase;
|
|
|
|
a, .button
|
|
{
|
|
font-family: Roboto;
|
|
|
|
&:hover
|
|
{
|
|
color: rgba( white, 1 );
|
|
font-weight: 900;
|
|
sound-in: ui.button.over;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active
|
|
{
|
|
sound-in: ui.button.press;
|
|
}
|
|
}
|
|
|
|
.span
|
|
{
|
|
gap: 128px;
|
|
}
|
|
}
|
|
|
|
.navigator-canvas
|
|
{
|
|
flex-direction: column;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.navigator-body
|
|
{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
transition: opacity 0.15s ease-out;
|
|
|
|
&.hidden
|
|
{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
FormGroup
|
|
{
|
|
flex-direction: column;
|
|
min-width: 300px;
|
|
gap:16px;
|
|
}
|
|
|
|
SlimPackageCard
|
|
{
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
align-items: center;
|
|
|
|
> i
|
|
{
|
|
&:hover
|
|
{
|
|
cursor: pointer;
|
|
color: white;
|
|
transform: scale( 1.1 );
|
|
sound-in: ui.button.over;
|
|
}
|
|
|
|
&:active
|
|
{
|
|
sound-in: ui.button.press;
|
|
}
|
|
}
|
|
}
|
|
|
|
i
|
|
{
|
|
font-family: Material Icons;
|
|
text-transform: lowercase;
|
|
|
|
&.with-click
|
|
{
|
|
&:hover
|
|
{
|
|
cursor: pointer;
|
|
color: white;
|
|
transform: scale( 1.1 );
|
|
sound-in: ui.button.over;
|
|
}
|
|
|
|
&:active
|
|
{
|
|
sound-in: ui.button.press;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar
|
|
{
|
|
width: 64px;
|
|
height: 64px;
|
|
|
|
&:hover
|
|
{
|
|
border: 1px solid white;
|
|
}
|
|
} |