MediaWiki:Foreground.css

.top-bar, 
.top-bar-section ul, 
.top-bar-section ul li,
.top-bar-section ul li.active > a, 
.top-bar-section li a:not(.button), 
.top-bar-section .has-form {
    background-color: #fff;
    color: #222;
}

.top-bar-logo {    margin-top: .3rem;}

/* ---- Help button style ---- */
.dico-help-modal .content {
    max-width:300px;
    padding: 1rem;
}

.dico-help-modal .content ul {
    list-style: none;
    margin: 0;
}

.dico-help-modal {
    position:fixed;
    bottom: 100px;
    left:20px;
}

.dico-help-btn {
    background: rgb(90,156,230);
    background: linear-gradient(90deg,rgba(90,156,230,1) 0%,rgba(32,109,194,1) 100%);
    border-radius: 100px;
    padding: .8rem 1rem .8rem 5rem;
    color: #fff;
    position:relative;
    width: fit-content;
}

.dico-help-btn-img {
background-image:url('https://fr.dicoado.org/w/images/2/24/Help-icon.png');
    display: block;
    width: 68px;
    height: 95px;
    position: absolute;
    top: -20px;
    left: 10px;
}

/* ---- Top bar style ---- */
.top-bar.expanded .title-area {background:#fff;}

.top-bar .toggle-topbar.menu-icon a {
    color: #222;
}

.top-bar .toggle-topbar.menu-icon a span::after {
box-shadow : 0 0 0 1px #000000, 0 7px 0 1px #000000, 0 14px 0 1px #000000;
}

#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 1;
}

.group {margin-top:1.5rem}

.mainmedia {margin-bottom:1.5rem; text-align: center;}

.mainmedia img {border-radius:5px;}

.dico-btn a,
span.dico-btn {
    padding: .8rem 1rem;
    border: 1px solid #CFD9E8;
    border-radius: 3px;
    color: #181818;
}

.margin-bottom-0 {
    margin-bottom:0 !important;
}

.pfTreeInput {
    background: #fff;
    border: 1px solid #ccc;
width: 100% !important;
border-radius : 5px;
}

.articlebox {
    width: 100%;
    padding: 1.5rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.mediabox {margin: 0 0 1.5rem 0; width: 100%;}

.top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:hover:not(.button) {
    background-color: inherit;
}
.top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:hover:not(.button) {
    background-color: inherit;
    color: #222;
}
@media only screen and (min-width: 40.0625em) {
.top-bar-section li.active:not(.has-form) a:not(.button) {
font-size:.9rem;
line-height:3.5rem;
}
}

.form-bar {
  position: relative;
  padding: 9px 0 !important;
}

.form-bar:hover {
  background:transparent !important;
}

.form-bar input {
    height: auto;
    line-height: unset;
    border: 1px solid #ccc !important;
    padding-left: 30px;
    border-radius: 5px;
   background:#f1f1f1;
}

.form-bar input:active,.form-bar input:focus {
   background:#fff;
}

.form-bar .button.search {
   color:transparent;
   width: 29px;
   position: absolute;
   left: 4px;
   overflow:hidden;
   background-color: transparent;
  background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMTY2NjcgMTQuODMzM0MxMS44NDg2IDE0LjgzMzMgMTQuODMzMyAxMS44NDg2IDE0LjgzMzMgOC4xNjY2N0MxNC44MzMzIDQuNDg0NzcgMTEuODQ4NiAxLjUgOC4xNjY2NyAxLjVDNC40ODQ3NyAxLjUgMS41IDQuNDg0NzcgMS41IDguMTY2NjdDMS41IDExLjg0ODYgNC40ODQ3NyAxNC44MzMzIDguMTY2NjcgMTQuODMzM1oiIHN0cm9rZT0iIzcyNzc3RCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE2LjUgMTYuNUwxMi44NzUgMTIuODc1IiBzdHJva2U9IiM3Mjc3N0QiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
    border-radius: 0;
    margin:0;
    height: 100%;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
}

nav.top-bar {
    box-shadow: 0px 2px 10px 0 rgb(0 0 0 / 15%);
}

a#actions-button {z-index: 1}

.form-panel {
 padding: 1rem;
 background: #F4F7FC;
 border: 1px solid #CFD9E8;
 border-radius: 10px;
 margin-top: 2rem;
}

.form-panel-multiple .multipleTemplateInstance {
    padding: 1rem;
    background: #F4F7FC !important;
    border: 1px solid #CFD9E8 !important;
    border-radius: 10px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mw-special-FormEdit footer,
.action-formedit footer {
  visibility:hidden;
}

.top-bar-section ul #echo-notifications li {
    margin: 0 !important;
}

.top-bar-section ul #echo-notifications a {
    background-color: transparent;
    overflow: hidden;
}

