MediaWiki:Foreground.css
sur le Dico des Ados : ton dictionnaire collaboratif, libre et gratuit !
Note : après avoir enregistré tes modifications, il se peut que tu doives forcer le rechargement complet du cache de ton navigateur pour voir les changements.
- Google Chrome / Microsoft Edge : presse Ctrl-Maj-R (⌘-Shift-R sur un Mac).
- Firefox / Safari : maintiens la touche Maj (aussi appelée Shift) en cliquant sur le bouton Actualiser ou bien presse Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac).
- Opera : va dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite dans Confidentialité et sécurité → Effacer les données d’exploration → Images et fichiers en cache.
- Internet Explorer : maintiens la touche Ctrl en cliquant sur le bouton Actualiser ou presse Ctrl-F5.
/******************************************************************
* DicoAdo • Feuille CSS unifiée *
* Version : juillet 2025 *
* Auteur : refonte collaborative *
******************************************************************/
/* -------- 1. Variables globales -------- */
:root{
/* Couleurs de base */
--clr-bg : #ffffff;
--clr-text : #222222;
--clr-accent : #3498db;
--clr-accent-dark : #206dc2;
--clr-border : #cfd9e8;
--clr-panel-bg : #f4f7fc;
--clr-notif : #345478;
/* Rayons */
--radius-s : 3px;
--radius-m : 5px;
--radius-l : 10px;
/* Font – Vector utilise déjà system-ui, on garde l’héritage */
}
/* -------- 2. Base / reset minimal -------- */
*,
*::before,
*::after{box-sizing:border-box;}
body{
color:var(--clr-text);
background:var(--clr-bg);
}
a{color:var(--clr-accent);text-decoration:none;}
a:hover,
a:focus{color:#fff;background:var(--clr-accent);}
/* -------- 3. Composants -------- */
/* 3.1 Barre de navigation (Vector Top Bar) ---------------------- */
nav.top-bar{
background:var(--clr-bg);
box-shadow:0 2px 10px rgb(0 0 0 / .15);
display:flex;
align-items:center;
padding:0 .5rem;
}
.top-bar-logo{margin:.3rem 1rem;}
.top-bar-section ul{
list-style:none;
margin:0;
}
.top-bar-section li,
.top-bar-section li a,
.top-bar-section .has-form{
background:var(--clr-bg);
color:var(--clr-text);
}
.top-bar-section li a{
padding:.8rem 1rem;
border-radius:var(--radius-s);
transition:background .2s,color .2s;
}
.top-bar-section li a:hover{
background:var(--clr-accent);
color:#fff;
}
/* États actifs (sans sur-spécification) */
.top-bar-section li.active a{
background:inherit;
color:var(--clr-text);
}
/* Menu hamburger (mobile) */
.top-bar .toggle-topbar.menu-icon a{color:var(--clr-text);}
.top-bar .toggle-topbar.menu-icon a span::after{
box-shadow:0 0 0 1px #000,
0 7px 0 1px #000,
0 14px 0 1px #000;
}
/* Notifications -------------------------------------------------- */
li#echo-notifications{color:var(--clr-accent);}
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge{
height:56px;
margin:0;
background-repeat:no-repeat;
background-position:center;
text-indent:0;
border-radius:0;
cursor:pointer;
}
/* Icônes SVG inline pour sobriété ; état “toutes lues” */
#pt-notifications-alert .mw-echo-notifications-badge-all-read,
#pt-notifications-notice .mw-echo-notifications-badge-all-read{opacity:1;}
/* 3.2 Bouton d’aide flottant ------------------------------------- */
.dico-help{
position:fixed;
left:20px;
bottom:100px;
z-index:100;
}
.dico-help__btn{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.8rem 1rem .8rem 4.5rem;
background:linear-gradient(90deg,#5a9ce6 0%,#206dc2 100%);
color:#fff;
border-radius:100px;
width:fit-content;
}
.dico-help__icon{
position:absolute;
left:10px;top:-20px;
width:68px;height:95px;
background:url('https://fr.dicoado.org/w/images/2/24/Help-icon.png')
center/contain no-repeat;
}
/* Fenêtre modale d’aide */
.dico-help-modal{
position:fixed;
left:20px;bottom:100px;
max-width:300px;
padding:1rem;
background:var(--clr-bg);
border:1px solid var(--clr-border);
border-radius:var(--radius-m);
}
.dico-help-modal .content ul{list-style:none;margin:0;}
/* 3.3 Boutons et liens “Dico” ------------------------------------ */
.dico-btn a,
span.dico-btn{
padding:.8rem 1rem;
border:1px solid var(--clr-border);
border-radius:var(--radius-s);
color:var(--clr-text);
}
/* 3.4 Cartouches media ------------------------------------------- */
.mainmedia{margin-bottom:1.5rem;text-align:center;}
.mainmedia img{border-radius:var(--radius-m);}
.mediabox,
.articlebox{
width:100%;
padding:1.5rem;
border:1px solid #ccc;
border-radius:var(--radius-l);
margin-bottom:1.5rem;
}
/* 3.5 Formulaire de recherche dans la barre ---------------------- */
.form-bar{
position:relative;
padding:9px 0!important;
}
.form-bar input{
width:100%;
height:auto;
padding-left:30px;
background:#f1f1f1;
border:1px solid #ccc!important;
border-radius:var(--radius-s);
line-height:normal;
}
.form-bar input:focus{background:var(--clr-bg);}
.form-bar .button.search{
position:absolute;
left:4px;top:0;bottom:0;
width:29px;
background:transparent center/18px no-repeat;
background-image:
url("data:image/svg+xml;base64,PHN2ZyB3aW... (icône loupe)...");
border:none;
color:transparent;
}
/* 3.6 Barres de sauvegarde (Page Forms) --------------------------- */
.mw-special-FormEdit .dico-save-bar,
.action-formedit .dico-save-bar{
position:fixed;
left:0;right:0;bottom:0;
padding:1rem 0;
background:var(--clr-notif);
box-shadow:0 0 10px rgb(0 0 0 / .5);
z-index:2;
}
.dico-save-bar label,
.dico-save-bar a,
.dico-save-bar .fas{color:#fff;}
.dico-save-bar #wpSummary{
max-width:300px;
display:inline-block;
border-radius:var(--radius-s);
}
/* 3.7 Champ “pfTreeInput” ---------------------------------------- */
.pfTreeInput{
width:100%!important;
background:var(--clr-bg);
border:1px solid #ccc;
border-radius:var(--radius-m);
}
/* 3.8 Bouton “Ajouter” dans Page Forms --------------------------- */
.multipleTemplateAdder{
display:inline-block;
padding:1rem 1.5rem .9rem;
background:var(--clr-bg);
border:1px solid var(--clr-border);
border-radius:50px;
color:#345478;
cursor:pointer;
font-size:1rem;
}
/* -------- 4. Utilitaires & Helpers -------- */
.margin-bottom-0{margin-bottom:0!important;}
.group{margin-top:1.5rem;}
.grid:after{content:"";display:block;clear:both;}
/* Masonry items */
.grid-sizer,
.grid-item{width:33.333%;}
.grid-item{float:left;padding:0 .9375rem;}
.grid-item.item-img img.illustration{width:100%;display:block;}
/* -------- 5. Media Queries -------- */
/* ≥ 641 px -------------------------------------------------------- */
@media (min-width:40.0625em){
.top-bar-section li.active a{font-size:.9rem;line-height:3.5rem;}
}
/* ≤ 639 px -------------------------------------------------------- */
@media (max-width:639px){
/* Menu notifications texte + suppression des SVG chargés */
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge{
width:auto;height:auto;
background:none;
color:var(--clr-text)!important;
}
#echo-notifications-alerts{float:none!important;}
#pfForm{margin-bottom:5rem;}
.dico-help-modal{display:none;} /* on masque la bulle d’aide */
}
/* ≤ 768 px -------------------------------------------------------- */
@media (max-width:768px){
.grid-item{width:100%;}
/* Barre de sauvegarde : formulaire en colonne */
.mw-special-FormEdit .container-fields-form,
.action-formedit .container-fields-form{
flex-direction:column;align-items:flex-end;
}
.oo-ui-inputWidget-input{width:300px!important;}
}
/* ≥ 768 px -------------------------------------------------------- */
@media (min-width:768px){
#pfForm .dico-save-bar #wpSummary{max-width:250px!important;}
}
/* ≤ 820 px -------------------------------------------------------- */
@media (max-width:820px){
/* Ajustements Page Forms */
.mw-special-FormEdit .dico-save-bar #wpMinoredit + label,
.action-formedit .dico-save-bar #wpMinoredit + label{width:auto;}
}
/* -------- 6. Impressions (facultatif) -------- */
@media print{
nav.top-bar,
.dico-help,
.dico-save-bar{display:none;}
}