User:Test987654/common.css: Difference between revisions

From Test Wiki
← Older edit
Content deleted Content added
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:

/* Palette */
:root{
:root{
--rubik-white: #ffffff;
--rubik-white:#ffffff;
--rubik-yellow: #ffd500;
--rubik-yellow:#ffd500;
--rubik-orange: #ff6a00;
--rubik-orange:#ff6a00;
--rubik-red: #d40000;
--rubik-red:#d40000;
--rubik-green: #009b48;
--rubik-green:#009b48;
--rubik-blue: #0051ba;
--rubik-blue:#0051ba;
--rubik-dark: #1b1b1b;
--rubik-dark:#1b1b1b;
--rubik-border: #d8d8d8;
--rubik-border:#d8d8d8;
--rubik-soft: #fbfbfb;
--rubik-surface:#fbfbfb;
--rubik-soft-shadow:rgba(0,0,0,0.04);
--rubik-max-width:1150px;
}
}


/* Corps et fond léger damier */
/* Base safe */
body { background: var(--rubik-surface); color:var(--rubik-dark); font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body {
background-color: var(--rubik-soft);
color: var(--rubik-dark);
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.45;
}


/* Centre le contenu principal */
/* Conteneur principal centré et largeur lisible */
#content, .mw-body { max-width:var(--rubik-max-width); margin:18px auto; padding:0 16px; box-sizing:border-box; }
#content, .mw-body {
max-width: 1100px;
margin: 18px auto;
padding: 0 16px;
box-sizing: border-box;
}

/* En-tête propre */
#mw-head {
padding: 10px 0;
border-bottom: 3px solid var(--rubik-border);
background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
}


/* Titre de page — transformé en bandeau Rubik */
/* Bandeau titre */
#firstHeading {
#firstHeading {
display: block;
margin:18px 0 12px 0;
margin: 16px 0;
padding:14px 18px;
font-weight:700;
padding: 14px 18px;
font-size: 1.6rem;
font-size:1.55rem;
color:var(--rubik-dark);
font-weight: 700;
background:repeating-linear-gradient(90deg, var(--rubik-yellow) 0 33%, var(--rubik-orange) 33% 66%, var(--rubik-red) 66% 100%);
border: 2px solid var(--rubik-border);
border:2px solid var(--rubik-border);
background: repeating-linear-gradient(
border-left:10px solid var(--rubik-blue);
90deg,
var(--rubik-yellow) 0 33%,
border-right:10px solid var(--rubik-green);
border-radius:8px;
var(--rubik-orange) 33% 66%,
var(--rubik-red) 66% 100%
box-shadow:0 4px 0 var(--rubik-soft-shadow);
);
color: var(--rubik-dark);
box-shadow: 0 4px 0 rgba(0,0,0,0.06);
border-radius: 6px;
}
}


/* Si le titre est dans un skin différent */
/* Grille des sections principales (Purpose / Features / Contact) */
.mw-page-title, .page-header__title { display:block; padding:12px; }
.rubik-sections {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
margin-bottom: 18px;
}


/* Tentative automatique pour structurer trois sections principales.
/* Cartes homogènes */
On cible les premiers h2/h3 visibles afin de les transformer en "cartes".
.rubik-card {
Le CSS marche mieux si les sections ont des id ou titres standards. */
background: linear-gradient(180deg, var(--rubik-white), #fcfcfc);
.rubik-autogrid {
border: 2px solid var(--rubik-border);
display:grid;
border-radius: 8px;
grid-template-columns:repeat(3,1fr);
padding: 14px;
gap:16px;
box-shadow: 0 3px 0 rgba(0,0,0,0.04);
min-height: 140px;
margin-bottom:18px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}
@media (max-width:980px){ .rubik-autogrid { grid-template-columns:1fr; } }


/* Création dynamique : on stylise les éléments h2 + bloc suivant (parsé visuellement) */
/* En-tête de chaque carte (couleur identifiante) */
#mw-content-text > h2, #mw-content-text > h3 {
.rubik-card .card-title {
font-weight: 700;
margin-top:18px;
padding: 8px 10px;
padding:0;
font-weight:700;
margin: -14px -14px 10px -14px;
border-radius: 6px 6px 0 0;
color: white;
display: inline-block;
}
}
#mw-content-text > h2 + div, #mw-content-text > h3 + div,

#mw-content-text > h2 + p, #mw-content-text > h3 + p {
/* Couleurs des titres */
/* convertit le bloc suivant en "carte" visuelle */
.rubik-title-blue { background: var(--rubik-blue); }
.rubik-title-yellow { background: var(--rubik-yellow); color: #111; }
background:linear-gradient(180deg,var(--rubik-white),#fcfcfc);
.rubik-title-orange { background: var(--rubik-orange); }
border:2px solid var(--rubik-border);
border-radius:8px;

padding:12px;
.rubik-card p {
box-shadow:0 3px 0 var(--rubik-soft-shadow);
margin: 6px 0;
margin-bottom:8px;
flex: 1 0 auto;
}
}


/* Si la page contient trois sections en tête, on force l'affichage en grille :
/* Boutons et liens dans les cartes */
on applique la grille quand on trouve exactement 3 premiers blocs structurés. */
.rubik-card .actions {
#mw-content-text > h2:nth-of-type(1),
margin-top: 10px;
#mw-content-text > h2:nth-of-type(2),
display: flex;
#mw-content-text > h2:nth-of-type(3) {
gap: 8px;
/* marqueurs visuels — rien de disruptif */
flex-wrap: wrap;
}
}
@supports (display:grid){
.rubik-card .actions a {
/* Wrapper visuel: on crée l'apparence en ciblant les trois premières sections si elles existent */
padding: 8px 10px;
#mw-content-text > h2:nth-of-type(1),
border-radius: 6px;
#mw-content-text > h2:nth-of-type(2),
text-decoration: none;
#mw-content-text > h2:nth-of-type(3) {
border: 1px solid var(--rubik-border);
/* conservé pour compatibilité ; le layout réel se fait via le parent s'il existe */
background: #fff;
}
box-shadow: 0 2px 0 rgba(0,0,0,0.04);
color: var(--rubik-dark);
font-weight: 600;
}
}


