317
редагувань
м
44 ревізії: Template:Main_page/headerTemplate:Main page/header/styles.css
starcitizen>DuskFyre Немає опису редагування |
м (44 ревізії: Template:Main_page/headerTemplate:Main page/header/styles.css) |
||
| (Не показані 38 проміжних версій ще одного користувача) | |||
| Рядок 3: | Рядок 3: | ||
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | ||
grid-auto-rows: minmax( 3rem, auto ); | grid-auto-rows: minmax( 3rem, auto ); | ||
grid-gap: | grid-gap: var( --space-xs ); | ||
} | |||
.home-grid--col2 { | |||
grid-template-columns: 1fr 1fr; | |||
} | } | ||
| Рядок 12: | Рядок 16: | ||
.home-card { | .home-card { | ||
position: relative; | position: relative; | ||
padding: | padding: var( --space-md ); | ||
background: var( --color-surface-1 ); | |||
border: 1px solid var( --border-color-base ); | |||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | ||
| Рядок 47: | Рядок 50: | ||
} | } | ||
.home-card__header { | |||
color: var( --color-base--emphasized ); | |||
font-size: 1rem; | font-size: 1rem; | ||
font-weight: var( --font-weight-semibold ); | |||
line-height: var( --line-height-xs ); | |||
} | } | ||
| Рядок 63: | Рядок 68: | ||
} | } | ||
.home-card__background { | .home-card__background { | ||
position: absolute; | position: absolute; | ||
| Рядок 78: | Рядок 76: | ||
background: #242a31; | background: #242a31; | ||
border-radius: 8px; | border-radius: 8px; | ||
} | |||
.home-card__background:after { | |||
position: absolute; | |||
pointer-events: none; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
display: block; | |||
background: linear-gradient(to right,#000,transparent); | |||
content: ""; | |||
} | } | ||
| Рядок 87: | Рядок 97: | ||
} | } | ||
.home- | .home-card__foreground { | ||
position: absolute; | position: absolute; | ||
top: 0; | |||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
display: | right: 0; | ||
padding: var( --space-md ); | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
gap: var( --space-xxs ); | |||
color: #fff; | |||
line-height: var( --line-height-xs ); | |||
pointer-events: none; | |||
} | } | ||
.home-card__foreground { | .home-card__foreground .home-card__header { | ||
color: #fff; | |||
} | } | ||
.home-card__foreground .home-card__label { | .home-card__foreground .home-card__label { | ||
color: #bababa; | color: #bababa; | ||
} | } | ||
.home-card p { | .home-card p { | ||
margin-top: | margin-top: var( --space-xs ); | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
} | } | ||
.home-card.home-card--button { | .home-card.home-card--button { | ||
overflow: hidden; | |||
padding: 0; | padding: 0; | ||
background: #242a31; | background: #242a31; | ||
border: 0; | |||
} | } | ||
| Рядок 136: | Рядок 136: | ||
display: flex; | display: flex; | ||
height: 100%; | height: 100%; | ||
justify-content: center; | |||
align-items: center; | align-items: center; | ||
padding: 0 | padding: 0 var( --space-md ); | ||
background: transparent; | background: transparent; | ||
color: #fff; | color: #fff; | ||
font-weight: 500; | font-weight: 500; | ||
} | |||
.home-card--button .home-card__background a { | |||
padding: 0; | |||
} | |||
.home-card--button img { | |||
transition: transform 0.2s ease; | |||
} | |||
.home-card--button:hover img { | |||
transform: scale(1.1); | |||
} | } | ||
.home-link { | .home-link { | ||
display: grid; | display: grid; | ||
margin-top: | margin-top: var( --space-xs ); | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
font-weight: 500; | font-weight: 500; | ||
grid-gap: | grid-gap: var( --space-xs ); | ||
text-align: center; | text-align: center; | ||
} | } | ||
| Рядок 158: | Рядок 171: | ||
.home-link__button a { | .home-link__button a { | ||
flex-grow: 1; | flex-grow: 1; | ||
padding: | padding: var( --space-xs ); | ||
border: 1px solid | border: 1px solid var( --border-color-base ); | ||
background: var( --color-surface-2 ); | |||
background: var( -- | border-radius: var( --border-radius--medium ); | ||
border-radius: | color: var( --color-base--emphasized ) !important; | ||
color: var( --color-base--emphasized ); | line-height: var( --line-height-xs ); | ||
text-decoration: none !important; | |||
} | } | ||
.home-link__button a:hover { | .home-link__button a:hover { | ||
background: var( -- | background: var( --color-surface-2--hover ); | ||
} | } | ||
.home-link__button a:active { | .home-link__button a:active { | ||
background: var( -- | background: var( --color-surface-2--active ); | ||
} | } | ||
#home-content { | #home-content { | ||
margin-top: | margin-top: var( --space-lg ); | ||
} | } | ||
.home- | .home-card .template-statsbar { | ||
margin: 0; | |||
} | } | ||
#home-card-discord { | |||
background: #5865f2; | |||
} | } | ||
#home-card-patreon { | |||
background: #ff424d; | |||
} | } | ||
#home-card- | #home-card-kofi { | ||
background: # | background: #ff5e5b; | ||
} | } | ||
#home-card-reddit { | #home-card-reddit { | ||
background: #ff4500; | background: #ff4500; | ||
} | |||
.home-footer { | |||
font-size: 0.8125rem; | |||
font-family: monospace; | |||
text-align: center; | |||
} | } | ||