MediaWiki:Foreground.css

/******************************************************************
 *  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;}
}