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

De Encyclopédie francophone de la Roue du Temps
Aller à la navigation Aller à la recherche
Ligne 1 : Ligne 1 :
$color-black: #000000;
@charset "UTF-8";
$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,
    light-purple: #ad88c6,
    light-pink: #e1afd1,
    light-orange: #ffbf78,
    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 == */
/* == Outils == */
.clearfix {
.clearfix {
Ligne 45 : Ligne 13 :
}
}


$displays: (none, inline, inline-block, block, flex, inline-flex);
.d-none {
  display: none !important;
}
 
.d-inline {
  display: inline !important;
}
 
.d-inline-block {
  display: inline-block !important;
}
 
.d-block {
  display: block !important;
}
 
.d-flex {
  display: flex !important;
}
 
.d-inline-flex {
  display: inline-flex !important;
}
 
.justify-content-normal {
  justify-content: normal !important;
}


@each $display in $displays {
.justify-content-start {
   .d-#{$display} {
  justify-content: flex-start !important;
    display: $display !important;
}
   }
 
.justify-content-end {
  justify-content: flex-end !important;
}
 
.justify-content-center {
  justify-content: center !important;
}
 
.justify-content-stretch {
  justify-content: stretch !important;
}
 
.justify-content-left {
  justify-content: left !important;
}
 
.justify-content-right {
  justify-content: right !important;
}
 
.justify-content-space-between {
  justify-content: space-between !important;
}
 
.justify-content-space-around {
  justify-content: space-around !important;
}
 
.justify-content-space-evenly {
   justify-content: space-evenly !important;
}
 
.align-items-normal {
  align-items: normal !important;
}
 
.align-items-start {
  align-items: flex-start !important;
}
 
.align-items-end {
  align-items: flex-end !important;
}
 
.align-items-center {
   align-items: center !important;
}
 
.align-items-stretch {
  align-items: stretch !important;
}
}


Ligne 63 : Ligne 107 :
.mw-documentation {
.mw-documentation {
   padding: 1em 1em 0.8em;
   padding: 1em 1em 0.8em;
   background: $color-documentation;
   background: #ecfcf4;
   border: 1px solid $color-border-grey;
   border: 1px solid #aaaaaa;
}
}


Ligne 74 : Ligne 118 :
   margin-top: 1.5em;
   margin-top: 1.5em;
   padding-top: 0.5em;
   padding-top: 0.5em;
   border-top: 1px solid $color-separator;
   border-top: 1px solid #a2a9b1;
}
}


Ligne 83 : Ligne 127 :
   margin-top: 1em;
   margin-top: 1em;
   background: #fdfdfd;
   background: #fdfdfd;
   border: 1px solid $color-border-grey;
   border: 1px solid #aaaaaa;
   font-size: 0.75rem;
   font-size: 0.75rem;
}
}
Ligne 106 : Ligne 150 :
}
}


.mw-navigation tr:nth-child(2n + 1) td {
.mw-navigation tr:nth-child(2n+1) td {
   background: #eaecf0;
   background: #eaecf0;
}
}


.mw-navigation .mw-navigation{
.mw-navigation .mw-navigation {
   width: calc(100% + 6px);
   width: calc(100% + 6px);
   margin: -3px;
   margin: -3px;
   background: transparent;
   background: transparent;
   border: none; }
   border: none;
}


.mw-navigation .mw-navigation tr:nth-child(2n + 1) td {
.mw-navigation .mw-navigation tr:nth-child(2n+1) td {
   background: none;
   background: none;
}
}
Ligne 154 : Ligne 199 :
}
}


