Basculer la recherche
Basculer le menu
31
36
6
888
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:Infobox/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
Hiob (discussion | contributions)
owner
521 modifications
Page créée avec « .tg-infobox { position: relative; width: 320px; padding: 16px 0; border: var(--tg-border-base); border-radius: var(--tg-border-radius-large); border-spacing: 0; color: var(--tg-color-base); background-color: var(--tg-color-surface-2); line-height: var(--tg-line-height-xx-small); font-size: var(--tg-font-size-small); } .tg-infobox th, .tg-infobox td { padding: 0; →Remove default padding : vertical-align: top; }... »
 
Hiob (discussion | contributions)
owner
521 modifications
m CSS # icone infobox en bas à droite
 
(6 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
.tg-infobox {
.infobox-table {
    z-index: 3 !important;
    overflow: hidden;
    width: 400px;
    max-width: 100%;
    margin-bottom: var(--space-md);
    padding-bottom: 20px !important;
    background: var(--color-surface-1);
    border: 1px solid var(--border-color-base);
    border-radius: var(--border-radius-medium);
    font-size: 0.875rem;
    text-align: left;
    display: block;
    /* Propriétés de flottement */
    float: right;
    margin-left: 20px;
    margin-right: 0;
    /* Position relative pour l'icône absolue */
     position: relative;
     position: relative;
    width: 320px;
    padding: 16px 0;
    border: var(--tg-border-base);
    border-radius: var(--tg-border-radius-large);
    border-spacing: 0;
    color: var(--tg-color-base);
    background-color: var(--tg-color-surface-2);
    line-height: var(--tg-line-height-xx-small);
    font-size: var(--tg-font-size-small);
}
.tg-infobox th,
.tg-infobox td {
    padding: 0; /* Remove default padding */
    vertical-align: top;
}
.tg-infobox tr > *:first-child {
    padding-left: 16px;
}
.tg-infobox tr > *:last-child {
    padding-right: 16px;
}
.tg-infobox .tg-infobox-title {
    font-size: var(--tg-font-size-x-large);
    padding-bottom: 4px;
}
.tg-infobox-title,
.tg-infobox-header {
    color: var(--tg-color-emphasized);
}
.tg-infobox-title,
.tg-infobox-subtitle {
    line-height: var(--tg-line-height-xxx-small);
}
.tg-infobox .tg-infobox-image {
    border-top-left-radius: var(--tg-border-radius-large);
    border-top-right-radius: var(--tg-border-radius-large);
    padding: 0 !important;
    transform: translateY(-16px);
    overflow: hidden;
}
.tg-infobox-image > figure,
.tg-infobox-image > figure > figcaption {
    /* Reset styles from other skins */
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.tg-infobox-image > figure {
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
}


.tg-infobox-image .mw-file-description {
.infobox-header {
     border-radius: var(--tg-border-radius-sharp) !important;
     padding: 15px;
}
}


.tg-infobox-image > figure > figcaption {
.infobox-image {
    padding-left: 16px;
    padding-right: 16px;
     text-align: center;
     text-align: center;
    background: var(--background-color-button-quiet--hover);
    margin-bottom: 10px;
}
}


.tg-infobox-image > figure > a::after,
.infobox-image img {
.tg-infobox-image > figure > figcaption::before {
     max-width: 100%;
     /* Remove link icon */
     height: auto !important;
    content: none;
}
 
.tg-infobox-image > figure img {
    margin: 0;
     border: 0;
}
}


.tg-infobox-image,
.infobox-title {
.tg-infobox-subtitle,
    color: var(--color-emphasized);
.tg-infobox-caption {
    font-size: 1.4rem !important;
     text-align: center;
    font-weight: 600;
    line-height: 1.4;
     margin-bottom: 5px;
}
}


.tg-infobox-subtitle,
.infobox-subtitle {
.tg-infobox-caption {
     color: var(--color-subtle);
     color: var(--tg-color-subtle);
     font-size: 0.9rem;
     font-size: var(--tg-font-size-x-small);
}
}


.tg-infobox .tg-infobox-caption {
.infobox-body {
     padding-top: 4px;
     padding: 0 15px;
    padding-bottom: 4px;
}
}


.tg-infobox .tg-infobox-header {
.infobox-section-title {
     padding-top: 12px;
     padding-top: 15px;
     padding-bottom: 8px;
    border-top: 1px solid var(--border-color-base);
     font-weight: 600;
    font-size: 1rem;
    color: var(--color-emphasized);
    margin-top: 10px;
}
}


.tg-infobox-header:not(.tg-infobox-title) span {
.infobox-row {
     display: flex;
     display: flex;
     align-items: center;
     margin-top: 10px;
    gap: 1rem;
    white-space: nowrap;
    color: var(--tg-color-subtle);
    font-size: var(--tg-font-size-x-small);
    font-weight: var(--tg-font-weight-regular);
}
}


.tg-infobox-header:not(.tg-infobox-title) span:before,
.infobox-label {
.tg-infobox-header:not(.tg-infobox-title) span:after {
    color: var(--color-subtle);
     content: " ";
    font-size: 0.8125rem;
     height: 1px;
     font-weight: normal;
     width: 100%;
     letter-spacing: 0.75px;
     background-color: var(--tg-border-color-base);
     flex: 0 0 40%;
     padding-right: 10px;
}
}


.tg-infobox .tg-infobox-data,
.infobox-value {
.tg-infobox .tg-infobox-label {
     flex: 1;
     padding: 8px;
}
}


.tg-infobox-label {
/* Style pour l'icône en bas à droite */
     text-align: start;
.infobox-icon-bottom {
     vertical-align: top;
     position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 1.2em;
    color: var(--color-subtle);
    opacity: 0.7;
     z-index: 1;
}
}


@media (max-width: 640px) {
@media only screen and (max-width: 720px) {
     .tg-infobox {
     .infobox-table {
         width: 100%;
         float: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 0;
     }
     }
 
   
     .tg-infobox-image > figure {
     .infobox-icon-bottom {
         margin-top: 16px;
         bottom: 8px;
        right: 12px;
        font-size: 1.1em;
     }
     }
}
/* Fix EmbedVideo styles for Spotify */
.tg-infobox .embedvideo[data-service="spotifytrack"] {
    position: relative;
    /* Fix incorrect inline width */
    width: 100% !important;
}
/* HACK: Hide white background in iframe */
.tg-infobox .embedvideo[data-service="spotifytrack"]::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 6px solid var(--tg-color-surface-2);
    border-radius: 12px;
    pointer-events: none;
}
}

Dernière version du 26 septembre 2025 à 13:26

.infobox-table {
    z-index: 3 !important;
    overflow: hidden;
    width: 400px;
    max-width: 100%;
    margin-bottom: var(--space-md);
    padding-bottom: 20px !important;
    background: var(--color-surface-1);
    border: 1px solid var(--border-color-base);
    border-radius: var(--border-radius-medium);
    font-size: 0.875rem;
    text-align: left;
    display: block;
    /* Propriétés de flottement */
    float: right;
    margin-left: 20px;
    margin-right: 0;
    /* Position relative pour l'icône absolue */
    position: relative;
}

.infobox-header {
    padding: 15px;
}

.infobox-image {
    text-align: center;
    background: var(--background-color-button-quiet--hover);
    margin-bottom: 10px;
}

.infobox-image img {
    max-width: 100%;
    height: auto !important;
}

.infobox-title {
    color: var(--color-emphasized);
    font-size: 1.4rem !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.infobox-subtitle {
    color: var(--color-subtle);
    font-size: 0.9rem;
}

.infobox-body {
    padding: 0 15px;
}

.infobox-section-title {
    padding-top: 15px;
    border-top: 1px solid var(--border-color-base);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-emphasized);
    margin-top: 10px;
}

.infobox-row {
    display: flex;
    margin-top: 10px;
}

.infobox-label {
    color: var(--color-subtle);
    font-size: 0.8125rem;
    font-weight: normal;
    letter-spacing: 0.75px;
    flex: 0 0 40%;
    padding-right: 10px;
}

.infobox-value {
    flex: 1;
}

/* Style pour l'icône en bas à droite */
.infobox-icon-bottom {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 1.2em;
    color: var(--color-subtle);
    opacity: 0.7;
    z-index: 1;
}

@media only screen and (max-width: 720px) {
    .infobox-table {
        float: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 0;
    }
    
    .infobox-icon-bottom {
        bottom: 8px;
        right: 12px;
        font-size: 1.1em;
    }
}
Récupérée de "https://wiki.nefald.fr/index.php?title=Modèle:Infobox/styles.css&oldid=482"