Différences entre les versions de « MediaWiki:Common.scss »

De Encyclopédie francophone de la Roue du Temps
Aller à la navigation Aller à la recherche
 
(14 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
$color-black: #000000;
$color-black: #000000;
$color-white: #ffffff;


$color-documentation: #ecfcf4;
$color-documentation: #ecfcf4;
$color-separator: #a2a9b1;
$color-separator: #a2a9b1;
$color-border-grey: #aaaaaa;
$color-border-grey: #aaaaaa;
$color-border-blue: #a7d7f9;


$colors-information-box: (
$background-information-box: (
     light-yellow: #ffeda6,
     light-yellow: #ffeda6,
     light-blue: #9fd6f2,
     light-blue: #9fd6f2,
     light-green: #ddffdd,
     light-green: #ddffdd,
     light-red: #ee6c6c,
     light-red: #ee6c6c,
    light-purple: #ad88c6,
    light-pink: #e1afd1,
    light-orange: #ffbf78,
     blue: #1E90FF,
     blue: #1E90FF,
    purple: #663399,
);
);
$colors-ajah: (
$foreground-information-box: (
     blue: #0e427c,
    purple: #ffffff,
     red: #6b0632,
);
     white: #c1c6c0,
$background-ajah: (
     green: #03221d,
     blue: #1c2677,
     brown: #1b140c,
     red: #b51a1c,
     yellow: #89590f,
     white: #fcfdff,
     grey: #2e3231,
     green: #3c833b,
     brown: #a56635,
     yellow: #e1bd15,
     grey: #737886,
    black: #000000,
);
$foreground-ajah: (
    blue: #ffffff,
    black: #ffffff,
);
);


Ligne 25 : Ligne 39 :
.clearfix {
.clearfix {
   clear: both;
   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;
}
}


Ligne 126 : Ligne 243 :
.mw-information-box .mw-sub-title {
.mw-information-box .mw-sub-title {
   text-align: center;
   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;
    }
  }
}
}


Ligne 159 : Ligne 331 :


/* Déclinaisons de couleur */
/* Déclinaisons de couleur */
@each $name, $color in $colors-information-box {
@each $name, $color in $background-information-box {
   .mw-information-box.#{$name} .mw-title,
   .mw-information-box.#{$name} .mw-title,
   .mw-information-box.#{$name} .mw-section-title {
   .mw-information-box.#{$name} .mw-section-title {
     background: $color;
     background: $color;
    @if map-get($foreground-information-box, $name) != null {
      color: map-get($foreground-information-box, $name);
    }
   }
   }
}
}


/* Déclinaisons d'ajah */
/* Déclinaisons d'ajah */
@each $name, $color in $colors-ajah {
@each $name, $color in $background-ajah {
   .mw-information-box.#{$name}-ajah .mw-title,
   .mw-information-box.#{$name}-ajah .mw-title,
   .mw-information-box.#{$name}-ajah .mw-section-title {
   .mw-information-box.#{$name}-ajah .mw-section-title {
     background: $color;
     background: $color;
   
    @if map-get($foreground-ajah, $name) != null {
        color: map-get($foreground-ajah, $name);
    }
   }
   }


Version actuelle datée du 17 mars 2025 à 19:56

$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; }
Récupérée de « https://encyclo.rouedutemps.fr/index.php?title=MediaWiki:Common.scss&oldid=25443 »