« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications Balise : Révocation manuelle |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
.home-grid { | .home-grid { | ||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: var( --space-xs ); | |||
} | } | ||
.home-grid--col2 { | .home-grid--col2 { | ||
grid-template-columns: 1fr 1fr; | |||
} | } | ||
.home-grid a.external { | .home-grid a.external { | ||
background-image: none; | |||
} | } | ||
.home-badge { | .home-badge { | ||
display: flex; | |||
gap: var(--space-xxs); | gap: var(--space-xxs); | ||
font-size: var(--font-size-small); | |||
padding: var(--space-xxs) var(--space-xs); | padding: var(--space-xxs) var(--space-xs); | ||
background: var(--color-surface-2); | background: var(--color-surface-2); | ||
| Ligne 28 : | Ligne 28 : | ||
.home-card { | .home-card { | ||
position: relative; | |||
padding: var( --space-md ); | |||
border: 1px solid var( --border-color-base ); | |||
background: var( --color-surface-1 ); | |||
border-radius: var( --border-radius-medium ); | |||
font-size: var( --font-size-small ); | |||
} | } | ||
.home-card table.timeline { | .home-card table.timeline { | ||
margin-top: var( --space-xs ); | |||
} | } | ||
.home-card--col2 { | .home-card--col2 { | ||
grid-column: span 2; | |||
} | } | ||
.home-card--row3 { | .home-card--row3 { | ||
grid-row: span 3; | |||
} | } | ||
.home-card--row4 { | .home-card--row4 { | ||
grid-row: span 4; | |||
} | } | ||
.home-card--row8 { | .home-card--row8 { | ||
grid-row: span 8 / auto; | |||
} | } | ||
.home-card__badge, | .home-card__badge, | ||
.home-card__label { | .home-card__label { | ||
color: var( --color-subtle ); | |||
font-size: var( --font-size-small ); | |||
letter-spacing: 0.05em; | |||
} | } | ||
.home-card__badge { | .home-card__badge { | ||
padding: var( --space-xxs ) var( --space-xs ); | |||
border-radius: var( --border-radius-base ); | |||
background: var( --color-surface-2 ); | |||
} | } | ||
.home-card__header { | .home-card__header { | ||
color: var( --color-emphasized ); | |||
font-size: 1rem; | |||
font-weight: var( --font-weight-semi-bold ); | font-weight: var( --font-weight-semi-bold ); | ||
line-height: var( --line-height-xxx-small ); | line-height: var( --line-height-xxx-small ); | ||
| Ligne 77 : | Ligne 77 : | ||
.home-card__header a { | .home-card__header a { | ||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
} | } | ||
.home-card__header a:after { | .home-card__header a:after { | ||
content: '▶'; | |||
font-size: var( --font-size-small ); | |||
} | } | ||
.home-card__background { | .home-card__background { | ||
position: absolute; | |||
inset: 0; | |||
} | } | ||
.home-card__background:after { | .home-card__background:after { | ||
position: absolute; | |||
pointer-events: none; | pointer-events: none; | ||
inset: 0; | |||
display: block; | display: block; | ||
background: linear-gradient(to right,#000,transparent); | background: linear-gradient(to right,#000,transparent); | ||
| Ligne 104 : | Ligne 104 : | ||
.home-card__background picture, | .home-card__background picture, | ||
.home-card__background img { | .home-card__background img { | ||
width: 100%; | |||
height: 100%; | |||
} | } | ||
.home-card__background img { | .home-card__background img { | ||
object-fit: cover; | |||
object-position: center; | |||
} | } | ||
.home-card__foreground { | .home-card__foreground { | ||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
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-xxx-small ); | |||
pointer-events: none; | |||
} | } | ||
.home-card__foreground .home-card__badge { | .home-card__foreground .home-card__badge { | ||
position: absolute; | |||
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
| Ligne 138 : | Ligne 138 : | ||
.home-card__foreground .home-card__header { | .home-card__foreground .home-card__header { | ||
color: #fff; | |||
} | } | ||
.home-card__foreground .home-card__label { | .home-card__foreground .home-card__label { | ||
color: #bababa; | |||
} | } | ||
.home-card p { | .home-card p { | ||
margin-top: var( --space-xs ); | |||
font-size: var( --font-size-small ); | |||
} | } | ||
.home-card.home-card--button { | .home-card.home-card--button { | ||
overflow: hidden; | |||
padding: 0; | |||
border: 0; | |||
} | } | ||
.home-card--button a { | .home-card--button a { | ||
display: flex; | |||
height: 100%; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0 var( --space-md ); | |||
background: transparent; | |||
color: #fff; | |||
font-weight: var( --font-weight-medium ); | |||
} | } | ||
.home-card--button .home-card__background a { | .home-card--button .home-card__background a { | ||
padding: 0; | |||
} | } | ||
.home-card--button img { | .home-card--button img { | ||
transition: transform 250ms ease; | |||
} | } | ||
.home-card--button:hover img { | .home-card--button:hover img { | ||
transform: scale( 1.1 ); | |||
} | } | ||
.home-link { | .home-link { | ||
display: grid; | |||
margin-top: var( --space-xs ); | |||
font-size: var( --font-size-small ); | |||
font-weight: var( --font-weight-medium ); | |||
grid-gap: var( --space-xs ); | |||
text-align: center; | |||
} | } | ||
.home-link__button { | .home-link__button { | ||
display: flex; | |||
} | } | ||
.home-link__button a { | .home-link__button a { | ||
flex-grow: 1; | |||
padding: var( --space-xs ); | |||
border: 1px solid var( --border-color-base ); | |||
background: var( --color-surface-2 ); | |||
border-radius: var( --border-radius-medium ); | |||
color: var( --color-emphasized ) !important; | |||
line-height: var( --line-height-xxx-small ); | line-height: var( --line-height-xxx-small ); | ||
text-decoration: none !important; | text-decoration: none !important; | ||
| Ligne 204 : | Ligne 204 : | ||
.home-link__button a:hover { | .home-link__button a:hover { | ||
background: var( --color-surface-2--hover ); | |||
} | } | ||
.home-link__button a:active { | .home-link__button a:active { | ||
background: var( --color-surface-2--active ); | |||
} | } | ||
#home-content { | #home-content { | ||
margin-top: var( --space-lg ); | |||
} | } | ||
.home-card .template-statsbar { | .home-card .template-statsbar { | ||
margin: 0; | |||
} | } | ||
#home-card-discord { | #home-card-discord { | ||
background: #5865f2; | |||
} | } | ||
#home-card-patreon { | #home-card-patreon { | ||
background: #ff424d; | |||
} | } | ||
#home-card-kofi { | #home-card-kofi { | ||
background: #ff5e5b; | |||
} | } | ||
#home-card-reddit { | #home-card-reddit { | ||
background: #ff4500; | |||
} | } | ||
.home-footer { | .home-footer { | ||
font-size: var( --font-size-small ); | |||
font-family: var( --font-family-monospace ); | |||
text-align: center; | |||
} | |||
/* ==================================== | |||
BARRE DE RECHERCHE | |||
==================================== */ | |||
.home-search { | |||
display: flex; | |||
align-items: center; | |||
gap: 0.75rem; | |||
max-width: 600px; | |||
margin: 2rem auto; | |||
padding: 1rem 1.5rem; | |||
background: rgba(255, 255, 255, 0.05); | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
border-radius: 50px; | |||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); | |||
cursor: pointer; | |||
transition: all 0.2s ease; | |||
} | |||
.home-search:hover { | |||
background: rgba(255, 255, 255, 0.08); | |||
border-color: rgba(255, 255, 255, 0.15); | |||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); | |||
} | |||
.home-search:active { | |||
transform: scale(0.99); | |||
} | |||
.home-search:focus { | |||
outline: 2px solid rgba(66, 133, 244, 0.5); | |||
outline-offset: 2px; | |||
} | |||
.home-search__icon { | |||
font-size: 1.1rem; | |||
opacity: 0.5; | |||
flex-shrink: 0; | |||
} | |||
.home-search__text { | |||
flex: 1; | |||
font-size: 1rem; | |||
font-weight: 400; | |||
color: rgba(255, 255, 255, 0.7); | |||
user-select: none; | |||
text-align: left; | |||
} | |||
.home-search__kbd { | |||
font-family: monospace; | |||
font-size: 0.875rem; | |||
font-weight: 600; | |||
padding: 0.25rem 0.5rem; | |||
min-width: 1.5rem; | |||
text-align: center; | |||
background: rgba(255, 255, 255, 0.05); | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
border-radius: 4px; | |||
color: rgba(255, 255, 255, 0.5); | |||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |||
flex-shrink: 0; | |||
} | |||
@media (max-width: 768px) { | |||
.home-search { | |||
margin: 1.5rem auto; | |||
padding: 0.875rem 1.25rem; | |||
} | |||
.home-search__kbd { | |||
display: none; | |||
} | |||
} | } | ||