Basculer la recherche
Basculer le menu
49
1.8K
8
3.4K
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Accueil/header/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
Hiob (discussion | contributions)
owner
2 622 modifications
Ajout "header Nefald" variable
Hiob (discussion | contributions)
owner
2 622 modifications
Annulation des modifications 903 de Hiob (discussion)
Balise : Annulation
 
(4 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
/*
.tg-mainpage-header {
    This is the full stylesheet for the header template.
position: relative;
    The new section for SVG logo styling has been added at the end.
margin-top: -2rem;
*/
margin-bottom: -4rem;
padding-top: 6rem;
padding-bottom: 6rem;
clear: both;
overflow: hidden; /* Prevent circular inscription from affecting element size */
pointer-events: none; /* So that you can click elements overlap with the header */
}


.home-header {
.tg-mainpage-header::before {
    position: relative;
content: '';
    padding-block: 3.5rem;
position: absolute;
    line-height: var( --line-height-xx-small );
inset: 0;
    text-align: center;
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-content {
    The user's original template used .tg-mainpage-header-logo.
align-items: center;
    We add it here to ensure the logo is also centered,
display: flex;
    as it appears to be the main element replacing .home-header__title.
flex-direction: column;
*/
text-align: center;
.home-header__title,
pointer-events: auto; /* Reset pointer-events: none from header */
.tg-mainpage-header-logo {
    --display-font-size: min( calc( 2.5rem + 3.9vw ), 4.5rem );
    margin: 0 auto; /* Use auto margin for centering block element */
    font-size: var( --display-font-size );
    text-transform: uppercase;
    line-height: 0.9;
    font-weight: var( --font-weight-semi-bold );
}
}


.home-header__pretitle {
/* Fellowship background */
    margin-bottom: var( --space-xxs );
.tg-mainpage-header-nefald::before {
    color: var( --color-subtle );
content: '';
    font-size: var( --font-size-small );
position: absolute;
    letter-spacing: 0.05em;
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);
}
}


.home-header__subtitle {
/* Temp styles */
    margin-top: var( --space-xxs );
.tg-mainpage-header-nefald {
    color: var( --color-subtle );
position: relative;
    font-size: var( --font-size-small );
margin-top: 2.5rem;
width: 150px;
max-width: 100%;
padding-top: 0.75rem;
}
}


.home-header__search {
.tg-mainpage-header-nefald img {
    --gradient: #87bfdb, #77abC8, #6797b5, #577f9d, #476684, #43668a, #3e668f, #304a66, #212e3d, #304a66, #3e668f, #43668a, #476684, #577f9d, #6797b5, #77abC8, #87bfdb;
width: 100%;
    --gradient-blur: 4px;
height: 100%;
    padding: var( --space-md );
filter: var(--filter-invert);
    margin-top: var( --space-xl );
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    border: var( --border-base );
    border-radius: var( --border-radius-pill );
    background-color: var( --color-surface-1 );
    cursor: pointer;
    font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
    text-align: center;
}
}


.home-header__search .desktoponly {
.tg-mainpage-header-tagline {
    margin-left: var( --space-xs );
margin-top: -0.25rem;
color: var(--tg-color-subtle);
font-size: var(--tg-font-size-small);
line-height: var(--tg-line-height-xx-small);
}
}


.home-header__search:hover {
.tg-mainpage-header-search {
    --gradient: #120d0e, #321d13, #512d19, #713d1e, #90571d, #b0701b, #cf8a1a, #de9822, #eeA529, #fdb331, #eeA529, #de9822, #cf8a1a, #b0701b, #90571d, #713d1e, #512d19, #321d13, #120d0e;
align-items: center;
    --gradient-blur: 8px;
background-color: var(--tg-color-progressive);
    background: var( --color-surface-0 );
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;
}
}


.home-header__searchIcon img {
.tg-mainpage-header-search:before {
    margin-right: var( --space-md );
content: '';
    opacity: var( --opacity-icon-base );
width: 1rem;
height: 1rem;
mask-image: url();
mask-size: contain;
background-color: currentColor;
display: block;
}
}


/* Fix vertical alignment problem */
/* Keyboard hint */
.home-header__search .keyboard-key {
@media (hover: hover) {
    display: inline;
.tg-mainpage-header-search:after {
    padding-top: 0.1em;
content: '/';
    padding-bottom: 0.1em;
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;
}
}
}


.home-header:before,
.tg-mainpage-header-search:hover {
.home-header__searchIcon img {
background-color: var(--tg-color-progressive--hover);
    filter: var( --filter-invert );
}
}


@media ( hover: none ) {
.tg-mainpage-header-search:active {
    .home-header__search .desktoponly {
background-color: var(--tg-color-progressive--active);
        display: none;
    }
}
}


/* --- START: SVG Logo Color Styling --- */
@keyframes spin {
/*
from {
* This section makes the SVG logo theme-aware (light/dark mode).
transform: rotate(0deg);
* It requires the SVG file to use `fill="currentColor"`.
}
*/
to {
.tg-mainpage-header-logo {
transform: rotate(360deg);
    /*
}
    * We use the theme's base color variable.
    * It automatically switches from dark (for light theme) to light (for dark theme).
    * This is the cleanest and most maintainable approach.
    */
    color: var(--color-base);
 
    /* Add a smooth transition for a better user experience when switching themes. */
    transition: color 0.3s ease-in-out;
}
}
/* --- END: SVG Logo Color Styling --- */
Récupérée de "https://wiki.nefald.fr/Modèle:Accueil/header/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.