User:Test987654/common.css: Difference between revisions

From Test Wiki
Newer edit →
Content deleted Content added
test
 
No edit summary
Line 1: Line 1:
/* --- Palette Rubik --- */
:root{
:root{
--rubik-white: #ffffff;
--rubik-white: #ffffff;
Line 8: Line 7:
--rubik-blue: #0051ba;
--rubik-blue: #0051ba;
--rubik-dark: #1b1b1b;
--rubik-dark: #1b1b1b;
--rubik-light: #f4f4f4;
--rubik-border: #d8d8d8;
--rubik-border: #cfcfcf;
--rubik-soft: #fbfbfb;
}
}


/* --- Fond global damier 3x3 stylisé --- */
/* Corps et fond léger damier */
body {
body.skin-vector, body.skin-monobook {
background-color: var(--rubik-light);
background-color: var(--rubik-soft);
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);
color: var(--rubik-dark);
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.45;
}
}


/* --- En-tête principal --- */
/* Conteneur principal centré et largeur lisible */
#content, .mw-body {
#mw-head, #p-personal, #p-namespaces {
max-width: 1100px;
background: linear-gradient(90deg, var(--rubik-blue), var(--rubik-green));
margin: 18px auto;
color: var(--rubik-white);
padding: 0 16px;
border-bottom: 3px solid var(--rubik-border);
box-shadow: 0 3px 0 rgba(0,0,0,0.12);
box-sizing: border-box;
}
}


/* En-tête propre */
/* --- Logo carré type sticker --- */
#p-logo, .mw-portlet-logo {
#mw-head {
padding: 10px 0;
background: var(--rubik-white);
border: 3px solid var(--rubik-border);
border-bottom: 3px solid var(--rubik-border);
box-shadow: 0 6px 0 rgba(0,0,0,0.12);
background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
width: 64px;
height: 64px;
display: inline-block;
border-radius: 6px;
overflow: hidden;
}
}


/* --- Bandeau de titre de page --- */
/* Bandeau titre */
#firstHeading {
#firstHeading {
display: block;
margin: 16px 0;
padding: 14px 18px;
font-size: 1.6rem;
font-weight: 700;
border: 2px solid var(--rubik-border);
background: repeating-linear-gradient(
background: repeating-linear-gradient(
90deg,
90deg,
Line 53: Line 49:
);
);
color: var(--rubik-dark);
color: var(--rubik-dark);
box-shadow: 0 4px 0 rgba(0,0,0,0.06);
padding: 14px 18px;
border-radius: 6px;
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);
}
}