.mw-information-box .mw-gallery {
.mw-information-box .mw-gallery .mw-gallery-tabs {
  // Tabs
  display: flex;
  .mw-gallery-tabs {
  flex-wrap: wrap;
      display: flex;
  margin-left: 0;
      flex-wrap: wrap;
  position: relative;
      margin-left: 0;
  top: 1px;
      position: relative;
  z-index: 2;
      top: 1px;
  list-style: none;
      z-index: 2;
}
      list-style: none;
.mw-information-box .mw-gallery .mw-gallery-tabs li {
  }
  display: inline-block;
 
  margin-bottom: 0;
  .mw-gallery-tabs li {
}
      display: inline-block;
.mw-information-box .mw-gallery .mw-gallery-tabs li + li {
      margin-bottom: 0;
  margin-left: 5px;
     
}
      & + li {
.mw-information-box .mw-gallery .mw-gallery-tabs button {
          margin-left: 5px;
  padding: 8px;
      }
  background: #ffffff;
  }
  border: solid #a7d7f9;
 
  border-width: 1px;
  .mw-gallery-tabs button {
  color: #0645ad;
      padding: 8px;
}
      background: $color-white;
.mw-information-box .mw-gallery .mw-gallery-tabs button:hover, .mw-information-box .mw-gallery .mw-gallery-tabs button:focus {
      border: solid $color-border-blue;
  text-decoration: underline;
      border-width: 1px;
}
      color: #0645ad;
.mw-information-box .mw-gallery .mw-gallery-tabs button:hover {
     
  cursor: pointer;
      &:hover,
}
      &:focus {
.mw-information-box .mw-gallery .mw-gallery-tabs button.active {
          text-decoration: underline;
  border-bottom-width: 0;
      }
  color: #000000;
     
}
      &:hover {
.mw-information-box .mw-gallery .mw-gallery-pane {
          cursor: pointer;
  display: none;
      }
  background: #ffffff;
     
  border: 1px solid #a7d7f9;
      &.active {
}
          border-bottom-width: 0;
.mw-information-box .mw-gallery .mw-gallery-pane.active {
          color: #000000;
  display: block;
      }
  }
 
  // Panes
  .mw-gallery-pane {
    display: none;
    background: $color-white;
    border: 1px solid $color-border-blue;
   
    &.active {
        display: block;
    }
  }
}
}


Ligne 219 : Ligne 251 :
}
}


.mw-information-box table {
.mw-information-box table {
   width: 100%;
   width: 100%;
}
}
Ligne 235 : Ligne 267 :
   padding: 0.25em 1em;
   padding: 0.25em 1em;
   font-weight: bold;
   font-weight: bold;
   text-align: center;  
   text-align: center;
   background: #cccccc;
   background: #cccccc;
}
}


/* Déclinaisons de couleur */
/* Déclinaisons de couleur */
@each $name, $color in $colors-information-box {
.mw-information-box.light-yellow .mw-title,
   .mw-information-box.#{$name} .mw-title,
.mw-information-box.light-yellow .mw-section-title {
   .mw-information-box.#{$name} .mw-section-title {
   background: #ffeda6;
    background: $color;
}
   }
 
.mw-information-box.light-blue .mw-title,
.mw-information-box.light-blue .mw-section-title {
  background: #9fd6f2;
}
 
.mw-information-box.light-green .mw-title,
.mw-information-box.light-green .mw-section-title {
  background: #ddffdd;
}
 
.mw-information-box.light-red .mw-title,
.mw-information-box.light-red .mw-section-title {
   background: #ee6c6c;
}
 
.mw-information-box.light-purple .mw-title,
.mw-information-box.light-purple .mw-section-title {
  background: #ad88c6;
}
 
.mw-information-box.light-pink .mw-title,
.mw-information-box.light-pink .mw-section-title {
  background: #e1afd1;
}
 
.mw-information-box.light-orange .mw-title,
.mw-information-box.light-orange .mw-section-title {
  background: #ffbf78;
}
 
.mw-information-box.blue .mw-title,
.mw-information-box.blue .mw-section-title {
   background: #1E90FF;
}
}


