mirror of
https://github.com/Facepunch/sbox-public.git
synced 2026-04-19 22:08:34 -04:00
116 lines
2.3 KiB
SCSS
116 lines
2.3 KiB
SCSS
|
|
$header-height: 70px;
|
|
$column-width: 380px;
|
|
|
|
.megacard
|
|
{
|
|
width: 1300px;
|
|
max-width: 1300px;
|
|
height: 75%;
|
|
pointer-events: none;
|
|
font-family: Poppins;
|
|
}
|
|
|
|
.megacard > .metrics
|
|
{
|
|
width: 100px;
|
|
margin-right: 1rem;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-top: $header-height;
|
|
z-index: 10;
|
|
gap: 6px;
|
|
pointer-events: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.megacard > .body-outer
|
|
{
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.megacard > .body-outer > .tabs
|
|
{
|
|
flex-shrink: 0;
|
|
height: $header-height;
|
|
margin-left: $column-width;
|
|
align-items: flex-end;
|
|
padding-left: 32px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.megacard > .body-outer > .body
|
|
{
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
background: linear-gradient( to bottom, #1d212f, #1c202d );
|
|
border: 1px solid #ffffff02;
|
|
border-radius: 12px;
|
|
box-shadow: 0px 0px 188px 100px #101117;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .row
|
|
{
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .row > .left
|
|
{
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: $column-width;
|
|
margin-top: -$header-height;
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .row > .left > h2
|
|
{
|
|
padding: 0px 2rem;
|
|
padding-top: 1rem;
|
|
color: #717a8d;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
font-weight: 550;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .row > .left > .icon
|
|
{
|
|
width: 90%;
|
|
margin: 0px auto;
|
|
aspect-ratio: 16/9;
|
|
border-radius: 16px;
|
|
border: 1px solid #ffffff06;
|
|
box-shadow: 2px 2px 16px 4px #0002;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: #000;
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .row > .content
|
|
{
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
background-color: #16181e;
|
|
margin: 2px;
|
|
border-radius: 0px 11px 0px 0px;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
max-width: 900px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.megacard > .body-outer > .body > .footer
|
|
{
|
|
flex-shrink: 0;
|
|
background: linear-gradient( to bottom, #181c27, #151821 );
|
|
margin: 2px;
|
|
border-radius: 0px 0px 11px 11px;
|
|
padding: 24px;
|
|
} |