62 734
modifications
« MediaWiki:Mobile.css » : différence entre les versions
Ajout du CSS pour le nouveau modèle Infobox
mAucun résumé des modifications |
Ajout du CSS pour le nouveau modèle Infobox |
||
| Ligne 1 : | Ligne 1 : | ||
/* | /* ----------------------- */ | ||
/* Variables */ | |||
/* ----------------------- */ | |||
:root { | |||
--background-color-dp-00: #020601; | |||
--background-color-dp-01: #040d02; | |||
--background-color-dp-02: #071403; | |||
--background-color-dp-03: #091b04; | |||
--background-color-dp-04: #0c2205; | |||
--background-color-dp-06: #0e2806; | |||
--background-color-dp-08: #102f07; | |||
--background-color-dp-12: #133608; | |||
--background-color-dp-16: #153d09; | |||
--background-color-dp-24: #18440b; | |||
--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-main: #000100; | |||
--box-background-color: #000300; | |||
--box-shadow: 0 0 10px #071403; | |||
--color-base: #999999; | |||
--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: #00af89; | |||
--color-link: #51E527; | |||
--color-link--hover: #18440b; | |||
--color-link--active: #2a4b8d; | |||
--color-link-new: #e35b5b; | |||
--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(255,255,255,0.05); | |||
--border-color-base--lighter: rgba(255,255,255,0.02); | |||
--border-color-base--darker: rgba(255,255,255,0.08); | |||
--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; | |||
} | |||
/* Adaptation spéciale en fonction des dimensions de l'écran */ | |||
@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; | |||
} | |||
} | |||
/* ################################################## */ | /* ################################################## */ | ||
| Ligne 2 001 : | Ligne 2 078 : | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | |||
/* ------------------------------ */ | |||
/* Modèle:Infobox */ | |||
/* ------------------------------ */ | |||
.avt-infobox { | |||
background-color: var(--box-background-color); | |||
border: 1px solid var(--border-color-base--darker); | |||
font-size: 0.9em; | |||
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; | |||
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); | |||
} | } | ||