« MediaWiki:Common.css » : différence entre les versions

Version du 9 novembre 2024 à 13:24

/* ---- Couleurs et variables racines ---- */
:root {
  --background-color-base: #C7CDE8; /* Couleur de fond principale */
  --primary-color: #00587a; /* Couleur principale pour les titres */
  --text-color-light: #ffffff; /* Couleur de texte clair */
  --container-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3); /* Ombre douce et semi-transparente */
  --title-font: "Gill Sans", sans-serif; /* Police pour les titres */
  --body-font: "Arial", sans-serif; /* Police pour le contenu */
}

/* ---- Fond de la page ---- */
body {
  background-color: var(--background-color-base);
  font-family: var(--body-font);
}

/* ---- Titres de page ---- */

/* Titre principal (en en-tête fixe) */
.mw-page-title-main,
#firstHeading {
  color: var(--text-color-light);
  background-color: var(--primary-color);
  font-family: var(--title-font);
  padding: 6px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  z-index: 1;
  margin-bottom: 15px; /* Espace pour distinguer du contenu */
}

/* Titres de sections dans la page */
.mw-body h1,
.mw-body h2,
.mw-body h3 {
  font-family: var(--title-font);
  color: var(--primary-color);
  padding: 4px 10px;
  border-left: 4px solid var(--primary-color); /* Barre pour marquer les sections */
  margin-top: 20px;
  background-color: #F0F4FA;
  border-radius: 3px;
}

/* ---- Contenu principal de l'article ---- */
.vector-body,
.vector-page-toolbar {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: var(--container-shadow);
  font-family: var(--body-font);
  color: #333;
  z-index: 1;
}

/* ---- Barre latérale gauche ---- */
.vector-pinned-container {
  background-color: var(--background-color-base);
  padding: 10px;
  border-radius: 6px;
}

/* ---- Liens et interactions ---- */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: #003B53;
  text-decoration: underline;
}

/* ---- Boutons et interactions ---- */
button, input[type="submit"], input[type="button"] {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-family: var(--body-font);
  font-weight: bold;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background-color: #003B53;
}