/* Titres de section "sticker" — coloriage automatique selon l'ordre */
/* Améliore la lisibilité des listes internes */
#mw-content-text > h2:nth-of-type(1)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-blue); margin-right:8px; vertical-align:middle; border-radius:2px;}
.rubik-card ul { padding-left: 18px; margin: 6px 0; }
#mw-content-text > h2:nth-of-type(2)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-yellow); margin-right:8px; vertical-align:middle; border-radius:2px;}
#mw-content-text > h2:nth-of-type(3)::before { content:""; display:inline-block; width:12px; height:12px; background:var(--rubik-orange); margin-right:8px; vertical-align:middle; border-radius:2px;}


/* Grille des langues propre et compacte */
/* Liens / boutons — styles discrets */
.mw-body-content a, a.external, #p-views a { color:var(--rubik-blue); text-decoration:none; border-bottom:1px dotted rgba(0,0,0,0.06); }
.mw-body-content a:hover { color:var(--rubik-red); text-decoration:underline; }

/* Liste des langues (générique : interlanguage links ou portlet) */
#p-lang, .interlanguage-link-target, .langlist, .mw-langlist {
display:block;
}
.rubik-langlist {
.rubik-langlist {
display: grid;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap: 8px;
gap:8px;
margin-top: 12px;
margin-top:12px;
}
}
.rubik-langlist a {
.rubik-langlist a, .mw-langlist a {
display: block;
display:block;
padding: 8px 10px;
padding:8px 10px;
background: var(--rubik-white);
background:var(--rubik-white);
border: 1px solid var(--rubik-border);
border:1px solid var(--rubik-border);
border-radius: 6px;
border-radius:6px;
text-decoration: none;
text-decoration:none;
color: var(--rubik-dark);
color:var(--rubik-dark);
box-shadow: 0 2px 0 rgba(0,0,0,0.03);
box-shadow:0 2px 0 var(--rubik-soft-shadow);
font-size: .95rem;
margin-bottom:4px;
}
}

/* Tentative : transformer le bloc #p-lang en grille visuelle (si présent) */
#p-lang .body, #p-lang ul, #p-lang { padding:0; }
#p-lang ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; list-style:none; padding-left:0; margin:0; }
#p-lang ul li a { display:block; padding:6px 8px; background:var(--rubik-white); border:1px solid var(--rubik-border); border-radius:6px; }

/* Mini face 3x3 utilitaire (si tu veux l'insérer manuellement plus tard) */
.rubik-grid { display:grid; grid-template-columns:repeat(3,26px); gap:6px; }
.rubik-cell { width:26px;height:26px;border:1px solid rgba(0,0,0,0.06); border-radius:3px; box-shadow:0 2px 0 rgba(0,0,0,0.03); }
.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);}


/* Footer léger */
/* Footer léger */
#footer { margin-top:18px; padding:12px 0; border-top:1px solid var(--rubik-border); color:#333; font-size:.95rem; }
#footer {
margin-top: 18px;
padding: 12px 0;
color: #333;
border-top: 1px solid var(--rubik-border);
}


/* Mobile : empilement */
/* Réactivité : empilement sur petit écran */
@media (max-width: 920px) {
@media (max-width:980px){
#firstHeading { font-size:1.3rem; padding:12px; }
.rubik-sections { grid-template-columns: 1fr; }
#p-lang ul { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
#firstHeading { font-size: 1.3rem; padding: 12px; }
.rubik-card { min-height: auto; }
.rubik-grid { grid-template-columns:repeat(3,22px); gap:4px; }
.rubik-cell{ width:22px; height:22px; }
}

/* Utilitaires rubik pour blocs de face 3x3 */
.rubik-grid {
display: grid;
grid-template-columns: repeat(3, 26px);
gap: 6px;
align-items: center;
}
.rubik-cell {
width: 26px; height: 26px; border: 1px solid rgba(0,0,0,0.06);
border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,0.03);
}
}
.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); }
Retrieved from "https://testwiki.wiki/wiki/User:Test987654/common.css"