Modèle:Infobox personnalité politique/styles.css
Aller à la navigation
Aller à la recherche
/* ============================================================
WikiKabylie — Infobox personnalité politique
Version compatible TemplateStyles
============================================================ */
/* ------------------------------------------------------------
CONTENEUR PRINCIPAL
------------------------------------------------------------ */
.wk-infobox {
width: 348px;
float: right;
clear: right;
margin: 0 0 30px 32px;
border: 1px solid #dfe7ee;
border-radius: 20px;
background: #ffffff;
color: #1f2f3d;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
font-size: 13px;
line-height: 1.55;
overflow: hidden;
box-shadow:
0 18px 45px rgba(20, 41, 61, 0.08),
0 4px 12px rgba(20, 41, 61, 0.04);
}
/* ------------------------------------------------------------
EN-TÊTE
------------------------------------------------------------ */
.wk-infobox-header {
position: relative;
padding: 24px 22px 20px;
border-top: 4px solid #0757a6;
border-bottom: 1px solid #edf1f4;
background: #f8fbfd;
}
/* ------------------------------------------------------------
SURTITRE
------------------------------------------------------------ */
.wk-infobox-kicker {
margin-bottom: 7px;
color: #16834b;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ------------------------------------------------------------
NOM
------------------------------------------------------------ */
.wk-infobox-name {
color: #10283e;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 28px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
}
/* ------------------------------------------------------------
SOUS-TITRE
------------------------------------------------------------ */
.wk-infobox-subtitle {
margin-top: 8px;
color: #67798a;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
}
/* ------------------------------------------------------------
PHOTO
------------------------------------------------------------ */
.wk-infobox-image {
padding: 16px;
text-align: center;
background: #ffffff;
}
.wk-infobox-image img,
.wk-infobox-image .mw-file-element {
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 13px;
}
/* ------------------------------------------------------------
LÉGENDE PHOTO
------------------------------------------------------------ */
.wk-infobox-caption {
margin: 9px auto 0;
color: #738394;
font-size: 11px;
line-height: 1.45;
text-align: center;
}
/* ------------------------------------------------------------
TITRES DE SECTION
------------------------------------------------------------ */
.wk-infobox-section-title {
padding: 10px 16px;
border-top: 1px solid #edf1f4;
border-bottom: 1px solid #edf1f4;
border-left: 3px solid #16834b;
background: #f7fafc;
color: #0757a6;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ------------------------------------------------------------
CONTENEUR DES DONNÉES
------------------------------------------------------------ */
.wk-infobox-data {
background: #ffffff;
}
/* ------------------------------------------------------------
LIGNES
------------------------------------------------------------ */
.wk-infobox-row {
display: grid;
grid-template-columns: 37% 63%;
border-bottom: 1px solid #f0f3f6;
}
.wk-infobox-row:last-child {
border-bottom: 0;
}
.wk-infobox-row:hover {
background: #fbfdff;
}
/* ------------------------------------------------------------
LABEL
------------------------------------------------------------ */
.wk-infobox-label {
padding: 11px 8px 11px 16px;
color: #718293;
font-size: 11px;
font-weight: 700;
line-height: 1.45;
}
/* ------------------------------------------------------------
VALEUR
------------------------------------------------------------ */
.wk-infobox-value {
padding: 11px 16px 11px 8px;
color: #243849;
font-size: 12px;
overflow-wrap: break-word;
}
.wk-infobox-value strong {
color: #112c43;
font-weight: 700;
}
.wk-infobox-muted {
color: #7d8c9a;
font-size: 11px;
}
/* ------------------------------------------------------------
LIGNE MISE EN AVANT
------------------------------------------------------------ */
.wk-infobox-row-featured {
background: #f5faff;
}
/* ------------------------------------------------------------
BLOC MANDAT
------------------------------------------------------------ */
.wk-infobox-mandate {
padding: 16px 16px 15px 18px;
border-left: 3px solid #0757a6;
border-bottom: 1px solid #e6edf2;
background: #f5faff;
}
.wk-infobox-mandate-title {
color: #10283e;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.wk-infobox-mandate-period {
margin-top: 5px;
color: #607488;
font-size: 11px;
font-weight: 700;
}
/* ------------------------------------------------------------
DÉTAILS DU MANDAT
------------------------------------------------------------ */
.wk-infobox-mini-row {
display: grid;
grid-template-columns: 42% 58%;
gap: 10px;
margin-top: 9px;
font-size: 11px;
}
.wk-infobox-mini-row span {
color: #768696;
}
.wk-infobox-mini-row strong {
color: #25394a;
font-weight: 700;
}
/* ------------------------------------------------------------
LIGNES LARGES
------------------------------------------------------------ */
.wk-infobox-row-wide {
grid-template-columns: 30% 70%;
}
/* ------------------------------------------------------------
LISTES
------------------------------------------------------------ */
.wk-infobox-value ul {
margin: 3px 0 3px 16px;
padding: 0;
}
.wk-infobox-value li {
margin: 4px 0;
line-height: 1.45;
}
/* ------------------------------------------------------------
LIENS
------------------------------------------------------------ */
.wk-infobox a {
color: #0757a6;
font-weight: 600;
text-decoration: none;
}
.wk-infobox a:hover {
color: #073f75;
text-decoration: underline;
}
.wk-infobox a:focus {
outline: 2px solid #0757a6;
}
/* ------------------------------------------------------------
SITE OFFICIEL
------------------------------------------------------------ */
.wk-infobox-official {
padding: 14px 16px;
border-top: 1px solid #e6ecf1;
background: #f7fafc;
text-align: center;
}
.wk-infobox-official a {
display: inline-block;
padding: 7px 13px;
border: 1px solid #cfe0ee;
border-radius: 8px;
background: #ffffff;
color: #0757a6;
font-size: 11px;
font-weight: 700;
text-decoration: none;
}
.wk-infobox-official a:hover {
border-color: #0757a6;
background: #f2f8fd;
text-decoration: none;
}
/* ------------------------------------------------------------
SIGNATURE
------------------------------------------------------------ */
.wk-infobox-signature {
padding: 14px;
text-align: center;
}
.wk-infobox-signature img,
.wk-infobox-signature .mw-file-element {
max-width: 155px;
height: auto;
}
/* ------------------------------------------------------------
DRAPEAUX
------------------------------------------------------------ */
.wk-infobox-flag {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.wk-infobox-flag img,
.wk-infobox-flag .mw-file-element {
max-width: 21px;
height: auto;
border: 1px solid #d6dde4;
border-radius: 2px;
}
/* ------------------------------------------------------------
BADGES
------------------------------------------------------------ */
.wk-infobox-badge {
display: inline-block;
margin: 2px 3px 2px 0;
padding: 3px 7px;
border: 1px solid #dce8f2;
border-radius: 6px;
background: #f3f8fc;
color: #31536e;
font-size: 10px;
font-weight: 700;
}
.wk-infobox-badge-green {
border-color: #d4eadc;
background: #f2faf5;
color: #17603b;
}
/* ------------------------------------------------------------
SÉPARATEUR
------------------------------------------------------------ */
.wk-infobox-separator {
height: 1px;
margin: 0 16px;
background: #edf1f4;
}
/* ------------------------------------------------------------
VERSION POLITIQUE
------------------------------------------------------------ */
.wk-infobox-politique .wk-infobox-header {
border-top-color: #0757a6;
}
/* ------------------------------------------------------------
TABLETTE
------------------------------------------------------------ */
@media (max-width: 900px) {
.wk-infobox {
width: 330px;
margin-left: 22px;
}
}
/* ------------------------------------------------------------
MOBILE
------------------------------------------------------------ */
@media (max-width: 720px) {
.wk-infobox {
width: 100%;
float: none;
clear: both;
margin: 0 0 28px;
border-radius: 16px;
}
.wk-infobox-name {
font-size: 25px;
}
.wk-infobox-row {
grid-template-columns: 36% 64%;
}
.wk-infobox-mini-row {
grid-template-columns: 40% 60%;
}
}
/* ------------------------------------------------------------
PETITS ÉCRANS
------------------------------------------------------------ */
@media (max-width: 480px) {
.wk-infobox {
border-radius: 13px;
}
.wk-infobox-header {
padding: 21px 17px 17px;
}
.wk-infobox-name {
font-size: 23px;
}
.wk-infobox-row {
display: block;
}
.wk-infobox-label {
padding: 9px 14px 1px;
color: #748596;
}
.wk-infobox-value {
padding: 2px 14px 10px;
}
.wk-infobox-mini-row {
display: block;
}
.wk-infobox-mini-row span {
display: block;
margin-bottom: 2px;
}
.wk-infobox-mini-row strong {
display: block;
}
.wk-infobox-row-wide {
display: block;
}
}
/* ------------------------------------------------------------
IMPRESSION
------------------------------------------------------------ */
@media print {
.wk-infobox {
width: 40%;
float: right;
margin: 0 0 16px 18px;
border: 1px solid #999999;
border-radius: 0;
background: #ffffff;
color: #000000;
box-shadow: none;
}
.wk-infobox-header,
.wk-infobox-section-title,
.wk-infobox-mandate,
.wk-infobox-official {
background: #ffffff;
}
}