/* Déclinaisons d'ajah */
/* Déclinaisons d'ajah */
@each $name, $color in $background-ajah {
.mw-information-box.blue-ajah .mw-title,
   .mw-information-box.#{$name}-ajah .mw-title,
.mw-information-box.blue-ajah .mw-section-title {
  .mw-information-box.#{$name}-ajah .mw-section-title {
   background: #1c2677;
    background: $color;
  color: #ffffff;
   
}
    @if map-get($foreground-ajah, $name) != null {
 
        color: map-get($foreground-ajah, $name);
.mw-information-box.blue-black-ajah .mw-title,
    }
.mw-information-box.blue-black-ajah .mw-section-title {
   }
  background: linear-gradient(to right, #1c2677 0%, #1c2677 75%, #000000 90%);
}
 
.mw-information-box.red-ajah .mw-title,
.mw-information-box.red-ajah .mw-section-title {
  background: #b51a1c;
}
 
.mw-information-box.red-black-ajah .mw-title,
.mw-information-box.red-black-ajah .mw-section-title {
  background: linear-gradient(to right, #b51a1c 0%, #b51a1c 75%, #000000 90%);
}
 
.mw-information-box.white-ajah .mw-title,
.mw-information-box.white-ajah .mw-section-title {
   background: #fcfdff;
}


   .mw-information-box.#{$name}-black-ajah .mw-title,
.mw-information-box.white-black-ajah .mw-title,
   .mw-information-box.#{$name}-black-ajah .mw-section-title {
.mw-information-box.white-black-ajah .mw-section-title {
   background: linear-gradient(to right, $color 0%, $color 75%, $color-black 90%);
   background: linear-gradient(to right, #fcfdff 0%, #fcfdff 75%, #000000 90%);
   }
}
 
.mw-information-box.green-ajah .mw-title,
.mw-information-box.green-ajah .mw-section-title {
  background: #3c833b;
}
 
.mw-information-box.green-black-ajah .mw-title,
.mw-information-box.green-black-ajah .mw-section-title {
  background: linear-gradient(to right, #3c833b 0%, #3c833b 75%, #000000 90%);
}
 
.mw-information-box.brown-ajah .mw-title,
.mw-information-box.brown-ajah .mw-section-title {
  background: #a56635;
}
 
.mw-information-box.brown-black-ajah .mw-title,
.mw-information-box.brown-black-ajah .mw-section-title {
   background: linear-gradient(to right, #a56635 0%, #a56635 75%, #000000 90%);
}
 
.mw-information-box.yellow-ajah .mw-title,
.mw-information-box.yellow-ajah .mw-section-title {
  background: #e1bd15;
}
 
.mw-information-box.yellow-black-ajah .mw-title,
.mw-information-box.yellow-black-ajah .mw-section-title {
   background: linear-gradient(to right, #e1bd15 0%, #e1bd15 75%, #000000 90%);
}
 
.mw-information-box.grey-ajah .mw-title,
.mw-information-box.grey-ajah .mw-section-title {
  background: #737886;
}
 
.mw-information-box.grey-black-ajah .mw-title,
.mw-information-box.grey-black-ajah .mw-section-title {
  background: linear-gradient(to right, #737886 0%, #737886 75%, #000000 90%);
}
 
.mw-information-box.black-ajah .mw-title,
.mw-information-box.black-ajah .mw-section-title {
  background: #000000;
   color: #ffffff;
}
 
.mw-information-box.black-black-ajah .mw-title,
.mw-information-box.black-black-ajah .mw-section-title {
  background: linear-gradient(to right, #000000 0%, #000000 75%, #000000 90%);
}
}


Ligne 272 : Ligne 403 :
/* == Cartes */
/* == Cartes */
.map-container {
.map-container {
    display: inline-block;
  display: inline-block;
    max-width: 100%;
  max-width: 100%;
    border: 1px solid #c8ccd1;
  border: 1px solid #c8ccd1;
    overflow: auto;
  overflow: auto;
}
}

Version du 25 janvier 2025 à 19:51

@charset "UTF-8"; /* == Outils == */ .clearfix { clear: both; } .clearfix-left { clear: left; } .clearfix-right { clear: right; } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .justify-content-normal { justify-content: normal !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-stretch { justify-content: stretch !important; } .justify-content-left { justify-content: left !important; } .justify-content-right { justify-content: right !important; } .justify-content-space-between { justify-content: space-between !important; } .justify-content-space-around { justify-content: space-around !important; } .justify-content-space-evenly { justify-content: space-evenly !important; } .align-items-normal { align-items: normal !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-stretch { align-items: stretch !important; } /* == 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: #ecfcf4; border: 1px solid #aaaaaa; } .mw-documentation p:first-child { margin-top: 0; } .mw-documentation-footer { margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #a2a9b1; } /* == Navigation == */ .mw-navigation { clear: both; width: 100%; margin-top: 1em; background: #fdfdfd; border: 1px solid #aaaaaa; 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 .mw-gallery-tabs { display: flex; flex-wrap: wrap; margin-left: 0; position: relative; top: 1px; z-index: 2; list-style: none; } .mw-information-box .mw-gallery .mw-gallery-tabs li { display: inline-block; margin-bottom: 0; } .mw-information-box .mw-gallery .mw-gallery-tabs li + li { margin-left: 5px; } .mw-information-box .mw-gallery .mw-gallery-tabs button { padding: 8px; background: #ffffff; border: solid #a7d7f9; border-width: 1px; color: #0645ad; } .mw-information-box .mw-gallery .mw-gallery-tabs button:hover, .mw-information-box .mw-gallery .mw-gallery-tabs button:focus { text-decoration: underline; } .mw-information-box .mw-gallery .mw-gallery-tabs button:hover { cursor: pointer; } .mw-information-box .mw-gallery .mw-gallery-tabs button.active { border-bottom-width: 0; color: #000000; } .mw-information-box .mw-gallery .mw-gallery-pane { display: none; background: #ffffff; border: 1px solid #a7d7f9; } .mw-information-box .mw-gallery .mw-gallery-pane.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 */ .mw-information-box.light-yellow .mw-title, .mw-information-box.light-yellow .mw-section-title { background: #ffeda6; } .mw-information-box.light-blue .mw-title, .mw-information-box.light-blue .mw-section-title { background: #9fd6f2; } .mw-information-box.light-green .mw-title, .mw-information-box.light-green .mw-section-title { background: #ddffdd; } .mw-information-box.light-red .mw-title, .mw-information-box.light-red .mw-section-title { background: #ee6c6c; } .mw-information-box.light-purple .mw-title, .mw-information-box.light-purple .mw-section-title { background: #ad88c6; } .mw-information-box.light-pink .mw-title, .mw-information-box.light-pink .mw-section-title { background: #e1afd1; } .mw-information-box.light-orange .mw-title, .mw-information-box.light-orange .mw-section-title { background: #ffbf78; } .mw-information-box.blue .mw-title, .mw-information-box.blue .mw-section-title { background: #1E90FF; } /* Déclinaisons d'ajah */ .mw-information-box.blue-ajah .mw-title, .mw-information-box.blue-ajah .mw-section-title { background: #1c2677; color: #ffffff; } .mw-information-box.blue-black-ajah .mw-title, .mw-information-box.blue-black-ajah .mw-section-title { background: linear-gradient(to right, #1c2677 0%, #1c2677 75%, #000000 90%); } .mw-information-box.red-ajah .mw-title, .mw-information-box.red-ajah .mw-section-title { background: #b51a1c; } .mw-information-box.red-black-ajah .mw-title, .mw-information-box.red-black-ajah .mw-section-title { background: linear-gradient(to right, #b51a1c 0%, #b51a1c 75%, #000000 90%); } .mw-information-box.white-ajah .mw-title, .mw-information-box.white-ajah .mw-section-title { background: #fcfdff; } .mw-information-box.white-black-ajah .mw-title, .mw-information-box.white-black-ajah .mw-section-title { background: linear-gradient(to right, #fcfdff 0%, #fcfdff 75%, #000000 90%); } .mw-information-box.green-ajah .mw-title, .mw-information-box.green-ajah .mw-section-title { background: #3c833b; } .mw-information-box.green-black-ajah .mw-title, .mw-information-box.green-black-ajah .mw-section-title { background: linear-gradient(to right, #3c833b 0%, #3c833b 75%, #000000 90%); } .mw-information-box.brown-ajah .mw-title, .mw-information-box.brown-ajah .mw-section-title { background: #a56635; } .mw-information-box.brown-black-ajah .mw-title, .mw-information-box.brown-black-ajah .mw-section-title { background: linear-gradient(to right, #a56635 0%, #a56635 75%, #000000 90%); } .mw-information-box.yellow-ajah .mw-title, .mw-information-box.yellow-ajah .mw-section-title { background: #e1bd15; } .mw-information-box.yellow-black-ajah .mw-title, .mw-information-box.yellow-black-ajah .mw-section-title { background: linear-gradient(to right, #e1bd15 0%, #e1bd15 75%, #000000 90%); } .mw-information-box.grey-ajah .mw-title, .mw-information-box.grey-ajah .mw-section-title { background: #737886; } .mw-information-box.grey-black-ajah .mw-title, .mw-information-box.grey-black-ajah .mw-section-title { background: linear-gradient(to right, #737886 0%, #737886 75%, #000000 90%); } .mw-information-box.black-ajah .mw-title, .mw-information-box.black-ajah .mw-section-title { background: #000000; color: #ffffff; } .mw-information-box.black-black-ajah .mw-title, .mw-information-box.black-black-ajah .mw-section-title { background: linear-gradient(to right, #000000 0%, #000000 75%, #000000 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=24867 »