MediaWiki:Common.css
De WikiMetz, l'histoire de Metz, l'encyclopédie de Metz
Révision datée du 30 juillet 2020 à 23:29 par Administrateur (discussion | contributions)
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/* Le CSS placé ici sera appliqué à tous les habillages. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); .color-left{background:#800103;} .color-right{background: #333;} .color-middle{background: #a2a9b1;} #mw-content-container{border-bottom: solid 4px #800103;} body{background:#222} #mw-footer-container { border-top: solid 1px #2b2626;} #mw-content h1.firstHeading { border-bottom: solid 4px #800103;} p{text-align: justify; line-height: 24px; } .bandeau-article{ display:block; position: relative; background: #263238; margin: 10px 20px; -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } .bandeau-article a, .bandeau-article a.new:hover, .bandeau-article a:hover, .bandeau-article a.new:visited, .bandeau-article a:visited { border-bottom: 1px dotted; color:white !important; } .bandeau-article-info{ background: #263238; } .bandeau-article-warning{ background: #77ccff; } .bandeau-article-alert{ background:#800103; } .bandeau-article-image{ display: inline-block; float: left; height: auto; font-size: 40px; padding:11px 22px; background: rgba(0, 0, 0, 0.25); color:white; } .bandeau-copy-image{ display: inline-block; float: left; height: auto; font-size: 24px; padding:11px 22px; background: rgba(0, 0, 0, 0.25); color:white; } .bandeau-article-texte{ padding:15px; display:left; font-size: 0.9em; text-align: center; line-height: 0.9em; letter-spacing: -0.4px; height: 48px; overflow: hidden; color:white; } .bandeau-copy-texte{ padding:15px; display:left; font-size: 0.9em; text-align: center; line-height: 0.9em; letter-spacing: -0.4px; height: 25px; overflow: hidden; color:white; } .bandeau-article-texte>strong{ color: white; font-size: 1.3em; text-align: center; line-height: 0.9em; letter-spacing: -0.4px; } .bandeau-inside { display: block; font-size: 0.95em; border-width: 1px 0; padding: 0.2em 0.5em 0.3em 0; margin: 0.3em 0 0.7em 2em; background-color: #fdfdfd; background-color: #fbfbfb; border-style: solid; overflow: hidden; position: relative; } .b-i-warning{ border-color: #77ccff; } .b-i-alert{ border-color: #800103; } .b-i-info{ border-color: #e7e7e7; } .infobox-container { display:inline-grid; border: 1px solid #800103; font-family: 'Montserrat', sans-serif; margin: 0.5em 0 1em 1em; -webkit-box-shadow: 0 10px 6px -6px #777; background:#e8e4e4; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777;} @media (min-width:851px) { .infobox-container { float:right; width:20em;} } @media (max-width:850px) { .infobox-container { width:100%; margin:0; } } .infobox-title{ background: #0000004a; padding: 0.7em; text-align: center; font-size: 1.2em; margin: 0px; color: white; } .infobox-image { text-align: center; display: flex; justify-content: space-around; align-items: center; } .infobox-image img{ border: 1px solid #990000; margin-top: 8px; } .infobox-section { background: #800103; padding: 0.2em; text-align: center; font-size: 0.8em; font-weight: 600; margin: 4px; color: white; clear:both; } .infobox-content{ padding: 0.2em; font-size: 0.8em; margin: 4px; } .infobox-content-l{ display: block; float: left; font-weight:600; width: 40%; margin-bottom: 5px; clear:both; } .infobox-content-r{ display: block; margin-bottom: 5px; float: right; width: 60%; } a{ position: relative; z-index: 1; display: inline-flex; padding-left: .75rem; padding-bottom: .25rem; padding-right: .75rem; } a::before{ content: ""; width: 100%; height: 100%; background-image: linear-gradient(to top, #fed330 30%, rgba(0, 0, 0, 0) 45%); position: absolute; left: 0; bottom: 0; z-index: -1; will-change: width; transform: rotate(-2deg); transform-origin: left bottom } a:hover::before{ width: 0; } /* * animation styles */ a::before{ transition: width .1s ease-out; } a:hover::before{ transition-duration: .15s; } /* * These styles for text decoration. The demo will be work without it */ a{ color: #000000; font-size: 1rem; font-weight: 700; text-decoration: none; text-transform: uppercase; } a:focus{ outline: 2px solid #fed330; outline-offset: .5rem; }