User:Test987654/common.css: Difference between revisions

/* --- Palette Rubik --- */
:root{
  --rubik-white: #ffffff;
  --rubik-yellow: #ffd500;
  --rubik-orange: #ff6a00;
  --rubik-red: #d40000;
  --rubik-green: #009b48;
  --rubik-blue: #0051ba;
  --rubik-dark: #1b1b1b;
  --rubik-light: #f4f4f4;
  --rubik-border: #cfcfcf;
}

/* --- Fond global damier 3x3 stylisé --- */
body.skin-vector, body.skin-monobook {
  background-color: var(--rubik-light);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  background-position: 0 0, 24px 24px;
  color: var(--rubik-dark);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- En-tête principal --- */
#mw-head, #p-personal, #p-namespaces {
  background: linear-gradient(90deg, var(--rubik-blue), var(--rubik-green));
  color: var(--rubik-white);
  border-bottom: 3px solid var(--rubik-border);
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
}

/* --- Logo carré type sticker --- */
#p-logo, .mw-portlet-logo {
  background: var(--rubik-white);
  border: 3px solid var(--rubik-border);
  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
  width: 64px;
  height: 64px;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
}

/* --- Bandeau de titre de page --- */
#firstHeading {
  background: repeating-linear-gradient(
    90deg,
    var(--rubik-yellow) 0 33%,
    var(--rubik-orange) 33% 66%,
    var(--rubik-red) 66% 100%
  );
  color: var(--rubik-dark);
  padding: 14px 18px;
  margin: 0 -1px 12px -1px;
  font-weight: 700;
  border: 2px solid var(--rubik-border);
  border-left: 8px solid var(--rubik-blue);
  border-right: 8px solid var(--rubik-green);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}

/* --- Boîtes d'info et infoboxes --- */
.infobox, .portable-infobox, .mw-portlet, .toc {
  background: linear-gradient(180deg, var(--rubik-white), #fbfbfb);
  border: 2px solid var(--rubik-border);
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

/* --- Titres de sections dans boîtes --- */
.infobox caption, .portable-infobox .pi-title, .mw-portlet h3 {
  background: var(--rubik-blue);
  color: var(--rubik-white);
  padding: 6px 10px;
  font-weight: 600;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  border-radius: 3px 3px 0 0;
}

/* --- Boutons et onglets carrés --- */
.mw-ui-button, .vector-menu, #p-cactions li a, .mw-portlet a {
  background: linear-gradient(180deg, var(--rubik-white), #f0f0f0);
  border: 2px solid var(--rubik-border);
  color: var(--rubik-dark);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 2px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
  display: inline-block;
}

/* Hover actif pour boutons rappelant sticker color */
.mw-ui-button:hover, .vector-menu a:hover, #p-cactions li a:hover {
  transform: translateY(-2px);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
}

/* Boutons colorés précis */
.btn-rubik-yellow { background: var(--rubik-yellow); color: var(--rubik-dark); border-color: rgba(0,0,0,0.08); }
.btn-rubik-orange { background: var(--rubik-orange); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
.btn-rubik-red { background: var(--rubik-red); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
.btn-rubik-green { background: var(--rubik-green); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
.btn-rubik-blue { background: var(--rubik-blue); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }

/* --- Liens colorés et accents --- */
a, .mw-body-content a {
  color: var(--rubik-blue);
  text-decoration: none;
  border-bottom: 2px dotted rgba(0,0,0,0.06);
}
a:hover { color: var(--rubik-red); text-decoration: underline; }

/* --- Tableau de style carré (pour listes de faces) --- */
.rubik-grid {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-gap: 6px;
  align-items: center;
  justify-content: start;
}
.rubik-cell {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}

/* Exemples de couleurs pour utiliser dans le markup wiki */
.rubik-white { background: var(--rubik-white); }
.rubik-yellow { background: var(--rubik-yellow); }
.rubik-orange { background: var(--rubik-orange); }
.rubik-red { background: var(--rubik-red); }
.rubik-green { background: var(--rubik-green); }
.rubik-blue { background: var(--rubik-blue); }

/* --- Pied de page --- */
#footer {
  background: linear-gradient(90deg, #f9f9f9, #ffffff);
  border-top: 3px solid var(--rubik-border);
  padding: 12px;
  color: #333;
  font-size: .9em;
}

/* --- Réactivité minimale --- */
@media (max-width:720px) {
  #firstHeading { padding: 10px 12px; font-size: 1.1em; }
  .rubik-grid { grid-template-columns: repeat(3, 22px); grid-gap: 4px; }
  .rubik-cell { width: 22px; height: 22px; }
}

/* --- Nettoyage visuel pour éléments par défaut perturbants --- */
.sidebar, .mw-navigation, .mw-indicators { border-radius: 4px; }