/* Grille des sections principales (Purpose / Features / Contact) */
/* --- Boîtes d'info et infoboxes --- */
.rubik-sections {
.infobox, .portable-infobox, .mw-portlet, .toc {
display: grid;
background: linear-gradient(180deg, var(--rubik-white), #fbfbfb);
grid-template-columns: repeat(3, 1fr);
border: 2px solid var(--rubik-border);
border-radius: 4px;
gap: 16px;
align-items: start;
box-shadow: 0 2px 0 rgba(0,0,0,0.06);
margin-bottom: 18px;
}
}


/* Cartes homogènes */
/* --- Titres de sections dans boîtes --- */
.rubik-card {
.infobox caption, .portable-infobox .pi-title, .mw-portlet h3 {
background: var(--rubik-blue);
background: linear-gradient(180deg, var(--rubik-white), #fcfcfc);
color: var(--rubik-white);
border: 2px solid var(--rubik-border);
border-radius: 8px;
padding: 6px 10px;
font-weight: 600;
padding: 14px;
border-bottom: 2px solid rgba(0,0,0,0.06);
box-shadow: 0 3px 0 rgba(0,0,0,0.04);
border-radius: 3px 3px 0 0;
min-height: 140px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
}


/* En-tête de chaque carte (couleur identifiante) */
/* --- Boutons et onglets carrés --- */
.rubik-card .card-title {
.mw-ui-button, .vector-menu, #p-cactions li a, .mw-portlet a {
font-weight: 700;
background: linear-gradient(180deg, var(--rubik-white), #f0f0f0);
padding: 8px 10px;
border: 2px solid var(--rubik-border);
color: var(--rubik-dark);
margin: -14px -14px 10px -14px;
padding: 6px 10px;
border-radius: 6px 6px 0 0;
border-radius: 4px;
color: white;
margin: 2px;
text-decoration: none;
box-shadow: 0 3px 0 rgba(0,0,0,0.08);
display: inline-block;
display: inline-block;
}
}


/* Couleurs des titres */
/* Hover actif pour boutons rappelant sticker color */
.rubik-title-blue { background: var(--rubik-blue); }
.mw-ui-button:hover, .vector-menu a:hover, #p-cactions li a:hover {
.rubik-title-yellow { background: var(--rubik-yellow); color: #111; }
transform: translateY(-2px);
.rubik-title-orange { background: var(--rubik-orange); }
transition: transform .12s ease, box-shadow .12s ease;

box-shadow: 0 6px 0 rgba(0,0,0,0.12);
.rubik-card p {
margin: 6px 0;
flex: 1 0 auto;
}
}


/* Boutons colorés précis */
/* Boutons et liens dans les cartes */
.rubik-card .actions {
.btn-rubik-yellow { background: var(--rubik-yellow); color: var(--rubik-dark); border-color: rgba(0,0,0,0.08); }
margin-top: 10px;
.btn-rubik-orange { background: var(--rubik-orange); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
display: flex;
.btn-rubik-red { background: var(--rubik-red); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
gap: 8px;
.btn-rubik-green { background: var(--rubik-green); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
flex-wrap: wrap;
.btn-rubik-blue { background: var(--rubik-blue); color: var(--rubik-white); border-color: rgba(0,0,0,0.08); }
}
.rubik-card .actions a {
padding: 8px 10px;
border-radius: 6px;
text-decoration: none;
border: 1px solid var(--rubik-border);
background: #fff;
box-shadow: 0 2px 0 rgba(0,0,0,0.04);
color: var(--rubik-dark);
font-weight: 600;
}


/* --- Liens colorés et accents --- */
/* Améliore la lisibilité des listes internes */
.rubik-card ul { padding-left: 18px; margin: 6px 0; }
a, .mw-body-content a {

color: var(--rubik-blue);
/* Grille des langues propre et compacte */
.rubik-langlist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin-top: 12px;
}
.rubik-langlist a {
display: block;
padding: 8px 10px;
background: var(--rubik-white);
border: 1px solid var(--rubik-border);
border-radius: 6px;
text-decoration: none;
text-decoration: none;
color: var(--rubik-dark);
border-bottom: 2px dotted rgba(0,0,0,0.06);
box-shadow: 0 2px 0 rgba(0,0,0,0.03);
font-size: .95rem;
}

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

/* Mobile : empilement */
@media (max-width: 920px) {
.rubik-sections { grid-template-columns: 1fr; }
#firstHeading { font-size: 1.3rem; padding: 12px; }
.rubik-card { min-height: auto; }
}
}
a:hover { color: var(--rubik-red); text-decoration: underline; }


/* --- Tableau de style carré (pour listes de faces) --- */
/* Utilitaires rubik pour blocs de face 3x3 */
.rubik-grid {
.rubik-grid {
display: grid;
display: grid;
grid-template-columns: repeat(3, 28px);
grid-template-columns: repeat(3, 26px);
grid-gap: 6px;
gap: 6px;
align-items: center;
align-items: center;
justify-content: start;
}
}
.rubik-cell {
.rubik-cell {
width: 26px; height: 26px; border: 1px solid rgba(0,0,0,0.06);
width: 28px;
border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,0.03);
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-white { background: var(--rubik-white); }
.rubik-yellow { background: var(--rubik-yellow); }
.rubik-yellow { background: var(--rubik-yellow); }
Line 137: Line 167:
.rubik-green { background: var(--rubik-green); }
.rubik-green { background: var(--rubik-green); }
.rubik-blue { background: var(--rubik-blue); }
.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; }
Retrieved from "https://testwiki.wiki/wiki/User:Test987654/common.css"