« Foreground.css » : différence entre les versions
sur le Dico des Ados : ton dictionnaire collaboratif, libre et gratuit !
style des listes à puces, notamment dans le formulaire d’édition d’un mot, section "Liens externes pertinents" |
Refonte de la page complète (on croise les doigts...) Balise : Révoqué |
||
Ligne 1 : | Ligne 1 : | ||
/* =============================== | |||
VARIABLES GLOBALES | |||
=============================== */ | |||
:root { | |||
--clr-bg: #fff; | |||
--clr-text: #222; | |||
--clr-accent: #3498db; | |||
--clr-accent-dark:#206dc2; | |||
--clr-accent-light:#5a9ce6; | |||
--clr-border: #cfd9e8; | |||
--clr-panel-bg: #f4f7fc; | |||
--clr-label: #008cba; | |||
--clr-btn-sec: #f1f3f4; | |||
--radius-xs: 3px; | |||
--radius-s: 5px; | |||
--radius-m: 10px; | |||
--shadow: 0 2px 10px 0 rgb(0 0 0 / 15%); | |||
--font-main: 'Poppins', sans-serif; | |||
} | |||
/* =============================== | |||
TOP BAR | |||
=============================== */ | |||
nav.top-bar, | |||
.top-bar, | .top-bar, | ||
.top-bar-section ul, | .top-bar-section ul, | ||
Ligne 5 : | Ligne 29 : | ||
.top-bar-section li a:not(.button), | .top-bar-section li a:not(.button), | ||
.top-bar-section .has-form { | .top-bar-section .has-form { | ||
background: var(--clr-bg); | |||
color: var(--clr-text); | |||
} | } | ||
. | .top-bar-logo { margin-top: .3rem; } | ||
} | |||
.top-bar.expanded .title-area { background: var(--clr-bg); } | |||
.top-bar.expanded .title-area {background: | |||
} | |||
.top-bar .toggle-topbar.menu-icon a { color: var(--clr-text); } | |||
.top-bar .toggle-topbar.menu-icon a span::after { | .top-bar .toggle-topbar.menu-icon a span::after { | ||
box-shadow : 0 0 0 1px # | box-shadow: 0 0 0 1px #000, 0 7px 0 1px #000, 0 14px 0 1px #000; | ||
} | } | ||
nav.top-bar { box-shadow: var(--shadow); } | |||
nav.top-bar { | |||
} | |||
.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 > .divider, | ||
.top-bar-section > ul > [role="separator"] { | .top-bar-section > ul > [role="separator"] { border-color: #000; } | ||
} | |||
#navwrapper { | #navwrapper { background: var(--clr-bg); } | ||
} | |||
ul#top-bar-left li:hover, | ul#top-bar-left li:hover, | ||
Ligne 208 : | Ligne 55 : | ||
ul#top-bar-right li:hover:not(.has-form), | ul#top-bar-right li:hover:not(.has-form), | ||
ul#top-bar-right li a:hover { | ul#top-bar-right li a:hover { | ||
background: var(--clr-accent); | |||
color: #fff; | |||
} | } | ||
ul#top-bar-right i { | ul#top-bar-right i { | ||
font-size: 1.1rem; | |||
transform: translateY(3px); | |||
} | } | ||
.top-bar-section .has- | |||
li#echo-notifications { color: var(--clr-accent); } | |||
.top-bar-section li.active:not(.has-form) a:not(.button), | |||
.top-bar-section li.active:not(.has-form) a:hover:not(.button) { | |||
background: inherit; | |||
color: var(--clr-text); | |||
} | } | ||
.top-bar-section .has- | |||
@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; | |||
} | |||
} | } | ||
/* =============================== | |||
HELP BUTTON | |||
=============================== */ | |||
.dico-help-modal { | |||
position: fixed; | |||
bottom: 100px; | |||
left: 20px; | |||
} | } | ||
.dico-help-modal .content { | |||
max-width: 300px; | |||
padding: 1rem; | |||
} | } | ||
.dico-help-modal .content ul { | |||
. | list-style: none; | ||
margin: 0; | |||
} | } | ||
.dico-help-btn { | |||
background: linear-gradient(90deg, var(--clr-accent-light) 0%, var(--clr-accent-dark) 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; | |||
} | } | ||
#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge { | /* =============================== | ||
NOTIFICATIONS BADGES | |||
=============================== */ | |||
#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: 0; | |||
cursor: pointer; | |||
top: 0; | |||
text-decoration: none; | |||
line-height: unset; | |||
box-sizing: unset; | |||
} | } | ||
@media (max-width: 639px) { | @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 { | #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"); | 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 { | #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"); | 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 { | #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"); | 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 { | #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"); | 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-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus { | #pt-notifications-notice .mw-echo-notifications-badge:focus { | ||
box-shadow: none; | |||
} | } | ||
#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; | ||
} | } | ||
/* | /* =============================== | ||
FORMULAIRE DE RECHERCHE | |||
. | =============================== */ | ||
.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: var(--radius-s); | |||
background: #f1f1f1; | |||
} | } | ||
.form-bar input:active, | |||
. | .form-bar input:focus { background: var(--clr-bg); } | ||
.form-bar .button.search { | |||
width: 100%; | 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; | |||
} | } | ||
/* =============================== | |||
BOUTONS & PANELS | |||
=============================== */ | |||
.dico-btn a, | |||
.dico- | span.dico-btn { | ||
padding: .8rem 1rem; | |||
border: 1px solid var(--clr-border); | |||
border-radius: var(--radius-xs); | |||
color: #181818; | |||
} | } | ||
.button.secondary { | |||
background: var(--clr-btn-sec); | |||
color: var(--clr-label); | |||
} | } | ||
.button.secondary:hover, | |||
.button.secondary:focus { | |||
background: var(--clr-label); | |||
color: #fff; | |||
} | } | ||
.form-panel { | |||
padding: 1rem; | |||
background: var(--clr-panel-bg); | |||
border: 1px solid var(--clr-border); | |||
border-radius: var(--radius-m); | |||
margin-top: 2rem; | |||
} | } | ||
.form-panel-multiple .multipleTemplateInstance { | |||
padding: 1rem; | |||
background: var(--clr-panel-bg) !important; | |||
border: 1px solid var(--clr-border) !important; | |||
border-radius: var(--radius-m); | |||
margin: 1rem 0; | |||
} | } | ||
.multipleTemplateAdder { | .multipleTemplateAdder { | ||
color: #345478; | |||
border: 1px solid var(--clr-border); | |||
border-radius: 50px; | |||
padding: 1rem 1.5rem .9rem; | |||
font-size: 1rem; | |||
background: var(--clr-bg); | |||
cursor: pointer; | |||
} | } | ||
.multipleTemplateAdder a.oo-ui-buttonElement-button { | .multipleTemplateAdder a.oo-ui-buttonElement-button { | ||
border: none !important; | |||
background: var(--clr-bg) !important; | |||
} | } | ||
/* =============================== | |||
GRILLE & MÉDIAS | |||
=============================== */ | |||
.grid:after { content: ''; display: block; clear: both; } | |||
.grid-sizer, | |||
.grid-item { width: 33.333%; } | |||
.grid-item { float: left; padding-left: .9375rem; padding-right: .9375rem; } | |||
.grid-item.item-img img.illustration { display: block; width: 100%; } | |||
.mainmedia { margin-bottom: 1.5rem; text-align: center; } | |||
.mainmedia img { border-radius: var(--radius-s); } | |||
.articlebox { | |||
width: 100%; | |||
padding: 1.5rem; | |||
border: 1px solid #ccc; | |||
border-radius: var(--radius-m); | |||
margin-bottom: 1.5rem; | |||
} | } | ||
.mediabox { margin: 0 0 1.5rem 0; width: 100%; } | |||
/* =============================== | |||
CHAMPS & FORMULAIRES | |||
=============================== */ | |||
.pfTreeInput { | |||
background: var(--clr-bg); | |||
border: 1px solid #ccc; | |||
width: 100% !important; | |||
border-radius: var(--radius-s); | |||
} | } | ||
.margin-bottom-0 { margin-bottom: 0 !important; } | |||
.group { margin-top: 1.5rem; } | |||
.mw-special-FormEdit .dico-save-bar, | .mw-special-FormEdit .dico-save-bar, | ||
.action-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 label, | ||
.mw-special-FormEdit .dico-save-bar a, | .mw-special-FormEdit .dico-save-bar a, | ||
Ligne 395 : | Ligne 289 : | ||
.action-formedit .dico-save-bar a, | .action-formedit .dico-save-bar a, | ||
.action-formedit .dico-save-bar .fas { | .action-formedit .dico-save-bar .fas { | ||
color: #fff; | |||
} | } | ||
.mw-special-FormEdit .dico-save-bar #wpSummary, | .mw-special-FormEdit .dico-save-bar #wpSummary, | ||
.action-formedit .dico-save-bar #wpSummary { | .action-formedit .dico-save-bar #wpSummary { | ||
max-width: 300px; | |||
display: inline-block; | |||
border-radius: var(--radius-xs); | |||
margin: 0; | |||
} | } | ||
.mw-special-FormEdit .dico-save-bar #wpMinoredit, | .mw-special-FormEdit .dico-save-bar #wpMinoredit, | ||
.action-formedit .dico-save-bar #wpMinoredit { | .action-formedit .dico-save-bar #wpMinoredit { margin: 0; } | ||
} | |||
@media ( | @media screen and (min-width: 768px) { | ||
#pfForm .dico-save-bar input#wpSummary { max-width: 250px !important; } | |||
} | } | ||
/* | /* =============================== | ||
FORMULAIRES D'ÉDITION (ALIGNEMENT) | |||
=============================== */ | |||
.mw-special-FormEdit .container-fields-form, | .mw-special-FormEdit .container-fields-form, | ||
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body, | .mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body, | ||
.action-formedit .container-fields-form, | .action-formedit .container-fields-form, | ||
.action-formedit .container-fields-form .oo-ui-fieldLayout-body { | .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, | .mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body, | ||
.action-formedit .container-fields-form .oo-ui-fieldLayout-body { | .action-formedit .container-fields-form .oo-ui-fieldLayout-body { | ||
display: flex; | |||
align-items: center; | |||
} | } | ||
.mw-special-FormEdit .container-fields-form .minorform div, | .mw-special-FormEdit .container-fields-form .minorform div, | ||
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body span.oo-ui-fieldLayout-header, | .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 .minorform div, | ||
.action-formedit .container-fields-form .oo-ui-fieldLayout-body span.oo-ui-fieldLayout-header { | .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; | |||
} | } | ||
.mw-special-FormEdit .container-fields-form .oo-ui-fieldLayout-body .oo-ui-fieldLayout-header, | .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 { | .action-formedit .container-fields-form .oo-ui-fieldLayout-body .oo-ui-fieldLayout-header { | ||
margin-right: .5rem; | |||
} | } | ||
.mw-special-FormEdit .container-fields-form #wpMinoredit, | .mw-special-FormEdit .container-fields-form #wpMinoredit, | ||
.action-formedit .container-fields-form #wpMinoredit { | .action-formedit .container-fields-form #wpMinoredit { | ||
margin-right: 13px; | |||
} | } | ||
.mw-special-FormEdit ul, | .mw-special-FormEdit ul, | ||
.action-formedit ul { | .action-formedit ul { list-style: none; } | ||
} | |||
.mw-special-FormEdit ul li div.pf-checkbox-input-container, | .mw-special-FormEdit ul li div.pf-checkbox-input-container, | ||
.action-formedit ul li div.pf-checkbox-input-container { | .action-formedit ul li div.pf-checkbox-input-container { | ||
display: inline-block; | |||
} | } | ||
/* | /* =============================== | ||
@media (max-width: 820px) { | RESPONSIVITÉ | ||
=============================== */ | |||
@media screen and (max-width: 820px) { | |||
.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; | |||
} | |||
.mw-special-FormEdit .dico-save-bar #wpMinoredit + label, | |||
.action-formedit .dico-save-bar #wpMinoredit + label { width: auto; } | |||
.oo-ui-inputWidget-input { width: 300px !important; } | |||
} | |||
@media screen and (max-width: 768px) { | |||
.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: var(--clr-text) !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; } | |||
} | |||
/* =============================== | |||
AUTRES | |||
=============================== */ | |||
.show-for-medium-up { font-family: var(--font-main); } | |||
#catlinks { border-style: solid none none; } | |||
#catlinks .label { background: var(--clr-label); } | |||
.multipleTemplateList + p { text-align: center; } | |||
.mw-special-FormEdit footer, | |||
.action-formedit footer { visibility: hidden; } | |||
.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; | |||
} | |||
@media (hover: none), (pointer: none), (pointer: coarse) { | |||
td.instanceAddAbove, td.instanceRemove { position: absolute; } | |||
} | } |
Version du 8 juillet 2025 à 15:37
/* ===============================
VARIABLES GLOBALES
=============================== */
:root {
--clr-bg: #fff;
--clr-text: #222;
--clr-accent: #3498db;
--clr-accent-dark:#206dc2;
--clr-accent-light:#5a9ce6;
--clr-border: #cfd9e8;
--clr-panel-bg: #f4f7fc;
--clr-label: #008cba;
--clr-btn-sec: #f1f3f4;
--radius-xs: 3px;
--radius-s: 5px;
--radius-m: 10px;
--shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
--font-main: 'Poppins', sans-serif;
}
/* ===============================
TOP BAR
=============================== */
nav.top-bar,
.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: var(--clr-bg);
color: var(--clr-text);
}
.top-bar-logo { margin-top: .3rem; }
.top-bar.expanded .title-area { background: var(--clr-bg); }
.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;
}
nav.top-bar { box-shadow: var(--shadow); }
.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: #000; }
#navwrapper { background: var(--clr-bg); }
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: var(--clr-accent);
color: #fff;
}
ul#top-bar-right i {
font-size: 1.1rem;
transform: translateY(3px);
}
li#echo-notifications { color: var(--clr-accent); }
.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
background: inherit;
color: var(--clr-text);
}
@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;
}
}
/* ===============================
HELP BUTTON
=============================== */
.dico-help-modal {
position: fixed;
bottom: 100px;
left: 20px;
}
.dico-help-modal .content {
max-width: 300px;
padding: 1rem;
}
.dico-help-modal .content ul {
list-style: none;
margin: 0;
}
.dico-help-btn {
background: linear-gradient(90deg, var(--clr-accent-light) 0%, var(--clr-accent-dark) 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;
}
/* ===============================
NOTIFICATIONS BADGES
=============================== */
#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: 0;
cursor: pointer;
top: 0;
text-decoration: none;
line-height: 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 {
box-shadow: none;
}
#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;
}
/* ===============================
FORMULAIRE DE RECHERCHE
=============================== */
.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: var(--radius-s);
background: #f1f1f1;
}
.form-bar input:active,
.form-bar input:focus { background: var(--clr-bg); }
.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;
}
/* ===============================
BOUTONS & PANELS
=============================== */
.dico-btn a,
span.dico-btn {
padding: .8rem 1rem;
border: 1px solid var(--clr-border);
border-radius: var(--radius-xs);
color: #181818;
}
.button.secondary {
background: var(--clr-btn-sec);
color: var(--clr-label);
}
.button.secondary:hover,
.button.secondary:focus {
background: var(--clr-label);
color: #fff;
}
.form-panel {
padding: 1rem;
background: var(--clr-panel-bg);
border: 1px solid var(--clr-border);
border-radius: var(--radius-m);
margin-top: 2rem;
}
.form-panel-multiple .multipleTemplateInstance {
padding: 1rem;
background: var(--clr-panel-bg) !important;
border: 1px solid var(--clr-border) !important;
border-radius: var(--radius-m);
margin: 1rem 0;
}
.multipleTemplateAdder {
color: #345478;
border: 1px solid var(--clr-border);
border-radius: 50px;
padding: 1rem 1.5rem .9rem;
font-size: 1rem;
background: var(--clr-bg);
cursor: pointer;
}
.multipleTemplateAdder a.oo-ui-buttonElement-button {
border: none !important;
background: var(--clr-bg) !important;
}
/* ===============================
GRILLE & MÉDIAS
=============================== */
.grid:after { content: ''; display: block; clear: both; }
.grid-sizer,
.grid-item { width: 33.333%; }
.grid-item { float: left; padding-left: .9375rem; padding-right: .9375rem; }
.grid-item.item-img img.illustration { display: block; width: 100%; }
.mainmedia { margin-bottom: 1.5rem; text-align: center; }
.mainmedia img { border-radius: var(--radius-s); }
.articlebox {
width: 100%;
padding: 1.5rem;
border: 1px solid #ccc;
border-radius: var(--radius-m);
margin-bottom: 1.5rem;
}
.mediabox { margin: 0 0 1.5rem 0; width: 100%; }
/* ===============================
CHAMPS & FORMULAIRES
=============================== */
.pfTreeInput {
background: var(--clr-bg);
border: 1px solid #ccc;
width: 100% !important;
border-radius: var(--radius-s);
}
.margin-bottom-0 { margin-bottom: 0 !important; }
.group { margin-top: 1.5rem; }
.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: var(--radius-xs);
margin: 0;
}
.mw-special-FormEdit .dico-save-bar #wpMinoredit,
.action-formedit .dico-save-bar #wpMinoredit { margin: 0; }
@media screen and (min-width: 768px) {
#pfForm .dico-save-bar input#wpSummary { max-width: 250px !important; }
}
/* ===============================
FORMULAIRES D'ÉDITION (ALIGNEMENT)
=============================== */
.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;
}
.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 {
margin: 0;
}
.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: .5rem;
}
.mw-special-FormEdit .container-fields-form #wpMinoredit,
.action-formedit .container-fields-form #wpMinoredit {
margin-right: 13px;
}
.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 screen and (max-width: 820px) {
.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;
}
.mw-special-FormEdit .dico-save-bar #wpMinoredit + label,
.action-formedit .dico-save-bar #wpMinoredit + label { width: auto; }
.oo-ui-inputWidget-input { width: 300px !important; }
}
@media screen and (max-width: 768px) {
.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: var(--clr-text) !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; }
}
/* ===============================
AUTRES
=============================== */
.show-for-medium-up { font-family: var(--font-main); }
#catlinks { border-style: solid none none; }
#catlinks .label { background: var(--clr-label); }
.multipleTemplateList + p { text-align: center; }
.mw-special-FormEdit footer,
.action-formedit footer { visibility: hidden; }
.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;
}
@media (hover: none), (pointer: none), (pointer: coarse) {
td.instanceAddAbove, td.instanceRemove { position: absolute; }
}