« Modèle:Infobox/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications Balises : Modification par mobile Modification par le web mobile |
m CSS # icone infobox en bas à droite |
||
(4 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
.infobox-table { | .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- | .infobox-header { | ||
padding: 15px; | |||
} | } | ||
.infobox- | .infobox-image { | ||
text-align: center; | |||
background: var(--background-color-button-quiet--hover); | |||
margin-bottom: 10px; | |||
} | } | ||
.infobox- | .infobox-image img { | ||
max-width: 100%; | |||
height: auto !important; | |||
} | } | ||
.infobox- | .infobox-title { | ||
color: var(--color-emphasized); | |||
font-size: 1.4rem !important; | |||
font-weight: 600; | |||
line-height: 1.4; | |||
margin-bottom: 5px; | |||
} | } | ||
.infobox- | .infobox-subtitle { | ||
color: var(--color-subtle); | |||
font-size: 0.9rem; | |||
} | } | ||
.infobox- | .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- | .infobox-row { | ||
display: flex; | |||
margin-top: 10px; | |||
} | } | ||
.infobox- | .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- | .infobox-value { | ||
flex: 1; | |||
} | } | ||
/* | /* Style pour l'icône en bas à droite */ | ||
.infobox- | .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; | |||
.infobox-table | margin-left: auto; | ||
margin-top: 0; | |||
} | |||
.infobox-icon-bottom { | |||
bottom: 8px; | |||
right: 12px; | |||
} | font-size: 1.1em; | ||
} | |||
.infobox- | |||
} | } |
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;
}
}