User:Test987654/common.css: Difference between revisions

From Test Wiki
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 1: Line 1:

:root{
:root{
--rubik-white: #ffffff;
--r-white:#ffffff;
--rubik-yellow: #ffd500;
--r-yellow:#ffd500;
--rubik-orange: #ff6a00;
--r-orange:#ff6a00;
--rubik-red: #d40000;
--r-red:#d40000;
--rubik-green: #009b48;
--r-green:#009b48;
--rubik-blue: #0051ba;
--r-blue:#0051ba;
--rubik-dark: #1b1b1b;
--r-dark:#1b1b1b;
--rubik-border: #d8d8d8;
--r-border:#d8d8d8;
--rubik-soft: #fbfbfb;
--r-soft:#fbfbfb;
}
}


/* N'applique les styles qu'au rendu pour l'utilisateur connecté */
/* Corps et fond léger damier */
body#mw-content-text, body.logged-in {}
body {
background-color: var(--rubik-soft);
color: var(--rubik-dark);
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.45;
}


/* Conteneur principal centré et largeur lisible */
/* Conteneur principal plus aéré pour TON affichage */
#content, .mw-body {
#content, .mw-body {
max-width: 1100px;
max-width: 1100px;
margin: 18px auto;
margin: 14px auto;
padding: 0 16px;
padding: 0 14px;
box-sizing: border-box;
box-sizing: border-box;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.01));
}
}


/* En-tête propre */
/* Bandeau titre personnalisé */
#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));
}

/* Bandeau titre */
#firstHeading {
#firstHeading {
display: block;
padding: 12px 16px;
margin: 16px 0;
margin: 12px 0;
padding: 14px 18px;
font-size: 1.6rem;
font-weight: 700;
font-weight: 700;
font-size: 1.45rem;
border: 2px solid var(--rubik-border);
color: var(--r-dark);
background: repeating-linear-gradient(
background: repeating-linear-gradient(90deg, var(--r-yellow) 0 33%, var(--r-orange) 33% 66%, var(--r-red) 66% 100%);
90deg,
var(--rubik-yellow) 0 33%,
border: 2px solid var(--r-border);
var(--rubik-orange) 33% 66%,
var(--rubik-red) 66% 100%
);
color: var(--rubik-dark);
box-shadow: 0 4px 0 rgba(0,0,0,0.06);
border-radius: 6px;
border-radius: 6px;
box-shadow: 0 3px 0 rgba(0,0,0,0.06);
}
}


/* Grille des sections principales (Purpose / Features / Contact) */
/* Cartes rubik pour sections (utilise dans tes pages perso) */
.rubik-sections {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
margin-bottom: 18px;
}

/* Cartes homogènes */
.rubik-card {
.rubik-card {
background: linear-gradient(180deg, var(--rubik-white), #fcfcfc);
background: linear-gradient(180deg, var(--r-white), #fcfcfc);
border: 2px solid var(--rubik-border);
border: 2px solid var(--r-border);
border-radius: 8px;
border-radius: 8px;
padding: 14px;
padding: 12px;
box-shadow: 0 3px 0 rgba(0,0,0,0.04);
min-height: 140px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}

/* En-tête de chaque carte (couleur identifiante) */
.rubik-card .card-title {
font-weight: 700;
padding: 8px 10px;
margin: -14px -14px 10px -14px;
border-radius: 6px 6px 0 0;
color: white;
display: inline-block;
}

/* Couleurs des titres */
.rubik-title-blue { background: var(--rubik-blue); }
.rubik-title-yellow { background: var(--rubik-yellow); color: #111; }
.rubik-title-orange { background: var(--rubik-orange); }

.rubik-card p {
margin: 6px 0;
flex: 1 0 auto;
}

/* Boutons et liens dans les cartes */
.rubik-card .actions {
margin-top: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.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);
box-shadow: 0 2px 0 rgba(0,0,0,0.04);
margin-bottom: 12px;
color: var(--rubik-dark);
font-weight: 600;
}
}


/* Titres de carte colorés */
/* Améliore la lisibilité des listes internes */
.rubik-card ul { padding-left: 18px; margin: 6px 0; }
.rubik-card .title { display:inline-block; padding:6px 10px; font-weight:700; border-radius:6px; color:#fff; margin-bottom:8px; }
.rubik-blue { background:var(--r-blue); }
.rubik-yellow { background:var(--r-yellow); color:#111; }
.rubik-orange { background:var(--r-orange); }


/* Petite grille 3x3 utile pour décor dans tes pages */
/* Grille des langues propre et compacte */
.rubik-grid { display:grid; grid-template-columns:repeat(3, 28px); gap:6px; align-items:center; }
.rubik-langlist {
.rubik-cell { width:28px; height:28px; border:1px solid rgba(0,0,0,0.06); border-radius:4px; box-shadow:0 2px 0 rgba(0,0,0,0.03); }
display: grid;
.r-white { background:var(--r-white); } .r-yellow { background:var(--r-yellow); } .r-orange { background:var(--r-orange); }
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
.r-red { background:var(--r-red); } .r-green { background:var(--r-green); } .r-blue { background:var(--r-blue); }
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;
color: var(--rubik-dark);
box-shadow: 0 2px 0 rgba(0,0,0,0.03);
font-size: .95rem;
}


/* Boutons discrets pour ton usage (ajoute la classe au lien) */
/* Footer léger */
.user-btn {
#footer {
display:inline-block;
margin-top: 18px;
padding: 12px 0;
padding:8px 10px;
border-radius:6px;
color: #333;
border-top: 1px solid var(--rubik-border);
border:1px solid var(--r-border);
background:#fff;
box-shadow:0 2px 0 rgba(0,0,0,0.03);
text-decoration:none;
color:var(--r-dark);
font-weight:600;
}
}


/* Mobile : empilement */
/* Réduction mobile */
@media (max-width: 920px) {
@media (max-width:720px) {
#firstHeading { font-size:1.2rem; padding:10px; }
.rubik-sections { grid-template-columns: 1fr; }
.rubik-grid { grid-template-columns:repeat(3,22px); gap:4px; }
#firstHeading { font-size: 1.3rem; padding: 12px; }
.rubik-card { min-height: auto; }
.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"