.top-bar-section .has-dropdown > a:after {
    content:unset;
}

.top-bar-section .has-dropdown > a {
    padding-right: 15px !important;
}

.top-bar-section > ul > .divider,
.top-bar-section > ul > [role="separator"] {
  border-color: black;
}

#navwrapper {
    background-color: #fff;
}

ul#top-bar-left li:hover,
ul#top-bar-left li a:hover,
ul#top-bar-right li:hover:not(.has-form),
ul#top-bar-right li a:hover {
    background-color: #3498db;
    color: #fff;
    /* font: bold; */
}
ul#top-bar-right i {
    font-size: 1.1rem;
    transform: translateY(3px);
}
.top-bar-section .has-dropdown > a:hover:after {
    border-color: #fff transparent transparent transparent;
}
.top-bar-section .has-dropdown > a:hover:after {
    border-color: #333 transparent transparent transparent;
}
li#echo-notifications {color:#3498db;}

#catlinks {
    border-style: solid none none;
}

#catlinks .label{
    background-color: #008CBA;
}

.button.secondary {
    background-color: #f1f3f4;
    color: #008cba;
}

button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus  {
    background-color: #008cba;
    color: #ffffff;
}

.show-for-medium-up {
    font-family: 'Poppins',sans-serif;
}

#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: unset;
    border-radius: 0px;
    cursor: pointer;
    top:0px;
    text-decoration: none;
    line-height: unset;
    -webkit-box-sizing: unset;
    -moz-box-sizing: unset;
    box-sizing: unset;
}
@media (max-width: 639px) {
    #pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {
        font-size: .8rem;
    }
}

#pt-notifications-notice .mw-echo-notifications-badge {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Etray%3C/title%3E%3Cpath d=%22M3 1a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V3a2 2 0 00-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22/%3E%3C/svg%3E");
    color: transparent !important;
}

#pt-notifications-alert .mw-echo-notifications-badge {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Ebell%3C/title%3E%3Cpath d=%22M16 7a5.38 5.38 0 00-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 004 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 003-3H7a3 3 0 003 3z%22/%3E%3C/svg%3E");
    color: transparent !important;
}

#top-bar-right #echo-notifications-notice:hover #pt-notifications-notice .mw-echo-notifications-badge {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Etray%3C/title%3E%3Cpath d=%22M3 1a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V3a2 2 0 00-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22/%3E%3C/svg%3E");
}

#top-bar-right #echo-notifications-alerts:hover #pt-notifications-alert .mw-echo-notifications-badge {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Ebell%3C/title%3E%3Cpath d=%22M16 7a5.38 5.38 0 00-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 004 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 003-3H7a3 3 0 003 3z%22/%3E%3C/svg%3E");
}

#pt-notifications-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus {
   -webkit-box-shadow: 0;
    box-shadow: none;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}

.grid-item.item-img img.illustration {
  display: block;
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* 5 columns for larger screens */
  .grid-item { width: 100%; }

.dico-help-modal {display:none;}

.mw-special-FormEdit .dico-save-bar #wpMinoredit + label,
.action-formedit .dico-save-bar #wpMinoredit + label {
    width: calc(100% - 55px);
    text-align: left;
    margin-bottom: 10px;
}

#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
    background: 0;
    color: #222 !important;
    width: auto;
    height: auto;
}

#top-bar-right #echo-notifications-alerts:hover #pt-notifications-alert .mw-echo-notifications-badge,
#top-bar-right #echo-notifications-notice:hover #pt-notifications-notice .mw-echo-notifications-badge {
    background-image:none;
}

#echo-notifications-alerts {
    float: none !important;
}

#pt-notifications-alert .mw-echo-notifications-badge:after, #pt-notifications-notice .mw-echo-notifications-badge:after {
display:none;
}

#pfForm {margin-bottom:5rem;}
}

