« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* ==================================== | |||
TABLE DES MATIÈRES | |||
==================================== | |||
1. HEADER & HERO | |||
2. BARRE DE RECHERCHE | |||
3. GRID SYSTEM | |||
4. BADGES | |||
5. CARDS | |||
6. LINKS & BUTTONS | |||
7. SOCIAL MEDIA | |||
8. FOOTER | |||
9. ANIMATIONS | |||
10. MEDIA QUERIES | |||
==================================== */ | |||
/* ==================================== | |||
1. HEADER & HERO | |||
==================================== */ | |||
.tg-mainpage-header { | |||
position: relative; | |||
margin-top: -2rem; | |||
margin-bottom: -4rem; | |||
padding-top: 6rem; | |||
padding-bottom: 6rem; | |||
clear: both; | |||
overflow: hidden; | |||
pointer-events: none; | |||
} | |||
.tg-mainpage-header::before { | |||
content: ''; | |||
position: absolute; | |||
inset: 0; | |||
background-image: url(); | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
background-size: contain; | |||
opacity: 0.1; | |||
filter: var(--filter-invert); | |||
pointer-events: none; | |||
animation: spin 60s infinite linear; | |||
} | |||
.tg-mainpage-header-nefald { | |||
position: relative; | |||
margin-top: 2.5rem; | |||
width: 150px; | |||
max-width: 100%; | |||
padding-top: 0.75rem; | |||
} | |||
.tg-mainpage-header-nefald::before { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
top: -100%; | |||
margin: 0 auto; | |||
width: 50%; | |||
height: 100%; | |||
background-image: url(); | |||
background-repeat: no-repeat; | |||
background-position: bottom center; | |||
opacity: 0.2; | |||
filter: var(--filter-invert); | |||
} | |||
.tg-mainpage-header-nefald img { | |||
width: 100%; | |||
height: 100%; | |||
filter: var(--filter-invert); | |||
} | |||
.tg-mainpage-content { | |||
align-items: center; | |||
display: flex; | |||
flex-direction: column; | |||
text-align: center; | |||
pointer-events: auto; | |||
} | |||
.tg-mainpage-header-tagline { | |||
margin-top: -0.25rem; | |||
color: var(--tg-color-subtle); | |||
font-size: var(--tg-font-size-small); | |||
line-height: var(--tg-line-height-xx-small); | |||
} | |||
.tg-mainpage-header-search { | |||
align-items: center; | |||
background-color: var(--tg-color-progressive); | |||
border-radius: var(--tg-border-radius-pill); | |||
color: var(--tg-color-inverted-progressive); | |||
cursor: pointer; | |||
display: flex; | |||
font-size: 0.875rem; | |||
font-weight: var(--font-weight-medium); | |||
gap: 0.5rem; | |||
line-height: 1; | |||
margin-top: 1rem; | |||
padding: 1rem 2rem; | |||
user-select: none; | |||
} | |||
.tg-mainpage-header-search:before { | |||
content: ''; | |||
width: 1rem; | |||
height: 1rem; | |||
mask-image: url(); | |||
mask-size: contain; | |||
background-color: currentColor; | |||
display: block; | |||
} | |||
.tg-mainpage-header-search:hover { | |||
background-color: var(--tg-color-progressive--hover); | |||
} | |||
.tg-mainpage-header-search:active { | |||
background-color: var(--tg-color-progressive--active); | |||
} | |||
/* ==================================== | |||
2. 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; | |||
} | |||
/* ==================================== | |||
3. GRID SYSTEM | |||
==================================== */ | |||
.home-grid { | .home-grid { | ||
display: grid; | display: grid; | ||
| Ligne 13 : | Ligne 204 : | ||
background-image: none; | background-image: none; | ||
} | } | ||
/* ==================================== | |||
4. BADGES | |||
==================================== */ | |||
.home-badge { | .home-badge { | ||
| Ligne 27 : | Ligne 222 : | ||
} | } | ||
/* ==================================== | |||
5. CARDS | |||
==================================== */ | |||
/* Card Base */ | |||
.home-card { | .home-card { | ||
position: relative; | position: relative; | ||
| Ligne 40 : | Ligne 240 : | ||
} | } | ||
.home-card p { | |||
margin-top: var( --space-xs ); | |||
font-size: var( --font-size-small ); | |||
} | |||
.home-card .template-statsbar { | |||
margin: 0; | |||
} | |||
/* Card Grid Variants */ | |||
.home-card--col2 { | .home-card--col2 { | ||
grid-column: span 2; | grid-column: span 2; | ||
| Ligne 56 : | Ligne 266 : | ||
} | } | ||
/* Card Elements */ | |||
.home-card__badge, | .home-card__badge, | ||
.home-card__label { | .home-card__label { | ||
| Ligne 87 : | Ligne 298 : | ||
} | } | ||
/* Card Background */ | |||
.home-card__background { | .home-card__background { | ||
position: absolute; | position: absolute; | ||
| Ligne 97 : | Ligne 309 : | ||
inset: 0; | inset: 0; | ||
display: block; | display: block; | ||
background: linear-gradient(to right,#000,transparent); | background: linear-gradient(to right, #000, transparent); | ||
content: ""; | content: ""; | ||
transition: transform 250ms ease; | transition: transform 250ms ease; | ||
| Ligne 113 : | Ligne 325 : | ||
} | } | ||
/* Card Foreground */ | |||
.home-card__foreground { | .home-card__foreground { | ||
position: absolute; | position: absolute; | ||
| Ligne 145 : | Ligne 358 : | ||
} | } | ||
/* Card Button Variant */ | |||
.home-card.home-card--button { | .home-card.home-card--button { | ||
overflow: hidden; | overflow: hidden; | ||
| Ligne 178 : | Ligne 387 : | ||
transform: scale( 1.1 ); | transform: scale( 1.1 ); | ||
} | } | ||
/* ==================================== | |||
6. LINKS & BUTTONS | |||
==================================== */ | |||
.home-link { | .home-link { | ||
| Ligne 211 : | Ligne 424 : | ||
} | } | ||
/* ==================================== | |||
7. SOCIAL MEDIA | |||
==================================== */ | |||
. | |||
#home-card-discord { | #home-card-discord { | ||
| Ligne 233 : | Ligne 442 : | ||
#home-card-reddit { | #home-card-reddit { | ||
background: #ff4500; | background: #ff4500; | ||
} | |||
/* ==================================== | |||
8. FOOTER | |||
==================================== */ | |||
#home-content { | |||
margin-top: var( --space-lg ); | |||
} | } | ||
| Ligne 242 : | Ligne 459 : | ||
/* ==================================== | /* ==================================== | ||
9. ANIMATIONS | |||
==================================== */ | ==================================== */ | ||
@keyframes spin { | |||
from { | |||
transform: rotate(0deg); | |||
} | |||
to { | |||
transform: rotate(360deg); | |||
} | |||
} | |||
} | } | ||
/* ==================================== | |||
10. MEDIA QUERIES | |||
==================================== */ | |||
. | /* Keyboard hint - Desktop only */ | ||
@media (hover: hover) { | |||
.tg-mainpage-header-search:after { | |||
content: '/'; | |||
margin-top: -2px; | |||
margin-bottom: -2px; | |||
margin-left: 2px; | |||
width: 18px; | |||
height: 18px; | |||
display: flex; | |||
background-color: var(--tg-color-inverted-progressive); | |||
color: var(--tg-color-progressive); | |||
border-radius: var(--tg-border-radius-small); | |||
line-height: 1; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 10px; | |||
font-weight: 900; | |||
opacity: 0.6; | |||
} | |||
} | } | ||
/* Mobile */ | |||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.home-search { | .home-search { | ||