« MediaWiki:Mobile.css » : différence entre les versions
Les archives de Vault-tec>Kharmitch Aucun résumé des modifications |
m 52 versions importées Balises : Modification par mobile Modification par le web mobile |
||
(27 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 4 : | Ligne 4 : | ||
:root { | :root { | ||
--background-color-dp-00: #a9ceea; | |||
--background-color-dp-01: #b1d2ec; | |||
--background-color-dp-02: #bad7ee; | |||
--background-color-dp-03: #c2dcf0; | |||
--background-color-dp-04: #cbe1f2; | |||
--background-color-dp-06: #d4e6f4; | |||
--background-color-dp-08: #dcebf6; | |||
--background-color-dp-12: #e5f0f8; | |||
--background-color-dp-16: #edf5fa; | |||
--background-color-dp-24: #f6fafc; | |||
--background-color-overlay: rgba(0,0,0,0.99); | |||
--background-color-overlay--lighter: rgba(19,26,33,0.6); | |||
--background-color-framed: #040d02; | |||
--background-color-framed--hover: #091b04; | |||
--background-color-framed--active: #020601; | |||
--background-color-input: rgba(0,0,0,0.5); | |||
--background-color-icon: rgba(255,255,255,0.4); | |||
--background-color-icon--hover: rgba(255,255,255,0.6); | |||
--background-color-icon--active: rgba(255,255,255,0.2); | |||
--background-color-quiet--hover: rgba(255,255,255,0.07); | |||
--background-color-quiet--active: rgba(255,255,255,0.03); | |||
--background-color-primary--hover: #18440b; | |||
--background-color-primary--active: #26437f; | |||
--background-color-destructive: #b32424; | |||
--background-color-warning: #ac6600; | |||
--background-color-success: #14866d; | |||
--background-img: #f6fafc; | |||
--background-main: #fff; | |||
--box-background-color: #f6fafc; | |||
--box-shadow: 0 0 10px #e9f2f9; | |||
--color-base: black; | |||
--color-base--emphasized: rgba(255,255,255,0.87); | |||
--color-base--subtle: rgba(255,255,255,0.38); | |||
--color-primary: #51E527; | |||
--color-primary--hover: #18440b; | |||
--color-primary--active: #2a4b8d; | |||
--color-destructive: #0066cc; | |||
--color-destructive--hover: #e35b5b; | |||
--color-destructive--active: #b32424; | |||
--color-warning: #ffcc33; | |||
--color-success: #090a0a; | |||
--color-link: #0645ad; | |||
--color-link--hover: #18440b; | |||
--color-link--active: #2a4b8d; | |||
--color-link-new: #EE474D; | |||
--color-link-new--hover: #fee7e6; | |||
--color-link-new--active: #b32424; | |||
--opacity-base--disabled: 0.2; | |||
--opacity-icon-base: 0.4; | |||
--opacity-icon-base--hover: 0.6; | |||
--opacity-icon-base--active: 0.2; | |||
--size-icon: 20px; | |||
--border-color-base: rgba(0, 0, 0, 0.1); | |||
--border-color-base--lighter: rgba(255,255,255,0.02); | |||
--border-color-base--darker: #0000005e; | |||
--border-color-input: rgba(255,255,255,0.05); | |||
--border-color-input--hover: rgba(255,255,255,0.5); | |||
--border-radius--small: 4px; | |||
--border-radius--medium: 8px; | |||
--border-radius--large: 12px; | |||
--font-family-base: 'Roboto',system-ui,-apple-system,sans-serif; | |||
--font-family-serif: Georgia,serif; | |||
--font-family-monospace: 'SFMono-Regular','Menlo','Roboto Mono','Consolas','Liberation Mono','Courier New',monospace; | |||
--icon-filter-full: invert(0); | |||
--icon-filter-half: invert(0); | |||
} | } | ||
/* ------------------------------ */ | |||
/* Général */ | |||
/* ------------------------------ */ | |||
/* Adaptation spéciale en fonction des dimensions de l'écran */ | /* Adaptation spéciale en fonction des dimensions de l'écran */ | ||
@media | @media all and (max-width:720px) { | ||
/* On vire le comportement qui aligne les images les unes en dessous des autres */ | |||
.gallery .gallerybox { | |||
width: 0; | |||
} | } | ||
} | } | ||
@media screen and (min-width: 720px) { | |||
.avt-infobox { | |||
clear: right; | |||
float: right !important; | |||
margin: 0 0 0.5em 1em; | |||
max-width: 400px; | |||
} | } | ||
.avt-content-game-box { | |||
. | max-width: 400px; | ||
} | } | ||
.avt-game-listpage { | |||
float: right; | |||
margin: 0 0 0.5em 1em; | |||
max-width: 20rem; | |||
width: 100%; | |||
} | } | ||
} | } | ||
/* | /* ----------------------- */ | ||
/* | /* Galerie pages-listes */ | ||
/* | /* ----------------------- */ | ||
. | .avt-gallery-list-page { | ||
text-align: center; | |||
margin: 0.3em 0 0 0 !important; | |||
padding: 0 !important; | |||
} | } | ||
.avt-gallery-list-page li.gallerybox div.thumb { | |||
border: none; | |||
background-color: transparent; | |||
. | |||
. | |||
. | |||
} | } | ||
/* | /* ----------------------- */ | ||
/* | /* Tables personnalisées */ | ||
/* | /* ----------------------- */ | ||
.va-table { | .va-table { | ||
box-shadow: var(--box-shadow); | |||
background-color: var(--box-background-color); | |||
border-collapse: collapse; | |||
empty-cells: show; | |||
font-size: 12px; | |||
line-height: 16px; | |||
font-family: sans-serif; | |||
} | } | ||
.va-table > tr > td, | .va-table > tr > td, | ||
.va-table > * > tr > td, | .va-table > * > tr > td, | ||
.va-table > tr > th, | .va-table > tr > th, | ||
.va-table > * > tr > th { | .va-table > * > tr > th { | ||
border: 1px solid var(--border-color-base); | |||
padding: 1px 2px; | |||
} | } | ||
.va-table > tr > th, | .va-table > tr > th, | ||
.va-table > * > tr > th { | .va-table > * > tr > th { | ||
background-color: var(--background-color-dp-02); | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
/* Adapting lists & paragraphs */ | /* Adapting lists & paragraphs */ | ||
.va-table ul, | .va-table ul, | ||
.va-table ol, | .va-table ol, | ||
.va-table p { | .va-table p { | ||
line-height: 16px; | |||
margin-bottom: 0; | |||
} | } | ||
.va-table ul, | .va-table ul, | ||
.va-table ol { | .va-table ol { | ||
margin-left: 20px; | |||
margin-top: 0; | |||
} | } | ||
.va-table p, | .va-table p, | ||
.va-table * + ul, | .va-table * + ul, | ||
.va-table * + ol { | .va-table * + ol { | ||
margin-top: 3px; | |||
} | } | ||
.va-table ul li, | .va-table ul li, | ||
.va-table ol li { | .va-table ol li { | ||
margin-bottom: 0; | |||
} | } | ||
/* Highlighted rows */ | /* Highlighted rows */ | ||
.va-table > tr.va-table-highlight, | .va-table > tr.va-table-highlight, | ||
Ligne 402 : | Ligne 166 : | ||
.va-table > tr.va-table-highlight > th, | .va-table > tr.va-table-highlight > th, | ||
.va-table > * > tr.va-table-highlight > th { | .va-table > * > tr.va-table-highlight > th { | ||
background-color: var(--background-color-dp-01); | |||
} | } | ||
/* Tables with specific vertical alignment for cells */ | /* Tables with specific vertical alignment for cells */ | ||
.va-table-top > tr > td, | .va-table-top > tr > td, | ||
.va-table-top > * > tr > td { | .va-table-top > * > tr > td { | ||
vertical-align: top; | |||
} | } | ||
.va-table-middle > tr > td, | .va-table-middle > tr > td, | ||
.va-table-middle > * > tr > td { | .va-table-middle > * > tr > td { | ||
vertical-align: middle; | |||
} | } | ||
.va-table-bottom > tr > td, | .va-table-bottom > tr > td, | ||
.va-table-bottom > * > tr > td { | .va-table-bottom > * > tr > td { | ||
vertical-align: bottom; | |||
} | } | ||
/* Tables with specific horizontal alignment for cells/columns */ | /* Tables with specific horizontal alignment for cells/columns */ | ||
.va-table-center > tr > td, | .va-table-center > tr > td, | ||
Ligne 439 : | Ligne 199 : | ||
.va-table-center-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | .va-table-center-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | ||
.va-table-center-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | .va-table-center-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | ||
text-align: center; | |||
} | } | ||
.va-table-left > tr > td, | .va-table-left > tr > td, | ||
.va-table-left > * > tr > td, | .va-table-left > * > tr > td, | ||
Ligne 459 : | Ligne 218 : | ||
.va-table-left-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | .va-table-left-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | ||
.va-table-left-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | .va-table-left-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | ||
text-align: left; | |||
} | } | ||
.va-table-right > tr > td, | .va-table-right > tr > td, | ||
.va-table-right > * > tr > td, | .va-table-right > * > tr > td, | ||
Ligne 479 : | Ligne 237 : | ||
.va-table-right-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | .va-table-right-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td, | ||
.va-table-right-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | .va-table-right-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td { | ||
text-align: right; | |||
} | } | ||
/* Tables which are full width */ | /* Tables which are full width */ | ||
.va-table-full { | .va-table-full { | ||
width: 100%; | |||
} | } | ||
/* Tables which leave enough space for an infobox on the right */ | /* Tables which leave enough space for an infobox on the right */ | ||
.va-table-full-infobox { | .va-table-full-infobox { | ||
width: 960px; | |||
} | } | ||
/* Tables which are floated */ | /* Tables which are floated */ | ||
.va-table-float-left { | .va-table-float-left { | ||
clear: left; | |||
float: left; | |||
margin: 0 10px 10px 0; | |||
} | } | ||
.va-table-float-right { | .va-table-float-right { | ||
clear: right; | |||
float: right; | |||
margin: 0 0 10px 10px; | |||
} | } | ||
/* Tables in which the first column starts with an icon */ | /* Tables in which the first column starts with an icon */ | ||
.va-table-icon > tr > td:first-child, | .va-table-icon > tr > td:first-child, | ||
.va-table-icon > * > tr > td:first-child { | .va-table-icon > * > tr > td:first-child { | ||
padding-left: 18px; | |||
text-indent: -18px; | |||
} | } | ||
/* | /* | ||
/* | --------------------------------------------------- | ||
/* | Templates & Modules | ||
--------------------------------------------------- | |||
/* | le style ci-dessous défini l'apparence des modèles | ||
. | et des modules. | ||
Les modèles doivent être rangés dans l'ordre | |||
alphabétique. | |||
--------------------------------------------------- | |||
*/ | |||
/* ------------------------------ */ | |||
/* Modèle:Boîte déroulante */ | |||
/* ------------------------------ */ | |||
.avt-dropdown-box { | |||
margin: 0.5em 0; | |||
padding: 3px; | |||
border: 1px solid var(--border-color-base); | |||
overflow: auto; | |||
} | } | ||
.avt-dropdown-box-title { | |||
text-align: center; | |||
. | background-color: var(--background-color-dp-02); | ||
} | } | ||
.avt-dropdown-box-content { | |||
. | padding: 0 5px; | ||
} | } | ||
.avt-dropdown-box .mw-collapsible-toggle { | |||
. | padding-right: 0.5em; | ||
} | } | ||
/* | /* ------------------------------ */ | ||
/* Modèle:Citation */ | |||
/* ------------------------------ */ | |||
blockquote { | |||
border-left: none; | |||
margin: 0 auto; | |||
} | } | ||
q::before, q::after { | |||
content: ""; | |||
} | } | ||
blockquote small { | |||
margin-bottom: 10px; | |||
display: block; | |||
padding-left: 150px; | |||
} | } | ||
blockquote small, q small { | |||
font-size: inherit; | |||
} | } | ||
blockquote .mediaContainer { | |||
display: inline-block; | |||
. | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Console */ | |||
/* ------------------------------ */ | |||
.va-console{ | |||
background-color: #cfc; | |||
color: #000; | |||
font-family: monospace; | |||
padding: 2px | |||
} | } | ||
.va-console-cmd { | |||
color:#555; | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Infobox */ | |||
/* ------------------------------ */ | |||
/* Fix de l'infobox natif */ | |||
.content .infobox th, .content .infobox td { | |||
border-bottom: none; | |||
} | } | ||
. | .avt-infobox { | ||
background-color: var(--box-background-color) !important; | |||
. | border: 1px solid var(--border-color-base--darker) !important; | ||
font-size: 0.9em !important;; | |||
line-height: 1.4; | |||
word-wrap: break-word; | |||
box-shadow: var(--box-shadow); | |||
} | } | ||
.avt-infobox-header { | |||
padding: 3px; | |||
. | text-align: center; | ||
. | font-size: 1.4em; | ||
line-height: 1.1; | |||
margin-bottom: 10px; | |||
background-color: var(--background-color-dp-02); | |||
display: grid; | |||
grid-template-columns: 1fr 1.7fr 0.3fr; | |||
grid-template-rows: 1fr 1fr 1fr; | |||
grid-auto-flow: row; | |||
gap: 0 0; | |||
} | } | ||
.avt-infobox-header-icon, | |||
. | .avt-infobox-header-title, | ||
. | .avt-infobox-header-subhead { | ||
. | justify-self: center; | ||
align-self: center; | |||
} | } | ||
.avt-infobox-header-icon { | |||
. | grid-area: 1 / 3 / 4 / 4; | ||
opacity: 0.1; | |||
} | } | ||
.avt-infobox-header-title { | |||
grid-area: 2 / 1 / 4 / 4; | |||
font-weight: bold; | |||
. | |||
} | } | ||
.avt-infobox-header-subhead { | |||
. | grid-area: 1 / 1 / 2 / 4; | ||
font-size: 0.6em; | |||
} | } | ||
.avt-infobox-images { | |||
. | text-align: center; | ||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
padding: 2px 0; | |||
} | } | ||
.avt-infobox-images a { | |||
. | max-width: 100%; | ||
flex: 0 0 auto; | |||
} | } | ||
.avt-infobox-images img { | |||
. | max-width: 100%; | ||
height: auto; | |||
} | } | ||
.avt-infobox-images-legend { | |||
text-align: center; | |||
font-size: 0.8em; | |||
} | } | ||
.avt-infobox table { | |||
width: 100%; | |||
. | margin: 5px 0; | ||
table-layout: fixed; | |||
border-collapse: collapse; | |||
display: table; | |||
} | } | ||
.avt-infobox caption { | |||
. | text-align: center !important; | ||
display: table-caption; | |||
} | } | ||
.avt-infobox p.bloc, | |||
. | .avt-infobox caption { | ||
font-weight: bold; | |||
line-height: 1.1; | |||
margin: 0 0 5px 0; | |||
padding: 4px !important; | |||
background-color: var(--background-color-dp-02) !important;; | |||
} | } | ||
.avt-infobox th[scope="row"], | |||
. | .avt-infobox td { | ||
padding: 7px 10px; | |||
vertical-align: super; | |||
} | } | ||
.avt-infobox th[scope="row"] { | |||
. | text-align: left; | ||
padding-right: 10px; | |||
width: 8em; | |||
max-width: 140px; | |||
word-wrap: normal; | |||
} | } | ||
.avt-infobox span.mw-collapsible-toggle { | |||
. | float: right; | ||
} | } | ||
.avt-infobox span.mw-collapsible-toggle a { | |||
. | color: var(--color-base) | ||
} | } | ||
. | /* ------------------------------ */ | ||
/* Modèle:Bandeau de source */ | |||
/* ------------------------------ */ | |||
.avt-source-banner { | |||
margin: 0.5em 0; | |||
display: inline-flex; | |||
gap: 8px; | |||
} | } | ||
.avt-source-banner-img { | |||
. | margin: auto; | ||
} | } | ||
.avt-source-banner-text { | |||
. | padding: 5px; | ||
font-size: 0.9em; | |||
border-top: 1px solid var(--border-color-base); | |||
border-bottom: 1px solid var(--border-color-base); | |||
} | } | ||
. | /* ------------------------------ */ | ||
/* Modèle:Boîte de contenu de jeu */ | |||
/* ------------------------------ */ | |||
.avt-content-game-box { | |||
float: right; | |||
border: 1px solid var(--border-color-base); | |||
box-shadow: var(--box-shadow); | |||
margin: 0 0 0.5em 1em; | |||
font-size: 0.85em; | |||
background-color: var(--box-background-color); | |||
overflow: hidden; | |||
} | } | ||
#avt-content-game-box-title { | |||
text-align: center; | |||
background-color: var(--background-color-dp-02); | |||
padding: 3px; | |||
} | } | ||
.avt-content-game-box-list { | |||
. | margin: 0 !important; | ||
padding: 5px !important; | |||
list-style: none !important;; | |||
column-count: 2; | |||
column-rule: 1px solid var(--border-color-base); | |||
} | } | ||
/* | /* ------------------------ */ | ||
/* | /* Modèle:Liste horizontale */ | ||
/* | /* ------------------------ */ | ||
.liste-horizontale ul, | |||
. | .liste-horizontale li { | ||
margin-left: 0 !important; | |||
padding-left: 0 !important; | |||
display: inline; | |||
} | } | ||
.liste-horizontale ul:after { | |||
. | white-space: normal; | ||
} | } | ||
.liste-horizontale li:after { | |||
content: " "; /* au cas ou Mediawiki supprime les retours ligne */ | |||
. | |||
} | } | ||
.liste-horizontale li + li:before { | |||
. | white-space: normal; | ||
content: "· "; | |||
font-weight: bold; | |||
} | } | ||
.liste-horizontale li li:first-child:before { | |||
. | white-space: normal; | ||
content: " ("; | |||
} | } | ||
.liste-horizontale li ul:after { | |||
. | content: ")"; | ||
margin-left: -0.28em; | |||
} | } | ||
/* | /* ------------------------ */ | ||
/* Modèle:Palette */ | |||
/* ------------------------ */ | |||
.palette .mw-collapsible-toggle a { | |||
color: var(--color-base); | |||
. | |||
} | } | ||
.palette-groupe { | |||
border-top: 2px solid var(--box-background-color); | |||
font-weight: bold; | |||
text-align: right; | |||
white-space: normal; | |||
} | } | ||
.palette-banniere, | |||
. | .palette-groupe, | ||
.palette-section { | |||
background: var(--background-color-dp-03); | |||
} | } | ||
.palette-listes .palette-groupe { | |||
. | background: var(--background-color-dp-04); | ||
} | } | ||
.palette { | |||
. | clear: both; | ||
margin: 1em 0 1em 0; | |||
padding: 3px; | |||
font-size: 88%; | |||
border: 1px solid var(--border-color-base); | |||
} | } | ||
.palette ul, | |||
. | .palette li, | ||
.palette p { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
line-height: 1.6em; | |||
list-style: none none; | |||
} | } | ||
.palette-liens { | |||
. | float: left; | ||
font-variant: small-caps; | |||
} | } | ||
.palette-liens a { | |||
. | background: none !important; | ||
padding: 0 !important; | |||
} | } | ||
.palette span.mw-collapsible-toggle { | |||
. | float: right; | ||
} | } | ||
.palette-liens, | |||
. | .palette .mw-collapsible-toggle, | ||
.palette-groupe { | |||
padding: 0.25em 1em; | |||
} | } | ||
.palette-titre { | |||
background-color: var(--background-color-dp-02); | |||
} | } | ||
.palette-titre, | |||
.palette-section { | |||
font-size: 105%; | |||
font-weight: bold; | |||
padding: 0.25em 8em; | |||
. | text-align: center; | ||
} | } | ||
.palette-banniere, | |||
. | .palette-liste, | ||
.palette-liste-simple { | |||
padding: 0.25em; | |||
} | } | ||
.palette-liste, | |||
. | .palette-listes { | ||
width: 100%; | |||
} | } | ||
.palette-groupe, | |||
. | .palette-banniere, | ||
.mw-collapsible-content > ul > li > .palette-liste-simple { | |||
text-align: center; | |||
} | } | ||
div.palette-image { | |||
padding: 0.25em 0 0.25em 0.25em; | |||
width: 1%; | |||
} | } | ||
/* | /* ------------------------------ */ | ||
/* | /* Modèle:Documentation */ | ||
/* | /* ------------------------------ */ | ||
.va-documentation, | .va-documentation, | ||
.va-documentation-bar-top, | .va-documentation-bar-top, | ||
.va-documentation-bar-bottom { | .va-documentation-bar-bottom { | ||
border-color: var(--border-color-base); | |||
border-style: solid; | |||
clear: both; | |||
} | } | ||
.va-documentation { | .va-documentation { | ||
border-width: 1px; | |||
margin: 10px 0; | |||
box-shadow: var(--box-shadow); | |||
background: var(--box-background-color); | |||
} | } | ||
.va-documentation-bar-top, | .va-documentation-bar-top, | ||
.va-documentation-bar-bottom { | .va-documentation-bar-bottom { | ||
background-color: var(--background-color-dp-02); | |||
margin: 0; | |||
padding: 10px; | |||
} | } | ||
.va-documentation-bar-top { | .va-documentation-bar-top { | ||
border-width: 0 0 1px 0; | |||
} | } | ||
.va-documentation-bar-bottom { | .va-documentation-bar-bottom { | ||
border-width: 1px 0 0 0; | |||
text-align: right; | |||
} | } | ||
.va-documentation-links { | .va-documentation-links { | ||
float: right; | |||
text-align: right; | |||
} | } | ||
.va-documentation-content { | .va-documentation-content { | ||
margin: 0; | |||
padding: 20px; | |||
} | } | ||
.va-documentation-small { | .va-documentation-small { | ||
font-size: 0.8em; | |||
} | |||
.va-documentation-bar-top .external { | |||
background: none !important; | |||
padding: 0 !important; | |||
} | } | ||
/* | /* ---------------------------------- */ | ||
/* | /* Modèle:Interactions */ | ||
/* | /* ---------------------------------- */ | ||
.avt- | .avt-interactions { | ||
list-style: none; | |||
margin: 0.5em 0 !important; | |||
max-width: 40rem; | |||
padding: 0 !important; | |||
} | |||
.avt-interactions-row { | |||
display: grid; | |||
grid-template-columns: 5rem auto; | |||
border: 1px solid var(--border-color-base); | |||
margin: 0.25em 0; | |||
background-color: var(--box-background-color); | |||
box-shadow: var(--box-shadow); | |||
padding: 7px; | |||
} | } | ||
.avt- | .avt-interactions-img { | ||
margin: auto; | |||
} | } | ||
.avt- | .avt-interactions-text { | ||
align-self: center; | |||
font-size: 0.85em; | |||
} | } | ||
/* | /* ------------------------------ */ | ||
/* Modèle:Homonymie */ | |||
/* ------------------------------ */ | |||
/* | |||
/* | |||
.homonymie { | |||
padding: 5px; | |||
font-style: italic; | |||
border-bottom: 1px solid var(--border-color-base); | |||
. | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Transcription */ | |||
/* ------------------------------ */ | |||
.va-transcript-icon { | .va-transcript-icon { | ||
display: none; | |||
} | } | ||
.va-transcript-text { | .va-transcript-text { | ||
font-family: monospace; | |||
font-size: 0.9em; | |||
} | } | ||
. | /* ---------------------------------- */ | ||
/* Modèle:Galerie de vidéos */ | |||
/* ---------------------------------- */ | |||
.avt-videogallery { | |||
list-style: none !important;; | |||
margin: 0.5em 0 !important; | |||
display: inline-flex; | |||
flex-wrap: wrap; | |||
padding: 0 !important; | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Bandeau de rubrique */ | |||
/* ------------------------------ */ | |||
.avt-section-banner { | |||
padding: 0.25em 0.5em; | |||
/* | border-top: 1px solid var(--border-color-base); | ||
border-bottom: 1px solid var(--border-color-base); | |||
. | margin: 0.5em 0; | ||
background-color: var(--box-background-color); | |||
font-size: 0.9em; | |||
overflow: hidden; | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
. | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Infobulle */ | |||
/* ------------------------------ */ | |||
.avt-tooltip { | |||
border-bottom: 1px dotted; | |||
cursor:help | |||
} | } | ||
.avt-tooltip-popup { | |||
position: absolute; | |||
background: var(--background-color-dp-02); | |||
border: 1px solid var(--border-color-base); | |||
padding: 4px; | |||
. | left: 0; | ||
white-space: nowrap; | |||
z-index: 2; | |||
} | } | ||
/* | /* ------------------------------ */ | ||
/* | /* Modèle:Bandeau d'avertissement */ | ||
/* | /* ------------------------------ */ | ||
.avt-warn-banner { | |||
margin: 0.5em 0; | |||
display: grid; | |||
grid-template-columns: max-content auto; | |||
gap: 8px; | |||
padding: 0 10px; | |||
border-style: solid; | |||
border-width: 1px 0 1px 0; | |||
background-color: var(--box-background-color); | |||
} | } | ||
. | .avt-warn-banner-header { | ||
font-weight: bold; | |||
} | } | ||
. | .avt-warn-banner-img { | ||
margin: auto; | |||
} | } | ||
. | .avt-warn-banner-text { | ||
padding: 5px; | |||
} | } | ||
. | .avt-warn-banner-desc, | ||
.avt-warn-banner-note { | |||
font-size: 0.8em; | |||
} | } | ||
. | /* Types de bandeau */ | ||
.avt-warn-banner-maintenance { | |||
border-color: var(--color-warning); | |||
} | } | ||
.avt-warn-banner-info { | |||
border-color: #77ccff; | |||
. | |||
} | } | ||
.avt-warn-banner-license { | |||
. | border-color: #c0c0ff; | ||
{ | |||
} | } | ||
/* | /* ------------------------------ */ | ||
/* | /* Portails */ | ||
/* | /* ------------------------------ */ | ||
. | /* Définition des zones */ | ||
.homepage-welcome { | |||
gap: 1rem; | |||
} | } | ||
.homepage-welcome { | |||
. | grid-area: welcome; | ||
background: linear-gradient(to bottom,#fff,var(--box-background-color)); | |||
border-bottom: solid 1px var(--border-color-base); | |||
} | } | ||
/* Boîte générique */ | |||
. | .homepage-box { | ||
border: 1px solid var(--border-color-base); | |||
background: var(--box-background-color); | |||
box-shadow: var(--box-shadow); | |||
padding: 1rem; | |||
margin-bottom: 1rem; | |||
} | } | ||
.homepage-welcome-subtitle, | |||
.portal- | .homepage-welcome-links, | ||
.homepage-portal-theme .homepage-box-content { | |||
text-align: center; | |||
} | } | ||
.homepage-welcome-fogen { | |||
. | margin-bottom: 1rem; | ||
text-align: center; | |||
} | } | ||
.homepage-welcome-title { | |||
. | text-align: center; | ||
font-size: 200%; | |||
margin: 0 50px 5px 50px; | |||
border-bottom: 1px solid var(--border-color-base); | |||
text-shadow: 0 0 8px #829fce; | |||
color: #425b84; | |||
font-weight: bold; | |||
} | } | ||
.homepage-box-title { | |||
. | text-align: center; | ||
font-size: 150%; | |||
border-bottom: 1px solid var(--border-color-base); | |||
margin-bottom: 20px; | |||
text-shadow: 0 0 8px #829fce; | |||
color: #425b84; | |||
} | } | ||
.homepage-portal-fangames-list { | |||
. | list-style: none !important;; | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
grid-gap: 30px 0; | |||
} | } | ||
.homepage-portal-games-list { | |||
. | list-style: none !important; | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
grid-gap: 30px 0; | |||
} | } | ||
.homepage-portal-games-item { | |||
.portal- | text-align: center; | ||
font-size: 0.85em; | |||
} | } | ||
.homepage-portal-games-logo { | |||
.portal- | height: 60px; | ||
} | } | ||
.homepage-presentation-title, | |||
. | .homepage-participation-title, | ||
.homepage-articleday-title, | |||
.homepage-imageday-title { | |||
border-bottom: 1px solid var(--border-color-base); | |||
margin-bottom: 20px; | |||
text-shadow: 0 0 8px var(--color-link); | |||
color: var(--color-link); | |||
} | } | ||
.homepage-presentation-content, | |||
. | .homepage-participation-content, | ||
.homepage-articleday-content, | |||
.homepage-imageday-content { | |||
font-size: 0.85em; | |||
} | } | ||
.game-portal { | |||
.portal | display: grid; | ||
grid-gap: 1rem; | |||
} | } | ||
.portal-talkto { | |||
text-align: center; | |||
} | } | ||
.portal-box-title { | |||
.portal- | text-align: center; | ||
font-size: 150%; | |||
margin: 0 0 5px 0; | |||
border-bottom: 1px solid var(--border-color-base); | |||
text-shadow: 0 0 8px var(--color-link); | |||
color: var(--color-link); | |||
} | } | ||
.portal-content-links { | |||
.portal- | display: grid; | ||
grid-gap: 2rem; | |||
grid-template-columns: 1fr; | |||
padding: 1rem; | |||
} | } | ||
.portal-content-group-title { | |||
.portal- | border-bottom: 1px dotted var(--border-color-base); | ||
font-size: 125%; | |||
margin-bottom: 1rem; | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Bandeau de note */ | |||
/* ------------------------------ */ | |||
. | .avt-note-banner { | ||
margin-top: 0.5em; | |||
padding-left: 2em; | |||
padding-bottom: 0.5em; | |||
margin-bottom: 0.5em; | |||
background: var(--background-main); | |||
font-style: italic; | |||
border-bottom: 1px solid var(--border-color-base); | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | } | ||
.avt-note-banner + .avt-note-banner { | |||
. | margin-top: calc(-0.5em - 1.05px); | ||
} | } | ||
/* ---------------------------------- */ | |||
/* Modèle:Références */ | |||
/* ---------------------------------- */ | |||
. | .avt-references { | ||
font-size: 0.8em; | |||
line-height: 1.6; | |||
} | } | ||
/* ------------------------------ */ | |||
/* Modèle:Citation ligne */ | |||
/* ------------------------------ */ | |||
. | .np-quote-snd-trigger { | ||
display: inline-block; | |||
position: relative; | |||
top:auto; | |||
left:auto; | |||
padding: 0px 2px; | |||
} | } | ||
.np-quote-snd-trigger:hover .np-quote-snd-player { | |||
. | display:block; | ||
{ | |||
} | } | ||
.np-quote-snd-player { | |||
display:none; | |||
position:absolute; | |||
top: -30px; | |||
left: 100%; | |||
z-index:100 !important; | |||
width: 300px; | |||
overflow-x: hidden; | |||
margin: 0px; | |||
padding: 5px 10px 10px 10px; | |||
border: 1px solid var(--border-color-base); | |||
box-shadow: var(--box-shadow); | |||
background-color: var(--box-background-color); | |||
text-align: left; | |||
font-size: 0.85em; | |||
} | } | ||
. | .np-quote-snd-player-img { | ||
float: left; | |||
width: 55px; | |||
} | } | ||
. | .np-quote-snd-player-title { | ||
width: 250px; | |||
height: 50px; | |||
display: table-cell; | |||
vertical-align: middle; | |||
} | } | ||
. | .np-quote-snd-player-title span { | ||
font-size: 18px; | |||
} | } | ||
/* ---------------------------------- */ | /* ---------------------------------- */ | ||
/* Modèle: | /* Modèle:Fiche de créature */ | ||
/* ---------------------------------- */ | /* ---------------------------------- */ | ||
. | .creature-card-data { | ||
background-color: var(--box-background-color) !important; | |||
border: 1px solid var(--border-color-base) !important; | |||
font-size: 0.9em !important; | |||
line-height: 1.4; | |||
word-wrap: break-word; | |||
box-shadow: var(--box-shadow); | |||
} | |||
.creature-card-table { | |||
width: 100%; | |||
table-layout: fixed; | |||
border-collapse: collapse; | |||
display: table; | |||
} | |||
.creature-card-table caption, | |||
.creature-card-list dt { | |||
font-weight: bold; | |||
line-height: 1.1; | |||
margin: 0 0 5px 0; | |||
padding: 4px !important; | |||
background-color: var(--background-color-dp-02) !important; | |||
text-align: center !important; | |||
} | } | ||
. | .creature-card-table th[scope="row"] { | ||
text-align: left; | |||
padding-right: 10px; | |||
width: 13em; | |||
word-wrap: normal; | |||
} | } | ||
. | .creature-card-table th[scope="row"], | ||
.creature-card-table td, | |||
.creature-card-list dd { | |||
padding: 7px 10px; | |||
vertical-align: super; | |||
} | } | ||
. | .creature-card-list { | ||
margin-left: 0 !important; | |||
margin: 0 0 5px 0; | |||
} | } | ||
/* ---------------------------------- */ | /* ---------------------------------- */ | ||
/* Modèle: | /* Modèle:Introduction de page-liste */ | ||
/* ---------------------------------- */ | /* ---------------------------------- */ | ||
.avt- | .avt-introduction { | ||
margin: 0.5em 0; | |||
} | } | ||
/* ------------------------------ */ | /* ------------------------------ */ | ||
/* Modèle: | /* Modèle:Liste de pages-listes */ | ||
/* ------------------------------ */ | /* ------------------------------ */ | ||
.avt- | .avt-game-listpage { | ||
border: 1px solid var(--border-color-base); | |||
box-shadow: var(--box-shadow); | |||
padding: 5px; | |||
font-size: 0.85em; | |||
background-color: var(--box-background-color); | |||
text-align: center; | |||
} | } | ||
.avt- | .avt-game-listpage-title { | ||
border: 1px solid var(--border-color-base); | |||
background-color: var(--background-color-dp-02); | |||
padding: 0.25em 0; | |||
margin-bottom: 0.5em; | |||
font-weight: bold; | |||
} | } | ||
.avt- | .avt-game-listpage-list { | ||
margin: 0 !important; | |||
list-style: none; | |||
} | } | ||
/* ------------------------ */ | /* -------------------------- */ | ||
/* Modèle: | /* Modèle:Tableau d'artisanat */ | ||
/* ------------------------ */ | /* -------------------------- */ | ||
. | .artisanat { | ||
box-shadow: var(--box-shadow); | |||
background-color: var(--box-background-color); | |||
border: 1px solid var(--border-color-base); | |||
font-size: 0.9em; | |||
display: grid; | |||
} | } | ||
. | .artisanat-colonne-titre { | ||
font-weight: bold; | |||
text-align: center; | |||
margin-bottom: 3px; | |||
background-color: var(--background-color-dp-02); | |||
padding: 4px !important; | |||
} | } | ||
. | .artisanat-colonne-liste > ul { | ||
list-style: none; | |||
margin: 0; | |||
padding: 7px 10px; | |||
} | } | ||
. | .artisanat-separateur { | ||
display: none; | |||
} | } | ||
/* ------------------------------ */ | /* ------------------------------ */ | ||
/* | /* MediaWiki:Sitenotice */ | ||
/* ------------------------------ */ | /* ------------------------------ */ | ||
.avt- | .avt-sitenotice { | ||
border: 1px solid var(--border-color-base); | |||
background-color: var(--box-background-color); | |||
box-shadow: var(--box-shadow); | |||
padding: 5px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 10px; | |||
} | |||
.avt-sitenotice a { | |||
color: var(--color-link) !important; | |||
} | } | ||
/* ------------------------------ | /* | ||
--------------------------------------------------- | |||
Cross classes | |||
--------------------------------------------------- | |||
Les classes ci-dessous sont utilisées par plusieurs | |||
modèles ou modules | |||
--------------------------------------------------- | |||
*/ | |||
.avt- | /* Pour créer des listes simples, souvent appelées | ||
dans des modèles ou des tables */ | |||
.avt-simple-list { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | |||
/* Séparateur <hr/> */ | |||
.separator { | |||
background-color: var(--border-color-base); | |||
} | } | ||
.avt- | /* Boîte générique */ | ||
.avt-genericbox { | |||
border: 1px solid var(--border-color-base); | |||
background: var(--box-background-color); | |||
} | } | ||
/* catlinks mobile */ | |||
/* | .catlinks{ | ||
. | |||
background-color: var(--box-background-color); | background-color: var(--box-background-color); | ||
border: 1px solid var(--border-color-base); | |||
} | } |
Dernière version du 8 novembre 2022 à 11:33
/* ----------------------- */
/* Variables */
/* ----------------------- */
:root {
--background-color-dp-00: #a9ceea;
--background-color-dp-01: #b1d2ec;
--background-color-dp-02: #bad7ee;
--background-color-dp-03: #c2dcf0;
--background-color-dp-04: #cbe1f2;
--background-color-dp-06: #d4e6f4;
--background-color-dp-08: #dcebf6;
--background-color-dp-12: #e5f0f8;
--background-color-dp-16: #edf5fa;
--background-color-dp-24: #f6fafc;
--background-color-overlay: rgba(0,0,0,0.99);
--background-color-overlay--lighter: rgba(19,26,33,0.6);
--background-color-framed: #040d02;
--background-color-framed--hover: #091b04;
--background-color-framed--active: #020601;
--background-color-input: rgba(0,0,0,0.5);
--background-color-icon: rgba(255,255,255,0.4);
--background-color-icon--hover: rgba(255,255,255,0.6);
--background-color-icon--active: rgba(255,255,255,0.2);
--background-color-quiet--hover: rgba(255,255,255,0.07);
--background-color-quiet--active: rgba(255,255,255,0.03);
--background-color-primary--hover: #18440b;
--background-color-primary--active: #26437f;
--background-color-destructive: #b32424;
--background-color-warning: #ac6600;
--background-color-success: #14866d;
--background-img: #f6fafc;
--background-main: #fff;
--box-background-color: #f6fafc;
--box-shadow: 0 0 10px #e9f2f9;
--color-base: black;
--color-base--emphasized: rgba(255,255,255,0.87);
--color-base--subtle: rgba(255,255,255,0.38);
--color-primary: #51E527;
--color-primary--hover: #18440b;
--color-primary--active: #2a4b8d;
--color-destructive: #0066cc;
--color-destructive--hover: #e35b5b;
--color-destructive--active: #b32424;
--color-warning: #ffcc33;
--color-success: #090a0a;
--color-link: #0645ad;
--color-link--hover: #18440b;
--color-link--active: #2a4b8d;
--color-link-new: #EE474D;
--color-link-new--hover: #fee7e6;
--color-link-new--active: #b32424;
--opacity-base--disabled: 0.2;
--opacity-icon-base: 0.4;
--opacity-icon-base--hover: 0.6;
--opacity-icon-base--active: 0.2;
--size-icon: 20px;
--border-color-base: rgba(0, 0, 0, 0.1);
--border-color-base--lighter: rgba(255,255,255,0.02);
--border-color-base--darker: #0000005e;
--border-color-input: rgba(255,255,255,0.05);
--border-color-input--hover: rgba(255,255,255,0.5);
--border-radius--small: 4px;
--border-radius--medium: 8px;
--border-radius--large: 12px;
--font-family-base: 'Roboto',system-ui,-apple-system,sans-serif;
--font-family-serif: Georgia,serif;
--font-family-monospace: 'SFMono-Regular','Menlo','Roboto Mono','Consolas','Liberation Mono','Courier New',monospace;
--icon-filter-full: invert(0);
--icon-filter-half: invert(0);
}
/* ------------------------------ */
/* Général */
/* ------------------------------ */
/* Adaptation spéciale en fonction des dimensions de l'écran */
@media all and (max-width:720px) {
/* On vire le comportement qui aligne les images les unes en dessous des autres */
.gallery .gallerybox {
width: 0;
}
}
@media screen and (min-width: 720px) {
.avt-infobox {
clear: right;
float: right !important;
margin: 0 0 0.5em 1em;
max-width: 400px;
}
.avt-content-game-box {
max-width: 400px;
}
.avt-game-listpage {
float: right;
margin: 0 0 0.5em 1em;
max-width: 20rem;
width: 100%;
}
}
/* ----------------------- */
/* Galerie pages-listes */
/* ----------------------- */
.avt-gallery-list-page {
text-align: center;
margin: 0.3em 0 0 0 !important;
padding: 0 !important;
}
.avt-gallery-list-page li.gallerybox div.thumb {
border: none;
background-color: transparent;
}
/* ----------------------- */
/* Tables personnalisées */
/* ----------------------- */
.va-table {
box-shadow: var(--box-shadow);
background-color: var(--box-background-color);
border-collapse: collapse;
empty-cells: show;
font-size: 12px;
line-height: 16px;
font-family: sans-serif;
}
.va-table > tr > td,
.va-table > * > tr > td,
.va-table > tr > th,
.va-table > * > tr > th {
border: 1px solid var(--border-color-base);
padding: 1px 2px;
}
.va-table > tr > th,
.va-table > * > tr > th {
background-color: var(--background-color-dp-02);
font-weight: bold;
text-align: center;
}
/* Adapting lists & paragraphs */
.va-table ul,
.va-table ol,
.va-table p {
line-height: 16px;
margin-bottom: 0;
}
.va-table ul,
.va-table ol {
margin-left: 20px;
margin-top: 0;
}
.va-table p,
.va-table * + ul,
.va-table * + ol {
margin-top: 3px;
}
.va-table ul li,
.va-table ol li {
margin-bottom: 0;
}
/* Highlighted rows */
.va-table > tr.va-table-highlight,
.va-table > * > tr.va-table-highlight,
.va-table > tr.va-table-highlight > th,
.va-table > * > tr.va-table-highlight > th {
background-color: var(--background-color-dp-01);
}
/* Tables with specific vertical alignment for cells */
.va-table-top > tr > td,
.va-table-top > * > tr > td {
vertical-align: top;
}
.va-table-middle > tr > td,
.va-table-middle > * > tr > td {
vertical-align: middle;
}
.va-table-bottom > tr > td,
.va-table-bottom > * > tr > td {
vertical-align: bottom;
}
/* Tables with specific horizontal alignment for cells/columns */
.va-table-center > tr > td,
.va-table-center > * > tr > td,
.va-table-center-col1 > * > tr > td:first-child,
.va-table-center-col2 > * > tr > *:first-child + td,
.va-table-center-col3 > * > tr > *:first-child + * + td,
.va-table-center-col4 > * > tr > *:first-child + * + * + td,
.va-table-center-col5 > * > tr > *:first-child + * + * + * + td,
.va-table-center-col6 > * > tr > *:first-child + * + * + * + * + td,
.va-table-center-col7 > * > tr > *:first-child + * + * + * + * + * + td,
.va-table-center-col8 > * > tr > *:first-child + * + * + * + * + * + * + td,
.va-table-center-col9 > * > tr > *:first-child + * + * + * + * + * + * + * + td,
.va-table-center-col10 > * > tr > *:first-child + * + * + * + * + * + * + * + * + td,
.va-table-center-col11 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + td,
.va-table-center-col12 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + td,
.va-table-center-col13 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-center-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-center-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td {
text-align: center;
}
.va-table-left > tr > td,
.va-table-left > * > tr > td,
.va-table-left-col1 > * > tr > td:first-child,
.va-table-left-col2 > * > tr > *:first-child + td,
.va-table-left-col3 > * > tr > *:first-child + * + td,
.va-table-left-col4 > * > tr > *:first-child + * + * + td,
.va-table-left-col5 > * > tr > *:first-child + * + * + * + td,
.va-table-left-col6 > * > tr > *:first-child + * + * + * + * + td,
.va-table-left-col7 > * > tr > *:first-child + * + * + * + * + * + td,
.va-table-left-col8 > * > tr > *:first-child + * + * + * + * + * + * + td,
.va-table-left-col9 > * > tr > *:first-child + * + * + * + * + * + * + * + td,
.va-table-left-col10 > * > tr > *:first-child + * + * + * + * + * + * + * + * + td,
.va-table-left-col11 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + td,
.va-table-left-col12 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + td,
.va-table-left-col13 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-left-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-left-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td {
text-align: left;
}
.va-table-right > tr > td,
.va-table-right > * > tr > td,
.va-table-right-col1 > * > tr > td:first-child,
.va-table-right-col2 > * > tr > *:first-child + td,
.va-table-right-col3 > * > tr > *:first-child + * + td,
.va-table-right-col4 > * > tr > *:first-child + * + * + td,
.va-table-right-col5 > * > tr > *:first-child + * + * + * + td,
.va-table-right-col6 > * > tr > *:first-child + * + * + * + * + td,
.va-table-right-col7 > * > tr > *:first-child + * + * + * + * + * + td,
.va-table-right-col8 > * > tr > *:first-child + * + * + * + * + * + * + td,
.va-table-right-col9 > * > tr > *:first-child + * + * + * + * + * + * + * + td,
.va-table-right-col10 > * > tr > *:first-child + * + * + * + * + * + * + * + * + td,
.va-table-right-col11 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + td,
.va-table-right-col12 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + td,
.va-table-right-col13 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-right-col14 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + td,
.va-table-right-col15 > * > tr > *:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + td {
text-align: right;
}
/* Tables which are full width */
.va-table-full {
width: 100%;
}
/* Tables which leave enough space for an infobox on the right */
.va-table-full-infobox {
width: 960px;
}
/* Tables which are floated */
.va-table-float-left {
clear: left;
float: left;
margin: 0 10px 10px 0;
}
.va-table-float-right {
clear: right;
float: right;
margin: 0 0 10px 10px;
}
/* Tables in which the first column starts with an icon */
.va-table-icon > tr > td:first-child,
.va-table-icon > * > tr > td:first-child {
padding-left: 18px;
text-indent: -18px;
}
/*
---------------------------------------------------
Templates & Modules
---------------------------------------------------
le style ci-dessous défini l'apparence des modèles
et des modules.
Les modèles doivent être rangés dans l'ordre
alphabétique.
---------------------------------------------------
*/
/* ------------------------------ */
/* Modèle:Boîte déroulante */
/* ------------------------------ */
.avt-dropdown-box {
margin: 0.5em 0;
padding: 3px;
border: 1px solid var(--border-color-base);
overflow: auto;
}
.avt-dropdown-box-title {
text-align: center;
background-color: var(--background-color-dp-02);
}
.avt-dropdown-box-content {
padding: 0 5px;
}
.avt-dropdown-box .mw-collapsible-toggle {
padding-right: 0.5em;
}
/* ------------------------------ */
/* Modèle:Citation */
/* ------------------------------ */
blockquote {
border-left: none;
margin: 0 auto;
}
q::before, q::after {
content: "";
}
blockquote small {
margin-bottom: 10px;
display: block;
padding-left: 150px;
}
blockquote small, q small {
font-size: inherit;
}
blockquote .mediaContainer {
display: inline-block;
}
/* ------------------------------ */
/* Modèle:Console */
/* ------------------------------ */
.va-console{
background-color: #cfc;
color: #000;
font-family: monospace;
padding: 2px
}
.va-console-cmd {
color:#555;
}
/* ------------------------------ */
/* Modèle:Infobox */
/* ------------------------------ */
/* Fix de l'infobox natif */
.content .infobox th, .content .infobox td {
border-bottom: none;
}
.avt-infobox {
background-color: var(--box-background-color) !important;
border: 1px solid var(--border-color-base--darker) !important;
font-size: 0.9em !important;;
line-height: 1.4;
word-wrap: break-word;
box-shadow: var(--box-shadow);
}
.avt-infobox-header {
padding: 3px;
text-align: center;
font-size: 1.4em;
line-height: 1.1;
margin-bottom: 10px;
background-color: var(--background-color-dp-02);
display: grid;
grid-template-columns: 1fr 1.7fr 0.3fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: row;
gap: 0 0;
}
.avt-infobox-header-icon,
.avt-infobox-header-title,
.avt-infobox-header-subhead {
justify-self: center;
align-self: center;
}
.avt-infobox-header-icon {
grid-area: 1 / 3 / 4 / 4;
opacity: 0.1;
}
.avt-infobox-header-title {
grid-area: 2 / 1 / 4 / 4;
font-weight: bold;
}
.avt-infobox-header-subhead {
grid-area: 1 / 1 / 2 / 4;
font-size: 0.6em;
}
.avt-infobox-images {
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
padding: 2px 0;
}
.avt-infobox-images a {
max-width: 100%;
flex: 0 0 auto;
}
.avt-infobox-images img {
max-width: 100%;
height: auto;
}
.avt-infobox-images-legend {
text-align: center;
font-size: 0.8em;
}
.avt-infobox table {
width: 100%;
margin: 5px 0;
table-layout: fixed;
border-collapse: collapse;
display: table;
}
.avt-infobox caption {
text-align: center !important;
display: table-caption;
}
.avt-infobox p.bloc,
.avt-infobox caption {
font-weight: bold;
line-height: 1.1;
margin: 0 0 5px 0;
padding: 4px !important;
background-color: var(--background-color-dp-02) !important;;
}
.avt-infobox th[scope="row"],
.avt-infobox td {
padding: 7px 10px;
vertical-align: super;
}
.avt-infobox th[scope="row"] {
text-align: left;
padding-right: 10px;
width: 8em;
max-width: 140px;
word-wrap: normal;
}
.avt-infobox span.mw-collapsible-toggle {
float: right;
}
.avt-infobox span.mw-collapsible-toggle a {
color: var(--color-base)
}
/* ------------------------------ */
/* Modèle:Bandeau de source */
/* ------------------------------ */
.avt-source-banner {
margin: 0.5em 0;
display: inline-flex;
gap: 8px;
}
.avt-source-banner-img {
margin: auto;
}
.avt-source-banner-text {
padding: 5px;
font-size: 0.9em;
border-top: 1px solid var(--border-color-base);
border-bottom: 1px solid var(--border-color-base);
}
/* ------------------------------ */
/* Modèle:Boîte de contenu de jeu */
/* ------------------------------ */
.avt-content-game-box {
float: right;
border: 1px solid var(--border-color-base);
box-shadow: var(--box-shadow);
margin: 0 0 0.5em 1em;
font-size: 0.85em;
background-color: var(--box-background-color);
overflow: hidden;
}
#avt-content-game-box-title {
text-align: center;
background-color: var(--background-color-dp-02);
padding: 3px;
}
.avt-content-game-box-list {
margin: 0 !important;
padding: 5px !important;
list-style: none !important;;
column-count: 2;
column-rule: 1px solid var(--border-color-base);
}
/* ------------------------ */
/* Modèle:Liste horizontale */
/* ------------------------ */
.liste-horizontale ul,
.liste-horizontale li {
margin-left: 0 !important;
padding-left: 0 !important;
display: inline;
}
.liste-horizontale ul:after {
white-space: normal;
}
.liste-horizontale li:after {
content: " "; /* au cas ou Mediawiki supprime les retours ligne */
}
.liste-horizontale li + li:before {
white-space: normal;
content: "· ";
font-weight: bold;
}
.liste-horizontale li li:first-child:before {
white-space: normal;
content: " (";
}
.liste-horizontale li ul:after {
content: ")";
margin-left: -0.28em;
}
/* ------------------------ */
/* Modèle:Palette */
/* ------------------------ */
.palette .mw-collapsible-toggle a {
color: var(--color-base);
}
.palette-groupe {
border-top: 2px solid var(--box-background-color);
font-weight: bold;
text-align: right;
white-space: normal;
}
.palette-banniere,
.palette-groupe,
.palette-section {
background: var(--background-color-dp-03);
}
.palette-listes .palette-groupe {
background: var(--background-color-dp-04);
}
.palette {
clear: both;
margin: 1em 0 1em 0;
padding: 3px;
font-size: 88%;
border: 1px solid var(--border-color-base);
}
.palette ul,
.palette li,
.palette p {
margin: 0 !important;
padding: 0 !important;
line-height: 1.6em;
list-style: none none;
}
.palette-liens {
float: left;
font-variant: small-caps;
}
.palette-liens a {
background: none !important;
padding: 0 !important;
}
.palette span.mw-collapsible-toggle {
float: right;
}
.palette-liens,
.palette .mw-collapsible-toggle,
.palette-groupe {
padding: 0.25em 1em;
}
.palette-titre {
background-color: var(--background-color-dp-02);
}
.palette-titre,
.palette-section {
font-size: 105%;
font-weight: bold;
padding: 0.25em 8em;
text-align: center;
}
.palette-banniere,
.palette-liste,
.palette-liste-simple {
padding: 0.25em;
}
.palette-liste,
.palette-listes {
width: 100%;
}
.palette-groupe,
.palette-banniere,
.mw-collapsible-content > ul > li > .palette-liste-simple {
text-align: center;
}
div.palette-image {
padding: 0.25em 0 0.25em 0.25em;
width: 1%;
}
/* ------------------------------ */
/* Modèle:Documentation */
/* ------------------------------ */
.va-documentation,
.va-documentation-bar-top,
.va-documentation-bar-bottom {
border-color: var(--border-color-base);
border-style: solid;
clear: both;
}
.va-documentation {
border-width: 1px;
margin: 10px 0;
box-shadow: var(--box-shadow);
background: var(--box-background-color);
}
.va-documentation-bar-top,
.va-documentation-bar-bottom {
background-color: var(--background-color-dp-02);
margin: 0;
padding: 10px;
}
.va-documentation-bar-top {
border-width: 0 0 1px 0;
}
.va-documentation-bar-bottom {
border-width: 1px 0 0 0;
text-align: right;
}
.va-documentation-links {
float: right;
text-align: right;
}
.va-documentation-content {
margin: 0;
padding: 20px;
}
.va-documentation-small {
font-size: 0.8em;
}
.va-documentation-bar-top .external {
background: none !important;
padding: 0 !important;
}
/* ---------------------------------- */
/* Modèle:Interactions */
/* ---------------------------------- */
.avt-interactions {
list-style: none;
margin: 0.5em 0 !important;
max-width: 40rem;
padding: 0 !important;
}
.avt-interactions-row {
display: grid;
grid-template-columns: 5rem auto;
border: 1px solid var(--border-color-base);
margin: 0.25em 0;
background-color: var(--box-background-color);
box-shadow: var(--box-shadow);
padding: 7px;
}
.avt-interactions-img {
margin: auto;
}
.avt-interactions-text {
align-self: center;
font-size: 0.85em;
}
/* ------------------------------ */
/* Modèle:Homonymie */
/* ------------------------------ */
.homonymie {
padding: 5px;
font-style: italic;
border-bottom: 1px solid var(--border-color-base);
}
/* ------------------------------ */
/* Modèle:Transcription */
/* ------------------------------ */
.va-transcript-icon {
display: none;
}
.va-transcript-text {
font-family: monospace;
font-size: 0.9em;
}
/* ---------------------------------- */
/* Modèle:Galerie de vidéos */
/* ---------------------------------- */
.avt-videogallery {
list-style: none !important;;
margin: 0.5em 0 !important;
display: inline-flex;
flex-wrap: wrap;
padding: 0 !important;
}
/* ------------------------------ */
/* Modèle:Bandeau de rubrique */
/* ------------------------------ */
.avt-section-banner {
padding: 0.25em 0.5em;
border-top: 1px solid var(--border-color-base);
border-bottom: 1px solid var(--border-color-base);
margin: 0.5em 0;
background-color: var(--box-background-color);
font-size: 0.9em;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
}
/* ------------------------------ */
/* Modèle:Infobulle */
/* ------------------------------ */
.avt-tooltip {
border-bottom: 1px dotted;
cursor:help
}
.avt-tooltip-popup {
position: absolute;
background: var(--background-color-dp-02);
border: 1px solid var(--border-color-base);
padding: 4px;
left: 0;
white-space: nowrap;
z-index: 2;
}
/* ------------------------------ */
/* Modèle:Bandeau d'avertissement */
/* ------------------------------ */
.avt-warn-banner {
margin: 0.5em 0;
display: grid;
grid-template-columns: max-content auto;
gap: 8px;
padding: 0 10px;
border-style: solid;
border-width: 1px 0 1px 0;
background-color: var(--box-background-color);
}
.avt-warn-banner-header {
font-weight: bold;
}
.avt-warn-banner-img {
margin: auto;
}
.avt-warn-banner-text {
padding: 5px;
}
.avt-warn-banner-desc,
.avt-warn-banner-note {
font-size: 0.8em;
}
/* Types de bandeau */
.avt-warn-banner-maintenance {
border-color: var(--color-warning);
}
.avt-warn-banner-info {
border-color: #77ccff;
}
.avt-warn-banner-license {
border-color: #c0c0ff;
}
/* ------------------------------ */
/* Portails */
/* ------------------------------ */
/* Définition des zones */
.homepage-welcome {
gap: 1rem;
}
.homepage-welcome {
grid-area: welcome;
background: linear-gradient(to bottom,#fff,var(--box-background-color));
border-bottom: solid 1px var(--border-color-base);
}
/* Boîte générique */
.homepage-box {
border: 1px solid var(--border-color-base);
background: var(--box-background-color);
box-shadow: var(--box-shadow);
padding: 1rem;
margin-bottom: 1rem;
}
.homepage-welcome-subtitle,
.homepage-welcome-links,
.homepage-portal-theme .homepage-box-content {
text-align: center;
}
.homepage-welcome-fogen {
margin-bottom: 1rem;
text-align: center;
}
.homepage-welcome-title {
text-align: center;
font-size: 200%;
margin: 0 50px 5px 50px;
border-bottom: 1px solid var(--border-color-base);
text-shadow: 0 0 8px #829fce;
color: #425b84;
font-weight: bold;
}
.homepage-box-title {
text-align: center;
font-size: 150%;
border-bottom: 1px solid var(--border-color-base);
margin-bottom: 20px;
text-shadow: 0 0 8px #829fce;
color: #425b84;
}
.homepage-portal-fangames-list {
list-style: none !important;;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px 0;
}
.homepage-portal-games-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px 0;
}
.homepage-portal-games-item {
text-align: center;
font-size: 0.85em;
}
.homepage-portal-games-logo {
height: 60px;
}
.homepage-presentation-title,
.homepage-participation-title,
.homepage-articleday-title,
.homepage-imageday-title {
border-bottom: 1px solid var(--border-color-base);
margin-bottom: 20px;
text-shadow: 0 0 8px var(--color-link);
color: var(--color-link);
}
.homepage-presentation-content,
.homepage-participation-content,
.homepage-articleday-content,
.homepage-imageday-content {
font-size: 0.85em;
}
.game-portal {
display: grid;
grid-gap: 1rem;
}
.portal-talkto {
text-align: center;
}
.portal-box-title {
text-align: center;
font-size: 150%;
margin: 0 0 5px 0;
border-bottom: 1px solid var(--border-color-base);
text-shadow: 0 0 8px var(--color-link);
color: var(--color-link);
}
.portal-content-links {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr;
padding: 1rem;
}
.portal-content-group-title {
border-bottom: 1px dotted var(--border-color-base);
font-size: 125%;
margin-bottom: 1rem;
}
/* ------------------------------ */
/* Modèle:Bandeau de note */
/* ------------------------------ */
.avt-note-banner {
margin-top: 0.5em;
padding-left: 2em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
background: var(--background-main);
font-style: italic;
border-bottom: 1px solid var(--border-color-base);
display: flex;
align-items: center;
gap: 10px;
}
.avt-note-banner + .avt-note-banner {
margin-top: calc(-0.5em - 1.05px);
}
/* ---------------------------------- */
/* Modèle:Références */
/* ---------------------------------- */
.avt-references {
font-size: 0.8em;
line-height: 1.6;
}
/* ------------------------------ */
/* Modèle:Citation ligne */
/* ------------------------------ */
.np-quote-snd-trigger {
display: inline-block;
position: relative;
top:auto;
left:auto;
padding: 0px 2px;
}
.np-quote-snd-trigger:hover .np-quote-snd-player {
display:block;
}
.np-quote-snd-player {
display:none;
position:absolute;
top: -30px;
left: 100%;
z-index:100 !important;
width: 300px;
overflow-x: hidden;
margin: 0px;
padding: 5px 10px 10px 10px;
border: 1px solid var(--border-color-base);
box-shadow: var(--box-shadow);
background-color: var(--box-background-color);
text-align: left;
font-size: 0.85em;
}
.np-quote-snd-player-img {
float: left;
width: 55px;
}
.np-quote-snd-player-title {
width: 250px;
height: 50px;
display: table-cell;
vertical-align: middle;
}
.np-quote-snd-player-title span {
font-size: 18px;
}
/* ---------------------------------- */
/* Modèle:Fiche de créature */
/* ---------------------------------- */
.creature-card-data {
background-color: var(--box-background-color) !important;
border: 1px solid var(--border-color-base) !important;
font-size: 0.9em !important;
line-height: 1.4;
word-wrap: break-word;
box-shadow: var(--box-shadow);
}
.creature-card-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
display: table;
}
.creature-card-table caption,
.creature-card-list dt {
font-weight: bold;
line-height: 1.1;
margin: 0 0 5px 0;
padding: 4px !important;
background-color: var(--background-color-dp-02) !important;
text-align: center !important;
}
.creature-card-table th[scope="row"] {
text-align: left;
padding-right: 10px;
width: 13em;
word-wrap: normal;
}
.creature-card-table th[scope="row"],
.creature-card-table td,
.creature-card-list dd {
padding: 7px 10px;
vertical-align: super;
}
.creature-card-list {
margin-left: 0 !important;
margin: 0 0 5px 0;
}
/* ---------------------------------- */
/* Modèle:Introduction de page-liste */
/* ---------------------------------- */
.avt-introduction {
margin: 0.5em 0;
}
/* ------------------------------ */
/* Modèle:Liste de pages-listes */
/* ------------------------------ */
.avt-game-listpage {
border: 1px solid var(--border-color-base);
box-shadow: var(--box-shadow);
padding: 5px;
font-size: 0.85em;
background-color: var(--box-background-color);
text-align: center;
}
.avt-game-listpage-title {
border: 1px solid var(--border-color-base);
background-color: var(--background-color-dp-02);
padding: 0.25em 0;
margin-bottom: 0.5em;
font-weight: bold;
}
.avt-game-listpage-list {
margin: 0 !important;
list-style: none;
}
/* -------------------------- */
/* Modèle:Tableau d'artisanat */
/* -------------------------- */
.artisanat {
box-shadow: var(--box-shadow);
background-color: var(--box-background-color);
border: 1px solid var(--border-color-base);
font-size: 0.9em;
display: grid;
}
.artisanat-colonne-titre {
font-weight: bold;
text-align: center;
margin-bottom: 3px;
background-color: var(--background-color-dp-02);
padding: 4px !important;
}
.artisanat-colonne-liste > ul {
list-style: none;
margin: 0;
padding: 7px 10px;
}
.artisanat-separateur {
display: none;
}
/* ------------------------------ */
/* MediaWiki:Sitenotice */
/* ------------------------------ */
.avt-sitenotice {
border: 1px solid var(--border-color-base);
background-color: var(--box-background-color);
box-shadow: var(--box-shadow);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.avt-sitenotice a {
color: var(--color-link) !important;
}
/*
---------------------------------------------------
Cross classes
---------------------------------------------------
Les classes ci-dessous sont utilisées par plusieurs
modèles ou modules
---------------------------------------------------
*/
/* Pour créer des listes simples, souvent appelées
dans des modèles ou des tables */
.avt-simple-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Séparateur <hr/> */
.separator {
background-color: var(--border-color-base);
}
/* Boîte générique */
.avt-genericbox {
border: 1px solid var(--border-color-base);
background: var(--box-background-color);
}
/* catlinks mobile */
.catlinks{
background-color: var(--box-background-color);
border: 1px solid var(--border-color-base);
}