MediaWiki:Common.scss
Révision datée du 2 février 2024 à 19:46 par BrunoBuiret (discussion | contributions)
$color-black: #000000;
$color-white: #ffffff;
$color-documentation: #ecfcf4;
$color-separator: #a2a9b1;
$color-border-grey: #aaaaaa;
$color-border-blue: #a7d7f9;
$colors-information-box: (
light-yellow: #ffeda6,
light-blue: #9fd6f2,
light-green: #ddffdd,
light-red: #ee6c6c,
blue: #1E90FF,
);
$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;
}
/* == 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 $colors-information-box {
.mw-information-box.#{$name} .mw-title,
.mw-information-box.#{$name} .mw-section-title {
background: $color;
}
}
/* 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;
}