.multipleTemplateList + p {text-align:center;}

.multipleTemplateAdder {
    color: #345478;
    border: 1px solid #CFD9E8;
    border-radius: 50px;
    padding: 1rem 1.5rem .9rem;
    font-size: 1rem;
    background:#fff;
    cursor: pointer;
}

/* OOUI Hide */
.multipleTemplateAdder a.oo-ui-buttonElement-button {
    border: none !important;
    background: #fff !important;
}

@media screen and (min-width: 768px) {
#pfForm .dico-save-bar input#wpSummary {
max-width:250px !important;
}
}

.mw-special-FormEdit .dico-save-bar,
.action-formedit .dico-save-bar {
    position: fixed;
    bottom: 0;
    background: #345478;
    left: 0;
    z-index: 2;
    right: 0;
    padding: 1rem 0;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    margin:0;
}

.mw-special-FormEdit .dico-save-bar label,
.mw-special-FormEdit .dico-save-bar a,
.mw-special-FormEdit .dico-save-bar .fas,
.action-formedit .dico-save-bar label,
.action-formedit .dico-save-bar a,
.action-formedit .dico-save-bar .fas {
    color:#fff;
}

.mw-special-FormEdit .dico-save-bar #wpSummary,
.action-formedit .dico-save-bar #wpSummary {
    max-width: 300px;
    display: inline-block;
    border-radius: 3px;
    margin:0;
}

.mw-special-FormEdit .dico-save-bar #wpMinoredit,
.action-formedit .dico-save-bar #wpMinoredit {
    margin:0;
}

@media (hover: none), (pointer: none), (pointer: coarse) {
td.instanceAddAbove, td.instanceRemove {
    position: absolute;
}
}

.oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel, .oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-title {
    display: inline-block;
    padding-left: 2.3rem;
}

/* ---- Barre du formulaire ---- */
/* Alignement des éléments de la barre */
.mw-special-FormEdit .container-fields-form,
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body,
.action-formedit .container-fields-form,
.action-formedit .container-fields-form .oo-ui-fieldLayout-body {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body,
.action-formedit .container-fields-form .oo-ui-fieldLayout-body {
    display: flex;
    align-items: center;
}

/* Supression des expacements déformants */
.mw-special-FormEdit .container-fields-form .minorform div,
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body span.oo-ui-fieldLayout-header,
.action-formedit .container-fields-form .minorform div,
.action-formedit .container-fields-form .oo-ui-fieldLayout-body span.oo-ui-fieldLayout-header {
    padding: 0 !important;
}
.action-formedit .container-fields-form .oo-ui-layout.oo-ui-labelElement.oo-ui-fieldLayout,
.action-formedit .container-fields-form .oo-ui-layout.oo-ui-labelElement.oo-ui-fieldLayout {
    margin: 0;
}

/* Espace entre le résumé et son label */
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body .oo-ui-fieldLayout-header,
.action-formedit .container-fields-form .oo-ui-fieldLayout-body .oo-ui-fieldLayout-header {
    margin-right: 0.5rem;
}

/* Espace entre la checkbox et son label */
.mw-special-FormEdit .container-fields-form #wpMinoredit,
.action-formedit .container-fields-form #wpMinoredit {
    margin-right: 13px;
}

/* Listes à puces, notamment dans le formulaire d’édition d’un mot, section "Liens externes pertinents" */
.mw-special-FormEdit ul,
.action-formedit ul {
    list-style: none;
}
.mw-special-FormEdit ul li div.pf-checkbox-input-container,
.action-formedit ul li div.pf-checkbox-input-container {
    display: inline-block;
}

/* Responsivité */
@media (max-width: 820px) {
    /* Alignement en colonne des éléments */
    .mw-special-FormEdit .container-fields-form,
    .mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body,
    .action-formedit .container-fields-form,
    .action-formedit .container-fields-form .oo-ui-fieldLayout-body {
            flex-direction: column;
            align-items: flex-end;
    }

    /* Rectification de la taille du label de la checkbox */
    .mw-special-FormEdit .dico-save-bar #wpMinoredit + label,
    .action-formedit .dico-save-bar #wpMinoredit + label {
        width: auto;
    }

    /* Agrandissement du champ de résumé */
    .oo-ui-inputWidget-input {
        width: 300px !important;
    }
}