MediaWiki:Common.scss
Aller à la navigation
Aller à la recherche
$color-black: #000000;
$color-white: #ffffff;
$color-documentation: #ecfcf4;
$color-separator: #a2a9b1;
$color-border-grey: #aaaaaa;
$color-border-blue: #a7d7f9;
$background-information-box: (
light-yellow: #ffeda6,
light-blue: #9fd6f2,
light-green: #ddffdd,
light-red: #ee6c6c,
light-purple: #ad88c6,
light-pink: #e1afd1,
light-orange: #ffbf78,
blue: #1E90FF,
purple: #663399,
);
$foreground-information-box: (
purple: #ffffff,
);
$background-ajah: (
blue: #1c2677,
red: #b51a1c,
white: #fcfdff,
green: #3c833b,
brown: #a56635,
yellow: #e1bd15,
grey: #737886,
black: #000000,
);
$foreground-ajah: (
blue: #ffffff,
black: #ffffff,
);
/* == Outils == */
.clearfix {
clear: both;
}
.clearfix-left {
clear: left;
}
.clearfix-right {
clear: right;
}
$values: (none, inline, inline-block, block, flex, inline-flex);
@each $value in $values {
.d-#{$value} {
display: $value !important;
}
}
$values: (normal, start, end, center, stretch, left, right, space-between, space-around, space-evenly);
@each $value in $values {
.justify-content-#{$value} {
@if start == $value or end == $value {
justify-content: flex-#{$value} !important;
} @else {
justify-content: $value !important;
}
}
}
$values: (normal, start, end, center, stretch);
@each $value in $values {
.align-items-#{$value} {
@if start == $value or end == $value {
align-items: flex-#{$value} !important;
} @else {
align-items: $value !important;
}
}
}
$types: (m: margin, p: padding);
$sizes: (auto: auto, 0: 0, 1: 5px, 2: 10px, 3: 15px, 4: 20px);
$directions: (t: top, r: right, b: bottom, l: left);
@each $a, $type in $types {
@each $b, $size in $sizes {
@if not (padding == $type and auto == $size) {
.#{$a}-#{$b} {
#{$type}: $size !important;
}
.#{$a}x-#{$b} {
#{$type}-left: $size !important;
#{$type}-right: $size !important;
}
.#{$a}y-#{$b} {
#{$type}-top: $size !important;
#{$type}-bottom: $size !important;
}
@each $c, $direction in $directions {
.#{$a}#{$c}-#{$b} {
#{$type}-#{$direction}: $size !important;
}
}
}
}
}
/* == Partners == */
.partners-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
justify-items: center;
align-items: center;
gap: 5px;
text-align: center;
}
.partners-container .alliance,
.partners-container .partner {
}
.partners-container .alliance {
grid-column: span 2;
grid-row: span 2;
}
.partners-container p {
margin: 0;
}
.partners-container .image {
display: inline-block;
margin-bottom: 5px;
}
.partners-container .external {
padding: 0;
background: none;
}
/* == Citations == */
.mw-body-content blockquote {
margin-left: 0;
margin-right: 0;
padding: 8px 16px;
}
/* == Documentation de modèle == */
.mw-documentation {
padding: 1em 1em 0.8em;
background: $color-documentation;
border: 1px solid $color-border-grey;
}
.mw-documentation p:first-child {
margin-top: 0;
}
.mw-documentation-footer {
margin-top: 1.5em;
padding-top: 0.5em;
border-top: 1px solid $color-separator;
}
/* == Navigation == */
.mw-navigation {
clear: both;
width: 100%;
margin-top: 1em;
background: #fdfdfd;
border: 1px solid $color-border-grey;
font-size: 0.75rem;
}
.mw-navigation .mw-title {
padding-left: 1em;
padding-right: 1em;
background: #a7d7f9;
font-size: 0.85rem;
}
.mw-navigation tr th:not(.mw-title) {
width: 150px;
padding-left: 1em;
padding-right: 1em;
background: #eaf3ff;
vertical-align: middle;
}
.mw-navigation tr:nth-child(2n) td {
background: #f6f6f6;
}
.mw-navigation tr:nth-child(2n + 1) td {
background: #eaecf0;
}
.mw-navigation .mw-navigation{
width: calc(100% + 6px);
margin: -3px;
background: transparent;
border: none; }
.mw-navigation .mw-navigation tr:nth-child(2n + 1) td {
background: none;
}
.mw-navigation + .mw-navigation {
margin-top: 0.5em;
}
/* == Boîtes d'informations == */
.mw-information-box {
float: right;
box-sizing: border-box;
clear: right;
min-width: 200px;
max-width: 300px;
margin: 0 0 0.5em 1em;
padding: 5px;
background: #f9f9f9;
border: 1px solid #aaaaaa;
color: #000000;
font-size: 0.9em;
}
.mw-information-box .mw-title {
box-sizing: border-box;
margin: 0;
padding: 0.25em 1em;
background: #cccccc;
font-size: 1.25em;
font-weight: bold;
line-height: 1.5em;
text-align: center;
}
.mw-information-box .mw-sub-title {
text-align: center;
}
.mw-information-box .mw-gallery {
// Tabs
.mw-gallery-tabs {
display: flex;
flex-wrap: wrap;
margin-left: 0;
position: relative;
top: 1px;
z-index: 2;
list-style: none;
}
.mw-gallery-tabs li {
display: inline-block;
margin-bottom: 0;
& + li {
margin-left: 5px;
}
}
.mw-gallery-tabs button {
padding: 8px;
background: $color-white;
border: solid $color-border-blue;
border-width: 1px;
color: #0645ad;
&:hover,
&:focus {
text-decoration: underline;
}
&:hover {
cursor: pointer;
}
&.active {
border-bottom-width: 0;
color: #000000;
}
}
// Panes
.mw-gallery-pane {
display: none;
background: $color-white;
border: 1px solid $color-border-blue;
&.active {
display: block;
}
}
}
.mw-information-box .image img {
max-width: 100%;
height: auto;
}
.mw-information-box .mw-caption {
font-size: 80%;
text-align: center;
}
.mw-information-box table {
width: 100%;
}
.mw-information-box th:not(.mw-section-title),
.mw-information-box td {
vertical-align: top;
}
.mw-information-box th:not(.mw-section-title) {
text-align: left;
}
.mw-information-box .mw-section-title {
padding: 0.25em 1em;
font-weight: bold;
text-align: center;
background: #cccccc;
}
/* Déclinaisons de couleur */
@each $name, $color in $background-information-box {
.mw-information-box.#{$name} .mw-title,
.mw-information-box.#{$name} .mw-section-title {
background: $color;
@if map-get($foreground-information-box, $name) != null {
color: map-get($foreground-information-box, $name);
}
}
}
/* Déclinaisons d'ajah */
@each $name, $color in $background-ajah {
.mw-information-box.#{$name}-ajah .mw-title,
.mw-information-box.#{$name}-ajah .mw-section-title {
background: $color;
@if map-get($foreground-ajah, $name) != null {
color: map-get($foreground-ajah, $name);
}
}
.mw-information-box.#{$name}-black-ajah .mw-title,
.mw-information-box.#{$name}-black-ajah .mw-section-title {
background: linear-gradient(to right, $color 0%, $color 75%, $color-black 90%);
}
}
/* == Arbres généalogiques == */
.family-tree {
max-height: 400px;
overflow-y: auto;
}
/* == Cartes */
.map-container {
display: inline-block;
max-width: 100%;
border: 1px solid #c8ccd1;
overflow: auto;
}