« 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- | |||
} | } |